mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-27 08:24:06 +00:00
Omair Saleh
462 lines
30 KiB
PHP
462 lines
30 KiB
PHP
@extends('layouts.base_portal')
|
|
@section('inner_content')
|
|
<upload-debtor-excel-component section="uploadDebtorExcelSection"></upload-debtor-excel-component>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row m-b-50">
|
|
<div class="col-12">
|
|
<h1 class="text-left">Accounting Dashboard</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header">Import Bank Statement</div>
|
|
|
|
<div class="card-body">
|
|
@if (session('success'))
|
|
<div class="alert alert-success">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
@if (session('error'))
|
|
<div class="alert alert-danger mt-3">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('statements.import') }}" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="form-group">
|
|
<label for="file">Select CSV File</label>
|
|
<input type="file" class="form-control-file" id="file" name="file" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Import</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header">Transaction Filtering</div>
|
|
|
|
<div class="card-body">
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="startDate">Start Date:</label>
|
|
<input type="date" id="startDate" name="startDate" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="endDate">End Date:</label>
|
|
<input type="date" id="endDate" name="endDate" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="transactionType">Transaction Type:</label>
|
|
<select id="transactionType" name="transactionType" class="form-control">
|
|
<option value="">All</option>
|
|
<option value="Deposit">Deposit</option>
|
|
<option value="Withdrawal">Withdrawal</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="accountName">Account Name:</label>
|
|
<select id="accountName" name="accountName" class="form-control">
|
|
<option value="">All</option>
|
|
<option value="Bank Account 1">Bank Account 1</option>
|
|
<option value="Bank Account 2">Bank Account 2</option>
|
|
<option value="Bank Account 3">Bank Account 3</option>
|
|
</select>
|
|
</div>
|
|
<input type="submit" value="Filter" class="btn btn-primary">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<ul class="nav nav-tabs no-border" id="myTab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Transactions</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Deposit Mapping</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Withdrawal Mapping</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="tab4-tab" data-toggle="tab" href="#tab4" role="tab" aria-controls="tab4" aria-selected="false">Unknown Transactions</a>
|
|
</li>
|
|
<li class="nav-item ml-auto">
|
|
<a class="nav-link" id="tab5-tab" data-toggle="tab" href="#tab5" role="tab" aria-controls="tab5" aria-selected="false">Statements</a>
|
|
</li>
|
|
</ul>
|
|
<div class="card no-border">
|
|
<div class="card-body">
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Transaction Type</th>
|
|
<th>Account Name</th>
|
|
<th>Description</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>2023-04-11</td>
|
|
<td>Deposit</td>
|
|
<td>Bank Account 1</td>
|
|
<td>Salary Payment</td>
|
|
<td>Pending</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2023-04-09</td>
|
|
<td>Withdrawal</td>
|
|
<td>Bank Account 2</td>
|
|
<td>Vendor Payment</td>
|
|
<td>Reconciled</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2023-04-07</td>
|
|
<td>Deposit</td>
|
|
<td>Bank Account 3</td>
|
|
<td>Online Order Payment</td>
|
|
<td>Exception</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
|
|
<ul class="nav nav-pills nav-justified mb-3" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-toggle="pill" href="#step1">Step 1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="pill" href="#step2">Step 2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="pill" href="#step3">Step 3</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="pill" href="#step4">Step 4</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="pill" href="#step5">Step 5</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="pill" href="#step6">Step 6</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="pill" href="#step7">Step 7</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Wizard Content -->
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active" id="step1">
|
|
<h4 class="card-title">Step 1: Start Mapping bank Transactions</h4>
|
|
<p class="card-text">This is the first step in the wizard.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="step2">
|
|
<h4 class="card-title">Step 2: List of automatically mapped bank transactions</h4>
|
|
<p class="card-text">This is the second step in the wizard.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="step3">
|
|
<h4 class="card-title">Step 3: List of bank transactions that require manual mapping</h4>
|
|
<p class="card-text">This is the third step in the wizard.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="step4">
|
|
<h4 class="card-title">Step 4: Export invoices to accounting software</h4>
|
|
<p class="card-text">This is the fourth step in the wizard.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="step5">
|
|
<h4 class="card-title">Step 5: Import invoices from accounting software</h4>
|
|
<p class="card-text">This is the fifth step in the wizard.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="step6">
|
|
<h4 class="card-title">Step 6: Export payment receipts</h4>
|
|
<p class="card-text">This is the sixth step in the wizard.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="step7">
|
|
<h4 class="card-title">Step 7: Import payment receipts</h4>
|
|
<p class="card-text">This is the final step in the wizard.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Wizard Navigation Buttons -->
|
|
<ul class="list-inline">
|
|
<li class="list-inline-item"><button type="button" class="btn btn-secondary prev-step">Previous</button></li>
|
|
<li class="list-inline-item"><button type="button" class="btn btn-primary next-step">Next</button></li>
|
|
<li class="list-inline-item"><button type="button" class="btn btn-success finish-step">Finish</button></li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
|
|
<h2>Tab 3 Content</h2>
|
|
<p>Aliquam vitae magna sit amet tellus bibendum posuere. Integer nec leo quis arcu tincidunt eleifend. Suspendisse potenti. Proin ullamcorper sodales nisl vel tincidunt. Etiam malesuada, mauris sit amet tincidunt facilisis, nisl enim aliquet turpis, ac pretium lacus nulla a libero. Vivamus euismod ex vel sapien dignissim, a fringilla enim fringilla. Sed sit amet lobortis augue. Aenean ut neque ac elit interdum pretium vel vel purus. Duis ut magna at ante dignissim efficitur. Pellentesque molestie bibendum ipsum a malesuada. Nulla cursus vehicula felis vel dapibus. Suspendisse eget vulputate ex. In pulvinar tincidunt justo, eu viverra orci malesuada id. Sed posuere arcu ac diam finibus posuere.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab5" role="tabpanel" aria-labelledby="tab5-tab">
|
|
<form method="GET" action="{{ route('statements.index') }}" class="form-inline mb-3">
|
|
<div class="form-group mr-3">
|
|
<label for="account">Account:</label>
|
|
<select name="account" id="account" class="form-control ml-2">
|
|
<option value="">All Accounts</option>
|
|
@foreach($accounts as $account)
|
|
<option value="{{ $account->id }}" {{ $account->id == $selectedAccount ? 'selected' : '' }}>{{ $account->name }} ({{ $account->number }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary mr-2">Filter</button>
|
|
<a href="{{ route('statements.index') }}" class="btn btn-secondary">Clear</a>
|
|
</form>
|
|
|
|
<form method="GET" action="{{ route('statements.index') }}" class="form-inline mb-3">
|
|
<div class="form-group mr-3">
|
|
<label for="search">Search:</label>
|
|
<input type="text" class="form-control ml-2" id="search" name="search" value="{{ $search }}">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Search</button>
|
|
</form>
|
|
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Account</th>
|
|
<th>Date From</th>
|
|
<th>Date To</th>
|
|
<th>Total Amount</th>
|
|
<th>Begin Balance</th>
|
|
<th>End Balance</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($statements as $statement)
|
|
<tr>
|
|
<td>{{ $statement->account->name }} ({{ $statement->account->number }})</td>
|
|
<td>{{ $statement->date_from->format('d-m-Y') }}</td>
|
|
<td>{{ $statement->date_to->format('d-m-Y') }}</td>
|
|
<td>{{ $statement->total_amount }}</td>
|
|
<td>{{ $statement->begin_balance }}</td>
|
|
<td>{{ $statement->end_balance }}</td>
|
|
<td>
|
|
<a href="{{ route('statements.show', $statement) }}" class="btn btn-primary btn-sm">View</a>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
{{ $statements->links() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<ul class="nav nav-tabs no-border" id="myTab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Pending Transactions</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Exception Handling</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Non-operational Transactions</a>
|
|
</li>
|
|
<li class="nav-item ml-auto">
|
|
<a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Reconciled Transactions</a>
|
|
</li>
|
|
</ul>
|
|
<div class="card no-border">
|
|
<div class="card-body">
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Transaction Type</th>
|
|
<th>Account Name</th>
|
|
<th>Description</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>2023-04-11</td>
|
|
<td>Deposit</td>
|
|
<td>Bank Account 1</td>
|
|
<td>Salary Payment</td>
|
|
<td>Pending</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2023-04-09</td>
|
|
<td>Withdrawal</td>
|
|
<td>Bank Account 2</td>
|
|
<td>Vendor Payment</td>
|
|
<td>Reconciled</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2023-04-07</td>
|
|
<td>Deposit</td>
|
|
<td>Bank Account 3</td>
|
|
<td>Online Order Payment</td>
|
|
<td>Exception</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
|
|
<form method="GET" action="{{ route('statements.index') }}" class="form-inline mb-3">
|
|
<div class="form-group mr-3">
|
|
<label for="account">Account:</label>
|
|
<select name="account" id="account" class="form-control ml-2">
|
|
<option value="">All Accounts</option>
|
|
@foreach($accounts as $account)
|
|
<option value="{{ $account->id }}" {{ $account->id == $selectedAccount ? 'selected' : '' }}>{{ $account->name }} ({{ $account->number }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary mr-2">Filter</button>
|
|
<a href="{{ route('statements.index') }}" class="btn btn-secondary">Clear</a>
|
|
</form>
|
|
|
|
<form method="GET" action="{{ route('statements.index') }}" class="form-inline mb-3">
|
|
<div class="form-group mr-3">
|
|
<label for="search">Search:</label>
|
|
<input type="text" class="form-control ml-2" id="search" name="search" value="{{ $search }}">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Search</button>
|
|
</form>
|
|
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Account</th>
|
|
<th>Date From</th>
|
|
<th>Date To</th>
|
|
<th>Total Amount</th>
|
|
<th>Begin Balance</th>
|
|
<th>End Balance</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($statements as $statement)
|
|
<tr>
|
|
<td>{{ $statement->account->name }} ({{ $statement->account->number }})</td>
|
|
<td>{{ $statement->date_from->format('d-m-Y') }}</td>
|
|
<td>{{ $statement->date_to->format('d-m-Y') }}</td>
|
|
<td>{{ $statement->total_amount }}</td>
|
|
<td>{{ $statement->begin_balance }}</td>
|
|
<td>{{ $statement->end_balance }}</td>
|
|
<td>
|
|
<a href="{{ route('statements.show', $statement) }}" class="btn btn-primary btn-sm">View</a>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
{{ $statements->links() }}
|
|
</div>
|
|
<div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
|
|
<h2>Tab 3 Content</h2>
|
|
<p>Aliquam vitae magna sit amet tellus bibendum posuere. Integer nec leo quis arcu tincidunt eleifend. Suspendisse potenti. Proin ullamcorper sodales nisl vel tincidunt. Etiam malesuada, mauris sit amet tincidunt facilisis, nisl enim aliquet turpis, ac pretium lacus nulla a libero. Vivamus euismod ex vel sapien dignissim, a fringilla enim fringilla. Sed sit amet lobortis augue. Aenean ut neque ac elit interdum pretium vel vel purus. Duis ut magna at ante dignissim efficitur. Pellentesque molestie bibendum ipsum a malesuada. Nulla cursus vehicula felis vel dapibus. Suspendisse eget vulputate ex. In pulvinar tincidunt justo, eu viverra orci malesuada id. Sed posuere arcu ac diam finibus posuere.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
// Initialize the wizard
|
|
$('#rootwizard').bootstrapWizard({
|
|
'tabClass': 'nav nav-pills',
|
|
'nextSelector': '.next-step',
|
|
'previousSelector': '.prev-step',
|
|
'finishSelector': '.finish-step',
|
|
'onTabClick': function (tab, navigation, index) {
|
|
return false;
|
|
},
|
|
'onNext': function (tab, navigation, index) {
|
|
return true;
|
|
},
|
|
'onPrevious': function (tab, navigation, index) {
|
|
return true;
|
|
},
|
|
'onFinish': function (tab, navigation, index) {
|
|
return true;
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
Next, we add some custom CSS styles to the wizard to make it look more appealing.
|
|
php
|
|
Copy code
|
|
<style>
|
|
.card {
|
|
margin-bottom: 30px;
|
|
}
|
|
.nav-pills .nav-link {
|
|
border-radius: 0;
|
|
}
|
|
.nav-pills .nav-link.active {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
}
|
|
.btn {
|
|
border-radius: 0;
|
|
}
|
|
.list-inline-item {
|
|
margin-right: 10px;
|
|
}
|
|
</style>
|
|
Finally, we add some JavaScript code to handle the wizard functionality. We use the Bootstrap Wizard plugin to enable the wizard navigation buttons.
|
|
php
|
|
Copy code
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
// Initialize the wizard
|
|
$('#rootwizard').bootstrapWizard({
|
|
'tabClass': 'nav nav-pills',
|
|
'nextSelector': '.next-step',
|
|
'previousSelector': '.prev-step',
|
|
'finishSelector': '.finish-step',
|
|
'onTabClick': function (tab, navigation, index) {
|
|
return false;
|
|
},
|
|
'onNext': function (tab, navigation, index) {
|
|
return true;
|
|
},
|
|
'onPrevious': function (tab, navigation, index) {
|
|
return true;
|
|
},
|
|
'onFinish': function (tab, navigation, index) {
|
|
return true;
|
|
}
|
|
</script>
|
|
@endsection
|