added table for history plans

src/components/Tenanat/SubScriptionHistory.jsx

@@ -3,6 +3,8 @@ import { useTenantDetails } from "../../hooks/useTenant";
 import { useDispatch } from "react-redux";
 import { setCurrentTenant } from "../../slices/globalVariablesSlice";
 import { useNavigate } from "react-router-dom";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { SUBSCRIPTION_PLAN_FREQUENCIES } from "../../utils/constants";
 
 const SubScriptionHistory = ({ tenantId }) => {
   const { data, isLoading, isError, error } = useTenantDetails(tenantId);
@@ -48,7 +50,10 @@ const SubScriptionHistory = ({ tenantId }) => {
   const end = new Date(plan.endDate);
 
   const totalDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
-  const daysLeft = Math.max(0, Math.ceil((end - today) / (1000 * 60 * 60 * 24)));
+  const daysLeft = Math.max(
+    0,
+    Math.ceil((end - today) / (1000 * 60 * 60 * 24))
+  );
   const percentage = Math.min(
     100,
     Math.round(((totalDays - daysLeft) / totalDays) * 100)
@@ -59,10 +64,81 @@ 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",
+    },
+  ];
 
   return (
     <div className="container-fluid p-2">
-    
       <div className="text-start mb-3">
         <p className="fw-bold">Active Subscription</p>
 
@@ -101,7 +177,35 @@ const SubScriptionHistory = ({ tenantId }) => {
           </div>
         </div>
         <div className="text-start">
-          {/* Table */}
+     <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>
+
+
         </div>
       </div>
     </div>