Motion >> Repos - motion-next.git/blob

   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-hangouts" class="m-0 mr-16"></md-icon>
   5     <div
   6       class="h2 secondary-text"
   7       translate="DASHBOARDS.TODAY_INTERACTIONS_STATS"
   8     >
   9       Today Interactions STATS
  10     </div>
  11   </div>
  12
  13   <!-- WIDGET GROUP -->
  14   <div class="widget-group" layout="row" flex="100" layout-wrap>
  15     <!-- WIDGET 1 -->
  16     <ms-widget
  17       flippable="true"
  18       layout="column"
  19       flex="100"
  20       flex-gt-xs="50"
  21       flex-gt-md="20"
  22     >
  23       <!-- Front -->
  24       <ms-widget-front class="grey-50-bg">
  25         <div
  26           class="ph-8 pv-16 h-55"
  27           layout="row"
  28           layout-align="space-between center"
  29         >
  30           <md-button
  31             class="md-icon-button"
  32             ng-click="flipWidget()"
  33             aria-label="more"
  34           >
  35             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
  36           </md-button>
  37         </div>
  38
  39         <div class="pt-8 pb-32" layout="column" layout-align="center center">
  40           <div class="light-blue-fg font-size-52 line-height-72">
  41             {{vm.inbound.waiting || 0}}
  42           </div>
  43           <div class="h3 secondary-text font-weight-500">
  44             {{'DASHBOARDS.WAITING' | translate | uppercase}}
  45           </div>
  46         </div>
  47
  48         <div
  49           class="p-16 grey-200-bg text-center border-top"
  50           layout-align="start center"
  51         >
  52           <span class="h6 light-blue-fg secondary-text text-truncate"
  53             >{{'DASHBOARDS.WAITING_TEXT' | translate | uppercase}}</span
  54           >
  55         </div>
  56       </ms-widget-front>
  57       <!-- / Front -->
  58
  59       <!-- Back -->
  60       <ms-widget-back class="p-16 grey-50-bg">
  61         <div class="flip-to-front">
  62           <md-button
  63             class="md-icon-button"
  64             ng-click="flipWidget()"
  65             aria-label="Flip widget"
  66           >
  67             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
  68           </md-button>
  69         </div>
  70
  71         <div>{{'DASHBOARDS.HELP.WAITING' | translate}}</div>
  72       </ms-widget-back>
  73       <!-- / Back -->
  74     </ms-widget>
  75     <!-- / WIDGET 1 -->
  76
  77     <!-- WIDGET 3 -->
  78     <ms-widget
  79       flippable="true"
  80       layout="column"
  81       flex="100"
  82       flex-gt-xs="50"
  83       flex-gt-md="20"
  84     >
  85       <!-- Front -->
  86       <ms-widget-front class="grey-50-bg">
  87         <div
  88           class="pl-16 pr-8 pv-16 h-55"
  89           layout="row"
  90           layout-align="space-between center"
  91         >
  92           <md-button
  93             class="md-icon-button"
  94             ng-click="flipWidget()"
  95             aria-label="more"
  96           >
  97             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
  98           </md-button>
  99         </div>
 100
 101         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 102           <div class="orange-fg font-size-52 line-height-72">
 103             {{vm.inbound.talking || 0}}
 104           </div>
 105           <div class="h3 secondary-text font-weight-500">
 106             {{'DASHBOARDS.OPENED' | translate | uppercase}}
 107           </div>
 108         </div>
 109
 110         <div
 111           class="p-16 grey-200-bg text-center border-top"
 112           layout-align="start center"
 113         >
 114           <span class="h6 orange-fg secondary-text text-truncate"
 115             >{{'DASHBOARDS.OPENED_TEXT' | translate | uppercase}}</span
 116           >
 117         </div>
 118       </ms-widget-front>
 119       <!-- / Front -->
 120
 121       <!-- Back -->
 122       <ms-widget-back class="p-16 grey-50-bg">
 123         <div class="flip-to-front">
 124           <md-button
 125             class="md-icon-button"
 126             ng-click="flipWidget()"
 127             aria-label="Flip widget"
 128           >
 129             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 130           </md-button>
 131         </div>
 132
 133         <div>{{'DASHBOARDS.HELP.OPENED' | translate}}</div>
 134       </ms-widget-back>
 135       <!-- / Back -->
 136     </ms-widget>
 137     <!-- / WIDGET 3 -->
 138
 139     <!-- WIDGET 2 -->
 140     <ms-widget
 141       flippable="true"
 142       layout="column"
 143       flex="100"
 144       flex-gt-xs="50"
 145       flex-gt-md="20"
 146     >
 147       <!-- Front -->
 148       <ms-widget-front class="grey-50-bg">
 149         <div
 150           class="ph-8 pv-16 h-55"
 151           layout="row"
 152           layout-align="space-between center"
 153         >
 154           <md-button
 155             class="md-icon-button"
 156             ng-click="flipWidget()"
 157             aria-label="more"
 158           >
 159             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 160           </md-button>
 161         </div>
 162
 163         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 164           <div class="red-fg font-size-52 line-height-72">
 165             {{vm.inbound.answered || 0}}
 166           </div>
 167           <div class="h3 secondary-text font-weight-500">
 168             {{'DASHBOARDS.MANAGED' | translate | uppercase}}
 169           </div>
 170         </div>
 171
 172         <div
 173           class="p-16 grey-200-bg text-center border-top"
 174           layout-align="start center"
 175         >
 176           <span class="h6 red-fg secondary-text text-truncate"
 177             >{{'DASHBOARDS.MANAGED_TEXT' | translate | uppercase}}</span
 178           >
 179         </div>
 180       </ms-widget-front>
 181       <!-- / Front -->
 182
 183       <!-- Back -->
 184       <ms-widget-back class="p-16 grey-50-bg">
 185         <div class="flip-to-front">
 186           <md-button
 187             class="md-icon-button"
 188             ng-click="flipWidget()"
 189             aria-label="Flip widget"
 190           >
 191             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 192           </md-button>
 193         </div>
 194
 195         <div>{{'DASHBOARDS.HELP.MANAGED' | translate}}</div>
 196       </ms-widget-back>
 197       <!-- / Back -->
 198     </ms-widget>
 199     <!-- / WIDGET 2 -->
 200
 201     <!-- WIDGET 4 -->
 202     <ms-widget
 203       flippable="true"
 204       layout="column"
 205       flex="100"
 206       flex-gt-xs="50"
 207       flex-gt-md="20"
 208     >
 209       <!-- Front -->
 210       <ms-widget-front class="grey-50-bg">
 211         <div
 212           class="pl-16 pr-8 pv-16 h-55"
 213           layout="row"
 214           layout-align="space-between center"
 215         >
 216           <md-button
 217             class="md-icon-button"
 218             ng-click="flipWidget()"
 219             aria-label="more"
 220           >
 221             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 222           </md-button>
 223         </div>
 224
 225         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 226           <div class="blue-grey-fg font-size-52 line-height-72">
 227             {{vm.inbound.abandoned || 0}}
 228           </div>
 229           <div class="h3 secondary-text font-weight-500">
 230             {{'DASHBOARDS.ABANDONED' | translate | uppercase}}
 231           </div>
 232         </div>
 233
 234         <div
 235           class="p-16 grey-200-bg text-center border-top"
 236           layout-align="start center"
 237         >
 238           <span class="h6 blue-grey-fg secondary-text text-truncate"
 239             >{{'DASHBOARDS.ABANDONED_TEXT' | translate | uppercase}}</span
 240           >
 241         </div>
 242       </ms-widget-front>
 243       <!-- / Front -->
 244
 245       <!-- Back -->
 246       <ms-widget-back class="p-16 grey-50-bg">
 247         <div class="flip-to-front">
 248           <md-button
 249             class="md-icon-button"
 250             ng-click="flipWidget()"
 251             aria-label="Flip widget"
 252           >
 253             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 254           </md-button>
 255         </div>
 256
 257         <div>{{'DASHBOARDS.HELP.ABANDONED' | translate}}</div>
 258       </ms-widget-back>
 259       <!-- / Back -->
 260     </ms-widget>
 261     <!-- / WIDGET 4 -->
 262
 263     <!-- WIDGET 4 -->
 264     <ms-widget
 265       flippable="true"
 266       layout="column"
 267       flex="100"
 268       flex-gt-xs="50"
 269       flex-gt-md="20"
 270     >
 271       <!-- Front -->
 272       <ms-widget-front class="grey-50-bg">
 273         <div
 274           class="pl-16 pr-8 pv-16 h-55"
 275           layout="row"
 276           layout-align="space-between center"
 277         >
 278           <md-button
 279             class="md-icon-button"
 280             ng-click="flipWidget()"
 281             aria-label="more"
 282           >
 283             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 284           </md-button>
 285         </div>
 286
 287         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 288           <div class="blue-green-fg font-size-52 line-height-72">
 289             {{vm.inbound.total || 0}}
 290           </div>
 291           <div class="h3 secondary-text font-weight-500">
 292             {{'DASHBOARDS.TOTAL_OFFERED' | translate | uppercase}}
 293           </div>
 294         </div>
 295
 296         <div
 297           class="p-16 grey-200-bg text-center border-top"
 298           layout-align="start center"
 299         >
 300           <span class="h6 blue-green-fg secondary-text text-truncate"
 301             >{{'DASHBOARDS.TOTAL_OFFERED_TEXT' | translate | uppercase}}</span
 302           >
 303         </div>
 304       </ms-widget-front>
 305       <!-- / Front -->
 306
 307       <!-- Back -->
 308       <ms-widget-back class="p-16 grey-50-bg">
 309         <div class="flip-to-front">
 310           <md-button
 311             class="md-icon-button"
 312             ng-click="flipWidget()"
 313             aria-label="Flip widget"
 314           >
 315             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 316           </md-button>
 317         </div>
 318
 319         <div>{{'DASHBOARDS.HELP.TOTAL_OFFERED' | translate}}</div>
 320       </ms-widget-back>
 321       <!-- / Back -->
 322     </ms-widget>
 323     <!-- / WIDGET 4 -->
 324   </div>
 325   <!-- / WIDGET GROUP -->
 326
 327   <!-- WIDGET GROUP -->
 328   <div class="widget-group" layout="row" flex="100" layout-wrap>
 329     <!-- WIDGET 1 -->
 330     <ms-widget
 331       flippable="true"
 332       layout="column"
 333       flex="100"
 334       flex-gt-xs="50"
 335       flex-gt-md="20"
 336     >
 337       <!-- Front -->
 338       <ms-widget-front class="grey-50-bg">
 339         <div
 340           class="ph-8 pv-16 h-55"
 341           layout="row"
 342           layout-align="space-between center"
 343         >
 344           <md-button
 345             class="md-icon-button"
 346             ng-click="flipWidget()"
 347             aria-label="more"
 348           >
 349             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 350           </md-button>
 351         </div>
 352
 353         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 354           <div class="light-blue-fg font-size-42 line-height-72">
 355             {{ vm.inbound.avgHoldTime || '00:00:00' }}
 356           </div>
 357           <div class="h3 secondary-text font-weight-500">
 358             {{'DASHBOARDS.AVG_HOLD_TIME' | translate | uppercase}}
 359           </div>
 360         </div>
 361
 362         <div
 363           class="p-16 grey-200-bg text-center border-top"
 364           layout-align="start center"
 365         >
 366           <span class="h6 light-blue-fg secondary-text text-truncate"
 367             >{{'DASHBOARDS.AVG_HOLD_TIME_TEXT' | translate | uppercase}}</span
 368           >
 369         </div>
 370       </ms-widget-front>
 371       <!-- / Front -->
 372
 373       <!-- Back -->
 374       <ms-widget-back class="p-16 grey-50-bg">
 375         <div class="flip-to-front">
 376           <md-button
 377             class="md-icon-button"
 378             ng-click="flipWidget()"
 379             aria-label="Flip widget"
 380           >
 381             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 382           </md-button>
 383         </div>
 384
 385         <div>{{'DASHBOARDS.HELP.AVG_HOLD_TIME' | translate}}</div>
 386       </ms-widget-back>
 387       <!-- / Back -->
 388     </ms-widget>
 389     <!-- / WIDGET 1 -->
 390
 391     <!-- WIDGET 3 -->
 392     <ms-widget
 393       flippable="true"
 394       layout="column"
 395       flex="100"
 396       flex-gt-xs="50"
 397       flex-gt-md="20"
 398     >
 399       <!-- Front -->
 400       <ms-widget-front class="grey-50-bg">
 401         <div
 402           class="pl-16 pr-8 pv-16 h-55"
 403           layout="row"
 404           layout-align="space-between center"
 405         >
 406           <md-button
 407             class="md-icon-button"
 408             ng-click="flipWidget()"
 409             aria-label="more"
 410           >
 411             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 412           </md-button>
 413         </div>
 414
 415         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 416           <div class="orange-fg font-size-42 line-height-72">
 417             {{ vm.inbound.avgTalkTime || '00:00:00' }}
 418           </div>
 419           <div class="h3 secondary-text font-weight-500">
 420             {{'DASHBOARDS.AVG_MANAGED_TIME' | translate | uppercase}}
 421           </div>
 422         </div>
 423
 424         <div
 425           class="p-16 grey-200-bg text-center border-top"
 426           layout-align="start center"
 427         >
 428           <span class="h6 orange-fg secondary-text text-truncate"
 429             >{{'DASHBOARDS.AVG_MANAGED_TIME_TEXT' | translate |
 430             uppercase}}</span
 431           >
 432         </div>
 433       </ms-widget-front>
 434       <!-- / Front -->
 435
 436       <!-- Back -->
 437       <ms-widget-back class="p-16 grey-50-bg">
 438         <div class="flip-to-front">
 439           <md-button
 440             class="md-icon-button"
 441             ng-click="flipWidget()"
 442             aria-label="Flip widget"
 443           >
 444             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 445           </md-button>
 446         </div>
 447
 448         <div>{{'DASHBOARDS.HELP.AVG_MANAGED_TIME' | translate}}</div>
 449       </ms-widget-back>
 450       <!-- / Back -->
 451     </ms-widget>
 452     <!-- / WIDGET 3 -->
 453
 454     <!-- WIDGET 2 -->
 455     <ms-widget
 456       flippable="true"
 457       layout="column"
 458       flex="100"
 459       flex-gt-xs="50"
 460       flex-gt-md="20"
 461     >
 462       <!-- Front -->
 463       <ms-widget-front class="grey-50-bg">
 464         <div
 465           class="ph-8 pv-16 h-55"
 466           layout="row"
 467           layout-align="space-between center"
 468         >
 469           <md-button
 470             class="md-icon-button"
 471             ng-click="flipWidget()"
 472             aria-label="more"
 473           >
 474             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 475           </md-button>
 476         </div>
 477
 478         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 479           <div class="red-fg font-size-42 line-height-72">
 480             {{ vm.inbound.answerRate || 0 }}%
 481           </div>
 482           <div class="h3 secondary-text font-weight-500">
 483             {{'DASHBOARDS.MANAGED_RATE' | translate | uppercase}}
 484           </div>
 485         </div>
 486
 487         <div
 488           class="p-16 grey-200-bg text-center border-top"
 489           layout-align="start center"
 490         >
 491           <span class="h6 red-fg secondary-text text-truncate"
 492             >{{'DASHBOARDS.MANAGED_RATE_TEXT' | translate | uppercase}}</span
 493           >
 494         </div>
 495       </ms-widget-front>
 496       <!-- / Front -->
 497
 498       <!-- Back -->
 499       <ms-widget-back class="p-16 grey-50-bg">
 500         <div class="flip-to-front">
 501           <md-button
 502             class="md-icon-button"
 503             ng-click="flipWidget()"
 504             aria-label="Flip widget"
 505           >
 506             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 507           </md-button>
 508         </div>
 509
 510         <div>{{'DASHBOARDS.HELP.MANAGED_RATE' | translate}}</div>
 511       </ms-widget-back>
 512       <!-- / Back -->
 513     </ms-widget>
 514     <!-- / WIDGET 2 -->
 515
 516     <!-- WIDGET 4 -->
 517     <ms-widget
 518       flippable="true"
 519       layout="column"
 520       flex="100"
 521       flex-gt-xs="50"
 522       flex-gt-md="20"
 523     >
 524       <!-- Front -->
 525       <ms-widget-front class="grey-50-bg">
 526         <div
 527           class="pl-16 pr-8 pv-16 h-55"
 528           layout="row"
 529           layout-align="space-between center"
 530         >
 531           <md-button
 532             class="md-icon-button"
 533             ng-click="flipWidget()"
 534             aria-label="more"
 535           >
 536             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 537           </md-button>
 538         </div>
 539
 540         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 541           <div class="blue-grey-fg font-size-42 line-height-72">
 542             {{ vm.inbound.abandonRate || 0 }}%
 543           </div>
 544           <div class="h3 secondary-text font-weight-500">
 545             {{'DASHBOARDS.ABANDONED_RATE' | translate | uppercase}}
 546           </div>
 547         </div>
 548
 549         <div
 550           class="p-16 grey-200-bg text-center border-top"
 551           layout-align="start center"
 552         >
 553           <span class="h6 blue-grey-fg secondary-text text-truncate"
 554             >{{'DASHBOARDS.ABANDONED_RATE_TEXT' | translate | uppercase}}</span
 555           >
 556         </div>
 557       </ms-widget-front>
 558       <!-- / Front -->
 559
 560       <!-- Back -->
 561       <ms-widget-back class="p-16 grey-50-bg">
 562         <div class="flip-to-front">
 563           <md-button
 564             class="md-icon-button"
 565             ng-click="flipWidget()"
 566             aria-label="Flip widget"
 567           >
 568             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 569           </md-button>
 570         </div>
 571
 572         <div>{{'DASHBOARDS.HELP.ABANDONED_RATE' | translate}}</div>
 573       </ms-widget-back>
 574       <!-- / Back -->
 575     </ms-widget>
 576     <!-- / WIDGET 4 -->
 577
 578     <!-- WIDGET 4 -->
 579     <ms-widget
 580       flippable="true"
 581       layout="column"
 582       flex="100"
 583       flex-gt-xs="50"
 584       flex-gt-md="20"
 585     >
 586       <!-- Front -->
 587       <ms-widget-front class="grey-50-bg">
 588         <div
 589           class="pl-16 pr-8 pv-16 h-55"
 590           layout="row"
 591           layout-align="space-between center"
 592         >
 593           <md-button
 594             class="md-icon-button"
 595             ng-click="flipWidget()"
 596             aria-label="more"
 597           >
 598             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 599           </md-button>
 600         </div>
 601
 602         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 603           <div class="blue-green-fg font-size-52 line-height-72">
 604             {{vm.inbound.unmanaged || 0}}
 605           </div>
 606           <div class="h3 secondary-text font-weight-500">
 607             {{'DASHBOARDS.UNMANAGED' | translate | uppercase}}
 608           </div>
 609         </div>
 610
 611         <div
 612           class="p-16 grey-200-bg text-center border-top"
 613           layout-align="start center"
 614         >
 615           <span class="h6 blue-green-fg secondary-text text-truncate"
 616             >{{'DASHBOARDS.UNMANAGED_TEXT' | translate | uppercase}}</span
 617           >
 618         </div>
 619       </ms-widget-front>
 620       <!-- / Front -->
 621
 622       <!-- Back -->
 623       <ms-widget-back class="p-16 grey-50-bg">
 624         <div class="flip-to-front">
 625           <md-button
 626             class="md-icon-button"
 627             ng-click="flipWidget()"
 628             aria-label="Flip widget"
 629           >
 630             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 631           </md-button>
 632         </div>
 633
 634         <div>{{'DASHBOARDS.HELP.UNMANAGED' | translate}}</div>
 635       </ms-widget-back>
 636       <!-- / Back -->
 637     </ms-widget>
 638     <!-- / WIDGET 4 -->
 639   </div>
 640   <!-- / WIDGET GROUP -->
 641 </div>
 642 <!-- / WIDGET INBOUND -->