From 3ff80ee0320d41b766b57cffc981233caaae85ae Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Sat, 13 Dec 2025 11:20:16 +0530
Subject: [PATCH] Sorting in Subscription page.

---
 src/pages/Home/SubscriptionPlans.jsx | 99 ++++++++++++++--------------
 1 file changed, 51 insertions(+), 48 deletions(-)

diff --git a/src/pages/Home/SubscriptionPlans.jsx b/src/pages/Home/SubscriptionPlans.jsx
index 8637e121..cdf33454 100644
--- a/src/pages/Home/SubscriptionPlans.jsx
+++ b/src/pages/Home/SubscriptionPlans.jsx
@@ -104,61 +104,64 @@ const SubscriptionPlans = () => {
 
                 <div className="accordion" id={`planFeatures-${plan.id}`}>
                   {plan.features?.modules &&
-                    Object.entries(plan.features.modules).map(([key, mod]) => {
-                      if (!mod || !mod.name) return null;
+                    Object.entries(plan.features.modules)
+                      .sort(([, a], [, b]) => Number(b.enabled) - Number(a.enabled))
+                      .map(([key, mod]) => {
 
-                      return (
-                        <div className="accordion-item mb-2" key={`${plan.id}-${mod.id}`}>
-                          <h2 id={`heading-${plan.id}-${mod.id}`} className="accordion-header">
-                            <button
-                              className="accordion-button py-2 d-flex justify-content-between align-items-center"
-                              type="button"
-                              data-bs-toggle="collapse"
-                              data-bs-target={`#collapse-${plan.id}-${mod.id}`}
-                              aria-expanded="true"
-                              aria-controls={`collapse-${plan.id}-${mod.id}`}
+                        if (!mod || !mod.name) return null;
+
+                        return (
+                          <div className="accordion-item mb-2" key={`${plan.id}-${mod.id}`}>
+                            <h2 id={`heading-${plan.id}-${mod.id}`} className="accordion-header">
+                              <button
+                                className="accordion-button py-2 d-flex justify-content-between align-items-center"
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target={`#collapse-${plan.id}-${mod.id}`}
+                                aria-expanded="true"
+                                aria-controls={`collapse-${plan.id}-${mod.id}`}
+                              >
+                                <span className="fw-semibold d-flex align-items-center">
+                                  {mod.enabled ? (
+                                    <i className="fa-regular fa-circle-check text-success me-2"></i>
+                                  ) : (
+                                    <i className="fa-regular fa-circle-xmark text-danger me-2"></i>
+                                  )}
+                                  {mod.name}
+                                </span>
+
+                                <i className="bx bx-chevron-down ms-2"></i>
+                              </button>
+                            </h2>
+
+                            <div
+                              id={`collapse-${plan.id}-${mod.id}`}
+                              className="accordion-collapse collapse show"
+                              aria-labelledby={`heading-${plan.id}-${mod.id}`}
                             >
-                              <span className="fw-semibold d-flex align-items-center">
-                                {mod.enabled ? (
-                                  <i className="fa-regular fa-circle-check text-success me-2"></i>
+                              <div className="accordion-body py-2">
+                                {mod.features?.length > 0 ? (
+                                  <ul className="list-unstyled ms-2">
+                                    {mod.features.map((feat) => (
+                                      <li key={feat.id} className="d-flex align-items-start mb-1">
+                                        <i
+                                          className={`bx bxs-circle ${mod.enabled ? "text-success" : "text-danger"
+                                            } me-2 mt-1`}
+                                          style={{ fontSize: "8px" }}
+                                        ></i>
+                                        <span>{feat.name}</span>
+                                      </li>
+                                    ))}
+                                  </ul>
                                 ) : (
-                                  <i className="fa-regular fa-circle-xmark text-danger me-2"></i>
+                                  <p className="text-muted small mb-0">No additional features</p>
                                 )}
-                                {mod.name}
-                              </span>
-
-                              <i className="bx bx-chevron-down ms-2"></i>
-                            </button>
-                          </h2>
-
-                          <div
-                            id={`collapse-${plan.id}-${mod.id}`}
-                            className="accordion-collapse collapse show"
-                            aria-labelledby={`heading-${plan.id}-${mod.id}`}
-                          >
-                            <div className="accordion-body py-2">
-                              {mod.features?.length > 0 ? (
-                                <ul className="list-unstyled ms-2">
-                                  {mod.features.map((feat) => (
-                                    <li key={feat.id} className="d-flex align-items-start mb-1">
-                                      <i
-                                        className={`bx bxs-circle ${mod.enabled ? "text-success" : "text-danger"
-                                          } me-2 mt-1`}
-                                        style={{ fontSize: "8px" }}
-                                      ></i>
-                                      <span>{feat.name}</span>
-                                    </li>
-                                  ))}
-                                </ul>
-                              ) : (
-                                <p className="text-muted small mb-0">No additional features</p>
-                              )}
+                              </div>
                             </div>
                           </div>
-                        </div>
 
-                      );
-                    })}
+                        );
+                      })}
                 </div>