At first go to Shared Components and click the Template-
Step 1 : COPY Template "Value Attribute Pairs - Row" and name as DASH ->
Step 2: Go to Template DASH
<------ Row Template 1(Value Required)---->
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card-counter primary">
<i class="fa fa-code-fork"></i>
<span class="count-numbers">#VALUE1#</span>
<span class="count-name">#LABEL1#</span>
</div>
</div>
<div class="col-md-3">
<div class="card-counter danger">
<i class="fa fa-ticket"></i>
<span class="count-numbers">#VALUE2#</span>
<span class="count-name">#LABEL2#</span>
</div>
</div>
<div class="col-md-3">
<div class="card-counter success">
<i class="fa fa-database"></i>
<span class="count-numbers">#VALUE3#</span>
<span class="count-name">#LABEL3#</span>
</div>
</div>
<div class="col-md-3">
<div class="card-counter info">
<i class="fa fa-users"></i>
<span class="count-numbers">#VALUE4#</span>
<span class="count-name">#LABEL4#</span>
</div>
</div>
Step 3 : <!------ Include the above in your COLUMN HEAD tag ---------->
<style>
.card-counter{
box-shadow: 2px 2px 10px #DADADA;
margin: 5px;
padding: 20px 10px;
background-color: #fff;
height: 100px;
border-radius: 5px;
transition: .3s linear all;
}
.card-counter:hover{
box-shadow: 4px 4px 20px #DADADA;
transition: .3s linear all;
}
.card-counter.primary{
background-color: #007bff;
color: #FFF;
}
.card-counter.danger{
background-color: #ef5350;
color: #FFF;
}
.card-counter.success{
background-color: #66bb6a;
color: #FFF;
}
.card-counter.info{
background-color: #26c6da;
color: #FFF;
}
.card-counter i{
font-size: 5em;
opacity: 0.2;
}
.card-counter .count-numbers{
position: absolute;
right: 35px;
top: 20px;
font-size: 32px;
display: block;
}
.card-counter .count-name{
position: absolute;
right: 35px;
top: 65px;
font-style: italic;
text-transform: capitalize;
opacity: 0.5;
display: block;
font-size: 18px;
}
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
step 4 : -- Now you take new Region and wright Classic report query -->
SELECT A.PURCHASE_PAID VALUE1,'Payment of Purchase ' AS LABEL1,
B.ANIMAL_SELL_AMOUNT VALUE2,'Animals Sell' AS LABEL2,
C.PRODUCT_SELL_AMOINT VALUE3,'Product Sell' AS LABEL3,
D.TOTAL_EXPENSE VALUE4,'Total Expense' AS LABEL4
FROM
(SELECT SUM(PAID) PURCHASE_PAID FROM PURCHASE_MASTER) A,
(SELECT SUM(PAID) ANIMAL_SELL_AMOUNT FROM ANIMALS_SELL_MASTER) B,
(SELECT SUM(PAID) PRODUCT_SELL_AMOINT FROM PRODUCT_SELL_MASTER) C,
(SELECT SUM(TOTAL_AMOUNT) TOTAL_EXPENSE FROM EXPENSE_MASTER) D;
step 5 : Finally you go to Region "Attribute" and select Template "DASH"
