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 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>
</div> </div>
<div className="row "> <div className="row ">
{data?.taxId && ( {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> <i className="bx bx-sm bx-id-card me-1"></i>
<span className="fw-semibold">Tax Id:</span> <span className="fw-semibold">Tax Id:</span>
<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>

View File

@ -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">
@ -186,37 +158,31 @@ const SubScriptionHistory = ({ tenantId }) => {
</div> </div>
<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
<tr key={item.id}> ?.slice()
<td>{formatUTCToLocalTime(item.createdAt)}</td> .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)) // latest first
<td> .map((item) => (
{SUBSCRIPTION_PLAN_FREQUENCIES[item.frequency] || "N/A"} <tr key={item.id}>
</td> {SubscriptionColumns.map((col) => (
<td className="text-end pe-4 me-3"> <td key={col.key} className={col.align}>
<span className="px-3"> {col.getValue ? col.getValue(item) : item[col.key] || "N/A"}
{" "} </td>
{item.currency?.symbol} ))}
{item.price} </tr>
</span> ))}
</td> </tbody>
<td className="ps-4">{item.planName}</td> </table>
<td className="text-center">
<i className="bx bx-cloud-download"></i>
</td>
</tr>
))}
</tbody>
</table>
</div> </div>
</div> </div>
); );