first commit
This commit is contained in:
513
resources/views/themes/tailwind/user/book-keeping/list.blade.php
Normal file
513
resources/views/themes/tailwind/user/book-keeping/list.blade.php
Normal file
@@ -0,0 +1,513 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
@section('style')
|
||||
<style>
|
||||
img.doc-file-img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="bk-list-page">
|
||||
<div class="title-wrapper">
|
||||
<h2 class="page-title">Bookkeeping Service</h2>
|
||||
<div class="title-actions-wrapper">
|
||||
<button type="button" class="btn yellow-btn mr-4" data-bs-toggle="modal" data-bs-target="#newDocumentModal">New Queue</button>
|
||||
<a href="{{ route('wave.user.book-keeping.document-library') }}" class="btn blue-btn">Document Library</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-nav-tabs">
|
||||
<ul class="nav nav-tabs nav-justified">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#queueList">
|
||||
<img src="{{ asset('themes/tailwind/images/queue-list-icon.png') }}">
|
||||
In Queue List
|
||||
<span class="tab-count">{{ $documents_list->count() }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#completedList">
|
||||
<img src="{{ asset('themes/tailwind/images/tick-circle-2.png') }}">
|
||||
Completed List
|
||||
<span class="tab-count">{{ $documents_complete->count() }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="queueList">
|
||||
<div class="table-responsive">
|
||||
<table class="table custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Document Name</th>
|
||||
<th scope="col">Document Category</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Last Status Timestamp</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($documents_list as $doc)
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
@php
|
||||
$ext = pathinfo($doc->file_name, PATHINFO_EXTENSION);
|
||||
@endphp
|
||||
@if ($ext == 'pdf')
|
||||
<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/pdf.svg') }}">
|
||||
@else
|
||||
<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
@endif
|
||||
{{ $doc->file_name }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ $doc->category->name }}</td>
|
||||
<td>{{ $doc->status }}</td>
|
||||
<td>{{ $doc->created_at }}</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#pdfViewModal-{{ $doc->id }}" >View</a>
|
||||
<span class="action-separator">|</span>
|
||||
<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#documentPropertiesModal-{{ $doc->id }}">Properties</a>
|
||||
</div>
|
||||
<div class="modal fade" id="pdfViewModal-{{ $doc->id }}" tabindex="-1" role="dialog" aria-labelledby="pdfViewModal-{{ $doc->id }}Label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<img src="{{ $doc->file_url }}" class="doc-file-img" style="margin: 0 auto;" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Add Document Properties Modal --}}
|
||||
<div class="modal fade custom-modal style2" id="documentPropertiesModal-{{ $doc->id }}" tabindex="-1" aria-labelledby="documentPropertiesModal-{{ $doc->id }}Label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-740px modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">Properties</p>
|
||||
|
||||
<form action="#" class="theme-form">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document name :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->name }}.{{ $ext }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Original name :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->file_name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document ID :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">--</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document type :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">Bookkeeping</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document category :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->category->name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Xero Amount :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">$00</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Status :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->status }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Last status timestamp :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->updated_at }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="form-separator mb-4">
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Company name :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->company->name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Company ID :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->company->id }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Uploaded on :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->created_at }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Uploaded by :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->user->name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">Back</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="empty-state-wrapper {{ $documents_list->count() == 0 ? '' : 'd-none' }}">
|
||||
<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/empty-state-img.svg') }}">
|
||||
<span class="empty-text d-block text-center w-100">It’s empty here...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="completedList">
|
||||
<div class="table-responsive">
|
||||
<table class="table custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Document Name</th>
|
||||
<th scope="col">Document Category</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Xero Status</th>
|
||||
<th scope="col">Xero Amount</th>
|
||||
<th scope="col">Last Status Timestamp</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($documents_complete as $doc)
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
@php
|
||||
$ext = pathinfo($doc->file_name, PATHINFO_EXTENSION);
|
||||
@endphp
|
||||
@if ($ext == 'pdf')
|
||||
<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/pdf.svg') }}">
|
||||
@else
|
||||
<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
@endif
|
||||
{{ $doc->file_name }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ $doc->category->name }}</td>
|
||||
<td>{{ $doc->status }}</td>
|
||||
<td>{{ $doc->xero_status }}</td>
|
||||
<td>{{ $doc->xero_amount }}</td>
|
||||
<td>{{ $doc->created_at }}</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#pdfViewModal-{{ $doc->id }}" >View</a>
|
||||
<span class="action-separator">|</span>
|
||||
<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#documentPropertiesModal-com-{{ $doc->id }}">Properties</a>
|
||||
<span class="action-separator">|</span>
|
||||
<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#userDetailsModal">Download</a>
|
||||
</div>
|
||||
<div class="modal fade" id="pdfViewModal-{{ $doc->id }}" tabindex="-1" role="dialog" aria-labelledby="pdfViewModal-{{ $doc->id }}Label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<img class="doc-file-img" src="{{ $doc->file_url }}" style="margin: 0 auto;" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Add Document Properties Modal --}}
|
||||
<div class="modal fade custom-modal style2" id="documentPropertiesModal-com-{{ $doc->id }}" tabindex="-1" aria-labelledby="documentPropertiesModal-com-{{ $doc->id }}Label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-740px modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">Properties</p>
|
||||
|
||||
<form action="#" class="theme-form">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document name :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->name }}.{{ $ext }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Original name :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->file_name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document ID :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">--</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document type :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">Bookkeeping</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document category :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->category->name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Xero Amount :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">$00</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Status :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->status }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Last status timestamp :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->updated_at }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="form-separator mb-4">
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Company name :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->company->name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Company ID :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->company->id }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Uploaded on :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->created_at }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Uploaded by :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->user->name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">Back</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="empty-state-wrapper {{ $documents_complete->count() == 0 ? '' : 'd-none' }}">
|
||||
<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/empty-state-img.svg') }}">
|
||||
<span class="empty-text d-block text-center w-100">It’s empty here...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Add Upload Document Modal --}}
|
||||
<div class="modal fade custom-modal style2" id="newDocumentModal" tabindex="-1" aria-labelledby="newDocumentModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">Upload Document</p>
|
||||
|
||||
<form action="{{ route('wave.user.book-keeping.add.document') }}" id="add-document-form" class="theme-form">
|
||||
<div class="mb-4 file-upload-wrapper">
|
||||
<img class="img-fluid mx-auto" width="107" src="{{ asset('themes/tailwind/images/file-upload-icon.png') }}">
|
||||
<span class="file-upload-desc empty-state">
|
||||
Drag and drop files here or choose file.
|
||||
<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</span>
|
||||
<span class="file-upload-desc with-value" style="display: none;"></span>
|
||||
<input type="file" name="document" accept="application/msword, image/*" required >
|
||||
<button type="button" class="btn yellow-btn file-upload-btn mx-auto">Choose File</button>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document name</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" name="name" class="form-control" value="" required >
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document description</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<textarea class="form-control" name="description" required ></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document category</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="bookkeeping_document_category_id" required >
|
||||
@foreach($document_category as $category)
|
||||
<option value="{{ $category->id }}" >{{ $category->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="submit" class="btn blue-btn mx-3">Submit</button>
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade validation-modal style2" id="invalidFormatModal" tabindex="-1" aria-labelledby="validationModal1Label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="text-center error-message">{{ __("Unable to Preview file format") }}</p>
|
||||
<button type="button" class="btn br-0" data-bs-dismiss="modal">{{ __("Back") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('script')
|
||||
<script>
|
||||
$(function() {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
|
||||
$('.password-hide-show').click(function() {
|
||||
var type = $(this).parent().find('input').attr('type');
|
||||
|
||||
if (type == 'password') {
|
||||
$(this).parent().find('input').attr('type', 'text');
|
||||
}
|
||||
else {
|
||||
$(this).parent().find('input').attr('type', 'password');
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.pdf-prev-btn', function(){
|
||||
$('#pdfViewModal').modal('show');
|
||||
});
|
||||
$(document).on('click', '.undefined-format-btn', function(){
|
||||
$('#invalidFormatModal').modal('show');
|
||||
});
|
||||
|
||||
$(document).on('submit', '#add-document-form', function(e){
|
||||
e.preventDefault();
|
||||
var url = $(this).attr('action');
|
||||
var form_data = new FormData($(this)[0]);
|
||||
|
||||
$.ajax({
|
||||
url:url,
|
||||
type: 'post',
|
||||
data:form_data,
|
||||
dataType:'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success:function(data){
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user