Untitled
unknown
plain_text
2 years ago
29 kB
10
Indexable
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 token = localStorage.getItem("jwt-admin");
const [bosData, setBosData] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(6); // Adjust as needed
const [searchEmail, setSearchEmail] = useState("");
const [selectedBoId, setSelectedBoId] = useState(null);
const [amountToAdd, setAmountToAdd] = useState(0);
console.log(
"Initial States - Items Per Page:",
itemsPerPage,
"Current Page:",
currentPage
);
const handlePageChange = (pageNumber) => {
setCurrentPage(pageNumber);
};
useEffect(() => {
axios
.get(`${PARAMS.API_URL}/admin/bo/list`, {
headers: { Authorization: `Bearer ${token}` },
withCredentials: true,
})
.then((res) => {
setBosData(res.data.bos);
})
.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]);
console.log("Total Items after Filtering:", filteredBos.length);
const handleSearchInputChange = (e) => {
const inputValue = e.target.value;
setSearchEmail(inputValue);
};
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentBos = bosData.slice(indexOfFirstItem, indexOfLastItem);
console.log("Items on Current Page:", currentBos);
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");
};
console.log(
"Rendering Pagination - Current Page:",
currentPage,
"Total Items:",
filteredBos.length
);
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={bosData.length}
currentPage={currentPage}
handlePageChange={handlePageChange}
/>
<span className="next" onClick={handleNextPage}>
{">"}
</span>
</div>
<Footer />
</div>
);
}
// Pagination :
const Pagination = ({
itemsPerPage,
totalItems,
currentPage,
handlePageChange,
}) => {
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(totalItems / itemsPerPage); i++) {
pageNumbers.push(i);
}
return (
<div className="nav">
{pageNumbers.map((number) => (
<span
key={number}
className="pagination-link btn-pagination"
onClick={() => handlePageChange(number)}
>
{number}
</span>
))}
</div>
);
};
export default Pagination;
Editor is loading...
Leave a Comment