514 lines
20 KiB
PHP
514 lines
20 KiB
PHP
@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
|