Subversion Repositories SmartDukaan

Rev

Rev 35868 | Rev 35953 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
35631 ranu 1
<style>
2
    #rbm-call-target-table td, #rbm-call-target-table th {
3
        font-size: 14px;
4
        text-align: center;
5
        padding: 0.4rem;
6
        vertical-align: middle;
7
    }
8
 
35852 ranu 9
    .badge {
10
        display: inline-block;
11
        padding: 4px 8px;
12
        font-size: 12px;
13
        font-weight: 600;
14
        border-radius: 4px;
15
    }
16
 
17
    .agent-status-cell, .time-in-status-cell {
18
        min-width: 80px;
19
    }
20
 
35631 ranu 21
    #rbm-call-target-table thead th {
22
        background-color: #343a40;
23
        color: white;
24
        font-weight: 600;
25
    }
26
 
27
    #rbm-call-target-table tbody tr:first-child td {
28
        font-weight: bold;
29
        background-color: #00d6b2;
30
    }
31
 
32
    .highlight-target {
33
        background-color: #fff3cd !important;
34
        font-weight: bold;
35
    }
36
 
37
    .highlight-achieved {
38
        background-color: #d4edda !important;
39
    }
40
 
41
    .highlight-oos {
42
        background-color: #f8d7da !important;
43
    }
44
 
45
    .highlight-plan-today {
46
        background-color: #0f57a4 !important;
47
        color: white !important;
48
    }
49
 
50
    .highlight-carry-forward {
51
        background-color: #ffc107 !important;
52
        color: #000 !important;
53
    }
54
 
55
    .highlight-untouched {
56
        background-color: #dc3545 !important;
57
        color: white !important;
58
    }
59
 
60
    .highlight-future-plan {
61
        background-color: #6c757d !important;
62
        color: #000 !important;
63
    }
64
 
65
    .clickable {
66
        cursor: pointer;
67
        text-decoration: underline;
68
        color: #007bff;
69
    }
70
 
71
    .clickable:hover {
72
        color: #0056b3;
73
    }
74
 
75
    .modal-body table {
76
        width: 100%;
77
    }
78
 
79
    .modal-body table th, .modal-body table td {
80
        padding: 8px;
81
        border: 1px solid #ddd;
82
    }
35654 ranu 83
 
84
    #oosDetailsContent table td, #oosDetailsContent table th {
85
        font-size: 12px;
86
    }
35670 ranu 87
 
88
    #calledDetailsContent table td, #calledDetailsContent table th {
89
        font-size: 12px;
90
    }
35631 ranu 91
</style>
92
 
93
<div class="container-fluid">
94
    <h3>RBM Call Target Summary</h3>
35852 ranu 95
    <div class="row">
96
        <div class="col-md-7">
97
            <!-- Date-wise Called Partner Filter -->
98
            <div class="card mb-3" style="max-width: 500px;">
99
                <div class="card-body py-2">
100
                    <div class="d-flex align-items-center">
101
                        <label for="historyDate" class="mb-0 mr-2"
102
                               style="font-size: 14px; white-space: nowrap;">Date:</label>
103
                        <input type="date" id="historyDate" class="form-control form-control-sm mr-2"
104
                               style="width: 140px;">
105
                        <label for="historyRbm" class="mb-0 mr-2"
106
                               style="font-size: 14px; white-space: nowrap;">RBM:</label>
107
                        <select id="historyRbm" class="form-control form-control-sm mr-2" style="width: 150px;">
108
                            <option value="">Select RBM</option>
109
                            #foreach($model in $rbmCallTargetModels)
110
                                <option value="$model.getAuthId()">$model.getRbmName()</option>
111
                            #end
112
                        </select>
113
                        <button type="button" class="btn btn-primary btn-sm" onclick="showHistoryCalledPartners()">
114
                            View
115
                        </button>
116
                    </div>
117
                </div>
35730 ranu 118
            </div>
119
        </div>
35852 ranu 120
        <div class="col-md-5">
121
            <!-- Download All Call Data by Date -->
122
            <div class="card mb-3" style="max-width: 450px;">
123
                <div class="card-body py-2">
124
                    <div class="d-flex align-items-center">
125
                        <label for="downloadDate" class="mb-0 mr-2" style="font-size: 14px; white-space: nowrap;">Download
126
                            Call Data:</label>
127
                        <input type="date" id="downloadDate" class="form-control form-control-sm mr-2"
128
                               style="width: 140px;">
129
                        <button type="button" class="btn btn-success btn-sm" onclick="downloadCallData()">Download CSV
130
                        </button>
131
                    </div>
132
                </div>
133
            </div>
134
 
135
        </div>
35730 ranu 136
    </div>
137
 
35852 ranu 138
 
35631 ranu 139
    <table id="rbm-call-target-table" class="table table-bordered table-striped">
140
        <thead>
141
        <tr>
142
            <th>RBM Name</th>
35879 ranu 143
            <th style="background-color: #17a2b8; color: white;">Agent Status</th>
144
            <th style="background-color: #17a2b8; color: white;">Time in Status</th>
35631 ranu 145
            <th>Partner Count</th>
35645 ranu 146
            <th>(Ach/Tgt)</th>
35631 ranu 147
            <th>Calling Target</th>
148
            <th>Called</th>
149
            <th class="highlight-plan-today">Plan Today</th>
150
            <th class="highlight-carry-forward">Carry Forward</th>
151
            <th style="background-color: #1e6e0e; color: white;">Zero Billing</th>
152
            <th class="highlight-untouched">Untouched</th>
153
            <th class="highlight-future-plan">Future Plan</th>
154
            <th>Normal</th>
155
            <th style="background-color: #c0392b;">Out of Sequence</th>
35645 ranu 156
            <th>Download</th>
35631 ranu 157
        </tr>
158
        </thead>
159
        <tbody>
160
            #set($totalPartnerCount = 0)
161
            #set($totalTodayTarget = 0)
162
            #set($totalValueAchieved = 0)
163
            #set($totalMovedToFuture = 0)
164
            #set($totalPlanToday = 0)
165
            #set($totalCarryForward = 0)
166
            #set($totalZeroBilling = 0)
167
            #set($totalUntouched = 0)
168
            #set($totalFuturePlan = 0)
169
            #set($totalNormal = 0)
170
            #set($totalOutOfSequence = 0)
171
            #set($totalL2CallingList = 0)
172
            #set($totalArrAchieved = 0)
173
            #set($totalArrTarget = 0)
174
 
175
            ## Total row first
176
            #foreach($model in $rbmCallTargetModels)
35662 ranu 177
                #if(!$model.isL2Position())
178
                    #set($totalPartnerCount = $totalPartnerCount + $model.getPartnerCount())
179
                #end
35631 ranu 180
                #set($totalTodayTarget = $totalTodayTarget + $model.getTodayTargetOfCall())
181
                #set($totalValueAchieved = $totalValueAchieved + $model.getValueTargetAchieved())
182
                #set($totalMovedToFuture = $totalMovedToFuture + $model.getMovedToFuture())
183
                #set($totalPlanToday = $totalPlanToday + $model.getPlanToday())
184
                #set($totalCarryForward = $totalCarryForward + $model.getCarryForward())
185
                #set($totalZeroBilling = $totalZeroBilling + $model.getZeroBilling())
186
                #set($totalUntouched = $totalUntouched + $model.getUntouched())
187
                #set($totalFuturePlan = $totalFuturePlan + $model.getFuturePlan())
188
                #set($totalNormal = $totalNormal + $model.getNormal())
189
                #set($totalOutOfSequence = $totalOutOfSequence + $model.getOutOfSequenceCount())
190
                #set($totalL2CallingList = $totalL2CallingList + $model.getL2CallingList())
191
                #if($arrAchievedByAuthId && $arrAchievedByAuthId.get($model.getAuthId()))
192
                    #set($totalArrAchieved = $totalArrAchieved + $arrAchievedByAuthId.get($model.getAuthId()))
193
                #end
194
                #if($arrTargetByAuthId && $arrTargetByAuthId.get($model.getAuthId()))
195
                    #set($totalArrTarget = $totalArrTarget + $arrTargetByAuthId.get($model.getAuthId()))
196
                #end
197
            #end
198
 
199
            #set($adjustedTotalTarget = $totalTodayTarget + $totalMovedToFuture)
200
            #set($adjustedTotalAchieved = $totalValueAchieved + $totalMovedToFuture)
201
 
202
        <tr>
203
            <td><strong>TOTAL</strong></td>
35879 ranu 204
            <td>-</td>
205
            <td>-</td>
35631 ranu 206
            <td><strong>$totalPartnerCount</strong></td>
35636 ranu 207
            <td><strong><span class="lakh">$totalArrAchieved</span> / <span class="lakh">$totalArrTarget</span></strong>
35631 ranu 208
            </td>
209
            <td class="highlight-target"><strong>$adjustedTotalTarget</strong></td>
210
            <td class="highlight-achieved currency"><strong>$adjustedTotalAchieved</strong></td>
211
            <td class="highlight-plan-today"><strong>$totalPlanToday</strong></td>
212
            <td class="highlight-carry-forward"><strong>$totalCarryForward</strong></td>
213
            <td><strong>$totalZeroBilling</strong></td>
214
            <td class="highlight-untouched"><strong>$totalUntouched</strong></td>
215
            <td class="highlight-future-plan"><strong>$totalFuturePlan</strong></td>
216
            <td><strong>$totalNormal</strong></td>
217
            <td class="highlight-oos"><strong>$totalOutOfSequence</strong></td>
35645 ranu 218
            <td></td>
35631 ranu 219
        </tr>
220
 
221
            #foreach($model in $rbmCallTargetModels)
222
                #set($rowTarget = $model.getTodayTargetOfCall() + $model.getMovedToFuture())
223
                #set($rowAchieved = $model.getValueTargetAchieved() + $model.getMovedToFuture())
35852 ranu 224
                #set($agentStatus = $agentStatusByAuthId.get($model.getAuthId()))
35631 ranu 225
            <tr>
226
                <td>$model.getRbmName()</td>
35879 ranu 227
                <td class="agent-status-cell" data-authid="$model.getAuthId()">
35852 ranu 228
                    #if($agentStatus && $agentStatus.getAgentStatus())
229
                        #if($agentStatus.getAgentStatus() == "On Call")
230
                            <span class="badge" style="background-color: #28a745; color: white;">$agentStatus.getAgentStatus()</span>
231
                        #elseif($agentStatus.getAgentStatus() == "Available")
232
                            <span class="badge" style="background-color: #17a2b8; color: white;">$agentStatus.getAgentStatus()</span>
233
                        #elseif($agentStatus.getAgentStatus() == "On Break")
234
                            <span class="badge" style="background-color: #ffc107; color: black;">$agentStatus.getAgentStatus()</span>
235
                        #elseif($agentStatus.getAgentStatus() == "Logged Out")
236
                            <span class="badge" style="background-color: #dc3545; color: white;">$agentStatus.getAgentStatus()</span>
237
                        #elseif($agentStatus.getAgentStatus() == "Trying")
238
                            <span class="badge" style="background-color: #fd7e14; color: white;">$agentStatus.getAgentStatus()</span>
239
                        #else
240
                            <span class="badge" style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
241
                        #end
242
                    #else
243
                        <span class="badge" style="background-color: #6c757d; color: white;">-</span>
244
                    #end
245
                </td>
246
                <td class="time-in-status-cell" data-authid="$model.getAuthId()">
247
                    #if($agentStatus && $agentStatus.getTimeInStatus())
248
                        $agentStatus.getTimeInStatus()
249
                    #else
250
                        -
251
                    #end
35879 ranu 252
                </td>
35631 ranu 253
                <td>$model.getPartnerCount()</td>
254
                <td>
255
                    #if($arrAchievedByAuthId && $arrAchievedByAuthId.get($model.getAuthId()))
35636 ranu 256
                        <span class="lakh">$arrAchievedByAuthId.get($model.getAuthId())</span>
35631 ranu 257
                    #else
258
 
259
                    #end
260
                    /
261
                    #if($arrTargetByAuthId && $arrTargetByAuthId.get($model.getAuthId()))
35636 ranu 262
                        <span class="lakh">$arrTargetByAuthId.get($model.getAuthId())</span>
35631 ranu 263
                    #else
264
 
265
                    #end
266
                </td>
267
                <td class="highlight-target">$rowTarget</td>
35670 ranu 268
                <td class="highlight-achieved currency">
269
                    #if($rowAchieved > 0)
270
                        <span class="clickable"
271
                              onclick="showCalledPartnerDetails($model.getAuthId(), '$model.getRbmName()')">$rowAchieved</span>
272
                    #else
273
                        $rowAchieved
274
                    #end
275
                </td>
35631 ranu 276
                <td class="highlight-plan-today">$model.getPlanToday()</td>
277
                <td class="highlight-carry-forward">$model.getCarryForward()</td>
278
                <td>$model.getZeroBilling()</td>
279
                <td class="highlight-untouched">$model.getUntouched()</td>
280
                <td class="highlight-future-plan">$model.getFuturePlan()</td>
281
                <td>$model.getNormal()</td>
282
                <td class="highlight-oos" style="color: red;">
283
                    #if($model.getOutOfSequenceCount() > 0)
284
                        <span class="clickable" style="color: #e80404"
285
                              onclick="showOutOfSequenceDetails($model.getAuthId(), '$model.getRbmName()')">$model.getOutOfSequenceCount()</span>
286
                    #else
287
 
288
                    #end
289
                </td>
35645 ranu 290
                <td>
291
                    <a href="/indent/rbm_call_target/download_raw_data?authId=$model.getAuthId()" target="_blank"
292
                       class="btn btn-sm btn-outline-success">CSV</a>
293
                </td>
35631 ranu 294
            </tr>
295
            #end
296
        </tbody>
297
    </table>
298
</div>
299
 
300
<script type="text/javascript">
35638 ranu 301
    document.addEventListener('DOMContentLoaded', function () {
302
        var elems = document.querySelectorAll('.lakh');
303
        for (var i = 0; i < elems.length; i++) {
304
            var val = parseInt(elems[i].textContent.trim());
35636 ranu 305
            if (!isNaN(val)) {
35638 ranu 306
                elems[i].textContent = (val / 100000).toFixed(1) + 'L';
35636 ranu 307
            }
35638 ranu 308
        }
35636 ranu 309
    });
310
 
35631 ranu 311
    function showOutOfSequenceDetails(authId, rbmName) {
312
        document.getElementById('oosModalLabel').textContent = 'Out of Sequence Calls - ' + rbmName;
313
        document.getElementById('oosDetailsContent').innerHTML = '<p>Loading...</p>';
314
        $('#oosModal').modal('show');
315
 
316
        fetch('/indent/rbm_call_target/oos_details?authId=' + authId)
317
                .then(function (response) {
318
                    return response.json();
319
                })
320
                .then(function (data) {
321
                    if (data && data.length > 0) {
322
                        var html = '<table class="table table-bordered table-sm"><thead><tr><th>S.No</th><th>Party Name</th><th>Code</th><th>Time</th></tr></thead><tbody>';
323
                        for (var i = 0; i < data.length; i++) {
324
                            html += '<tr><td>' + (i + 1) + '</td><td>' + data[i].partyName + '</td><td>' + data[i].code + '</td><td>' + data[i].time + '</td></tr>';
325
                        }
326
                        html += '</tbody></table>';
327
                        document.getElementById('oosDetailsContent').innerHTML = html;
328
                    } else {
329
                        document.getElementById('oosDetailsContent').innerHTML = '<p>No out of sequence calls found.</p>';
330
                    }
331
                })
332
                .catch(function () {
333
                    document.getElementById('oosDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
334
                });
335
    }
35670 ranu 336
 
337
    function showCalledPartnerDetails(authId, rbmName) {
338
        document.getElementById('calledModalLabel').textContent = 'Called Partners - ' + rbmName;
339
        document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
340
        $('#calledModal').modal('show');
341
 
342
        fetch('/indent/rbm_call_target/called_details?authId=' + authId)
343
                .then(function (response) {
344
                    return response.json();
345
                })
346
                .then(function (data) {
347
                    if (data && data.length > 0) {
35763 ranu 348
                        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>';
35670 ranu 349
                        for (var i = 0; i < data.length; i++) {
35703 ranu 350
                            var recordingHtml = '-';
351
                            if (data[i].recordingUrl) {
35731 ranu 352
                                recordingHtml = '<audio controls style="width: 150px; height: 30px;"><source src="' + data[i].recordingUrl + '" type="audio/mpeg">Your browser does not support audio.</audio>';
35703 ranu 353
                            }
35763 ranu 354
                            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>';
35670 ranu 355
                        }
356
                        html += '</tbody></table>';
357
                        document.getElementById('calledDetailsContent').innerHTML = html;
358
                    } else {
359
                        document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found.</p>';
360
                    }
361
                })
362
                .catch(function () {
363
                    document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
364
                });
365
    }
35730 ranu 366
 
367
    // Date-wise Called Partner History
368
    function showHistoryCalledPartners() {
369
        var selectedDate = document.getElementById('historyDate').value;
370
        var selectedRbm = document.getElementById('historyRbm');
371
        var authId = selectedRbm.value;
372
        var rbmName = selectedRbm.options[selectedRbm.selectedIndex].text;
373
 
374
        if (!selectedDate) {
375
            alert('Please select a date');
376
            return;
377
        }
378
        if (!authId) {
379
            alert('Please select an RBM');
380
            return;
381
        }
382
 
383
        document.getElementById('calledModalLabel').textContent = 'Called Partners - ' + rbmName + ' (' + selectedDate + ')';
384
        document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
385
        $('#calledModal').modal('show');
386
 
387
        fetch('/indent/rbm_call_target/called_details?authId=' + authId + '&date=' + selectedDate)
388
                .then(function (response) {
389
                    return response.json();
390
                })
391
                .then(function (data) {
392
                    if (data && data.length > 0) {
35763 ranu 393
                        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>';
35730 ranu 394
                        for (var i = 0; i < data.length; i++) {
395
                            var recordingHtml = '-';
396
                            if (data[i].recordingUrl) {
35731 ranu 397
                                recordingHtml = '<audio controls style="width: 150px; height: 30px;"><source src="' + data[i].recordingUrl + '" type="audio/mpeg">Your browser does not support audio.</audio>';
35730 ranu 398
                            }
35763 ranu 399
                            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>';
35730 ranu 400
                        }
401
                        html += '</tbody></table>';
402
                        document.getElementById('calledDetailsContent').innerHTML = html;
403
                    } else {
404
                        document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found for selected date.</p>';
405
                    }
406
                })
407
                .catch(function () {
408
                    document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
409
                });
410
    }
35852 ranu 411
 
412
    // Auto-refresh agent status every 30 seconds
413
    function refreshAgentStatus() {
414
        fetch('/indent/rbm_call_target/get_agent_statuses')
35879 ranu 415
                .then(function (response) {
416
                    return response.json();
417
                })
418
                .then(function (data) {
419
                    if (data && data.length > 0) {
420
                        for (var i = 0; i < data.length; i++) {
421
                            var agent = data[i];
422
                            var statusCell = document.querySelector('.agent-status-cell[data-authid="' + agent.authId + '"]');
423
                            var timeCell = document.querySelector('.time-in-status-cell[data-authid="' + agent.authId + '"]');
35852 ranu 424
 
35879 ranu 425
                            if (statusCell) {
426
                                var statusHtml = getStatusBadge(agent.agentStatus);
427
                                statusCell.innerHTML = statusHtml;
428
                            }
429
                            if (timeCell) {
430
                                timeCell.textContent = agent.timeInStatus || '-';
431
                            }
35852 ranu 432
                        }
433
                    }
35879 ranu 434
                })
435
                .catch(function (err) {
436
                    console.error('Error refreshing agent status:', err);
437
                });
35852 ranu 438
    }
439
 
440
    function getStatusBadge(status) {
441
        if (!status) return '<span class="badge" style="background-color: #6c757d; color: white;">-</span>';
442
 
443
        var bgColor = '#6c757d';
444
        var textColor = 'white';
445
 
446
        if (status === 'On Call') {
447
            bgColor = '#28a745';
448
        } else if (status === 'Available') {
449
            bgColor = '#17a2b8';
450
        } else if (status === 'On Break') {
451
            bgColor = '#ffc107';
452
            textColor = 'black';
453
        } else if (status === 'Logged Out') {
454
            bgColor = '#dc3545';
455
        } else if (status === 'Trying') {
456
            bgColor = '#fd7e14';
457
        }
458
 
459
        return '<span class="badge" style="background-color: ' + bgColor + '; color: ' + textColor + ';">' + status + '</span>';
460
    }
461
 
462
    // Refresh every 20 seconds
463
    setInterval(refreshAgentStatus, 20000);
464
 
465
    // Initial refresh after page load
466
    setTimeout(refreshAgentStatus, 2000);
467
 
468
    // Download All Call Data by Date
469
    function downloadCallData() {
470
        var selectedDate = document.getElementById('downloadDate').value;
471
        if (!selectedDate) {
472
            alert('Please select a date');
473
            return;
474
        }
475
        window.location.href = '/indent/rbm_call_target/download_call_data?date=' + selectedDate;
476
    }
35631 ranu 477
</script>