Untitled

mail@pastecode.io avatar
unknown
plain_text
7 months ago
28 kB
1
Indexable
Never
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import PARAMS from "../Global/Url";
import { useMemo } from "react";
import Pagination from "./Pagination";
import Footer from "./footer";

export default function Bo() {
  const navigate = useNavigate();
  const [pricing, setPricing] = useState({
    confermation: 0,
    reservation: 0,
    sold: 0,
    followUp: 0,
    aftersail: 0,
    leadCost: 0,
  });
  const [active, setActive] = useState(false);
  const [active2, setActive2] = useState(false);
  const [bosData, setBosData] = useState([]);
  const token = localStorage.getItem("jwt-admin");
  const [searchEmail, setSearchEmail] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 6;
  const [dropdownVisible, setDropdownVisible] = useState(false);
  const [selectedBoId, setSelectedBoId] = useState(null);
  const [amountToAdd, setAmountToAdd] = useState(0);

  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  useEffect(() => {
    axios
      .get(`${PARAMS.API_URL}/admin/bo/list`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
        withCredentials: true,
      })
      .then((res) => {
        const normalizedBosData = res.data.bos.map((bo) => ({
          ...bo,
          status: bo.status.toLowerCase(),
        }));

        setBosData(normalizedBosData);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [token]);

  const handleChangeAccountStatus = async (id, status) => {
    try {
      const response = await axios.post(
        `${PARAMS.API_URL}/admin/status`,
        {
          id: id,
          status: status,
        },
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );

      const updatedBosData = bosData.map((bo) =>
        bo.id === id ? { ...bo, status: status } : bo
      );

      setBosData(updatedBosData);
    } catch (error) {
      console.error("Error updating status:", error);
    }
  };
  const handleStatusChange = async (id, newStatus) => {
    try {
      await handleChangeAccountStatus(id, newStatus);

      const normalizedStatus = newStatus.toLowerCase();

      const updatedBosData = bosData.map((bo) =>
        bo.id === id ? { ...bo, status: normalizedStatus } : bo
      );

      setBosData(updatedBosData);
    } catch (error) {
      console.error("Error updating status:", error);
    }
  };

  const handleUpdatePriceTag = async (e) => {
    e.preventDefault();

    const updateData = {
      id: selectedBoId,
      confermation: isNaN(Number(pricing.confermation))
        ? 0
        : Number(pricing.confermation),
      reservation: isNaN(Number(pricing.reservation))
        ? 0
        : Number(pricing.reservation),
      sold: isNaN(Number(pricing.sold)) ? 0 : Number(pricing.sold),
      followUp: isNaN(Number(pricing.followUp)) ? 0 : Number(pricing.followUp),
      aftersail: isNaN(Number(pricing.aftersail))
        ? 0
        : Number(pricing.aftersail),
      leadCost: isNaN(Number(pricing.leadCost)) ? 0 : Number(pricing.leadCost),
    };

    try {
      // UPDATE
      const response = await axios.post(
        `${PARAMS.API_URL}/admin/payment/edit`,
        updateData,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );

      setPricing(response.data);

      setActive(false);
    } catch (error) {
      console.error("Error updating pricing data:", error);
    }
  };

  const handlePriceTagClick = (boId) => {
    setSelectedBoId(boId);
    setActive(true);

    axios
      .get(`${PARAMS.API_URL}/admin/payment/${boId}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
      .then((res) => {
        setPricing(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const handleLeadInfo = (boId) => {
    setSelectedBoId(boId);
    axios
      .get(`${PARAMS.API_URL}/admin/payment/${boId}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
      .then((res) => {
        setPricing(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
    navigate(`/leads/${boId}`);
  };

  const filteredBos = useMemo(() => {
    return bosData.filter((bo) =>
      bo.email.toLowerCase().includes(searchEmail.toLowerCase())
    );
  }, [bosData, searchEmail]);

  const handleSearchInputChange = (e) => {
    const inputValue = e.target.value;
    setSearchEmail(inputValue);
  };

  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentBos = filteredBos.slice(indexOfFirstItem, indexOfLastItem);

  const handleNextPage = () => {
    const totalPages = Math.ceil(filteredBos.length / itemsPerPage);
    setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages));
  };
  const handleAddBalance = async () => {
    try {
      const response = await axios.post(
        `${PARAMS.API_URL}/admin/balance`,
        {
          id: selectedBoId,
          amount: amountToAdd,
        },
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );

      const updatedBosData = bosData.map((bo) =>
        bo.id === selectedBoId
          ? { ...bo, balance: bo.balance + amountToAdd }
          : bo
      );

      setBosData(updatedBosData);
      setAmountToAdd(0);
      setActive2(false);
    } catch (error) {
      console.error("Error adding balance:", error);
    }
  };
  const handleCloseModal = () => {
    setActive(false);
    setActive2(false);
  };
  const handleGenerateTokenClick = async (boId) => {
    window.open("http://user.heylead.io/authentification/admin", "_blank");
  };

  return (
    <div className="dashboard">
      {active && selectedBoId && (
        <div className="popup">
          <div className="model">
            <span>Pricing edit</span>
            <svg
              className="x-edit"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 30 30"
              width="30px"
              height="30px"
              onClick={handleCloseModal}
            >
              {" "}
              <path d="M 7 4 C 6.744125 4 6.4879687 4.0974687 6.2929688 4.2929688 L 4.2929688 6.2929688 C 3.9019687 6.6839688 3.9019687 7.3170313 4.2929688 7.7070312 L 11.585938 15 L 4.2929688 22.292969 C 3.9019687 22.683969 3.9019687 23.317031 4.2929688 23.707031 L 6.2929688 25.707031 C 6.6839688 26.098031 7.3170313 26.098031 7.7070312 25.707031 L 15 18.414062 L 22.292969 25.707031 C 22.682969 26.098031 23.317031 26.098031 23.707031 25.707031 L 25.707031 23.707031 C 26.098031 23.316031 26.098031 22.682969 25.707031 22.292969 L 18.414062 15 L 25.707031 7.7070312 C 26.098031 7.3170312 26.098031 6.6829688 25.707031 6.2929688 L 23.707031 4.2929688 C 23.316031 3.9019687 22.682969 3.9019687 22.292969 4.2929688 L 15 11.585938 L 7.7070312 4.2929688 C 7.5115312 4.0974687 7.255875 4 7 4 z" />
            </svg>
            <div className="inputs">
              <span>Confermation</span>
              <label>
                <input
                  type="number"
                  value={pricing?.confermation || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, confermation: e.target.value })
                  }
                />{" "}
                <i className="line"></i> $
              </label>
              <span>Reservation</span>
              <label>
                <input
                  type="number"
                  value={pricing?.reservation || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, reservation: e.target.value })
                  }
                />{" "}
                <i className="line"></i> $
              </label>
              <span>Solde</span>
              <label>
                <input
                  type="number"
                  value={pricing?.sold || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, sold: e.target.value })
                  }
                />{" "}
                <i className="line"></i> %
              </label>
              <div className="line"></div> <span>Followed up</span>
              <label>
                <input
                  type="number"
                  value={pricing?.followUp || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, followUp: e.target.value })
                  }
                />{" "}
                <i className="line"></i> $
              </label>
              <div className="line"></div> <span>After sell done</span>
              <label>
                <input
                  type="number"
                  value={pricing?.aftersail || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, aftersail: e.target.value })
                  }
                />{" "}
                <i className="line"></i> $
              </label>
              <div className="line"></div> <span>Lead Cost</span>
              <label>
                <input
                  type="number"
                  value={pricing?.leadCost || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, leadCost: e.target.value })
                  }
                />{" "}
                <i className="line"></i> $
              </label>
            </div>
            <button
              type="submit"
              onClick={(e) => {
                handleUpdatePriceTag(e);
                navigate("/bo");
              }}
            >
              Update
            </button>
          </div>
        </div>
      )}
      {active2 && selectedBoId && (
        <div className="popup">
          <div className="model">
            <span>Add balance</span>
            <svg
              className="x-edit"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 30 30"
              width="30px"
              height="30px"
              onClick={handleCloseModal}
            >
              {" "}
              <path d="M 7 4 C 6.744125 4 6.4879687 4.0974687 6.2929688 4.2929688 L 4.2929688 6.2929688 C 3.9019687 6.6839688 3.9019687 7.3170313 4.2929688 7.7070312 L 11.585938 15 L 4.2929688 22.292969 C 3.9019687 22.683969 3.9019687 23.317031 4.2929688 23.707031 L 6.2929688 25.707031 C 6.6839688 26.098031 7.3170313 26.098031 7.7070312 25.707031 L 15 18.414062 L 22.292969 25.707031 C 22.682969 26.098031 23.317031 26.098031 23.707031 25.707031 L 25.707031 23.707031 C 26.098031 23.316031 26.098031 22.682969 25.707031 22.292969 L 18.414062 15 L 25.707031 7.7070312 C 26.098031 7.3170312 26.098031 6.6829688 25.707031 6.2929688 L 23.707031 4.2929688 C 23.316031 3.9019687 22.682969 3.9019687 22.292969 4.2929688 L 15 11.585938 L 7.7070312 4.2929688 C 7.5115312 4.0974687 7.255875 4 7 4 z" />
            </svg>
            <div>
              <div className="amount">Amount</div>
              <label>
                <input
                  type="number"
                  value={amountToAdd}
                  onChange={(e) => setAmountToAdd(Number(e.target.value))}
                />{" "}
                <i className="line"></i> $
              </label>
            </div>
            <button onClick={handleAddBalance}>Add</button>
          </div>
        </div>
      )}
      <div className="top">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="22.762"
          height="24.895"
          viewBox="0 0 22.762 24.895"
        >
          <g
            id="Group_875"
            data-name="Group 875"
            transform="translate(-1842 -60.3)"
          >
            <g
              id="Group_15"
              data-name="Group 15"
              transform="translate(1696.36 -1550.331)"
            >
              <path
                id="Path_23"
                data-name="Path 23"
                d="M156.857,1613.181c0-.261-.009-.5,0-.736a1.167,1.167,0,0,1,2.332,0c.009.237,0,.474,0,.73.236.06.459.1.674.173a6.591,6.591,0,0,1,4.768,5.476c.242,1.363.451,2.733.683,4.1a3.688,3.688,0,0,0,1.23,2.156,3.2,3.2,0,0,1,.8,3.747,3.009,3.009,0,0,1-2.856,1.9c-4.334.026-8.668.016-13,.006a3.162,3.162,0,0,1-2.874-2.01,3.126,3.126,0,0,1,.755-3.467,3.864,3.864,0,0,0,1.318-2.258c.166-1.032.322-2.067.515-3.093a14.444,14.444,0,0,1,.579-2.539,6.491,6.491,0,0,1,4.912-4.145Z"
                transform="translate(0 0)"
                fill="none"
                stroke="#263238"
                stroke-width="1.4"
              />
              <path
                id="Path_24"
                data-name="Path 24"
                d="M159.285,1624.439a3.535,3.535,0,0,1-6.96,0Z"
                transform="translate(2.249 7.476)"
                fill="none"
                stroke="#263238"
                stroke-width="1.4"
              />
            </g>
            <circle
              id="Ellipse_1"
              data-name="Ellipse 1"
              cx="6"
              cy="6"
              r="6"
              transform="translate(1842 61)"
              fill="#00c198"
            />
          </g>
        </svg>
        <span>ADMIN</span>
        <img
          src="https://images.unsplash.com/photo-1700076823924-a87fca414724?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt=""
        />
      </div>
      <div className="title">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="15"
          height="13"
          viewBox="0 0 12.754 11.054"
        >
          <g
            id="Group_983"
            data-name="Group 983"
            transform="translate(3945.042 -3640.153)"
          >
            <path
              id="Path_972"
              data-name="Path 972"
              d="M-3942.5,3641.854a6.306,6.306,0,0,1,.036-.641,1.252,1.252,0,0,1,1.244-1.058c1.032-.005,2.063,0,3.095,0h1.952a1.275,1.275,0,0,1,1.335,1.335c0,.115,0,.229,0,.365h.145c.368,0,.735,0,1.1,0a1.272,1.272,0,0,1,1.3,1.3q0,3.374,0,6.747a1.269,1.269,0,0,1-1.3,1.3q-5.073,0-10.147,0a1.27,1.27,0,0,1-1.3-1.3q0-3.374,0-6.747a1.272,1.272,0,0,1,1.3-1.3C-3943.327,3641.853-3942.916,3641.854-3942.5,3641.854Zm9.363,3.166c-.064.027-.109.044-.153.064l-3.635,1.583c-.149.065-.361.089-.434.2s-.025.324-.028.492a.42.42,0,0,1-.439.446q-.837,0-1.674,0a.42.42,0,0,1-.437-.447c0-.137,0-.275,0-.411a.113.113,0,0,0-.084-.126q-1.983-.858-3.966-1.72c-.062-.027-.127-.052-.2-.082v.151q0,2.338,0,4.676c0,.353.156.509.511.509h10.029c.355,0,.512-.156.512-.508v-4.828Zm-6.8.946c0-.236,0-.444,0-.652a.431.431,0,0,1,.48-.485h1.567a.44.44,0,0,1,.5.5c0,.205,0,.41,0,.628.04-.014.062-.02.081-.028q2.042-.9,4.085-1.807a.126.126,0,0,0,.086-.14c0-.27,0-.54,0-.81a.428.428,0,0,0-.468-.471h-10.118a.426.426,0,0,0-.466.46c0,.266,0,.531,0,.8a.16.16,0,0,0,.115.176q1.693.743,3.383,1.494Zm4.251-4.117v-.344a.44.44,0,0,0-.505-.5h-3.666c-.447,0-.894,0-1.341,0a.411.411,0,0,0-.431.354,4.556,4.556,0,0,0,0,.491Zm-3.395,5.1h.835v-1.26h-.835Z"
              transform="translate(0 0)"
              fill="#000"
            />
          </g>
        </svg>
        Business Owners
      </div>
      <div className="search">
        <div>
          <input
            type="text"
            placeholder="Search by email"
            value={searchEmail}
            onChange={handleSearchInputChange}
          />
          <button>
            <i className="fa-solid fa-magnifying-glass"></i>
          </button>
        </div>
      </div>
      <div className="table">
        <div className="head">
          <span>Name</span>
          <span>Email</span>
          <span>Phone</span>
          <span>Registration Date</span>
          <span>Balance</span>
          <span>Status</span>
          <span>Lead Info</span>
          <span>Action</span>
          <div className="break"></div>
          {currentBos.map((bo) => (
            <React.Fragment key={bo.id}>
              <span>
                <img className="pfp" src={bo.image} alt="" />
                {bo.name}
              </span>
              <span>{bo.email}</span>
              <span>{bo.phone}</span>
              <span>{new Date(bo.registrationDate).toLocaleString()}</span>
              <span>{bo.balance}</span>
              <span className={bo.status === "active" ? "active" : "inactive"}>
                <button>{bo.status}</button>
              </span>
              <span className="actions">
                <svg
                  onClick={() => handleLeadInfo(bo.id)}
                  xmlns="http://www.w3.org/2000/svg"
                  width="10.519"
                  height="10.523"
                  viewBox="0 0 10.519 10.523"
                >
                  <g
                    id="Group_918"
                    data-name="Group 918"
                    transform="translate(996.562 -462.182)"
                  >
                    <path
                      id="Path_970"
                      data-name="Path 970"
                      d="M-955.367,467.449c0,1.044,0,2.088,0,3.132a2.082,2.082,0,0,1-1.662,2.075,2.26,2.26,0,0,1-.477.046q-2.6,0-5.191,0a2.079,2.079,0,0,1-2.1-1.759,5.151,5.151,0,0,1-.034-.762c0-.2,0-.4,0-.6a.529.529,0,0,1,.535-.555.528.528,0,0,1,.518.558c0,.325,0,.649,0,.974a1.054,1.054,0,0,0,1.1,1.1c1,0,2,0,3,0,.723,0,1.447,0,2.17,0a1.048,1.048,0,0,0,1.065-.815,1.427,1.427,0,0,0,.031-.318q0-3.077,0-6.153a1.061,1.061,0,0,0-1.131-1.136h-5.105a1.059,1.059,0,0,0-1.132,1.134c0,.312,0,.625,0,.937a.528.528,0,0,1-.527.562.526.526,0,0,1-.525-.552c0-.419-.011-.84.019-1.257a2.078,2.078,0,0,1,1.943-1.865c.5-.018,1-.007,1.5-.007,1.291,0,2.581,0,3.872,0a2.082,2.082,0,0,1,2.084,1.666,2.484,2.484,0,0,1,.045.514C-955.365,465.394-955.367,466.421-955.367,467.449Z"
                      transform="translate(-30.676)"
                      fill="#00c198"
                    />
                    <path
                      id="Path_971"
                      data-name="Path 971"
                      d="M-991.528,559.6c-.046-.05-.071-.08-.1-.107-.188-.189-.38-.376-.566-.567a.524.524,0,0,1-.008-.752.521.521,0,0,1,.742,0q.794.784,1.578,1.578a.51.51,0,0,1,0,.741q-.785.794-1.578,1.578a.521.521,0,0,1-.742,0,.522.522,0,0,1,0-.743c.189-.2.383-.384.575-.576.027-.028.053-.057.1-.107h-4.424a.9.9,0,0,1-.232-.021.517.517,0,0,1-.374-.577.516.516,0,0,1,.5-.448c.131-.005.263,0,.394,0h4.14Z"
                      transform="translate(0 -92.678)"
                      fill="#00c198"
                    />
                  </g>
                </svg>
              </span>
              <span>
                <div className="actions">
                  <svg
                    onClick={() => handlePriceTagClick(bo.id)}
                    xmlns="http://www.w3.org/2000/svg"
                    width="11.745"
                    height="11.744"
                    viewBox="0 0 11.745 11.744"
                  >
                    <g
                      id="Group_917"
                      data-name="Group 917"
                      transform="translate(-1654.41 -1199.511)"
                    >
                      <path
                        id="Path_967"
                        data-name="Path 967"
                        d="M1658.787,1199.575c.436-.021.871-.05,1.308-.063a3.23,3.23,0,0,1,2.471.98q1.308,1.3,2.612,2.613a3.243,3.243,0,0,1,0,4.645q-1.259,1.266-2.525,2.524a3.243,3.243,0,0,1-4.645,0q-1.311-1.3-2.612-2.612a3.276,3.276,0,0,1-.976-2.6c.048-.917.094-1.835.131-2.753a2.725,2.725,0,0,1,1.82-2.513,3.052,3.052,0,0,1,.877-.155c.514-.022,1.028-.047,1.542-.071Zm-.01.883h0c-.307.014-.615.022-.922.044a5.391,5.391,0,0,0-1.068.095,1.838,1.838,0,0,0-1.356,1.755c-.042.936-.089,1.872-.134,2.808a2.347,2.347,0,0,0,.684,1.839c.889.9,1.779,1.795,2.682,2.68a2.341,2.341,0,0,0,3.321,0q1.315-1.287,2.6-2.6a2.343,2.343,0,0,0-.01-3.322c-.883-.9-1.777-1.784-2.67-2.672a2.308,2.308,0,0,0-1.754-.692C1659.695,1200.407,1659.236,1200.437,1658.777,1200.458Z"
                        fill="#00c198"
                      />
                      <path
                        id="Path_968"
                        data-name="Path 968"
                        d="M1683.95,1227.113a1.912,1.912,0,1,1-1.906-1.9A1.914,1.914,0,0,1,1683.95,1227.113Zm-1.917,1.042a1.03,1.03,0,1,0-1.025-1.028A1.033,1.033,0,0,0,1682.032,1228.154Z"
                        transform="translate(-23.227 -23.214)"
                        fill="#00c198"
                      />
                      <path
                        id="Path_969"
                        data-name="Path 969"
                        d="M1719.964,1262.21a.476.476,0,0,1-.133.38q-1.16,1.159-2.32,2.318a.439.439,0,1,1-.622-.62q1.162-1.167,2.329-2.329a.416.416,0,0,1,.483-.09A.393.393,0,0,1,1719.964,1262.21Z"
                        transform="translate(-56.316 -56.29)"
                        fill="#00c198"
                      />
                    </g>
                  </svg>

                  <svg
                    onClick={() => {
                      setAmountToAdd(0);
                      setSelectedBoId(bo.id);
                      setActive2(true);
                    }}
                    xmlns="http://www.w3.org/2000/svg"
                    width="11.183"
                    height="9.823"
                    viewBox="0 0 11.183 9.823"
                  >
                    <g
                      id="Group_984"
                      data-name="Group 984"
                      transform="translate(3608.427 610.207)"
                    >
                      <path
                        id="Path_973"
                        data-name="Path 973"
                        d="M-3597.394-604.785a.664.664,0,0,1-.05.081.212.212,0,0,1-.236.079.21.21,0,0,1-.162-.189,1.23,1.23,0,0,1,0-.127q0-1.966,0-3.932a.682.682,0,0,0-.5-.7.909.909,0,0,0-.231-.027q-4.255,0-8.512,0a.687.687,0,0,0-.735.729c0,.326,0,.652,0,.978,0,.031,0,.063,0,.111h.127c.928,0,1.856,0,2.784,0a1.077,1.077,0,0,1,1.139.945,9.64,9.64,0,0,1,0,1.729,1.082,1.082,0,0,1-1.147.949c-.921,0-1.842,0-2.763,0h-.14c0,.043-.006.081-.006.118q0,.478,0,.956a.69.69,0,0,0,.742.743h4.814c.042,0,.085,0,.127,0a.225.225,0,0,1,.213.223.228.228,0,0,1-.2.224.83.83,0,0,1-.106,0h-4.835a1.138,1.138,0,0,1-1.206-1.2q0-2.88,0-5.759a1.136,1.136,0,0,1,1.2-1.2h8.491a1.129,1.129,0,0,1,1.176.952c0,.009.011.017.017.026Zm-10.418.165c.037,0,.068,0,.1,0h2.8a.68.68,0,0,0,.712-.716q0-.643,0-1.285a.68.68,0,0,0-.72-.719h-2.9Z"
                        transform="translate(0)"
                        fill="#00c198"
                        stroke="#00c198"
                        stroke-width="0.3"
                      />
                      <path
                        id="Path_974"
                        data-name="Path 974"
                        d="M-3398.971-460.978a.531.531,0,0,1-.359-.579c.01-.669,0-1.338,0-2.007v-.135h-.529c-.191,0-.382,0-.574,0a.23.23,0,0,1-.238-.142.23.23,0,0,1,.07-.268l2.216-2.215a.233.233,0,0,1,.384,0q.771.769,1.54,1.539c.2.2.4.4.6.6.056.057.106.121.159.182v.128a.28.28,0,0,1-.3.172c-.315-.006-.63,0-.945,0h-.118v.13c0,.676-.007,1.352,0,2.028a.515.515,0,0,1-.364.562Zm2.468-3.172-1.683-1.683-1.684,1.683h.7c.231,0,.3.072.3.306q0,1.142,0,2.283c0,.041,0,.082.005.123h1.355v-2.416c0-.229.068-.3.3-.3Z"
                        transform="translate(-201.697 -139.556)"
                        fill="#00c198"
                        stroke="#00c198"
                        stroke-width="0.3"
                      />
                      <path
                        id="Path_975"
                        data-name="Path 975"
                        d="M-3558.546-497.394a.908.908,0,0,1-.906.9.912.912,0,0,1-.9-.918.912.912,0,0,1,.913-.9A.907.907,0,0,1-3558.546-497.394Zm-.9.447a.452.452,0,0,0,.452-.453.452.452,0,0,0-.455-.45.453.453,0,0,0-.453.453A.453.453,0,0,0-3559.449-496.947Z"
                        transform="translate(-46.559 -108.577)"
                        fill="#00c198"
                        stroke="#00c198"
                        stroke-width="0.3"
                      />
                    </g>
                  </svg>
                  <svg
                    onClick={() => handleGenerateTokenClick(bo.id)}
                    xmlns="http://www.w3.org/2000/svg"
                    width="14"
                    height="12.134"
                    viewBox="0 0 14 12.134"
                  >
                    <g
                      id="Group_983"
                      data-name="Group 983"
                      transform="translate(3945.042 -3640.153)"
                    >
                      <path
                        id="Path_972"
                        data-name="Path 972"
                        d="M-3942.253,3642.02a6.942,6.942,0,0,1,.04-.7,1.375,1.375,0,0,1,1.366-1.161c1.132-.006,2.265,0,3.4,0q1.071,0,2.143,0a1.4,1.4,0,0,1,1.466,1.466c0,.126,0,.252,0,.4h.159c.4,0,.807,0,1.21,0a1.4,1.4,0,0,1,1.429,1.429q0,3.7,0,7.406a1.393,1.393,0,0,1-1.429,1.43q-5.569,0-11.138,0a1.394,1.394,0,0,1-1.43-1.429q0-3.7,0-7.406a1.4,1.4,0,0,1,1.43-1.429C-3943.16,3642.018-3942.708,3642.02-3942.253,3642.02Zm10.278,3.475c-.071.03-.12.049-.168.07l-3.99,1.738c-.164.072-.4.1-.477.222s-.027.356-.031.54a.46.46,0,0,1-.481.489q-.919,0-1.837,0a.461.461,0,0,1-.48-.491c0-.151,0-.3,0-.452a.125.125,0,0,0-.093-.138q-2.177-.942-4.353-1.888c-.069-.03-.14-.057-.222-.09v.166q0,2.566,0,5.132c0,.387.172.558.562.558h11.008c.39,0,.563-.171.563-.557v-5.3Zm-7.466,1.039c0-.259,0-.487,0-.715a.474.474,0,0,1,.528-.532h1.72a.482.482,0,0,1,.552.553c0,.225,0,.45,0,.689.044-.015.068-.022.089-.031q2.241-.993,4.484-1.984a.139.139,0,0,0,.094-.154c0-.3,0-.593,0-.889a.469.469,0,0,0-.514-.517H-3943.6a.468.468,0,0,0-.512.505c0,.292,0,.583,0,.875a.176.176,0,0,0,.126.193q1.857.816,3.713,1.64Zm4.667-4.519v-.377a.484.484,0,0,0-.555-.55h-4.023c-.49,0-.981,0-1.472,0a.452.452,0,0,0-.473.388,5.065,5.065,0,0,0,0,.539Zm-3.726,5.6h.917v-1.383h-.917Z"
                        transform="translate(0 0)"
                        fill="#00c198"
                      />
                    </g>
                  </svg>
                </div>
                <i className="fa-solid fa-ellipsis-vertical">
                  <div>
                    <span
                      className={
                        bo.status.toLowerCase() === "active"
                          ? "active"
                          : "inactive"
                      }
                      onClick={() => handleStatusChange(bo.id, "Active")}
                    >
                      Active
                    </span>
                    <span
                      className={
                        bo.status.toLowerCase() === "inactive"
                          ? "active"
                          : "inactive"
                      }
                      onClick={() => handleStatusChange(bo.id, "Inactive")}
                    >
                      Inactive
                    </span>
                  </div>
                </i>
              </span>
            </React.Fragment>
          ))}
        </div>
      </div>
      <div className="nav">
        <Pagination
          itemsPerPage={itemsPerPage}
          totalItems={filteredBos.length}
          currentPage={currentPage}
          handlePageChange={handlePageChange}
        />
        <span className="next" onClick={handleNextPage}>
          {">"}
        </span>
      </div>
      <Footer />
    </div>
  );
}
Leave a Comment