From 2cb8f9f4075357a25383abff79c2853a2f79edc2 Mon Sep 17 00:00:00 2001
From: omair saleh <uldvstar@gmail.com>
Date: Tue, 26 Oct 2021 10:51:06 +0800
Subject: [PATCH] show change ratio for profit model calculator

---
 .../ProfitModelReportSectionComponent.vue     | 35 +++++++------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/resources/assets/vue/components/reports/sections/ProfitModelReportSectionComponent.vue b/resources/assets/vue/components/reports/sections/ProfitModelReportSectionComponent.vue
index fa680d86..f7405ba3 100644
--- a/resources/assets/vue/components/reports/sections/ProfitModelReportSectionComponent.vue
+++ b/resources/assets/vue/components/reports/sections/ProfitModelReportSectionComponent.vue
@@ -96,31 +96,22 @@
                             </div>
                             <div class="row">
                                 <div class="col">
-                                    <div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
-                                        <div class="container-xs-height full-height">
-                                            <div class="row-xs-height">
-                                                <div class="col-xs-height col-top">
-                                                    <div class="card-header  top-left top-right">
-                                                        <div class="card-title">
-                                                            <span class="font-montserrat fs-11 all-caps">Projected CBM</span>
-                                                        </div>
-                                                    </div>
+                                    <div class="widget-9 card no-border no-margin widget-loader-bar" :class="[{'bg-success-light': ((report.projected_cbm - report.total_cbm) / report.total_cbm) >= 0}, {'bg-danger-light': ((report.projected_cbm - report.total_cbm) / report.total_cbm) < 0}]">
+                                        <div class="full-height d-flex flex-column">
+                                            <div class="card-header ">
+                                                <div class="card-title text-black">
+                                                    <span class="font-montserrat fs-11 all-caps">Projected CBM</span>
                                                 </div>
                                             </div>
-                                            <div class="row-xs-height">
-                                                <div class="col-xs-height col-top">
-                                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
-                                                        <h3 class="no-margin p-b-5">{{(Math.ceil(report.projected_cbm * 1000) / 1000).toFixed(3)}}</h3>
-                                                        <span class="small hint-text pull-left">{{((report.projected_cbm / 800) * 100).toFixed(2)}}%</span>
-                                                        <span class="pull-right small text-primary">Goal: 800 CBM </span>
-                                                    </div>
-                                                </div>
+                                            <div class="p-l-20">
+                                                <h3 class="no-margin p-b-5 text-white">{{(Math.ceil(report.projected_cbm * 1000) / 1000).toFixed(3)}}</h3>
+                                                <span class="small hint-text pull-left">
+                                                    <span class="label font-montserrat m-r-5"><i class="fa m-r-5" :class="[{'fa-angle-double-up': ((report.projected_cbm - report.total_cbm) / report.total_cbm) >= 0}, {'fa-angle-double-down': ((report.projected_cbm - report.total_cbm) / report.total_cbm) < 0}]"></i>{{(((report.projected_cbm - report.total_cbm) / report.total_cbm) * 100).toFixed(2)}}%</span>
+                                                </span>
                                             </div>
-                                            <div class="row-xs-height">
-                                                <div class="col-xs-height col-bottom">
-                                                    <div class="progress progress-small m-b-0">
-                                                        <div class="progress-bar progress-bar-primary" :style="{'width': ((report.projected_cbm / 800) * 100).toFixed(2)+'%'}"></div>
-                                                    </div>
+                                            <div class="mt-auto">
+                                                <div class="progress progress-small m-b-20">
+                                                    <div class="progress-bar progress-bar-white" :style="{'width': ((report.projected_cbm / 800) * 100).toFixed(2)+'%'}"></div>
                                                 </div>
                                             </div>
                                         </div>