WebSVN – SmartDukaan – Diff – //trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/rbm_call_target.vm

         font-size: 12px;
+    }
 </style>
 <div class="container-fluid">
+    <div class="d-flex align-items-center mb-2">
-    <h3>RBM Call Target Summary</h3>
+        <h3 class="mb-0 mr-3">RBM Call Target Summary</h3>
+        <div class="d-flex align-items-center">
+            <label for="filterDate" class="mb-0 mr-2" style="font-size: 14px; white-space: nowrap;">Date:</label>
+            <input type="date" id="filterDate" class="form-control form-control-sm mr-2" style="width: 150px;"
+                   value="$queryDate">
+            <button type="button" class="btn btn-primary btn-sm" onclick="filterByDate()">Go</button>
+        </div>
+    </div>
     <div class="row">
         <div class="col-md-7">
             <!-- Date-wise Called Partner Filter -->
             <div class="card mb-3" style="max-width: 500px;">
                 <div class="card-body py-2">
                     #else
+                        -
                     #end
                 </td>
                 <td class="agent-status-cell" data-authid="$model.getAuthId()">
+                    #if($isToday)
-                    #if($agentStatus && $agentStatus.getAgentStatus())
+                        #if($agentStatus && $agentStatus.getAgentStatus())
-                        #if($agentStatus.getAgentStatus() == "On Call")
+                            #if($agentStatus.getAgentStatus() == "On Call")
+                                <span class="badge"
-                            <span class="badge" style="background-color: #28a745; color: white;">$agentStatus.getAgentStatus()</span>
+                                      style="background-color: #28a745; color: white;">$agentStatus.getAgentStatus()</span>
-                        #elseif($agentStatus.getAgentStatus() == "Available")
+                            #elseif($agentStatus.getAgentStatus() == "Available")
-                            <span class="badge"
+                                <span class="badge"
-                                  style="background-color: #dc3545; color: white;">$agentStatus.getAgentStatus()</span>
+                                      style="background-color: #dc3545; color: white;">$agentStatus.getAgentStatus()</span>
-                        #elseif($agentStatus.getAgentStatus().toLowerCase().contains("break"))
+                            #elseif($agentStatus.getAgentStatus().toLowerCase().contains("break"))
-                            <span class="badge"
+                                <span class="badge"
-                                  style="background-color: #fd7e14; color: white;">$agentStatus.getAgentStatus()</span>
+                                      style="background-color: #fd7e14; color: white;">$agentStatus.getAgentStatus()</span>
-                        #elseif($agentStatus.getAgentStatus() == "Logged Out")
+                            #elseif($agentStatus.getAgentStatus() == "Logged Out")
-                            <span class="badge"
+                                <span class="badge"
-                                  style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
+                                      style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
-                        #elseif($agentStatus.getAgentStatus() == "Trying")
+                            #elseif($agentStatus.getAgentStatus() == "Trying")
-                            <span class="badge"
+                                <span class="badge"
-                                  style="background-color: #ffc107; color: black;">$agentStatus.getAgentStatus()</span>
+                                      style="background-color: #ffc107; color: black;">$agentStatus.getAgentStatus()</span>
+                            #else
+                                <span class="badge"
+                                      style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
+                            #end
                         #else
-                            <span class="badge" style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
+                            <span class="badge" style="background-color: #6c757d; color: white;">-</span>
                         #end
                     #else
                         <span class="badge" style="background-color: #6c757d; color: white;">-</span>
                     #end
                 </td>
                 <td class="time-in-status-cell" data-authid="$model.getAuthId()">
+                    #if($isToday)
-                    #if($agentStatus && $agentStatus.getTimeInStatus())
+                        #if($agentStatus && $agentStatus.getTimeInStatus())
-                        $agentStatus.getTimeInStatus()
+                            $agentStatus.getTimeInStatus()
+                        #else
+                            -
+                        #end
                     #else
+                        -
                     #end
                 </td>
                 <td style="background-color: #e7f1ff;">
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-                <!-- Tabs Navigation -->
-                <ul class="nav nav-tabs" id="calledModalTabs" role="tablist">
-                    <li class="nav-item">
-                        <a class="nav-link active" id="called-tab" data-toggle="tab" href="#calledTabContent"
-                           role="tab">
-                            Called Partners
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" id="break-time-tab" data-toggle="tab" href="#breakTimeTabContent"
-                           role="tab">
-                            Break Time
-                        </a>
-                    </li>
-                </ul>
-                <!-- Tabs Content -->
-                <div class="tab-content mt-3" id="calledModalTabContent">
-                    <div class="tab-pane fade show active" id="calledTabContent" role="tabpanel">
-                        <div id="calledDetailsContent">
+                <div id="calledDetailsContent">
-                            <p>Loading...</p>
+                    <p>Loading...</p>
-                        </div>
-                    </div>
-                    <div class="tab-pane fade" id="breakTimeTabContent" role="tabpanel">
-                        <div id="breakTimeDetailsContent">
-                            <p>Click on Break Time tab to load data.</p>
-                        </div>
-                    </div>
                 </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
             </div>
         </div>
     </div>
 </div>
 <script type="text/javascript">
+    // Store globally so it persists across AJAX reloads
+    window.pageQueryDate = '$queryDate';
+    var pageQueryDate = window.pageQueryDate;
+    function filterByDate() {
+        var date = document.getElementById('filterDate').value;
+        if (date) {
+            var container = document.getElementById('rbm-call-target-container');
+            if (container) {
+                // Update global date BEFORE AJAX so click handlers use new date
+                window.pageQueryDate = date;
+                // AJAX reload only calling target fragment
+                container.innerHTML = '<div class="text-center p-5"><i class="fa fa-spinner fa-spin fa-2x"></i><br/>Loading...</div>';
+                fetch('/indent/rbm_call_target?date=' + date)
+                        .then(function (response) {
+                            return response.text();
+                        })
+                        .then(function (html) {
+                            container.innerHTML = html;
+                            // Re-run lakh formatting
+                            var elems = container.querySelectorAll('.lakh');
+                            for (var i = 0; i < elems.length; i++) {
+                                var val = parseInt(elems[i].textContent.trim());
+                                if (!isNaN(val)) {
+                                    elems[i].textContent = (val / 100000).toFixed(1) + 'L';
+                                }
+                            }
+                        })
+                        .catch(function () {
+                            container.innerHTML = '<p class="text-danger">Error loading data. Please try again.</p>';
+                        });
+            } else {
+                // Standalone page — full reload
+                window.location.href = '/indent/rbm_call_target?date=' + date;
+            }
+        }
+    }
     // Store current authId and agentName for break time loading
     var currentModalAuthId = null;
     var currentModalDate = null;
     var currentModalAgentName = null;
                     document.getElementById('oosDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
                 });
+    }
     function showCalledPartnerDetails(authId, rbmName) {
+        // Always use current global date (updated after AJAX reload)
+        var currentDate = window.pageQueryDate;
         // Store authId and agentName for break time tab
         currentModalAuthId = authId;
-        currentModalDate = null;
+        currentModalDate = currentDate;
         currentModalAgentName = rbmName;
-        document.getElementById('calledModalLabel').textContent = 'Activity - ' + rbmName;
+        document.getElementById('calledModalLabel').textContent = 'Called Partners - ' + rbmName + ' (' + currentDate + ')';
         document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
-        document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Click to load break time data.</p>';
-        // Reset to Called tab
-        $('#called-tab').tab('show');
         $('#calledModal').modal('show');
+        var dateParam = currentDate ? '&date=' + currentDate : '';
-        fetch('/indent/rbm_call_target/called_details?authId=' + authId + '&agentName=' + encodeURIComponent(rbmName))
+        fetch('/indent/rbm_call_target/called_details?authId=' + authId + '&agentName=' + encodeURIComponent(rbmName) + dateParam)
                 .then(function (response) {
                     return response.json();
                 })
                 .then(function (data) {
+                    // Filter out break log entries — only show actual calls
+                    var calls = (data || []).filter(function (d) {
+                        return !d.breakLog;
+                    });
-                    if (data && data.length > 0) {
+                    if (calls.length > 0) {
                         var html = '<table class="table table-bordered table-sm"><thead><tr><th>S.No</th><th style="width: 200px;">Party Name</th><th>Code</th><th style="width: 350px;">Remark</th><th>Call Status</th><th>Call Duration</th><th>Call Date/Time</th><th>Recording</th></tr></thead><tbody>';
-                        for (var i = 0; i < data.length; i++) {
+                        for (var i = 0; i < calls.length; i++) {
-                            var rowStyle = '';
                             var recordingHtml = '-';
-                            // Check if this is a break log entry
-                            if (data[i].breakLog) {
-                                var status = (data[i].breakStatus || '').toLowerCase();
-                                if (status.indexOf('available') >= 0) {
-                                    rowStyle = 'style="background-color: #f8d7da; color: #721c24;"'; // Light red
-                                } else if (status.indexOf('trying') >= 0) {
-                                    rowStyle = 'style="background-color: #fff3cd; color: #856404;"'; // Light yellow
-                                } else if (status.indexOf('logged out') >= 0 || status.indexOf('logout') >= 0) {
-                                    rowStyle = 'style="background-color: #e2e3e5; color: #383d41;"'; // Light grey
-                                } else if (status.indexOf('break') >= 0) {
-                                    rowStyle = 'style="background-color: #ffe5cc; color: #c45200;"'; // Light orange
-                                } else {
-                                    rowStyle = 'style="background-color: #f8f9fa; color: #333;"'; // Default light
-                                }
-                                var timeRange = data[i].callDateTime || '-';
-                                if (data[i].breakEndTime) {
-                                    // Extract just the time part from callDateTime and show range
-                                    var startTime = timeRange.split(' ').slice(-2).join(' '); // Get "hh:mm AM/PM"
-                                    timeRange = startTime + ' to ' + data[i].breakEndTime;
-                                }
-                                html += '<tr ' + rowStyle + '><td>' + (i + 1) + '</td><td colspan="4"><i class="fa fa-coffee"></i> ' + (data[i].breakStatus || 'On Break') + '</td><td>' + (data[i].callDuration || '-') + '</td><td>' + timeRange + '</td><td>-</td></tr>';
-                            } else {
-                                if (data[i].recordingUrl) {
+                            if (calls[i].recordingUrl) {
-                                    recordingHtml = '<audio controls style="width: 150px; height: 30px;"><source src="' + data[i].recordingUrl + '" type="audio/mpeg">Your browser does not support audio.</audio>';
+                                recordingHtml = '<audio controls style="width: 150px; height: 30px;"><source src="' + calls[i].recordingUrl + '" type="audio/mpeg">Your browser does not support audio.</audio>';
-                                }
-                                html += '<tr><td>' + (i + 1) + '</td><td>' + data[i].partyName + '</td><td>' + data[i].code + '</td><td>' + data[i].remark + '- &nbsp;' + (data[i].message || '-') + '</td><td>' + (data[i].callStatus || '-') + '</td><td>' + (data[i].callDuration || '-') + '</td><td>' + (data[i].callDateTime || '-') + '</td><td>' + recordingHtml + '</td></tr>';
+                            }
+                            html += '<tr><td>' + (i + 1) + '</td><td>' + calls[i].partyName + '</td><td>' + calls[i].code + '</td><td>' + calls[i].remark + '- &nbsp;' + (calls[i].message || '-') + '</td><td>' + (calls[i].callStatus || '-') + '</td><td>' + (calls[i].callDuration || '-') + '</td><td>' + (calls[i].callDateTime || '-') + '</td><td>' + recordingHtml + '</td></tr>';
+                        }
                         html += '</tbody></table>';
                         document.getElementById('calledDetailsContent').innerHTML = html;
                     } else {
                         document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found.</p>';
                 .catch(function () {
                     document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
                 });
+    }
-    // Load break time data when tab is clicked
-    document.addEventListener('DOMContentLoaded', function () {
-        var breakTimeTab = document.getElementById('break-time-tab');
-        if (breakTimeTab) {
-            breakTimeTab.addEventListener('shown.bs.tab', loadBreakTimeData);
-            breakTimeTab.addEventListener('click', function () {
-                // For Bootstrap 4 compatibility
-                setTimeout(loadBreakTimeData, 100);
-            });
-        }
-    });
-    function loadBreakTimeData() {
-        if (!currentModalAuthId) {
-            return;
-        }
-        document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Loading break time data...</p>';
-        var url = '/indent/rbm_call_target/break_time_details?authId=' + currentModalAuthId;
-        if (currentModalDate) {
-            url += '&date=' + currentModalDate;
-        }
-        if (currentModalAgentName) {
-            url += '&agentName=' + encodeURIComponent(currentModalAgentName);
-        }
-        fetch(url)
-                .then(function (response) {
-                    return response.json();
-                })
-                .then(function (data) {
-                    var html = '';
-                    // 4 Summary boxes in a row
-                    html += '<div class="row">';
-                    // Available Box - Green
-                    html += '<div class="col-md-3 col-sm-6 mb-3">';
-                    html += '<div class="card text-white bg-success">';
-                    html += '<div class="card-body text-center">';
-                    html += '<h5 class="card-title">Available</h5>';
-                    html += '<h3 class="mb-0">' + (data.totalAvailableTime || '0h 0m 0s') + '</h3>';
-                    html += '<small>(' + (data.availableCount || 0) + ' times)</small>';
-                    html += '</div></div></div>';
-                    // Trying Box - Yellow
-                    html += '<div class="col-md-3 col-sm-6 mb-3">';
-                    html += '<div class="card text-dark bg-warning">';
-                    html += '<div class="card-body text-center">';
-                    html += '<h5 class="card-title">Trying</h5>';
-                    html += '<h3 class="mb-0">' + (data.totalTryingTime || '0h 0m 0s') + '</h3>';
-                    html += '<small>(' + (data.tryingCount || 0) + ' times)</small>';
-                    html += '</div></div></div>';
-                    // Logged Out Box - Red/Grey
-                    html += '<div class="col-md-3 col-sm-6 mb-3">';
-                    html += '<div class="card text-white bg-secondary">';
-                    html += '<div class="card-body text-center">';
-                    html += '<h5 class="card-title">Logged Out</h5>';
-                    html += '<h3 class="mb-0">' + (data.totalLoggedOutTime || '0h 0m 0s') + '</h3>';
-                    html += '<small>(' + (data.loggedOutCount || 0) + ' times)</small>';
-                    html += '</div></div></div>';
-                    // Break Box - Orange
-                    html += '<div class="col-md-3 col-sm-6 mb-3">';
-                    html += '<div class="card text-dark" style="background-color: #fd7e14;">';
-                    html += '<div class="card-body text-center">';
-                    html += '<h5 class="card-title">Break</h5>';
-                    html += '<h3 class="mb-0">' + (data.totalBreakTime || '0h 0m 0s') + '</h3>';
-                    html += '<small>(' + (data.breakCount || 0) + ' times)</small>';
-                    html += '</div></div></div>';
-                    html += '</div>';
-                    // Second row: On Call, Total Login Time, Total On Call Time
-                    html += '<div class="row">';
-                    // On Call Box - Dark Green
-                    html += '<div class="col-md-4 col-sm-6 mb-3">';
-                    html += '<div class="card text-white" style="background-color: #28a745;">';
-                    html += '<div class="card-body text-center">';
-                    html += '<h5 class="card-title"><i class="fa fa-phone"></i> On Call</h5>';
-                    html += '<h3 class="mb-0">' + (data.totalOnCallTime || '0h 0m 0s') + '</h3>';
-                    html += '<small>(From Call Logs)</small>';
-                    html += '</div></div></div>';
-                    // Total Login Time Box - Blue
-                    html += '<div class="col-md-4 col-sm-6 mb-3">';
-                    html += '<div class="card text-white bg-primary">';
-                    html += '<div class="card-body text-center">';
-                    html += '<h5 class="card-title"><i class="fa fa-sign-in-alt"></i> Total Login Time</h5>';
-                    html += '<h3 class="mb-0">' + (data.totalLoginTime || '0h 0m 0s') + '</h3>';
-                    html += '<small>(Available + Trying + Break + On Call)</small>';
-                    html += '</div></div></div>';
-                    // Total Idle Time Box - Red
-                    html += '<div class="col-md-4 col-sm-6 mb-3">';
-                    html += '<div class="card text-white bg-danger">';
-                    html += '<div class="card-body text-center">';
-                    html += '<h5 class="card-title"><i class="fa fa-clock"></i> Total Idle Time</h5>';
-                    html += '<h3 class="mb-0">' + (data.totalAvailableTime || '0h 0m 0s') + '</h3>';
-                    html += '<small>(Available - Not on call)</small>';
-                    html += '</div></div></div>';
-                    html += '</div>';
-                    // Check if no data
-                    if ((data.totalAvailableSeconds || 0) + (data.totalTryingSeconds || 0) +
-                            (data.totalLoggedOutSeconds || 0) + (data.totalBreakSeconds || 0) +
-                            (data.totalOnCallSeconds || 0) === 0) {
-                        html += '<p class="text-muted text-center mt-3">No break time data available for this date.</p>';
-                    }
-                    document.getElementById('breakTimeDetailsContent').innerHTML = html;
-                })
-                .catch(function (err) {
-                    console.error('Error loading break time:', err);
-                    document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Error loading break time data. Please try again.</p>';
-                });
-    }
     // Date-wise Called Partner History
     function showHistoryCalledPartners() {
         var selectedDate = document.getElementById('historyDate').value;
         var selectedRbm = document.getElementById('historyRbm');
+        }
         return '<span class="badge" style="background-color: ' + bgColor + '; color: ' + textColor + ';">' + status + '</span>';
+    }
-    // Refresh every 10 seconds
+    // Refresh every 10 seconds (only for today's view)
+        #if($isToday)
     setInterval(refreshAgentStatus, 10000);
     // Initial refresh after page load
     setTimeout(refreshAgentStatus, 2000);
+        #end
     // Download All Call Data by Date
     function downloadCallData() {
         var selectedDate = document.getElementById('downloadDate').value;
         if (!selectedDate) {

Subversion Repositories SmartDukaan

(root)//trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/rbm_call_target.vm – Rev 36229 → 36234