Subversion Repositories SmartDukaan

Rev

Rev 35723 | Rev 35731 | 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
 
9
    #rbm-call-target-table thead th {
10
        background-color: #343a40;
11
        color: white;
12
        font-weight: 600;
13
    }
14
 
15
    #rbm-call-target-table tbody tr:first-child td {
16
        font-weight: bold;
17
        background-color: #00d6b2;
18
    }
19
 
20
    .highlight-target {
21
        background-color: #fff3cd !important;
22
        font-weight: bold;
23
    }
24
 
25
    .highlight-achieved {
26
        background-color: #d4edda !important;
27
    }
28
 
29
    .highlight-oos {
30
        background-color: #f8d7da !important;
31
    }
32
 
33
    .highlight-plan-today {
34
        background-color: #0f57a4 !important;
35
        color: white !important;
36
    }
37
 
38
    .highlight-carry-forward {
39
        background-color: #ffc107 !important;
40
        color: #000 !important;
41
    }
42
 
43
    .highlight-untouched {
44
        background-color: #dc3545 !important;
45
        color: white !important;
46
    }
47
 
48
    .highlight-future-plan {
49
        background-color: #6c757d !important;
50
        color: #000 !important;
51
    }
52
 
53
    .clickable {
54
        cursor: pointer;
55
        text-decoration: underline;
56
        color: #007bff;
57
    }
58
 
59
    .clickable:hover {
60
        color: #0056b3;
61
    }
62
 
63
    .modal-body table {
64
        width: 100%;
65
    }
66
 
67
    .modal-body table th, .modal-body table td {
68
        padding: 8px;
69
        border: 1px solid #ddd;
70
    }
35654 ranu 71
 
72
    #oosDetailsContent table td, #oosDetailsContent table th {
73
        font-size: 12px;
74
    }
35670 ranu 75
 
76
    #calledDetailsContent table td, #calledDetailsContent table th {
77
        font-size: 12px;
78
    }
35631 ranu 79
</style>
80
 
81
<div class="container-fluid">
82
    <h3>RBM Call Target Summary</h3>
35730 ranu 83
 
84
    <!-- Date-wise Called Partner Filter -->
85
    <div class="card mb-3" style="max-width: 500px;">
86
        <div class="card-body py-2">
87
            <div class="d-flex align-items-center">
88
                <label for="historyDate" class="mb-0 mr-2" style="font-size: 14px; white-space: nowrap;">Date:</label>
89
                <input type="date" id="historyDate" class="form-control form-control-sm mr-2" style="width: 140px;">
90
                <label for="historyRbm" class="mb-0 mr-2" style="font-size: 14px; white-space: nowrap;">RBM:</label>
91
                <select id="historyRbm" class="form-control form-control-sm mr-2" style="width: 150px;">
92
                    <option value="">Select RBM</option>
93
                    #foreach($model in $rbmCallTargetModels)
94
                        <option value="$model.getAuthId()">$model.getRbmName()</option>
95
                    #end
96
                </select>
97
                <button type="button" class="btn btn-primary btn-sm" onclick="showHistoryCalledPartners()">View</button>
98
            </div>
99
        </div>
100
    </div>
101
 
35631 ranu 102
    <table id="rbm-call-target-table" class="table table-bordered table-striped">
103
        <thead>
104
        <tr>
105
            <th>RBM Name</th>
106
            <th>Partner Count</th>
35645 ranu 107
            <th>(Ach/Tgt)</th>
35631 ranu 108
            <th>Calling Target</th>
109
            <th>Called</th>
110
            <th class="highlight-plan-today">Plan Today</th>
111
            <th class="highlight-carry-forward">Carry Forward</th>
112
            <th style="background-color: #1e6e0e; color: white;">Zero Billing</th>
113
            <th class="highlight-untouched">Untouched</th>
114
            <th class="highlight-future-plan">Future Plan</th>
115
            <th>Normal</th>
116
            <th style="background-color: #c0392b;">Out of Sequence</th>
35645 ranu 117
            <th>Download</th>
35631 ranu 118
        </tr>
119
        </thead>
120
        <tbody>
121
            #set($totalPartnerCount = 0)
122
            #set($totalTodayTarget = 0)
123
            #set($totalValueAchieved = 0)
124
            #set($totalMovedToFuture = 0)
125
            #set($totalPlanToday = 0)
126
            #set($totalCarryForward = 0)
127
            #set($totalZeroBilling = 0)
128
            #set($totalUntouched = 0)
129
            #set($totalFuturePlan = 0)
130
            #set($totalNormal = 0)
131
            #set($totalOutOfSequence = 0)
132
            #set($totalL2CallingList = 0)
133
            #set($totalArrAchieved = 0)
134
            #set($totalArrTarget = 0)
135
 
136
            ## Total row first
137
            #foreach($model in $rbmCallTargetModels)
35662 ranu 138
                #if(!$model.isL2Position())
139
                    #set($totalPartnerCount = $totalPartnerCount + $model.getPartnerCount())
140
                #end
35631 ranu 141
                #set($totalTodayTarget = $totalTodayTarget + $model.getTodayTargetOfCall())
142
                #set($totalValueAchieved = $totalValueAchieved + $model.getValueTargetAchieved())
143
                #set($totalMovedToFuture = $totalMovedToFuture + $model.getMovedToFuture())
144
                #set($totalPlanToday = $totalPlanToday + $model.getPlanToday())
145
                #set($totalCarryForward = $totalCarryForward + $model.getCarryForward())
146
                #set($totalZeroBilling = $totalZeroBilling + $model.getZeroBilling())
147
                #set($totalUntouched = $totalUntouched + $model.getUntouched())
148
                #set($totalFuturePlan = $totalFuturePlan + $model.getFuturePlan())
149
                #set($totalNormal = $totalNormal + $model.getNormal())
150
                #set($totalOutOfSequence = $totalOutOfSequence + $model.getOutOfSequenceCount())
151
                #set($totalL2CallingList = $totalL2CallingList + $model.getL2CallingList())
152
                #if($arrAchievedByAuthId && $arrAchievedByAuthId.get($model.getAuthId()))
153
                    #set($totalArrAchieved = $totalArrAchieved + $arrAchievedByAuthId.get($model.getAuthId()))
154
                #end
155
                #if($arrTargetByAuthId && $arrTargetByAuthId.get($model.getAuthId()))
156
                    #set($totalArrTarget = $totalArrTarget + $arrTargetByAuthId.get($model.getAuthId()))
157
                #end
158
            #end
159
 
160
            #set($adjustedTotalTarget = $totalTodayTarget + $totalMovedToFuture)
161
            #set($adjustedTotalAchieved = $totalValueAchieved + $totalMovedToFuture)
162
 
163
        <tr>
164
            <td><strong>TOTAL</strong></td>
165
            <td><strong>$totalPartnerCount</strong></td>
35636 ranu 166
            <td><strong><span class="lakh">$totalArrAchieved</span> / <span class="lakh">$totalArrTarget</span></strong>
35631 ranu 167
            </td>
168
            <td class="highlight-target"><strong>$adjustedTotalTarget</strong></td>
169
            <td class="highlight-achieved currency"><strong>$adjustedTotalAchieved</strong></td>
170
            <td class="highlight-plan-today"><strong>$totalPlanToday</strong></td>
171
            <td class="highlight-carry-forward"><strong>$totalCarryForward</strong></td>
172
            <td><strong>$totalZeroBilling</strong></td>
173
            <td class="highlight-untouched"><strong>$totalUntouched</strong></td>
174
            <td class="highlight-future-plan"><strong>$totalFuturePlan</strong></td>
175
            <td><strong>$totalNormal</strong></td>
176
            <td class="highlight-oos"><strong>$totalOutOfSequence</strong></td>
35645 ranu 177
            <td></td>
35631 ranu 178
        </tr>
179
 
180
            #foreach($model in $rbmCallTargetModels)
181
                #set($rowTarget = $model.getTodayTargetOfCall() + $model.getMovedToFuture())
182
                #set($rowAchieved = $model.getValueTargetAchieved() + $model.getMovedToFuture())
183
            <tr>
184
                <td>$model.getRbmName()</td>
185
                <td>$model.getPartnerCount()</td>
186
                <td>
187
                    #if($arrAchievedByAuthId && $arrAchievedByAuthId.get($model.getAuthId()))
35636 ranu 188
                        <span class="lakh">$arrAchievedByAuthId.get($model.getAuthId())</span>
35631 ranu 189
                    #else
190
 
191
                    #end
192
                    /
193
                    #if($arrTargetByAuthId && $arrTargetByAuthId.get($model.getAuthId()))
35636 ranu 194
                        <span class="lakh">$arrTargetByAuthId.get($model.getAuthId())</span>
35631 ranu 195
                    #else
196
 
197
                    #end
198
                </td>
199
                <td class="highlight-target">$rowTarget</td>
35670 ranu 200
                <td class="highlight-achieved currency">
201
                    #if($rowAchieved > 0)
202
                        <span class="clickable"
203
                              onclick="showCalledPartnerDetails($model.getAuthId(), '$model.getRbmName()')">$rowAchieved</span>
204
                    #else
205
                        $rowAchieved
206
                    #end
207
                </td>
35631 ranu 208
                <td class="highlight-plan-today">$model.getPlanToday()</td>
209
                <td class="highlight-carry-forward">$model.getCarryForward()</td>
210
                <td>$model.getZeroBilling()</td>
211
                <td class="highlight-untouched">$model.getUntouched()</td>
212
                <td class="highlight-future-plan">$model.getFuturePlan()</td>
213
                <td>$model.getNormal()</td>
214
                <td class="highlight-oos" style="color: red;">
215
                    #if($model.getOutOfSequenceCount() > 0)
216
                        <span class="clickable" style="color: #e80404"
217
                              onclick="showOutOfSequenceDetails($model.getAuthId(), '$model.getRbmName()')">$model.getOutOfSequenceCount()</span>
218
                    #else
219
 
220
                    #end
221
                </td>
35645 ranu 222
                <td>
223
                    <a href="/indent/rbm_call_target/download_raw_data?authId=$model.getAuthId()" target="_blank"
224
                       class="btn btn-sm btn-outline-success">CSV</a>
225
                </td>
35631 ranu 226
            </tr>
227
            #end
228
        </tbody>
229
    </table>
230
</div>
231
 
232
<script type="text/javascript">
35638 ranu 233
    document.addEventListener('DOMContentLoaded', function () {
234
        var elems = document.querySelectorAll('.lakh');
235
        for (var i = 0; i < elems.length; i++) {
236
            var val = parseInt(elems[i].textContent.trim());
35636 ranu 237
            if (!isNaN(val)) {
35638 ranu 238
                elems[i].textContent = (val / 100000).toFixed(1) + 'L';
35636 ranu 239
            }
35638 ranu 240
        }
35636 ranu 241
    });
242
 
35631 ranu 243
    function showOutOfSequenceDetails(authId, rbmName) {
244
        document.getElementById('oosModalLabel').textContent = 'Out of Sequence Calls - ' + rbmName;
245
        document.getElementById('oosDetailsContent').innerHTML = '<p>Loading...</p>';
246
        $('#oosModal').modal('show');
247
 
248
        fetch('/indent/rbm_call_target/oos_details?authId=' + authId)
249
                .then(function (response) {
250
                    return response.json();
251
                })
252
                .then(function (data) {
253
                    if (data && data.length > 0) {
254
                        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>';
255
                        for (var i = 0; i < data.length; i++) {
256
                            html += '<tr><td>' + (i + 1) + '</td><td>' + data[i].partyName + '</td><td>' + data[i].code + '</td><td>' + data[i].time + '</td></tr>';
257
                        }
258
                        html += '</tbody></table>';
259
                        document.getElementById('oosDetailsContent').innerHTML = html;
260
                    } else {
261
                        document.getElementById('oosDetailsContent').innerHTML = '<p>No out of sequence calls found.</p>';
262
                    }
263
                })
264
                .catch(function () {
265
                    document.getElementById('oosDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
266
                });
267
    }
35670 ranu 268
 
269
    function showCalledPartnerDetails(authId, rbmName) {
270
        document.getElementById('calledModalLabel').textContent = 'Called Partners - ' + rbmName;
271
        document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
272
        $('#calledModal').modal('show');
273
 
274
        fetch('/indent/rbm_call_target/called_details?authId=' + authId)
275
                .then(function (response) {
276
                    return response.json();
277
                })
278
                .then(function (data) {
279
                    if (data && data.length > 0) {
35723 ranu 280
                        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>Remark Time</th><th>Call Status</th><th>Call Duration</th><th>Call Date/Time</th><th>Recording</th></tr></thead><tbody>';
35670 ranu 281
                        for (var i = 0; i < data.length; i++) {
35703 ranu 282
                            var recordingHtml = '-';
283
                            if (data[i].recordingUrl) {
35723 ranu 284
                                recordingHtml = '<a href="' + data[i].recordingUrl + '" target="_blank" class="btn btn-sm btn-outline-primary">Play</a>';
35703 ranu 285
                            }
35712 ranu 286
                            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].time + '</td><td>' + (data[i].callStatus || '-') + '</td><td>' + (data[i].callDuration || '-') + '</td><td>' + (data[i].callDateTime || '-') + '</td><td>' + recordingHtml + '</td></tr>';
35670 ranu 287
                        }
288
                        html += '</tbody></table>';
289
                        document.getElementById('calledDetailsContent').innerHTML = html;
290
                    } else {
291
                        document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found.</p>';
292
                    }
293
                })
294
                .catch(function () {
295
                    document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
296
                });
297
    }
35730 ranu 298
 
299
    // Date-wise Called Partner History
300
    function showHistoryCalledPartners() {
301
        var selectedDate = document.getElementById('historyDate').value;
302
        var selectedRbm = document.getElementById('historyRbm');
303
        var authId = selectedRbm.value;
304
        var rbmName = selectedRbm.options[selectedRbm.selectedIndex].text;
305
 
306
        if (!selectedDate) {
307
            alert('Please select a date');
308
            return;
309
        }
310
        if (!authId) {
311
            alert('Please select an RBM');
312
            return;
313
        }
314
 
315
        document.getElementById('calledModalLabel').textContent = 'Called Partners - ' + rbmName + ' (' + selectedDate + ')';
316
        document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
317
        $('#calledModal').modal('show');
318
 
319
        fetch('/indent/rbm_call_target/called_details?authId=' + authId + '&date=' + selectedDate)
320
                .then(function (response) {
321
                    return response.json();
322
                })
323
                .then(function (data) {
324
                    if (data && data.length > 0) {
325
                        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>Remark Time</th><th>Call Status</th><th>Call Duration</th><th>Call Date/Time</th><th>Recording</th></tr></thead><tbody>';
326
                        for (var i = 0; i < data.length; i++) {
327
                            var recordingHtml = '-';
328
                            if (data[i].recordingUrl) {
329
                                recordingHtml = '<a href="' + data[i].recordingUrl + '" target="_blank" class="btn btn-sm btn-outline-primary">Play</a>';
330
                            }
331
                            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].time + '</td><td>' + (data[i].callStatus || '-') + '</td><td>' + (data[i].callDuration || '-') + '</td><td>' + (data[i].callDateTime || '-') + '</td><td>' + recordingHtml + '</td></tr>';
332
                        }
333
                        html += '</tbody></table>';
334
                        document.getElementById('calledDetailsContent').innerHTML = html;
335
                    } else {
336
                        document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found for selected date.</p>';
337
                    }
338
                })
339
                .catch(function () {
340
                    document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
341
                });
342
    }
35631 ranu 343
</script>