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-whatsapp" 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-green-fg font-size-52 line-height-72">
 227             {{vm.inbound.unmanaged || 0}}
 228           </div>
 229           <div class="h3 secondary-text font-weight-500">
 230             {{'DASHBOARDS.UNMANAGED' | 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-green-fg secondary-text text-truncate"
 239             >{{'DASHBOARDS.UNMANAGED_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.UNMANAGED' | 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="50"
 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 2 -->
 392     <ms-widget
 393       flippable="true"
 394       layout="column"
 395       flex="100"
 396       flex-gt-xs="50"
 397       flex-gt-md="25"
 398     >
 399       <!-- Front -->
 400       <ms-widget-front class="grey-50-bg">
 401         <div
 402           class="ph-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="red-fg font-size-42 line-height-72">
 417             {{ vm.inbound.answerRate || 0 }}%
 418           </div>
 419           <div class="h3 secondary-text font-weight-500">
 420             {{'DASHBOARDS.MANAGED_RATE' | 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 red-fg secondary-text text-truncate"
 429             >{{'DASHBOARDS.MANAGED_RATE_TEXT' | translate | uppercase}}</span
 430           >
 431         </div>
 432       </ms-widget-front>
 433       <!-- / Front -->
 434
 435       <!-- Back -->
 436       <ms-widget-back class="p-16 grey-50-bg">
 437         <div class="flip-to-front">
 438           <md-button
 439             class="md-icon-button"
 440             ng-click="flipWidget()"
 441             aria-label="Flip widget"
 442           >
 443             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 444           </md-button>
 445         </div>
 446
 447         <div>{{'DASHBOARDS.HELP.MANAGED_RATE' | translate}}</div>
 448       </ms-widget-back>
 449       <!-- / Back -->
 450     </ms-widget>
 451     <!-- / WIDGET 2 -->
 452
 453     <!-- WIDGET 4 -->
 454     <ms-widget
 455       flippable="true"
 456       layout="column"
 457       flex="100"
 458       flex-gt-xs="50"
 459       flex-gt-md="25"
 460     >
 461       <!-- Front -->
 462       <ms-widget-front class="grey-50-bg">
 463         <div
 464           class="pl-16 pr-8 pv-16 h-55"
 465           layout="row"
 466           layout-align="space-between center"
 467         >
 468           <md-button
 469             class="md-icon-button"
 470             ng-click="flipWidget()"
 471             aria-label="more"
 472           >
 473             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 474           </md-button>
 475         </div>
 476
 477         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 478           <div class="blue-grey-fg font-size-42 line-height-72">
 479             {{ vm.inbound.abandonRate || 0 }}%
 480           </div>
 481           <div class="h3 secondary-text font-weight-500">
 482             {{'DASHBOARDS.UNMANAGED_RATE' | translate | uppercase}}
 483           </div>
 484         </div>
 485
 486         <div
 487           class="p-16 grey-200-bg text-center border-top"
 488           layout-align="start center"
 489         >
 490           <span class="h6 blue-grey-fg secondary-text text-truncate"
 491             >{{'DASHBOARDS.UNMANAGED_RATE_TEXT' | translate | uppercase}}</span
 492           >
 493         </div>
 494       </ms-widget-front>
 495       <!-- / Front -->
 496
 497       <!-- Back -->
 498       <ms-widget-back class="p-16 grey-50-bg">
 499         <div class="flip-to-front">
 500           <md-button
 501             class="md-icon-button"
 502             ng-click="flipWidget()"
 503             aria-label="Flip widget"
 504           >
 505             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 506           </md-button>
 507         </div>
 508
 509         <div>{{'DASHBOARDS.HELP.UNMANAGED_RATE' | translate}}</div>
 510       </ms-widget-back>
 511       <!-- / Back -->
 512     </ms-widget>
 513     <!-- / WIDGET 4 -->
 514   </div>
 515   <!-- / WIDGET GROUP -->
 516 </div>
 517 <!-- / WIDGET INBOUND -->