From ed1e0cd428ab130dd872d0a18684506f8ef40600 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Mon, 25 Aug 2025 12:46:48 +0530
Subject: [PATCH] updated bill ans plan page

---
 src/components/Tenant/SubScriptionHistory.jsx | 282 +++++++++---------
 1 file changed, 148 insertions(+), 134 deletions(-)

diff --git a/src/components/Tenant/SubScriptionHistory.jsx b/src/components/Tenant/SubScriptionHistory.jsx
index 633de1be..a587a84e 100644
--- a/src/components/Tenant/SubScriptionHistory.jsx
+++ b/src/components/Tenant/SubScriptionHistory.jsx
@@ -27,14 +27,16 @@ const SubScriptionHistory = ({ tenantId }) => {
   if (isError) return <div>{error}</div>;
 
   const plan = data?.currentPlan;
+  const features = data?.currentPlanFeatures;
+  const subscriptionHistory = data?.subscriptionHistery;
 
   if (!plan) {
     return (
-      <div className="text-center">
-        <button className="btn btn-sm btn-success" onClick={handleUpgradePlan}>
+      <div className="text-center p-4">
+        <button className="btn btn-success" onClick={handleUpgradePlan}>
           Add Subscription
         </button>
-        <div className="mt-2 text-center small">
+        <div className="mt-2 text-center small text-muted">
           <i className="bx bx-info-circle bx-xs"></i> Add your new subscription
         </div>
       </div>
@@ -42,164 +44,176 @@ const SubScriptionHistory = ({ tenantId }) => {
   }
 
   // Format dates
-  const start = plan?.startDate ? new Date(plan.startDate) : null;
   const end = plan?.endDate ? new Date(plan.endDate) : null;
   const today = new Date();
 
-  const totalDays = start && end ? Math.ceil((end - start) / (1000 * 60 * 60 * 24)) : 0;
-  const daysLeft = end ? Math.max(0, Math.ceil((end - today) / (1000 * 60 * 60 * 24))) : 0;
+  const daysLeft = end
+    ? Math.max(0, Math.ceil((end - today) / (1000 * 60 * 60 * 24)))
+    : 0;
 
-  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) => (
-        <span className="d-inline-block px-3">
-          {e.currency?.symbol || "₹"} {e.price}
-        </span>
-      ),
-      align: "text-start",
-    },
-    {
-      key: "planName",
-      label: "Plan Name",
-      getValue: (e) => (
-        <span className="d-inline-block ps-4">{e.planName}</span>
-      ),
-      align: "text-start",
-    },
-    {
-      key: "action",
-      label: "Action",
-      getValue: (e) => (
-        <div className="dropdown text-center">
-          <button
-            className="btn btn-icon btn-sm dropdown-toggle hide-arrow"
-            data-bs-toggle="dropdown"
-          >
-            <i className="bx bx-dots-vertical-rounded"></i>
-          </button>
-          <div className="dropdown-menu dropdown-menu-end">
-            {/* View */}
-            <button
-              className="dropdown-item py-1"
-              onClick={() => navigate(`/employee/${e.id}`)}
-            >
-              <i className="bx bx-detail bx-sm"></i> View
-            </button>
-            {/* Download */}
-            <button
-              className="dropdown-item py-1"
-              onClick={() => console.log("Download clicked for", e.id)}
-            >
-              <i className="bx bx-cloud-download bx-sm"></i> Download
-            </button>
-          </div>
+  // Render logic for subscription history table
+  const renderSubscriptionHistory = () => {
+    if (!subscriptionHistory || subscriptionHistory.length === 0) {
+      return (
+        <div className="text-center text-muted p-4">
+          No subscription history found
         </div>
-      ),
-      align: "text-center",
-    },
-  ];
+      );
+    }
+
+    const sortedHistory = subscriptionHistory
+      .slice()
+      .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+
+    return (
+      <>
+        {/* Table for larger screens */}
+        <div className=" d-md-block table-responsive">
+          <table className="table border-top dataTable text-nowrap align-middle">
+            <thead className="align-middle">
+              <tr>
+                <th>Date</th>
+                <th>Type</th>
+                <th>Amount</th>
+                <th>Plan Name</th>
+                <th className="text-center">Action</th>
+              </tr>
+            </thead>
+            <tbody className="align-middle">
+              {sortedHistory.map((item) => (
+                <tr key={item.id}>
+                  <td>{formatUTCToLocalTime(item?.createdAt)}</td>
+                  <td>{SUBSCRIPTION_PLAN_FREQUENCIES[item.frequency] || "N/A"}</td>
+                  <td>
+                    {item.currency?.symbol || "₹"} {item.price}
+                  </td>
+                  <td>{item.planName}</td>
+                  <td className="text-center">
+                    <div className="dropdown">
+                      <button
+                        className="btn btn-icon btn-sm dropdown-toggle hide-arrow"
+                        data-bs-toggle="dropdown"
+                      >
+                        <i className="bx bx-dots-vertical-rounded"></i>
+                      </button>
+                      <div className="dropdown-menu dropdown-menu-end">
+                        <button
+                          className="dropdown-item py-1"
+                        >
+                          <i className="bx bx-detail bx-sm"></i> View
+                        </button>
+                        <button
+                          className="dropdown-item py-1"
+                          onClick={() =>
+                            console.log("Download clicked for", item.id)
+                          }
+                        >
+                          <i className="bx bx-cloud-download bx-sm"></i> Download
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Card-based view for smaller screens */}
+     
+      </>
+    );
+  };
 
   return (
-    <div className="p-2">
-      <div className="text-start mb-3">
-        {/* Active subscription */}
-        <div className="divider text-start my-1">
-          <div className="divider-text">Active Subscription</div>
-        </div>
+    <div className="p-2 p-md-4">
+      <div className="row g-4">
+        {/* Left Card: Active Subscription */}
+        <div className="col-12 col-lg-6">
+          <div className="card shadow-sm border rounded p-3 h-100 text-start">
+            <div className="divider text-start mb-3">
+              <div className="divider-text">Active Subscription</div>
+            </div>
 
-        <div className="row">
-          <div className="col-12 col-sm-8 border rounded p-3 shadow-sm">
             <p className="text-primary fw-bold m-0 fs-4">
               {plan.planName || "N/A"}
             </p>
             {plan.description && (
-              <div className="col rounded-2 justify-content-start p-0">
-                <p className="m-0">{plan.description}</p>
-              </div>
+              <p className="m-0 text-muted small">{plan.description}</p>
             )}
 
-            <div className="d-flex justify-content-between align-items-end mt-2">
-              <div>
-                <h3 className="m-0">
-                  {plan.currency?.symbol || "₹"} {plan.price}
-                </h3>
-                <small className="text-muted">
-                  {SUBSCRIPTION_PLAN_FREQUENCIES[plan.frequency] || ""}
-                </small>
-              </div>
-              <div>
-                <button
-                  className="btn btn-sm btn-primary"
-                  onClick={handleUpgradePlan}
-                >
-                  Upgrade Plan
-                </button>
-              </div>
+            <div className="mt-2">
+              <h3 className="m-0">
+                {plan.currency?.symbol || "₹"} {plan.price}
+              </h3>
+              <small className="text-muted">
+                {SUBSCRIPTION_PLAN_FREQUENCIES[plan.frequency] || ""}
+              </small>
             </div>
 
             <div className="mt-3 small text-muted">
-              <div className="d-flex justify-content-between">
-                <span>
-                  Active Since :{" "}
-                  {plan.startDate ? formatUTCToLocalTime(plan.startDate) : "N/A"} ({daysLeft} days left)
-                </span>
+              <div>
+                Activated Since:{" "}
+                {plan.startDate ? formatUTCToLocalTime(plan.startDate) : "N/A"} (
+                {daysLeft} days left)
               </div>
-              <div className="text-start mt-1">
-                Ends on : {plan.endDate ? formatUTCToLocalTime(plan.endDate) : "N/A"}
+              <div className="mt-1">
+                Ends on:{" "}
+                {plan.endDate ? formatUTCToLocalTime(plan.endDate) : "N/A"}
               </div>
             </div>
+
+            {/* Features list */}
+            <div className="mt-4">
+              <h6 className="text-secondary">Features</h6>
+              <div className="row g-2">
+                {features?.modules &&
+                  Object.entries(features.modules).map(([key, mod]) => {
+                    if (!mod?.name) return null;
+                    return (
+                      <div
+                        key={key}
+                        className="col-12 col-sm-6 d-flex align-items-center"
+                      >
+                        <i
+                          className={`fa-regular ${
+                            mod.enabled
+                              ? "fa-circle-check text-success"
+                              : "fa-circle-xmark text-danger"
+                          }`}
+                        ></i>
+                        <span className="ms-2">{mod.name}</span>
+                      </div>
+                    );
+                  })}
+              </div>
+            </div>
+
+            <div className="mt-3 text-end">
+              <button
+                className="btn btn-sm btn-primary"
+                onClick={handleUpgradePlan}
+              >
+                Upgrade Plan
+              </button>
+            </div>
           </div>
         </div>
 
-        {/* History */}
-        <div className="divider text-start my-3">
-          <div className="divider-text">
-            <i className="bx bx-history"></i> <small>History</small>
+        {/* Right Card: Subscription History */}
+        <div className="col-12 col-lg-6">
+          <div className="card shadow-sm border rounded p-3 h-100">
+            <div className="divider text-start mb-3">
+              <div className="divider-text">
+                <i className="bx bx-history"></i> <small>History</small>
+              </div>
+            </div>
+            {renderSubscriptionHistory()}
           </div>
         </div>
-
-        <table className="table border-top dataTable text-nowrap align-middle">
-          <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))
-              .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>
   );
 };
 
-export default SubScriptionHistory;
+export default SubScriptionHistory;
\ No newline at end of file