Changes in Road works dashboard - added physical and financial percentage

src/main/java/com/gcc/commissionerreview/service/WorksService.java

@@ -854,7 +854,7 @@ public class WorksService {
                         "     wd.project_name, " +
                         "     wd.estimation_amount, " +
                         "     wd.est_val_with_oh, " +
-                        "     wd.percentage, " +
+                        "     wd.percentage,wd.financial_percentage, " +
                         "     dm.dept_name, " +
 
                         "     CASE " +

src/main/resources/templates/modules/works/dashboard.html

@@ -73,7 +73,7 @@
 
     /* physical progress css   */
 
-        .physical-progress-table {
+       /*  .physical-progress-table {
             width: 100%;
             border-collapse: collapse;
             table-layout: fixed;
@@ -126,7 +126,7 @@
 
         .physical-progress-table .financial-value {
             width: 12%;
-        }
+        } */
 
 
         .dashboard-content {
@@ -261,6 +261,42 @@
        	background-color: #003366 !important;
        	color: white;
        }
+       
+.physical-progress {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 120px;
+}
+
+.physical-progress-bar-container {
+    flex: 1;
+    height: 8px;
+    background: #f0f1f3;
+    border-radius: 20px;
+    overflow: hidden;
+}
+
+.physical-progress-bar {
+    height: 100%;
+    background: #16c765;
+    border-radius: 20px;
+    transition: width 0.6s ease;
+}
+
+.financial-progress-bar {
+    height: 100%;
+    background: red;
+    border-radius: 20px;
+    transition: width 0.6s ease;
+}
+
+.physical-progress-value {
+    min-width: 40px;
+    font-weight: 600;
+    font-size: 13px;
+    text-align: right;
+}
     </style>
 
 <body>
@@ -1269,7 +1305,7 @@
             <div class="table-responsive">
 
                 <table id="worksTable"
-                       class="table table-bordered table-striped w-100">
+                       class="table table-bordered  w-100">
 
                     <thead class="">
 
@@ -1283,6 +1319,8 @@
                         <th class="text-center">Zone</th>
                         <th class="text-center">Wards</th>
                         <th class="text-center">Estimate Amount</th>
+                        <th class="text-center">Physical %</th>
+                        <th class="text-center">Financial %</th>
                         <th class="text-center">Status</th>
                         <th class="text-center">Action</th>
 
@@ -1406,6 +1444,23 @@
                     }
                 },
                 
+                {
+                    data: 'percentage',
+                    className: 'text-center',
+
+                    render: function (data) {
+                        return getPhysicalProgressBar(data);
+                    }
+                },
+                
+                {
+                    data: 'financial_percentage',
+                    className: 'text-center',
+                    render: function (data) {
+                        return getfinancialProgressBar(data);
+                    }
+                },
+
                 {
                     data: 'status',
                     className: 'text-center',
@@ -1462,6 +1517,66 @@
     });
     
     
+    function getfinancialProgressBar(percentage) {
+
+        const value = Number(percentage || 0);
+
+        const safeValue = Math.max(
+            0,
+            Math.min(value, 100)
+        );
+
+        return `
+            <div class="physical-progress">
+
+                <div class="physical-progress-bar-container">
+
+                    <div
+                        class="financial-progress-bar"
+                        style="width: ${safeValue}%;">
+                    </div>
+
+                </div>
+
+                <div class="physical-progress-value">
+                    ${safeValue}%
+                </div>
+
+            </div>
+        `;
+    }
+    
+    
+    function getPhysicalProgressBar(percentage) {
+
+        const value = Number(percentage || 0);
+
+        const safeValue = Math.max(
+            0,
+            Math.min(value, 100)
+        );
+
+        return `
+            <div class="physical-progress">
+
+                <div class="physical-progress-bar-container">
+
+                    <div
+                        class="physical-progress-bar"
+                        style="width: ${safeValue}%;">
+                    </div>
+
+                </div>
+
+                <div class="physical-progress-value">
+                    ${safeValue}%
+                </div>
+
+            </div>
+        `;
+    }
+    
+    
     function loadFinancialYears() {
 
         $.ajax({