sorting plans history using date

src/components/Tenant/EditProfile.jsx

@@ -73,7 +73,7 @@ const EditProfile = ({ TenantId,onClose }) => {
 
       <div className="col-sm-6 mt-1">
         <Label htmlFor="firstName" required>First Name</Label>
-        <input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} />
+        <input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
         {errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
       </div>
 

src/components/Tenant/Profile.jsx

@@ -4,6 +4,7 @@ import EditProfile from "./EditProfile";
 import GlobalModel from "../common/GlobalModel";
 import { useTenantContext } from "../../pages/Tenant/TenantPage";
 import { useTenantDetailsContext } from "../../pages/Tenant/TenantDetails";
+import IconButton from "../common/IconButton";
 
 const Profile = ({ data }) => {
   const {setEditTenant} = useTenantDetailsContext()
@@ -15,12 +16,16 @@ const Profile = ({ data }) => {
           <div className="col-12 my-2">
             <div className="d-flex flex-wrap align-items-start position-relative ">
               <div className=" d-flex align-items-start gap-2">
-                <img
+                {data.logoImage ? (<img
                   src={data.logoImage}
                   alt="Preview"
                   className="img-thumbnail rounded"
                   style={{ maxHeight: "35px" }}
-                />
+                />):(   <IconButton
+              iconClass="bx bx-sm bx-building"
+              color="warning"
+              size={8}
+            />)}
               </div>
               <div className="ms-2 ">
                 <h4 className="m-0">{data.name}</h4>
@@ -67,18 +72,20 @@ const Profile = ({ data }) => {
               <span className="ms-2">{data.contactNumber}</span>
             </div>
 
-            <div className="col-12  d-flex text-wrap align-items-start my-2 m-0">
+            {data.billingAddress && (
-              <i className="bx bx-sm bx-mark me-1"></i>
+              <div className="col-12  d-flex text-wrap align-items-start mt-4 m-0">
+              <i className='bx bxs-flag-alt bx-sm me-1'></i>
               <span className="fw-semibold">Address:</span>
               <span className="ms-2">{data.billingAddress}</span>
             </div>
+            )}
           </div>
         <div className="divider text-start ">
           <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"></i>
+          <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>
@@ -90,13 +97,18 @@ const Profile = ({ data }) => {
               <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"></i>
+            <i className="bx bx-sm bxs-calendar me-1"></i>
             <span className="fw-semibold">On-Boarding Date:</span>
             <span className="ms-2">
               {formatUTCToLocalTime(data?.onBoardingDate)}

src/components/Tenant/SubScriptionHistory.jsx

@@ -64,78 +64,50 @@ const SubScriptionHistory = ({ tenantId }) => {
     if (percentage < 80) return "warning";
     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 (
     <div className=" p-2">
@@ -188,35 +160,29 @@ const SubScriptionHistory = ({ tenantId }) => {
         <table className="table border-top dataTable text-nowrap align-middle">
   <thead className="align-middle">
     <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>
   </thead>
   <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}>
-                <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>
+          ))}
         </tr>
       ))}
   </tbody>
 </table>
+
       </div>
     </div>
   );

src/pages/Tenant/TenantDetails.jsx

@@ -77,7 +77,7 @@ const TenantDetails = () => {
             <li key={tab.id} className="nav-item">
               <button
                 type="button"
-                className={`nav-link d-flex align-items-center gap-2 ${
+                className={`nav-link d-flex align-items-center text-tiny gap-2 ${
                   index === 0 ? "active" : ""
                 }`}
                 role="tab"

src/utils/constants.jsx

@@ -64,7 +64,9 @@ export const EXPENSE_REJECTEDBY = ["d1ee5eec-24b6-4364-8673-a8f859c60729","965ed
 
 export const EXPENSE_DRAFT = "297e0d8f-f668-41b5-bfea-e03b354251c8"
 
-
+export const SUPPER_Tenant = "d032cb1a-3f30-462c-bef0-7ace73a71c0b"
+export const MANAGE_TENANTS = "00e20637-ce8d-4417-bec4-9b31b5e65092"
+export const VIEW_TENANTS = "647145c6-2108-4c98-aab4-178602236e55"
 export const ActiveTenant = "297e0d8f-f668-41b5-bfea-e03b354251c8"
 // -------------------Application Role------------------------------