Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated: Updated KPI design and added new KPIs at back office #870

Merged
merged 14 commits into from
Mar 18, 2024
Merged

Updated: Updated KPI design and added new KPIs at back office #870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
86d76ea
Updated: KPI design at back office
abhishek-webkul Nov 2, 2023
e2e7dbd
Add missing hooks
abhishek-webkul Feb 8, 2024
65727ae
Merge branch 'webkul:develop' into gli-1528
abhishek-webkul Feb 9, 2024
fbb1c2b
Fix wrap issue
abhishek-webkul Feb 12, 2024
2d6f0da
Fix incorrect values
abhishek-webkul Feb 16, 2024
04b7abc
Fix values issues
abhishek-webkul Feb 21, 2024
6cc7e48
Reorder KPIs on Manage Room Types page
abhishek-webkul Feb 22, 2024
1980080
Add refresh button on Order view page
abhishek-webkul Feb 27, 2024
4e6b8c9
Fix Booked Rooms value
abhishek-webkul Mar 1, 2024
286c9a5
Merge branch 'gli-1528' of github.com:abhishek-webkul/hotelcommerce i…
abhishek-webkul Mar 1, 2024
05955d4
Fix Offline Rooms count
abhishek-webkul Mar 5, 2024
f1e9a24
Merge branch 'develop' into gli-1528
abhishek-webkul Mar 15, 2024
7c0c851
Merge branch 'develop' into gli-1528
abhishek-webkul Mar 17, 2024
d278fbe
Merge branch 'develop' into gli-1528
abhishek-webkul Mar 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 148 additions & 44 deletions admin/themes/default/sass/partials/_kpi.sass
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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