From 40d9fc15d93ce4c1a924a90f2124ddc5ff9f4862 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Sat, 16 Sep 2023 15:25:20 +0800
Subject: [PATCH 1/3] update wallet transaction history page title

---
 .../elements/CustomerTransactionHistorySectionComponent.vue     | 2 +-
 .../elements/CustomerTransactionPreciseSectionComponent.vue     | 2 +-
 .../wallets/elements/CustomerTransactionSectionComponent.vue    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/assets/vue/components/bookings/elements/CustomerTransactionHistorySectionComponent.vue b/resources/assets/vue/components/bookings/elements/CustomerTransactionHistorySectionComponent.vue
index 026a76c5..d1448193 100644
--- a/resources/assets/vue/components/bookings/elements/CustomerTransactionHistorySectionComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/CustomerTransactionHistorySectionComponent.vue
@@ -6,7 +6,7 @@
                 <div class="col">
                     <div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
                         <div class="col no-padding">
-                            <h6>Transaction History</h6>
+                            <h6>Account Statement - Transaction History</h6>
                         </div>
                     </div>
                     <div class="row" v-if="transaction">
diff --git a/resources/assets/vue/components/wallets/elements/CustomerTransactionPreciseSectionComponent.vue b/resources/assets/vue/components/wallets/elements/CustomerTransactionPreciseSectionComponent.vue
index 85868a2b..2b7e3886 100644
--- a/resources/assets/vue/components/wallets/elements/CustomerTransactionPreciseSectionComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/CustomerTransactionPreciseSectionComponent.vue
@@ -7,7 +7,7 @@
                 <div class="col-8">
                     <div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
                         <div class="col no-padding">
-                            <h6>Transaction History</h6>
+                            <h6>Precise Wallet Transaction History</h6>
                         </div>
                     </div>
                     <div class="row" v-if="company.wallet">
diff --git a/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue b/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue
index fcfba752..3eae3ab7 100644
--- a/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue
@@ -6,7 +6,7 @@
                 <div class="col-8">
                     <div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
                         <div class="col no-padding">
-                            <h6>Transaction History</h6>
+                            <h6>Wallet Transaction History</h6>
                         </div>
                     </div>
                     <div class="row" v-if="company.wallet">

From 823556b9b5063c6a8d22b2172b1d52420b31ece1 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Sat, 16 Sep 2023 16:36:32 +0800
Subject: [PATCH 2/3] download wallet transaction history

---
 ...portsCustomersWalletTransactionHistory.php | 105 ++++++++++++++++++
 ...mersWalletTransactionToExcelController.php |  32 ++++++
 .../CustomerTransactionSectionComponent.vue   |   6 +
 routes/web.php                                |   2 +
 4 files changed, 145 insertions(+)
 create mode 100644 app/Classes/Modules/Exports/Services/ExportsCustomersWalletTransactionHistory.php
 create mode 100644 app/Http/Controllers/Exports/ExportCustomersWalletTransactionToExcelController.php

diff --git a/app/Classes/Modules/Exports/Services/ExportsCustomersWalletTransactionHistory.php b/app/Classes/Modules/Exports/Services/ExportsCustomersWalletTransactionHistory.php
new file mode 100644
index 00000000..e38ce8ac
--- /dev/null
+++ b/app/Classes/Modules/Exports/Services/ExportsCustomersWalletTransactionHistory.php
@@ -0,0 +1,105 @@
+<?php
+
+namespace App\Classes\Modules\Exports\Services;
+
+use App\Classes\ValueObjects\Constants\TransactionType;
+use App\Models\Transaction;
+use App\Models\Company;
+use Carbon\Carbon;
+use Illuminate\Http\Request;
+use Maatwebsite\Excel\Concerns\Exportable;
+use Maatwebsite\Excel\Concerns\FromQuery;
+use Maatwebsite\Excel\Concerns\ShouldAutoSize;
+use Maatwebsite\Excel\Concerns\WithHeadingRow;
+use Maatwebsite\Excel\Concerns\WithHeadings;
+use Maatwebsite\Excel\Concerns\WithMapping;
+
+class ExportsCustomersWalletTransactionHistory implements FromQuery, WithHeadings, WithHeadingRow, WithMapping, ShouldAutoSize
+{
+    use Exportable;
+
+    private $request;
+    private $runningBalance = 0;
+
+    public function __construct(Request $request)
+    {
+        $this->request = $request;
+    }
+
+    public function headings(): array
+    {
+        return [
+            'Date',
+            'Description',
+            'Incoming',
+            'Outgoing',
+            'Balance',
+        ];
+    }
+
+    /**
+     * @return \Illuminate\Support\Collection|mixed
+     */
+    public function query()
+    {
+        $company = Company::where('reference', $this->request->route('marking'))->first();
+        $transactions = $company->wallets()->first()->transactions()->whereIn('transactions.status', [2, 3])->orderBy('id');
+        // dd($transactions->get()->toArray());
+
+        return $transactions;
+    }
+
+    /**
+     * @param Transaction $transaction
+     *
+     * @return array
+     */
+    public function map($transaction): array
+    {
+        // dd($transaction);
+
+        $description = '';
+        switch ((int) $transaction->type) {
+            case 5:
+                $description = (float) $transaction->amount . ' Credit Top up';
+                break;
+            case 9:
+                $description = 'Credit Voucher for ' . $transaction->payment_reference;
+                break;
+            case 1:
+                $booking = Transaction::where('payment_reference', $transaction->bill_no)->first()->owner;
+
+                if (!$booking) {
+                    $description = 'Payment for unknown booking, please contact tech support.';
+                    break;
+                }
+
+                $marking = $booking->marking;
+                $description = 'Payment For booking refs' . $marking;
+                break;
+            case 11:
+                $description = 'Debit Voucher for ' . $transaction->payment_reference;
+                break;
+        }
+
+        $incoming = $outgoing = '';
+
+        if (in_array($transaction->type, [TransactionType::TOP_UP, TransactionType::CREDIT_NOTE])) {
+            $incoming =  number_format($transaction->amount, 2, '.', ',');
+            $this->runningBalance += $transaction->amount;
+        }
+
+        if (in_array($transaction->type, [TransactionType::PAYMENT, TransactionType::DEBIT_NOTE])) {
+            $outgoing =  number_format($transaction->amount, 2, '.', ',');
+            $this->runningBalance -= $transaction->amount;
+        }
+
+        return [
+            Carbon::parse($transaction->created_at)->format('d-m-Y h:i:s A'),
+            $description,
+            $incoming,
+            $outgoing,
+            number_format($this->runningBalance, 2, '.', ',')
+        ];
+    }
+}
diff --git a/app/Http/Controllers/Exports/ExportCustomersWalletTransactionToExcelController.php b/app/Http/Controllers/Exports/ExportCustomersWalletTransactionToExcelController.php
new file mode 100644
index 00000000..fd49d5b0
--- /dev/null
+++ b/app/Http/Controllers/Exports/ExportCustomersWalletTransactionToExcelController.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Controllers\Exports;
+
+
+use App\Classes\Modules\Exports\Services\ExportsCustomers;
+use App\Classes\Modules\Exports\Services\ExportsCustomersWalletTransactionHistory;
+use App\Models\User;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Maatwebsite\Excel\Excel;
+
+class ExportCustomersWalletTransactionToExcelController
+{
+
+    /**
+     * ExportCustomersWalletTransactionToExcelController constructor.
+     * @param Request $request
+     */
+    public function __construct(Request $request)
+    {
+        $token = Auth::fromUser(User::find(1));
+        $request->headers->set('Authorization', 'Bearer '.$token);
+    }
+
+    public function export(Request $request){
+        $exportsTransactions = new ExportsCustomersWalletTransactionHistory($request);
+        $response = $exportsTransactions->download('wallet-transaction-history.xls', Excel::XLS, ['Content-Type' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']);
+        ob_end_clean();
+        return $response;
+    }
+}
\ No newline at end of file
diff --git a/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue b/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue
index 3eae3ab7..7ef65ee3 100644
--- a/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue
@@ -9,6 +9,12 @@
                             <h6>Wallet Transaction History</h6>
                         </div>
                     </div>
+                    <div class="row m-t-15 m-b-15">
+                        <div class="col">
+                            <a :href="route('wallet.details-export', company.reference)" target="_blank" class="btn btn-sm btn-primary fs-11"><i class="fa fa-download m-r-5"></i> Download</a>
+                            <a :href="route('wallet.details-precise', company.reference)" class="btn btn-sm btn-primary fs-11">View Precise Wallet Transaction</a>
+                        </div>
+                    </div>
                     <div class="row" v-if="company.wallet">
                         <div class="col">
                             <div class="row padding-10">
diff --git a/routes/web.php b/routes/web.php
index e2357c00..6ec39626 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -236,6 +236,8 @@ Route::get('/wallet/{marking}/details-precise', function ($marking) {
     return view('pages.wallet.precise', ['id' => $id]);
 })->name('wallet.details-precise');
 
+Route::get('/wallet/{marking}/export', 'Exports\ExportCustomersWalletTransactionToExcelController@export')->name('wallet.details-export');
+
 Route::get('/wallets', function () {
     return view('pages.wallet.wallets');
 })->name('wallet.wallets');

From 6542710ba9ceefe3a1c4fb7a905d365a8246c5f3 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Sat, 16 Sep 2023 18:09:11 +0800
Subject: [PATCH 3/3] update ui for export Wallet Transaction History

---
 ...portsCustomersWalletTransactionHistory.php |   8 +-
 ...mersWalletTransactionToExcelController.php |  12 +-
 .../elements/CustomerTransactionComponent.vue |  83 +++++++++
 ...omerTransactionPreciseSectionComponent.vue | 174 ------------------
 .../CustomerTransactionSectionComponent.vue   |  61 +-----
 routes/web.php                                |   7 +-
 6 files changed, 102 insertions(+), 243 deletions(-)
 create mode 100644 resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue
 delete mode 100644 resources/assets/vue/components/wallets/elements/CustomerTransactionPreciseSectionComponent.vue

diff --git a/app/Classes/Modules/Exports/Services/ExportsCustomersWalletTransactionHistory.php b/app/Classes/Modules/Exports/Services/ExportsCustomersWalletTransactionHistory.php
index e38ce8ac..745539f5 100644
--- a/app/Classes/Modules/Exports/Services/ExportsCustomersWalletTransactionHistory.php
+++ b/app/Classes/Modules/Exports/Services/ExportsCustomersWalletTransactionHistory.php
@@ -58,6 +58,8 @@ class ExportsCustomersWalletTransactionHistory implements FromQuery, WithHeading
     {
         // dd($transaction);
 
+        $decimals = $this->request->route('is_precise') == 'true' ? 5 : 2;
+
         $description = '';
         switch ((int) $transaction->type) {
             case 5:
@@ -85,12 +87,12 @@ class ExportsCustomersWalletTransactionHistory implements FromQuery, WithHeading
         $incoming = $outgoing = '';
 
         if (in_array($transaction->type, [TransactionType::TOP_UP, TransactionType::CREDIT_NOTE])) {
-            $incoming =  number_format($transaction->amount, 2, '.', ',');
+            $incoming =  number_format($transaction->amount, $decimals, '.', ',');
             $this->runningBalance += $transaction->amount;
         }
 
         if (in_array($transaction->type, [TransactionType::PAYMENT, TransactionType::DEBIT_NOTE])) {
-            $outgoing =  number_format($transaction->amount, 2, '.', ',');
+            $outgoing =  number_format($transaction->amount, $decimals, '.', ',');
             $this->runningBalance -= $transaction->amount;
         }
 
@@ -99,7 +101,7 @@ class ExportsCustomersWalletTransactionHistory implements FromQuery, WithHeading
             $description,
             $incoming,
             $outgoing,
-            number_format($this->runningBalance, 2, '.', ',')
+            number_format($this->runningBalance, $decimals, '.', ',')
         ];
     }
 }
diff --git a/app/Http/Controllers/Exports/ExportCustomersWalletTransactionToExcelController.php b/app/Http/Controllers/Exports/ExportCustomersWalletTransactionToExcelController.php
index fd49d5b0..c4457565 100644
--- a/app/Http/Controllers/Exports/ExportCustomersWalletTransactionToExcelController.php
+++ b/app/Http/Controllers/Exports/ExportCustomersWalletTransactionToExcelController.php
@@ -2,8 +2,6 @@
 
 namespace App\Http\Controllers\Exports;
 
-
-use App\Classes\Modules\Exports\Services\ExportsCustomers;
 use App\Classes\Modules\Exports\Services\ExportsCustomersWalletTransactionHistory;
 use App\Models\User;
 use Illuminate\Http\Request;
@@ -20,13 +18,15 @@ class ExportCustomersWalletTransactionToExcelController
     public function __construct(Request $request)
     {
         $token = Auth::fromUser(User::find(1));
-        $request->headers->set('Authorization', 'Bearer '.$token);
+        $request->headers->set('Authorization', 'Bearer ' . $token);
     }
 
-    public function export(Request $request){
+    public function export(Request $request)
+    {
         $exportsTransactions = new ExportsCustomersWalletTransactionHistory($request);
-        $response = $exportsTransactions->download('wallet-transaction-history.xls', Excel::XLS, ['Content-Type' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']);
+        $filename = $request->route('marking') . '-wallet-' . ($request->route('is_precise') == 'true' ? 'precise-' : '') . 'transaction-history.xls';
+        $response = $exportsTransactions->download($filename, Excel::XLS, ['Content-Type' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']);
         ob_end_clean();
         return $response;
     }
-}
\ No newline at end of file
+}
diff --git a/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue b/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue
new file mode 100644
index 00000000..4d25f91b
--- /dev/null
+++ b/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue
@@ -0,0 +1,83 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row" v-if="company.wallet">
+                <div class="col">
+                    <div class="row padding-10">
+                        <div class="col-3 fs-10">Date</div>
+                        <div class="col fs-10">Description</div>
+                        <div class="col-2 fs-10 text-center">Incoming</div>
+                        <div class="col-2 fs-10 text-center">Outgoing</div>
+                        <div class="col-2 fs-10 text-right">Balance</div>
+                    </div>
+
+                    <div class="row bg-white padding-10 m-b-10 rounded" v-for="(item, index) in company.wallet.transactions" v-bind:key="item.id" :data="item">
+                        <div class="col-3 fs-12">{{item.created_at}}</div>
+                        <div class="col fs-12"><span v-html="item.description"></span> <a target=”_blank” v-if="[9,11].includes(item.type) " :href="route('transaction.credit_note.download', item.id)"><i class="fa fa-download fs-11 m-l-5 text-secondary hover-primary"></i></a></div>
+                        <div class="col-2 text-success text-center">{{[5, 9].includes(parseFloat(item.type)) ? formatValue(item.amount) : ''}}</div>
+                        <div class="col-2 text-danger text-center">{{[1, 11].includes(parseFloat(item.type)) ? '- ' + (formatValue(item.amount)) : ''}}</div>
+                        <div class="col-2 text-right">{{remainingBalance(index)}}</div>
+                    </div>  
+                </div>
+            </div>
+
+            <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-if="!company.wallet || !company.wallet.transactions.length">
+                <div class="col-10">
+                    <div class="row align-items-center justify-content-center hint-text">
+                        <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"></div>
+                    </div>
+                    <div class="row text-center">
+                        <div class="col">
+                            <div class="row m-t-20">
+                                <div class="col">
+                                    <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here</p>
+                                </div>
+                            </div>
+                            <div class="row m-t-5 align-items-center justify-content-center">
+                                <div class="col">
+                                    <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        company: {
+            type: Object,
+            required: true
+        },
+        deciamls: {
+            type: Number,
+            required: true
+        }
+    },
+    methods: {
+        remainingBalance(index) {
+            let tempBalance = 0;
+
+            if(this.company.wallet){
+                let transactions = this.company.wallet.transactions.slice().reverse();
+                transactions.slice(0, transactions.length - index).map(function(transaction) {
+                    [1, 11].includes(transaction.type) ? tempBalance -= (transaction.amount) : tempBalance += (transaction.amount);
+                    return tempBalance
+                }, 0);
+            }
+
+            return this.formatValue(tempBalance);
+        },
+        formatValue(value) {
+            if (this.deciamls != 2) {
+                return (Math.round((parseFloat(value) + Number.EPSILON) * 100000) / 100000).toLocaleString('en-US', { minimumFractionDigits: 5, maximumFractionDigits: 5 });
+            }
+
+            return (Math.round((parseFloat(value) + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+        }
+    }
+}
+</script>
diff --git a/resources/assets/vue/components/wallets/elements/CustomerTransactionPreciseSectionComponent.vue b/resources/assets/vue/components/wallets/elements/CustomerTransactionPreciseSectionComponent.vue
deleted file mode 100644
index 2b7e3886..00000000
--- a/resources/assets/vue/components/wallets/elements/CustomerTransactionPreciseSectionComponent.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-    <div class="row">
-        <div class="col">
-            <loading-component style="height: 200px; top: 0;" key="1" color="success"
-                v-show="isLoading"></loading-component>
-            <div class="row" v-if="company">
-                <div class="col-8">
-                    <div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
-                        <div class="col no-padding">
-                            <h6>Precise Wallet Transaction History</h6>
-                        </div>
-                    </div>
-                    <div class="row" v-if="company.wallet">
-                        <div class="col">
-                            <div class="row padding-10">
-                                <div class="col-3 fs-10">Date</div>
-                                <div class="col fs-10">Description</div>
-                                <div class="col-2 fs-10 text-center">Incoming</div>
-                                <div class="col-2 fs-10 text-center">Outgoing</div>
-                                <div class="col-2 fs-10 text-right">Balance</div>
-                            </div>
-
-                            <div class="row bg-white padding-10 m-b-10 rounded"
-                                v-for="(item, index) in company.wallet.transactions" v-bind:key="item.id" :data="item">
-                                <div class="col-3 fs-12">{{ item.created_at }}</div>
-                                <div class="col fs-12">
-                                    <span v-html="item.description"></span>
-                                    <a target=”_blank” v-if="[9, 11].includes(item.type)"
-                                        :href="route('transaction.credit_note.download', item.id)">
-                                        <i class="fa fa-download fs-11 m-l-5 text-secondary hover-primary"></i>
-                                    </a>
-                                </div>
-                                <div class="col-2 text-success text-center">
-                                    {{ [5, 9].includes(parseFloat(item.type)) ? (Math.round((parseFloat(item.amount) + Number.EPSILON) * 100000) / 100000).toLocaleString('en-US', { minimumFractionDigits: 5, maximumFractionDigits: 5 }) : '' }}
-                                </div>
-                                <div class="col-2 text-danger text-center">
-                                    {{ [1, 11].includes(parseFloat(item.type)) ? '- ' + (Math.round((parseFloat(item.amount) + Number.EPSILON) * 100000) / 100000).toLocaleString('en-US', { minimumFractionDigits: 5, maximumFractionDigits: 5 }) : '' }}
-                                </div>
-                                <div class="col-2 text-right">{{ remainingBalance(index) }}</div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="row align-items-center justify-content-center p-t-50 p-b-50"
-                        v-if="!company.wallet || !company.wallet.transactions.length">
-                        <div class="col-10">
-                            <div class="row align-items-center justify-content-center hint-text">
-                                <div class="col-4 hint-text"><img src="/images/not-found-illustration.png"
-                                        class="w-100 hint-text"></div>
-                            </div>
-                            <div class="row text-center">
-                                <div class="col">
-                                    <div class="row m-t-20">
-                                        <div class="col">
-                                            <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show
-                                                Here</p>
-                                        </div>
-                                    </div>
-                                    <div class="row m-t-5 align-items-center justify-content-center">
-                                        <div class="col">
-                                            <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There
-                                                is no results found, Try adjusting your filters to find what you are looking
-                                                for.</small>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-3 m-l-15">
-                    <wallet-component :data="company" :creditable=true></wallet-component>
-                    <div class="row m-t-20">
-                        <div class="col">
-                            <div class="row m-b-10">
-                                <div class="col">
-                                    <div class="font-head fs-10 all-caps">Top Up Records</div>
-                                </div>
-                            </div>
-                            <div class="row" v-if="company.wallet">
-                                <div class="col">
-                                    <wallet-top-up-history-component v-for="item in company.wallet.top_up_records"
-                                        v-bind:key="item.id" :data="item"></wallet-top-up-history-component>
-                                </div>
-                            </div>
-                            <div class="row align-items-center justify-content-center p-t-50 p-b-50"
-                                v-if="!company.wallet || !company.wallet.top_up_records.length">
-                                <div class="col-10">
-                                    <div class="row align-items-center justify-content-center hint-text">
-                                        <div class="col-4 hint-text"><img src="/images/not-found-illustration.png"
-                                                class="w-100 hint-text"></div>
-                                    </div>
-                                    <div class="row text-center">
-                                        <div class="col">
-                                            <div class="row m-t-20">
-                                                <div class="col">
-                                                    <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing
-                                                        To Show Here</p>
-                                                </div>
-                                            </div>
-                                            <div class="row m-t-5 align-items-center justify-content-center">
-                                                <div class="col">
-                                                    <small class="fs-9 muted all-caps font-lato"
-                                                        style="letter-spacing: 2px">There is no results found, Try adjusting
-                                                        your filters to find what you are looking for.</small>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    props: {
-        id: {
-            type: Number,
-            required: true
-        }
-    },
-    data() {
-        return {
-            section: 'customerTransactionSection',
-            isLoading: true,
-            company: null,
-            attention: false
-        }
-    },
-    computed: {
-        pendingQueue() {
-            return this.$store.getters.isInCompleteQueue(this.section);
-        }
-    },
-    watch: {
-        pendingQueue(inComplete) {
-            if (inComplete) {
-                this.fetchCompany();
-            }
-        }
-    },
-    created() {
-        this.$store.dispatch('updateListQueue', { 'name': this.section });
-    },
-    methods: {
-        fetchCompany() {
-            this.isLoading = true;
-            this.submit(route('api.company.show', this.id), 'get', this.section, false, false)
-        },
-        remainingBalance(index) {
-            let tempBalance = 0;
-
-            if (this.company.wallet) {
-                let transactions = this.company.wallet.transactions.slice().reverse();
-                transactions.slice(0, transactions.length - index).map(function (transaction) {
-                    [1, 11].includes(transaction.type) ? tempBalance -= (transaction.amount) : tempBalance += (transaction.amount);
-                    return tempBalance
-                }, 0);
-            }
-
-            return (Math.round((tempBalance + Number.EPSILON) * 100000) / 100000).toLocaleString('en-US', { minimumFractionDigits: 5, maximumFractionDigits: 5 });
-        },
-        successHandler(response) {
-            this.isLoading = false;
-            this.company = response.payload.data;
-        }
-    }
-}
-</script>
diff --git a/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue b/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue
index 7ef65ee3..706bc95a 100644
--- a/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/CustomerTransactionSectionComponent.vue
@@ -11,50 +11,15 @@
                     </div>
                     <div class="row m-t-15 m-b-15">
                         <div class="col">
-                            <a :href="route('wallet.details-export', company.reference)" target="_blank" class="btn btn-sm btn-primary fs-11"><i class="fa fa-download m-r-5"></i> Download</a>
-                            <a :href="route('wallet.details-precise', company.reference)" class="btn btn-sm btn-primary fs-11">View Precise Wallet Transaction</a>
+                            <span class="btn btn-md fs-11 bg-primary text-white fs-12 bold" :class="[{'bg-primary-darker': showingPreciseAmount}]" @click="showingPreciseAmount=!showingPreciseAmount">{{ showingPreciseAmount ? 'Showing Precise Wallet Transaction' : 'Show Precise Wallet Transaction'}}</span>
+                            <a :href="route('wallet.details-export', company.reference, showingPreciseAmount)" target="_blank" class="btn btn-md btn-primary fs-11"><i class="fa fa-download m-r-5"></i>{{ showingPreciseAmount ? 'Download Precise Transaction' : 'Download Transaction'}}</a>
                         </div>
                     </div>
-                    <div class="row" v-if="company.wallet">
-                        <div class="col">
-                            <div class="row padding-10">
-                                <div class="col-3 fs-10">Date</div>
-                                <div class="col fs-10">Description</div>
-                                <div class="col-2 fs-10 text-center">Incoming</div>
-                                <div class="col-2 fs-10 text-center">Outgoing</div>
-                                <div class="col-2 fs-10 text-right">Balance</div>
-                            </div>
-
-                            <div class="row bg-white padding-10 m-b-10 rounded" v-for="(item, index) in company.wallet.transactions" v-bind:key="item.id" :data="item">
-                                <div class="col-3 fs-12">{{item.created_at}}</div>
-                                <div class="col fs-12"><span v-html="item.description"></span> <a target=”_blank” v-if="[9,11].includes(item.type) " :href="route('transaction.credit_note.download', item.id)"><i class="fa fa-download fs-11 m-l-5 text-secondary hover-primary"></i></a></div>
-                                <div class="col-2 text-success text-center">{{[5, 9].includes(parseFloat(item.type)) ? (Math.round((parseFloat(item.amount) + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : ''}}</div>
-                                <div class="col-2 text-danger text-center">{{[1, 11].includes(parseFloat(item.type)) ? '- ' + (Math.round((parseFloat(item.amount) + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : ''}}</div>
-                                <div class="col-2 text-right">{{remainingBalance(index)}}</div>
-                            </div>  
-                        </div>
+                    <div v-show="!showingPreciseAmount">
+                        <customer-transaction-component :company="company" :deciamls="2"></customer-transaction-component>
                     </div>
-
-                    <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-if="!company.wallet || !company.wallet.transactions.length">
-                        <div class="col-10">
-                            <div class="row align-items-center justify-content-center hint-text">
-                                <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"></div>
-                            </div>
-                            <div class="row text-center">
-                                <div class="col">
-                                    <div class="row m-t-20">
-                                        <div class="col">
-                                            <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here</p>
-                                        </div>
-                                    </div>
-                                    <div class="row m-t-5 align-items-center justify-content-center">
-                                        <div class="col">
-                                            <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                    <div v-show="showingPreciseAmount">
+                        <customer-transaction-component :company="company" :deciamls="5"></customer-transaction-component>
                     </div>
                 </div>
                 <div class="col-3 m-l-15">
@@ -112,6 +77,7 @@ export default {
             section: 'customerTransactionSection',
             isLoading: true,
             company: null,
+            showingPreciseAmount: false,
             attention: false
         }
     },
@@ -135,19 +101,6 @@ export default {
             this.isLoading = true;
             this.submit(route('api.company.show', this.id), 'get', this.section, false, false)
         },
-        remainingBalance(index) {
-            let tempBalance = 0;
-
-            if(this.company.wallet){
-                let transactions = this.company.wallet.transactions.slice().reverse();
-                transactions.slice(0, transactions.length - index).map(function(transaction) {
-                    [1, 11].includes(transaction.type) ? tempBalance -= (transaction.amount) : tempBalance += (transaction.amount);
-                    return tempBalance
-                }, 0);
-            }
-
-            return (Math.round((tempBalance + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-        },
         successHandler(response){
             this.isLoading = false;
             this.company = response.payload.data;
diff --git a/routes/web.php b/routes/web.php
index 6ec39626..4c4fc328 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -231,12 +231,7 @@ Route::get('/wallet/{marking}/details', function ($marking) {
     return view('pages.wallet.index', ['id' => $id]);
 })->name('wallet.details');
 
-Route::get('/wallet/{marking}/details-precise', function ($marking) {
-    $id = \App\Models\Company::where('reference', '=', $marking)->first()->id;
-    return view('pages.wallet.precise', ['id' => $id]);
-})->name('wallet.details-precise');
-
-Route::get('/wallet/{marking}/export', 'Exports\ExportCustomersWalletTransactionToExcelController@export')->name('wallet.details-export');
+Route::get('/wallet/{marking}/{is_precise}/export', 'Exports\ExportCustomersWalletTransactionToExcelController@export')->name('wallet.details-export');
 
 Route::get('/wallets', function () {
     return view('pages.wallet.wallets');