order view part fixed , add sc and tm add on efield employee code also fixed the add multiple of sc and tm

src/views/SalesCoOrdinators/AddMultipleSC.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import axios from "axios";
 import swal from "sweetalert";
 import { isAutheticated } from "src/auth";
-import { useNavigate } from "react-router-dom"; 
+import { useNavigate } from "react-router-dom";
 import { toast } from "react-hot-toast";
 const AddMultiplesc = () => {
   const [file, setFile] = useState(null);
@@ -60,9 +60,12 @@ const AddMultiplesc = () => {
         setNewlyCreated(data.newlyCreated);
         // console.log(data.newlyCreated);
       }
-      if (data.updatedsalesCoordinators && data.updatedsalesCoordinators.length > 0) {
+      if (
+        data.updatedsalesCoordinators &&
+        data.updatedsalesCoordinators.length > 0
+      ) {
         setupdatedsalesCoordinators(data.updatedsalesCoordinators);
-        // console.log(data.updatedsalesCoordinators); 
+        // console.log(data.updatedsalesCoordinators);
       }
 
       // Redirect or display success message
@@ -145,14 +148,17 @@ const AddMultiplesc = () => {
           <table className="table table-bordered">
             <thead>
               <tr>
+                <th>Employee Code</th>
                 <th>Sales Coordinator Name</th>
                 <th>Email</th>
+                <th>Phone</th>
                 <th>Message</th>
               </tr>
             </thead>
             <tbody>
               {errors.map((error, index) => (
                 <tr key={index}>
+                  <td>{error.uniqueId || "N/A"}</td>
                   <td>{error.name || "N/A"}</td>
                   <td>{error.email || "N/A"}</td>
                   <td>{error.phone || "N/A"}</td>
@@ -169,6 +175,7 @@ const AddMultiplesc = () => {
           <table className="table table-bordered">
             <thead>
               <tr>
+                <th>Employee Code</th>
                 <th>Sales Coordinator Name</th>
                 <th>Email</th>
                 <th>Phone</th>
@@ -178,6 +185,7 @@ const AddMultiplesc = () => {
             <tbody>
               {updatedsalesCoordinators.map((SC, index) => (
                 <tr key={index}>
+                  <td>{SC.uniqueId || "N/A"}</td>
                   <td>{SC.name || "N/A"}</td>
                   <td>{SC.email || "N/A"}</td>
                   <td>{SC.mobileNumber || "N/A"}</td>
@@ -194,6 +202,7 @@ const AddMultiplesc = () => {
           <table className="table table-bordered">
             <thead>
               <tr>
+                <th>Employee Code</th>
                 <th>Sales Coordinator Name</th>
                 <th>Email</th>
                 <th>Phone</th>
@@ -202,6 +211,7 @@ const AddMultiplesc = () => {
             <tbody>
               {newlyCreated.map((SC, index) => (
                 <tr key={index}>
+                  <td>{SC?.salesCoordinator?.uniqueId || "N/A"}</td>
                   <td>{SC?.salesCoordinator?.name || "N/A"}</td>
                   <td>{SC?.salesCoordinator?.email || "N/A"}</td>
                   <td>{SC?.salesCoordinator?.mobileNumber || "N/A"}</td>

src/views/SalesCoOrdinators/AddSalesCoOrdinator.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
@@ -6,12 +6,14 @@ import Modal from "react-bootstrap/Modal";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import swal from "sweetalert";
+import debounce from "lodash.debounce";
 
 const AddSalesCoOrdinator = () => {
   const navigate = useNavigate();
   const token = isAutheticated();
 
   const [formData, setFormData] = useState({
+    uniqueId: "",
     name: "",
     email: "",
     countryCode: "+91",
@@ -20,39 +22,118 @@ const AddSalesCoOrdinator = () => {
     territoryManager: "", // Add territoryManager field
   });
 
-  const [territoryManagers, setTerritoryManagers] = useState([]); // State for storing fetched territory managers
+  const nameRef = useRef();
+  const dropdownRef = useRef(); // Reference for the dropdown
+  const [territoryManagers, setTerritoryManagers] = useState([]);
   const [showModal, setShowModal] = useState(false);
-  const [loading, setLoading] = useState(false); // Loading state for the Territory Manager dropdown
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [tmname, setTmname] = useState("");
+  const getTerritoryManagers = async (query = "") => {
+    try {
+      const res = await axios.get(`/api/territorymanager/getAll-dropdown/`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        params: {
+          name: query,
+        },
+      });
+      setTerritoryManagers(res.data.territoryManager || []);
+    } catch (err) {
+      const msg = err?.response?.data?.message || "Something went wrong!";
+      swal({
+        title: "Error",
+        text: msg,
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
+    }
+  };
 
   // Fetch Territory Managers when the component mounts
   useEffect(() => {
     getTerritoryManagers();
   }, []);
 
-  const getTerritoryManagers = () => {
+  const debouncedSearch = useCallback(
-    setLoading(true);
+    debounce(() => {
-    axios
+      getTerritoryManagers(nameRef.current.value);
-      .get(`/api/territorymanager/getAll/`, {
+    }, 500),
-        headers: {
+    []
-          Authorization: `Bearer ${token}`,
+  );
-        },
+
-      })
+  const handleSearchChange = (e) => {
-      .then((res) => {
+    // const { value } = e.target;
-        setTerritoryManagers(res.data.territoryManager || []); // Store the response data
+    // setFormData({ ...formData, territoryManager: value });
-        setLoading(false);
+    setShowDropdown(true);
-      })
+    setTmname(e.target.value);
-      .catch((err) => {
+    debouncedSearch();
-        console.error(err);
+  };
-        setLoading(false);
+
-      });
+  const handleDropdownSelect = (tm) => {
+    setFormData({ ...formData, territoryManager: tm._id });
+    setTmname(tm.name);
+    setShowDropdown(false);
+  };
+
+  const handleInputClick = () => {
+    setFormData({ ...formData, territoryManager: "" });
+    setShowDropdown(true);
+    getTerritoryManagers();
   };
 
   const handleChange = (e) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
+  // Listen for clicks outside the dropdown and input field to hide the dropdown
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        nameRef.current &&
+        dropdownRef.current &&
+        !nameRef.current.contains(event.target) &&
+        !dropdownRef.current.contains(event.target)
+      ) {
+        setShowDropdown(false); // Hide the dropdown
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const validateForm = () => {
+    const { uniqueId, name, email, mobileNumber, territoryManager } = formData;
+    if (!uniqueId || !name || !email || !mobileNumber || !territoryManager) {
+      swal({
+        title: "Warning",
+        text: "All fields are required!",
+        icon: "warning",
+        button: "OK",
+      });
+      return false;
+    }
+    if (!/^\d{10}$/.test(mobileNumber)) {
+      swal({
+        title: "Warning",
+        text: "Mobile number must be 10 digits!",
+        icon: "warning",
+        button: "OK",
+      });
+      return false;
+    }
+    return true;
+  };
+
   const handleRegister = async (e) => {
     e.preventDefault();
+    if (!validateForm()) return;
+
     try {
       await axios.post("/api/salescoordinator/register", formData, {
         headers: {
@@ -108,7 +189,7 @@ const AddSalesCoOrdinator = () => {
   };
 
   const handleCancel = () => {
-    navigate("/salescoordinators"); 
+    navigate("/salescoordinators");
   };
 
   return (
@@ -130,28 +211,55 @@ const AddSalesCoOrdinator = () => {
               <div className="card">
                 <div className="card-body">
                   <form onSubmit={handleRegister}>
-                    <div className="form-group d-flex align-items-center">
+                    <div className="form-group position-relative">
-                      <label className="mr-2">Add Territory Manager:</label>
+                      <label>Add Territory Manager *</label>
-                      <select
+                      <input
+                        type="text"
                         className="form-control"
-                        name="territoryManager"
+                        placeholder="Search and select Territory Manager"
-                        onChange={handleChange}
+                        ref={nameRef}
-                        value={formData.territoryManager} 
+                        value={tmname}
-                        disabled={loading}
+                        onChange={handleSearchChange}
-                        required
+                        onClick={handleInputClick}
-                        style={{ width: "auto", flex: 1 }} 
+                      />
-                      >
+                      {/* Dropdown */}
-                        <option value="">Select Territory Manager</option>
+                      {showDropdown && territoryManagers.length > 0 && (
-                        {territoryManagers.map((tm) => (
+                        <ul
-                          <option key={tm._id} value={tm._id}>
+                          className="dropdown-menu show w-100"
-                            {tm.name}
+                          ref={dropdownRef} // Reference for the dropdown
-                          </option>
+                          style={{
-                        ))}
+                            position: "absolute",
-                      </select>
+                            zIndex: 1000,
+                            top: "100%",
+                            left: 0,
+                          }}
+                        >
+                          {territoryManagers.map((tm) => (
+                            <li
+                              key={tm._id}
+                              className="dropdown-item"
+                              onClick={() => handleDropdownSelect(tm)}
+                            >
+                              {tm.name}
+                            </li>
+                          ))}
+                        </ul>
+                      )}
                     </div>
 
                     <div className="form-group">
-                      <label>Name</label>
+                      <label>Employee Code *</label>
+                      <input
+                        type="text"
+                        name="uniqueId"
+                        className="form-control"
+                        value={formData.uniqueId}
+                        onChange={handleChange}
+                        required
+                      />
+                    </div>
+                    <div className="form-group">
+                      <label>Name *</label>
                       <input
                         type="text"
                         name="name"
@@ -162,7 +270,7 @@ const AddSalesCoOrdinator = () => {
                       />
                     </div>
                     <div className="form-group">
-                      <label>Email</label>
+                      <label>Email *</label>
                       <input
                         type="email"
                         name="email"
@@ -174,7 +282,7 @@ const AddSalesCoOrdinator = () => {
                     </div>
                     <div className="form-group d-flex">
                       <div className="mr-2" style={{ flex: 1 }}>
-                        <label>Country Code</label>
+                        <label>Country Code *</label>
                         <input
                           type="text"
                           name="countryCode"
@@ -186,7 +294,7 @@ const AddSalesCoOrdinator = () => {
                         />
                       </div>
                       <div style={{ flex: 3 }}>
-                        <label>Mobile Number</label>
+                        <label>Mobile Number *</label>
                         <input
                           type="text"
                           name="mobileNumber"
@@ -197,7 +305,7 @@ const AddSalesCoOrdinator = () => {
                         />
                       </div>
                     </div>
-                    <button type="submit" className="btn btn-primary">
+                    <button className="btn btn-primary mt-4" type="submit">
                       Register
                     </button>
                   </form>
@@ -211,25 +319,24 @@ const AddSalesCoOrdinator = () => {
       {/* OTP Modal */}
       <Modal show={showModal} onHide={() => setShowModal(false)}>
         <Modal.Header closeButton>
-          <Modal.Title>Enter OTP</Modal.Title>
+          <Modal.Title>Verify OTP</Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <Form.Group>
+          <Form.Group controlId="otp">
-            <Form.Label>OTP</Form.Label>
+            <Form.Label>Enter OTP</Form.Label>
             <Form.Control
               type="text"
-              placeholder="Enter OTP"
+              name="otp"
               value={formData.otp}
-              onChange={(e) =>
+              onChange={handleChange}
-                setFormData({ ...formData, otp: e.target.value })
+              placeholder="Enter OTP"
-              }
               required
             />
           </Form.Group>
         </Modal.Body>
         <Modal.Footer>
           <Button variant="secondary" onClick={() => setShowModal(false)}>
-            Cancel
+            Close
           </Button>
           <Button variant="primary" onClick={handleVerifyOTP}>
             Verify OTP

src/views/SalesCoOrdinators/EditSalesCoOrdinator.js

@@ -13,6 +13,7 @@ const EditSalesCoOrdinator = () => {
   const { id } = useParams();
 
   const [formData, setFormData] = useState({
+    uniqueId: "",
     name: "",
     email: "",
     countryCode: "",
@@ -42,10 +43,11 @@ const EditSalesCoOrdinator = () => {
       // Assuming country code always starts with + and is followed by 1-3 digits
       const fullMobileNumber = data?.mobileNumber || "";
       const countryCodeMatch = fullMobileNumber.match(/^\+\d{1,2}/);
-      const countryCode = countryCodeMatch ? countryCodeMatch[0] : "";
+      const countryCode = countryCodeMatch ? countryCodeMatch[0] : "+91";
       const mobileNumber = fullMobileNumber.replace(countryCode, "");
 
       setFormData({
+        uniqueId: data?.uniqueId || "",
         name: data?.name || "",
         email: data?.email || "",
         countryCode: countryCode,
@@ -69,6 +71,7 @@ const EditSalesCoOrdinator = () => {
       .patch(
         `/api/salescoordinator/profile/update/${id}`,
         {
+          uniqueId:formData.uniqueId,
           name: formData.name,
           email: formData.email,
         },
@@ -221,6 +224,17 @@ const EditSalesCoOrdinator = () => {
             <div className="col-lg-12">
               <div className="card">
                 <div className="card-body">
+                  <div className="form-group">
+                    <label>Employee Code</label>
+                    <input
+                      type="text"
+                      name="Employee code"
+                      className="form-control"
+                      value={formData.uniqueId}
+                      onChange={handleChange}
+                      required
+                    />
+                  </div>
                   <div className="form-group">
                     <label>Name</label>
                     <input

src/views/TerritoryManager/AddMultipleTM.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import axios from "axios";
 import swal from "sweetalert";
 import { isAutheticated } from "src/auth";
-import { useNavigate } from "react-router-dom"; 
+import { useNavigate } from "react-router-dom";
 import { toast } from "react-hot-toast";
 const AddMultipletm = () => {
   const [file, setFile] = useState(null);
@@ -60,9 +60,12 @@ const AddMultipletm = () => {
         setNewlyCreated(data.newlyCreated);
         // console.log(data.newlyCreated);
       }
-      if (data.updatedtrritoryManagers && data.updatedtrritoryManagers.length > 0) {
+      if (
+        data.updatedtrritoryManagers &&
+        data.updatedtrritoryManagers.length > 0
+      ) {
         setupdatedtrritoryManagers(data.updatedtrritoryManagers);
-        // console.log(data.updatedtrritoryManagers); 
+        // console.log(data.updatedtrritoryManagers);
       }
 
       // Redirect or display success message
@@ -145,14 +148,17 @@ const AddMultipletm = () => {
           <table className="table table-bordered">
             <thead>
               <tr>
+                <th>Employee Code</th>
                 <th>Territory Manager Name</th>
                 <th>Email</th>
+                <th>Phone</th>
                 <th>Message</th>
               </tr>
             </thead>
             <tbody>
               {errors.map((error, index) => (
                 <tr key={index}>
+                  <td>{error.uniqueId || "N/A"}</td>
                   <td>{error.name || "N/A"}</td>
                   <td>{error.email || "N/A"}</td>
                   <td>{error.phone || "N/A"}</td>
@@ -169,6 +175,7 @@ const AddMultipletm = () => {
           <table className="table table-bordered">
             <thead>
               <tr>
+                <th>Employee Code</th>
                 <th>Territory Manager Name</th>
                 <th>Email</th>
                 <th>Phone</th>
@@ -178,6 +185,7 @@ const AddMultipletm = () => {
             <tbody>
               {updatedtrritoryManagers.map((TM, index) => (
                 <tr key={index}>
+                  <td>{TM.uniqueId || "N/A"}</td>
                   <td>{TM.name || "N/A"}</td>
                   <td>{TM.email || "N/A"}</td>
                   <td>{TM.mobileNumber || "N/A"}</td>
@@ -194,6 +202,7 @@ const AddMultipletm = () => {
           <table className="table table-bordered">
             <thead>
               <tr>
+                <th>Employee Code</th>
                 <th>Territory Manager Name</th>
                 <th>Email</th>
                 <th>Phone</th>
@@ -202,6 +211,7 @@ const AddMultipletm = () => {
             <tbody>
               {newlyCreated.map((TM, index) => (
                 <tr key={index}>
+                  <td>{TM?.territoryManager?.uniqueId || "N/A"}</td>
                   <td>{TM?.territoryManager?.name || "N/A"}</td>
                   <td>{TM?.territoryManager?.email || "N/A"}</td>
                   <td>{TM?.territoryManager?.mobileNumber || "N/A"}</td>

src/views/TerritoryManager/AddTerritoryManager.js

@@ -12,6 +12,7 @@ const AddTerritoryManager = () => {
   const token = isAutheticated();
 
   const [formData, setFormData] = useState({
+    uniqueId: "",
     name: "",
     email: "",
     countryCode: "+91",
@@ -24,9 +25,31 @@ const AddTerritoryManager = () => {
   const handleChange = (e) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
-
+  const validateForm = () => {
+    const { uniqueId, name, email, mobileNumber } = formData;
+    if (!uniqueId || !name || !email || !mobileNumber) {
+      swal({
+        title: "Warning",
+        text: "All fields are required!",
+        icon: "warning",
+        button: "OK",
+      });
+      return false;
+    }
+    if (!/^\d{10}$/.test(mobileNumber)) {
+      swal({
+        title: "Warning",
+        text: "Mobile number must be 10 digits!",
+        icon: "warning",
+        button: "OK",
+      });
+      return false;
+    }
+    return true;
+  };
   const handleRegister = async (e) => {
     e.preventDefault();
+    if (!validateForm()) return;
     try {
       await axios.post("/api/territorymanager/register", formData, {
         headers: {
@@ -105,8 +128,19 @@ const AddTerritoryManager = () => {
               <div className="card">
                 <div className="card-body">
                   <form onSubmit={handleRegister}>
+                  <div className="form-group">
+                      <label>Employee Code *</label>
+                      <input
+                        type="text"
+                        name="uniqueId"
+                        className="form-control"
+                        value={formData.uniqueId}
+                        onChange={handleChange}
+                        required
+                      />
+                    </div>
                     <div className="form-group">
-                      <label>Name</label>
+                      <label>Name *</label>
                       <input
                         type="text"
                         name="name"
@@ -117,7 +151,7 @@ const AddTerritoryManager = () => {
                       />
                     </div>
                     <div className="form-group">
-                      <label>Email</label>
+                      <label>Email *</label>
                       <input
                         type="email"
                         name="email"
@@ -129,7 +163,7 @@ const AddTerritoryManager = () => {
                     </div>
                     <div className="form-group d-flex">
                       <div className="mr-2" style={{ flex: 1 }}>
-                        <label>Country Code</label>
+                        <label>Country Code *</label>
                         <input
                           type="text"
                           name="countryCode"
@@ -141,7 +175,7 @@ const AddTerritoryManager = () => {
                         />
                       </div>
                       <div style={{ flex: 3 }}>
-                        <label>Mobile Number</label>
+                        <label>Mobile Number *</label>
                         <input
                           type="text"
                           name="mobileNumber"
@@ -166,11 +200,11 @@ const AddTerritoryManager = () => {
       {/* OTP Modal */}
       <Modal show={showModal} onHide={() => setShowModal(false)}>
         <Modal.Header closeButton>
-          <Modal.Title>Enter OTP</Modal.Title>
+          <Modal.Title>Verify OTP</Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <Form.Group>
+          <Form.Group controlId="otp">
-            <Form.Label>OTP</Form.Label>
+            <Form.Label>Enter OTP</Form.Label>
             <Form.Control
               type="text"
               placeholder="Enter OTP"
@@ -184,7 +218,7 @@ const AddTerritoryManager = () => {
         </Modal.Body>
         <Modal.Footer>
           <Button variant="secondary" onClick={() => setShowModal(false)}>
-            Cancel
+          Close
           </Button>
           <Button variant="primary" onClick={handleVerifyOTP}>
             Verify OTP

src/views/TerritoryManager/EditTerritoryManager.js

@@ -13,6 +13,7 @@ const EditTerritoryManager = () => {
   const { id } = useParams();
 
   const [formData, setFormData] = useState({
+    uniqueId: "",
     name: "",
     email: "",
     countryCode: "",
@@ -42,10 +43,11 @@ const EditTerritoryManager = () => {
       // Assuming country code always starts with + and is followed by 1-3 digits
       const fullMobileNumber = data?.mobileNumber || "";
       const countryCodeMatch = fullMobileNumber.match(/^\+\d{1,2}/);
-      const countryCode = countryCodeMatch ? countryCodeMatch[0] : "";
+      const countryCode = countryCodeMatch ? countryCodeMatch[0] : "+91";
       const mobileNumber = fullMobileNumber.replace(countryCode, "");
 
       setFormData({
+        uniqueId: data?.uniqueId || "",
         name: data?.name || "",
         email: data?.email || "",
         countryCode: countryCode,
@@ -69,6 +71,7 @@ const EditTerritoryManager = () => {
       .patch(
         `/api/territorymanager/profile/update/${id}`,
         {
+          uniqueId: formData.uniqueId,
           name: formData.name,
           email: formData.email,
         },
@@ -221,6 +224,17 @@ const EditTerritoryManager = () => {
             <div className="col-lg-12">
               <div className="card">
                 <div className="card-body">
+                  <div className="form-group">
+                    <label>Employee Code</label>
+                    <input
+                      type="text"
+                      name="Employee code"
+                      className="form-control"
+                      value={formData.uniqueId}
+                      onChange={handleChange}
+                      required
+                    />
+                  </div>
                   <div className="form-group">
                     <label>Name</label>
                     <input

src/views/orders/ViewOrders.js

@@ -340,8 +340,8 @@ const ViewOrders = () => {
                           <TableRow key={index}>
                             <TableCell>
                               <img
-                                src={item.productId.image}
+                                src={item?.image}
-                                alt={item.productId.name}
+                                // alt={item?.name}
                                 style={{
                                   width: 50,
                                   height: 50,
@@ -349,7 +349,7 @@ const ViewOrders = () => {
                                 }}
                               />
                               <Typography variant="subtitle1">
-                                {item.productId.name}
+                                {item?.name}
                               </Typography>
                             </TableCell>
                             <TableCell align="right">₹{item.price}</TableCell>

src/views/orders/partialOrderModal.js

@@ -74,12 +74,12 @@ const OrderDetailsDialog = ({ open, onClose, order, onSubmit }) => {
                       <TableRow key={index}>
                         <TableCell>
                           <img
-                            src={item.productId.image}
+                            src={item?.image}
-                            alt={item.productId.name}
+                            // alt={item?.name}
                             style={{ width: 50, height: 50, marginRight: 10 }}
                           />
                           <Typography variant="subtitle1">
-                            {item.productId.name}
+                            {item?.name}
                           </Typography>
                         </TableCell>
                         <TableCell align="right">₹{item.price}</TableCell>

src/views/orders/pendingOrderTable.js

@@ -43,8 +43,8 @@ const PendingOrderTable = ({ order }) => {
                       <TableRow key={index}>
                         <TableCell>
                           <img
-                            src={item.productId.image}
+                            src={item?.image}
-                            alt={item.productId.name}
+                            // alt={item?.name}
                             style={{
                               width: 50,
                               height: 50,
@@ -52,7 +52,7 @@ const PendingOrderTable = ({ order }) => {
                             }}
                           />
                           <Typography variant="subtitle1">
-                            {item.productId.name}
+                            {item?.name}
                           </Typography>
                         </TableCell>
                         <TableCell align="center">₹{item.price}</TableCell>