sorting plans history using date
This commit is contained in:
parent
56e4c86c7f
commit
b645aec55f
@ -84,24 +84,29 @@ const Profile = ({ data }) => {
|
||||
<div className="divider-text">Organization</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 d-flex align-items-center">
|
||||
<div className="col-12 d-flex align-items-center mb-2">
|
||||
<i className="bx bx-sm bxs-building me-1"></i>
|
||||
<span className="fw-semibold">Industry:</span>
|
||||
<span className="ms-2">{data?.industry?.name}</span>
|
||||
</div>
|
||||
<div className="row ">
|
||||
{data?.taxId && (
|
||||
<div className="col-12 col-md-6 d-flex align-items-center">
|
||||
<div className="col-12 col-md-6 d-flex align-items-center ">
|
||||
<i className="bx bx-sm bx-id-card me-1"></i>
|
||||
<span className="fw-semibold">Tax Id:</span>
|
||||
<span className="ms-2">{data?.taxId}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
|
||||
<div className="col-12 col-md-6 d-flex align-items-center mb-2 m-0">
|
||||
<i className="bx bx-sm bx-group me-1"></i>
|
||||
<span className="fw-semibold">Organization Size:</span>
|
||||
<span className="ms-2">{data?.organizationSize}</span>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 d-flex align-items-center my-2 m-0">
|
||||
<i className="bx bx-sm bx-group me-1"></i>
|
||||
<span className="fw-semibold">Seat Available:</span>
|
||||
<span className="ms-2">{data?.seatsAvailable}</span>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 d-flex align-items-center">
|
||||
<i className="bx bx-sm bxs-calendar me-1"></i>
|
||||
<span className="fw-semibold">On-Boarding Date:</span>
|
||||
|
@ -64,78 +64,50 @@ const SubScriptionHistory = ({ tenantId }) => {
|
||||
if (percentage < 80) return "warning";
|
||||
return "danger";
|
||||
};
|
||||
// const SubscriptionColumns = [
|
||||
// {
|
||||
// key: "createdAt",
|
||||
// label: "Date",
|
||||
// getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
||||
// align: "text-start",
|
||||
// },
|
||||
// {
|
||||
// key: "frequency",
|
||||
// label: "Type",
|
||||
// getValue: (e) => {
|
||||
// switch (e.frequency) {
|
||||
// case 1:
|
||||
// return "Monthly";
|
||||
// case 3:
|
||||
// return "Quarterly";
|
||||
// case 12:
|
||||
// return "Yearly";
|
||||
// default:
|
||||
// return "N/A";
|
||||
// }
|
||||
// },
|
||||
// align: "text-start",
|
||||
// },
|
||||
// {
|
||||
// key: "price",
|
||||
// label: "Amount",
|
||||
// getValue: (e) => (
|
||||
// <>
|
||||
// {e.currency?.symbol || "₹"} {e.price}
|
||||
// </>
|
||||
// ),
|
||||
// align: "text-end",
|
||||
// },
|
||||
// {
|
||||
// key: "submittedBy",
|
||||
// label: "Submitted By",
|
||||
// getValue: (e) =>
|
||||
// `${e.createdBy?.firstName ?? ""} ${
|
||||
// e.createdBy?.lastName ?? ""
|
||||
// }`.trim() || "N/A",
|
||||
// customRender: (e) => (
|
||||
// <div className="d-flex align-items-center">
|
||||
// <Avatar
|
||||
// size="xs"
|
||||
// classAvatar="m-0 me-2"
|
||||
// firstName={e.createdBy?.firstName}
|
||||
// lastName={e.createdBy?.lastName}
|
||||
// />
|
||||
// <span className="text-truncate">
|
||||
// {`${e.createdBy?.firstName ?? ""} ${
|
||||
// e.createdBy?.lastName ?? ""
|
||||
// }`.trim() || "N/A"}
|
||||
// </span>
|
||||
// </div>
|
||||
// ),
|
||||
// align: "text-start",
|
||||
// },
|
||||
// {
|
||||
// key: "action",
|
||||
// label: "Action",
|
||||
// customRender: (e) => (
|
||||
// <button
|
||||
// className="btn btn-sm btn-outline-primary"
|
||||
// onClick={() => console.log("Action clicked for", e.id)}
|
||||
// >
|
||||
// View
|
||||
// </button>
|
||||
// ),
|
||||
// align: "text-center",
|
||||
// },
|
||||
// ];
|
||||
const SubscriptionColumns = [
|
||||
{
|
||||
key: "createdAt",
|
||||
label: "Date",
|
||||
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "frequency",
|
||||
label: "Type",
|
||||
getValue: (e) =>
|
||||
SUBSCRIPTION_PLAN_FREQUENCIES[e.frequency] || "N/A",
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "price",
|
||||
label: "Amount",
|
||||
getValue: (e) => (
|
||||
<>
|
||||
{e.currency?.symbol || "₹"} {e.price}
|
||||
</>
|
||||
),
|
||||
align: "text-end pe-4",
|
||||
},
|
||||
{
|
||||
key: "planName",
|
||||
label: "Plan Name",
|
||||
getValue: (e) => e.planName,
|
||||
align: "text-start ps-4",
|
||||
},
|
||||
{
|
||||
key: "action",
|
||||
label: "Action",
|
||||
getValue: (e) => (
|
||||
<i
|
||||
className="bx bx-cloud-download"
|
||||
onClick={() => console.log("Download clicked for", e.id)}
|
||||
role="button"
|
||||
/>
|
||||
),
|
||||
align: "text-center",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<div className=" p-2">
|
||||
@ -186,37 +158,31 @@ const SubScriptionHistory = ({ tenantId }) => {
|
||||
</div>
|
||||
|
||||
<table className="table border-top dataTable text-nowrap align-middle">
|
||||
<thead className="align-middle">
|
||||
<tr>
|
||||
<th className="text-start">Date</th>
|
||||
<th className="text-start">Type</th>
|
||||
<th className="text-center">Amount</th>
|
||||
<th className="text-start">Plan Name</th>
|
||||
<th className="text-center">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="align-middle">
|
||||
{data?.subscriptionHistery?.map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td>{formatUTCToLocalTime(item.createdAt)}</td>
|
||||
<td>
|
||||
{SUBSCRIPTION_PLAN_FREQUENCIES[item.frequency] || "N/A"}
|
||||
</td>
|
||||
<td className="text-end pe-4 me-3">
|
||||
<span className="px-3">
|
||||
{" "}
|
||||
{item.currency?.symbol}
|
||||
{item.price}
|
||||
</span>
|
||||
</td>
|
||||
<td className="ps-4">{item.planName}</td>
|
||||
<td className="text-center">
|
||||
<i className="bx bx-cloud-download"></i>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<thead className="align-middle">
|
||||
<tr>
|
||||
{SubscriptionColumns.map((col) => (
|
||||
<th key={col.key} className={col.align}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="align-middle">
|
||||
{data?.subscriptionHistery
|
||||
?.slice()
|
||||
.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)) // latest first
|
||||
.map((item) => (
|
||||
<tr key={item.id}>
|
||||
{SubscriptionColumns.map((col) => (
|
||||
<td key={col.key} className={col.align}>
|
||||
{col.getValue ? col.getValue(item) : item[col.key] || "N/A"}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
Loading…
x
Reference in New Issue
Block a user