From 660d4e37b966498b07b72e195458cb402003ec54 Mon Sep 17 00:00:00 2001
From: Sergio Valero <sergio.valero@edunext.co>
Date: Tue, 20 Aug 2024 16:27:19 -0400
Subject: [PATCH] feat: calculate remaining value in license details

---
 src/features/Licenses/LicensesDetailPage/index.jsx  | 5 +++--
 src/features/Licenses/LicensesDetailPage/index.scss | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/features/Licenses/LicensesDetailPage/index.jsx b/src/features/Licenses/LicensesDetailPage/index.jsx
index 9ff8b431..93726636 100644
--- a/src/features/Licenses/LicensesDetailPage/index.jsx
+++ b/src/features/Licenses/LicensesDetailPage/index.jsx
@@ -38,6 +38,7 @@ const LicensesDetailPage = () => {
   const licenseTable = useSelector((state) => state.licenses.table);
   const licenseInfo = licenseTable.data
     .find((license) => license?.licenseId === parseInt(licenseId, 10)) || defaultLicenseInfo;
+
   const isLoadingCourses = coursesTable.table.status === RequestStatus.LOADING;
   const isLoadingLicenses = licenseTable.status === RequestStatus.LOADING;
 
@@ -110,8 +111,8 @@ const LicensesDetailPage = () => {
               <div className="separator mx-4" />
               <div className="d-flex flex-column align-items-center">
                 <p className="title">Remaining</p>
-                <span className="value number-of-pending">
-                  {licenseInfo.numberOfPendingStudents}
+                <span className="value number-of-remaining">
+                  {licenseInfo.purchasedSeats - licenseInfo.numberOfStudents - licenseInfo.numberOfPendingStudents}
                 </span>
               </div>
             </>
diff --git a/src/features/Licenses/LicensesDetailPage/index.scss b/src/features/Licenses/LicensesDetailPage/index.scss
index 4baa2421..4c398cf3 100644
--- a/src/features/Licenses/LicensesDetailPage/index.scss
+++ b/src/features/Licenses/LicensesDetailPage/index.scss
@@ -46,7 +46,7 @@
     font-weight: bold;
   }
 
-  .number-of-pending {
+  .number-of-remaining {
     color: red;
   }