Files
numstation-web/resources/views/themes/tailwind/user/book-keeping/list.blade.php

514 lines
20 KiB
PHP
Raw Normal View History

2023-12-22 12:35:55 +08:00
@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">Its 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">Its 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