From a188699c569026bed56de082dc810920451304db Mon Sep 17 00:00:00 2001
From: rowell_m_soriano <rowell_m_soriano@outlook.com>
Date: Fri, 13 Mar 2026 14:48:15 +0800
Subject: [PATCH] UI/UX Enhancement

---
 .../PRMgmt/PRTabbedTable/AllPR.cshtml         |   11 +-
 .../PRMgmt/PRTabbedTable/ApprovedPR.cshtml    |    1 +
 .../PRMgmt/PRTabbedTable/DeletedPR.cshtml     |    1 +
 CPRNIMS.WebApps/Views/Home/_LoginBody.cshtml  |  214 ++-
 .../Views/Home/_LoginLayout.cshtml            |    4 +-
 CPRNIMS.WebApps/Views/ItemMgmt/Index.cshtml   |    2 +-
 CPRNIMS.WebApps/Views/POMgmt/CustomPO.cshtml  |    8 +-
 CPRNIMS.WebApps/Views/PRMgmt/Index.cshtml     |    6 +-
 .../Views/PRMgmt/PRTracking.cshtml            |    2 +-
 .../Views/Shared/PartialView/_Head.cshtml     |    4 +-
 .../Account/{loginV4.js => loginV5.js}        |   49 +-
 ...temManagementV8.js => ItemManagementV9.js} |    4 +-
 .../PO/{CustomPOV7.js => CustomPOV8.js}       |    7 +-
 ...RTrackingV8.js => DetailedPRTrackingV9.js} |    1 +
 .../wwwroot/JsFunctions/PR/{PR.js => PRV2.js} |    0
 .../wwwroot/css/LoginPageInteractive.css      | 1171 +++++++++++++++++
 .../css/PR/{PRTabs.css => PRTabsV2.css}       |  106 +-
 .../{sideBarStyle.css => sideBarStyleV2.css}  |  179 +--
 CPRNIMS.WebApps/wwwroot/css/siteV5.css        |  167 ---
 CPRNIMS.WebApps/wwwroot/css/siteV6.css        |  434 ++++++
 20 files changed, 1934 insertions(+), 437 deletions(-)
 rename CPRNIMS.WebApps/wwwroot/JsFunctions/Account/{loginV4.js => loginV5.js} (91%)
 rename CPRNIMS.WebApps/wwwroot/JsFunctions/Items/{ItemManagementV8.js => ItemManagementV9.js} (97%)
 rename CPRNIMS.WebApps/wwwroot/JsFunctions/PO/{CustomPOV7.js => CustomPOV8.js} (99%)
 rename CPRNIMS.WebApps/wwwroot/JsFunctions/PR/{DetailedPRTrackingV8.js => DetailedPRTrackingV9.js} (99%)
 rename CPRNIMS.WebApps/wwwroot/JsFunctions/PR/{PR.js => PRV2.js} (100%)
 create mode 100644 CPRNIMS.WebApps/wwwroot/css/LoginPageInteractive.css
 rename CPRNIMS.WebApps/wwwroot/css/PR/{PRTabs.css => PRTabsV2.css} (64%)
 rename CPRNIMS.WebApps/wwwroot/css/{sideBarStyle.css => sideBarStyleV2.css} (56%)
 delete mode 100644 CPRNIMS.WebApps/wwwroot/css/siteV5.css
 create mode 100644 CPRNIMS.WebApps/wwwroot/css/siteV6.css

diff --git a/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/AllPR.cshtml b/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/AllPR.cshtml
index b8a0605..c9cc2b2 100644
--- a/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/AllPR.cshtml
+++ b/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/AllPR.cshtml
@@ -52,13 +52,13 @@
         <thead >
             <tr>
                 <th style="width:7%">PRNo</th>
-                <th style="width:7%">New PRNo</th>
-                <th style="width:50%">ItemName's</th>
+                <th style="width:8%">New PRNo</th>
+                <th style="width:48%">ItemName's</th>
                 <th style="width:9%">Req. Date</th>
-                <th style="width:14%">Req. By</th>
+                <th style="width:10%">Req. By</th>
                 <th style="width:8%">DateNeeded</th>
-                <th style="width:7%">ChargeTo</th>
-                <th style="width:7%">Action</th>
+                <th style="width:10%">ChargeTo</th>
+                <th style="width:8%">Action</th>
             </tr>
         </thead>
         <tbody>
@@ -76,6 +76,7 @@
             serverSide: true,
             processing: true,
             searching:  false,    
+            ordering:   false,
             ajax: {
                 url: endpoint.GetAllPR,
                 type: 'GET',
diff --git a/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/ApprovedPR.cshtml b/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/ApprovedPR.cshtml
index 7020958..9c1f77e 100644
--- a/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/ApprovedPR.cshtml
+++ b/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/ApprovedPR.cshtml
@@ -100,6 +100,7 @@
             serverSide: true,
             processing: true,
             searching:  false,
+            ordering:   false,
             ajax: {
                 url:  endpoint.GetApprovedPR,
                 type: 'GET',
diff --git a/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/DeletedPR.cshtml b/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/DeletedPR.cshtml
index f3bdb47..ab92b6c 100644
--- a/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/DeletedPR.cshtml
+++ b/CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/DeletedPR.cshtml
@@ -79,6 +79,7 @@
             serverSide: true,
             processing: true,
             searching:  false,
+            ordering:   false,
             ajax: {
                 url: endpoint.GetDeletedPR,
                 type: 'GET',
diff --git a/CPRNIMS.WebApps/Views/Home/_LoginBody.cshtml b/CPRNIMS.WebApps/Views/Home/_LoginBody.cshtml
index 522b633..67d5c7b 100644
--- a/CPRNIMS.WebApps/Views/Home/_LoginBody.cshtml
+++ b/CPRNIMS.WebApps/Views/Home/_LoginBody.cshtml
@@ -1,153 +1,125 @@
 <div class="login-page-wrapper">
-    <div class="login-main-container">
-        <!-- Medical Illustration Section -->
-        <div class="login-illustration-section">
-            <!-- Pharmaceutical Manufacturing SVG -->
-            <svg class="login-medical-illustration" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <!-- Laboratory Equipment -->
-                <rect x="50" y="200" width="300" height="80" rx="10" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.3)" stroke-width="2" />
 
-                <!-- Test Tubes -->
-                <rect x="80" y="160" width="12" height="60" rx="6" fill="#67e8f9" />
-                <rect x="100" y="155" width="12" height="65" rx="6" fill="#22d3ee" />
-                <rect x="120" y="165" width="12" height="55" rx="6" fill="#0891b2" />
+    <div class="lp-orb"></div>
+    <div class="lp-orb"></div>
+    <div class="lp-orb"></div>
+    <div class="lp-orb"></div>
 
-                <!-- Beaker -->
-                <path d="M180 180 L180 220 L220 220 L220 180 L210 180 L210 170 L190 170 L190 180 Z" fill="rgba(255,255,255,0.2)" stroke="rgba(255,255,255,0.4)" stroke-width="2" />
-                <ellipse cx="200" cy="200" rx="15" ry="8" fill="#67e8f9" opacity="0.7" />
+    <div style="width:100%;max-width:820px;position:relative;z-index:2;">
+        <div class="lp-card">
 
-                <!-- Microscope -->
-                <rect x="260" y="180" width="20" height="40" rx="4" fill="rgba(255,255,255,0.3)" />
-                <circle cx="270" cy="170" r="12" fill="rgba(255,255,255,0.4)" />
-                <rect x="275" y="155" width="3" height="20" fill="rgba(255,255,255,0.5)" />
-
-                <!-- Medicine Pills -->
-                <circle cx="320" cy="170" r="8" fill="#67e8f9" />
-                <circle cx="340" cy="175" r="8" fill="#22d3ee" />
-                <circle cx="325" cy="190" r="8" fill="#0891b2" />
-
-                <!-- DNA Helix -->
-                <path d="M60 80 Q80 60, 100 80 T140 80" stroke="#67e8f9" stroke-width="4" fill="none" opacity="0.6" />
-                <path d="M60 100 Q80 120, 100 100 T140 100" stroke="#22d3ee" stroke-width="4" fill="none" opacity="0.6" />
-                <circle cx="70" cy="80" r="3" fill="#67e8f9" />
-                <circle cx="90" cy="100" r="3" fill="#22d3ee" />
-                <circle cx="110" cy="80" r="3" fill="#67e8f9" />
-                <circle cx="130" cy="100" r="3" fill="#22d3ee" />
-
-                <!-- Molecular Structure -->
-                <circle cx="280" cy="90" r="8" fill="#67e8f9" />
-                <circle cx="300" cy="70" r="6" fill="#22d3ee" />
-                <circle cx="320" cy="90" r="8" fill="#0891b2" />
-                <circle cx="300" cy="110" r="6" fill="#67e8f9" />
-                <line x1="280" y1="90" x2="300" y2="70" stroke="rgba(255,255,255,0.5)" stroke-width="2" />
-                <line x1="300" y1="70" x2="320" y2="90" stroke="rgba(255,255,255,0.5)" stroke-width="2" />
-                <line x1="320" y1="90" x2="300" y2="110" stroke="rgba(255,255,255,0.5)" stroke-width="2" />
-                <line x1="300" y1="110" x2="280" y2="90" stroke="rgba(255,255,255,0.5)" stroke-width="2" />
-
-                <!-- Factory/Manufacturing -->
-                <rect x="150" y="120" width="100" height="60" rx="5" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.3)" stroke-width="2" />
-                <rect x="170" y="100" width="15" height="40" rx="2" fill="rgba(255,255,255,0.2)" />
-                <rect x="200" y="95" width="15" height="45" rx="2" fill="rgba(255,255,255,0.2)" />
-                <rect x="230" y="105" width="15" height="35" rx="2" fill="rgba(255,255,255,0.2)" />
-
-                <!-- Smoke/Steam -->
-                <circle cx="177" cy="85" r="4" fill="rgba(255,255,255,0.3)" />
-                <circle cx="175" cy="75" r="3" fill="rgba(255,255,255,0.2)" />
-                <circle cx="207" cy="80" r="4" fill="rgba(255,255,255,0.3)" />
-                <circle cx="210" cy="70" r="3" fill="rgba(255,255,255,0.2)" />
-                <circle cx="237" cy="90" r="4" fill="rgba(255,255,255,0.3)" />
-                <circle cx="240" cy="80" r="3" fill="rgba(255,255,255,0.2)" />
-            </svg>
-
-            <!-- Features Grid -->
-            <div class="login-features-grid">
-                <div class="login-feature-item">
-                    <i class="fas fa-clipboard-check"></i>
-                    <span>Streamlined Process</span>
+            <!-- Left -->
+            <div class="lp-left">
+                <div class="lp-molecule">
+                    <div class="lp-mol-ring"></div>
+                    <div class="lp-mol-center"></div>
+                    <div class="lp-mol-dot"></div>
+                    <div class="lp-mol-dot"></div>
+                    <div class="lp-mol-dot"></div>
+                    <div class="lp-mol-dot"></div>
                 </div>
-                <div class="login-feature-item">
-                    <i class="fas fa-users-cog"></i>
-                    <span>Centralized System</span>
+
+                <div class="lp-brand">
+                    <div class="lp-brand-icon">⚗️</div>
+                    <div class="lp-brand-name">Lloyd Laboratories</div>
+                    <div class="lp-brand-sub">Centralized Non-Inventory<br>Purchasing System</div>
                 </div>
-                <div class="login-feature-item">
-                    <i class="fas fa-chart-line"></i>
-                    <span>Real-time Tracking</span>
+
+                <div class="lp-stats">
+                    <div class="lp-stat">
+                        <div class="lp-stat-num">99%</div>
+                        <div class="lp-stat-lbl">Uptime</div>
+                    </div>
+                    <div class="lp-stat">
+                        <div class="lp-stat-num">24/7</div>
+                        <div class="lp-stat-lbl">Access</div>
+                    </div>
+                    <div class="lp-stat">
+                        <div class="lp-stat-num">SSL</div>
+                        <div class="lp-stat-lbl">Secured</div>
+                    </div>
                 </div>
-                <div class="login-feature-item">
-                    <i class="fas fa-shield-heart"></i>
-                    <span>Secure & Compliant</span>
+
+                <div class="lp-features">
+                    <div class="lp-feat">
+                        <i class="fas fa-clipboard-check"></i>
+                        <span>Streamlined</span>
+                    </div>
+                    <div class="lp-feat">
+                        <i class="fas fa-users-cog"></i>
+                        <span>Centralized</span>
+                    </div>
+                    <div class="lp-feat">
+                        <i class="fas fa-chart-line"></i>
+                        <span>Real-time</span>
+                    </div>
+                    <div class="lp-feat">
+                        <i class="fas fa-shield-alt"></i>
+                        <span>Secure</span>
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <!-- Login Form Section -->
-        <div class="login-form-container">
-            <div class="login-form-header">
-             @*    <div class="login-company-logo">
-                    <img src="~/Content/Common/LLILogoEdited.png" alt="Lloyd Laboratories Logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
-                    <i class="fas fa-flask" style="display: none;"></i>
-                </div> *@
-                <div class="login-company-logo">
-                    <i class="fas fa-flask"></i>
+            <!-- Right -->
+            <div class="lp-right">
+                <div class="lp-form-header">
+                    <div class="lp-form-title">Welcome Back</div>
+                    <div class="lp-form-subtitle">Sign in to continue to your dashboard</div>
                 </div>
-                <div class="login-company-name">Lloyd Laboratories</div>
-                <div class="login-system-subtitle">Centralized Non-Inventory Purchasing System</div>
-            </div>
 
-            <div class="login-form-body">
-                <form id="loginForm">
-                    <div class="login-form-group">
-                        <label for="UserNameLogin" class="login-form-label">Username</label>
-                        <div class="login-input-wrapper">
-                            <i class="fas fa-user login-input-icon"></i>
-                            <input type="text" id="UserNameLogin" class="login-form-control" placeholder="Enter your username" required>
+                <div class="lp-form-body">
+                    <div class="lp-field">
+                        <label>Username</label>
+                        <div class="lp-input-wrap">
+                            <input type="text" id="UserNameLogin" class="lp-inp" placeholder="Enter your username">
+                            <i class="fas fa-user"></i>
                         </div>
                     </div>
-
-                    <div class="login-form-group">
-                        <label for="PasswordLogin" class="login-form-label">Password</label>
-                        <div class="login-input-wrapper">
-                            <i class="fas fa-lock login-input-icon"></i>
-                            <input type="password" id="PasswordLogin" class="login-form-control" placeholder="Enter your password" required>
-                            <i class="fas fa-eye login-toggle-password" id="togglePassword"></i>
+                    <div class="lp-field">
+                        <label>Password</label>
+                        <div class="lp-input-wrap">
+                            <i class="fas fa-lock lp-left-icon"></i>
+                            <input type="password"
+                                   id="PasswordLogin"
+                                   class="lp-inp"
+                                   placeholder="Enter your password"
+                                   style="padding-left:42px; padding-right:48px; position:relative; z-index:1; width:100%;">
+                            <i class="fas fa-eye lp-toggle-pw"
+                               id="togglePassword"
+                               onclick="togglePasswordVisibility()"
+                               style="position:absolute; right:14px; top:50%; transform:translateY(-50%);
+                  width:20px; height:20px; display:flex; align-items:center;
+                  justify-content:center; cursor:pointer; z-index:3;
+                  pointer-events:all; color:#9ca3af; font-size:14px;"></i>
                         </div>
                     </div>
-
-                    <div class="login-form-group">
-                        <label for="captchaCode" class="login-form-label">Security Verification</label>
-                        <div class="login-captcha-section">
-                            <div class="login-captcha-image">
+                    <div class="lp-field">
+                        <label>Security Verification</label>
+                        <div class="lp-captcha-row">
+                            <div class="lp-captcha-box">
                                 <img id="captchaImage" src="/Home/GetCaptcha" alt="CAPTCHA" style="max-width: 100%; height: 40px;" />
                             </div>
-                            <button type="button" class="login-refresh-btn" onclick="refreshCaptcha()" id="refresh">
-                                <i class="fas fa-sync-alt"></i>
-                            </button>
+                            <button type="button" class="lp-refresh-btn" onclick="refreshCaptcha()"><i class="fas fa-sync-alt"></i></button>
                         </div>
-                        <div class="login-input-wrapper">
-                            <i class="fas fa-shield-alt login-input-icon"></i>
-                            <input type="text" id="captchaCode" name="captchaCode" class="login-form-control" placeholder="Enter CAPTCHA code" required>
+                        <div class="lp-input-wrap">
+                            <input type="text" id="captchaCode" name="captchaCode" class="lp-inp" placeholder="Enter CAPTCHA code">
+                            <i class="fas fa-shield-alt"></i>
                         </div>
                     </div>
 
-                    <div class="login-forgot-password">
-                        <a href="#" data-bs-toggle="modal" data-bs-target="#sendOTPModal">Forgot password?</a>
-                    </div>
+                    <div class="lp-forgot"> <a href="#" data-bs-toggle="modal" data-bs-target="#sendOTPModal">Forgot password?</a></div>
 
-                    <button type="button" class="login-btn-primary" id="BtnLogin" onclick="login()">
-                        <i class="fas fa-sign-in-alt me-2"></i>
-                        Sign In
+                    <button id="BtnLogin" onclick="login()" class="lp-btn">
+                        <i class="fas fa-sign-in-alt" id="btnIcon" style="margin-right:8px;"></i>
+                        <span id="btnText">Sign In</span>
                     </button>
-                </form>
+                </div>
             </div>
         </div>
-    </div>
 
-    <!-- Footer positioned at bottom -->
-    <div class="login-page-footer">
-        &copy; 2025 - Lloyd Laboratories Inc. Purchasing(Non-Inventory) - <a href="#">Privacy</a>
+        <div class="lp-footer">© 2025 Lloyd Laboratories Inc. — Non-Inventory Purchasing System</div>
     </div>
 </div>
-
 <!-- Send OTP Modal -->
 <div class="modal fade" id="sendOTPModal" tabindex="-1" aria-labelledby="sendOTPModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
diff --git a/CPRNIMS.WebApps/Views/Home/_LoginLayout.cshtml b/CPRNIMS.WebApps/Views/Home/_LoginLayout.cshtml
index 6eb8ec6..0e5cf1f 100644
--- a/CPRNIMS.WebApps/Views/Home/_LoginLayout.cshtml
+++ b/CPRNIMS.WebApps/Views/Home/_LoginLayout.cshtml
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link href="~/css/spinner.css" rel="stylesheet" />
     <link href="~/css/toast-notifications.css" rel="stylesheet" />
-    <link href="~/css/LoginModern.css" rel="stylesheet" />
+    <link href="~/css/loginpageinteractive.css" rel="stylesheet" />
 </head>
 <body>
     <div class="container">
@@ -17,7 +17,7 @@
             <div class="toast-container" id="toast-container"></div>
         </main>
     </div>
-    <script src="~/JsFunctions/Account/loginV4.js"></script>
+    <script src="~/JsFunctions/Account/loginV5.js"></script>
     <script src="~/jsfunctions/utilities/utilsV3.js"></script>
     <script src="~/js/toast-notifications.js"></script>
     <script src="~/jsfunctions/account/accountvar.js"></script>
diff --git a/CPRNIMS.WebApps/Views/ItemMgmt/Index.cshtml b/CPRNIMS.WebApps/Views/ItemMgmt/Index.cshtml
index 8562606..ee79eb4 100644
--- a/CPRNIMS.WebApps/Views/ItemMgmt/Index.cshtml
+++ b/CPRNIMS.WebApps/Views/ItemMgmt/Index.cshtml
@@ -258,7 +258,7 @@
                 </div>
             </div>
         </div>
-        <script src="~/JsFunctions/Items/ItemManagementV8.js"></script>
+        <script src="~/JsFunctions/Items/ItemManagementV9.js"></script>
         @await Html.PartialAsync("PagesView/Item/_Scripts")
     </div>
 
diff --git a/CPRNIMS.WebApps/Views/POMgmt/CustomPO.cshtml b/CPRNIMS.WebApps/Views/POMgmt/CustomPO.cshtml
index 89c5ce7..7bcdb76 100644
--- a/CPRNIMS.WebApps/Views/POMgmt/CustomPO.cshtml
+++ b/CPRNIMS.WebApps/Views/POMgmt/CustomPO.cshtml
@@ -79,10 +79,10 @@
                 </tbody>
             </table>
                 <div class="modal-footer">
-
                     <button type="button" id="clearCustomPage"
-                            onclick="clearCustomPage()" class="btn btn-outline-secondary px-4" style="margin-bottom:20px; margin-right:10px;"
-                            data-bs-dismiss="modal">
+                            onclick="clearCustomTable()"
+                            class="btn btn-outline-secondary px-4"
+                            style="margin-bottom:20px; margin-right:10px;">
                         <i class="bi bi-x-circle me-2"></i>Cancel
                     </button>
 
@@ -167,7 +167,7 @@
     </div>
     <input hidden id="poTypeId"/>
     <link href="~/css/po/CustomPOV2.css" rel="stylesheet" />
-    <script src="~/JsFunctions/PO/CustomPOV7.js"></script>
+    <script src="~/JsFunctions/PO/CustomPOV8.js"></script>
     @await Html.PartialAsync("PagesView/PR/_PRWOCanvass")
     @await Html.PartialAsync("PagesView/PO/_POScripts")
 </body>
\ No newline at end of file
diff --git a/CPRNIMS.WebApps/Views/PRMgmt/Index.cshtml b/CPRNIMS.WebApps/Views/PRMgmt/Index.cshtml
index b4ccf47..8439ae5 100644
--- a/CPRNIMS.WebApps/Views/PRMgmt/Index.cshtml
+++ b/CPRNIMS.WebApps/Views/PRMgmt/Index.cshtml
@@ -138,9 +138,9 @@
     </div>
     <link href="~/css/pr/TrackingV3.css" rel="stylesheet" />
     <link href="~/css/pr/ButtonStyleV2.css" rel="stylesheet" />
-    <link href="~/css/pr/PRTabs.css" rel="stylesheet" />
+    <link href="~/css/pr/PRTabsV2.css" rel="stylesheet" />
     @await Html.PartialAsync("PagesView/PR/_PRTracking")
-    <script src="~/JsFunctions/PR/PR.js"></script>
-    <script src="~/JsFunctions/PR/PRTabs.js"></script>
+    <script src="~/JsFunctions/PR/PRV2.js"></script>
+    <script src="~/jsfunctions/pr/prtabs.js"></script>
     @await Html.PartialAsync("PagesView/PR/_PRScripts")
 </body>
\ No newline at end of file
diff --git a/CPRNIMS.WebApps/Views/PRMgmt/PRTracking.cshtml b/CPRNIMS.WebApps/Views/PRMgmt/PRTracking.cshtml
index 1eb14c9..a92b310 100644
--- a/CPRNIMS.WebApps/Views/PRMgmt/PRTracking.cshtml
+++ b/CPRNIMS.WebApps/Views/PRMgmt/PRTracking.cshtml
@@ -115,6 +115,6 @@
         </div>
     </div>
     <link href="~/css/pr/trackingdetail.css" rel="stylesheet" />
-    <script src="~/jsfunctions/pr/DetailedPRTrackingV8.js"></script>
+    <script src="~/jsfunctions/pr/DetailedPRTrackingV9.js"></script>
     @await Html.PartialAsync("PagesView/PR/_PRScripts")
 </body>
\ No newline at end of file
diff --git a/CPRNIMS.WebApps/Views/Shared/PartialView/_Head.cshtml b/CPRNIMS.WebApps/Views/Shared/PartialView/_Head.cshtml
index eea307e..1fdac93 100644
--- a/CPRNIMS.WebApps/Views/Shared/PartialView/_Head.cshtml
+++ b/CPRNIMS.WebApps/Views/Shared/PartialView/_Head.cshtml
@@ -2,8 +2,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>@ViewData["Title"] - LLI Purchasing Non-Inventory System</title>
 <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
-<link rel="stylesheet" href="~/css/sideBarStyle.css" />
-<link rel="stylesheet" href="~/css/siteV5.css" asp-append-version="true" />
+<link rel="stylesheet" href="~/css/sideBarStyleV2.css" />
+<link rel="stylesheet" href="~/css/siteV6.css" asp-append-version="true" />
 <link rel="stylesheet" href="~/css/spinner.css" />
 <link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
 <link href="~/lib/font-awesome/css/all.min.css" rel="stylesheet" />
diff --git a/CPRNIMS.WebApps/wwwroot/JsFunctions/Account/loginV4.js b/CPRNIMS.WebApps/wwwroot/JsFunctions/Account/loginV5.js
similarity index 91%
rename from CPRNIMS.WebApps/wwwroot/JsFunctions/Account/loginV4.js
rename to CPRNIMS.WebApps/wwwroot/JsFunctions/Account/loginV5.js
index 29ad721..d34b52e 100644
--- a/CPRNIMS.WebApps/wwwroot/JsFunctions/Account/loginV4.js
+++ b/CPRNIMS.WebApps/wwwroot/JsFunctions/Account/loginV5.js
@@ -143,21 +143,36 @@ function refreshCaptcha() {
     captchaImage.src = `/Home/GetCaptcha?ts=${new Date().getTime()}`; // Cache-busting query
 }
 
-document.getElementById('togglePassword').addEventListener('click', function () {
-    const passwordInput = document.getElementById('PasswordLogin');
-    const icon = this;
+// Password visibility toggle
+function togglePasswordVisibility() {
+    const input = document.getElementById('PasswordLogin');
+    const icon = document.getElementById('togglePassword');
+    const isHidden = input.type === 'password';
+    input.type = isHidden ? 'text' : 'password';
+    icon.classList.toggle('fa-eye', !isHidden);
+    icon.classList.toggle('fa-eye-slash', isHidden);
+    icon.style.color = isHidden ? '#00897b' : '#9ca3af';
+}
 
-    if (passwordInput.type === 'password') {
-        passwordInput.type = 'text';
-        icon.classList.remove('fa-eye');
-        icon.classList.add('fa-eye-slash');
+// Call this at the START of your login() function
+function setLoginLoading(loading) {
+    const btn = document.getElementById('BtnLogin');
+    const icon = document.getElementById('btnIcon');
+    const text = document.getElementById('btnText');
+
+    if (loading) {
+        btn.disabled = true;
+        icon.className = '';          // remove fa classes
+        icon.innerHTML = '<span class="lp-spinner"></span>';
+        text.textContent = 'Signing in...';
     } else {
-        passwordInput.type = 'password';
-        icon.classList.remove('fa-eye-slash');
-        icon.classList.add('fa-eye');
+        btn.disabled = false;
+        icon.innerHTML = '';
+        icon.className = 'fas fa-sign-in-alt';
+        icon.style.marginRight = '8px';
+        text.textContent = 'Sign In';
     }
-});
-
+}
 function validateCaptCha(captchaCode) {
     return new Promise((resolve, reject) => {
         var loader = $('#overlay, #loader');
@@ -177,6 +192,7 @@ function validateCaptCha(captchaCode) {
                 } else {
                     showToast('error', 'Invalid CAPTCHA. Please try again!','Login failed!',4000);
                     reject(false); 
+                    setLoginLoading(false); 
                 }
             },
             error: errorHandler
@@ -233,6 +249,8 @@ function addErrorClass(input, message = '') {
 
 function login() {
     var loader = $('#overlay, #loader').css('z-index', 1090);
+    setLoginLoading(true); 
+
     const userNameInput = document.getElementById('UserNameLogin');
     const passwordInput = document.getElementById('PasswordLogin');
     const captchaCodeInput = document.getElementById('captchaCode');
@@ -257,22 +275,25 @@ function login() {
     if (!UserName) {
         addErrorClass(userNameInput, 'Username is required');
         hasErrors = true;
+        setLoginLoading(false); 
     }
 
     if (!Password) {
         addErrorClass(passwordInput, 'Password is required');
         hasErrors = true;
+        setLoginLoading(false); 
     }
 
     if (!captchaCode) {
         addErrorClass(captchaCodeInput, 'Security verification is required');
         hasErrors = true;
+        setLoginLoading(false); 
     }
 
     // If there are validation errors, show toast and return
     if (hasErrors) {
         showToast('warning', 'Please fill all required fields!', 'Login failed!', 4000);
-
+        setLoginLoading(false); 
         // Focus on the first error field
         if (!UserName) {
             userNameInput.focus();
@@ -326,11 +347,13 @@ function login() {
                             addErrorClass(passwordInput);
                         }
                     }
+                    setLoginLoading(false); 
                 },
                 error: function (xhr, status, error) {
                     errorHandler(xhr, status, error);
                     addErrorClass(userNameInput);
                     addErrorClass(passwordInput);
+                    setLoginLoading(false); 
                 }
             });
         })
diff --git a/CPRNIMS.WebApps/wwwroot/JsFunctions/Items/ItemManagementV8.js b/CPRNIMS.WebApps/wwwroot/JsFunctions/Items/ItemManagementV9.js
similarity index 97%
rename from CPRNIMS.WebApps/wwwroot/JsFunctions/Items/ItemManagementV8.js
rename to CPRNIMS.WebApps/wwwroot/JsFunctions/Items/ItemManagementV9.js
index a868191..6011c20 100644
--- a/CPRNIMS.WebApps/wwwroot/JsFunctions/Items/ItemManagementV8.js
+++ b/CPRNIMS.WebApps/wwwroot/JsFunctions/Items/ItemManagementV9.js
@@ -64,7 +64,9 @@ $(document).ready(function () {
             },
             dataSrc: function (json) {
                 return json.data;   // ← extract data array here
-            }
+            },
+            beforeSend: function () { loader.show(); },
+            complete: function () { loader.hide(); },
         },
 
         columns: [
diff --git a/CPRNIMS.WebApps/wwwroot/JsFunctions/PO/CustomPOV7.js b/CPRNIMS.WebApps/wwwroot/JsFunctions/PO/CustomPOV8.js
similarity index 99%
rename from CPRNIMS.WebApps/wwwroot/JsFunctions/PO/CustomPOV7.js
rename to CPRNIMS.WebApps/wwwroot/JsFunctions/PO/CustomPOV8.js
index 933dcfa..a677398 100644
--- a/CPRNIMS.WebApps/wwwroot/JsFunctions/PO/CustomPOV7.js
+++ b/CPRNIMS.WebApps/wwwroot/JsFunctions/PO/CustomPOV8.js
@@ -122,8 +122,8 @@ async function fetchAndPopulatePOFormData(poType, poId = null) {
     });
 }
 function enablePONoAutocomplete() {
-    poDataTable.clear().draw();
-
+    
+    clearCustomTable();
     document.getElementById('customPOHeading').innerHTML = 'Custom P.O. Modification';
     customFormPOElemComponent(4);
     document.getElementById("poNo").removeAttribute("readonly");
@@ -132,6 +132,9 @@ function enablePONoAutocomplete() {
     document.getElementById("poType").value = "0";
     popPONo();
 }
+function clearCustomTable() {
+    poDataTable.clear().draw();
+} 
 // =====================================================================
 // UTILITIES
 // =====================================================================
diff --git a/CPRNIMS.WebApps/wwwroot/JsFunctions/PR/DetailedPRTrackingV8.js b/CPRNIMS.WebApps/wwwroot/JsFunctions/PR/DetailedPRTrackingV9.js
similarity index 99%
rename from CPRNIMS.WebApps/wwwroot/JsFunctions/PR/DetailedPRTrackingV8.js
rename to CPRNIMS.WebApps/wwwroot/JsFunctions/PR/DetailedPRTrackingV9.js
index 5f5a683..e1223b9 100644
--- a/CPRNIMS.WebApps/wwwroot/JsFunctions/PR/DetailedPRTrackingV8.js
+++ b/CPRNIMS.WebApps/wwwroot/JsFunctions/PR/DetailedPRTrackingV9.js
@@ -6,6 +6,7 @@
         serverSide: true,
         processing: true,
         searching: false,
+        ordering: false,
         ajax: {
             url: endpoint.GetDetailedPRTracking,
             type: 'GET',
diff --git a/CPRNIMS.WebApps/wwwroot/JsFunctions/PR/PR.js b/CPRNIMS.WebApps/wwwroot/JsFunctions/PR/PRV2.js
similarity index 100%
rename from CPRNIMS.WebApps/wwwroot/JsFunctions/PR/PR.js
rename to CPRNIMS.WebApps/wwwroot/JsFunctions/PR/PRV2.js
diff --git a/CPRNIMS.WebApps/wwwroot/css/LoginPageInteractive.css b/CPRNIMS.WebApps/wwwroot/css/LoginPageInteractive.css
new file mode 100644
index 0000000..446532f
--- /dev/null
+++ b/CPRNIMS.WebApps/wwwroot/css/LoginPageInteractive.css
@@ -0,0 +1,1171 @@
+@import url('poppins.css');
+/* CSS Variables */
+:root {
+    --primary-color: #0891b2;
+    --primary-hover: #0e7490;
+    --secondary-color: #06b6d4;
+    --accent-color: #67e8f9;
+    --dark-color: #0f172a;
+    --light-gray: #f8fafc;
+    --border-color: #e2e8f0;
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+    --success-color: #10b981;
+    --error-color: #ef4444;
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0px);
+    }
+
+    50% {
+        transform: translateY(-20px);
+    }
+}
+/* Ensure html and body have no offsets */
+.login-page-wrapper {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    background: linear-gradient(270deg, #0097a7, #00acc1, #26c6da, #4dd0e1, #26c6da, #00acc1, #0097a7) !important;
+    background-size: 300% 300% !important;
+    animation: bgShimmer 8s ease infinite !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 20px !important;
+    box-sizing: border-box !important;
+    z-index: 9999 !important;
+    overflow: hidden !important;
+    margin: 0 !important;
+}
+    .login-page-wrapper .lp-orb:nth-child(1) {
+        width: 300px;
+        height: 300px;
+        top: -80px;
+        left: -80px;
+        animation-duration: 18s;
+        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), rgba(77,208,225,0.05));
+    }
+
+    .login-page-wrapper .lp-orb:nth-child(2) {
+        width: 200px;
+        height: 200px;
+        bottom: 5%;
+        left: 15%;
+        animation-duration: 14s;
+        animation-delay: -4s;
+        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), rgba(0,188,212,0.04));
+    }
+
+    .login-page-wrapper .lp-orb:nth-child(3) {
+        width: 150px;
+        height: 150px;
+        top: 20%;
+        right: 5%;
+        animation-duration: 10s;
+        animation-delay: -7s;
+        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10), rgba(77,208,225,0.03));
+    }
+
+    .login-page-wrapper .lp-orb:nth-child(4) {
+        width: 80px;
+        height: 80px;
+        bottom: 10%;
+        right: 15%;
+        animation-duration: 8s;
+        animation-delay: -2s;
+        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.14), rgba(0,172,193,0.04));
+    }
+
+.login-main-container {
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: stretch !important;
+    width: 100% !important;
+    max-width: min(1200px, calc(100vw - 40px)) !important;
+    height: min(90vh, 800px) !important;
+    border-radius: 20px !important;
+    overflow: hidden !important;
+    box-shadow: 0 32px 64px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.1) !important;
+    animation: cardIn 0.7s cubic-bezier(0.22,1,0.36,1) both !important;
+}
+.lp-wrap {
+    min-height: 500px;
+    background: linear-gradient(135deg, #0097a7 0%, #00acc1 30%, #26c6da 60%, #4dd0e1 100%);
+    background-size: 300% 300%;
+    animation: bgShimmer 8s ease infinite;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    position: relative;
+    overflow: hidden;
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    border-radius: 12px;
+}
+.login-page-wrapper::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
+    background-size: 30px 30px;
+    pointer-events: none;
+    z-index: 0;
+}
+.login-page-wrapper::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 60%, transparent 100%);
+    animation: sweep 6s ease-in-out infinite;
+    pointer-events: none;
+    z-index: 0;
+}
+
+@keyframes bgShimmer {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+/* Floating orbs - blend with cyan theme */
+.lp-orb {
+    position: absolute;
+    border-radius: 50%;
+    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.22), rgba(0,188,212,0.06));
+    border: 1px solid rgba(255,255,255,0.18);
+    animation: orbFloat linear infinite;
+    pointer-events: none;
+}
+
+    .lp-orb:nth-child(1) {
+        width: 200px;
+        height: 200px;
+        top: -60px;
+        left: -60px;
+        animation-duration: 18s;
+    }
+
+    .lp-orb:nth-child(2) {
+        width: 140px;
+        height: 140px;
+        bottom: 20px;
+        left: 20%;
+        animation-duration: 14s;
+        animation-delay: -4s;
+    }
+
+    .lp-orb:nth-child(3) {
+        width: 100px;
+        height: 100px;
+        top: 30%;
+        right: 5%;
+        animation-duration: 10s;
+        animation-delay: -7s;
+    }
+
+    .lp-orb:nth-child(4) {
+        width: 60px;
+        height: 60px;
+        bottom: 15%;
+        right: 20%;
+        animation-duration: 8s;
+        animation-delay: -2s;
+    }
+
+@keyframes orbFloat {
+    0% {
+        transform: translateY(0) scale(1);
+        opacity: 0.55;
+    }
+
+    50% {
+        transform: translateY(-22px) scale(1.04);
+        opacity: 0.80;
+    }
+
+    100% {
+        transform: translateY(0) scale(1);
+        opacity: 0.55;
+    }
+}
+
+/* Grid dots */
+.lp-wrap::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
+    background-size: 30px 30px;
+    pointer-events: none;
+}
+
+/* Light sweep */
+.lp-wrap::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 60%, transparent 100%);
+    animation: sweep 5s ease-in-out infinite;
+    pointer-events: none;
+}
+
+@keyframes sweep {
+    0% {
+        left: -100%;
+    }
+
+    50% {
+        left: 150%;
+    }
+
+    100% {
+        left: 150%;
+    }
+}
+
+/* Container */
+.lp-card {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: 100%;
+    max-width: 820px;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 32px 64px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.1);
+    animation: cardIn 0.7s cubic-bezier(0.22,1,0.36,1) both;
+}
+
+@keyframes cardIn {
+    from {
+        opacity: 0;
+        transform: translateY(30px) scale(0.97);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* LEFT PANEL — cyan-tinted frosted glass, not black, not flat white */
+.lp-left {
+    flex: 1.1;
+    background: linear-gradient(160deg, rgba(0,131,143,0.35) 0%, rgba(0,172,193,0.25) 100%);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border-right: 1px solid rgba(255,255,255,0.25);
+    padding: 40px 32px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 28px;
+}
+
+/* Animated molecule */
+.lp-molecule {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    animation: molSpin 12s linear infinite;
+}
+
+@keyframes molSpin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Center — warm white with cyan bloom, more dramatic */
+.lp-mol-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 30px;
+    height: 30px;
+    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e0f7fa 60%, #b2ebf2 100%);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 0 0 5px rgba(255,255,255,0.12), 0 0 18px rgba(255,255,255,0.95), 0 0 40px rgba(103,232,249,0.7), 0 0 80px rgba(6,182,212,0.4), 0 0 110px rgba(6,182,212,0.15);
+    animation: centerPulse 2.5s ease-in-out infinite;
+    z-index: 2;
+}
+
+@keyframes pulse {
+    0%,100% {
+        box-shadow: 0 0 20px rgba(103,232,249,0.6);
+    }
+
+    50% {
+        box-shadow: 0 0 35px rgba(103,232,249,0.9), 0 0 60px rgba(103,232,249,0.3);
+    }
+}
+.lp-mol-dot {
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.85);
+    box-shadow: 0 0 8px rgba(255,255,255,0.6), 0 0 16px rgba(255,255,255,0.3);
+}
+    /* Top dot — bright aqua */
+    .lp-mol-dot:nth-child(2) {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 13px;
+        height: 13px;
+        background: radial-gradient(circle at 35% 35%, #67e8f9, #06b6d4);
+        box-shadow: 0 0 10px rgba(103,232,249,0.9), 0 0 22px rgba(6,182,212,0.5);
+    }
+
+    /* Bottom dot — deeper teal */
+    .lp-mol-dot:nth-child(3) {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 11px;
+        height: 11px;
+        background: radial-gradient(circle at 35% 35%, #22d3ee, #0891b2);
+        box-shadow: 0 0 10px rgba(34,211,238,0.85), 0 0 20px rgba(8,145,178,0.45);
+    }
+
+    /* Left dot — sky blue */
+    .lp-mol-dot:nth-child(4) {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 14px;
+        height: 14px;
+        background: radial-gradient(circle at 35% 35%, #a5f3fc, #22d3ee);
+        box-shadow: 0 0 12px rgba(165,243,252,0.9), 0 0 25px rgba(34,211,238,0.5);
+    }
+
+    /* Right dot — electric cyan */
+    .lp-mol-dot:nth-child(5) {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        width: 10px;
+        height: 10px;
+        background: radial-gradient(circle at 35% 35%, #cffafe, #06b6d4);
+        box-shadow: 0 0 8px rgba(207,250,254,0.9), 0 0 18px rgba(6,182,212,0.5);
+    }
+
+.lp-mol-ring {
+    position: absolute;
+    inset: 8px;
+    border-radius: 50%;
+    border: 1.5px dashed rgba(103,232,249,0.55);
+    filter: drop-shadow(0 0 4px rgba(103,232,249,0.45));
+    animation: molSpin 8s linear infinite reverse;
+}
+
+/* Brand */
+.lp-brand {
+    text-align: center;
+    color: white;
+}
+
+.lp-brand-icon {
+    width: 52px;
+    height: 52px;
+    border-radius: 14px;
+    background: rgba(255,255,255,0.22);
+    border: 1px solid rgba(255,255,255,0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 12px;
+    font-size: 22px;
+    backdrop-filter: blur(10px);
+    animation: iconBob 3s ease-in-out infinite;
+}
+@keyframes centerPulse {
+    0%, 100% {
+        box-shadow: 0 0 0 5px rgba(255,255,255,0.12), 0 0 18px rgba(255,255,255,0.95), 0 0 40px rgba(103,232,249,0.7), 0 0 80px rgba(6,182,212,0.4), 0 0 110px rgba(6,182,212,0.15);
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    50% {
+        box-shadow: 0 0 0 8px rgba(255,255,255,0.10), 0 0 28px rgba(255,255,255,1), 0 0 60px rgba(103,232,249,0.85), 0 0 100px rgba(6,182,212,0.55), 0 0 140px rgba(6,182,212,0.2);
+        transform: translate(-50%, -50%) scale(1.14);
+    }
+}
+@keyframes iconBob {
+    0%,100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-4px);
+    }
+}
+
+.lp-brand-name {
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: -0.3px;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
+}
+
+.lp-brand-sub {
+    font-size: 11px;
+    color: rgba(255,255,255,0.85);
+    margin-top: 4px;
+    line-height: 1.4;
+}
+
+/* Feature grid */
+.lp-features {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    width: 100%;
+}
+
+/* Feature tiles */
+.lp-feat {
+    background: rgba(255,255,255,0.14);
+    border: 1px solid rgba(255,255,255,0.28);
+    border-radius: 12px;
+    padding: 12px 10px;
+    text-align: center;
+    color: white;
+    transition: all 0.3s ease;
+    cursor: default;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+}
+    .lp-feat:hover {
+        background: rgba(255,255,255,0.24);
+        transform: translateY(-3px);
+        box-shadow: 0 8px 20px rgba(0,0,0,0.10);
+    }
+
+    .lp-feat i {
+        font-size: 16px;
+        margin-bottom: 5px;
+        display: block;
+    }
+
+    .lp-feat span {
+        font-size: 10px;
+        font-weight: 600;
+        opacity: 0.9;
+    }
+
+/* Stat bar */
+.lp-stats {
+    display: flex;
+    gap: 16px;
+    width: 100%;
+}
+
+/* STAT BOXES — enough white to pop but still glassy */
+.lp-stat {
+    flex: 1;
+    background: rgba(255,255,255,0.18);
+    border-radius: 10px;
+    padding: 10px;
+    text-align: center;
+    color: white;
+    border: 1px solid rgba(255,255,255,0.30);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+
+.lp-stat-num {
+    font-size: 18px;
+    font-weight: 700;
+    color: #ffffff; 
+    text-shadow: 0 0 14px rgba(255,255,255,0.6);
+}
+
+.lp-stat-lbl {
+    font-size: 9px;
+    opacity: 0.85;
+    margin-top: 2px;
+}
+
+/* Right panel */
+.lp-right {
+    flex: 1;
+    background: white;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Form header */
+.lp-form-header {
+    background: linear-gradient(270deg, #0097a7, #00acc1, #26c6da, #00acc1, #0097a7);
+    background-size: 300% 100%;
+    animation: bgShimmer 6s ease infinite;
+    padding: 28px 32px 24px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+    .lp-form-header::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
+        pointer-events: none;
+    }
+
+    .lp-form-header::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 50%;
+        height: 100%;
+        background: linear-gradient(120deg, transparent, rgba(255,255,255,0.12), transparent);
+        animation: sweep 4s ease-in-out infinite;
+    }
+
+.lp-form-title {
+    font-size: 20px;
+    font-weight: 700;
+    color: white;
+    text-shadow: 0 2px 6px rgba(0,0,0,0.15);
+    position: relative;
+    z-index: 1;
+    letter-spacing: -0.3px;
+}
+
+.lp-form-subtitle {
+    font-size: 11px;
+    color: rgba(255,255,255,0.8);
+    margin-top: 4px;
+    position: relative;
+    z-index: 1;
+}
+
+/* Form body */
+.lp-form-body {
+    padding: 28px 32px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 16px;
+}
+
+.lp-field label {
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    color: #374151;
+    margin-bottom: 6px;
+    letter-spacing: 0.3px;
+}
+
+.lp-input-wrap {
+    position: relative;
+    display: block; 
+    width: 100%;
+}
+.lp-left-icon {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    font-size: 14px;
+    pointer-events: none !important; /* never clickable */
+    z-index: 3;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+    /* Left icon — lock, user, shield */
+    .lp-input-wrap > i:first-child {
+        position: absolute;
+        left: 14px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #9ca3af;
+        font-size: 14px;
+        pointer-events: none; /* ← never intercepts clicks */
+        z-index: 2;
+    }
+
+/* Only target the left icon */
+.lp-input-wrap > i:first-of-type {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    font-size: 14px;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.lp-inp {
+    width: 100%;
+    height: 44px;
+    padding: 0 48px 0 42px !important; /* right padding for eye icon */
+    border: 1.5px solid #e5e7eb;
+    border-radius: 10px;
+    font-size: 13px;
+    transition: all 0.3s ease;
+    background: #fafafa;
+    color: #1f2937;
+    outline: none;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1; /* input above wrapper, below icons */
+    display: block;
+}
+
+    .lp-inp:focus {
+        border-color: #00acc1;
+        box-shadow: 0 0 0 4px rgba(0,172,193,0.15);
+    }
+        .lp-inp:focus + i,
+        .lp-input-wrap:focus-within i {
+            color: #00897b;
+        }
+
+/* Captcha row */
+.lp-captcha-row {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.lp-captcha-box {
+    flex: 1;
+    height: 44px;
+    border: 1.5px solid #e5e7eb;
+    border-radius: 10px;
+    background: #e0f7fa;
+    color: #006064;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 6px;
+    font-family: monospace;
+    user-select: none;
+    position: relative;
+    overflow: hidden;
+}
+
+    .lp-captcha-box::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: repeating-linear-gradient( 45deg, transparent, transparent 4px, rgba(0,150,136,0.05) 4px, rgba(0,150,136,0.05) 8px );
+    }
+
+.lp-refresh-btn {
+    width: 44px;
+    height: 44px;
+    border: 1.5px solid #e5e7eb;
+    border-radius: 10px;
+    background: white;
+    color: #00acc1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 14px;
+}
+
+    .lp-refresh-btn:hover {
+        background: #00acc1;
+        color: white;
+        border-color: #00acc1;
+        transform: rotate(180deg);
+    }
+
+/* Forgot */
+.lp-forgot {
+    text-align: right;
+}
+
+    .lp-forgot a {
+        font-size: 12px;
+        color: #0097a7;
+        text-decoration: none;
+        font-weight: 600;
+    }
+
+        .lp-forgot a:hover {
+            text-decoration: underline;
+        }
+
+/* Button */
+.lp-btn {
+    width: 100%;
+    height: 46px;
+    background: linear-gradient(135deg, #0097a7, #26c6da);
+    background-size: 200% 100%;
+    border: none;
+    border-radius: 10px;
+    color: white;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    letter-spacing: 0.3px;
+}
+
+    .lp-btn::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+        transition: left 0.5s;
+    }
+
+    .lp-btn:hover::before {
+        left: 100%;
+    }
+
+    .lp-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 25px rgba(0,105,92,0.35);
+    }
+
+    .lp-btn:active {
+        transform: translateY(0);
+    }
+
+/* Footer */
+.lp-footer {
+    text-align: center;
+    font-size: 10px;
+    color: rgba(255,255,255,0.6);
+    margin-top: 16px;
+    position: relative;
+    z-index: 2;
+    animation: fadeIn 1s ease 0.8s both;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+/* Stagger animations for fields */
+.lp-field:nth-child(1) {
+    animation: slideUp 0.5s ease 0.3s both;
+}
+
+.lp-field:nth-child(2) {
+    animation: slideUp 0.5s ease 0.4s both;
+}
+
+.lp-field:nth-child(3) {
+    animation: slideUp 0.5s ease 0.5s both;
+}
+
+.lp-forgot {
+    animation: slideUp 0.5s ease 0.6s both;
+}
+
+.lp-btn {
+    animation: slideUp 0.5s ease 0.7s both;
+}
+/* Modal Overrides */
+.modal {
+    z-index: 10000 !important;
+}
+
+.modal-backdrop {
+    z-index: 9999 !important;
+}
+
+.modal-content {
+    border: none !important;
+    border-radius: 20px !important;
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15) !important;
+    overflow: hidden !important;
+    font-family: 'Inter', sans-serif !important;
+}
+
+.modal-header {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
+    color: white !important;
+    padding: 24px 32px !important;
+    border-bottom: none !important;
+    margin-top: 0 !important;
+    text-align: center !important;
+}
+
+    .modal-header .title {
+        font-size: 20px !important;
+        font-weight: 600 !important;
+        margin: 0 !important;
+        font-family: 'Inter', sans-serif !important;
+    }
+
+.modal-body {
+    padding: 32px !important;
+}
+
+.modal-footer {
+    padding: 24px 32px !important;
+    border-top: 1px solid var(--border-color) !important;
+}
+
+.btn-primary {
+    background: var(--primary-color) !important;
+    border-color: var(--primary-color) !important;
+    border-radius: 8px !important;
+    font-weight: 500 !important;
+    transition: all 0.3s ease !important;
+    font-family: 'Inter', sans-serif !important;
+}
+
+    .btn-primary:hover {
+        background: var(--primary-hover) !important;
+        border-color: var(--primary-hover) !important;
+        transform: translateY(-1px) !important;
+    }
+
+.btn-secondary {
+    background: var(--light-gray) !important;
+    border-color: var(--border-color) !important;
+    color: var(--text-primary) !important;
+    border-radius: 8px !important;
+    font-weight: 500 !important;
+    font-family: 'Inter', sans-serif !important;
+}
+
+/* Error state styles for login form inputs */
+.login-form-control.error-input {
+    border-color: var(--error-color) !important;
+    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
+    background-color: rgba(239, 68, 68, 0.02) !important;
+}
+
+    .login-form-control.error-input:focus {
+        border-color: var(--error-color) !important;
+        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
+    }
+
+/* Optional: Add a shake animation for better UX */
+@keyframes shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+
+    25% {
+        transform: translateX(-5px);
+    }
+
+    75% {
+        transform: translateX(5px);
+    }
+}
+
+.login-form-control.error-input {
+    animation: shake 0.3s ease-in-out;
+}
+
+/* Error icon styling - change input icon color when there's an error */
+.login-input-wrapper.error .login-input-icon {
+    color: var(--error-color) !important;
+}
+
+/* Optional: Error message styling if you want to add error messages */
+.login-error-message {
+    color: var(--error-color);
+    font-size: 12px;
+    font-weight: 500;
+    margin-top: 6px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-family: 'Inter', sans-serif;
+}
+
+    .login-error-message i {
+        font-size: 14px;
+    }
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(14px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+/* Password toggle eye icon */
+.lp-toggle-pw {
+    position: absolute;
+    right: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px !important; 
+    height: 20px !important;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer !important;
+    pointer-events: all !important;
+    z-index: 3;
+    color: #9ca3af;
+    font-size: 14px;
+    transition: color 0.3s;
+}
+
+    .lp-toggle-pw:hover {
+        color: #00897b;
+    }
+
+/* Password field needs right padding for eye icon */
+.lp-inp.has-toggle {
+    padding-left: 42px !important;
+    padding-right: 42px !important;
+    position: relative;
+    z-index: 1;
+}
+
+/* Button loading state */
+.lp-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.85;
+    transform: none !important;
+    box-shadow: none !important;
+}
+
+.lp-btn .lp-spinner {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(255,255,255,0.4);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spinBtn 0.7s linear infinite;
+    vertical-align: middle;
+    margin-right: 8px;
+}
+
+@keyframes spinBtn {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* ── RESPONSIVE ─────────────────────────────────────────── */
+
+/* Tablet landscape / small laptop */
+@media (max-width: 900px) {
+    .lp-card {
+        flex-direction: column !important;
+        max-width: 480px !important;
+        height: auto !important;
+        max-height: 95vh;
+        overflow-y: auto;
+    }
+
+    .lp-left {
+        padding: 28px 24px !important;
+        gap: 16px !important;
+        border-right: none !important;
+        border-bottom: 1px solid rgba(255,255,255,0.12);
+    }
+
+    .lp-molecule {
+        width: 80px;
+        height: 80px;
+    }
+
+    .lp-stats {
+        gap: 10px;
+    }
+
+    .lp-stat {
+        padding: 8px;
+    }
+
+    .lp-stat-num {
+        font-size: 15px;
+        color: #b2ebf2;
+    }
+
+    .lp-features {
+        gap: 8px;
+    }
+
+    .lp-feat {
+        padding: 10px 8px;
+    }
+
+    .lp-form-header {
+        padding: 20px 24px 16px;
+    }
+
+    .lp-form-body {
+        padding: 20px 24px;
+        gap: 12px;
+    }
+}
+
+/* Mobile landscape / large phone */
+@media (max-width: 600px) {
+    .lp-card {
+        max-width: 100% !important;
+        border-radius: 16px !important;
+        margin: 0 4px;
+    }
+
+    .lp-left {
+        display: none;
+    }
+    /* hide left panel on small phones */
+
+    .lp-right {
+        border-radius: 16px;
+    }
+
+    .lp-form-header {
+        padding: 24px 20px 18px;
+    }
+
+    .lp-form-title {
+        font-size: 18px;
+    }
+
+    .lp-form-body {
+        padding: 20px;
+        gap: 12px;
+    }
+
+    .lp-inp {
+        height: 42px;
+        font-size: 13px;
+    }
+
+    .lp-btn {
+        height: 44px;
+        font-size: 14px;
+    }
+}
+
+/* Very small phones */
+@media (max-width: 380px) {
+    .lp-form-body {
+        padding: 16px;
+    }
+
+    .lp-inp {
+        height: 40px;
+    }
+
+    .lp-btn {
+        height: 42px;
+    }
+}
+
+/* Large desktop — give more room */
+@media (min-width: 1400px) {
+    .lp-card {
+        max-width: 960px;
+    }
+
+    .lp-form-title {
+        font-size: 24px;
+    }
+
+    .lp-inp {
+        height: 50px;
+        font-size: 14px;
+    }
+
+    .lp-btn {
+        height: 52px;
+        font-size: 15px;
+    }
+
+    .lp-brand-name {
+        font-size: 22px;
+    }
+
+    .lp-form-body {
+        padding: 36px 40px;
+        gap: 20px;
+    }
+
+    .lp-form-header {
+        padding: 36px 40px 28px;
+    }
+}
+
+/* Tablet portrait */
+@media (min-width: 601px) and (max-width: 900px) {
+    .lp-left {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-around;
+    }
+
+    .lp-molecule {
+        display: none;
+    }
+
+    .lp-brand {
+        flex: 0 0 100%;
+    }
+
+    .lp-stats {
+        flex: 0 0 45%;
+    }
+
+    .lp-features {
+        flex: 0 0 45%;
+    }
+}
\ No newline at end of file
diff --git a/CPRNIMS.WebApps/wwwroot/css/PR/PRTabs.css b/CPRNIMS.WebApps/wwwroot/css/PR/PRTabsV2.css
similarity index 64%
rename from CPRNIMS.WebApps/wwwroot/css/PR/PRTabs.css
rename to CPRNIMS.WebApps/wwwroot/css/PR/PRTabsV2.css
index 28c3801..e09f138 100644
--- a/CPRNIMS.WebApps/wwwroot/css/PR/PRTabs.css
+++ b/CPRNIMS.WebApps/wwwroot/css/PR/PRTabsV2.css
@@ -1,65 +1,101 @@
-/* Tab Header Container */
-.pr-tabs-header {
-    background: teal;
+.pr-tabs-header {
     border-bottom: 1px solid #00695c;
     margin: -1rem -1rem 0 -1rem;
+    background: linear-gradient( 270deg, #004d40, #00695c, #00897b, #00acc1, #00897b, #00695c, #004d40 );
+    background-size: 300% 100%;
+    animation: gradientShimmer 6s ease infinite;
+    color: white;
     padding: 0;
-    border-radius: 15px 10px 0 0;
+    border-radius: 8px;
+    text-align: center;
+    box-shadow: 0 4px 12px rgba(0, 150, 136, 0.3);
+    position: relative;
+    overflow: visible;
+    min-height: 58px;
 }
-
-/* Tab Navigation */
+    /* Light sweep over the tab header */
+    .pr-tabs-header::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 60%;
+        height: 100%;
+        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.13) 50%, rgba(255,255,255,0.06) 60%, transparent 100% );
+        animation: lightSweep 4s ease-in-out infinite;
+        pointer-events: none;
+        border-radius: 8px;
+        z-index: 0;
+    }
 .pr-tabs-nav {
     display: flex;
     gap: 0;
     align-items: stretch;
     padding: 0;
-
+    min-height: 58px;
+    position: relative;
+    z-index: 1;
 }
 
-/* Individual Tab Button */
 .pr-tab-btn {
     flex: 0 0 auto;
-    padding: 14px 32px;
+    padding: 25px 40px;
     background: transparent;
     border: none;
-    border-bottom: 3px solid transparent;
-    color: white;
+    border-bottom: none;
+    color: rgba(255, 255, 255, 0.9);
     font-size: 15px;
     font-weight: 500;
-    border-radius: 15px 0px 0 0;
+    border-radius: 0;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     letter-spacing: 0.3px;
+    margin: 0;
+    z-index: 2;
 }
-
-    /* Tab Hover State */
     .pr-tab-btn:hover {
         background: rgba(255, 255, 255, 0.15);
         color: white;
+        border-radius: 0;
     }
 
-    /* Active Tab */
     .pr-tab-btn.active {
         background: white;
-        color: teal;
-        font-weight: 600;
-        border-bottom-color: white;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        color: #00695c;
+        font-weight: 800;
+        border-radius: 15px 15px 0 0;
+        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
+        margin: 2px 0 0 8px;
+        padding: 12px 36px 18px 36px;
+        position: relative;
+        z-index: 3; /* above sweep layer */
     }
 
-        /* Active Tab Accent Line */
         .pr-tab-btn.active::before {
-            content: '';
-            position: absolute;
-            bottom: -3px;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: white;
+            display: none;
         }
 
+    .pr-tab-btn:first-child.active {
+        margin-left: 8px;
+    }
+
+
+@keyframes lightSweep {
+    0% {
+        left: -100%;
+    }
+
+    50% {
+        left: 150%;
+    }
+
+    100% {
+        left: 150%;
+    }
+}
+
     /* Loading State */
     .pr-tab-btn.loading {
         pointer-events: none;
@@ -124,15 +160,23 @@
         transform: translateX(-10px);
     }
 
-/* Table Container Adjustments */
 .table-container {
     margin-top: -15px !important;
     overflow: hidden;
+    background: #ffffff;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 20px rgba(0, 150, 136, 0.12);
+    border: 1px solid rgba(0, 150, 136, 0.12);
 }
-
-    /* Ensure table container has proper border radius */
     .table-container.rounded {
-        border-radius: 5px !important;
+        border-radius: 12px !important;
+    }
+
+    .table-container::before {
+        content: '';
+        display: block;
+        height: 4px;
+        background: linear-gradient(135deg, #00695c 0%, #00acc1 100%);
     }
 
 /* Responsive Design */
diff --git a/CPRNIMS.WebApps/wwwroot/css/sideBarStyle.css b/CPRNIMS.WebApps/wwwroot/css/sideBarStyleV2.css
similarity index 56%
rename from CPRNIMS.WebApps/wwwroot/css/sideBarStyle.css
rename to CPRNIMS.WebApps/wwwroot/css/sideBarStyleV2.css
index 4e09660..497d5d5 100644
--- a/CPRNIMS.WebApps/wwwroot/css/sideBarStyle.css
+++ b/CPRNIMS.WebApps/wwwroot/css/sideBarStyleV2.css
@@ -1,4 +1,3 @@
-/* Google Font Link */
 @import url('poppins.css');
 *{
   margin: 0;
@@ -6,19 +5,16 @@
   box-sizing: border-box;
   font-family: "Poppins" , sans-serif;
 }
-/*NewlyAdded*/
-/* Default text color for sub-menu items */
+
 .sidebar .sub-menu li a {
     color: #fff;
     padding-left: 10px;
 }
-
-    /* Change text color to teal on hover */
     .sidebar .sub-menu li a:hover {
-        color: teal;
+        background: rgba(255,255,255,0.1);
+        color: white;
     }
 
-/* Add padding to the sub-menu items to move text to the right */
 .sidebar .sub-menu li a {
     padding-left: 10px;
 }
@@ -32,18 +28,17 @@
     .sidebar .sub-menu.open {
         display: block;
     }
-
-
 .sidebar {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 78px;
-  background: #008080;
-  padding: 6px 14px;
-  z-index: 99;
-  transition: all 0.5s ease;
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 78px;
+    background: linear-gradient(180deg, #004d40 0%, #00695c 40%, #00897b 70%, #00acc1 100%);
+    padding: 6px 14px;
+    z-index: 99;
+    transition: all 0.5s ease;
+    box-shadow: 4px 0 20px rgba(0, 105, 92, 0.4);
 }
 .sidebar.open{
   width: 260px;
@@ -102,29 +97,30 @@
   margin: 8px 0;
   list-style: none;
 }
-.sidebar li .tooltip{
-  position: absolute;
-  top: -20px;
-  left: calc(100% + 15px);
-  z-index: 3;
-  background: #fff;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-  padding: 6px 12px;
-  border-radius: 4px;
-  font-size: 15px;
-  font-weight: 400;
-  opacity: 0;
-  white-space: nowrap;
-  pointer-events: none;
-  transition: 0s;
-}
-.sidebar li:hover .tooltip{
-  opacity: 1;
-  pointer-events: fill;
-  transition: all 0.4s ease;
-  top: 50%;
-  transform: translateY(-50%);
-}
+    .sidebar li .tooltip {
+        position: absolute;
+        top: -20px;
+        left: calc(100% + 15px);
+        z-index: 3;
+        background: linear-gradient(135deg, #00695c, #00acc1);
+        color: white;
+        box-shadow: 0 4px 12px rgba(0,150,136,0.3);
+        padding: 6px 14px;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        opacity: 0;
+        white-space: nowrap;
+        pointer-events: none;
+        transition: 0s;
+    }
+    .sidebar li:hover .tooltip {
+        opacity: 1;
+        pointer-events: fill;
+        transition: all 0.4s ease;
+        top: 50%;
+        transform: translateY(-50%);
+    }
 .sidebar.open li .tooltip{
   display: none;
 }
@@ -162,19 +158,22 @@
   background: #FFF;
   color: #11101d;
 }
-.sidebar li a{
-  display: flex;
-  height: 100%;
-  width: 100%;
-  border-radius: 12px;
-  align-items: center;
-  text-decoration: none;
-  transition: all 0.4s ease;
-  background: #008080;
-}
-.sidebar li a:hover{
-  background: #FFF;
-}
+    .sidebar li a {
+        display: flex;
+        height: 100%;
+        width: 100%;
+        border-radius: 10px;
+        align-items: center;
+        text-decoration: none;
+        transition: all 0.3s ease;
+        background: transparent;
+        padding: 4px 6px;
+    }
+        .sidebar li a:hover {
+            background: rgba(255,255,255,0.15);
+            backdrop-filter: blur(4px);
+            transform: translateX(2px);
+        }
 .sidebar li a .links_name{
   color: #fff;
   font-size: 15px;
@@ -184,32 +183,44 @@
   pointer-events: none;
   transition: 0.4s;
 }
+        .sidebar li a.active {
+            background: rgba(255, 255, 255, 0.2);
+            border-left: 3px solid white;
+        }
 .sidebar.open li a .links_name{
   opacity: 1;
   pointer-events: auto;
 }
-.sidebar li a:hover .links_name,
-.sidebar li a:hover i{
-  transition: all 0.5s ease;
-  color: #11101D;
-}
+    .sidebar li a:hover .links_name,
+    .sidebar li a:hover i {
+        color: #ffffff;
+    }
+    .sidebar li a.active-link {
+        background: rgba(255,255,255,0.2);
+        border-left: 3px solid rgba(255,255,255,0.9);
+        box-shadow: inset 0 0 10px rgba(255,255,255,0.05);
+    }
 .sidebar li i{
   height: 50px;
   line-height: 50px;
   font-size: 18px;
   border-radius: 12px;
 }
-.sidebar li.profile{
-  position: fixed;
-  height: 90px;
-  width: 78px;
-  left: 0;
-  bottom: -8px;
-  padding: 10px 14px;
-  background: #1d1b31;
-  transition: all 0.5s ease;
-  overflow: hidden;
-}
+    .sidebar li.profile {
+        position: fixed;
+        height: 90px;
+        width: 78px;
+        left: 0;
+        bottom: -8px;
+        padding: 10px 14px;
+        background: rgba(0,0,0,0.25);
+        backdrop-filter: blur(8px);
+        border-top: 1px solid rgba(255,255,255,0.1);
+        transition: all 0.5s ease;
+        overflow: hidden;
+        justify-content: center;
+    }
+
 .sidebar.open li.profile{
   width: 260px;
 }
@@ -219,8 +230,8 @@
   flex-wrap: nowrap;
 }
 .sidebar li img{
-  height: 80px;
-  width: 80px;
+  height: 50px;
+  width: 50px;
   object-fit: cover;
   border-radius: 100px;
   margin-right: 20px;
@@ -235,18 +246,18 @@
 .sidebar li.profile .job{
   font-size: 12px;
 }
-.sidebar .profile #log_out{
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  background: #1d1b31;
-  width: 100%;
-  height: 90px;
-  line-height: 60px;
-  border-radius: 0px;
-  transition: all 0.5s ease;
-}
+    .sidebar .profile #log_out {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        background: rgba(0,0,0,0.2);
+        width: 100%;
+        height: 90px;
+        line-height: 60px;
+        border-radius: 0;
+        transition: all 0.5s ease;
+    }
 .sidebar.open .profile #log_out{
   width: 50px;
   background: none;
diff --git a/CPRNIMS.WebApps/wwwroot/css/siteV5.css b/CPRNIMS.WebApps/wwwroot/css/siteV5.css
deleted file mode 100644
index 45d6017..0000000
--- a/CPRNIMS.WebApps/wwwroot/css/siteV5.css
+++ /dev/null
@@ -1,167 +0,0 @@
-html {
-    font-size: 14px;
-    position: relative;
-}
-
-@media (min-width: 768px) {
-  html {
-    font-size: 16px;
-  }
-}
-.form-check-label {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    color: #333;
-    margin-left: 4px;
-}
-.form-group-modern {
-    position: relative;
-    margin-bottom: 1.5rem;
-}
-.form-floating .bi-question-circle {
-    font-size: 1.2rem;
-    color: #6c757d;
-    z-index: 9999 !important; /* higher than modal */
-    font-size: 0.9rem; /* make it cleaner */
-    opacity: 1 !important; /* ensure visible */
-}
-
-    .form-floating .bi-question-circle:hover {
-        color: #0d6efd;
-    }
-
-    .form-group-modern input,
-    .form-group-modern textarea {
-        width: 100%;
-        padding: 10px 10px 10px 5px;
-        border: none;
-        border-bottom: 2px solid #ccc;
-        outline: none;
-        background: transparent;
-        transition: all 0.3s ease;
-    }
-
-        .form-group-modern input:focus,
-        .form-group-modern textarea:focus {
-            border-bottom: 2px solid #00796B; /* teal highlight */
-        }
-
-    .form-group-modern label {
-        position: absolute;
-        top: 10px;
-        left: 5px;
-        font-size: 14px;
-        color: #999;
-        pointer-events: none;
-        transition: 0.3s ease all;
-    }
-
-    .form-group-modern input:focus ~ label,
-    .form-group-modern input:not(:placeholder-shown) ~ label,
-    .form-group-modern textarea:focus ~ label,
-    .form-group-modern textarea:not(:placeholder-shown) ~ label {
-        top: -10px;
-        left: 0;
-        font-size: 12px;
-        color: #00796B;
-    }
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-.modal-content {
-    -webkit-border-radius: 10px !important;
-    -moz-border-radius: 10px !important;
-    border-radius: 10px !important;
-}
-.modal-header {
-    margin-top: -15px !important;
-    background-color: teal;
-    color: white;
-    padding: 10px;
-    border-radius: 5px;
-    text-align: center;
-}
-
-/* Custom CSS to change cart icon color to orange */
-.navbar-nav .fa-shopping-cart {
-    color: green;
-}
-#itemPictureImage {
-    display: block;
-    margin: 0 auto; 
-}
-.table-container {
-    margin: 10px;
-}
-.section-container {
-    margin-bottom: 25px;
-}
-.header-container {
-    margin-top: -65px !important;
-    background-color: teal;
-    color: white;
-    padding: 10px;
-    border-radius: 5px;
-    text-align: center;
-}
-.column-search-container {
-    background-color: #f8f9fa;
-    border-radius: 5px;
-    padding: 10px;
-    margin-bottom: 10px;
-}
-
-.column-search-input {
-    font-size: 0.875rem;
-}
-
-.column-search-container .form-label {
-    margin-bottom: 2px;
-    font-weight: 500;
-    color: #495057;
-}
-thead {
-    background-color: teal;
-    color: white;
-}
-table {
-    border-collapse: separate;
-    border-spacing: 0;
-    border-radius: 10px;
-    overflow: hidden;
-}
-
-thead th:first-child {
-    border-top-left-radius: 8px;
-}
-
-thead th:last-child {
-    border-top-right-radius: 8px;
-}
-
-tbody tr:last-child td:first-child {
-    border-bottom-left-radius: 8px;
-}
-
-tbody tr:last-child td:last-child {
-    border-bottom-right-radius: 8px;
-}
-@media print {
-    * {
-        -webkit-print-color-adjust: exact !important;
-        color-adjust: exact !important;
-        print-color-adjust: exact !important;
-    }
-}
-#itemPictureImage {
-    max-width: 100%;
-    max-height: 350px; /* Adjust height limit to fit your modal */
-    width: auto;
-    height: auto;
-    object-fit: contain; /* Keeps aspect ratio without cropping */
-    border-radius: 15px;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
-}
diff --git a/CPRNIMS.WebApps/wwwroot/css/siteV6.css b/CPRNIMS.WebApps/wwwroot/css/siteV6.css
new file mode 100644
index 0000000..acf13fb
--- /dev/null
+++ b/CPRNIMS.WebApps/wwwroot/css/siteV6.css
@@ -0,0 +1,434 @@
+@media (min-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+}
+/* ─── EXPORT BUTTONS ───────────────────────────────────────── */
+.dt-buttons .btn,
+.dt-button {
+    border-radius: 7px !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    padding: 7px 16px !important;
+    transition: all 0.25s ease !important;
+    border: none !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
+}
+
+    .btn.btn-secondary, .dt-button.btn-secondary {
+        background: linear-gradient(135deg, #546e7a, #78909c) !important;
+        color: white !important;
+    }
+
+    .btn.btn-success, .dt-button.btn-success {
+        background: linear-gradient(135deg, #2e7d32, #43a047) !important;
+        color: white !important;
+    }
+
+    .btn.btn-danger, .dt-button.btn-danger {
+        background: linear-gradient(135deg, #c62828, #e53935) !important;
+        color: white !important;
+    }
+
+    .dt-buttons .btn:hover,
+    .dt-button:hover {
+        transform: translateY(-1px) !important;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
+        filter: brightness(1.08) !important;
+    }
+
+/* ─── SEARCH INPUTS ────────────────────────────────────────── */
+.input-group,
+.form-control,
+select.form-control,
+input.form-control {
+    border-radius: 8px !important;
+    border: 1.5px solid rgba(0, 150, 136, 0.25) !important;
+    transition: all 0.3s ease !important;
+    font-size: 13.5px !important;
+    color: #333 !important;
+}
+
+    .form-control:focus,
+    select.form-control:focus {
+        border-color: #00acc1 !important;
+        box-shadow: 0 0 0 3px rgba(0, 172, 193, 0.12) !important;
+        outline: none !important;
+    }
+
+/* ─── TABLE ROWS ───────────────────────────────────────────── */
+table.dataTable tbody tr {
+    transition: background 0.2s ease;
+}
+/*
+    table.dataTable tbody tr:nth-child(odd) {
+        background-color: #f9fffe !important;
+    }
+
+    table.dataTable tbody tr:nth-child(even) {
+        background-color: #ffffff !important;
+    }
+
+    table.dataTable tbody tr:hover {
+        background-color: #e0f7f5 !important;
+        cursor: pointer;
+    }
+*/
+table.dataTable tbody td {
+    border-bottom: 1px solid rgba(0, 150, 136, 0.08) !important;
+    padding: 12px !important;
+    font-size: 13.5px;
+    color: #2d2d2d;
+    vertical-align: middle;
+}
+
+/* DataTable header gradient */
+table.dataTable thead th {
+    background: linear-gradient(135deg, #00695c 0%, #00acc1 100%) !important;
+    color: white !important;
+    border-bottom: none !important;
+    font-weight: 600;
+    font-size: 13px;
+    letter-spacing: 0.4px;
+    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
+}
+
+    table.dataTable thead th:not(:last-child) {
+        border-right: 1px solid rgba(255,255,255,0.12) !important;
+    }
+
+    /* Sort icons */
+    table.dataTable thead th.sorting::before,
+    table.dataTable thead th.sorting::after,
+    table.dataTable thead th.sorting_asc::before,
+    table.dataTable thead th.sorting_desc::after {
+        color: rgba(255,255,255,0.6) !important;
+        opacity: 1 !important;
+    }
+
+    /* Remove default border between header cells */
+    table.dataTable thead th:not(:last-child) {
+        border-right: 1px solid rgba(255,255,255,0.15) !important;
+    }
+.form-check-label {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    margin-left: 4px;
+}
+.form-group-modern {
+    position: relative;
+    margin-bottom: 1.5rem;
+}
+.form-floating .bi-question-circle {
+    font-size: 1.2rem;
+    color: #6c757d;
+    z-index: 9999 !important; /* higher than modal */
+    font-size: 0.9rem; /* make it cleaner */
+    opacity: 1 !important; /* ensure visible */
+}
+
+    .form-floating .bi-question-circle:hover {
+        color: #0d6efd;
+    }
+
+    .form-group-modern input,
+    .form-group-modern textarea {
+        width: 100%;
+        padding: 10px 10px 10px 5px;
+        border: none;
+        border-bottom: 2px solid #ccc;
+        outline: none;
+        background: transparent;
+        transition: all 0.3s ease;
+    }
+
+        .form-group-modern input:focus,
+        .form-group-modern textarea:focus {
+            border-bottom: 2px solid #00796B; /* teal highlight */
+        }
+
+    .form-group-modern label {
+        position: absolute;
+        top: 10px;
+        left: 5px;
+        font-size: 14px;
+        color: #999;
+        pointer-events: none;
+        transition: 0.3s ease all;
+    }
+
+    .form-group-modern input:focus ~ label,
+    .form-group-modern input:not(:placeholder-shown) ~ label,
+    .form-group-modern textarea:focus ~ label,
+    .form-group-modern textarea:not(:placeholder-shown) ~ label {
+        top: -10px;
+        left: 0;
+        font-size: 12px;
+        color: #00796B;
+    }
+
+.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
+  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+}
+
+.modal-content {
+    -webkit-border-radius: 10px !important;
+    -moz-border-radius: 10px !important;
+    border-radius: 10px !important;
+}
+/* ─── MODAL HEADER ─────────────────────────────────────────── */
+.modal-header {
+    margin-top: -15px !important;
+    background: linear-gradient(135deg, #00695c 0%, #00acc1 100%);
+    color: white;
+    padding: 16px 20px;
+    border-radius: 8px 8px 0 0;
+    text-align: center;
+    box-shadow: 0 4px 15px rgba(0, 150, 136, 0.3);
+    border-bottom: none;
+    position: relative;
+    overflow: hidden;
+}
+
+    .modal-header::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 50%;
+        background: linear-gradient(to bottom, rgba(255,255,255,0.12), transparent);
+        pointer-events: none;
+    }
+
+    .modal-header .modal-title {
+        font-weight: 600;
+        font-size: 1.05rem;
+        letter-spacing: 0.4px;
+        text-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        position: relative;
+        z-index: 1;
+    }
+
+    .modal-header .close,
+    .modal-header .btn-close {
+        color: white !important;
+        opacity: 0.85;
+        text-shadow: none;
+        position: relative;
+        z-index: 1;
+        transition: opacity 0.2s;
+    }
+
+        .modal-header .close:hover,
+        .modal-header .btn-close:hover {
+            opacity: 1;
+        }
+
+
+/* ─── SCROLLBAR ────────────────────────────────────────────── */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f0fdfa;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #00695c, #00acc1);
+    border-radius: 10px;
+}
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: #00897b;
+    }
+/* Custom CSS to change cart icon color to orange */
+.navbar-nav .fa-shopping-cart {
+    color: green;
+}
+
+#itemPictureImage {
+    display: block;
+    margin: 0 auto; 
+}
+
+.section-container {
+    margin-bottom: 25px;
+}
+
+/* header-container for all pages */
+.header-container {
+    margin-top: -65px !important;
+    background: linear-gradient( 270deg, #004d40, #00695c, #00897b, #00acc1, #00897b, #00695c, #004d40 );
+    background-size: 300% 100%;
+    animation: gradientShimmer 6s ease infinite;
+    color: white;
+    padding: 22px 20px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 6px 20px rgba(0, 150, 136, 0.35);
+    position: relative;
+    overflow: hidden;
+}
+
+@keyframes gradientShimmer {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+/* Shining light sweep effect on top of the gradient */
+.header-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 60%;
+    height: 100%;
+    background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 60%, transparent 100% );
+    animation: lightSweep 4s ease-in-out infinite;
+    pointer-events: none;
+}
+
+@keyframes lightSweep {
+    0% {
+        left: -100%;
+    }
+
+    50% {
+        left: 150%;
+    }
+
+    100% {
+        left: 150%;
+    }
+}
+
+/* Keep text crisp above animations */
+.header-container h1,
+.header-container h2,
+.header-container h3,
+.header-container h4,
+.header-container h5,
+.header-container p,
+.header-container span {
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    text-shadow: 0 2px 6px rgba(0,0,0,0.2);
+    position: relative;
+    z-index: 1;
+    margin: 0;
+}
+/* Subtle shine overlay */
+.header-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 50%;
+    background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
+    pointer-events: none;
+}
+
+/* Decorative circle accents */
+.header-container::after {
+    content: '';
+    position: absolute;
+    right: -30px;
+    top: -30px;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.06);
+    pointer-events: none;
+}
+
+.header-container h1,
+.header-container h2,
+.header-container h3,
+.header-container h4,
+.header-container h5,
+.header-container p,
+.header-container span {
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    text-shadow: 0 2px 6px rgba(0,0,0,0.15);
+    position: relative;
+    z-index: 1;
+    margin: 0;
+}
+
+
+.column-search-container {
+    background-color: #f8f9fa;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.column-search-input {
+    font-size: 0.875rem;
+}
+
+.column-search-container .form-label {
+    margin-bottom: 2px;
+    font-weight: 500;
+    color: #495057;
+}
+
+thead {
+    background-color: teal;
+    color: white;
+}
+
+table {
+    border-collapse: separate;
+    border-spacing: 0;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+thead th:first-child {
+    border-top-left-radius: 8px;
+}
+
+thead th:last-child {
+    border-top-right-radius: 8px;
+}
+
+tbody tr:last-child td:first-child {
+    border-bottom-left-radius: 8px;
+}
+
+tbody tr:last-child td:last-child {
+    border-bottom-right-radius: 8px;
+}
+@media print {
+    * {
+        -webkit-print-color-adjust: exact !important;
+        color-adjust: exact !important;
+        print-color-adjust: exact !important;
+    }
+}
+#itemPictureImage {
+    max-width: 100%;
+    max-height: 350px; /* Adjust height limit to fit your modal */
+    width: auto;
+    height: auto;
+    object-fit: contain; /* Keeps aspect ratio without cropping */
+    border-radius: 15px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}