add appointment view

package.json

@@ -40,6 +40,7 @@
     "@coreui/react-chartjs": "^2.0.0",
     "@coreui/utils": "^1.3.1",
     "@material-ui/core": "^4.12.4",
+    "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@mui/material": "^5.11.12",
     "@reduxjs/toolkit": "^1.9.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",

src/_nav.js

@@ -1,5 +1,5 @@
-import React from 'react'
+import React from "react";
-import CIcon from '@coreui/icons-react'
+import CIcon from "@coreui/icons-react";
 import {
   cilAddressBook,
   cilAirplaneMode,
@@ -7,6 +7,7 @@ import {
   cilBell,
   cilBrush,
   cilCalculator,
+  cilCalendar,
   cilCart,
   cilChartPie,
   cilClipboard,
@@ -36,25 +37,22 @@ import {
   cilTennisBall,
   cilText,
   cilUser,
-
+} from "@coreui/icons";
-
+import { CNavGroup, CNavItem, CNavTitle } from "@coreui/react";
-} from '@coreui/icons'
-import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
 
 const _nav = [
   {
     component: CNavItem,
-    name: 'Dashboard',
+    name: "Dashboard",
-    to: '/dashboard',
+    to: "/dashboard",
     icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
-
   },
 
   {
     component: CNavItem,
-    name: 'Products',
+    name: "Products",
     icon: <CIcon icon={cilClipboard} customClassName="nav-icon" />,
-    to: '/products',
+    to: "/products",
   },
   // {
   //   component: CNavItem,
@@ -64,15 +62,15 @@ const _nav = [
   // },
   {
     component: CNavItem,
-    name: 'Testimonials',
+    name: "Testimonials",
     icon: <CIcon icon={cilCompress} customClassName="nav-icon" />,
-    to: '/testimonials',
+    to: "/testimonials",
   },
   {
     component: CNavItem,
-    name: 'Contact Requests',
+    name: "Contact Requests",
     icon: <CIcon icon={cilContact} customClassName="nav-icon" />,
-    to: '/contact/request',
+    to: "/contact/request",
   },
 
   // {
@@ -84,78 +82,83 @@ const _nav = [
 
   {
     component: CNavItem,
-    name: 'Businesses',
+    name: "Appointments",
+    icon: <CIcon icon={cilCalendar} customClassName="nav-icon" />,
+    to: "/appointments",
+  },
+
+  {
+    component: CNavItem,
+    name: "HealthCare Providers",
     icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
-    to: '/businesses',
+    to: "/healthcare/providers",
   },
   {
     component: CNavGroup,
-    name: 'Franchisee Orders',
+    name: "Franchisee Orders",
     icon: <CIcon icon={cilCart} customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
-        name: 'New',
+        name: "New",
         icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
-        to: '/orders/new',
+        to: "/orders/new",
       },
       {
         component: CNavItem,
-        name: 'Paid',
+        name: "Paid",
         icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
-        to: '/orders/returned',
+        to: "/orders/returned",
       },
       {
         component: CNavItem,
-        name: 'Processing',
+        name: "Processing",
         icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
-        to: '/orders/processing',
+        to: "/orders/processing",
       },
       {
         component: CNavItem,
-        name: 'Dispatched',
+        name: "Dispatched",
         icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
-        to: '/orders/dispatched',
+        to: "/orders/dispatched",
       },
       {
         component: CNavItem,
-        name: 'Delivered',
+        name: "Delivered",
         icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
-        to: '/orders/delivered',
+        to: "/orders/delivered",
       },
       {
         component: CNavItem,
-        name: 'Cancelled',
+        name: "Cancelled",
         icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
-        to: '/orders/cancelled',
+        to: "/orders/cancelled",
       },
-
     ],
   },
 
-
   {
     component: CNavItem,
-    name: 'Users',
+    name: "Users",
     icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
-    to: '/users',
+    to: "/users",
   },
   {
     component: CNavGroup,
-    name: 'Configuration',
+    name: "Configuration",
     icon: <CIcon icon={cilAppsSettings} customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
-        name: 'Purpose',
+        name: "Purpose",
         icon: <CIcon icon={cilLoopCircular} customClassName="nav-icon" />,
-        to: '/purpose',
+        to: "/purpose",
       },
       {
         component: CNavItem,
-        name: 'Business Type',
+        name: "Business Type",
         icon: <CIcon icon={cilBrush} customClassName="nav-icon" />,
-        to: '/business_type',
+        to: "/business_type",
       },
 
       // {
@@ -190,52 +193,49 @@ const _nav = [
       // },
       {
         component: CNavItem,
-        name: 'Languages',
+        name: "Languages",
         icon: <CIcon icon={cilLanguage} customClassName="nav-icon" />,
-        to: '/languages',
+        to: "/languages",
       },
       {
         component: CNavItem,
-        name: 'Policies',
+        name: "Policies",
         icon: <CIcon icon={cilSwapHorizontal} customClassName="nav-icon" />,
-        to: '/policies',
+        to: "/policies",
       },
       {
         component: CNavItem,
-        name: 'Social Media',
+        name: "Social Media",
         icon: <CIcon icon={cilMedicalCross} customClassName="nav-icon" />,
-        to: '/socialmedia',
+        to: "/socialmedia",
       },
       {
         component: CNavItem,
-        name: 'Application Name',
+        name: "Application Name",
         icon: <CIcon icon={cilText} customClassName="nav-icon" />,
-        to: '/application/name',
+        to: "/application/name",
       },
 
       {
         component: CNavItem,
-        name: 'Address',
+        name: "Address",
         icon: <CIcon icon={cilAddressBook} customClassName="nav-icon" />,
-        to: '/address',
+        to: "/address",
       },
       {
         component: CNavItem,
-        name: 'Logos',
+        name: "Logos",
         icon: <CIcon icon={cilCommand} customClassName="nav-icon" />,
-        to: '/logo',
+        to: "/logo",
       },
       {
         component: CNavItem,
-        name: 'Copyright Message',
+        name: "Copyright Message",
         icon: <CIcon icon={cilText} customClassName="nav-icon" />,
-        to: '/copyright/message',
+        to: "/copyright/message",
       },
     ],
   },
+];
 
-
+export default _nav;
-
-]
-
-export default _nav

src/index.js

@@ -1,23 +1,23 @@
-import '@coreui/coreui/dist/css/coreui.min.css';
+import "@coreui/coreui/dist/css/coreui.min.css";
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/css/bootstrap.min.css";
-import 'react-app-polyfill/stable'
+import "react-app-polyfill/stable";
-import 'core-js'
+import "core-js";
-import React from 'react'
+import React from "react";
-import ReactDOM from 'react-dom'
+import ReactDOM from "react-dom";
-import App from './App'
+import App from "./App";
-import * as serviceWorker from './serviceWorker'
+import * as serviceWorker from "./serviceWorker";
-import { Provider } from 'react-redux'
+import { Provider } from "react-redux";
-import axios from 'axios'
+import axios from "axios";
-import { store } from './redux/store';
+import { store } from "./redux/store";
-import { cibGmail } from '@coreui/icons';
+import { cibGmail } from "@coreui/icons";
 
 const setupAxios = () => {
-  axios.defaults.baseURL = 'https://bolo-api.checkapp.one/'
+  //axios.defaults.baseURL = 'https://bolo-api.checkapp.one/'
-  //axios.defaults.baseURL = 'http://localhost:5000'
+  axios.defaults.baseURL = "http://localhost:5000";
   axios.defaults.headers = {
-    'Cache-Control': 'no-cache,no-store',
+    "Cache-Control": "no-cache,no-store",
-    'Pragma': 'no-cache',
+    Pragma: "no-cache",
-    'Expires': '0',
+    Expires: "0",
   };
 };
 
@@ -27,10 +27,10 @@ ReactDOM.render(
   <Provider store={store}>
     <App />
   </Provider>,
-  document.getElementById('root'),
+  document.getElementById("root")
-)
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister()
+serviceWorker.unregister();

src/routes.js

@@ -1,177 +1,241 @@
-import React from 'react'
+import React from "react";
-
 
 //  DashBoard
-const Change_Password = React.lazy(() => import('./views/pages/register/Change_password'))
+const Change_Password = React.lazy(() =>
+  import("./views/pages/register/Change_password")
+);
 
-
+import Profile from "./views/Profile/Profile";
-import Profile from './views/Profile/Profile'
+import EditProfile from "./views/Profile/EditProfile";
-import EditProfile from './views/Profile/EditProfile'
+const Dashboard = React.lazy(() => import("./views/dashboard/Dashboard"));
-const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
 ///
 //Cities
-import Cities from './views/configuration/Purpose/Purpose.js'
+import Cities from "./views/configuration/Purpose/Purpose.js";
-import AddCity from './views/configuration/Purpose/AddPurpose.js'
+import AddCity from "./views/configuration/Purpose/AddPurpose.js";
-import EditCity from './views/configuration/Purpose/EditPurpose.js'
+import EditCity from "./views/configuration/Purpose/EditPurpose.js";
 //states
-import EditState from './views/configuration/states/EditStates.js'
+import EditState from "./views/configuration/states/EditStates.js";
-import AddState from './views/configuration/states/AddState.js'
+import AddState from "./views/configuration/states/AddState.js";
-import States from './views/configuration/states/States.js'
+import States from "./views/configuration/states/States.js";
 //social media,address,logo
-import Socialmedia from './views/configuration/Socialmedia.js'
+import Socialmedia from "./views/configuration/Socialmedia.js";
-import Address from './views/configuration/Address.js'
+import Address from "./views/configuration/Address.js";
-import Logo from './views/configuration/Logo.js'
+import Logo from "./views/configuration/Logo.js";
-import Login from './views/pages/login/Login'
+import Login from "./views/pages/login/Login";
+
+// Appointments
+import Appointments from "./views/Appointments/Appointments";
 
 //Businesses
-import Businesses from './views/Business/Businesses.js'
+import Businesses from "./views/Business/Businesses.js";
-import AddBusiness from './views/Business/AddBusiness.js'
+import AddBusiness from "./views/Business/AddBusiness.js";
-import EditBusiness from './views/Business/EditBusiness.js'
+import EditBusiness from "./views/Business/EditBusiness.js";
-import Products from './views/Products/Products'
+import Products from "./views/Products/Products";
 //product
-import AddProduct from './views/Products/AddProduct'
+import AddProduct from "./views/Products/AddProduct";
-import EditProduct from './views/Products/EditProduct'
+import EditProduct from "./views/Products/EditProduct";
-import ViewProduct from './views/Products/ViewProduct'
+import ViewProduct from "./views/Products/ViewProduct";
 
 //Order Management
-import NewOrders from './views/orders/NewOrders.js'
+import NewOrders from "./views/orders/NewOrders.js";
-import ProcessingOrders from './views/orders/ProcessingOrders.js'
+import ProcessingOrders from "./views/orders/ProcessingOrders.js";
-import DispatchedOrders from './views/orders/DispatchedOrders.js'
+import DispatchedOrders from "./views/orders/DispatchedOrders.js";
-import DeliveredOrders from './views/orders/DeliveredOrders.js'
+import DeliveredOrders from "./views/orders/DeliveredOrders.js";
-import CancelledOrders from './views/orders/CancelledOrders.js'
+import CancelledOrders from "./views/orders/CancelledOrders.js";
-import ReturnedOrders from './views/orders/ReturnedOrders.js'
+import ReturnedOrders from "./views/orders/ReturnedOrders.js";
-import ViewOrder from './views/orders/ViewOrder'
+import ViewOrder from "./views/orders/ViewOrder";
-import AddOrder from './views/orders/AddOrder'
+import AddOrder from "./views/orders/AddOrder";
 //Taxes
-import Tax from './views/configuration/tax/Tax'
+import Tax from "./views/configuration/tax/Tax";
-import Addtax from './views/configuration/tax/Addtax'
+import Addtax from "./views/configuration/tax/Addtax";
-import Edittax from './views/configuration/tax/Edittax'
+import Edittax from "./views/configuration/tax/Edittax";
-import EditOrder from './views/orders/EditOrder'
+import EditOrder from "./views/orders/EditOrder";
-import ViewOrders from './views/orders/ViewOrders'
+import ViewOrders from "./views/orders/ViewOrders";
-import Departures from './views/Departures/Departures'
+import Departures from "./views/Departures/Departures";
-import AddDeparture from './views/Departures/AddDeparture'
+import AddDeparture from "./views/Departures/AddDeparture";
-import Informations from './views/Informations/Informations'
+import Informations from "./views/Informations/Informations";
-import AddInformations from './views/Informations/AddInformations'
+import AddInformations from "./views/Informations/AddInformations";
 
-import ApplicationName from './views/configuration/ApplicationName'
+import ApplicationName from "./views/configuration/ApplicationName";
-import CopyrightMessage from './views/configuration/CopyrightMessage'
+import CopyrightMessage from "./views/configuration/CopyrightMessage";
-import ContactRequests from './views/ContactRequests/ContactRequests'
+import ContactRequests from "./views/ContactRequests/ContactRequests";
-import AddContactRequest from './views/ContactRequests/AddContactRequest'
+import AddContactRequest from "./views/ContactRequests/AddContactRequest";
-import Testimonials from './views/Testimonials/Testimonials'
+import Testimonials from "./views/Testimonials/Testimonials";
-import AddTestimonial from './views/Testimonials/AddTestimonial'
+import AddTestimonial from "./views/Testimonials/AddTestimonial";
-import ViewTestimonial from './views/Testimonials/ViewTestimonial'
+import ViewTestimonial from "./views/Testimonials/ViewTestimonial";
-import Policies from './views/configuration/Policies/Policies'
+import Policies from "./views/configuration/Policies/Policies";
 ////purpose
-import Purpose from './views/configuration/Purpose/Purpose'
+import Purpose from "./views/configuration/Purpose/Purpose";
-import AddPurpose from './views/configuration/Purpose/AddPurpose'
+import AddPurpose from "./views/configuration/Purpose/AddPurpose";
 //language
-import Languages from './views/configuration/Language/Languages'
+import Languages from "./views/configuration/Language/Languages";
-import AddLanguage from './views/configuration/Language/AddLanguage'
+import AddLanguage from "./views/configuration/Language/AddLanguage";
-import EditLanguage from './views/configuration/Language/EditLanguage'
+import EditLanguage from "./views/configuration/Language/EditLanguage";
 //BusinessType
-import BusinessType from './views/configuration/Business_Type/Business'
+import BusinessType from "./views/configuration/Business_Type/Business";
-import AddBusinessType from './views/configuration/Business_Type/AddBusiness'
+import AddBusinessType from "./views/configuration/Business_Type/AddBusiness";
-import EditBusinessType from './views/configuration/Business_Type/EditLanguage'
+import EditBusinessType from "./views/configuration/Business_Type/EditLanguage";
-import EditPurpose from './views/configuration/Purpose/EditPurpose.js'
+import EditPurpose from "./views/configuration/Purpose/EditPurpose.js";
+import ViewAppointment from "./views/Appointments/ViewAppointment";
+import EditAppointment from "./views/Appointments/EditAppointment";
+import AddNewAppointment from "./views/Appointments/AddNewAppointment";
 const routes = [
-
+  { path: "/", exact: true, name: "Home" },
-  { path: '/', exact: true, name: 'Home' },
+  {
-  { path: '/change_password', name: 'Change Password', element: Change_Password },
+    path: "/change_password",
-  { path: '/profile/edit', name: 'Edit Profile', element: EditProfile },
+    name: "Change Password",
+    element: Change_Password,
+  },
+  { path: "/profile/edit", name: "Edit Profile", element: EditProfile },
   // { path: '/profile', name: 'Profile', element: Profile },
 
-
   //Product
-  { path: '/products', name: 'products', element: Products },
+  { path: "/products", name: "products", element: Products },
-  { path: '/product/add', name: 'Add products', element: AddProduct },
+  { path: "/product/add", name: "Add products", element: AddProduct },
-  { path: '/product/edit/:id', name: 'Edit products', element: EditProduct },
+  { path: "/product/edit/:id", name: "Edit products", element: EditProduct },
-  { path: '/product/view/:id', name: 'view products', element: ViewProduct },
+  { path: "/product/view/:id", name: "view products", element: ViewProduct },
   //Departure
-  { path: '/departures', name: 'Departures', element: Departures },
+  { path: "/departures", name: "Departures", element: Departures },
-  { path: '/departure/add', name: 'Add Departure', element: AddDeparture },
+  { path: "/departure/add", name: "Add Departure", element: AddDeparture },
-  { path: '/product/edit/:id', name: 'Edit products', element: EditProduct },
+  { path: "/product/edit/:id", name: "Edit products", element: EditProduct },
-  { path: '/product/view/:id', name: 'view products', element: ViewProduct },
+  { path: "/product/view/:id", name: "view products", element: ViewProduct },
-  //Franchisee
+
-  { path: '/businesses', name: 'business', element: Businesses },
+  // Appointments
-  { path: '/business/add', name: 'Add business', element: AddBusiness },
+  { path: "/appointments", name: "Appointments", element: Appointments },
-  { path: '/business/edit/:id', name: 'Edit business', element: EditBusiness },
+  {
+    path: "/appointment/view/:id",
+    name: "View Appointment",
+    element: ViewAppointment,
+  },
+  {
+    path: "/appointment/edit/:id",
+    name: "Edit Appointment",
+    element: EditAppointment,
+  },
+  {
+    path: "/appointment/new",
+    name: "Add Appointment",
+    element: AddNewAppointment,
+  },
+
+  // health care providers
+  {
+    path: "//healthcare/providers",
+    name: "healthcare providers",
+    element: Businesses,
+  },
+  {
+    path: "//healthcare/providers/add",
+    name: "Add healthcare providers",
+    element: AddBusiness,
+  },
+  {
+    path: "/healthcare/providers/edit/:id",
+    name: "Edit healthcare providers",
+    element: EditBusiness,
+  },
+
   // { path: '/franchisee/view/:id', name: 'view franchisee', element: ViewFra },
   //Contact Requests
-  { path: '/contact/request', name: 'Contact Requests', element: ContactRequests },
+  {
-  { path: '/contact/request/new', name: 'AddContact Request', element: AddContactRequest },
+    path: "/contact/request",
+    name: "Contact Requests",
+    element: ContactRequests,
+  },
+  {
+    path: "/contact/request/new",
+    name: "AddContact Request",
+    element: AddContactRequest,
+  },
   // { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint },
   //Complaints
-  { path: '/testimonials', name: 'Testimonials', element: Testimonials },
+  { path: "/testimonials", name: "Testimonials", element: Testimonials },
-  { path: '/testimonial/new', name: 'AddTestimonial', element: AddTestimonial },
+  { path: "/testimonial/new", name: "AddTestimonial", element: AddTestimonial },
-  { path: '/testimonial/view/:id', name: 'ViewTestimonial', element: ViewTestimonial },
+  {
+    path: "/testimonial/view/:id",
+    name: "ViewTestimonial",
+    element: ViewTestimonial,
+  },
   //informations
-  { path: '/informations', name: 'Informations', element: Informations },
+  { path: "/informations", name: "Informations", element: Informations },
-  { path: '/information/new', name: 'Add Informations', element: AddInformations },
+  {
+    path: "/information/new",
+    name: "Add Informations",
+    element: AddInformations,
+  },
 
   //Order Management
 
-
+  { path: "/orders/new", name: "New Orders", element: NewOrders },
-  { path: '/orders/new', name: 'New Orders', element: NewOrders },
+  { path: "/order/add", name: "add Order", element: AddOrder },
-  { path: '/order/add', name: 'add Order', element: AddOrder },
+  { path: "/orders/edit/:id", name: "Edit Order", element: EditOrder },
-  { path: '/orders/edit/:id', name: 'Edit Order', element: EditOrder },
+  { path: "/orders/view/:id", name: "View Order", element: ViewOrders },
-  { path: '/orders/view/:id', name: 'View Order', element: ViewOrders },
 
   // { path: '/orders/processing', name: 'Processing Orders', element: ProcessingOrders },
   // { path: '/orders/dispatched', name: 'Dispatched Orders', element: DispatchedOrders },
   // { path: '/orders/delivered', name: 'Delivered Orders', element: DeliveredOrders },
   // { path: '/orders/cancelled', name: 'Cancelled Orders', element: CancelledOrders },
   // { path: '/orders/returned', name: 'Returned Orders', element: ReturnedOrders },
-  { path: '/order/:status/:id', name: 'View Order', element: ViewOrder },
+  { path: "/order/:status/:id", name: "View Order", element: ViewOrder },
-
-
-
 
   //dashboard
 
-  { path: '/dashboard', name: 'Dashboard', element: Dashboard },
+  { path: "/dashboard", name: "Dashboard", element: Dashboard },
 
   //------------settings------------------------//
 
-  { path: '/policies', name: 'Policies', element: Policies },
+  { path: "/policies", name: "Policies", element: Policies },
 
-  { path: '/socialmedia', name: 'Social Media', element: Socialmedia },
+  { path: "/socialmedia", name: "Social Media", element: Socialmedia },
-  { path: '/purpose', name: 'Purpose', element: Purpose },
+  { path: "/purpose", name: "Purpose", element: Purpose },
-  { path: '/purpose/add', name: 'Add Purpose', element: AddPurpose },
+  { path: "/purpose/add", name: "Add Purpose", element: AddPurpose },
   //languge
 
-  { path: '/languages', name: 'languages', element: Languages },
+  { path: "/languages", name: "languages", element: Languages },
-  { path: '/language/add', name: 'Add languages', element: AddLanguage },
+  { path: "/language/add", name: "Add languages", element: AddLanguage },
-  { path: '/language/edit/:id', name: 'Edit languages', element: EditLanguage },
+  { path: "/language/edit/:id", name: "Edit languages", element: EditLanguage },
   //business Type
 
-  { path: '/business_type', name: 'business', element: BusinessType },
+  { 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 },
+    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", name: "purpose", element: Purpose },
-  { path: '/purpose/add', name: 'Add purpose', element: AddPurpose },
+  { path: "/purpose/add", name: "Add purpose", element: AddPurpose },
-  { path: '/purpose/edit/:id', name: 'Edit purpose', element: EditPurpose },
+  { path: "/purpose/edit/:id", name: "Edit purpose", element: EditPurpose },
 
   //languge
-  { path: '/application/name', name: 'ApplicationName', element: ApplicationName },
+  {
-  { path: '/copyright/message', name: 'Copyright Message', element: CopyrightMessage },
+    path: "/application/name",
+    name: "ApplicationName",
+    element: ApplicationName,
+  },
+  {
+    path: "/copyright/message",
+    name: "Copyright Message",
+    element: CopyrightMessage,
+  },
 
-
+  { path: "/address", name: "Address", element: Address },
-  { path: '/address', name: 'Address', element: Address },
+  { path: "/logo", name: "Logo", element: Logo },
-  { path: '/logo', name: 'Logo', element: Logo },
 
   //Taxes
-  { path: '/tax', name: 'Tax Rates', element: Tax },
+  { path: "/tax", name: "Tax Rates", element: Tax },
-  { path: '/tax/add', name: 'Add Tax', element: Addtax },
+  { path: "/tax/add", name: "Add Tax", element: Addtax },
-  { path: '/tax/edit/:id', name: 'Edit Tax', element: Edittax },
+  { path: "/tax/edit/:id", name: "Edit Tax", element: Edittax },
   // -------------------------------------------//
 
-
   //
+];
 
-
+export default routes;
-]
-
-export default routes

src/scss/_custom.scss

@@ -1,9 +1,23 @@
 // Here you can add other styles
-$a-tags: 'a, a:active, a:hover, a:visited';
+$a-tags: "a, a:active, a:hover, a:visited";
 #{$a-tags} {
-    text-decoration: none;
+  text-decoration: none;
-  }
+}
-  .overflow-table { display: block; max-width: -moz-fit-content; max-width: fit-content; overflow-x: auto; white-space: nowrap; }
+.overflow-table {
-  .edit_text{
+  display: block;
-    width: 22%;
+  max-width: -moz-fit-content;
-  }
+  max-width: fit-content;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+.edit_text {
+  width: 22%;
+}
+
+.highlighted-row {
+  background-color: yellow;
+}
+
+.past-row {
+  background-color: #f2f2f2;
+}

src/views/Appointments/AddNewAppointment.js

@@ -0,0 +1,397 @@
+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 { CFormSelect, CInputGroup } from "@coreui/react";
+import DatePicker from "react-datepicker";
+
+import "react-datepicker/dist/react-datepicker.css";
+
+const AddNewAppointment = () => {
+  const token = isAutheticated();
+  const navigate = useNavigate();
+  const [doctors, setDoctors] = useState([]);
+  const [data, setData] = useState({
+    doctorId: "",
+    doctorName: "",
+    date: "",
+    time: "",
+    patientName: "",
+    patientPhone: "",
+  });
+
+  const [loading, setLoading] = useState(false);
+
+  const getDoctors = () => {
+    axios
+      .get("/api/specialist/getall")
+      .then((res) => {
+        setDoctors(res.data.specialist);
+      })
+      .catch((err) => {
+        swal("Error", "Could not get data", "error");
+      });
+  };
+
+  useEffect(() => {
+    getDoctors();
+  }, []);
+
+  // doctor options with placeholder select doctor
+  const doctorOptions = [
+    ...doctors.map((doctor) => ({
+      label: doctor.specialistName,
+      value: doctor._id,
+    })),
+  ];
+
+  // reusable to get weekdays from index and vice-versa
+  const weekdays = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
+  const getWeekday = (index) => {
+    return weekdays[index];
+  };
+  const getWeekdayIndex = (day) => {
+    return weekdays.indexOf(day);
+  };
+
+  const [availableDays, setAvailableDays] = useState([]);
+
+  const [filterDay, setFilterDay] = useState([]);
+
+  const [perPatientTime, setPerPatientTime] = useState();
+
+  // handle doctor change
+  const handleDoctorChange = (e) => {
+    const doctorId = e.target.value;
+    const doctor = doctors.find((doctor) => doctor._id === doctorId);
+    //filter available days for selected Doctor
+    const availableDays = doctor.daysAvailable.filter(
+      (day) => day.available === true
+    );
+    // filter day number with available days for Date picker
+    const filterDay = availableDays.map((day) => {
+      return getWeekdayIndex(day.label);
+    });
+    setFilterDay(filterDay);
+    setPerPatientTime(doctor.perPatientTime);
+    setAvailableDays(availableDays);
+    setData((prev) => ({
+      ...prev,
+      doctorId: doctorId,
+      doctorName: doctor.specialistName,
+      date: "",
+      time: "",
+    }));
+  };
+
+  // find selected day from available days
+  const findSelectedDay = (day) => {
+    const selectedDay = availableDays.filter((days) => days.label === day);
+    return selectedDay;
+  };
+
+  const [timeOptions, setTimeOptions] = useState([]);
+
+  // create time options with label and value from timeSlots array
+  // const createTimeOptions = (timeSlots, patientTime) => {
+  //   // create time interval of perPatientTime min from start time to end time and push it to timeOptions array with label and value
+  // };
+
+  const createTimeOptions = (timeSlots, patientTime) => {
+    const timeOptions = [];
+
+    timeSlots.forEach((timeSlot) => {
+      const startTime = new Date(`January 1, 2022 ${timeSlot.startTime}`);
+      const endTime = new Date(`January 1, 2022 ${timeSlot.endTime}`);
+
+      // Create time intervals of 'patientTime' minutes from start time to end time
+      let intervalTime = startTime;
+      while (intervalTime < endTime) {
+        const intervalEnd = new Date(
+          intervalTime.getTime() + patientTime * 60000
+        );
+        const timeLabel = `${intervalTime.toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        })} - ${intervalEnd.toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        })}`;
+        const timeValue = intervalTime.toISOString();
+        timeOptions.push({ label: timeLabel, value: timeValue });
+        intervalTime = intervalEnd;
+      }
+    });
+
+    return timeOptions;
+  };
+
+  // handle date change
+  const handleDateChange = async (date) => {
+    const day = getWeekday(date.getDay());
+    const selectedDay = findSelectedDay(day);
+
+    const timeOptions = await createTimeOptions(
+      selectedDay[0].timeSlots,
+      perPatientTime
+    );
+    await setTimeOptions(timeOptions);
+    setData((prev) => ({
+      ...prev,
+      date: date,
+      time: "",
+    }));
+  };
+
+  //   0
+  // :
+  // endTime
+  // :
+  // "20:39"
+  // startTime
+  // :
+  // "18:37"
+  // _id
+  // :
+  // "642a9679d243d8ac7d51fa75
+
+  const handleChange = (e) => {
+    setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
+  };
+
+  const handleSubmit = () => {
+    if (
+      data.doctorName.trim() === "" ||
+      data.date === "" ||
+      data.time === "" ||
+      data.patientName.trim() === "" ||
+      data.patientPhone.trim() === ""
+    ) {
+      swal({
+        title: "Warning",
+        text: "Fill all mandatory fields",
+        icon: "error",
+        button: "Close",
+        dangerMode: true,
+      });
+      return;
+    }
+    setLoading(true);
+    const formData = new FormData();
+    formData.set("doctorId", data.doctorId);
+    formData.set("doctorName", data.doctorName);
+    formData.set("date", data.date);
+    formData.set("time", data.time);
+    formData.set("patientName", data.patientName);
+    formData.set("patientPhone", data.patientPhone);
+
+    axios
+      .post(`/api/appointment/new/`, formData, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/formdata",
+          "Access-Control-Allow-Origin": "*",
+        },
+      })
+      .then((res) => {
+        swal({
+          title: "Added",
+          text: "appointment added successfully!",
+          icon: "success",
+          button: "ok",
+        });
+        setLoading(false);
+        navigate("/appointments", { 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 Appointment
+            </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" : "Add"}
+              </Button>
+              <Link to="/appointments">
+                <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="doctorName" className="form-label">
+                  Doctor Name *
+                </label>
+
+                <select
+                  type="select"
+                  className="form-control"
+                  id="doctorName"
+                  name="doctorName"
+                  onChange={(e) => handleDoctorChange(e)}
+                  options={doctorOptions}
+                >
+                  <option hidden>Select Doctor</option>
+                  {doctorOptions.map((doctor) => (
+                    <option value={doctor.value} key={doctor.label}>
+                      {doctor.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {data.doctorId && (
+                <div className="mb-3">
+                  <label htmlFor="date" className="form-label">
+                    Date *
+                  </label>
+                  <DatePicker
+                    type="date"
+                    className="form-control"
+                    id="date"
+                    name="date"
+                    selected={data.date}
+                    onChange={(e) => handleDateChange(e)}
+                    dateFormat="dd/MM/yyyy"
+                    minDate={new Date()}
+                    placeholderText="Select a date"
+                    filterDate={(date) => {
+                      return filterDay.includes(date.getDay());
+                    }}
+                  />
+                </div>
+              )}
+
+              {data.date && (
+                <div className="mb-3">
+                  <label htmlFor="time" className="form-label">
+                    Time *
+                  </label>
+                  <select
+                    type="select"
+                    className="form-control"
+                    id="time"
+                    name="time"
+                    value={data.time}
+                    options={timeOptions}
+                    onChange={(e) => handleChange(e)}
+                  >
+                    <option hidden>Select Time</option>
+                    {timeOptions.map((time) => (
+                      <option value={time.value} key={time.label}>
+                        {time.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              )}
+
+              <div className="mb-3">
+                <label htmlFor="patientName" className="form-label">
+                  Patient Name *
+                </label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="patientName"
+                  value={data.patientName}
+                  placeholder="Enter Patient Name"
+                  maxLength="100"
+                  onChange={(e) => handleChange(e)}
+                ></input>
+                {data.patientName ? (
+                  <>
+                    <small className="charLeft mt-4 fst-italic">
+                      {100 - data.patientName.length} characters left
+                    </small>
+                  </>
+                ) : (
+                  <></>
+                )}
+              </div>
+              <div className="mb-3">
+                <label htmlFor="patientPhone" className="form-label">
+                  Patient Phone *
+                </label>
+                <input
+                  type="tel"
+                  className="form-control"
+                  id="patientPhone"
+                  value={data.patientPhone}
+                  placeholder="Enter Patient Phone"
+                  maxLength="10"
+                  onChange={(e) => handleChange(e)}
+                ></input>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddNewAppointment;

src/views/Appointments/Appointments.js

@@ -0,0 +1,507 @@
+import axios from "axios";
+import React from "react";
+import { useEffect } from "react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { isAutheticated } from "../../auth";
+import Button from "@material-ui/core/Button";
+import { Link } from "@material-ui/core";
+import {
+  DataGrid,
+  GridCellProps,
+  GridRenderCellParams,
+} from "@material-ui/data-grid";
+import CIcon from "@coreui/icons-react";
+import { cilTrash } from "@coreui/icons";
+
+const Appointments = () => {
+  const token = isAutheticated();
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(true);
+  const [success, setSuccess] = useState(true);
+  const [AppointmentData, setAppointmentData] = useState([]);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemPerPage, setItemPerPage] = useState(10);
+  const [showData, setShowData] = useState(AppointmentData);
+
+  const handleShowEntries = (e) => {
+    setCurrentPage(1);
+    setItemPerPage(e.target.value);
+  };
+
+  const getAppointmentData = async () => {
+    axios
+      .get(`/api/appointment/getAll/`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        // convert date from utc to local
+
+        const appointments = res.data.appointments;
+
+        appointments.forEach((item) => {
+          //convert date from utc to local and make it in dd/mm/yyyy format month is in short form like jan,feb and add 0 before single digit date like 01,02
+          item.date = new Date(item.date).toLocaleDateString("en-IN", {
+            day: "numeric",
+            month: "short",
+            year: "numeric",
+          });
+
+          // add leading zeros to single digit dates
+          item.date = item.date.replace(
+            /(\d{1,2})\s(\w{3})\s(\d{4})/,
+            function (match, day, month, year) {
+              return `${day.padStart(2, "0")} ${month} ${year}`;
+            }
+          );
+
+          //convert time from utc to local till minutes
+          item.time = new Date(item.time).toLocaleTimeString("en-IN", {
+            hour: "2-digit",
+            minute: "2-digit",
+          });
+        });
+
+        // sort by date
+        // appointments.sort((a, b) => {
+        //   return new Date(b.date) - new Date(a.date);
+        // });
+
+        // sort by date in descending order
+        appointments.sort((a, b) => {
+          const dateA = new Date(a.date);
+          const dateB = new Date(b.date);
+          return dateB.getTime() - dateA.getTime();
+        });
+
+        setAppointmentData(appointments);
+
+        setLoading(false);
+      })
+
+      .catch((err) => {
+        setLoading(false);
+      });
+  };
+
+  // create columns for data grid table from appointment data
+  const columns = [
+    {
+      field: "doctorName",
+      headerName: "Doctor Name",
+      minWidth: 180,
+      flex: 1,
+      editable: false,
+    },
+    {
+      field: "patientName",
+      headerName: "Patient Name",
+      minWidth: 150,
+      flex: 1,
+      editable: false,
+    },
+    {
+      field: "patientPhone",
+      headerName: "Patient Phone",
+      minWidth: 150,
+      flex: 1,
+      editable: false,
+    },
+    {
+      field: "date",
+      headerName: "Date",
+      minWidth: 120,
+      flex: 1,
+      editable: false,
+    },
+    {
+      field: "time",
+      headerName: "Time",
+      minWidth: 110,
+      flex: 1,
+      editable: false,
+    },
+
+    {
+      field: "action",
+      headerName: "Action",
+      minWidth: 180,
+      flex: 1,
+      // view edit and delete
+      renderCell: (params) => {
+        return (
+          <div>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={() => handleView(params.row._id)}
+            >
+              View
+            </Button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  useEffect(() => {
+    getAppointmentData();
+  }, [success]);
+
+  useEffect(() => {
+    const loadData = () => {
+      const indexOfLastPost = currentPage * itemPerPage;
+      const indexOfFirstPost = indexOfLastPost - itemPerPage;
+      setShowData(AppointmentData.slice(indexOfFirstPost, indexOfLastPost));
+    };
+    loadData();
+  }, [currentPage, itemPerPage, AppointmentData]);
+
+  // create rows for data grid table from appointment data
+  const rows = showData.map((item, index) => {
+    return {
+      id: index + 1,
+      appointmentNumber: item.appointmentNumber,
+      _id: item._id,
+      doctorName: item.doctorName,
+      date: item.date,
+      time: item.time,
+      patientName: item.patientName,
+      patientPhone: item.patientPhone,
+    };
+  });
+
+  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/appointment/delete/${id}`, {
+            headers: {
+              "Access-Control-Allow-Origin": "*",
+              Authorization: `Bearer ${token}`,
+            },
+          })
+          .then((res) => {
+            swal({
+              title: "Success",
+              text: "Appointment deleted successfully!",
+              icon: "success",
+              button: "Ok",
+            });
+            setSuccess((prev) => !prev);
+          })
+          .catch((err) => {
+            swal({
+              title: "Warning",
+              text: "Something went wrong!",
+              icon: "error",
+              button: "Retry",
+              dangerMode: true,
+            });
+          });
+      }
+    });
+  };
+
+  const handleView = (id) => {
+    navigate(`/appointment/view/${id}`);
+  };
+
+  const handleEdit = (id) => {
+    navigate(`/appointment/edit/${id}`);
+  };
+
+  const handleSearch = (e) => {
+    const searchValue = e.target.value;
+    const filteredData = AppointmentData.filter((item) => {
+      return (
+        item.appointmentNumber
+          .toLowerCase()
+          .includes(searchValue.toLowerCase()) ||
+        item.doctorName.toLowerCase().includes(searchValue.toLowerCase()) ||
+        item.patientName.toLowerCase().includes(searchValue.toLowerCase()) ||
+        item.patientPhone.toLowerCase().includes(searchValue.toLowerCase()) ||
+        item.date.toLowerCase().includes(searchValue.toLowerCase())
+      );
+    });
+    setShowData(filteredData);
+  };
+
+  // const handlePageChange = (e, page) => {
+  //   setCurrentPage(page);
+  // };
+
+  function compareDates(a, b) {
+    const dateA = new Date(a.date);
+    const dateB = new Date(b.date);
+    if (dateA < dateB) {
+      return -1;
+    }
+    if (dateA > dateB) {
+      return 1;
+    }
+    return 0;
+  }
+
+  const initialSortModel = [
+    {
+      field: "date",
+      sort: "asc",
+    },
+  ];
+
+  const getRowClassName = (params) => {
+    // get row date and current date in same format and compare
+    const rowDate = new Date(params.row.date);
+    const currentDate = new Date().setHours(0, 0, 0, 0);
+
+    if (rowDate < currentDate) {
+      return "past-row";
+    }
+
+    // if (params.row.id === 2) {
+    //   return "highlighted-row";
+    // }
+    return "";
+  };
+
+  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">
+                  Appointments
+                </div>
+
+                {/*<div className="page-title-right">
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    style={{
+                      fontWeight: "bold",
+                      marginBottom: "1rem",
+                      textTransform: "capitalize",
+                    }}
+                    onClick={() => {
+                      navigate("/appointment/new", { replace: true });
+                    }}
+                  >
+                    Add New Appointment
+                  </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 entries
+                          <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>
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+
+                  {!loading ? (
+                    <div className="row mt-20">
+                      <div className="col-sm-12 col-md-12">
+                        <div className="dataTables_length">
+                          <label className="w-100">
+                            Search
+                            <input
+                              type="text"
+                              className="form-control form-control-sm"
+                              placeholder="Search by doctor name, patient name, patient phone, date"
+                              onChange={(e) => handleSearch(e)}
+                            />
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  ) : null}
+
+                  <div style={{ height: 400, width: "100%" }}>
+                    <DataGrid
+                      getRowHeight={() => "auto"}
+                      columns={columns}
+                      rows={rows}
+                      pageSize={itemPerPage}
+                      rowCount={AppointmentData.length}
+                      className="table-responsive"
+                      getRowClassName={getRowClassName}
+                      sx={{
+                        "& .MuiDataGrid-cell": {
+                          display: "block",
+                        },
+                        ".MuiDataGrid-root .MuiDataGrid-cell": {
+                          whiteSpace: "normal",
+                          wordWrap: "breakWord",
+                        },
+                      }}
+                      initialState={{
+                        ...rows.initialState,
+                        sorting: {
+                          ...rows.initialState?.sorting,
+                          sortModel: [
+                            {
+                              field: "date",
+                              sort: "desc",
+                            },
+                          ],
+                          sortComparator: { compareDates },
+                        },
+                      }}
+                      {...rows}
+                    />
+                  </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,
+                          AppointmentData.length
+                        )}{" "}
+                        of {AppointmentData.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 >
+                            AppointmentData.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 >
+                                AppointmentData.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 Appointments;

src/views/Appointments/EditAppointment.js

@@ -0,0 +1,443 @@
+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 { CFormSelect, CInputGroup } from "@coreui/react";
+import DatePicker from "react-datepicker";
+
+import "react-datepicker/dist/react-datepicker.css";
+
+const EditAppointment = () => {
+  const token = isAutheticated();
+  const navigate = useNavigate();
+  const [doctors, setDoctors] = useState([]);
+  const [data, setData] = useState({
+    doctorId: "",
+    doctorName: "",
+    date: "",
+    time: "",
+    patientName: "",
+    patientPhone: "",
+  });
+
+  const [loading, setLoading] = useState(false);
+
+  const getDoctors = () => {
+    axios
+      .get("/api/specialist/getall")
+      .then((res) => {
+        setDoctors(res.data.specialist);
+      })
+      .catch((err) => {
+        swal("Error", "Could not get data", "error");
+      });
+  };
+
+  useEffect(() => {
+    getDoctors();
+  }, []);
+
+  // doctor options with placeholder select doctor
+  const doctorOptions = [
+    ...doctors.map((doctor) => ({
+      label: doctor.specialistName,
+      value: doctor._id,
+    })),
+  ];
+
+  // reusable to get weekdays from index and vice-versa
+  const weekdays = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
+  const getWeekday = (index) => {
+    return weekdays[index];
+  };
+  const getWeekdayIndex = (day) => {
+    return weekdays.indexOf(day);
+  };
+
+  const [availableDays, setAvailableDays] = useState([]);
+
+  const [filterDay, setFilterDay] = useState([]);
+
+  const [perPatientTime, setPerPatientTime] = useState();
+
+  const [currentAppointment, setCurrentAppointment] = useState({});
+
+  const { id } = useParams();
+
+  // get appointment by id
+  const getAppointment = () => {
+    setLoading(true);
+    axios
+      .get(`/api/appointment/get/${id}`)
+      .then((res) => {
+        const appointment = res.data.appointment;
+
+        appointment.date = new Date(appointment.date).toISOString("en-IN");
+        appointment.time = new Date(appointment.time).toLocaleTimeString(
+          "en-IN",
+          {
+            hour: "2-digit",
+            minute: "2-digit",
+          }
+        );
+
+        setCurrentAppointment(appointment);
+        setLoading(false);
+      })
+      .catch((err) => {
+        swal("Error", "Could not get data", "error");
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    getAppointment();
+  }, []);
+
+  useEffect(() => {
+    setData((prev) => ({
+      ...prev,
+      //doctorId: currentAppointment.doctorId,
+      //doctorName: currentAppointment.doctorName,
+      //date: currentAppointment.date,
+      ///time: currentAppointment.time,
+      patientName: currentAppointment.patientName,
+      patientPhone: currentAppointment.patientPhone,
+    }));
+  }, [currentAppointment]);
+
+  // handle doctor change
+  const handleDoctorChange = (e) => {
+    const doctorId = e.target.value;
+    const doctor = doctors.find((doctor) => doctor._id === doctorId);
+    //filter available days for selected Doctor
+    const availableDays = doctor.daysAvailable.filter(
+      (day) => day.available === true
+    );
+    // filter day number with available days for Date picker
+    const filterDay = availableDays.map((day) => {
+      return getWeekdayIndex(day.label);
+    });
+    setFilterDay(filterDay);
+    setPerPatientTime(doctor.perPatientTime);
+    setAvailableDays(availableDays);
+    setData((prev) => ({
+      ...prev,
+      doctorId: doctorId,
+      doctorName: doctor.specialistName,
+      date: "",
+      time: "",
+    }));
+  };
+
+  // find selected day from available days
+  const findSelectedDay = (day) => {
+    const selectedDay = availableDays.filter((days) => days.label === day);
+    return selectedDay;
+  };
+
+  const [timeOptions, setTimeOptions] = useState([]);
+
+  // create time options with label and value from timeSlots array
+  // const createTimeOptions = (timeSlots, patientTime) => {
+  //   // create time interval of perPatientTime min from start time to end time and push it to timeOptions array with label and value
+  // };
+
+  const createTimeOptions = (timeSlots, patientTime) => {
+    const timeOptions = [];
+
+    timeSlots.forEach((timeSlot) => {
+      const startTime = new Date(`January 1, 2022 ${timeSlot.startTime}`);
+      const endTime = new Date(`January 1, 2022 ${timeSlot.endTime}`);
+
+      // Create time intervals of 'patientTime' minutes from start time to end time
+      let intervalTime = startTime;
+      while (intervalTime < endTime) {
+        const intervalEnd = new Date(
+          intervalTime.getTime() + patientTime * 60000
+        );
+        const timeLabel = `${intervalTime.toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        })} - ${intervalEnd.toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        })}`;
+        const timeValue = intervalTime.toISOString();
+        timeOptions.push({ label: timeLabel, value: timeValue });
+        intervalTime = intervalEnd;
+      }
+    });
+
+    return timeOptions;
+  };
+
+  // handle date change
+  const handleDateChange = async (date) => {
+    const day = getWeekday(date.getDay());
+    const selectedDay = findSelectedDay(day);
+
+    const timeOptions = await createTimeOptions(
+      selectedDay[0].timeSlots,
+      perPatientTime
+    );
+    await setTimeOptions(timeOptions);
+    setData((prev) => ({
+      ...prev,
+      date: date,
+      time: "",
+    }));
+  };
+
+  //   0
+  // :
+  // endTime
+  // :
+  // "20:39"
+  // startTime
+  // :
+  // "18:37"
+  // _id
+  // :
+  // "642a9679d243d8ac7d51fa75
+
+  const handleChange = (e) => {
+    setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
+  };
+
+  const handleSubmit = () => {
+    if (
+      data.doctorName.trim() === "" ||
+      data.date === "" ||
+      data.time === "" ||
+      data.patientName.trim() === "" ||
+      data.patientPhone.trim() === ""
+    ) {
+      swal({
+        title: "Warning",
+        text: "Fill all mandatory fields",
+        icon: "error",
+        button: "Close",
+        dangerMode: true,
+      });
+      return;
+    }
+    setLoading(true);
+    const formData = new FormData();
+    formData.set("doctorId", data.doctorId);
+    formData.set("doctorName", data.doctorName);
+    formData.set("date", data.date);
+    formData.set("time", data.time);
+    formData.set("patientName", data.patientName);
+    formData.set("patientPhone", data.patientPhone);
+
+    axios
+      .patch(`/api/appointment/update/${id}`, formData, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/formdata",
+          "Access-Control-Allow-Origin": "*",
+        },
+      })
+      .then((res) => {
+        swal({
+          title: "Updated",
+          text: "appointment updated successfully!",
+          icon: "success",
+          button: "ok",
+        });
+        setLoading(false);
+        navigate("/appointments", { 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">
+              Edit Appointment
+            </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="/appointments">
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  style={{
+                    fontWeight: "bold",
+                    marginBottom: "1rem",
+                    textTransform: "capitalize",
+                  }}
+                >
+                  Cancel
+                </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="doctorName" className="form-label">
+                  Doctor Name *
+                </label>
+
+                <select
+                  type="select"
+                  className="form-control"
+                  id="doctorName"
+                  name="doctorName"
+                  onChange={(e) => handleDoctorChange(e)}
+                  options={doctorOptions}
+                >
+                  <option hidden>Select Doctor</option>
+                  {doctorOptions.map((doctor) => (
+                    <option value={doctor.value} key={doctor.label}>
+                      {doctor.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {data.doctorId && (
+                <div className="mb-3">
+                  <label htmlFor="date" className="form-label">
+                    Date *
+                  </label>
+                  <DatePicker
+                    type="date"
+                    className="form-control"
+                    id="date"
+                    name="date"
+                    selected={data.date}
+                    onChange={(e) => handleDateChange(e)}
+                    dateFormat="dd/MM/yyyy"
+                    minDate={new Date()}
+                    placeholderText="Select a date"
+                    filterDate={(date) => {
+                      return filterDay.includes(date.getDay());
+                    }}
+                  />
+                </div>
+              )}
+
+              {data.date && (
+                <div className="mb-3">
+                  <label htmlFor="time" className="form-label">
+                    Time *
+                  </label>
+                  <select
+                    type="select"
+                    className="form-control"
+                    id="time"
+                    name="time"
+                    value={data.time}
+                    options={timeOptions}
+                    onChange={(e) => handleChange(e)}
+                  >
+                    <option hidden>Select Time</option>
+                    {timeOptions.map((time) => (
+                      <option value={time.value} key={time.label}>
+                        {time.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              )}
+
+              <div className="mb-3">
+                <label htmlFor="patientName" className="form-label">
+                  Patient Name *
+                </label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="patientName"
+                  value={data.patientName}
+                  placeholder="Enter Patient Name"
+                  maxLength="100"
+                  onChange={(e) => handleChange(e)}
+                ></input>
+                {data.patientName ? (
+                  <>
+                    <small className="charLeft mt-4 fst-italic">
+                      {100 - data.patientName.length} characters left
+                    </small>
+                  </>
+                ) : (
+                  <></>
+                )}
+              </div>
+              <div className="mb-3">
+                <label htmlFor="patientPhone" className="form-label">
+                  Patient Phone *
+                </label>
+                <input
+                  type="tel"
+                  className="form-control"
+                  id="patientPhone"
+                  value={data.patientPhone}
+                  placeholder="Enter Patient Phone"
+                  maxLength="10"
+                  onChange={(e) => handleChange(e)}
+                ></input>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EditAppointment;

src/views/Appointments/ViewAppointment.js

@@ -0,0 +1,153 @@
+import axios from "axios";
+import React from "react";
+import { useState } from "react";
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import Button from "@material-ui/core/Button";
+
+const ViewAppointment = () => {
+  const [appointmentData, setAppointmentData] = useState();
+
+  const [loading, setLoading] = useState(false);
+
+  const { id } = useParams();
+
+  const getAppointment = () => {
+    setLoading(true);
+    axios
+      .get(`/api/appointment/get/${id}`)
+      .then(async (res) => {
+        res.data.appointment.date = await new Date(
+          res.data.appointment?.date
+        ).toLocaleDateString("en-IN", {
+          day: "numeric",
+          month: "short",
+          year: "numeric",
+        });
+
+        // add leading zeros to single digit dates
+        res.data.appointment.date = await res.data.appointment.date.replace(
+          /(\d{1,2})\s(\w{3})\s(\d{4})/,
+          function (match, day, month, year) {
+            return `${day.padStart(2, "0")} ${month} ${year}`;
+          }
+        );
+        setAppointmentData(res.data.appointment);
+        setLoading(false);
+      })
+      .catch((err) => {
+        swal("Error", "Could not get data", "error");
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    getAppointment();
+  }, []);
+
+  const navigate = useNavigate();
+
+  return (
+    <div>
+      <div className="col-12">
+        <div
+          className="
+                    page-title-box
+                    d-flex
+                    align-items-center
+                    justify-content-between
+                  "
+        >
+          <div style={{ fontSize: "22px" }} className="fw-bold">
+            Appointment
+          </div>
+
+          <div className="page-title-right">
+            <Button
+              variant="contained"
+              color="primary"
+              style={{
+                fontWeight: "bold",
+                marginBottom: "1rem",
+                textTransform: "capitalize",
+              }}
+              onClick={() => {
+                navigate("/appointments/", { replace: true });
+              }}
+            >
+              Back
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {loading && <div>Loading...</div>}
+      {!loading && !appointmentData && <div>No data found</div>}
+      {!loading && appointmentData && (
+        <div>
+          <table className="table table-striped">
+            <tbody>
+              <tr>
+                <th scope="col">Appointment ID</th>
+                <td>{appointmentData?._id}</td>
+              </tr>
+              <tr>
+                <th scope="col">Appointment Number</th>
+                <td>{appointmentData?.appointmentNumber}</td>
+              </tr>
+              <tr>
+                <th scope="col">Patient Name</th>
+                <td>{appointmentData?.patientName}</td>
+              </tr>
+              <tr>
+                <th scope="col">Patient Phone</th>
+                <td>{appointmentData?.patientPhone}</td>
+              </tr>
+              <tr>
+                <th scope="col">Doctor Name</th>
+                <td>{appointmentData?.doctorName}</td>
+              </tr>
+              <tr>
+                <th scope="col">Appointment Date</th>
+                <td>
+                  {appointmentData?.date ? (
+                    appointmentData?.date
+                  ) : (
+                    <span className="text-danger">Not Set</span>
+                  )}
+                </td>
+              </tr>
+              <tr>
+                <th scope="col">Appointment Time</th>
+                <td>
+                  {new Date(appointmentData?.time).toLocaleTimeString("en-IN", {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })}{" "}
+                </td>
+              </tr>
+              <tr>
+                <th scope="col">Appointment Created</th>
+                <td>
+                  {new Date(appointmentData?.createdAt).toLocaleDateString(
+                    "en-IN",
+                    {
+                      day: "numeric",
+                      month: "short",
+                      year: "numeric",
+
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    }
+                  )}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ViewAppointment;

src/views/Business/AddBusiness.js

@@ -1,316 +1,345 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from "react";
 // import { Button } from '@mui/material'
-import axios from 'axios'
+import axios from "axios";
 
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from "react-router-dom";
-import { CCard, CCardBody, CCardGroup, CCol, CContainer, CRow } from '@coreui/react'
+import {
-import SelectPurpose from './multiform/SelectPurpose.js'
+  CCard,
-import SelectBusiness from './multiform/SelectBusiness.js'
+  CCardBody,
-import SelectLanguage from './multiform/selectLanguage.js'
+  CCardGroup,
-import Contacts from './multiform/Contacts.js'
+  CCol,
-import BAddress from './multiform/BAddress.js'
+  CContainer,
-import Button from '@material-ui/core/Button'
+  CRow,
-
+} from "@coreui/react";
-
+import SelectPurpose from "./multiform/SelectPurpose.js";
-import { isAutheticated } from 'src/auth'
+import SelectBusiness from "./multiform/SelectBusiness.js";
+import SelectLanguage from "./multiform/selectLanguage.js";
+import Contacts from "./multiform/Contacts.js";
+import BAddress from "./multiform/BAddress.js";
+import Button from "@material-ui/core/Button";
 
+import { isAutheticated } from "src/auth";
+import DoctorInfo from "./multiform/DoctorInfo.js";
 
 const AddBusiness = () => {
-    const token = isAutheticated()
+  const token = isAutheticated();
-    const [productId, setProductId] = useState('')
+  const [productId, setProductId] = useState("");
-    const [viewState, setViewState] = useState(1)
+  const [viewState, setViewState] = useState(1);
-    // const [WebsiteURL, setWebsiteURL] = useState('https://bolo.ai.in/')
+  // const [WebsiteURL, setWebsiteURL] = useState('https://bolo.ai.in/')
 
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
 
-    const navigate = useNavigate()
+  const [data, setData] = useState({
-    const [loading, setLoading] = useState(false)
+    WebsiteURL: "https://bolo.ai.in/",
+    business: "",
+    purpose: "",
 
-    const [data, setData] = useState({
+    language: [],
-        WebsiteURL: 'https://bolo.ai.in/',
+    country: "",
-        business: '',
+    state: "",
-        purpose: '',
+    city: "",
+    address_Line_1: "",
+    address_Line_2: "",
+    pincode: "",
+    //contacts
+    image: "",
+    imageURL: "",
+    business_name: "",
+    email: "",
 
-        language: [],
+    short_url: "",
-        country: '',
+    contact_Number: "",
-        state: '',
+    contact_Person_Name: "",
-        city: '',
-        address_Line_1: '',
-        address_Line_2: '',
-        pincode: '',
-        //contacts
-        image: '',
-        imageURL: '',
-        business_name: '',
-        email: '',
 
-        short_url: '',
+    specialization: "",
-        contact_Number: '',
+  });
-        contact_Person_Name: '',
-    })
 
+  // console.log(data)
 
-
+  const handleView = (n) => {
-    // console.log(data)
+    if (viewState === n) return;
-
+    setViewState(n);
-    const handleView = (n) => {
+  };
-        if (viewState === n) return
+  const handleSubmit = () => {
-        setViewState(n)
+    if (
+      data.address_Line_1.trim() === "" ||
+      data.address_Line_2.trim() === "" ||
+      data.business === "" ||
+      data.language === "" ||
+      data.country === "" ||
+      data.state === "" ||
+      data.city === "" ||
+      data.pincode.trim() === "" ||
+      //Contacts
+      // data.image === '' ||
+      // data.imageURL.trim() === '' ||
+      (data.business_name.trim() === "" &&
+        (data.contact_Person_Name.trim() === "" ||
+          data.specialization === "")) ||
+      data.email.trim() === "" ||
+      data.short_url.trim() === "" ||
+      data.contact_Number === "" ||
+      data.contact_Person_Name.trim() === ""
+    ) {
+      swal({
+        title: "Warning",
+        text: "Fill all mandatory fields",
+        icon: "error",
+        button: "Close",
+        dangerMode: true,
+      });
+      return;
     }
-    const handleSubmit = () => {
+    setLoading(true);
-        if (
+    const formData = new FormData();
-            data.address_Line_1.trim() === '' ||
+    formData.set("address_Line_1", data.address_Line_1);
-            data.address_Line_2.trim() === '' ||
+    formData.set("address_Line_2", data.address_Line_2);
 
-            data.business === '' ||
+    formData.set("purpose", data.purpose);
-            data.purpose.trim() === '' ||
+    formData.set("business", data.business);
-            data.language === '' ||
+    formData.set("language", data.language);
-            data.country === '' ||
-            data.state === '' ||
-            data.city === '' ||
-            data.pincode.trim() === '' ||
-            //Contacts
-            // data.image === '' ||
-            // data.imageURL.trim() === '' ||
-            data.business_name.trim() === '' ||
-            data.email.trim() === '' ||
 
-            data.short_url.trim() === '' ||
+    formData.set("country", data.country);
-            data.contact_Number === '' ||
+    formData.set("city", data.city);
-            data.contact_Person_Name.trim() === ''
+    formData.set("state", data.state);
 
-        ) {
+    formData.set("pincode", data.pincode);
-            swal({
+    //contacts
-                title: 'Warning',
+    formData.set("business_name", data.business_name);
-                text: 'Fill all mandatory fields',
+    formData.set("email", data.email);
-                icon: 'error',
-                button: 'Close',
-                dangerMode: true,
-            })
-            return
-        }
-        setLoading(true)
-        const formData = new FormData()
-        formData.set('address_Line_1', data.address_Line_1)
-        formData.set('address_Line_2', data.address_Line_2)
 
-        formData.set('purpose', data.purpose)
+    formData.set("contact_Number", data.contact_Number);
-        formData.set('business', data.business)
+    formData.set("contact_Person_Name", data.contact_Person_Name);
-        formData.set('language', data.language)
 
-        formData.set('country', data.country)
+    formData.set("specialization", data.specialization);
-        formData.set('city', data.city)
-        formData.set('state', data.state)
 
+    formData.set("url", data.WebsiteURL);
+    formData.set("short_url", data.short_url);
 
-        formData.set('pincode', data.pincode)
+    axios
-        //contacts
+      .post(`/api/businesses/add`, formData, {
-        formData.set('business_name', data.business_name)
+        headers: {
-        formData.set('email', data.email)
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/formdata",
+          "Access-Control-Allow-Origin": "*",
+        },
+      })
+      .then((res) => {
+        swal({
+          title: "Added",
+          text: res?.data?.message
+            ? res?.data?.message
+            : "Business added successfully!",
+          icon: "success",
+          button: "Return",
+        });
+        setLoading(false);
+        navigate("/healthcare/providers", { 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 (
-        formData.set('contact_Number', data.contact_Number)
+    <CContainer>
-        formData.set('contact_Person_Name', data.contact_Person_Name)
+      <CRow className="mt-3">
-
+        <CCol md={12}>
-
+          <div
-        formData.set('url', data.WebsiteURL + data.short_url + '/login')
+            className="
-        formData.set('short_url', data.short_url)
-
-        axios
-            .post(`/api/businesses/add`, formData, {
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                    'Content-Type': 'multipart/formdata',
-                    'Access-Control-Allow-Origin': '*',
-                },
-            })
-            .then((res) => {
-                swal({
-                    title: 'Added',
-                    text: res?.data?.message ? res?.data?.message : 'Business added successfully!',
-                    icon: 'success',
-                    button: 'Return',
-                })
-                setLoading(false)
-                navigate('/businesses', { 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 (
-        <CContainer>
-            <CRow className="mt-3">
-                <CCol md={12}>
-                    <div
-                        className="
                     page-title-box
                     d-flex
                     align-items-center
                     justify-content-between
                   "
-                    >
+          >
-                        <div style={{ fontSize: '22px' }} className="fw-bold">
+            <div style={{ fontSize: "22px" }} className="fw-bold">
-                            Add Business
+              Add Healthcare Provider
-                        </div>
+            </div>
-                        <div className="page-title-right">
+            <div className="page-title-right">
-                            <div className="page-title-right">
+              <div className="page-title-right">
-                                <Button
+                <Button
-                                    variant="contained"
+                  variant="contained"
-                                    color="primary"
+                  color="primary"
-                                    style={{
+                  style={{
-                                        fontWeight: 'bold',
+                    fontWeight: "bold",
-                                        marginBottom: '1rem',
+                    marginBottom: "1rem",
-                                        textTransform: 'capitalize',
+                    textTransform: "capitalize",
-                                    }}
+                  }}
-                                    onClick={() => {
+                  onClick={() => {
-                                        handleSubmit()
+                    handleSubmit();
+                  }}
+                  disabled={
+                    data.address_Line_1.trim() === "" ||
+                    data.address_Line_2.trim() === "" ||
+                    data.business === "" ||
+                    data.language === "" ||
+                    data.country === "" ||
+                    data.state === "" ||
+                    data.city === "" ||
+                    data.pincode.trim() === "" ||
+                    (data.business_name.trim() === "" &&
+                      (data.contact_Person_Name.trim() === "" ||
+                        data.specialization === "")) ||
+                    data.email.trim() === "" ||
+                    data.short_url.trim() === "" ||
+                    data.contact_Number === "" ||
+                    data.contact_Person_Name.trim() === ""
+                  }
+                >
+                  {loading ? "Loading" : "Add Now"}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol md={9} className="mt-1">
+          <CCardGroup>
+            <CCard className="p-4 mb-3">
+              <CCardBody>
+                {viewState === 1 && (
+                  <SelectBusiness
+                    data={{ data, setData }}
+                    // categories={categories}
+                    handleView={handleView}
+                    // ProductId={{ productId, setProductId }}
+                    loading={{ loading, setLoading }}
+                  />
+                )}
+                {viewState === 2 && (
+                  <SelectPurpose
+                    data={{ data, setData }}
+                    handleView={handleView}
+                    // productId={productId}
+                    // data={{ varients, setVarients }}
+                    // taxes={taxes}
+                    // sizes={sizes}
+                    loading={{ loading, setLoading }}
+                  />
+                )}
 
-                                    }}
+                {viewState === 3 &&
-                                    disabled={data.address_Line_1.trim() === '' ||
+                  (data.business === "Doctor (Individual Practitioner)" ? (
-                                        data.address_Line_2.trim() === '' ||
+                    <DoctorInfo
+                      data={{ data, setData }}
+                      handleView={handleView}
+                      // productId={productId}
+                      // data={{ varients, setVarients }}
+                      // taxes={taxes}
+                      // sizes={sizes}
+                      loading={{ loading, setLoading }}
+                    />
+                  ) : (
+                    <Contacts
+                      data={{ data, setData }}
+                      handleView={handleView}
+                      // productId={productId}
+                      // data={{ images, setImages }}
+                      loading={{ loading, setLoading }}
+                    />
+                  ))}
 
-                                        data.business === '' ||
+                {viewState === 4 && (
-                                        data.purpose.trim() === '' ||
+                  <SelectLanguage
-                                        data.language === '' ||
+                    data={{ data, setData }}
-                                        data.country === '' ||
+                    handleView={handleView}
-                                        data.state === '' ||
+                    // productId={productId}
-                                        data.city === '' ||
+                    // data={{ images, setImages }}
-                                        data.pincode.trim() === '' ||
+                    loading={{ loading, setLoading }}
-                                        data.business_name.trim() === '' ||
+                  />
-                                        data.email.trim() === '' ||
+                )}
+                {viewState === 5 && (
+                  <BAddress
+                    data={{ data, setData }}
+                    handleView={handleView}
+                    // productId={productId}
+                    // data={{ images, setImages }}
+                    loading={{ loading, setLoading }}
+                  />
+                )}
+              </CCardBody>
+            </CCard>
+          </CCardGroup>
+        </CCol>
+        <CCol md={3} className="mt-1">
+          <CCardGroup>
+            <CCard>
+              <CCardBody>
+                <div className="d-grid gap-2">
+                  <button
+                    className={
+                      viewState === 1
+                        ? "btn btn-light"
+                        : "btn btn-info text-white"
+                    }
+                    type="button"
+                    onClick={() => handleView(1)}
+                  >
+                    Select Provider Type
+                  </button>
+                  {/*<button
+                    className={
+                      viewState === 2
+                        ? "btn btn-light"
+                        : "btn btn-info text-white"
+                    }
+                    type="button"
+                    onClick={() => handleView(2)}
+                  >
+                    Select Purpose
+                  </button>*/}
+                  <button
+                    className={
+                      viewState === 3
+                        ? "btn btn-light"
+                        : "btn btn-info text-white"
+                    }
+                    type="button"
+                    onClick={() => handleView(3)}
+                  >
+                    Contact Information
+                  </button>
+                  <button
+                    className={
+                      viewState === 4
+                        ? "btn btn-light"
+                        : "btn btn-info text-white"
+                    }
+                    type="button"
+                    onClick={() => handleView(4)}
+                  >
+                    Select Languages
+                  </button>
+                  <button
+                    className={
+                      viewState === 5
+                        ? "btn btn-light"
+                        : "btn btn-info text-white"
+                    }
+                    type="button"
+                    onClick={() => handleView(5)}
+                  >
+                    Address
+                  </button>
+                </div>
+              </CCardBody>
+            </CCard>
+          </CCardGroup>
+        </CCol>
+      </CRow>
+    </CContainer>
+  );
+};
 
-                                        data.short_url.trim() === '' ||
+export default AddBusiness;
-                                        data.contact_Number === '' ||
-                                        data.contact_Person_Name.trim() === ''}
-                                >
-                                    {loading ? 'Loading' : 'Add Now'}
-                                </Button>
-                            </div>
-                        </div>
-                    </div>
-                </CCol>
-            </CRow>
-            <CRow>
-                <CCol md={9} className="mt-1">
-                    <CCardGroup>
-                        <CCard className="p-4 mb-3">
-                            <CCardBody>
-                                {viewState === 1 && (
-                                    <SelectBusiness
-                                        data={{ data, setData }}
-                                        // categories={categories}
-                                        handleView={handleView}
-                                        // ProductId={{ productId, setProductId }}
-                                        loading={{ loading, setLoading }}
-                                    />
-                                )}
-                                {viewState === 2 && (
-                                    <SelectPurpose
-                                        data={{ data, setData }}
-                                        handleView={handleView}
-
-                                        // productId={productId}
-                                        // data={{ varients, setVarients }}
-                                        // taxes={taxes}
-                                        // sizes={sizes}
-                                        loading={{ loading, setLoading }}
-                                    />
-                                )}
-
-
-
-                                {viewState === 3 && (
-                                    <Contacts
-                                        data={{ data, setData }}
-                                        handleView={handleView}
-                                        // productId={productId}
-                                        // data={{ images, setImages }}
-                                        loading={{ loading, setLoading }}
-                                    />
-                                )}
-                                {viewState === 4 && (
-                                    <SelectLanguage
-                                        data={{ data, setData }}
-                                        handleView={handleView}
-
-                                        // productId={productId}
-                                        // data={{ images, setImages }}
-                                        loading={{ loading, setLoading }}
-                                    />
-                                )}
-                                {viewState === 5 && (
-                                    <BAddress
-                                        data={{ data, setData }}
-                                        handleView={handleView}
-
-                                        // productId={productId}
-                                        // data={{ images, setImages }}
-                                        loading={{ loading, setLoading }}
-                                    />
-                                )}
-                            </CCardBody>
-                        </CCard>
-                    </CCardGroup>
-                </CCol>
-                <CCol md={3} className="mt-1">
-                    <CCardGroup>
-                        <CCard>
-                            <CCardBody>
-                                <div className="d-grid gap-2">
-                                    <button
-                                        className={viewState === 1 ? 'btn btn-light' : 'btn btn-info text-white'}
-                                        type="button"
-                                        onClick={() => handleView(1)}
-                                    >
-                                        Select Business Type
-
-                                    </button>
-                                    <button
-                                        className={viewState === 2 ? 'btn btn-light' : 'btn btn-info text-white'}
-                                        type="button"
-                                        onClick={() => handleView(2)}
-                                    >
-                                        Select Purpose
-
-                                    </button>
-                                    <button
-                                        className={viewState === 3 ? 'btn btn-light' : 'btn btn-info text-white'}
-                                        type="button"
-                                        onClick={() => handleView(3)}
-                                    >
-                                        Contacts
-                                    </button>
-                                    <button
-                                        className={viewState === 4 ? 'btn btn-light' : 'btn btn-info text-white'}
-                                        type="button"
-                                        onClick={() => handleView(4)}
-                                    >
-                                        Select Languages
-                                    </button>
-                                    <button
-                                        className={viewState === 5 ? 'btn btn-light' : 'btn btn-info text-white'}
-                                        type="button"
-                                        onClick={() => handleView(5)}
-                                    >
-                                        Address
-                                    </button>
-                                </div>
-                            </CCardBody>
-                        </CCard>
-                    </CCardGroup>
-                </CCol>
-            </CRow>
-        </CContainer>
-    )
-}
-
-export default AddBusiness

src/views/Business/Businesses.js

@@ -1,243 +1,255 @@
-
+import React, { useEffect } from "react";
-import React, { useEffect } from 'react'
+import Button from "@material-ui/core/Button";
-import Button from '@material-ui/core/Button'
+import { useState } from "react";
-import { useState } from 'react'
+import { Link } from "react-router-dom";
-import { Link } from 'react-router-dom'
+import axios from "axios";
-import axios from 'axios'
+import swal from "sweetalert";
-import swal from 'sweetalert'
+import OverLayButton from "./OverLayButton.js";
-import OverLayButton from './OverLayButton.js'
+import { isAutheticated } from "src/auth.js";
-import { isAutheticated } from 'src/auth.js'
 
 const Businesses = () => {
-    const token = isAutheticated()
+  const token = isAutheticated();
-    const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
-    const [success, setSuccess] = useState(true)
+  const [success, setSuccess] = useState(true);
-    const [BusinessesData, setBusinessesData] = useState([])
+  const [BusinessesData, setBusinessesData] = useState([]);
 
-    const [currentPage, setCurrentPage] = useState(1)
+  const [currentPage, setCurrentPage] = useState(1);
-    const [itemPerPage, setItemPerPage] = useState(10)
+  const [itemPerPage, setItemPerPage] = useState(10);
-    const [showData, setShowData] = useState(BusinessesData)
+  const [showData, setShowData] = useState(BusinessesData);
 
-    const handleShowEntries = (e) => {
+  const handleShowEntries = (e) => {
-        setCurrentPage(1)
+    setCurrentPage(1);
-        setItemPerPage(e.target.value)
+    setItemPerPage(e.target.value);
-    }
+  };
 
-    const getbusinesses = () => {
+  const getbusinesses = () => {
+    axios
+      .get(`/api/businesses/getall`, {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        console.log(res.data);
+        setBusinessesData(res.data?.businesses);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    getbusinesses();
+  }, [success]);
+
+  useEffect(() => {
+    const loadData = () => {
+      const indexOfLastPost = currentPage * itemPerPage;
+      const indexOfFirstPost = indexOfLastPost - itemPerPage;
+      setShowData(BusinessesData.slice(indexOfFirstPost, indexOfLastPost));
+    };
+    loadData();
+  }, [currentPage, itemPerPage, BusinessesData]);
+
+  // const handleVarification = (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
+  //                 .get(`/api/i/admin/verify/${id}`, {
+  //                     headers: {
+  //                         'Access-Control-Allow-Origin': '*',
+  //                         Authorization: `Bearer ${token}`,
+  //                     },
+  //                 })
+  //                 .then((res) => {
+  //                     swal({
+  //                         title: 'success',
+  //                         text: res.data.message ? res.data.message : 'Verified Successfully!',
+  //                         icon: 'success',
+  //                         button: 'ok',
+  //                         dangerMode: true,
+  //                     })
+  //                     setSuccess((prev) => !prev)
+  //                 })
+  //                 .catch((err) => {
+  //                     swal({
+  //                         title: 'Failled',
+  //                         text: 'Something went wrong!',
+  //                         icon: 'error',
+  //                         button: 'Retry',
+  //                         dangerMode: 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
-            .get(`/api/businesses/getall`, {
+          .delete(`/api/businesses/delete/${id}`, {
-                headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
+            headers: {
-            })
+              "Access-Control-Allow-Origin": "*",
-            .then((res) => {
+              Authorization: `Bearer ${token}`,
-                console.log(res.data)
+            },
-                setBusinessesData(res.data?.businesses)
+          })
-                setLoading(false)
+          .then((res) => {
-            })
+            setSuccess((prev) => !prev);
-            .catch((err) => {
+          })
-                console.log(err)
+          .catch((err) => {
-                setLoading(false)
+            swal({
-            })
+              title: "Warning",
-    }
+              text: "Something went wrong!",
+              icon: "error",
+              button: "Retry",
+              dangerMode: true,
+            });
+          });
+      }
+    });
+  };
 
-    useEffect(() => {
+  return (
-        getbusinesses()
+    <div className="main-content">
-    }, [success])
+      <div className="page-content">
-
+        <div className="container-fluid">
-    useEffect(() => {
+          <div className="row">
-        const loadData = () => {
+            <div className="col-12">
-            const indexOfLastPost = currentPage * itemPerPage
+              <div
-            const indexOfFirstPost = indexOfLastPost - itemPerPage
+                className="
-            setShowData(BusinessesData.slice(indexOfFirstPost, indexOfLastPost))
-        }
-        loadData()
-    }, [currentPage, itemPerPage, BusinessesData])
-
-
-    // const handleVarification = (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
-    //                 .get(`/api/i/admin/verify/${id}`, {
-    //                     headers: {
-    //                         'Access-Control-Allow-Origin': '*',
-    //                         Authorization: `Bearer ${token}`,
-    //                     },
-    //                 })
-    //                 .then((res) => {
-    //                     swal({
-    //                         title: 'success',
-    //                         text: res.data.message ? res.data.message : 'Verified Successfully!',
-    //                         icon: 'success',
-    //                         button: 'ok',
-    //                         dangerMode: true,
-    //                     })
-    //                     setSuccess((prev) => !prev)
-    //                 })
-    //                 .catch((err) => {
-    //                     swal({
-    //                         title: 'Failled',
-    //                         text: 'Something went wrong!',
-    //                         icon: 'error',
-    //                         button: 'Retry',
-    //                         dangerMode: 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/businesses/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">
+                <div style={{ fontSize: "22px" }} className="fw-bold">
-                                    Businesses
+                  Health Care Providers
-                                </div>
+                </div>
 
-                                <div className="page-title-right">
+                <div className="page-title-right">
-                                    <Link to="/business/add">
+                  <Link to="/healthcare/providers/add">
-                                        <Button
+                    <Button
-                                            variant="contained"
+                      variant="contained"
-                                            color="primary"
+                      color="primary"
-                                            style={{
+                      style={{
-                                                fontWeight: 'bold',
+                        fontWeight: "bold",
-                                                marginBottom: '1rem',
+                        marginBottom: "1rem",
-                                                textTransform: 'capitalize',
+                        textTransform: "capitalize",
-                                            }}
+                      }}
-                                        >
+                    >
-                                            Add Business
+                      Add Healthcare Providers
-                                        </Button>
+                    </Button>
-                                    </Link>
+                  </Link>
-                                </div>
+                </div>
-                            </div>
+              </div>
-                        </div>
+            </div>
-                    </div>
+          </div>
-                    <div className="row">
+          <div className="row">
-                        <div className="col-lg-12">
+            <div className="col-lg-12">
-                            <div className="card">
+              <div className="card">
-                                <div className="card-body">
+                <div className="card-body">
-                                    <div className="row ml-0 mr-0 mb-10">
+                  <div className="row ml-0 mr-0 mb-10">
-                                        <div className="col-sm-12 col-md-12">
+                    <div className="col-sm-12 col-md-12">
-                                            <div className="dataTables_length">
+                      <div className="dataTables_length">
-                                                <label className="w-100">
+                        <label className="w-100">
-                                                    Show
+                          Show
-                                                    <select
+                          <select
-                                                        style={{ width: '10%' }}
+                            style={{ width: "10%" }}
-                                                        name=""
+                            name=""
-                                                        onChange={(e) => handleShowEntries(e)}
+                            onChange={(e) => handleShowEntries(e)}
-                                                        className="
+                            className="
                                 select-w
                                 custom-select custom-select-sm
                                 form-control form-control-sm
                               "
-                                                    >
+                          >
-                                                        <option value="10">10</option>
+                            <option value="10">10</option>
-                                                        <option value="25">25</option>
+                            <option value="25">25</option>
-                                                        <option value="50">50</option>
+                            <option value="50">50</option>
-                                                        <option value="100">100</option>
+                            <option value="100">100</option>
-                                                    </select>
+                          </select>
-                                                    entries
+                          entries
-                                                </label>
+                        </label>
-                                            </div>
+                      </div>
-                                        </div>
+                    </div>
-                                    </div>
+                  </div>
 
-                                    <div className="table-responsive table-shoot mt-3">
+                  <div className="table-responsive table-shoot mt-3">
-                                        <table
+                    <table
-                                            className="table table-centered table-nowrap"
+                      className="table table-centered table-nowrap"
-                                            style={{ border: '1px solid' }}
+                      style={{ border: "1px solid" }}
-                                        >
+                    >
-                                            <thead className="thead-info" style={{ background: 'rgb(140, 213, 213)' }}>
+                      <thead
-                                                <tr>
+                        className="thead-info"
-                                                    <th className="text-start">Business </th>
+                        style={{ background: "rgb(140, 213, 213)" }}
-                                                    {/* <th className="text-start">Logo</th> */}
+                      >
-                                                    <th className="text-start">Purpose </th>
+                        <tr>
-                                                    <th className="text-start">Created On</th>
+                          <th className="text-start">HealthCare Provider </th>
-                                                    {/* <th className="text-start">Status</th> */}
+                          {/* <th className="text-start">Logo</th> */}
-                                                    <th className="text-center">Actions</th>
+                          <th className="text-start">Name </th>
-                                                </tr>
+                          <th className="text-start">Created On</th>
-                                            </thead>
+                          {/* <th className="text-start">Status</th> */}
-                                            <tbody>
+                          <th className="text-center">Actions</th>
-                                                {!loading && showData.length === 0 && (
+                        </tr>
-                                                    <tr className="text-center">
+                      </thead>
-                                                        <td colSpan="6">
+                      <tbody>
-                                                            <h5>No Data Available</h5>
+                        {console.log(showData, "showData")}
-                                                        </td>
+
-                                                    </tr>
+                        {!loading && showData.length === 0 && (
-                                                )}
+                          <tr className="text-center">
-                                                {loading ? (
+                            <td colSpan="6">
-                                                    <tr>
+                              <h5>No Data Available</h5>
-                                                        <td className="text-center" colSpan="6">
+                            </td>
-                                                            Loading...
+                          </tr>
-                                                        </td>
+                        )}
-                                                    </tr>
+                        {loading ? (
-                                                ) : (
+                          <tr>
-                                                    showData.map((i, idx) => {
+                            <td className="text-center" colSpan="6">
-                                                        return (
+                              Loading...
-                                                            <tr key={idx}>
+                            </td>
-                                                                <td className="text-start">{i.business}</td>
+                          </tr>
-                                                                {/* {i.banner && i.banner ?
+                        ) : (
+                          showData.map((i, idx) => {
+                            return (
+                              <tr key={idx}>
+                                <td className="text-start">{i.business}</td>
+                                {/* {i.banner && i.banner ?
                                                                     <td className="text-start">
                                                                         <img src={i.banner.url} alt="No Image" height="50" />
                                                                     </td> :
                                                                     <p>No image!</p>
                                                                 } */}
-                                                                <td className="text-start">{i?.purpose}</td>
+                                <td className="text-start">{i?.short_url}</td>
 
-                                                                <td className="text-start">
+                                <td className="text-start">
-                                                                    {new Date(i.createdAt).toLocaleString('en-IN', {
+                                  {new Date(i.createdAt).toLocaleString(
-                                                                        month: '2-digit',
+                                    "en-IN",
-                                                                        day: 'numeric',
+                                    {
-                                                                        year: 'numeric',
+                                      month: "2-digit",
-                                                                        // hour: 'numeric',
+                                      day: "numeric",
-                                                                        // minute: 'numeric',
+                                      year: "numeric",
-                                                                        // hour12: true,
+                                      // hour: 'numeric',
-                                                                    })}
+                                      // minute: 'numeric',
-                                                                </td>
+                                      // hour12: true,
-                                                                {/* <td className="text-start">
+                                    }
+                                  )}
+                                </td>
+                                {/* <td className="text-start">
                                                                     <button
                                                                         style={{ color: 'white' }}
                                                                         type="button"
@@ -256,8 +268,8 @@ const Businesses = () => {
                                                                         {i?.verify ? 'verified' : 'Not Verify'}
                                                                     </button>
                                                                 </td> */}
-                                                                <td className=" text-center">
+                                <td className=" text-center">
-                                                                    {/* <OverLayButton data={{ url: i?.url }} />
+                                  {/* <OverLayButton data={{ url: i?.url }} />
 
                                                                     <Link to={`/business/products/${i._id}`}>
                                                                         <button
@@ -273,141 +285,151 @@ const Businesses = () => {
                                                                         </button>
                                                                     </Link> */}
 
-                                                                    <Link to={`/business/edit/${i._id}`}>
+                                  <Link
-                                                                        <button
+                                    to={`/healthcare/providers/edit/${i._id}`}
-                                                                            style={{ color: 'white' }}
+                                  >
-                                                                            type="button"
+                                    <button
-                                                                            className="
+                                      style={{ color: "white" }}
+                                      type="button"
+                                      className="
                                       btn btn-success btn-sm
                                     waves-effect waves-light
                                     ms-2
                                   "
-                                                                        >
+                                    >
-                                                                            Edit
+                                      Edit
-                                                                        </button>
+                                    </button>
-                                                                    </Link>
+                                  </Link>
-                                                                    <button
+                                  <button
-                                                                        style={{ color: 'white' }}
+                                    style={{ color: "white" }}
-                                                                        type="button"
+                                    type="button"
-                                                                        className="
+                                    className="
                                     btn btn-danger btn-sm
                                     waves-effect waves-light
                                     ms-2
                                     
                                   "
-                                                                        onClick={() => {
+                                    onClick={() => {
-                                                                            handleDelete(i._id)
+                                      handleDelete(i._id);
-                                                                        }}
+                                    }}
-                                                                    >
+                                  >
-                                                                        Delete
+                                    Delete
-                                                                    </button>
+                                  </button>
-                                                                </td>
+                                </td>
-                                                            </tr>
+                              </tr>
-                                                        )
+                            );
-                                                    })
+                          })
-                                                )}
+                        )}
-                                            </tbody>
+                      </tbody>
-                                        </table>
+                    </table>
-                                    </div>
+                  </div>
 
-                                    <div className="row mt-20">
+                  <div className="row mt-20">
-                                        <div className="col-sm-12 col-md-6 mb-20">
+                    <div className="col-sm-12 col-md-6 mb-20">
-                                            <div
+                      <div
-                                                className="dataTables_info"
+                        className="dataTables_info"
-                                                id="datatable_info"
+                        id="datatable_info"
-                                                role="status"
+                        role="status"
-                                                aria-live="polite"
+                        aria-live="polite"
-                                            >
+                      >
-                                                Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '}
+                        Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
-                                                {Math.min(currentPage * itemPerPage, BusinessesData.length)} of{' '}
+                        {Math.min(
-                                                {BusinessesData.length} entries
+                          currentPage * itemPerPage,
-                                            </div>
+                          BusinessesData.length
-                                        </div>
+                        )}{" "}
-
+                        of {BusinessesData.length} entries
-                                        <div className="col-sm-12 col-md-6">
+                      </div>
-                                            <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 >
-                                                        BusinessesData.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 >
-                                                                BusinessesData.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 Businesses
+                    <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 >
+                            BusinessesData.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 >
+                                BusinessesData.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 Businesses;

src/views/Business/EditBusiness.js

@@ -1,342 +1,367 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from "react";
 // import { Button } from '@mui/material'
-import axios from 'axios'
+import axios from "axios";
 
-import { Link, useNavigate, useParams } from 'react-router-dom'
+import { Link, useNavigate, useParams } from "react-router-dom";
-import { CCard, CCardBody, CCardGroup, CCol, CContainer, CRow } from '@coreui/react'
+import {
+  CCard,
+  CCardBody,
+  CCardGroup,
+  CCol,
+  CContainer,
+  CRow,
+} from "@coreui/react";
 
-import SelectPurpose from './multiform/SelectPurpose.js'
+import SelectPurpose from "./multiform/SelectPurpose.js";
-import SelectBusiness from './multiform/SelectBusiness.js'
+import SelectBusiness from "./multiform/SelectBusiness.js";
-import SelectLanguage from './multiform/selectLanguage.js'
+import SelectLanguage from "./multiform/selectLanguage.js";
-import BAddress from './multiform/BAddress.js'
+import BAddress from "./multiform/BAddress.js";
-import Button from '@material-ui/core/Button'
+import Button from "@material-ui/core/Button";
-
-
-import { isAutheticated } from 'src/auth'
-import Contacts from './multiform/Contacts.js'
 
+import { isAutheticated } from "src/auth";
+import Contacts from "./multiform/Contacts.js";
+import DoctorInfo from "./multiform/DoctorInfo.js";
 
 const EditBusiness = () => {
-    const token = isAutheticated()
+  const token = isAutheticated();
-    const id = useParams()?.id
+  const id = useParams()?.id;
-    const [productId, setProductId] = useState('')
+  const [productId, setProductId] = useState("");
-    const [viewState, setViewState] = useState(1)
+  const [viewState, setViewState] = useState(1);
 
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
 
-    const navigate = useNavigate()
+  const [data, setData] = useState({
-    const [loading, setLoading] = useState(false)
+    WebsiteURL: "https://bolo.ai.in/",
+    business: "",
+    purpose: "",
 
-    const [data, setData] = useState({
+    language: [],
-        WebsiteURL: 'https://bolo.ai.in/',
+    country: "",
-        business: '',
+    state: "",
-        purpose: '',
+    city: "",
+    address_Line_1: "",
+    address_Line_2: "",
+    pincode: "",
+    //contacts
+    image: "",
+    imageURL: "",
+    business_name: "",
+    email: "",
 
-        language: [],
+    short_url: "",
-        country: '',
+    contact_Number: "",
-        state: '',
+    contact_Person_Name: "",
-        city: '',
-        address_Line_1: '',
-        address_Line_2: '',
-        pincode: '',
-        //contacts
-        image: '',
-        imageURL: '',
-        business_name: '',
-        email: '',
 
-        short_url: '',
+    specialization: "",
-        contact_Number: '',
+  });
-        contact_Person_Name: '',
-    })
 
+  // console.log(data)
 
+  const handleView = (n) => {
+    if (viewState === n) return;
+    setViewState(n);
+  };
 
-    // console.log(data)
+  //get business
+  // console.log(id)
+  const getbusinesses = () => {
+    axios
+      .get(`/api/businesses/get/${id}`, {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        // console.log(res.data.businesses)
+        // setBusinessesData(res.data?.businesses)
+        setData((prev) => ({
+          ...prev,
+          ...res.data?.businesses,
+        }));
+        setLoading(false);
+      })
 
-    const handleView = (n) => {
+      .catch((err) => {
-        if (viewState === n) return
+        console.log(err);
-        setViewState(n)
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    getbusinesses();
+  }, []);
+  // console.log(data)
+  const handleSubmit = () => {
+    if (
+      data.address_Line_1.trim() === "" ||
+      data.address_Line_2.trim() === "" ||
+      data.business === "" ||
+      data.language === "" ||
+      data.country === "" ||
+      data.state === "" ||
+      data.city === "" ||
+      data.pincode === "" ||
+      //Contacts
+      // data.image === '' ||
+      // data.imageURL.trim() === '' ||
+      (data.business_name.trim() === "" &&
+        (data.contact_Person_Name.trim() === "" ||
+          data.specialization === "")) ||
+      data.email.trim() === "" ||
+      data.short_url.trim() === "" ||
+      data.contact_Number === "" ||
+      data.contact_Person_Name.trim() === ""
+    ) {
+      swal({
+        title: "Warning",
+        text: "Fill all mandatory fields",
+        icon: "error",
+        button: "Close",
+        dangerMode: true,
+      });
+      return;
     }
+    setLoading(true);
+    const formData = new FormData();
+    formData.set("address_Line_1", data.address_Line_1);
+    formData.set("address_Line_2", data.address_Line_2);
 
-    //get business
+    formData.set("business", data.business);
-    // console.log(id)
+    formData.set("language", data.language);
-    const getbusinesses = () => {
-        axios
-            .get(`/api/businesses/get/${id}`, {
-                headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
-            })
-            .then((res) => {
-                // console.log(res.data.businesses)
-                // setBusinessesData(res.data?.businesses)
-                setData((prev) => ({
-                    ...prev,
-                    ...res.data?.businesses,
-                }))
-                setLoading(false)
-            })
 
+    formData.set("country", data.country);
+    formData.set("city", data.city);
+    formData.set("state", data.state);
 
-            .catch((err) => {
+    formData.set("pincode", data.pincode);
-                console.log(err)
+    //contacts
-                setLoading(false)
+    formData.set("business_name", data.business_name);
-            })
+    formData.set("email", data.email);
-    }
 
-    useEffect(() => {
+    formData.set("contact_Number", data.contact_Number);
-        getbusinesses()
+    formData.set("contact_Person_Name", data.contact_Person_Name);
-    }, [])
-    // console.log(data)
-    const handleSubmit = () => {
-        if (
-            data.address_Line_1.trim() === '' ||
-            data.address_Line_2.trim() === '' ||
 
-            data.business === '' ||
+    formData.set("specialization", data.specialization);
-            data.purpose.trim() === '' ||
-            data.language === '' ||
-            data.country === '' ||
-            data.state === '' ||
-            data.city === '' ||
-            data.pincode === '' ||
-            //Contacts
-            // data.image === '' ||
-            // data.imageURL.trim() === '' ||
-            data.business_name.trim() === '' ||
-            data.email.trim() === '' ||
 
-            data.short_url.trim() === '' ||
+    formData.set("url", data.WebsiteURL);
-            data.contact_Number === '' ||
+    formData.set("short_url", data.short_url);
-            data.contact_Person_Name.trim() === ''
-        ) {
-            swal({
-                title: 'Warning',
-                text: 'Fill all mandatory fields',
-                icon: 'error',
-                button: 'Close',
-                dangerMode: true,
-            })
-            return
-        }
-        setLoading(true)
-        const formData = new FormData()
-        formData.set('address_Line_1', data.address_Line_1)
-        formData.set('address_Line_2', data.address_Line_2)
 
-        formData.set('purpose', data.purpose)
+    axios
-        formData.set('business', data.business)
+      .patch(`/api/businesses/update/${id}`, formData, {
-        formData.set('language', data.language)
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/formdata",
+          "Access-Control-Allow-Origin": "*",
+        },
+      })
+      .then((res) => {
+        swal({
+          title: "Updated",
+          text: res?.data?.message
+            ? res?.data?.message
+            : "Business added successfully!",
+          icon: "success",
+          button: "Return",
+        });
+        setLoading(false);
+        navigate("/healthcare/providers", { 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,
+        });
+      });
+  };
 
-        formData.set('country', data.country)
+  return (
-        formData.set('city', data.city)
+    <CContainer>
-        formData.set('state', data.state)
+      <CRow className="mt-3">
-
+        <CCol md={12}>
-
+          <div
-        formData.set('pincode', data.pincode)
+            className="
-        //contacts
-        formData.set('business_name', data.business_name)
-        formData.set('email', data.email)
-
-
-        formData.set('contact_Number', data.contact_Number)
-        formData.set('contact_Person_Name', data.contact_Person_Name)
-
-
-        formData.set('url', data.WebsiteURL + data.short_url + '/login')
-        formData.set('short_url', data.short_url)
-
-        axios
-            .patch(`/api/businesses/update/${id}`, formData, {
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                    'Content-Type': 'multipart/formdata',
-                    'Access-Control-Allow-Origin': '*',
-                },
-            })
-            .then((res) => {
-                swal({
-                    title: 'Updated',
-                    text: res?.data?.message ? res?.data?.message : 'Business added successfully!',
-                    icon: 'success',
-                    button: 'Return',
-                })
-                setLoading(false)
-                navigate('/businesses', { 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 (
-        <CContainer>
-            <CRow className="mt-3">
-                <CCol md={12}>
-                    <div
-                        className="
                     page-title-box
                     d-flex
                     align-items-center
                     justify-content-between
                   "
-                    >
+          >
-                        <div style={{ fontSize: '22px' }} className="fw-bold">
+            <div style={{ fontSize: "22px" }} className="fw-bold">
-                            Edit Business
+              Edit Healthcare Provider
-                        </div>
+            </div>
-                        <div className="page-title-right">
+            <div className="page-title-right">
-                            <div className="page-title-right">
+              <div className="page-title-right">
-                                <Button
+                <Button
-                                    variant="contained"
+                  variant="contained"
-                                    color="primary"
+                  color="primary"
-                                    style={{
+                  style={{
-                                        fontWeight: 'bold',
+                    fontWeight: "bold",
-                                        marginBottom: '1rem',
+                    marginBottom: "1rem",
-                                        textTransform: 'capitalize',
+                    textTransform: "capitalize",
-                                    }}
+                  }}
-                                    onClick={() => {
+                  onClick={() => {
-                                        handleSubmit()
+                    handleSubmit();
+                  }}
+                  disabled={
+                    data.address_Line_1.trim() === "" ||
+                    data.address_Line_2.trim() === "" ||
+                    data.business === "" ||
+                    data.language === "" ||
+                    data.country === "" ||
+                    data.state === "" ||
+                    data.city === "" ||
+                    data.pincode === "" ||
+                    (data.business_name.trim() === "" &&
+                      (data.contact_Person_Name.trim() === "" ||
+                        data.specialization === "")) ||
+                    data.email.trim() === "" ||
+                    data.short_url.trim() === "" ||
+                    data.contact_Number === "" ||
+                    data.contact_Person_Name.trim() === ""
+                  }
+                >
+                  {loading ? "Loading" : "Update Now"}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol md={9} className="mt-1">
+          <CCardGroup>
+            <CCard className="p-4 mb-3">
+              <CCardBody>
+                {viewState === 1 && (
+                  <SelectBusiness
+                    data={{ data, setData }}
+                    // categories={categories}
+                    handleView={handleView}
+                    // ProductId={{ productId, setProductId }}
+                    loading={{ loading, setLoading }}
+                  />
+                )}
 
-                                    }}
+                {/*viewState === 2 && (
-                                    disabled={data.address_Line_1.trim() === '' ||
+                  <SelectPurpose
-                                        data.address_Line_2.trim() === '' ||
+                    data={{ data, setData }}
+                    handleView={handleView}
+                    // productId={productId}
+                    // data={{ varients, setVarients }}
+                    // taxes={taxes}
+                    // sizes={sizes}
+                    loading={{ loading, setLoading }}
+                  />
+                )*/}
 
-                                        data.business === '' ||
+                {viewState === 3 &&
-                                        data.purpose.trim() === '' ||
+                  (data.business === "Doctor (Individual Practitioner)" ? (
-                                        data.language === '' ||
+                    <DoctorInfo
-                                        data.country === '' ||
+                      data={{ data, setData }}
-                                        data.state === '' ||
+                      handleView={handleView}
-                                        data.city === '' ||
+                      // productId={productId}
-                                        data.pincode === '' ||
+                      // data={{ varients, setVarients }}
-                                        data.business_name.trim() === '' ||
+                      // taxes={taxes}
-                                        data.email.trim() === '' ||
+                      // sizes={sizes}
+                      loading={{ loading, setLoading }}
+                    />
+                  ) : (
+                    <Contacts
+                      data={{ data, setData }}
+                      handleView={handleView}
+                      // productId={productId}
+                      // data={{ images, setImages }}
+                      loading={{ loading, setLoading }}
+                    />
+                  ))}
 
-                                        data.short_url.trim() === '' ||
+                {viewState === 4 && (
-                                        data.contact_Number === '' ||
+                  <SelectLanguage
-                                        data.contact_Person_Name.trim() === ''}
+                    data={{ data, setData }}
-                                >
+                    handleView={handleView}
-                                    {loading ? 'Loading' : 'Update Now'}
+                    // productId={productId}
-                                </Button>
+                    // data={{ images, setImages }}
-                            </div>
+                    loading={{ loading, setLoading }}
-                        </div>
+                  />
-                    </div>
+                )}
-                </CCol>
+                {viewState === 5 && (
-            </CRow>
+                  <BAddress
-            <CRow>
+                    data={{ data, setData }}
-                <CCol md={9} className="mt-1">
+                    handleView={handleView}
-                    <CCardGroup>
+                    // productId={productId}
-                        <CCard className="p-4 mb-3">
+                    // data={{ images, setImages }}
-                            <CCardBody>
+                    loading={{ loading, setLoading }}
-                                {viewState === 1 && (
+                  />
-                                    <SelectBusiness
+                )}
-                                        data={{ data, setData }}
+              </CCardBody>
-                                        // categories={categories}
+            </CCard>
-                                        handleView={handleView}
+          </CCardGroup>
-                                        // ProductId={{ productId, setProductId }}
+        </CCol>
-                                        loading={{ loading, setLoading }}
+        <CCol md={3} className="mt-1">
-                                    />
+          <CCardGroup>
-                                )}
+            <CCard>
-                                {viewState === 2 && (
+              <CCardBody>
-                                    <SelectPurpose
+                <div className="d-grid gap-2">
-                                        data={{ data, setData }}
+                  <button
-                                        handleView={handleView}
+                    className={
+                      viewState === 1
+                        ? "btn btn-light"
+                        : "btn btn-info text-white"
+                    }
+                    type="button"
+                    onClick={() => handleView(1)}
+                  >
+                    Select Business Type
+                  </button>
 
-                                        // productId={productId}
+                  <button
-                                        // data={{ varients, setVarients }}
+                    className={
-                                        // taxes={taxes}
+                      viewState === 3
-                                        // sizes={sizes}
+                        ? "btn btn-light"
-                                        loading={{ loading, setLoading }}
+                        : "btn btn-info text-white"
-                                    />
+                    }
-                                )}
+                    type="button"
-                                {viewState === 3 && (
+                    onClick={() => handleView(3)}
-                                    <Contacts
+                  >
-                                        data={{ data, setData }}
+                    Contacts
-                                        handleView={handleView}
+                  </button>
-                                        // productId={productId}
+                  <button
-                                        // data={{ images, setImages }}
+                    className={
-                                        loading={{ loading, setLoading }}
+                      viewState === 4
-                                    />
+                        ? "btn btn-light"
-                                )}
+                        : "btn btn-info text-white"
-                                {viewState === 4 && (
+                    }
-                                    <SelectLanguage
+                    type="button"
-                                        data={{ data, setData }}
+                    onClick={() => handleView(4)}
-                                        handleView={handleView}
+                  >
+                    Select Languages
+                  </button>
+                  <button
+                    className={
+                      viewState === 5
+                        ? "btn btn-light"
+                        : "btn btn-info text-white"
+                    }
+                    type="button"
+                    onClick={() => handleView(5)}
+                  >
+                    Address
+                  </button>
+                </div>
+              </CCardBody>
+            </CCard>
+          </CCardGroup>
+        </CCol>
+      </CRow>
+    </CContainer>
+  );
+};
 
-                                        // productId={productId}
+export default EditBusiness;
-                                        // data={{ images, setImages }}
-                                        loading={{ loading, setLoading }}
-                                    />
-                                )}
-                                {viewState === 5 && (
-                                    <BAddress
-                                        data={{ data, setData }}
-                                        handleView={handleView}
-
-                                        // productId={productId}
-                                        // data={{ images, setImages }}
-                                        loading={{ loading, setLoading }}
-                                    />
-                                )}
-                            </CCardBody>
-                        </CCard>
-                    </CCardGroup>
-                </CCol>
-                <CCol md={3} className="mt-1">
-                    <CCardGroup>
-                        <CCard>
-                            <CCardBody>
-                                <div className="d-grid gap-2">
-                                    <button
-                                        className={viewState === 1 ? 'btn btn-light' : 'btn btn-info text-white'}
-                                        type="button"
-                                        onClick={() => handleView(1)}
-                                    >
-                                        Select Business Type
-
-                                    </button>
-                                    <button
-                                        className={viewState === 2 ? 'btn btn-light' : 'btn btn-info text-white'}
-                                        type="button"
-                                        onClick={() => handleView(2)}
-                                    >
-                                        Select Purpose
-
-                                    </button>
-                                    <button
-                                        className={viewState === 3 ? 'btn btn-light' : 'btn btn-info text-white'}
-                                        type="button"
-                                        onClick={() => handleView(3)}
-                                    >
-                                        Contacts
-                                    </button>
-                                    <button
-                                        className={viewState === 4 ? 'btn btn-light' : 'btn btn-info text-white'}
-                                        type="button"
-                                        onClick={() => handleView(4)}
-                                    >
-                                        Select Languages
-                                    </button>
-                                    <button
-                                        className={viewState === 5 ? 'btn btn-light' : 'btn btn-info text-white'}
-                                        type="button"
-                                        onClick={() => handleView(5)}
-                                    >
-                                        Address
-                                    </button>
-                                </div>
-                            </CCardBody>
-                        </CCard>
-                    </CCardGroup>
-                </CCol>
-            </CRow>
-        </CContainer>
-    )
-}
-
-export default EditBusiness

src/views/Business/multiform/Contacts.js

@@ -1,278 +1,272 @@
-
+import React, { useEffect, useState } from "react";
-
+import Button from "@material-ui/core/Button";
-
+import { Link, useNavigate } from "react-router-dom";
-import React, { useEffect, useState } from 'react'
+import swal from "sweetalert";
-import Button from '@material-ui/core/Button'
+import axios from "axios";
-import { Link, useNavigate } from 'react-router-dom'
+import { isAutheticated } from "src/auth";
-import swal from 'sweetalert'
-import axios from 'axios'
-import { isAutheticated } from 'src/auth'
 // import { WebsiteURL } from '../WebsiteURL'
 
 const Contacts = (props) => {
-    const token = isAutheticated()
+  const token = isAutheticated();
 
-    const navigate = useNavigate()
+  const navigate = useNavigate();
 
-    const { data, setData } = props.data
+  const { data, setData } = props.data;
 
-    const { loading, setLoading } = props.loading
+  const { loading, setLoading } = props.loading;
-    // const [data, setData] = useState({
+  // const [data, setData] = useState({
-    //     image: '',
+  //     image: '',
-    //     imageURL: '',
+  //     imageURL: '',
-    //     name: '',
+  //     name: '',
-    //     email: '',
+  //     email: '',
 
-    //     short_url: '',
+  //     short_url: '',
-    //     contact_Number: '',
+  //     contact_Number: '',
-    //     contact_Person_Name: '',
+  //     contact_Person_Name: '',
 
-    // })
+  // })
 
+  const [validForm, setValidForm] = useState(false);
 
+  const [errors, setErrors] = useState({
+    emailError: "",
+    phoneError: "",
+  });
+  const validEmailRegex = RegExp(
+    /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
+  );
+  const validPhoneRegex = RegExp(
+    /^(\+\d{1,2}\s?)?1?\-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/
+  );
 
-    const [validForm, setValidForm] = useState(false)
+  const validateForm = () => {
+    let valid = true;
+    Object.values(errors).forEach((val) => {
+      if (val.length > 0) {
+        valid = false;
+        return false;
+      }
+    });
+    Object.values(data.email).forEach((val) => {
+      if (val.length <= 0) {
+        valid = false;
+        return false;
+      }
+    });
+    return valid;
+  };
 
+  //cheking email and password
+  useEffect(() => {
+    if (validateForm()) {
+      setValidForm(true);
+    } else {
+      setValidForm(false);
+    }
+  }, [errors]);
 
+  const handleChange = (e) => {
+    if (e.target.id === "business_name") {
+      if (e.target.value.length < 0) return;
 
-
+      setData((prev) => ({
-    const [errors, setErrors] = useState({
+        ...prev,
-        emailError: '',
+        short_url: e.target.value.toLowerCase().replace(/\s+/g, "-"),
-        phoneError: ''
+      }));
-
-
-    })
-    const validEmailRegex = RegExp(
-        /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
-    )
-    const validPhoneRegex = RegExp(
-        /^(\+\d{1,2}\s?)?1?\-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/,
-    )
-
-
-    const validateForm = () => {
-        let valid = true
-        Object.values(errors).forEach((val) => {
-            if (val.length > 0) {
-                valid = false
-                return false
-            }
-        })
-        Object.values(data.email).forEach((val) => {
-            if (val.length <= 0) {
-                valid = false
-                return false
-            }
-        })
-        return valid
     }
 
-    //cheking email and password
+    if (e.target.id === "contact_Number") {
-    useEffect(() => {
+      setErrors({
-        if (validateForm()) {
+        ...errors,
-            setValidForm(true)
+        phoneError: validPhoneRegex.test(e.target.value)
-        } else {
+          ? ""
-            setValidForm(false)
+          : "Number is not valid!",
-        }
+      });
-    }, [errors])
+    }
-
+    if (e.target.id === "email") {
-
+      setErrors({
-    const handleChange = (e) => {
+        ...errors,
-        if (e.target.id === 'business_name') {
+        emailError: validEmailRegex.test(e.target.value)
-            if (e.target.value.length < 0) return
+          ? ""
-
+          : "Email is not valid!",
-            setData((prev) => ({ ...prev, short_url: e.target.value.toLowerCase().replace(/\s+/g, '-') }))
+      });
-        }
-
-        if (e.target.id === 'contact_Number') {
-            setErrors({
-                ...errors,
-                phoneError: validPhoneRegex.test(e.target.value) ? '' : 'Number is not valid!',
-            })
-
-
-        }
-        if (e.target.id === 'email') {
-            setErrors({
-                ...errors,
-                emailError: validEmailRegex.test(e.target.value) ? '' : 'Email is not valid!',
-            })
-
-
-        }
-
-        if (e.target.id === 'image') {
-            if (
-                e.target.files[0]?.type === 'image/jpeg' ||
-                e.target.files[0]?.type === 'image/png' ||
-                e.target.files[0]?.type === 'image/jpg'
-            ) {
-                setData((prev) => ({
-                    ...prev,
-                    imageURL: URL.createObjectURL(e.target.files[0]),
-                    image: e.target.files[0],
-                }))
-                return
-            } else {
-                swal({
-                    title: 'Warning',
-                    text: 'Upload jpg, jpeg, png only.',
-                    icon: 'error',
-                    button: 'Close',
-                    dangerMode: true,
-                })
-                setData((prev) => ({
-                    ...prev,
-                    imageURL: '',
-                    image: '',
-                }))
-                e.target.value = null
-                return
-            }
-        }
-        setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
     }
 
+    if (e.target.id === "image") {
+      if (
+        e.target.files[0]?.type === "image/jpeg" ||
+        e.target.files[0]?.type === "image/png" ||
+        e.target.files[0]?.type === "image/jpg"
+      ) {
+        setData((prev) => ({
+          ...prev,
+          imageURL: URL.createObjectURL(e.target.files[0]),
+          image: e.target.files[0],
+        }));
+        return;
+      } else {
+        swal({
+          title: "Warning",
+          text: "Upload jpg, jpeg, png only.",
+          icon: "error",
+          button: "Close",
+          dangerMode: true,
+        });
+        setData((prev) => ({
+          ...prev,
+          imageURL: "",
+          image: "",
+        }));
+        e.target.value = null;
+        return;
+      }
+    }
+    setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
+  };
 
-
+  return (
-    return (
+    <div className="container">
-        <div className="container">
+      <div className="row">
-            <div className="row">
+        <div className="col-12">
-                <div className="col-12">
+          <div
-                    <div
+            className="
-                        className="
                     page-title-box
                     d-flex
                     align-items-center
                     justify-content-between
                   "
-                    >
+          >
-                        <div style={{ fontSize: '22px' }} className="fw-bold">
+            <div style={{ fontSize: "22px" }} className="fw-bold">
-                            Contacts
+              Contact Information
-                        </div>
+            </div>
-                        <div style={{ display: 'flex', gap: '1rem' }}>
+            <div style={{ display: "flex", gap: "1rem" }}>
-                            <h4 className="mb-0"></h4>
+              <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={() => props.handleView(2)}
-                            // disabled={loading}
-                            >
-                                Prev
-                            </Button>
-
-                            <Button
-                                variant="contained"
-                                color="secondary"
-                                style={{
-                                    fontWeight: 'bold',
-                                    marginBottom: '1rem',
-                                    textTransform: 'capitalize',
-                                }}
-                                onClick={() => props.handleView(4)}
-
-                            >
-                                Next
-                            </Button>
-
-                        </div>
-                    </div>
-                </div>
             </div>
-            <div className="row">
-                <div className="col-sm-12 col-md-12 col-lg-12 my-1">
-                    <div className="card h-100">
-                        <div className="card-body px-5">
-                            <div className="mb-3">
-                                <label htmlFor="title" className="form-label">
-                                    Business Name*
-                                </label>
-                                <input
-                                    type="text"
-                                    className="form-control"
-                                    id="business_name"
-                                    value={data.business_name}
-                                    maxLength={50}
-                                    onChange={(e) => handleChange(e)}
-                                />
-                                {data.business_name.length > 0 && <p className="pt-1 pl-2 text-secondary">Remaining characters : {50 - data.business_name.length}</p>}
-                            </div>
 
-                            <div className="mb-3">
+            <div className="page-title-right">
-                                <label htmlFor="title" className="form-label">
+              <Button
-                                    Email *
+                variant="contained"
-                                </label>
+                color="primary"
-                                <input
+                style={{
-                                    type="email"
+                  fontWeight: "bold",
-                                    className="form-control"
+                  marginBottom: "1rem",
-                                    id="email"
+                  textTransform: "capitalize",
-                                    value={data.email}
+                  marginRight: "5px",
-                                    maxLength="50"
+                }}
-                                    onChange={(e) => handleChange(e)}
+                onClick={() => props.handleView(1)}
-                                />
+                // disabled={loading}
-                                {errors.emailError && (
+              >
-                                    <p className="text-center py-2 text-danger">{errors.emailError}</p>
+                Prev
-                                )}
+              </Button>
-                            </div>
-                            <div className="mb-3">
-                                <label htmlFor="title" className="form-label">
-                                    Contact Number*
-                                </label>
-                                <input
-                                    type="number"
-                                    className="form-control"
-                                    id="contact_Number"
-                                    value={data.contact_Number}
-                                    onChange={(e) => handleChange(e)}
-                                />
-                                {errors.phoneError && (
-                                    <p className="text-center py-2 text-danger">{errors.phoneError}</p>
-                                )}
-                            </div>
-                            <div className="mb-3">
-                                <label htmlFor="title" className="form-label">
-                                    Contact Person Name*
-                                </label>
-                                <input
-                                    type="text"
-                                    className="form-control"
-                                    id="contact_Person_Name"
-                                    value={data.contact_Person_Name}
-                                    onChange={(e) => handleChange(e)}
-                                />
-                            </div>
-                            <div className="mb-3">
-                                <label htmlFor="title" className="form-label">
-                                    URL*
-                                </label>
-                                <div className="input-group mb-3">
-                                    <span className="input-group-text" id="basic-addon3">
-                                        {data.WebsiteURL}
-                                    </span>
-                                    <input
-                                        type="text"
-                                        className="form-control"
-                                        id="short_url"
-                                        aria-describedby="basic-addon3"
-                                        disabled
-                                        value={data.short_url}
-                                        onChange={(e) => handleChange(e)}
-                                    />
-                                </div>
-                            </div>
 
+              <Button
+                variant="contained"
+                color="secondary"
+                style={{
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textTransform: "capitalize",
+                }}
+                onClick={() => props.handleView(4)}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col-sm-12 col-md-12 col-lg-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="business_name"
+                  value={data.business_name}
+                  maxLength={50}
+                  onChange={(e) => handleChange(e)}
+                />
+                {data.business_name.length > 0 && (
+                  <p className="pt-1 pl-2 text-secondary">
+                    Remaining characters : {50 - data.business_name.length}
+                  </p>
+                )}
+              </div>
 
+              <div className="mb-3">
+                <label htmlFor="title" className="form-label">
+                  Email *
+                </label>
+                <input
+                  type="email"
+                  className="form-control"
+                  id="email"
+                  value={data.email}
+                  maxLength="50"
+                  onChange={(e) => handleChange(e)}
+                />
+                {errors.emailError && (
+                  <p className="text-center py-2 text-danger">
+                    {errors.emailError}
+                  </p>
+                )}
+              </div>
+              <div className="mb-3">
+                <label htmlFor="title" className="form-label">
+                  Contact Number*
+                </label>
+                <input
+                  type="number"
+                  className="form-control"
+                  id="contact_Number"
+                  value={data.contact_Number}
+                  onChange={(e) => handleChange(e)}
+                />
+                {errors.phoneError && (
+                  <p className="text-center py-2 text-danger">
+                    {errors.phoneError}
+                  </p>
+                )}
+              </div>
+              <div className="mb-3">
+                <label htmlFor="title" className="form-label">
+                  Contact Person Name*
+                </label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="contact_Person_Name"
+                  value={data.contact_Person_Name}
+                  onChange={(e) => handleChange(e)}
+                />
+              </div>
 
-                            {/* <div className="mb-3">
+              {/*<div className="mb-3">
+                <label htmlFor="title" className="form-label">
+                  URL*
+                </label>
+                <div className="input-group mb-3">
+                  <span className="input-group-text" id="basic-addon3">
+                    {data.WebsiteURL}
+                  </span>
+                  <input
+                    type="text"
+                    className="form-control"
+                    id="short_url"
+                    aria-describedby="basic-addon3"
+                    disabled
+                    value={data.short_url}
+                    onChange={(e) => handleChange(e)}
+                  />
+                </div>
+                </div>*/}
+
+              {/* <div className="mb-3">
                                 <label htmlFor="image" className="form-label">
                                     Franchisee Banner (optional)
                                 </label>
@@ -292,18 +286,12 @@ const Contacts = (props) => {
                                     style={{ maxHeight: '200px', maxWidth: '100%' }}
                                 />
                             </div> */}
-
-
-
-
-
-                        </div>
-                    </div>
-                </div>
-
             </div>
+          </div>
         </div>
-    )
+      </div>
-}
+    </div>
+  );
+};
 
-export default Contacts
+export default Contacts;

src/views/Business/multiform/DoctorInfo.js

@@ -0,0 +1,338 @@
+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 { CFormLabel, CFormSelect } from "@coreui/react";
+// import { WebsiteURL } from '../WebsiteURL'
+
+const DcotorInfo = (props) => {
+  const token = isAutheticated();
+
+  const navigate = useNavigate();
+
+  const { data, setData } = props.data;
+
+  const [categories, setCategories] = useState([]);
+
+  const getCategories = () => {
+    axios.get("/api/config/specialty/getall").then((res) => {
+      setCategories(res.data.specialty);
+    });
+  };
+
+  // create options from categories with placeholder select Specialization
+  const options = [
+    {
+      label: "Select Specialization",
+      value: "",
+    },
+    ...categories.map((category) => {
+      return {
+        label: category.name,
+        value: category.name,
+      };
+    }),
+  ];
+
+  useEffect(() => {
+    getCategories();
+  }, []);
+
+  const { loading, setLoading } = props.loading;
+  // const [data, setData] = useState({
+  //     image: '',
+  //     imageURL: '',
+  //     name: '',
+  //     email: '',
+
+  //     short_url: '',
+  //     contact_Number: '',
+  //     contact_Person_Name: '',
+
+  // })
+
+  const [validForm, setValidForm] = useState(false);
+
+  const [errors, setErrors] = useState({
+    emailError: "",
+    phoneError: "",
+  });
+  const validEmailRegex = RegExp(
+    /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
+  );
+  const validPhoneRegex = RegExp(
+    /^(\+\d{1,2}\s?)?1?\-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/
+  );
+
+  const validateForm = () => {
+    let valid = true;
+    Object.values(errors).forEach((val) => {
+      if (val.length > 0) {
+        valid = false;
+        return false;
+      }
+    });
+    Object.values(data.email).forEach((val) => {
+      if (val.length <= 0) {
+        valid = false;
+        return false;
+      }
+    });
+    return valid;
+  };
+
+  //cheking email and password
+  useEffect(() => {
+    if (validateForm()) {
+      setValidForm(true);
+    } else {
+      setValidForm(false);
+    }
+  }, [errors]);
+
+  const handleChange = (e) => {
+    if (e.target.id === "contact_Person_Name") {
+      if (e.target.value.length < 0) return;
+
+      setData((prev) => ({
+        ...prev,
+        short_url: e.target.value.toLowerCase().replace(/\s+/g, "-"),
+      }));
+    }
+
+    if (e.target.id === "contact_Number") {
+      setErrors({
+        ...errors,
+        phoneError: validPhoneRegex.test(e.target.value)
+          ? ""
+          : "Number is not valid!",
+      });
+    }
+    if (e.target.id === "email") {
+      setErrors({
+        ...errors,
+        emailError: validEmailRegex.test(e.target.value)
+          ? ""
+          : "Email is not valid!",
+      });
+    }
+
+    if (e.target.id === "image") {
+      if (
+        e.target.files[0]?.type === "image/jpeg" ||
+        e.target.files[0]?.type === "image/png" ||
+        e.target.files[0]?.type === "image/jpg"
+      ) {
+        setData((prev) => ({
+          ...prev,
+          imageURL: URL.createObjectURL(e.target.files[0]),
+          image: e.target.files[0],
+        }));
+        return;
+      } else {
+        swal({
+          title: "Warning",
+          text: "Upload jpg, jpeg, png only.",
+          icon: "error",
+          button: "Close",
+          dangerMode: true,
+        });
+        setData((prev) => ({
+          ...prev,
+          imageURL: "",
+          image: "",
+        }));
+        e.target.value = null;
+        return;
+      }
+    }
+    setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
+  };
+
+  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">
+              Doctor Information
+            </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={() => props.handleView(1)}
+                // disabled={loading}
+              >
+                Prev
+              </Button>
+
+              <Button
+                variant="contained"
+                color="secondary"
+                style={{
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textTransform: "capitalize",
+                }}
+                onClick={() => props.handleView(4)}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col-sm-12 col-md-12 col-lg-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="contact_Person_Name"
+                  value={data.contact_Person_Name}
+                  onChange={(e) => handleChange(e)}
+                />
+              </div>
+
+              <div className="mb-3">
+                <CFormLabel htmlFor="specialization">
+                  Specialization *
+                </CFormLabel>
+                <CFormSelect
+                  id="specialization"
+                  name="specialization"
+                  value={data.specialization}
+                  options={options}
+                  onChange={handleChange}
+                ></CFormSelect>
+              </div>
+
+              {/*  <div className="mb-3">
+                <label htmlFor="title" className="form-label">
+                  Business Name*
+                </label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="business_name"
+                  value={data.business_name}
+                  maxLength={50}
+                  onChange={(e) => handleChange(e)}
+                />
+                {data.business_name.length > 0 && (
+                  <p className="pt-1 pl-2 text-secondary">
+                    Remaining characters : {50 - data.business_name.length}
+                  </p>
+                )}
+                </div>*/}
+
+              <div className="mb-3">
+                <label htmlFor="title" className="form-label">
+                  Email *
+                </label>
+                <input
+                  type="email"
+                  className="form-control"
+                  id="email"
+                  value={data.email}
+                  maxLength="50"
+                  onChange={(e) => handleChange(e)}
+                />
+                {errors.emailError && (
+                  <p className="text-center py-2 text-danger">
+                    {errors.emailError}
+                  </p>
+                )}
+              </div>
+              <div className="mb-3">
+                <label htmlFor="title" className="form-label">
+                  Contact Number*
+                </label>
+                <input
+                  type="number"
+                  className="form-control"
+                  id="contact_Number"
+                  value={data.contact_Number}
+                  onChange={(e) => handleChange(e)}
+                />
+                {errors.phoneError && (
+                  <p className="text-center py-2 text-danger">
+                    {errors.phoneError}
+                  </p>
+                )}
+              </div>
+
+              {/* <div className="mb-3">
+                <label htmlFor="title" className="form-label">
+                  URL*
+                </label>
+                <div className="input-group mb-3">
+                  <span className="input-group-text" id="basic-addon3">
+                    {data.WebsiteURL}
+                  </span>
+                  <input
+                    type="text"
+                    className="form-control"
+                    id="short_url"
+                    aria-describedby="basic-addon3"
+                    disabled
+                    value={data.short_url}
+                    onChange={(e) => handleChange(e)}
+                  />
+                </div>
+                </div>*/}
+
+              {/* <div className="mb-3">
+                                <label htmlFor="image" className="form-label">
+                                    Franchisee Banner (optional)
+                                </label>
+                                <input
+                                    type="file"
+                                    className="form-control"
+                                    id="image"
+                                    accept="image/*"
+                                    onChange={(e) => handleChange(e)}
+                                />
+                                <p className="pt-1 pl-2 text-secondary">Upload jpg, jpeg and png only*</p>
+                            </div>
+                            <div className="mb-3" style={{ height: '200px', maxWdth: '100%' }}>
+                                <img
+                                    src={data.imageURL}
+                                    alt="Uploaded Image will be shown here"
+                                    style={{ maxHeight: '200px', maxWidth: '100%' }}
+                                />
+                            </div> */}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DcotorInfo;

src/views/Business/multiform/SelectBusiness.js

@@ -1,163 +1,135 @@
-
+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 React, { useEffect, useState } from 'react'
+import axios from "axios";
-import Button from '@material-ui/core/Button'
+import { isAutheticated } from "src/auth";
-import { Link, useNavigate } from 'react-router-dom'
-import swal from 'sweetalert'
-import axios from 'axios'
-import { isAutheticated } from 'src/auth'
-
-
 
 const SelectBusiness = (props) => {
-    const token = isAutheticated()
+  const token = isAutheticated();
-    const navigate = useNavigate()
+  const navigate = useNavigate();
-    console.log(props.handleView)
+  console.log(props.handleView);
 
-    const { data, setData } = props.data
+  const { data, setData } = props.data;
-    const { loading, setLoading } = props.loading
+  const { loading, setLoading } = props.loading;
-    // const categories = props?.categories || []
+  // const categories = props?.categories || []
 
-    const handleChange = (e) => {
+  const handleChange = (e) => {
+    setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
+  };
 
-        setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
+  // const [loading, setLoading] = useState(false)
-    }
 
+  const [BusinessData, setBusinessData] = useState([]);
+  const getCategories = () => {
+    axios
+      .get(`/api/business`, {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        setBusinessData(res.data.data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+        setLoading(false);
+      });
+  };
 
-    // const [loading, setLoading] = useState(false)
+  useEffect(() => {
+    getCategories();
+  }, []);
 
+  const handleSubmit = () => {};
 
-
+  return (
-
+    <div className="container">
-    const [BusinessData, setBusinessData] = useState([])
+      <div className="row">
-    const getCategories = () => {
+        <div className="col-12">
-        axios
+          <div
-            .get(`/api/business`, {
+            className="
-                headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
-            })
-            .then((res) => {
-                setBusinessData(res.data.data)
-                setLoading(false)
-            })
-            .catch((err) => {
-                console.log(err)
-                setLoading(false)
-            })
-    }
-
-    useEffect(() => {
-        getCategories()
-    }, [])
-
-
-
-
-    const handleSubmit = () => {
-
-    }
-
-    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">
+            <div style={{ fontSize: "22px" }} className="fw-bold">
-                            Select Business
+              Select Provider Type
-                        </div>
+            </div>
-                        <div style={{ display: 'flex', gap: '1rem' }}>
+            <div style={{ display: "flex", gap: "1rem" }}>
-                            <h4 className="mb-0"></h4>
+              <h4 className="mb-0"></h4>
-                        </div>
-
-                        <div className="page-title-right">
-
-                            <Link to="/Businesses">
-                                <Button
-                                    variant="contained"
-                                    color="secondary"
-                                    style={{
-                                        fontWeight: 'bold',
-                                        marginBottom: '1rem',
-                                        textTransform: 'capitalize',
-                                        marginRight: '5px',
-                                    }}
-                                >
-                                    Back
-                                </Button>
-                            </Link>
-                            <Button
-                                variant="contained"
-                                color="primary"
-                                style={{
-                                    fontWeight: 'bold',
-                                    marginBottom: '1rem',
-                                    textTransform: 'capitalize',
-                                    // marginRight: '5px',
-                                }}
-                                onClick={() => props.handleView(2)}
-                            // disabled={loading}
-                            // disabled={data.business === ''}
-
-                            >
-                                Next
-                                {/* {loading ? 'Loading' : 'Next'} */}
-                            </Button>
-                        </div>
-                    </div>
-                </div>
             </div>
 
-
+            <div className="page-title-right">
-
+              <Link to="/healthcare/providers">
-            <div className="row">
+                <Button
-                <div className="col-sm-12 col-md-12 col-lg-12 my-1">
+                  variant="contained"
-                    <div className="card h-100">
+                  color="secondary"
-                        <div className="card-body px-5">
+                  style={{
-
+                    fontWeight: "bold",
-
+                    marginBottom: "1rem",
-
+                    textTransform: "capitalize",
-
+                    marginRight: "5px",
-
+                  }}
-                            <div className="mb-3">
+                >
-                                <label htmlFor="title" className="form-label">
+                  Back
-                                    Business *
+                </Button>
-                                </label>
+              </Link>
-                                <select
+              <Button
-                                    onChange={(e) => handleChange(e)}
+                variant="contained"
-                                    value={data.business}
+                color="primary"
-                                    className="form-control"
+                style={{
-                                    id="business"
+                  fontWeight: "bold",
-                                    disabled={BusinessData.length < 1}
+                  marginBottom: "1rem",
-                                >
+                  textTransform: "capitalize",
-                                    <option value="1">---select---</option>
+                  // marginRight: '5px',
-                                    {BusinessData.length > 0 && BusinessData.map((item, index) =>
+                }}
-                                        <option key={index} value={item?.business} >{item?.business}</option>
+                onClick={() => props.handleView(3)}
-
+                // disabled={loading}
-                                    )}
+                // disabled={data.business === ''}
-                                </select>
+              >
-
+                Next
-                            </div>
+                {/* {loading ? 'Loading' : 'Next'} */}
-
+              </Button>
-
-
-
-                        </div>
-                    </div>
-                </div>
-
             </div>
+          </div>
         </div>
-    )
+      </div>
-}
-
-export default SelectBusiness
 
+      <div className="row">
+        <div className="col-sm-12 col-md-12 col-lg-12 my-1">
+          <div className="card h-100">
+            <div className="card-body px-5">
+              <div className="mb-3">
+                <label htmlFor="title" className="form-label">
+                  Provider *
+                </label>
+                <select
+                  onChange={(e) => handleChange(e)}
+                  value={data.business}
+                  className="form-control"
+                  id="business"
+                  disabled={BusinessData.length < 1}
+                >
+                  <option value="1">---select---</option>
+                  {BusinessData.length > 0 &&
+                    BusinessData.map((item, index) => (
+                      <option key={index} value={item?.business}>
+                        {item?.business}
+                      </option>
+                    ))}
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
+export default SelectBusiness;

src/views/Business/multiform/selectLanguage.js

@@ -1,162 +1,144 @@
-
+import React, { useEffect, useState } from "react";
-
+import Button from "@material-ui/core/Button";
-
+import { Link, useNavigate } from "react-router-dom";
-import React, { useEffect, useState } from 'react'
+import swal from "sweetalert";
-import Button from '@material-ui/core/Button'
+import axios from "axios";
-import { Link, useNavigate } from 'react-router-dom'
+import { isAutheticated } from "src/auth";
-import swal from 'sweetalert'
-import axios from 'axios'
-import { isAutheticated } from 'src/auth'
-
-
 
 const selectLanguage = (props) => {
-    const token = isAutheticated()
+  const token = isAutheticated();
-    const navigate = useNavigate()
+  const navigate = useNavigate();
 
-    const { data, setData } = props.data
+  const { data, setData } = props.data;
 
-    const { loading, setLoading } = props.loading
+  const { loading, setLoading } = props.loading;
-    // const categories = props?.categories || []
+  // const categories = props?.categories || []
-
-    const handleChange = (e) => {
-        if (data.language.length < 3) {
-            setData((prev) => ({
-                ...prev,
-                language: [...data.language, e.target.value]
-            }))
-        }
-        else {
-            swal({
-                title: 'Warning',
-                text: 'please select Up to 3 languages!',
-                icon: 'warning',
-                button: 'ok',
-                dangerMode: true
-            })
-        }
 
+  const handleChange = (e) => {
+    if (data.language.length < 3) {
+      setData((prev) => ({
+        ...prev,
+        language: [...data.language, e.target.value],
+      }));
+    } else {
+      swal({
+        title: "Warning",
+        text: "please select Up to 3 languages!",
+        icon: "warning",
+        button: "ok",
+        dangerMode: true,
+      });
     }
+  };
 
-    // const [loading, setLoading] = useState(false)
+  // const [loading, setLoading] = useState(false)
 
+  const [LanguagesData, setLanguagesData] = useState([]);
 
+  const getCategories = () => {
+    axios
+      .get(`/api/language`, {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        setLanguagesData(res.data.data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+        setLoading(false);
+      });
+  };
 
+  useEffect(() => {
+    getCategories();
+  }, []);
 
-    const [LanguagesData, setLanguagesData] = useState([])
+  return (
-
+    <div className="container">
-
+      <div className="row">
-    const getCategories = () => {
+        <div className="col-12">
-        axios
+          <div
-            .get(`/api/language`, {
+            className="
-                headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
-            })
-            .then((res) => {
-
-                setLanguagesData(res.data.data)
-                setLoading(false)
-            })
-            .catch((err) => {
-                console.log(err)
-                setLoading(false)
-            })
-    }
-
-    useEffect(() => {
-        getCategories()
-    }, [])
-
-
-
-
-
-
-    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">
+            <div style={{ fontSize: "22px" }} className="fw-bold">
-                            Select Language
+              Select Language
-                        </div>
+            </div>
-                        <div style={{ display: 'flex', gap: '1rem' }}>
+            <div style={{ display: "flex", gap: "1rem" }}>
-                            <h4 className="mb-0"></h4>
+              <h4 className="mb-0"></h4>
-                        </div>
-
-                        <div className="page-title-right">
-                            <Button
-                                variant="contained"
-                                color="secondary"
-                                style={{
-                                    fontWeight: 'bold',
-                                    marginBottom: '1rem',
-                                    textTransform: 'capitalize',
-                                    marginRight: '5px',
-
-                                }}
-                                onClick={() => props.handleView(3)}
-
-                            >
-                                Prev
-                            </Button>
-
-                            <Button
-                                variant="contained"
-                                color="primary"
-                                disabled={data.purpose === ''}
-                                style={{
-                                    fontWeight: 'bold',
-                                    marginBottom: '1rem',
-                                    textTransform: 'capitalize',
-                                    //  marginRight: '5px',
-                                }}
-                                onClick={() => props.handleView(5)}
-                            // disabled={loading}
-                            // disabled={data.language.length < 0 && data.language.length > 3}
-
-                            >
-                                Next
-                                {/* {loading ? 'Loading' : 'Next'} */}
-                            </Button>
-                        </div>
-                    </div>
-                </div>
             </div>
 
+            <div className="page-title-right">
+              <Button
+                variant="contained"
+                color="secondary"
+                style={{
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textTransform: "capitalize",
+                  marginRight: "5px",
+                }}
+                onClick={() => props.handleView(3)}
+              >
+                Prev
+              </Button>
 
+              <Button
+                variant="contained"
+                color="primary"
+                style={{
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textTransform: "capitalize",
+                  //  marginRight: '5px',
+                }}
+                onClick={() => props.handleView(5)}
+                // disabled={loading}
+                // disabled={data.language.length < 0 && data.language.length > 3}
+              >
+                Next
+                {/* {loading ? 'Loading' : 'Next'} */}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
 
-            <div className="row">
+      <div className="row">
-                <div className="col-sm-12 col-md-12 col-lg-12 my-1">
+        <div className="col-sm-12 col-md-12 col-lg-12 my-1">
-                    <div className="card h-100">
+          <div className="card h-100">
-                        <div className="card-body px-5">
+            <div className="card-body px-5">
-
+              <div className="mb-3">
-
+                <label htmlFor="title" className="form-label">
-
+                  please select Up to 3 languages
-
+                </label>
-
+                {LanguagesData.length > 0 &&
-                            <div className="mb-3">
+                  LanguagesData.map((item, index) => (
-                                <label htmlFor="title" className="form-label">
+                    // <option key={index} value={item?.language} >{item?.language}</option>
-                                    please select Up to 3 languages
+                    <div className="d-flex">
-                                </label>
+                      <input
-                                {LanguagesData.length > 0 && LanguagesData.map((item, index) =>
+                        className="me-2"
-                                    // <option key={index} value={item?.language} >{item?.language}</option>
+                        type="checkbox"
-                                    <div className="d-flex">
+                        name={item?.language}
-                                        <input className='me-2' type="checkbox" name={item?.language} id={data.language} value={item?.language} onChange={(e) => handleChange(e)}
+                        id={data.language}
-                                        />
+                        value={item?.language}
-                                        {/* {checked = { data.language.map(item => item === item?.language) }} */}
+                        onChange={(e) => handleChange(e)}
-                                        <label htmlFor="title" className="form-label">
+                      />
-                                            {item?.language}
+                      {/* {checked = { data.language.map(item => item === item?.language) }} */}
-                                        </label>
+                      <label htmlFor="title" className="form-label">
-                                    </div>
+                        {item?.language}
-                                )}
+                      </label>
-                                {/* <select
+                    </div>
+                  ))}
+                {/* <select
                                     onChange={(e) => handleChange(e)}
                                     value={data.language}
                                     className="form-control"
@@ -169,19 +151,13 @@ const selectLanguage = (props) => {
 
                                     )}
                                 </select> */}
-
+              </div>
-                            </div>
-
-
-
-
-                        </div>
-                    </div>
-                </div>
-
             </div>
+          </div>
         </div>
-    )
+      </div>
-}
+    </div>
+  );
+};
 
-export default selectLanguage
+export default selectLanguage;