Skip to content

Commit

Permalink
Merge pull request #870 from abhishek-webkul/gli-1528
Browse files Browse the repository at this point in the history 
Updated: Updated KPI design and added new KPIs at back office
  • Loading branch information
@rohit053
rohit053 authored Mar 18, 2024
2 parents 8cd1d29 + d278fbe commit 9f176b8
Show file tree
Hide file tree
Showing 19 changed files with 965 additions and 261 deletions.
192 changes: 148 additions & 44 deletions admin/themes/default/sass/partials/_kpi.sass
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,177 @@
$kpi-rows-gap: 8px
$kpi-gap: 10px

.kpi-container
padding-bottom: 10px !important
.kpi-refresh
position: absolute
z-index: 1
right: 20px
display: flex
justify-content: space-between
padding: 12px !important
.kpis-wrap
width: 100%
white-space: nowrap
overflow-x: auto
font-size: 0
margin-bottom: -$kpi-rows-gap
display: flex
flex-wrap: wrap
margin-left: -($kpi-gap / 2)
margin-right: -($kpi-gap / 2)
.kpi-wrap
display: inline-block
width: 20%
margin-bottom: $kpi-rows-gap
padding-left: $kpi-gap / 2
padding-right: $kpi-gap / 2
.actions-wrap
width: 16px
margin-left: 16px
button
padding: 0
border: none
opacity: 0.2
display: block
width: 100%
&:not(:first-of-type)
margin-top: 4px
&:hover
opacity: 0.5
background-color: #fff
&:focus,
&:active
outline: none !important
i
color: #000 !important
font-size: 16px
&.icon-ellipsis-vertical
position: relative
top: 3px
.dropdown-menu
top: 25px
right: 0
left: unset
min-width: 200px
font-size: 13px
padding: 8px 12px
label
font-weight: normal
&.no-wrapping
.kpis-wrap
white-space: normal
flex-wrap: nowrap
.kpi-wrap
@media (min-width: $screen-lg)
min-width: 20%
@media (max-width: $screen-lg)
min-width: 20%
@media (max-width: $screen-sm)
min-width: 33.33%
@media (max-width: $screen-xs)
min-width: 50%

@media (max-width: $screen-desktop)
&.no-wrapping
.kpis-wrap
flex-wrap: nowrap !important

@media (max-width: $screen-lg)
.kpi-container .kpis-wrap .kpi-wrap
width: 20%
@media (max-width: $screen-sm)
.kpi-container .kpis-wrap .kpi-wrap
width: 33.33%
@media (max-width: $screen-xs)
.kpi-container .kpis-wrap .kpi-wrap
width: 50%

.box-stats
display: block
height: 64px
margin-bottom: 10px
height: 100%
.boxchart-overlay
@include padding(10px, 10px, 5px, 10px)
@include margin-right(10px)
@include float(left)
@include border-radius(3px)
.kpi-content
width: 100%
height: 100%
position: relative
@include padding-left(40px)
@include float(left)
i
border: 1px solid #e7edfa
border-left-width: 3px
border-radius: 6px
padding: 4px 8px 8px 42px
display: flex
flex-direction: column
justify-content: space-between
white-space: normal
.title-subtitle
display: flex
justify-content: space-between
.title
display: block
color: #666
font-size: 13px
i
position: absolute
top: 5px
font-size: 15px
text-align: center
color: white
line-height: 26px
background: #eee
width: 28px
height: 28px
@include left(5px)
@include border-radius(6px)
&::before
position: absolute
top: 1px
left: 8px
.subtitle
display: block
text-transform: capitalize
color: #aaa
font-size: 10px
position: relative
top: 3px
text-align: right
.value-container
.value
display: block
clear: both
font-size: 14px
font-weight: bold
color: #666
min-height: 22px
&.loading
height: 22px
min-width: 40px
.arrow
position: absolute
top: 0
font-size: 26px
text-align: center
color: white
line-height: 26px
@include left(0)
@include border-radius(3px)

.title
display: block
color: #666
.subtitle
display: block
text-transform: uppercase
color: #aaa
.value
display: block
clear: both
font-size: 1.5em
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
&.loading
height: 1.2em
width: 200px
bottom: 7px
right: 9px
i
color: #828282 !important
&:hover
text-decoration: none
.color1
.kpi-content
border-left-color: #2BA8E3
i, .boxchart-overlay
color: #2BA8E3 !important
.value
color: #2BA8E3
.color2
.kpi-content
border-left-color: #FF5450
i, .boxchart-overlay
color: #FF5450 !important
.value
color: #FF5450
.color3
.kpi-content
border-left-color: #9E5BA1
i, .boxchart-overlay
color: #9E5BA1 !important
.value
color: #9E5BA1
.color4
.kpi-content
border-left-color: #95CC6B
i, .boxchart-overlay
color: #95CC6B !important
.value
color: #95CC6B

.data_chart
rect
Expand All @@ -80,4 +184,4 @@
stroke: black
.area
fill: rgba(white,0.30)
stroke-width: 0
stroke-width: 0
42 changes: 2 additions & 40 deletions admin/themes/default/template/controllers/orders/helpers/view/view.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,46 +68,8 @@
<div>{$hook_invoice}</div>
{/if}

<div class="panel kpi-container">
<div class="row">
<div class="col-xs-6 col-sm-3 box-stats color3" >
<div class="kpi-content">
<i class="icon-calendar-empty"></i>
<span class="title">{l s='Date'}</span>
<span class="value">{dateFormat date=$order->date_add full=false}</span>
</div>
</div>
<div class="col-xs-6 col-sm-3 box-stats color4" >
<div class="kpi-content">
<i class="icon-money"></i>
<span class="title">{l s='Total'}</span>
<span class="value">{displayPrice price=$order->total_paid_tax_incl currency=$currency->id}</span>
</div>
</div>
<div class="col-xs-6 col-sm-3 box-stats color2" >
<div class="kpi-content">
<i class="icon-comments"></i>
<span class="title">{l s='Messages'}</span>
<span class="value"><a href="{$link->getAdminLink('AdminCustomerThreads')|escape:'html':'UTF-8'}&amp;id_order={$order->id|intval}">{sizeof($customer_thread_message)}</a></span>
</div>
</div>
<div class="col-xs-6 col-sm-3 box-stats color1" >
<a href="#start_products">
<div class="kpi-content">
<i class="icon icon-home"></i>
<!-- Original -->
<!-- <span class="title">{l s='Total'}</span>
<span class="value">{sizeof($products)}</span> -->
<span class="title">{l s='Total Rooms'}</span>
<span class="value">{$order_detail_data|@count}</span>
</div>
</a>
</div>
</div>
</div>

{* Overbookings information of the order *}
{include file='controllers/orders/_overbookings.tpl'}
{* Overbookings information of the order *}
{include file='controllers/orders/_overbookings.tpl'}

<div class="row">
<div class="col-lg-7">
Expand Down
36 changes: 26 additions & 10 deletions admin/themes/default/template/helpers/kpi/kpi.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,39 @@
* International Registered Trademark & Property of PrestaShop SA
*}

<{if isset($href) && $href}a style="display:block" href="{$href|escape:'html':'UTF-8'}"{else}div{/if} id="{$id|escape:'html':'UTF-8'}" data-toggle="tooltip" class="box-stats label-tooltip {$color|escape}" data-original-title="{$tooltip|escape}">
<{if isset($href) && $href}a style="display:block" href="{$href|escape:'html':'UTF-8'}"{else}div{/if} id="{$id|escape:'html':'UTF-8'}" data-toggle="tooltip" class="box-stats label-tooltip {$color|escape}" data-original-title="{$tooltip|escape}" {if $target}target="_blank"{/if}>
<div class="kpi-content">
{if isset($icon) && $icon}
<i class="{$icon|escape}"></i>
{/if}
<span class="title">{$title|escape}</span>
<span cLass="subtitle">{$subtitle|escape}</span>
<div class="title-subtitle">
<div class="title-container">
<span class="title">
{if isset($icon) && $icon}<i class="{$icon|escape}"></i>{/if}
{$title|escape}
</span>
</div>
{if $subtitle}
<div class="subtitle-container">
<span class="subtitle">
{$subtitle|escape}
</span>
</div>
{/if}
</div>
{if isset($chart) && $chart}
<div class="boxchart-overlay">
<div class="boxchart">
</div>
</div>
{/if}
{if isset($source) && $source}
<span class="value skeleton-loading-wave loading-container-bar loading"></span>
{elseif isset($value) && $value != ''}
<span class="value">{$value|escape:'html':'UTF-8'}</span>
<div class="value-container">
{if isset($source) && $source}
<span class="value skeleton-loading-wave loading-container-bar loading"></span>
{elseif isset($value) && $value !== ''}
<span class="value">{$value|escape:'html':'UTF-8'}</span>
{/if}
</div>

{if isset($href) && $href}
<span class="arrow"><i class="icon-angle-right"></i></span>
{/if}
</div>
</{if isset($href) && $href}a{else}div{/if}>
Expand Down
50 changes: 36 additions & 14 deletions admin/themes/default/template/helpers/kpi/row.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,42 @@
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
<div class="panel kpi-container">
{if $refresh}
<div class="kpi-refresh"><button class="close refresh" type="button" onclick="refresh_kpis();"><i class="process-icon-refresh" style="font-size:1em"></i></button></div>
{/if}
{if ($kpis|count) > 0}
<div class="row">
{assign var='col' value=(int)(12 / $kpis|count)}
{foreach from=$kpis item=i name=kpi}
{if $smarty.foreach.kpi.iteration > $col+1}
</div>
<div class="row">
{/if}
<div class="col-sm-6 col-lg-{$col}">{$i}</div>

<div class="panel kpi-container{if isset($no_wrapping) && $no_wrapping} no-wrapping{/if}">
<div class="kpis-wrap">
{foreach from=$kpis item=kpi}
<div class="kpi-wrap"{if isset($kpi->visible) && !$kpi->visible}style="display: none;"{/if}>
{$kpi->generate()}
</div>
{/foreach}
</div>
{/if}

<div class="actions-wrap">
{if $refresh}
<button class="btn btn-default" type="button" onclick="refresh_kpis();" title="{l s='Refresh'}">
<i class="icon-refresh"></i>
</button>
{/if}

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" title="{l s='Select KPIs'}">
<i class="icon-ellipsis-vertical"></i>
</button>

<ul class="dropdown-menu">
{foreach from=$kpis item=kpi}
<li>
<label>
<input type="checkbox" class="kpi-display-toggle" data-kpi-id="{$kpi->id}" {if $kpi->visible}checked {if $count_visible == 1}disabled{/if}{/if}>
{$kpi->title}
</label>
</li>
{/foreach}
</ul>
</div>

<button class="btn btn-default" type="button" onclick="toggleKpiView();" title="{l s='Toggle View'}">
<i class="icon-retweet"></i>
</button>
</div>
</div>
Loading

0 comments on commit 9f176b8

Please sign in to comment.