Subversion Repositories SmartDukaan

Rev

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

Rev Author Line No. Line
36112 ranu 1 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
35631 ranu 2 
<style>
36112 ranu 3 
    #rbm-call-target-table th, #breakTimeDetailsContent th {
4 
        font-size: 13px;
35631 ranu 5 
        text-align: center;
6 
        padding: 0.4rem;
7 
        vertical-align: middle;
8 
    }
9 
 
36112 ranu 10 
    #rbm-call-target-table td, #breakTimeDetailsContent td {
11 
        font-size: 13px;
12 
        text-align: center;
13 
        padding: 0.2rem;
14 
        vertical-align: middle;
15 
    }
16 
 
35852 ranu 17 
    .badge {
18 
        display: inline-block;
19 
        padding: 4px 8px;
20 
        font-size: 12px;
21 
        font-weight: 600;
22 
        border-radius: 4px;
23 
    }
24 
 
25 
    .agent-status-cell, .time-in-status-cell {
26 
        min-width: 80px;
27 
    }
28 
 
35631 ranu 29 
    #rbm-call-target-table thead th {
30 
        background-color: #343a40;
31 
        color: white;
32 
        font-weight: 600;
33 
    }
34 
 
35 
    #rbm-call-target-table tbody tr:first-child td {
36 
        font-weight: bold;
37 
        background-color: #00d6b2;
38 
    }
39 
 
40 
    .highlight-target {
41 
        background-color: #fff3cd !important;
42 
        font-weight: bold;
43 
    }
44 
 
45 
    .highlight-achieved {
46 
        background-color: #d4edda !important;
47 
    }
48 
 
49 
    .highlight-oos {
50 
        background-color: #f8d7da !important;
51 
    }
52 
 
53 
    .highlight-plan-today {
54 
        background-color: #0f57a4 !important;
55 
        color: white !important;
56 
    }
57 
 
58 
    .highlight-carry-forward {
59 
        background-color: #ffc107 !important;
60 
        color: #000 !important;
61 
    }
62 
 
63 
    .highlight-untouched {
64 
        background-color: #dc3545 !important;
65 
        color: white !important;
66 
    }
67 
 
68 
    .highlight-future-plan {
69 
        background-color: #6c757d !important;
70 
        color: #000 !important;
71 
    }
72 
 
73 
    .clickable {
74 
        cursor: pointer;
75 
        text-decoration: underline;
76 
        color: #007bff;
77 
    }
78 
 
79 
    .clickable:hover {
80 
        color: #0056b3;
81 
    }
82 
 
83 
    .modal-body table {
84 
        width: 100%;
85 
    }
86 
 
87 
    .modal-body table th, .modal-body table td {
88 
        padding: 8px;
89 
        border: 1px solid #ddd;
90 
    }
35654 ranu 91 
 
92 
    #oosDetailsContent table td, #oosDetailsContent table th {
93 
        font-size: 12px;
94 
    }
35670 ranu 95 
 
96 
    #calledDetailsContent table td, #calledDetailsContent table th {
97 
        font-size: 12px;
98 
    }
35631 ranu 99 
</style>
100 
 
101 
<div class="container-fluid">
102 
    <h3>RBM Call Target Summary</h3>
35852 ranu 103 
    <div class="row">
104 
        <div class="col-md-7">
105 
            <!-- Date-wise Called Partner Filter -->
106 
            <div class="card mb-3" style="max-width: 500px;">
107 
                <div class="card-body py-2">
108 
                    <div class="d-flex align-items-center">
109 
                        <label for="historyDate" class="mb-0 mr-2"
110 
                               style="font-size: 14px; white-space: nowrap;">Date:</label>
111 
                        <input type="date" id="historyDate" class="form-control form-control-sm mr-2"
112 
                               style="width: 140px;">
113 
                        <label for="historyRbm" class="mb-0 mr-2"
114 
                               style="font-size: 14px; white-space: nowrap;">RBM:</label>
115 
                        <select id="historyRbm" class="form-control form-control-sm mr-2" style="width: 150px;">
116 
                            <option value="">Select RBM</option>
117 
                            #foreach($model in $rbmCallTargetModels)
118 
                                <option value="$model.getAuthId()">$model.getRbmName()</option>
119 
                            #end
120 
                        </select>
121 
                        <button type="button" class="btn btn-primary btn-sm" onclick="showHistoryCalledPartners()">
122 
                            View
123 
                        </button>
124 
                    </div>
125 
                </div>
35730 ranu 126 
            </div>
127 
        </div>
35852 ranu 128 
        <div class="col-md-5">
129 
            <!-- Download All Call Data by Date -->
130 
            <div class="card mb-3" style="max-width: 450px;">
131 
                <div class="card-body py-2">
132 
                    <div class="d-flex align-items-center">
133 
                        <label for="downloadDate" class="mb-0 mr-2" style="font-size: 14px; white-space: nowrap;">Download
134 
                            Call Data:</label>
135 
                        <input type="date" id="downloadDate" class="form-control form-control-sm mr-2"
136 
                               style="width: 140px;">
137 
                        <button type="button" class="btn btn-success btn-sm" onclick="downloadCallData()">Download CSV
138 
                        </button>
139 
                    </div>
140 
                </div>
141 
            </div>
142 
 
143 
        </div>
35730 ranu 144 
    </div>
145 
 
35852 ranu 146 
 
35631 ranu 147 
    <table id="rbm-call-target-table" class="table table-bordered table-striped">
148 
        <thead>
149 
        <tr>
36112 ranu 150 
            <th colspan="2">RBM Name</th>
36101 ranu 151 
            <th style="background-color: #ffc107; color: black;">Rating</th>
35879 ranu 152 
            <th style="background-color: #17a2b8; color: white;">Agent Status</th>
153 
            <th style="background-color: #17a2b8; color: white;">Time in Status</th>
36179 ranu 154 
            <th style="background-color: #007bff; color: white;"><i class="fa fa-clock"></i> Login</th>
155 
            <th style="background-color: #28a745; color: white;"><i class="fa fa-phone"></i> On Call</th>
156 
            <th style="background-color: #dc3545; color: white;"><i class="fa fa-user-clock"></i> Idle</th>
157 
            <th style="background-color: #fd7e14; color: white;"><i class="fa fa-coffee"></i> Break</th>
35631 ranu 158 
            <th>Partner Count</th>
35645 ranu 159 
            <th>(Ach/Tgt)</th>
35631 ranu 160 
            <th>Calling Target</th>
161 
            <th>Called</th>
162 
            <th class="highlight-plan-today">Plan Today</th>
163 
            <th class="highlight-carry-forward">Carry Forward</th>
164 
            <th style="background-color: #1e6e0e; color: white;">Zero Billing</th>
165 
            <th class="highlight-untouched">Untouched</th>
166 
            <th class="highlight-future-plan">Future Plan</th>
167 
            <th>Normal</th>
36182 ranu 168 
            <th style="background-color: #8e44ad; color: white;">Revival</th>
35631 ranu 169 
            <th style="background-color: #c0392b;">Out of Sequence</th>
170 
        </tr>
171 
        </thead>
172 
        <tbody>
173 
            #set($totalPartnerCount = 0)
174 
            #set($totalTodayTarget = 0)
175 
            #set($totalValueAchieved = 0)
176 
            #set($totalMovedToFuture = 0)
177 
            #set($totalPlanToday = 0)
178 
            #set($totalCarryForward = 0)
179 
            #set($totalZeroBilling = 0)
180 
            #set($totalUntouched = 0)
181 
            #set($totalFuturePlan = 0)
182 
            #set($totalNormal = 0)
36182 ranu 183 
            #set($totalRevival = 0)
35631 ranu 184 
            #set($totalOutOfSequence = 0)
185 
            #set($totalL2CallingList = 0)
36210 ranu 186 
            #set($totalL3CallingList = 0)
35631 ranu 187 
            #set($totalArrAchieved = 0)
188 
            #set($totalArrTarget = 0)
189 
 
190 
            ## Total row first
191 
            #foreach($model in $rbmCallTargetModels)
36228 ranu 192 
                #if(!$model.isL3Position())
35662 ranu 193 
                    #set($totalPartnerCount = $totalPartnerCount + $model.getPartnerCount())
194 
                #end
35631 ranu 195 
                #set($totalTodayTarget = $totalTodayTarget + $model.getTodayTargetOfCall())
196 
                #set($totalValueAchieved = $totalValueAchieved + $model.getValueTargetAchieved())
197 
                #set($totalMovedToFuture = $totalMovedToFuture + $model.getMovedToFuture())
198 
                #set($totalPlanToday = $totalPlanToday + $model.getPlanToday())
199 
                #set($totalCarryForward = $totalCarryForward + $model.getCarryForward())
200 
                #set($totalZeroBilling = $totalZeroBilling + $model.getZeroBilling())
201 
                #set($totalUntouched = $totalUntouched + $model.getUntouched())
202 
                #set($totalFuturePlan = $totalFuturePlan + $model.getFuturePlan())
203 
                #set($totalNormal = $totalNormal + $model.getNormal())
36182 ranu 204 
                #set($totalRevival = $totalRevival + $model.getRevival())
35631 ranu 205 
                #set($totalOutOfSequence = $totalOutOfSequence + $model.getOutOfSequenceCount())
206 
                #set($totalL2CallingList = $totalL2CallingList + $model.getL2CallingList())
36210 ranu 207 
                #set($totalL3CallingList = $totalL3CallingList + $model.getL3CallingList())
35631 ranu 208 
                #if($arrAchievedByAuthId && $arrAchievedByAuthId.get($model.getAuthId()))
209 
                    #set($totalArrAchieved = $totalArrAchieved + $arrAchievedByAuthId.get($model.getAuthId()))
210 
                #end
211 
                #if($arrTargetByAuthId && $arrTargetByAuthId.get($model.getAuthId()))
212 
                    #set($totalArrTarget = $totalArrTarget + $arrTargetByAuthId.get($model.getAuthId()))
213 
                #end
214 
            #end
215 
 
216 
            #set($adjustedTotalTarget = $totalTodayTarget + $totalMovedToFuture)
217 
            #set($adjustedTotalAchieved = $totalValueAchieved + $totalMovedToFuture)
218 
 
219 
        <tr>
36112 ranu 220 
            <td colspan="2"><strong>TOTAL</strong></td>
35879 ranu 221 
            <td>-</td>
222 
            <td>-</td>
36101 ranu 223 
            <td>-</td>
36179 ranu 224 
            <td>-</td>
225 
            <td>-</td>
226 
            <td>-</td>
227 
            <td>-</td>
35631 ranu 228 
            <td><strong>$totalPartnerCount</strong></td>
35636 ranu 229 
            <td><strong><span class="lakh">$totalArrAchieved</span> / <span class="lakh">$totalArrTarget</span></strong>
35631 ranu 230 
            </td>
231 
            <td class="highlight-target"><strong>$adjustedTotalTarget</strong></td>
232 
            <td class="highlight-achieved currency"><strong>$adjustedTotalAchieved</strong></td>
233 
            <td class="highlight-plan-today"><strong>$totalPlanToday</strong></td>
234 
            <td class="highlight-carry-forward"><strong>$totalCarryForward</strong></td>
235 
            <td><strong>$totalZeroBilling</strong></td>
236 
            <td class="highlight-untouched"><strong>$totalUntouched</strong></td>
237 
            <td class="highlight-future-plan"><strong>$totalFuturePlan</strong></td>
238 
            <td><strong>$totalNormal</strong></td>
36182 ranu 239 
            <td><strong>$totalRevival</strong></td>
35631 ranu 240 
            <td class="highlight-oos"><strong>$totalOutOfSequence</strong></td>
241 
        </tr>
242 
 
243 
            #foreach($model in $rbmCallTargetModels)
244 
                #set($rowTarget = $model.getTodayTargetOfCall() + $model.getMovedToFuture())
245 
                #set($rowAchieved = $model.getValueTargetAchieved() + $model.getMovedToFuture())
35852 ranu 246 
                #set($agentStatus = $agentStatusByAuthId.get($model.getAuthId()))
35631 ranu 247 
            <tr>
36101 ranu 248 
                <td>
36112 ranu 249 
                    #set($rank = $rbmCombinedRankMap.get($model.getRbmName()))
250 
                    #if($rank == 1)
36122 ranu 251 
                        <img src="../../../resources/images/king.png" style="width: 35px;">
36112 ranu 252 
                    #elseif($rank == 2)
36123 ranu 253 
                        <img src="../../../resources/images/trophy-cup.png" style="width: 30px;">
36112 ranu 254 
                    #elseif($rank == 3)
36123 ranu 255 
                        <img src="../../../resources/images/bronze-medal.png" style="width: 30px;">
36112 ranu 256 
                    #elseif($rank == 4)
36123 ranu 257 
                        <img src="../../../resources/images/star-badge.png" style="width: 30px;">
36112 ranu 258 
                    #elseif($rank && $rank > 4)
36123 ranu 259 
                        <img src="../../../resources/images/clock.png" style="width: 22px;">
36101 ranu 260 
                    #else
36124 ranu 261 
                        <img src="../../../resources/images/clock.png" style="width: 22px;">
36101 ranu 262 
                    #end
263 
                </td>
36112 ranu 264 
                <td>$model.getRbmName()</td>
36101 ranu 265 
                <td>
36112 ranu 266 
                    #set($ratingData = $rbmNameToRatingMap.get($model.getRbmName()))
267 
                    #set($rank = $rbmCombinedRankMap.get($model.getRbmName()))
268 
                    #if($ratingData && $ratingData.getRating())
269 
                        #set($rating = $ratingData.getRating())
270 
                        <div style="line-height: 1.2;">
271 
                            #if($rating && $rating > 0 && $rating <= 1)
272 
                                <b style="color: goldenrod; font-size: 12px;">&#9733;</b>
273 
                            #elseif($rating && $rating > 1 && $rating <= 2)
274 
                                <b style="color: goldenrod; font-size: 12px;">&#9733;&#9733;</b>
275 
                            #elseif($rating && $rating > 2 && $rating <= 3)
276 
                                <b style="color: goldenrod; font-size: 12px;">&#9733;&#9733;&#9733;</b>
277 
                            #elseif($rating && $rating > 3 && $rating <= 4)
278 
                                <b style="color: goldenrod; font-size: 12px;">&#9733;&#9733;&#9733;&#9733;</b>
279 
                            #elseif($rating && $rating > 4 && $rating <= 5)
280 
                                <b style="color: goldenrod; font-size: 12px;">&#9733;&#9733;&#9733;&#9733;&#9733;</b>
281 
                            #end
282 
                            <br>
283 
                            <span style="font-size: 10px; color: #555;">#$rank | $ratingData.getPartnerCount() rated</span>
284 
                        </div>
36101 ranu 285 
                    #else
286 
                        -
287 
                    #end
288 
                </td>
35879 ranu 289 
                <td class="agent-status-cell" data-authid="$model.getAuthId()">
35852 ranu 290 
                    #if($agentStatus && $agentStatus.getAgentStatus())
291 
                        #if($agentStatus.getAgentStatus() == "On Call")
292 
                            <span class="badge" style="background-color: #28a745; color: white;">$agentStatus.getAgentStatus()</span>
293 
                        #elseif($agentStatus.getAgentStatus() == "Available")
35994 ranu 294 
                            <span class="badge"
295 
                                  style="background-color: #dc3545; color: white;">$agentStatus.getAgentStatus()</span>
296 
                        #elseif($agentStatus.getAgentStatus().toLowerCase().contains("break"))
297 
                            <span class="badge"
36057 ranu 298 
                                  style="background-color: #fd7e14; color: white;">$agentStatus.getAgentStatus()</span>
35852 ranu 299 
                        #elseif($agentStatus.getAgentStatus() == "Logged Out")
36057 ranu 300 
                            <span class="badge"
301 
                                  style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
35852 ranu 302 
                        #elseif($agentStatus.getAgentStatus() == "Trying")
36057 ranu 303 
                            <span class="badge"
304 
                                  style="background-color: #ffc107; color: black;">$agentStatus.getAgentStatus()</span>
35852 ranu 305 
                        #else
306 
                            <span class="badge" style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
307 
                        #end
308 
                    #else
309 
                        <span class="badge" style="background-color: #6c757d; color: white;">-</span>
310 
                    #end
311 
                </td>
312 
                <td class="time-in-status-cell" data-authid="$model.getAuthId()">
313 
                    #if($agentStatus && $agentStatus.getTimeInStatus())
314 
                        $agentStatus.getTimeInStatus()
315 
                    #else
316 
                        -
317 
                    #end
35879 ranu 318 
                </td>
36179 ranu 319 
                <td style="background-color: #e7f1ff;">
320 
                    #if($loginTimeByAuthId && $loginTimeByAuthId.get($model.getAuthId()))
321 
                        $loginTimeByAuthId.get($model.getAuthId())
322 
                    #else
323 
                        -
324 
                    #end
325 
                </td>
326 
                <td style="background-color: #d4edda;">
327 
                    #if($onCallTimeByAuthId && $onCallTimeByAuthId.get($model.getAuthId()))
328 
                        $onCallTimeByAuthId.get($model.getAuthId())
329 
                    #else
330 
                        -
331 
                    #end
332 
                </td>
333 
                <td style="background-color: #f8d7da;">
334 
                    #if($availableTimeByAuthId && $availableTimeByAuthId.get($model.getAuthId()))
335 
                        $availableTimeByAuthId.get($model.getAuthId())
336 
                    #else
337 
                        -
338 
                    #end
339 
                </td>
340 
                <td style="background-color: #ffe5cc;">
341 
                    #if($breakTimeByAuthId && $breakTimeByAuthId.get($model.getAuthId()))
342 
                        $breakTimeByAuthId.get($model.getAuthId())
343 
                    #else
344 
                        -
345 
                    #end
346 
                </td>
35631 ranu 347 
                <td>$model.getPartnerCount()</td>
348 
                <td>
349 
                    #if($arrAchievedByAuthId && $arrAchievedByAuthId.get($model.getAuthId()))
35636 ranu 350 
                        <span class="lakh">$arrAchievedByAuthId.get($model.getAuthId())</span>
35631 ranu 351 
                    #else
352 
 
353 
                    #end
354 
                    /
355 
                    #if($arrTargetByAuthId && $arrTargetByAuthId.get($model.getAuthId()))
35636 ranu 356 
                        <span class="lakh">$arrTargetByAuthId.get($model.getAuthId())</span>
35631 ranu 357 
                    #else
358 
 
359 
                    #end
360 
                </td>
361 
                <td class="highlight-target">$rowTarget</td>
35670 ranu 362 
                <td class="highlight-achieved currency">
35953 ranu 363 
                    <span class="clickable"
364 
                          onclick="showCalledPartnerDetails($model.getAuthId(), '$model.getRbmName()')">$rowAchieved</span>
35670 ranu 365 
                </td>
35631 ranu 366 
                <td class="highlight-plan-today">$model.getPlanToday()</td>
367 
                <td class="highlight-carry-forward">$model.getCarryForward()</td>
368 
                <td>$model.getZeroBilling()</td>
369 
                <td class="highlight-untouched">$model.getUntouched()</td>
370 
                <td class="highlight-future-plan">$model.getFuturePlan()</td>
371 
                <td>$model.getNormal()</td>
36182 ranu 372 
                <td>$model.getRevival()</td>
35631 ranu 373 
                <td class="highlight-oos" style="color: red;">
374 
                    #if($model.getOutOfSequenceCount() > 0)
375 
                        <span class="clickable" style="color: #e80404"
376 
                              onclick="showOutOfSequenceDetails($model.getAuthId(), '$model.getRbmName()')">$model.getOutOfSequenceCount()</span>
377 
                    #else
378 
 
379 
                    #end
380 
                </td>
381 
            </tr>
382 
            #end
383 
        </tbody>
384 
    </table>
385 
</div>
386 
 
35953 ranu 387 
<!-- Modal for Called Partner Details with Tabs -->
388 
<div class="modal fade" id="calledModal" tabindex="-1" role="dialog" aria-labelledby="calledModalLabel"
389 
     aria-hidden="true">
390 
    <div class="modal-dialog modal-lg" role="document" style="max-width: 90%;">
391 
        <div class="modal-content">
392 
            <div class="modal-header">
393 
                <h5 class="modal-title" id="calledModalLabel">Called Partners</h5>
394 
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
395 
                    <span aria-hidden="true">&times;</span>
396 
                </button>
397 
            </div>
398 
            <div class="modal-body">
399 
                <!-- Tabs Navigation -->
400 
                <ul class="nav nav-tabs" id="calledModalTabs" role="tablist">
401 
                    <li class="nav-item">
402 
                        <a class="nav-link active" id="called-tab" data-toggle="tab" href="#calledTabContent"
403 
                           role="tab">
404 
                            Called Partners
405 
                        </a>
406 
                    </li>
407 
                    <li class="nav-item">
408 
                        <a class="nav-link" id="break-time-tab" data-toggle="tab" href="#breakTimeTabContent"
409 
                           role="tab">
410 
                            Break Time
411 
                        </a>
412 
                    </li>
413 
                </ul>
414 
                <!-- Tabs Content -->
415 
                <div class="tab-content mt-3" id="calledModalTabContent">
416 
                    <div class="tab-pane fade show active" id="calledTabContent" role="tabpanel">
417 
                        <div id="calledDetailsContent">
418 
                            <p>Loading...</p>
419 
                        </div>
420 
                    </div>
421 
                    <div class="tab-pane fade" id="breakTimeTabContent" role="tabpanel">
422 
                        <div id="breakTimeDetailsContent">
423 
                            <p>Click on Break Time tab to load data.</p>
424 
                        </div>
425 
                    </div>
426 
                </div>
427 
            </div>
428 
            <div class="modal-footer">
429 
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
430 
            </div>
431 
        </div>
432 
    </div>
433 
</div>
434 
 
435 
<!-- Modal for Out of Sequence Details -->
436 
<div class="modal fade" id="oosModal" tabindex="-1" role="dialog" aria-labelledby="oosModalLabel"
437 
     aria-hidden="true">
438 
    <div class="modal-dialog modal-lg" role="document">
439 
        <div class="modal-content">
440 
            <div class="modal-header">
441 
                <h5 class="modal-title" id="oosModalLabel">Out of Sequence Calls</h5>
442 
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
443 
                    <span aria-hidden="true">&times;</span>
444 
                </button>
445 
            </div>
446 
            <div class="modal-body">
447 
                <div id="oosDetailsContent">
448 
                    <p>Loading...</p>
449 
                </div>
450 
            </div>
451 
            <div class="modal-footer">
452 
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
453 
            </div>
454 
        </div>
455 
    </div>
456 
</div>
457 
 
35631 ranu 458 
<script type="text/javascript">
35984 ranu 459 
    // Store current authId and agentName for break time loading
35953 ranu 460 
    var currentModalAuthId = null;
461 
    var currentModalDate = null;
35984 ranu 462 
    var currentModalAgentName = null;
35953 ranu 463 
 
35638 ranu 464 
    document.addEventListener('DOMContentLoaded', function () {
465 
        var elems = document.querySelectorAll('.lakh');
466 
        for (var i = 0; i < elems.length; i++) {
467 
            var val = parseInt(elems[i].textContent.trim());
35636 ranu 468 
            if (!isNaN(val)) {
35638 ranu 469 
                elems[i].textContent = (val / 100000).toFixed(1) + 'L';
35636 ranu 470 
            }
35638 ranu 471 
        }
35636 ranu 472 
    });
473 
 
35631 ranu 474 
    function showOutOfSequenceDetails(authId, rbmName) {
475 
        document.getElementById('oosModalLabel').textContent = 'Out of Sequence Calls - ' + rbmName;
476 
        document.getElementById('oosDetailsContent').innerHTML = '<p>Loading...</p>';
477 
        $('#oosModal').modal('show');
478 
 
479 
        fetch('/indent/rbm_call_target/oos_details?authId=' + authId)
480 
                .then(function (response) {
481 
                    return response.json();
482 
                })
483 
                .then(function (data) {
484 
                    if (data && data.length > 0) {
485 
                        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>';
486 
                        for (var i = 0; i < data.length; i++) {
487 
                            html += '<tr><td>' + (i + 1) + '</td><td>' + data[i].partyName + '</td><td>' + data[i].code + '</td><td>' + data[i].time + '</td></tr>';
488 
                        }
489 
                        html += '</tbody></table>';
490 
                        document.getElementById('oosDetailsContent').innerHTML = html;
491 
                    } else {
492 
                        document.getElementById('oosDetailsContent').innerHTML = '<p>No out of sequence calls found.</p>';
493 
                    }
494 
                })
495 
                .catch(function () {
496 
                    document.getElementById('oosDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
497 
                });
498 
    }
35670 ranu 499 
 
500 
    function showCalledPartnerDetails(authId, rbmName) {
35984 ranu 501 
        // Store authId and agentName for break time tab
35953 ranu 502 
        currentModalAuthId = authId;
503 
        currentModalDate = null;
35984 ranu 504 
        currentModalAgentName = rbmName;
35953 ranu 505 
 
506 
        document.getElementById('calledModalLabel').textContent = 'Activity - ' + rbmName;
35670 ranu 507 
        document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
35953 ranu 508 
        document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Click to load break time data.</p>';
509 
 
510 
        // Reset to Called tab
511 
        $('#called-tab').tab('show');
512 
 
35670 ranu 513 
        $('#calledModal').modal('show');
514 
 
35984 ranu 515 
        fetch('/indent/rbm_call_target/called_details?authId=' + authId + '&agentName=' + encodeURIComponent(rbmName))
35670 ranu 516 
                .then(function (response) {
517 
                    return response.json();
518 
                })
519 
                .then(function (data) {
520 
                    if (data && data.length > 0) {
35763 ranu 521 
                        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 522 
                        for (var i = 0; i < data.length; i++) {
35984 ranu 523 
                            var rowStyle = '';
35703 ranu 524 
                            var recordingHtml = '-';
35984 ranu 525 
 
526 
                            // Check if this is a break log entry
527 
                            if (data[i].breakLog) {
36097 ranu 528 
                                var status = (data[i].breakStatus || '').toLowerCase();
529 
                                if (status.indexOf('available') >= 0) {
36099 ranu 530 
                                    rowStyle = 'style="background-color: #f8d7da; color: #721c24;"'; // Light red
36097 ranu 531 
                                } else if (status.indexOf('trying') >= 0) {
532 
                                    rowStyle = 'style="background-color: #fff3cd; color: #856404;"'; // Light yellow
533 
                                } else if (status.indexOf('logged out') >= 0 || status.indexOf('logout') >= 0) {
534 
                                    rowStyle = 'style="background-color: #e2e3e5; color: #383d41;"'; // Light grey
535 
                                } else if (status.indexOf('break') >= 0) {
536 
                                    rowStyle = 'style="background-color: #ffe5cc; color: #c45200;"'; // Light orange
537 
                                } else {
538 
                                    rowStyle = 'style="background-color: #f8f9fa; color: #333;"'; // Default light
539 
                                }
36098 ranu 540 
                                var timeRange = data[i].callDateTime || '-';
541 
                                if (data[i].breakEndTime) {
542 
                                    // Extract just the time part from callDateTime and show range
543 
                                    var startTime = timeRange.split(' ').slice(-2).join(' '); // Get "hh:mm AM/PM"
544 
                                    timeRange = startTime + ' to ' + data[i].breakEndTime;
545 
                                }
546 
                                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>';
35984 ranu 547 
                            } else {
548 
                                if (data[i].recordingUrl) {
549 
                                    recordingHtml = '<audio controls style="width: 150px; height: 30px;"><source src="' + data[i].recordingUrl + '" type="audio/mpeg">Your browser does not support audio.</audio>';
550 
                                }
551 
                                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>';
35703 ranu 552 
                            }
35670 ranu 553 
                        }
554 
                        html += '</tbody></table>';
555 
                        document.getElementById('calledDetailsContent').innerHTML = html;
556 
                    } else {
557 
                        document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found.</p>';
558 
                    }
559 
                })
560 
                .catch(function () {
561 
                    document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
562 
                });
563 
    }
35730 ranu 564 
 
35953 ranu 565 
    // Load break time data when tab is clicked
566 
    document.addEventListener('DOMContentLoaded', function () {
567 
        var breakTimeTab = document.getElementById('break-time-tab');
568 
        if (breakTimeTab) {
569 
            breakTimeTab.addEventListener('shown.bs.tab', loadBreakTimeData);
570 
            breakTimeTab.addEventListener('click', function () {
571 
                // For Bootstrap 4 compatibility
572 
                setTimeout(loadBreakTimeData, 100);
573 
            });
574 
        }
575 
    });
576 
 
577 
    function loadBreakTimeData() {
578 
        if (!currentModalAuthId) {
579 
            return;
580 
        }
581 
 
582 
        document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Loading break time data...</p>';
583 
 
584 
        var url = '/indent/rbm_call_target/break_time_details?authId=' + currentModalAuthId;
585 
        if (currentModalDate) {
586 
            url += '&date=' + currentModalDate;
587 
        }
35984 ranu 588 
        if (currentModalAgentName) {
589 
            url += '&agentName=' + encodeURIComponent(currentModalAgentName);
590 
        }
35953 ranu 591 
 
592 
        fetch(url)
593 
                .then(function (response) {
594 
                    return response.json();
595 
                })
596 
                .then(function (data) {
597 
                    var html = '';
598 
 
36086 ranu 599 
                    // 4 Summary boxes in a row
600 
                    html += '<div class="row">';
35953 ranu 601 
 
36086 ranu 602 
                    // Available Box - Green
603 
                    html += '<div class="col-md-3 col-sm-6 mb-3">';
604 
                    html += '<div class="card text-white bg-success">';
605 
                    html += '<div class="card-body text-center">';
606 
                    html += '<h5 class="card-title">Available</h5>';
607 
                    html += '<h3 class="mb-0">' + (data.totalAvailableTime || '0h 0m 0s') + '</h3>';
608 
                    html += '<small>(' + (data.availableCount || 0) + ' times)</small>';
609 
                    html += '</div></div></div>';
35953 ranu 610 
 
36086 ranu 611 
                    // Trying Box - Yellow
612 
                    html += '<div class="col-md-3 col-sm-6 mb-3">';
613 
                    html += '<div class="card text-dark bg-warning">';
614 
                    html += '<div class="card-body text-center">';
615 
                    html += '<h5 class="card-title">Trying</h5>';
616 
                    html += '<h3 class="mb-0">' + (data.totalTryingTime || '0h 0m 0s') + '</h3>';
617 
                    html += '<small>(' + (data.tryingCount || 0) + ' times)</small>';
618 
                    html += '</div></div></div>';
35953 ranu 619 
 
36086 ranu 620 
                    // Logged Out Box - Red/Grey
621 
                    html += '<div class="col-md-3 col-sm-6 mb-3">';
622 
                    html += '<div class="card text-white bg-secondary">';
623 
                    html += '<div class="card-body text-center">';
624 
                    html += '<h5 class="card-title">Logged Out</h5>';
625 
                    html += '<h3 class="mb-0">' + (data.totalLoggedOutTime || '0h 0m 0s') + '</h3>';
626 
                    html += '<small>(' + (data.loggedOutCount || 0) + ' times)</small>';
627 
                    html += '</div></div></div>';
628 
 
629 
                    // Break Box - Orange
630 
                    html += '<div class="col-md-3 col-sm-6 mb-3">';
631 
                    html += '<div class="card text-dark" style="background-color: #fd7e14;">';
632 
                    html += '<div class="card-body text-center">';
633 
                    html += '<h5 class="card-title">Break</h5>';
634 
                    html += '<h3 class="mb-0">' + (data.totalBreakTime || '0h 0m 0s') + '</h3>';
635 
                    html += '<small>(' + (data.breakCount || 0) + ' times)</small>';
636 
                    html += '</div></div></div>';
637 
 
638 
                    html += '</div>';
639 
 
36179 ranu 640 
                    // Second row: On Call, Total Login Time, Total On Call Time
641 
                    html += '<div class="row">';
642 
 
643 
                    // On Call Box - Dark Green
644 
                    html += '<div class="col-md-4 col-sm-6 mb-3">';
645 
                    html += '<div class="card text-white" style="background-color: #28a745;">';
646 
                    html += '<div class="card-body text-center">';
647 
                    html += '<h5 class="card-title"><i class="fa fa-phone"></i> On Call</h5>';
648 
                    html += '<h3 class="mb-0">' + (data.totalOnCallTime || '0h 0m 0s') + '</h3>';
649 
                    html += '<small>(From Call Logs)</small>';
650 
                    html += '</div></div></div>';
651 
 
652 
                    // Total Login Time Box - Blue
653 
                    html += '<div class="col-md-4 col-sm-6 mb-3">';
654 
                    html += '<div class="card text-white bg-primary">';
655 
                    html += '<div class="card-body text-center">';
656 
                    html += '<h5 class="card-title"><i class="fa fa-sign-in-alt"></i> Total Login Time</h5>';
657 
                    html += '<h3 class="mb-0">' + (data.totalLoginTime || '0h 0m 0s') + '</h3>';
658 
                    html += '<small>(Available + Trying + Break + On Call)</small>';
659 
                    html += '</div></div></div>';
660 
 
661 
                    // Total Idle Time Box - Red
662 
                    html += '<div class="col-md-4 col-sm-6 mb-3">';
663 
                    html += '<div class="card text-white bg-danger">';
664 
                    html += '<div class="card-body text-center">';
665 
                    html += '<h5 class="card-title"><i class="fa fa-clock"></i> Total Idle Time</h5>';
666 
                    html += '<h3 class="mb-0">' + (data.totalAvailableTime || '0h 0m 0s') + '</h3>';
667 
                    html += '<small>(Available - Not on call)</small>';
668 
                    html += '</div></div></div>';
669 
 
670 
                    html += '</div>';
671 
 
36086 ranu 672 
                    // Check if no data
673 
                    if ((data.totalAvailableSeconds || 0) + (data.totalTryingSeconds || 0) +
36179 ranu 674 
                            (data.totalLoggedOutSeconds || 0) + (data.totalBreakSeconds || 0) +
675 
                            (data.totalOnCallSeconds || 0) === 0) {
36086 ranu 676 
                        html += '<p class="text-muted text-center mt-3">No break time data available for this date.</p>';
35953 ranu 677 
                    }
678 
 
679 
                    document.getElementById('breakTimeDetailsContent').innerHTML = html;
680 
                })
681 
                .catch(function (err) {
682 
                    console.error('Error loading break time:', err);
683 
                    document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Error loading break time data. Please try again.</p>';
684 
                });
685 
    }
686 
 
35730 ranu 687 
    // Date-wise Called Partner History
688 
    function showHistoryCalledPartners() {
689 
        var selectedDate = document.getElementById('historyDate').value;
690 
        var selectedRbm = document.getElementById('historyRbm');
691 
        var authId = selectedRbm.value;
692 
        var rbmName = selectedRbm.options[selectedRbm.selectedIndex].text;
693 
 
694 
        if (!selectedDate) {
695 
            alert('Please select a date');
696 
            return;
697 
        }
698 
        if (!authId) {
699 
            alert('Please select an RBM');
700 
            return;
701 
        }
702 
 
35984 ranu 703 
        // Store authId, date and agentName for break time tab
35953 ranu 704 
        currentModalAuthId = authId;
705 
        currentModalDate = selectedDate;
35984 ranu 706 
        currentModalAgentName = rbmName;
35953 ranu 707 
 
708 
        document.getElementById('calledModalLabel').textContent = 'Activity - ' + rbmName + ' (' + selectedDate + ')';
35730 ranu 709 
        document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
35953 ranu 710 
        document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Click to load break time data.</p>';
711 
 
712 
        // Reset to Called tab
713 
        $('#called-tab').tab('show');
714 
 
35730 ranu 715 
        $('#calledModal').modal('show');
716 
 
35984 ranu 717 
        fetch('/indent/rbm_call_target/called_details?authId=' + authId + '&date=' + selectedDate + '&agentName=' + encodeURIComponent(rbmName))
35730 ranu 718 
                .then(function (response) {
719 
                    return response.json();
720 
                })
721 
                .then(function (data) {
722 
                    if (data && data.length > 0) {
35763 ranu 723 
                        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 724 
                        for (var i = 0; i < data.length; i++) {
35984 ranu 725 
                            var rowStyle = '';
35730 ranu 726 
                            var recordingHtml = '-';
35984 ranu 727 
 
728 
                            // Check if this is a break log entry
729 
                            if (data[i].breakLog) {
36097 ranu 730 
                                var status = (data[i].breakStatus || '').toLowerCase();
731 
                                if (status.indexOf('available') >= 0) {
36099 ranu 732 
                                    rowStyle = 'style="background-color: #f8d7da; color: #721c24;"'; // Light red
36097 ranu 733 
                                } else if (status.indexOf('trying') >= 0) {
734 
                                    rowStyle = 'style="background-color: #fff3cd; color: #856404;"'; // Light yellow
735 
                                } else if (status.indexOf('logged out') >= 0 || status.indexOf('logout') >= 0) {
736 
                                    rowStyle = 'style="background-color: #e2e3e5; color: #383d41;"'; // Light grey
737 
                                } else if (status.indexOf('break') >= 0) {
738 
                                    rowStyle = 'style="background-color: #ffe5cc; color: #c45200;"'; // Light orange
739 
                                } else {
740 
                                    rowStyle = 'style="background-color: #f8f9fa; color: #333;"'; // Default light
741 
                                }
36098 ranu 742 
                                var timeRange = data[i].callDateTime || '-';
743 
                                if (data[i].breakEndTime) {
744 
                                    // Extract just the time part from callDateTime and show range
745 
                                    var startTime = timeRange.split(' ').slice(-2).join(' '); // Get "hh:mm AM/PM"
746 
                                    timeRange = startTime + ' to ' + data[i].breakEndTime;
747 
                                }
748 
                                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>';
35984 ranu 749 
                            } else {
750 
                                if (data[i].recordingUrl) {
751 
                                    recordingHtml = '<audio controls style="width: 150px; height: 30px;"><source src="' + data[i].recordingUrl + '" type="audio/mpeg">Your browser does not support audio.</audio>';
752 
                                }
753 
                                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 754 
                            }
755 
                        }
756 
                        html += '</tbody></table>';
757 
                        document.getElementById('calledDetailsContent').innerHTML = html;
758 
                    } else {
759 
                        document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found for selected date.</p>';
760 
                    }
761 
                })
762 
                .catch(function () {
763 
                    document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
764 
                });
765 
    }
35852 ranu 766 
 
767 
    // Auto-refresh agent status every 30 seconds
768 
    function refreshAgentStatus() {
769 
        fetch('/indent/rbm_call_target/get_agent_statuses')
35879 ranu 770 
                .then(function (response) {
771 
                    return response.json();
772 
                })
773 
                .then(function (data) {
774 
                    if (data && data.length > 0) {
775 
                        for (var i = 0; i < data.length; i++) {
776 
                            var agent = data[i];
777 
                            var statusCell = document.querySelector('.agent-status-cell[data-authid="' + agent.authId + '"]');
778 
                            var timeCell = document.querySelector('.time-in-status-cell[data-authid="' + agent.authId + '"]');
35852 ranu 779 
 
35879 ranu 780 
                            if (statusCell) {
781 
                                var statusHtml = getStatusBadge(agent.agentStatus);
782 
                                statusCell.innerHTML = statusHtml;
783 
                            }
784 
                            if (timeCell) {
785 
                                timeCell.textContent = agent.timeInStatus || '-';
786 
                            }
35852 ranu 787 
                        }
788 
                    }
35879 ranu 789 
                })
790 
                .catch(function (err) {
791 
                    console.error('Error refreshing agent status:', err);
792 
                });
35852 ranu 793 
    }
794 
 
795 
    function getStatusBadge(status) {
796 
        if (!status) return '<span class="badge" style="background-color: #6c757d; color: white;">-</span>';
797 
 
798 
        var bgColor = '#6c757d';
799 
        var textColor = 'white';
35994 ranu 800 
        var lowerStatus = status.toLowerCase();
35852 ranu 801 
 
802 
        if (status === 'On Call') {
803 
            bgColor = '#28a745';
804 
        } else if (status === 'Available') {
35994 ranu 805 
            bgColor = '#dc3545';
806 
        } else if (lowerStatus.indexOf('break') !== -1) {
36057 ranu 807 
            bgColor = '#fd7e14';  // Orange for break
35852 ranu 808 
        } else if (status === 'Logged Out') {
36057 ranu 809 
            bgColor = '#6c757d';  // Grey for logged out
35852 ranu 810 
        } else if (status === 'Trying') {
36057 ranu 811 
            bgColor = '#ffc107';  // Yellow for trying
812 
            textColor = 'black';
35852 ranu 813 
        }
814 
 
815 
        return '<span class="badge" style="background-color: ' + bgColor + '; color: ' + textColor + ';">' + status + '</span>';
816 
    }
817 
 
36057 ranu 818 
    // Refresh every 10 seconds
819 
    setInterval(refreshAgentStatus, 10000);
35852 ranu 820 
 
821 
    // Initial refresh after page load
822 
    setTimeout(refreshAgentStatus, 2000);
823 
 
824 
    // Download All Call Data by Date
825 
    function downloadCallData() {
826 
        var selectedDate = document.getElementById('downloadDate').value;
827 
        if (!selectedDate) {
828 
            alert('Please select a date');
829 
            return;
830 
        }
831 
        window.location.href = '/indent/rbm_call_target/download_call_data?date=' + selectedDate;
832 
    }
35631 ranu 833 
</script>