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