Added UI design for Daily Sale Payment Report
This commit is contained in:
@@ -1,9 +1,298 @@
|
||||
@extends('dailysalepaymentreportmodule::layouts.master')
|
||||
|
||||
@extends('backend.layout.main')
|
||||
@section('content')
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<p>
|
||||
This view is loaded from module: {!! config('dailysalepaymentreportmodule.name') !!}
|
||||
</p>
|
||||
@if ($errors->has('title'))
|
||||
<div class="alert alert-danger alert-dismissible text-center">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
|
||||
aria-hidden="true">×</span></button>{{ $errors->first('title') }}
|
||||
</div>
|
||||
@endif
|
||||
@if (session()->has('message'))
|
||||
<div class="alert alert-success alert-dismissible text-center">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>{{ session()->get('message') }}
|
||||
</div>
|
||||
@endif
|
||||
@if (session()->has('not_permitted'))
|
||||
<div class="alert alert-danger alert-dismissible text-center">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>{{ session()->get('not_permitted') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<section>
|
||||
<div class="container-fluid">
|
||||
<div style="border-radius: 30px;" class="card pb-4 ">
|
||||
<link rel="stylesheet" href="{{ asset('public/css/cloudma.css') }}">
|
||||
<div style="background: linear-gradient(to right, #00c1e3, #00489f); border-radius: 30px 30px 0px 0px; font-weight: bold; color: white;"
|
||||
class="card-header mt-2">
|
||||
<h3 class="text-center">Daily Sale Payment Report</h3>
|
||||
</div>
|
||||
|
||||
<form action="{{ url('dailysalepaymentreportmodule') }}" method="GET">
|
||||
<div class="row mr-1 mt-4 pl-4 align-items-center">
|
||||
<div class="col-md-4">
|
||||
<label><strong>Select Date</strong> </label>
|
||||
<div class="input-group">
|
||||
<input type="date" name="report_date" id="report_date"
|
||||
value="{{ request()->input('report_date', date('Y-m-d')) }}" class="form-control"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 pt-md-4">
|
||||
<button type="submit" class="btn btn-primary" id="generate-report-btn">Generate Report</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid mt-3">
|
||||
<h4 class="mb-3" style="color: #00489f; font-weight: bold;">Sales Table (Daily Sale)</h4>
|
||||
<div class="table-responsive">
|
||||
<table style="border-radius: 15px; background-color: #e0e5ea;" id="sales-table" class="table table-hover">
|
||||
<thead
|
||||
style="border-radius: 50px; background: linear-gradient(to right, #078bce, #1a1d1e); color: white;">
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Reference Number</th>
|
||||
<th>Cashier</th>
|
||||
<th>Customer</th>
|
||||
<th>Grand Total</th>
|
||||
<th>Cash</th>
|
||||
<th>Card 1</th>
|
||||
<th>Card 2</th>
|
||||
<th>Card 3</th>
|
||||
<th>Online Transfer</th>
|
||||
<th>Link Pay</th>
|
||||
<th>Due Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{-- @foreach ($sales_data as $sale) --}}
|
||||
<!-- Data rows will come here -->
|
||||
{{-- @endforeach --}}
|
||||
</tbody>
|
||||
<tfoot style="background-color: #cdd4da; font-weight: bold;">
|
||||
<tr>
|
||||
<td colspan="4" class="text-right">Total</td>
|
||||
<td>0.00</td> <!-- Grand Total Sum -->
|
||||
<td>0.00</td> <!-- Cash Sum -->
|
||||
<td>0.00</td> <!-- Card 1 Sum -->
|
||||
<td>0.00</td> <!-- Card 2 Sum -->
|
||||
<td>0.00</td> <!-- Card 3 Sum -->
|
||||
<td>0.00</td> <!-- Online Sum -->
|
||||
<td>0.00</td> <!-- Link Pay Sum -->
|
||||
<td>0.00</td> <!-- Due Sum -->
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid mt-5">
|
||||
<h4 class="mb-3" style="color: #00489f; font-weight: bold;">Credit Sale Collections</h4>
|
||||
<div class="table-responsive">
|
||||
<table style="border-radius: 15px; background-color: #e0e5ea;" id="credit-collection-table"
|
||||
class="table table-hover">
|
||||
<thead
|
||||
style="border-radius: 50px; background: linear-gradient(to right, #078bce, #1a1d1e); color: white;">
|
||||
<tr>
|
||||
<th>Original Bill Date</th>
|
||||
<th>Reference Number</th>
|
||||
<th>Cashier</th>
|
||||
<th>Customer</th>
|
||||
<th>Grand Total</th>
|
||||
<th>Cash</th>
|
||||
<th>Card 1</th>
|
||||
<th>Card 2</th>
|
||||
<th>Card 3</th>
|
||||
<th>Online Transfer</th>
|
||||
<th>Link Pay</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{-- @foreach ($credit_data as $credit) --}}
|
||||
<!-- Data rows will come here -->
|
||||
{{-- @endforeach --}}
|
||||
</tbody>
|
||||
<tfoot style="background-color: #cdd4da; font-weight: bold;">
|
||||
<tr>
|
||||
<td colspan="4" class="text-right">Total</td>
|
||||
<td>0.00</td> <!-- Grand Total Sum -->
|
||||
<td>0.00</td> <!-- Cash Sum -->
|
||||
<td>0.00</td> <!-- Card 1 Sum -->
|
||||
<td>0.00</td> <!-- Card 2 Sum -->
|
||||
<td>0.00</td> <!-- Card 3 Sum -->
|
||||
<td>0.00</td> <!-- Online Sum -->
|
||||
<td>0.00</td> <!-- Link Pay Sum -->
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid mt-5 mb-5">
|
||||
<h4 class="mb-3" style="color: #00489f; font-weight: bold;">Payment Method Summary</h4>
|
||||
<div class="table-responsive">
|
||||
<table style="border-radius: 15px; background-color: #e0e5ea; width: 60%;" id="summary-table"
|
||||
class="table table-hover">
|
||||
<thead
|
||||
style="border-radius: 50px; background: linear-gradient(to right, #078bce, #1a1d1e); color: white;">
|
||||
<tr>
|
||||
<th>Payment Option</th>
|
||||
<th>Sale Amount</th>
|
||||
<th>Received Amount</th>
|
||||
<th>Total Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cash</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Card 1</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Card 2</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Card 3</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Online Transfer</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Link Pay</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot style="background-color: #cdd4da; font-weight: bold;">
|
||||
<tr>
|
||||
<td class="text-right">Grand Total</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
<td>0.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.bootstrap-select.form-control,
|
||||
.form-control,
|
||||
.input-group-text {
|
||||
background-color: #fdfdff;
|
||||
border-color: #002250;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #002250;
|
||||
border-color: #002250;
|
||||
border-radius: 15px;
|
||||
padding: 10px 25px;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #0068e3;
|
||||
}
|
||||
|
||||
.dt-button-collection.dropdown-menu {
|
||||
background: #0068e3;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
/* Table Border Radius Fix for Datatables */
|
||||
table.dataTable {
|
||||
border-collapse: collapse !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dt-buttons {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript">
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
|
||||
// Common export buttons configuration
|
||||
var exportButtons = [
|
||||
{
|
||||
extend: 'pdf',
|
||||
text: '<i title="export to pdf" class="fa fa-file-pdf-o"></i>',
|
||||
exportOptions: { columns: ':visible' }
|
||||
},
|
||||
{
|
||||
extend: 'excel',
|
||||
text: '<i title="export to excel" class="dripicons-document-new"></i>',
|
||||
exportOptions: { columns: ':visible' }
|
||||
},
|
||||
{
|
||||
extend: 'csv',
|
||||
text: '<i title="export to csv" class="fa fa-file-text-o"></i>',
|
||||
exportOptions: { columns: ':visible' }
|
||||
},
|
||||
{
|
||||
extend: 'print',
|
||||
text: '<i title="print" class="fa fa-print"></i>',
|
||||
exportOptions: { columns: ':visible' }
|
||||
}
|
||||
];
|
||||
|
||||
// Initialize Sales Table
|
||||
$('#sales-table').DataTable({
|
||||
"order": [],
|
||||
dom: '<"row"lfB>rtip',
|
||||
buttons: exportButtons,
|
||||
'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]]
|
||||
});
|
||||
|
||||
// Initialize Credit Collection Table
|
||||
$('#credit-collection-table').DataTable({
|
||||
"order": [],
|
||||
dom: '<"row"lfB>rtip',
|
||||
buttons: exportButtons,
|
||||
'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]]
|
||||
});
|
||||
|
||||
// Initialize Summary Table (Without pagination/search for cleaner look)
|
||||
$('#summary-table').DataTable({
|
||||
"order": [],
|
||||
dom: '<"row"B>rt',
|
||||
buttons: exportButtons,
|
||||
"paging": false,
|
||||
"searching": false,
|
||||
"info": false
|
||||
});
|
||||
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user