Built motion from commit 7e022ab.|2.0.13
[motion2.git] / public / app / main / apps / dashboards / views / general / user / dialer / user.general.dialer.html
1 <!-- WIDGET INBOUND -->
2 <div class="dashboard-container md-background-bg md-whiteframe-1dp">
3     <div class="pb-16" layout="row" layout-align="start center">
4         <md-icon md-font-icon="icon-phone-outgoing" class="m-0 mr-16"></md-icon>
5         <div class="h2 secondary-text" translate="DASHBOARDS.TODAY_MOTION_BULL_STATS">Today Motion Bull STATS</div>
6     </div>
7
8     <!-- WIDGET GROUP -->
9     <div class="widget-group" layout="row" flex="100" layout-wrap>
10
11         <!-- WIDGET 1 -->
12         <ms-widget flippable="true" layout="column" flex="100" flex-gt-xs="50" flex-gt-md="20">
13
14             <!-- Front -->
15             <ms-widget-front class="grey-50-bg">
16                 <div class="ph-8 pv-16 h-55" layout="row" layout-align="space-between center">
17                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="more">
18                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
19                     </md-button>
20                     <md-button style="cursor:auto" class="md-icon-button" aria-label="more">
21                         <md-icon md-font-icon="icon-timelapse"></md-icon>
22                     </md-button>
23                 </div>
24
25                 <div class="pt-8 pb-32" layout="column" layout-align="center center">
26                     <div class="light-blue-fg font-size-52 line-height-72">
27                         {{vm.inbound.waiting || 0}}
28                     </div>
29                     <div class="h3 secondary-text font-weight-500">{{'DASHBOARDS.WAITING' | translate | uppercase}}</div>
30                 </div>
31
32                 <div class="p-16 grey-200-bg text-center border-top" layout-align="start center">
33                     <span class="h6 light-blue-fg secondary-text text-truncate">{{'DASHBOARDS.WAITING_TEXT' | translate | uppercase}}</span>
34                 </div>
35             </ms-widget-front>
36             <!-- / Front -->
37
38             <!-- Back -->
39             <ms-widget-back class="p-16 grey-50-bg">
40                 <div class="flip-to-front">
41                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="Flip widget">
42                         <md-icon md-font-icon="icon-close" class="s16"></md-icon>
43                     </md-button>
44                 </div>
45
46                 <div>
47                     {{'DASHBOARDS.HELP.WAITING' | translate}}
48                 </div>
49             </ms-widget-back>
50             <!-- / Back -->
51
52         </ms-widget>
53         <!-- / WIDGET 1 -->
54
55         <!-- WIDGET 3 -->
56         <ms-widget flippable="true" layout="column" flex="100" flex-gt-xs="50" flex-gt-md="20">
57             <!-- Front -->
58             <ms-widget-front class="grey-50-bg">
59                 <div class="pl-16 pr-8 pv-16 h-55" layout="row" layout-align="space-between center">
60                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="more">
61                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
62                     </md-button>
63                     <md-button style="cursor:auto" class="md-icon-button" aria-label="more">
64                         <md-icon md-font-icon="icon-phone-in-talk"></md-icon>
65                     </md-button>
66                 </div>
67
68                 <div class="pt-8 pb-32" layout="column" layout-align="center center">
69                     <div class="orange-fg font-size-52 line-height-72">
70                         {{vm.inbound.talking || 0}}
71                     </div>
72                     <div class="h3 secondary-text font-weight-500">{{'DASHBOARDS.TALKING' | translate | uppercase}}</div>
73                 </div>
74
75                 <div class="p-16 grey-200-bg text-center border-top" layout-align="start center">
76                     <span class="h6 orange-fg secondary-text text-truncate">{{'DASHBOARDS.TALKING_TEXT' | translate | uppercase}}</span>
77                 </div>
78             </ms-widget-front>
79             <!-- / Front -->
80
81             <!-- Back -->
82             <ms-widget-back class="p-16 grey-50-bg">
83                 <div class="flip-to-front">
84                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="Flip widget">
85                         <md-icon md-font-icon="icon-close" class="s16"></md-icon>
86                     </md-button>
87                 </div>
88
89                 <div>
90                     {{'DASHBOARDS.HELP.TALKING' | translate}}
91                 </div>
92             </ms-widget-back>
93             <!-- / Back -->
94
95         </ms-widget>
96         <!-- / WIDGET 3 -->
97
98         <!-- WIDGET 2 -->
99         <ms-widget flippable="true" layout="column" flex="100" flex-gt-xs="50" flex-gt-md="20">
100             <!-- Front -->
101             <ms-widget-front class="grey-50-bg">
102                 <div class="ph-8 pv-16 h-55" layout="row" layout-align="space-between center">
103                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="more">
104                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
105                     </md-button>
106                     <md-button style="cursor:auto" class="md-icon-button" aria-label="more">
107                         <md-icon md-font-icon="icon-phone"></md-icon>
108                     </md-button>
109                 </div>
110
111                 <div class="pt-8 pb-32" layout="column" layout-align="center center">
112                     <div class="red-fg font-size-52 line-height-72">
113                         {{vm.inbound.answered || 0}}
114                     </div>
115                     <div class="h3 secondary-text font-weight-500">{{'DASHBOARDS.INBOUND_ANSWERED' | translate | uppercase}}</div>
116                 </div>
117
118                 <div class="p-16 grey-200-bg text-center border-top" layout-align="start center">
119                     <span class="h6 red-fg secondary-text text-truncate">{{'DASHBOARDS.INBOUND_ANSWERED_TEXT' | translate | uppercase}}</span>
120                 </div>
121             </ms-widget-front>
122             <!-- / Front -->
123
124             <!-- Back -->
125             <ms-widget-back class="p-16 grey-50-bg">
126                 <div class="flip-to-front">
127                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="Flip widget">
128                         <md-icon md-font-icon="icon-close" class="s16"></md-icon>
129                     </md-button>
130                 </div>
131
132                 <div>
133                     {{'DASHBOARDS.HELP.INBOUND_ANSWERED' | translate}}
134                 </div>
135             </ms-widget-back>
136             <!-- / Back -->
137
138         </ms-widget>
139         <!-- / WIDGET 2 -->
140
141         <!-- WIDGET 4 -->
142         <ms-widget flippable="true" layout="column" flex="100" flex-gt-xs="50" flex-gt-md="20">
143             <!-- Front -->
144             <ms-widget-front class="grey-50-bg">
145                 <div class="pl-16 pr-8 pv-16 h-55" layout="row" layout-align="space-between center">
146                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="more">
147                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
148                     </md-button>
149                     <md-button style="cursor:auto" class="md-icon-button" aria-label="more">
150                         <md-icon md-font-icon="icon-phone-missed"></md-icon>
151                     </md-button>
152                 </div>
153
154                 <div class="pt-8 pb-32" layout="column" layout-align="center center">
155                     <div class="blue-grey-fg font-size-52 line-height-72">
156                         {{vm.inbound.abandoned || 0}}
157                     </div>
158                     <div class="h3 secondary-text font-weight-500">{{'DASHBOARDS.ABANDONED' | translate | uppercase}}</div>
159                 </div>
160
161                 <div class="p-16 grey-200-bg text-center border-top" layout-align="start center">
162                     <span class="h6 blue-grey-fg secondary-text text-truncate">{{'DASHBOARDS.ABANDONED_TEXT' | translate | uppercase}}</span>
163                 </div>
164             </ms-widget-front>
165             <!-- / Front -->
166
167             <!-- Back -->
168             <ms-widget-back class="p-16 grey-50-bg">
169                 <div class="flip-to-front">
170                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="Flip widget">
171                         <md-icon md-font-icon="icon-close" class="s16"></md-icon>
172                     </md-button>
173                 </div>
174
175                 <div>
176                     {{'DASHBOARDS.HELP.ABANDONED' | translate}}
177                 </div>
178             </ms-widget-back>
179             <!-- / Back -->
180
181         </ms-widget>
182         <!-- / WIDGET 4 -->
183
184         <!-- WIDGET 4 -->
185         <ms-widget flippable="true" layout="column" flex="100" flex-gt-xs="50" flex-gt-md="20">
186
187             <!-- Front -->
188             <ms-widget-front class="grey-50-bg">
189                 <div class="pl-16 pr-8 pv-16 h-55" layout="row" layout-align="space-between center">
190                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="more">
191                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
192                     </md-button>
193                     <md-button style="cursor:auto" class="md-icon-button" aria-label="more">
194                         <md-icon md-font-icon="icon-phone-outgoing"></md-icon>
195                     </md-button>
196                 </div>
197
198                 <div class="pt-8 pb-32" layout="column" layout-align="center center">
199                     <div class="blue-green-fg font-size-52 line-height-72">
200                         {{vm.inbound.total || 0}}
201                     </div>
202                     <div class="h3 secondary-text font-weight-500">{{'DASHBOARDS.TOTAL_OFFERED' | translate | uppercase}}</div>
203                 </div>
204
205                 <div class="p-16 grey-200-bg text-center border-top" layout-align="start center">
206                     <span class="h6 blue-green-fg secondary-text text-truncate">{{'DASHBOARDS.TOTAL_OFFERED_TEXT' | translate | uppercase}}</span>
207                 </div>
208             </ms-widget-front>
209             <!-- / Front -->
210
211             <!-- Back -->
212             <ms-widget-back class="p-16 grey-50-bg">
213                 <div class="flip-to-front">
214                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="Flip widget">
215                         <md-icon md-font-icon="icon-close" class="s16"></md-icon>
216                     </md-button>
217                 </div>
218
219                 <div>
220                     {{'DASHBOARDS.HELP.TOTAL_OFFERED' | translate}}
221                 </div>
222             </ms-widget-back>
223             <!-- / Back -->
224
225         </ms-widget>
226         <!-- / WIDGET 4 -->
227
228     </div>
229     <!-- / WIDGET GROUP -->
230
231     <!-- WIDGET GROUP -->
232     <div class="widget-group" layout="row" flex="100" layout-wrap>
233
234         <!-- WIDGET 1 -->
235         <ms-widget flippable="true" layout="column" flex="100" flex-gt-xs="50" flex-gt-md="20">
236
237             <!-- Front -->
238             <ms-widget-front class="grey-50-bg">
239                 <div class="ph-8 pv-16 h-55" layout="row" layout-align="space-between center">
240                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="more">
241                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
242                     </md-button>
243                     <md-button style="cursor:auto" class="md-icon-button" aria-label="more">
244                         <md-icon md-font-icon="icon-timer-sand"></md-icon>
245                     </md-button>
246                 </div>
247
248                 <div class="pt-8 pb-32" layout="column" layout-align="center center">
249                     <div class="light-blue-fg font-size-42 line-height-72">
250                         {{ vm.inbound.avgHoldTime || '00:00:00' }}
251                     </div>
252                     <div class="h3 secondary-text font-weight-500">{{'DASHBOARDS.AVG_HOLD_TIME' | translate | uppercase}}</div>
253                 </div>
254
255                 <div class="p-16 grey-200-bg text-center border-top" layout-align="start center">
256                     <span class="h6 light-blue-fg secondary-text text-truncate">{{'DASHBOARDS.AVG_HOLD_TIME_TEXT' | translate | uppercase}}</span>
257                 </div>
258             </ms-widget-front>
259             <!-- / Front -->
260
261             <!-- Back -->
262             <ms-widget-back class="p-16 grey-50-bg">
263                 <div class="flip-to-front">
264                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="Flip widget">
265                         <md-icon md-font-icon="icon-close" class="s16"></md-icon>
266                     </md-button>
267                 </div>
268
269                 <div>
270                     {{'DASHBOARDS.HELP.AVG_HOLD_TIME' | translate}}
271                 </div>
272             </ms-widget-back>
273             <!-- / Back -->
274
275         </ms-widget>
276         <!-- / WIDGET 1 -->
277
278         <!-- WIDGET 3 -->
279         <ms-widget flippable="true" layout="column" flex="100" flex-gt-xs="50" flex-gt-md="20">
280
281             <!-- Front -->
282             <ms-widget-front class="grey-50-bg">
283                 <div class="pl-16 pr-8 pv-16 h-55" layout="row" layout-align="space-between center">
284                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="more">
285                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
286                     </md-button>
287                     <md-button style="cursor:auto" class="md-icon-button" aria-label="more">
288                         <md-icon md-font-icon="icon-phone-in-talk"></md-icon>
289                     </md-button>
290                 </div>
291
292                 <div class="pt-8 pb-32" layout="column" layout-align="center center">
293                     <div class="orange-fg font-size-42 line-height-72">
294                         {{ vm.inbound.avgTalkTime || '00:00:00' }}
295                     </div>
296                     <div class="h3 secondary-text font-weight-500">{{'DASHBOARDS.AVG_TALK_TIME' | translate | uppercase}}</div>
297                 </div>
298
299                 <div class="p-16 grey-200-bg text-center border-top" layout-align="start center">
300                     <span class="h6 orange-fg secondary-text text-truncate">{{'DASHBOARDS.AVG_TALK_TIME_TEXT' | translate | uppercase}}</span>
301                 </div>
302             </ms-widget-front>
303             <!-- / Front -->
304
305             <!-- Back -->
306             <ms-widget-back class="p-16 grey-50-bg">
307                 <div class="flip-to-front">
308                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="Flip widget">
309                         <md-icon md-font-icon="icon-close" class="s16"></md-icon>
310                     </md-button>
311                 </div>
312
313                 <div>
314                     {{'DASHBOARDS.HELP.AVG_TALK_TIME' | translate}}
315                 </div>
316             </ms-widget-back>
317             <!-- / Back -->
318
319         </ms-widget>
320         <!-- / WIDGET 3 -->
321
322         <!-- WIDGET 2 -->
323         <ms-widget flippable="true" layout="column" flex="100" flex-gt-xs="50" flex-gt-md="20">
324
325             <!-- Front -->
326             <ms-widget-front class="grey-50-bg">
327                 <div class="ph-8 pv-16 h-55" layout="row" layout-align="space-between center">
328                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="more">
329                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
330                     </md-button>
331                     <md-button style="cursor:auto" class="md-icon-button" aria-label="more">
332                         <md-icon md-font-icon="icon-percent"></md-icon>
333                     </md-button>
334                 </div>
335
336                 <div class="pt-8 pb-32" layout="column" layout-align="center center">
337                     <div class="red-fg font-size-42 line-height-72">
338                         {{ vm.inbound.answerRate || 0 }}%
339                     </div>
340                     <div class="h3 secondary-text font-weight-500">{{'DASHBOARDS.INBOUND_ANSWER_RATE' | translate | uppercase}}</div>
341                 </div>
342
343                 <div class="p-16 grey-200-bg text-center border-top" layout-align="start center">
344                     <span class="h6 red-fg secondary-text text-truncate">{{'DASHBOARDS.INBOUND_ANSWER_RATE_TEXT' | translate | uppercase}}</span>
345                 </div>
346             </ms-widget-front>
347             <!-- / Front -->
348
349             <!-- Back -->
350             <ms-widget-back class="p-16 grey-50-bg">
351                 <div class="flip-to-front">
352                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="Flip widget">
353                         <md-icon md-font-icon="icon-close" class="s16"></md-icon>
354                     </md-button>
355                 </div>
356
357                 <div>
358                     {{'DASHBOARDS.HELP.INBOUND_ANSWER_RATE' | translate}}
359                 </div>
360             </ms-widget-back>
361             <!-- / Back -->
362
363         </ms-widget>
364         <!-- / WIDGET 2 -->
365
366         <!-- WIDGET 4 -->
367         <ms-widget flippable="true" layout="column" flex="100" flex-gt-xs="50" flex-gt-md="20">
368
369             <!-- Front -->
370             <ms-widget-front class="grey-50-bg">
371                 <div class="pl-16 pr-8 pv-16 h-55" layout="row" layout-align="space-between center">
372                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="more">
373                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
374                     </md-button>
375                     <md-button style="cursor:auto" class="md-icon-button" aria-label="more">
376                         <md-icon md-font-icon="icon-percent"></md-icon>
377                     </md-button>
378                 </div>
379
380                 <div class="pt-8 pb-32" layout="column" layout-align="center center">
381                     <div class="blue-grey-fg font-size-42 line-height-72">
382                         {{ vm.inbound.abandonRate || 0 }}%
383                     </div>
384                     <div class="h3 secondary-text font-weight-500">{{'DASHBOARDS.ABANDON_RATE' | translate | uppercase}}</div>
385                 </div>
386
387                 <div class="p-16 grey-200-bg text-center border-top" layout-align="start center">
388                     <span class="h6 blue-grey-fg secondary-text text-truncate">{{'DASHBOARDS.ABANDON_RATE_TEXT' | translate | uppercase}}</span>
389                 </div>
390             </ms-widget-front>
391             <!-- / Front -->
392
393             <!-- Back -->
394             <ms-widget-back class="p-16 grey-50-bg">
395                 <div class="flip-to-front">
396                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="Flip widget">
397                         <md-icon md-font-icon="icon-close" class="s16"></md-icon>
398                     </md-button>
399                 </div>
400
401                 <div>
402                     {{'DASHBOARDS.HELP.ABANDON_RATE' | translate}}
403                 </div>
404             </ms-widget-back>
405             <!-- / Back -->
406
407         </ms-widget>
408         <!-- / WIDGET 4 -->
409
410         <!-- WIDGET 4 -->
411         <ms-widget flippable="true" layout="column" flex="100" flex-gt-xs="50" flex-gt-md="20">
412
413             <!-- Front -->
414             <ms-widget-front class="grey-50-bg">
415                 <div class="pl-16 pr-8 pv-16 h-55" layout="row" layout-align="space-between center">
416                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="more">
417                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
418                     </md-button>
419                     <md-button style="cursor:auto" class="md-icon-button" aria-label="more">
420                         <md-icon md-font-icon="icon-phone-dots"></md-icon>
421                     </md-button>
422                 </div>
423
424                 <div class="pt-8 pb-32" layout="column" layout-align="center center">
425                     <div class="blue-green-fg font-size-52 line-height-72">
426                         {{vm.inbound.originated || 0}}
427                     </div>
428                     <div class="h3 secondary-text font-weight-500">{{'DASHBOARDS.ORIGINATED' | translate | uppercase}}</div>
429                 </div>
430
431                 <div class="p-16 grey-200-bg text-center border-top" layout-align="start center">
432                     <span class="h6 blue-green-fg secondary-text text-truncate">{{'DASHBOARDS.ORIGINATED_TEXT' | translate | uppercase}}</span>
433                 </div>
434             </ms-widget-front>
435             <!-- / Front -->
436
437             <!-- Back -->
438             <ms-widget-back class="p-16 grey-50-bg">
439                 <div class="flip-to-front">
440                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="Flip widget">
441                         <md-icon md-font-icon="icon-close" class="s16"></md-icon>
442                     </md-button>
443                 </div>
444
445                 <div>
446                     {{'DASHBOARDS.HELP.ORIGINATED' | translate}}
447                 </div>
448             </ms-widget-back>
449             <!-- / Back -->
450
451         </ms-widget>
452         <!-- / WIDGET 4 -->
453
454     </div>
455     <!-- / WIDGET GROUP -->
456 </div>
457 <!-- / WIDGET OUTBOUND -->
458
459 <!-- WIDGET INBOUND -->
460 <div class="dashboard-container md-background-bg md-whiteframe-1dp">
461     <div class="pb-16" layout="row" layout-align="start center">
462         <md-icon md-font-icon="icon-phone-outgoing" class="m-0 mr-16"></md-icon>
463         <div class="h2 secondary-text" translate="DASHBOARDS.TODAY_IVR_CAMPAIGNS_STATS">Today IVR campaigns stats</div>
464     </div>
465
466     <!-- WIDGET GROUP -->
467     <div class="widget-group" layout="row" flex="100" layout-wrap>
468
469         <!-- WIDGET 4 -->
470         <ms-widget flippable="true" layout="column" flex="100" flex-gt-xs="50" flex-gt-md="20">
471
472             <!-- Front -->
473             <ms-widget-front class="grey-50-bg">
474                 <div class="pl-16 pr-8 pv-16 h-55" layout="row" layout-align="space-between center">
475                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="more">
476                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
477                     </md-button>
478                     <md-button style="cursor:auto" class="md-icon-button" aria-label="more">
479                         <md-icon md-font-icon="icon-phone-dots"></md-icon>
480                     </md-button>
481                 </div>
482
483                 <div class="pt-8 pb-32" layout="column" layout-align="center center">
484                     <div class="blue-green-fg font-size-52 line-height-72">
485                         {{vm.ivr.originated || 0}}/{{vm.ivr.limitCalls || 0}}
486                     </div>
487                     <div class="h3 secondary-text font-weight-500">{{'DASHBOARDS.ORIGINATED' | translate | uppercase}}/{{'DASHBOARDS.LIMITED' | translate | uppercase}}</div>
488                 </div>
489
490                 <div class="p-16 grey-200-bg text-center border-top" layout-align="start center">
491                     <span class="h6 blue-green-fg secondary-text text-truncate">{{'DASHBOARDS.LIMITED_TEXT' | translate | uppercase}}</span>
492                 </div>
493             </ms-widget-front>
494             <!-- / Front -->
495
496             <!-- Back -->
497             <ms-widget-back class="p-16 grey-50-bg">
498                 <div class="flip-to-front">
499                     <md-button class="md-icon-button" ng-click="flipWidget()" aria-label="Flip widget">
500                         <md-icon md-font-icon="icon-close" class="s16"></md-icon>
501                     </md-button>
502                 </div>
503
504                 <div>
505                     {{'DASHBOARDS.HELP.ORIGINATEDLIMITED' | translate}}
506                 </div>
507             </ms-widget-back>
508             <!-- / Back -->
509
510         </ms-widget>
511         <!-- / WIDGET 4 -->
512
513     </div>
514     <!-- / WIDGET GROUP -->
515 </div>
516 <!-- / WIDGET IVR -->