sorting plans history using date

This commit is contained in:
pramod mahajan 2025-08-19 11:50:05 +05:30
parent 56e4c86c7f
commit b645aec55f
2 changed files with 77 additions and 106 deletions

View File

@ -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>

View File

@ -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>
);