first commit
This commit is contained in:
benjibennn
@@ -0,0 +1,397 @@
|
||||
@extends('theme::layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.dashboard-title{
|
||||
font-size: 32px;
|
||||
color: #364257;
|
||||
margin-right: 80px;
|
||||
}
|
||||
.dashboard-btn{
|
||||
margin-right: 20px;
|
||||
font-weight: bold;
|
||||
width: 250px;
|
||||
padding: 12px !important;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 30px;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
|
||||
}
|
||||
.back-btn {
|
||||
background-color: #9B0025;
|
||||
color: #FFF;
|
||||
padding: 20px 105px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="dashboard-title-flex">
|
||||
<h2 class="dashboard-title">{{ __("Bookkeeping") }}</h2>
|
||||
<div class="dashboard-button-title">
|
||||
<a href="#" class="btn primary-button" data-bs-toggle="modal" data-bs-target="#newCategoryModal">{{ __("New Category") }}</a>
|
||||
<a href="{{ route('cms.bookkeepings') }}" class="btn btn-error">{{ __("Back") }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs-content">
|
||||
<div class="tabs-content-item white-bg no-padd no-box-shadow">
|
||||
<table id="categoriesTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{ __("Category Name") }}</td>
|
||||
<td>{{ __("Status") }}</td>
|
||||
<td>{{ __("Action") }}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Modals --}}
|
||||
{{-- Add Category Modal --}}
|
||||
<div class="modal fade custom-modal" id="newCategoryModal" tabindex="-1" aria-labelledby="newCategoryModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">{{ __("Category detail") }}</p>
|
||||
|
||||
<form action="{{ route('cms.bookkeepings.categories.store') }}" class="theme-form" id="addCategoryFrm">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("Name") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="" name="name" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-auto" required>
|
||||
<label class="col-form-label">{{ __("Status") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="status">
|
||||
<option value="active" selected>{{ __("Active") }}</option>
|
||||
<option value="inactive">{{ __("Inactive") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="submit" class="btn green-btn mx-3">{{ __("Save") }}</button>
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Edit Category Modal --}}
|
||||
<div class="modal fade custom-modal" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">{{ __("Category detail") }}</p>
|
||||
|
||||
<form action="#" class="theme-form" id="editCategoryFrm">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("Name") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="" name="name" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-auto" required>
|
||||
<label class="col-form-label">{{ __("Status") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="status">
|
||||
<option value="active" selected>{{ __("Active") }}</option>
|
||||
<option value="inactive">{{ __("Inactive") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="submit" class="btn green-btn mx-3">{{ __("Save") }}</button>
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Saved Success Modal --}}
|
||||
<div class="modal fade validation-modal style2" id="validationModal" 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">{{ __("All changes have been saved!") }}</p>
|
||||
<button type="button" class="btn br-0" data-bs-dismiss="modal">{{ __("Back") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('script')
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
|
||||
var categoriesTable = $("#categoriesTable").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: {
|
||||
url: '{{ route("cms.bookkeepings.categories.table") }}',
|
||||
type: 'post',
|
||||
"dataSrc": function ( json ) {
|
||||
for (var i = 0; i < json.data.length; i++) {
|
||||
$.each( json.data[i], function( key, value ) {
|
||||
json.data[i][key] = value ? value : '-';
|
||||
});
|
||||
}
|
||||
|
||||
return json.data;
|
||||
}
|
||||
},
|
||||
columns: [
|
||||
{data: 'name', name: 'name'},
|
||||
{data: 'status', name: 'status'},
|
||||
{data: 'actions', name: 'actions', searchable: false, sortable: false}
|
||||
],
|
||||
order: [[0, "asc"]],
|
||||
searchDelay: 500,
|
||||
"language": {
|
||||
"paginate": {
|
||||
"next": ">", // Text for the "Next" page button
|
||||
"previous": "<" // Text for the "Previous" page button
|
||||
},
|
||||
"emptyTable": '{{ __("No data available in table") }}'
|
||||
// Add more text customizations if needed
|
||||
}
|
||||
});
|
||||
|
||||
$('#addCategoryFrm').submit(function(e) {
|
||||
e.preventDefault();
|
||||
var action = $(this).attr('action');
|
||||
var button = $(this).find('button[type="submit"]');
|
||||
var buttonHtml = button.html();
|
||||
|
||||
if (!button.is(':disabled') && action) {
|
||||
button.attr('disabled', 'disabled');
|
||||
button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');
|
||||
|
||||
$.ajax({
|
||||
url: action,
|
||||
type: "post",
|
||||
data: $(this).serialize(),
|
||||
dataType: 'json',
|
||||
success:function(data) {
|
||||
button.removeAttr('disabled');
|
||||
button.html(buttonHtml);
|
||||
|
||||
if (data.success) {
|
||||
$('#newCategoryModal').modal('hide');
|
||||
$('#validationModal').modal('show');
|
||||
$('#validationModal .error-message').html(data.message);
|
||||
|
||||
$('#addUserFrm').trigger("reset");
|
||||
categoriesTable.ajax.reload();
|
||||
}
|
||||
else {
|
||||
$('#validationModal .error-message').html(data.message);
|
||||
$('#validationModal').modal('show');
|
||||
}
|
||||
},
|
||||
error: function(data) {
|
||||
var errors = data.responseJSON.errors;
|
||||
var errorMessage = '<ul>';
|
||||
$.each(errors, function(index, error) {
|
||||
console.log(error);
|
||||
errorMessage += '<li>' + error[0] + '</li>';
|
||||
});
|
||||
errorMessage += '</ul>';
|
||||
|
||||
$('#validationModal .error-message').html(errorMessage);
|
||||
$('#validationModal').modal('show');
|
||||
button.removeAttr('disabled');
|
||||
button.html(buttonHtml);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.remove-category', function(e) {
|
||||
var action = $(this).attr('data-action');
|
||||
|
||||
if (action) {
|
||||
Swal.fire({
|
||||
title: '{{ __("Are you sure?") }}',
|
||||
text: '{{ __("You would not be able to revert this!") }}',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: '{{ __("Yes") }}',
|
||||
cancelButtonText: '{{ __("Cancel") }}'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
$.ajax({
|
||||
url: action,
|
||||
type: "post",
|
||||
data: {},
|
||||
dataType: 'json',
|
||||
success:function(data) {
|
||||
if (data.success) {
|
||||
$('#validationModal').modal('show');
|
||||
$('#validationModal .error-message').html(data.message);
|
||||
|
||||
categoriesTable.ajax.reload();
|
||||
}
|
||||
},
|
||||
error: function(data) {
|
||||
var errors = data.responseJSON.errors;
|
||||
var errorMessage = '<ul>';
|
||||
$.each(errors, function(index, error) {
|
||||
console.log(error);
|
||||
errorMessage += '<li>' + error[0] + '</li>';
|
||||
});
|
||||
errorMessage += '</ul>';
|
||||
|
||||
$('#validationModal .error-message').html(errorMessage);
|
||||
$('#validationModal').modal('show');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.view-edit-category', function(e) {
|
||||
var actionType = $(this).attr('data-action-type');
|
||||
var actionShow = $(this).attr('data-action-show');
|
||||
var actionUpdate = $(this).attr('data-action-update');
|
||||
|
||||
if (actionShow && actionUpdate) {
|
||||
$.ajax({
|
||||
url: actionShow,
|
||||
type: "post",
|
||||
data: {},
|
||||
dataType: 'json',
|
||||
success:function(data) {
|
||||
if (data.success) {
|
||||
$('#editCategoryFrm').attr('action', actionUpdate);
|
||||
$('#editCategoryFrm input[name="name"]').val(data.category.name);
|
||||
$('#editCategoryFrm select[name="status"]').val(data.category.status);
|
||||
|
||||
if (actionType == 'edit') {
|
||||
$('#editCategoryFrm input[name="name"]').removeAttr('disabled');
|
||||
$('#editCategoryFrm select[name="status"]').removeAttr('disabled');
|
||||
}
|
||||
else {
|
||||
$('#editCategoryFrm input[name="name"]').attr('disabled', 'disabled');
|
||||
$('#editCategoryFrm select[name="status"]').attr('disabled', 'disabled');
|
||||
}
|
||||
|
||||
$('#editCategoryModal').modal('show');
|
||||
}
|
||||
},
|
||||
error: function(data) {
|
||||
var errors = data.responseJSON.errors;
|
||||
var errorMessage = '<ul>';
|
||||
$.each(errors, function(index, error) {
|
||||
console.log(error);
|
||||
errorMessage += '<li>' + error[0] + '</li>';
|
||||
});
|
||||
errorMessage += '</ul>';
|
||||
|
||||
$('#validationModal .error-message').html(errorMessage);
|
||||
$('#validationModal').modal('show');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#editCategoryFrm').submit(function(e) {
|
||||
e.preventDefault();
|
||||
var action = $(this).attr('action');
|
||||
var button = $(this).find('button[type="submit"]');
|
||||
var buttonHtml = button.html();
|
||||
|
||||
if (!button.is(':disabled') && action) {
|
||||
button.attr('disabled', 'disabled');
|
||||
button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');
|
||||
|
||||
$.ajax({
|
||||
url: action,
|
||||
type: "post",
|
||||
data: $(this).serialize(),
|
||||
dataType: 'json',
|
||||
success:function(data) {
|
||||
button.removeAttr('disabled');
|
||||
button.html(buttonHtml);
|
||||
|
||||
if (data.success) {
|
||||
$('#editCategoryModal').modal('hide');
|
||||
$('#validationModal').modal('show');
|
||||
$('#validationModal .error-message').html(data.message);
|
||||
|
||||
$('#editCategoryFrm').trigger("reset");
|
||||
categoriesTable.ajax.reload();
|
||||
}
|
||||
else {
|
||||
$('#validationModal .error-message').html(data.message);
|
||||
$('#validationModal').modal('show');
|
||||
}
|
||||
},
|
||||
error: function(data) {
|
||||
var errors = data.responseJSON.errors;
|
||||
var errorMessage = '<ul>';
|
||||
$.each(errors, function(index, error) {
|
||||
console.log(error);
|
||||
errorMessage += '<li>' + error[0] + '</li>';
|
||||
});
|
||||
errorMessage += '</ul>';
|
||||
|
||||
$('#validationModal .error-message').html(errorMessage);
|
||||
$('#validationModal').modal('show');
|
||||
button.removeAttr('disabled');
|
||||
button.html(buttonHtml);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,356 @@
|
||||
@extends('theme::layouts.app')
|
||||
|
||||
@section('style')
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" />
|
||||
<style type="text/css">
|
||||
|
||||
.dashboard-title{
|
||||
font-size: 32px;
|
||||
color: #364257;
|
||||
margin-right: 80px;
|
||||
}
|
||||
.dashboard-btn{
|
||||
margin-right: 20px;
|
||||
font-weight: bold;
|
||||
width: 250px;
|
||||
padding: 12px !important;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 30px;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
|
||||
}
|
||||
.back-btn {
|
||||
background-color: #9B0025;
|
||||
color: #FFF;
|
||||
padding: 20px 105px;
|
||||
width: 250px;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<button type="button" class="d-none reload-main-table"></button>
|
||||
|
||||
<div class="dashboard-title-flex">
|
||||
<h2 class="dashboard-title">{{ __("Document Library") }}</h2>
|
||||
<div class="dashboard-button-title">
|
||||
<a href="#" class="btn primary-button" data-bs-toggle="modal" data-bs-target="#uploadDocumentModal">{{ __("Upload Document") }}</a>
|
||||
<a href="{{ route('cms.bookkeepings') }}" class="btn btn-error">{{ __("Back") }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="search-bar flex mb-5" id="searchFilterFrm">
|
||||
<span class="search-bar__label">{{ __("Document/Record search") }}</span>
|
||||
<div class="search-bar__field">
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#searchFilterModal"><img src="{{ asset('themes/tailwind/images/setting-4.svg') }}"></button>
|
||||
<input type="text" name="main_search_file_name" class="w-100" style="box-shadow: none;">
|
||||
</div>
|
||||
<button type="submit" class="btn primary-button search-bar__button">{{ __("Search") }}</button>
|
||||
</form>
|
||||
|
||||
<div class="tabs-content">
|
||||
<div class="tabs-content-item white-bg no-padd no-box-shadow">
|
||||
<table id="documentLibrariesTable">
|
||||
<thead>
|
||||
<tr>
|
||||
{{-- <td style="width: fit-content;"><input type="checkbox"></td> --}}
|
||||
<td>{{ __("Document Name") }}</td>
|
||||
<td>{{ __("Company") }}</td>
|
||||
<td>{{ __("Document Category") }}</td>
|
||||
<td>{{ __("Upload User") }}</td>
|
||||
<td>{{ __("Document Size") }}</td>
|
||||
<td>{{ __("Date Uploaded") }}</td>
|
||||
<td>{{ __("Action") }}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{-- <tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td>
|
||||
<div class="flex justify-start">
|
||||
<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
<span class="fix-text">202301Bank state...</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>ABC Consultant Ltd.</td>
|
||||
<td>Report</td>
|
||||
<td>Admin</td>
|
||||
<td class="primary-text">234KB</td>
|
||||
<td>20230515-14:43</td>
|
||||
<td>
|
||||
<a href="#" class="primary-text">View</a> |
|
||||
<a href="#" class="primary-text">Properties</a> |
|
||||
<a href="#" class="primary-text">Download</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td>
|
||||
<div class="flex justify-start">
|
||||
<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
<span class="fix-text">202301Bank state...</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>ABC Consultant Ltd.</td>
|
||||
<td>Report</td>
|
||||
<td>Admin</td>
|
||||
<td class="primary-text">234KB</td>
|
||||
<td>20230515-14:43</td>
|
||||
<td>
|
||||
<a href="#" class="primary-text">View</a> |
|
||||
<a href="#" class="primary-text">Properties</a> |
|
||||
<a href="#" class="primary-text">Download</a>
|
||||
</td>
|
||||
</tr> --}}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<a href="{{ route('cms.bookkeepings.document-libraries.export') }}" class="btn primary-button w-fit-content mb-3" style="min-width: 300px;">{{ __("Download") }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Modals --}}
|
||||
{{-- Upload Document Modal --}}
|
||||
@include('theme::cms.bookkeepings.document-libraries.upload-document-modal')
|
||||
|
||||
<div class="modal fade custom-modal" id="searchFilterModal" tabindex="-1" aria-labelledby="searchFilterModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">{{ __("Search") }}</p>
|
||||
|
||||
<form action="#" class="theme-form" id="searchFilterModalFrm">
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-4">
|
||||
<label class="col-form-label">{{ __("Document category") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="search_bookkeeping_document_category_id">
|
||||
@foreach ($categories as $category)
|
||||
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-4">
|
||||
<label class="col-form-label">{{ __("Status") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="search_status">
|
||||
<option value="uploaded">{{ __("Uploaded") }}</option>
|
||||
<option value="in_progress">{{ __("In Progress") }}</option>
|
||||
<option value="ocr_complete">{{ __("OCR Complete") }}</option>
|
||||
<option value="failed">{{ __("Failed") }}</option>
|
||||
<option value="completed">{{ __("Completed") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-4">
|
||||
<label class="col-form-label">Keyword</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="" name="search_file_name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-4">
|
||||
<label class="col-form-label">Date uploaded</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="search_date_uploaded">
|
||||
<option value="">Any time</option>
|
||||
<option value="today">{{ __("Today") }}</option>
|
||||
<option value="yesterday">{{ __("Yesterday") }}</option>
|
||||
<option value="last_7_days">{{ __("Last 7 days") }}</option>
|
||||
<option value="last_30_days">{{ __("Last 30 days") }}</option>
|
||||
<option value="last_90_days">{{ __("Last 90 days") }}</option>
|
||||
<option value="custom">{{ __("Custom") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="display:none;" id="customDateWrapper">
|
||||
<div class="col-md-12">
|
||||
<label class="col-form-label">Between</label>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="" name="search_date_from">
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="" name="search_date_to">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="submit" class="btn green-btn mx-3">{{ __("Search") }}</button>
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('script')
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
|
||||
<script type="text/javascript" src="{{ asset('themes/' . $theme->folder . '/js/cms/bookkeepings/document-libraries/upload-document-modal.js') }}"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
var mainSearchBtnClicked = false;
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
|
||||
$('#searchFilterModalFrm [name="search_date_from"]').datepicker().on('changeDate', function (selected) {
|
||||
var minDate = new Date(selected.date.valueOf());
|
||||
$('#searchFilterModalFrm [name="search_date_to"]').datepicker('setStartDate', minDate);
|
||||
$('#searchFilterModalFrm [name="search_date_to"]').val('');
|
||||
});
|
||||
$('#searchFilterModalFrm [name="search_date_to"]').datepicker();
|
||||
|
||||
var documentLibrariesTable = $("#documentLibrariesTable").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: {
|
||||
url: '{{ route("cms.bookkeepings.document-libraries.table") }}',
|
||||
type: 'post',
|
||||
"data": function ( d ) {
|
||||
if (mainSearchBtnClicked == false && $('#searchFilterModal').is(':visible')) {
|
||||
return $.extend( {}, d, {
|
||||
"bookkeeping_document_category_id": $('#searchFilterModalFrm [name="search_bookkeeping_document_category_id"]').val(),
|
||||
"status": $('#searchFilterModalFrm [name="search_status"]').val(),
|
||||
"file_name": $('#searchFilterModalFrm [name="search_file_name"]').val(),
|
||||
"date_uploaded": $('#searchFilterModalFrm [name="search_date_uploaded"]').val(),
|
||||
"date_uploaded_from": $('#searchFilterModalFrm [name="search_date_from"]').val(),
|
||||
"date_uploaded_to": $('#searchFilterModalFrm [name="search_date_to"]').val(),
|
||||
} );
|
||||
}
|
||||
else if (mainSearchBtnClicked) {
|
||||
return $.extend( {}, d, {
|
||||
"file_name": $('#searchFilterFrm [name="main_search_file_name"]').val(),
|
||||
} );
|
||||
}
|
||||
else {
|
||||
return $.extend( {}, d, {} );
|
||||
}
|
||||
},
|
||||
"dataSrc": function ( json ) {
|
||||
for (var i = 0; i < json.data.length; i++) {
|
||||
$.each( json.data[i], function( key, value ) {
|
||||
json.data[i][key] = value ? value : '-';
|
||||
});
|
||||
}
|
||||
|
||||
return json.data;
|
||||
},
|
||||
complete: function (data) {
|
||||
if (mainSearchBtnClicked == false && $('#searchFilterModal').is(':visible')) {
|
||||
$('#searchFilterFrm')[0].reset();
|
||||
}
|
||||
else if (mainSearchBtnClicked) {
|
||||
$('#searchFilterModalFrm')[0].reset();
|
||||
}
|
||||
|
||||
$('#searchFilterModal').modal('hide');
|
||||
$('#searchFilterModalFrm button[type="submit"]').removeAttr('disabled');
|
||||
$('#searchFilterModalFrm button[type="submit"]').html('{{ __("Search") }}');
|
||||
|
||||
$('#searchFilterFrm button[type="submit"]').removeAttr('disabled');
|
||||
$('#searchFilterFrm button[type="submit"]').html('{{ __("Search") }}');
|
||||
|
||||
mainSearchBtnClicked = false;
|
||||
}
|
||||
},
|
||||
columns: [
|
||||
// {data: 'checkbox', name: 'checkbox', searchable: false, sortable: false},
|
||||
{data: 'file_name', name: 'bookkeeping_documents.file_name'},
|
||||
('{{ strtolower(app()->getLocale()) }}' == 'zh_hk' ? {data: 'name_chinese', name: 'companies.name_chinese'} : {data: 'name_english', name: 'companies.name_english'}),
|
||||
{data: 'category_name', name: 'bookkeeping_document_categories.name'},
|
||||
{data: 'user_name', name: 'users.name'},
|
||||
{data: 'document_size', name: 'document_size', searchable: false, sortable: false},
|
||||
{data: 'created_at', name: 'bookkeeping_documents.created_at'},
|
||||
{data: 'actions', name: 'actions', searchable: false, sortable: false}
|
||||
],
|
||||
order: [[5, "desc"]],
|
||||
searchDelay: 500,
|
||||
"language": {
|
||||
"paginate": {
|
||||
"next": ">", // Text for the "Next" page button
|
||||
"previous": "<" // Text for the "Previous" page button
|
||||
},
|
||||
"emptyTable": '{{ __("No data available in table") }}'
|
||||
// Add more text customizations if needed
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('change', '#searchFilterModalFrm [name="search_date_uploaded"]', function (e) {
|
||||
if ($(this).val() == 'custom') {
|
||||
$('#searchFilterModalFrm #customDateWrapper').show();
|
||||
}
|
||||
else {
|
||||
$('#searchFilterModalFrm #customDateWrapper').hide();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.reload-main-table', function (e) {
|
||||
documentLibrariesTable.ajax.reload();
|
||||
});
|
||||
|
||||
$(document).on('submit', '#searchFilterModalFrm', function (e) {
|
||||
e.preventDefault();
|
||||
var button = $(this).find('button[type="submit"]');
|
||||
var buttonHtml = button.html();
|
||||
|
||||
if (!button.is(':disabled')) {
|
||||
button.attr('disabled', 'disabled');
|
||||
button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');
|
||||
documentLibrariesTable.ajax.reload();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('submit', '#searchFilterFrm', function (e) {
|
||||
e.preventDefault();
|
||||
var button = $(this).find('button[type="submit"]');
|
||||
var buttonHtml = button.html();
|
||||
|
||||
if (!button.is(':disabled')) {
|
||||
button.attr('disabled', 'disabled');
|
||||
button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');
|
||||
mainSearchBtnClicked = true;
|
||||
documentLibrariesTable.ajax.reload();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.download-file', function (e) {
|
||||
var id = $(this).attr('data-id');
|
||||
var url = '{{ route("cms.bookkeepings.document-libraries.download", ["document" => ":id"]) }}';
|
||||
|
||||
if (id) {
|
||||
$.ajax({
|
||||
url: url.replace(':id', id),
|
||||
type: "get",
|
||||
data: {},
|
||||
dataType: 'json',
|
||||
success:function(data) {
|
||||
},
|
||||
error: function(data) {
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,176 @@
|
||||
|
||||
<style type="text/css">
|
||||
.pop-up-btn-confirm {
|
||||
background-image: linear-gradient(to right, #62C5BD , #C8E1A4) !important;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.pop-up-btn-deny {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: #EBEBE4;
|
||||
}
|
||||
|
||||
.select-width {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.fix-text{
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
width: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.d-none{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dragDropContainer{
|
||||
border: 2px dashed #000;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-upload{
|
||||
background-color: #58C2B1;
|
||||
padding: 10px 50px;
|
||||
color: #000;
|
||||
box-shadow: 0px 4px 8px #15785440;
|
||||
}
|
||||
|
||||
.uploadingContainer{
|
||||
background-color: #F4F7FA;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.group-input-cont{
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.group-input-label{
|
||||
float: left;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.group-input{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.group-input-span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding-right:10px;
|
||||
}
|
||||
|
||||
.uploaded-file-container {
|
||||
background-color: #F4F7FA;
|
||||
padding: 15px 10px;
|
||||
height: calc(100vh - 630px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.uploaded-file-container .file-row {
|
||||
border-bottom: 1px solid;
|
||||
border-image-source: linear-gradient(90deg, rgba(87, 87, 87, 0.2) 0%, #010101 48.44%, rgba(74, 74, 74, 0.2) 100%);
|
||||
}
|
||||
.uploaded-file-container .file-row .file-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.uploaded-file-container .file-row .file-details .file-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0em;
|
||||
color: #000000;
|
||||
}
|
||||
.uploaded-file-container .file-row .file-details .file-progress-wrapper {
|
||||
background-color: #EBEBE4;
|
||||
width: 250px;
|
||||
height: 39px;
|
||||
}
|
||||
.uploaded-file-container .file-row .file-details .file-progress-wrapper .file-progress {
|
||||
height: 100%;
|
||||
background-color: #2C21FE;
|
||||
}
|
||||
.uploaded-file-container .file-row .file-details .file-progress-wrapper .file-progress.green {
|
||||
background-color: #06AE25;
|
||||
}
|
||||
.uploaded-file-container .file-row .file-details .file-progress-remove {
|
||||
cursor: pointer;
|
||||
}
|
||||
.uploaded-file-container .file-row .file-details select {
|
||||
padding: 8px 12px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
.uploaded-file-container .file-row-separator {
|
||||
background: linear-gradient(90deg, rgba(87, 87, 87, 0.2) 0%, #010101 48.44%, rgba(74, 74, 74, 0.2) 100%);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.uploaded-file-count {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0em;
|
||||
color: #06AE25;
|
||||
margin-bottom: 30px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="modal fade custom-modal" id="uploadDocumentModal" tabindex="-1" aria-labelledby="uploadDocumentModalLabel" 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('cms.bookkeepings.document-libraries.store') }}" class="theme-form" id="uploadDocumentFrm">
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-auto" required>
|
||||
<label class="col-form-label">{{ __("Company Name") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="company_id">
|
||||
<option value="" selected>{{ __("Select a company") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<input type="file" name="uploaded_files" id="updloadedFiles" class="d-none" accept="image/png, image/jpeg, application/pdf, application/msword" multiple>
|
||||
<div class="dragDropContainer flex justify-between mb-5">
|
||||
<div class="flex">
|
||||
<img src="/themes/tailwind/images/cloudUpload.png" alt="Cloud Upload" class="mr-5">
|
||||
<span style="color:#58C2B1;">
|
||||
{{ __("Drag and drop files here or choose file.") }}
|
||||
<br>
|
||||
{{ __("Accepted file types: Doc / PDF / JPG / PNG") }}
|
||||
</span>
|
||||
</div>
|
||||
<button type="button" class="btn-upload">{{ __("Choose File") }}</button>
|
||||
</div>
|
||||
<div class="uploaded-file-container" id="uploadedFileList"></div>
|
||||
<div class="uploaded-file-count" id="uploadedFileCount">
|
||||
<span id="totalDone">0</span> {{ __("of") }} <span id="totalFile">0</span> {{ __("files uploaded") }}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="submit" class="btn green-btn mx-3">{{ __("Submit in queue") }}</button>
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
718
resources/views/themes/tailwind/cms/bookkeepings/index.blade.php
Normal file
718
resources/views/themes/tailwind/cms/bookkeepings/index.blade.php
Normal file
@@ -0,0 +1,718 @@
|
||||
@extends('theme::layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
<button type="button" class="d-none reload-main-table"></button>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.dashboard-title{
|
||||
font-size: 32px;
|
||||
color: #364257;
|
||||
margin-right: 80px;
|
||||
}
|
||||
|
||||
.pop-up-btn-confirm {
|
||||
background-image: linear-gradient(to right, #62C5BD , #C8E1A4) !important;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.pop-up-btn-deny {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: #EBEBE4;
|
||||
}
|
||||
|
||||
.fix-text{
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
width: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabs-navigation.blue-tabs li{
|
||||
background-image: linear-gradient(to right, #575757 , #010101) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabs-navigation.blue-tabs li.active a {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.tabs-navigation.blue-tabs li a{
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tabs-navigation.blue-tabs li.active .tab-number {
|
||||
background: #EBEBE4;
|
||||
color: #364257;
|
||||
}
|
||||
|
||||
.blue-text{
|
||||
color: #2C21FE;
|
||||
}
|
||||
|
||||
.max-25{
|
||||
width: 100%;
|
||||
max-width: 25px;
|
||||
}
|
||||
|
||||
#bookkeepingLogTable {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#bookkeepingLogTable td, th {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#bookkeepingActionLogsListTable_wrapper {
|
||||
border: 2px solid #D6DEE9 !important;
|
||||
box-shadow: none !important;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#bookkeepingActionLogsListTable_wrapper tbody tr {
|
||||
background-color: #D6DEE9;
|
||||
color: #364257;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="dashboard-title-flex nowrap">
|
||||
<h2 class="dashboard-title">Bookkeeping</h2>
|
||||
<div class="dashboard-button-title">
|
||||
<a href="#" class="btn primary-button" data-bs-toggle="modal" data-bs-target="#uploadDocumentModal">{{ __("Upload Document") }}</a>
|
||||
<a href="{{ route('cms.bookkeepings.document-libraries') }}" class="btn primary-button">{{ __("Document Library") }}</a>
|
||||
<a href="#" class="btn primary-button view-bookkeeping-action-logs">{{ __("Bookkeeping Action Log") }}</a>
|
||||
<a href="{{ route('cms.bookkeepings.categories') }}" class="btn primary-button">{{ __("Category List") }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs-navigation blue-tabs">
|
||||
<ul>
|
||||
<li class="active"><a href="#" class="js-tab-navigate" data-id="#in-queue"><img class="dashboard-detail-image" src="{{ asset('themes/tailwind/images/tick-timer.svg') }}"> {{ __("In Queue List") }} <span class="tab-number" id="queueTotal" style="display:none;">0</span></a></li>
|
||||
<li><a href="#" class="js-tab-navigate" data-id="#completed"><img class="dashboard-detail-image" src="{{ asset('themes/tailwind/images/tick-circle.svg') }}"> {{ __("Completed List") }} <span class="tab-number" id="completedTotal" style="display:none;">0</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs-content">
|
||||
<div class="tabs-content-item white-bg no-padd" id="in-queue">
|
||||
<div class="sidebyside paddingy-10 paddingx-10">
|
||||
<p class="blue-text">{{ __("Number of file in process") }}: <span id="process_count">0</span></p>
|
||||
<p class="blue-text">{{ __("Total item(s) in Queue") }}: <span id="queue_count">0</span></p>
|
||||
</div>
|
||||
<table id="bookkeepingInQueueTable" class="">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{ __("Original Name") }}</td>
|
||||
<td>{{ __("Company") }}</td>
|
||||
<td>{{ __("Category") }}</td>
|
||||
<td>{{ __("Vendor") }}</td>
|
||||
<td>{{ __("Batch Name") }}</td>
|
||||
<td>{{ __("Remark") }}</td>
|
||||
<td>{{ __("Upload date&time") }}</td>
|
||||
<td>{{ __("Status") }}</td>
|
||||
<td style="width: 70px; max-width: 100%;">{{ __("Xero Status") }}</td>
|
||||
<td style="width: 70px; max-width: 100%;">{{ __("Xero Amount") }}</td>
|
||||
<td>{{ __("Action") }}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{-- <tr>
|
||||
<td>DCE Consultant Ltd.</td>
|
||||
<td>
|
||||
<div class="flex justify-start">
|
||||
<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
<span class="fix-text">DCE Ltd.CI</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>CI</td>
|
||||
<td><span class="grey-text">processing...</span></td>
|
||||
<td>ABC Copy of DCE Ltd.CI</td>
|
||||
<td>DCE Ltd.CI</td>
|
||||
<td>20230515-14:43</td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Submitted</option>
|
||||
<option>Submitted</option>
|
||||
<option>Submitted</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><img class="max-25" src="{{ asset('themes/tailwind/images/success.svg') }}"></td>
|
||||
<td>$4000</td>
|
||||
<td><button type="button"><img class="max-25" src="{{ asset('themes/tailwind/images/more.svg') }}"></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DCE Consultant Ltd.</td>
|
||||
<td>
|
||||
<div class="flex justify-start">
|
||||
<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
<span class="fix-text">DCE Ltd.CI</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>CI</td>
|
||||
<td><span class="grey-text">processing...</span></td>
|
||||
<td>ABC Copy of DCE Ltd.CI</td>
|
||||
<td>DCE Ltd.CI</td>
|
||||
<td>20230515-14:43</td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Submitted</option>
|
||||
<option>Submitted</option>
|
||||
<option>Submitted</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><img class="max-25" src="{{ asset('themes/tailwind/images/success.svg') }}"></td>
|
||||
<td>$4000</td>
|
||||
<td><button type="button"><img class="max-25" src="{{ asset('themes/tailwind/images/more.svg') }}"></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DCE Consultant Ltd.</td>
|
||||
<td>
|
||||
<div class="flex justify-start">
|
||||
<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
<span class="fix-text">DCE Ltd.CI</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>CI</td>
|
||||
<td><span class="grey-text">processing...</span></td>
|
||||
<td>ABC Copy of DCE Ltd.CI</td>
|
||||
<td>DCE Ltd.CI</td>
|
||||
<td>20230515-14:43</td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Submitted</option>
|
||||
<option>Submitted</option>
|
||||
<option>Submitted</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><img class="max-25" src="{{ asset('themes/tailwind/images/error.svg') }}"></td>
|
||||
<td>$4000</td>
|
||||
<td><button type="button"><img class="max-25" src="{{ asset('themes/tailwind/images/more.svg') }}"></button></td>
|
||||
</tr> --}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tabs-content-item white-bg no-padd" id="completed" style="display: none;">
|
||||
<table id="bookkeepingCompletedTable" class="">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{ __("Original Name") }}</td>
|
||||
<td>{{ __("Company") }}</td>
|
||||
<td>{{ __("Category") }}</td>
|
||||
<td>{{ __("Vendor") }}</td>
|
||||
<td>{{ __("Batch Name") }}</td>
|
||||
<td>{{ __("Remark") }}</td>
|
||||
<td>{{ __("Upload date&time") }}</td>
|
||||
<td>{{ __("Status") }}</td>
|
||||
<td style="width: 70px; max-width: 100%;">{{ __("Xero Status") }}</td>
|
||||
<td style="width: 70px; max-width: 100%;">{{ __("Xero Amount") }}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{-- <tr>
|
||||
<td>DCE Consultant Ltd.</td>
|
||||
<td>
|
||||
<div class="flex justify-start">
|
||||
<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
<span class="fix-text">DCE Ltd.CI</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>CI</td>
|
||||
<td><span class="grey-text">processing...</span></td>
|
||||
<td>ABC Copy of DCE Ltd.CI</td>
|
||||
<td>DCE Ltd.CI</td>
|
||||
<td>20230515-14:43</td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Submitted</option>
|
||||
<option>Submitted</option>
|
||||
<option>Submitted</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><img class="max-25" src="{{ asset('themes/tailwind/images/success.svg') }}"></td>
|
||||
<td>$4000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DCE Consultant Ltd.</td>
|
||||
<td>
|
||||
<div class="flex justify-start">
|
||||
<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
<span class="fix-text">DCE Ltd.CI</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>CI</td>
|
||||
<td><span class="grey-text">processing...</span></td>
|
||||
<td>ABC Copy of DCE Ltd.CI</td>
|
||||
<td>DCE Ltd.CI</td>
|
||||
<td>20230515-14:43</td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Submitted</option>
|
||||
<option>Submitted</option>
|
||||
<option>Submitted</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><img class="max-25" src="{{ asset('themes/tailwind/images/success.svg') }}"></td>
|
||||
<td>$4000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DCE Consultant Ltd.</td>
|
||||
<td>
|
||||
<div class="flex justify-start">
|
||||
<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
<span class="fix-text">DCE Ltd.CI</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>CI</td>
|
||||
<td><span class="grey-text">processing...</span></td>
|
||||
<td>ABC Copy of DCE Ltd.CI</td>
|
||||
<td>DCE Ltd.CI</td>
|
||||
<td>20230515-14:43</td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Submitted</option>
|
||||
<option>Submitted</option>
|
||||
<option>Submitted</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><img class="max-25" src="{{ asset('themes/tailwind/images/error.svg') }}"></td>
|
||||
<td>$4000</td>
|
||||
</tr> --}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Modals --}}
|
||||
{{-- Upload Document Modal --}}
|
||||
@include('theme::cms.bookkeepings.document-libraries.upload-document-modal')
|
||||
|
||||
<div class="modal fade custom-modal" id="updateXeroInformationModal" tabindex="-1" aria-labelledby="updateXeroInformationModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">{{ __("Update Xero information") }}</p>
|
||||
|
||||
<form action="#" class="theme-form" id="updateXeroInformationModalFrm">
|
||||
<input type="hidden" name="id">
|
||||
<div class="mx-auto text-center" style="max-width: 300px;">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("Xero Status") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="xero_status" id="xeroStatus0" value="0" required>
|
||||
<label class="form-check-label" for="xeroStatus0">{{ __("N/A") }}</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="xero_status" id="xeroStatus1" value="1" required>
|
||||
<label class="form-check-label" for="xeroStatus1">{{ __("Checked") }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("Xero Amount") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control number-only" value="" name="xero_amount" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="submit" class="btn green-btn mx-3">{{ __("Confirm") }}</button>
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Bookkeeping Action Logs Modal --}}
|
||||
<div class="modal fade custom-modal" id="bookkeepingActionLogsModal" tabindex="-1" aria-labelledby="bookkeepingActionLogsModalLabel" 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 mb-4">{{ __("User Log") }}</p>
|
||||
|
||||
<table id="bookkeepingActionLogsListTable" class="">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{ __("Date") }}</td>
|
||||
<td>{{ __("Time") }}</td>
|
||||
<td>{{ __("Event") }}</td>
|
||||
<td>{{ __("Description") }}</td>
|
||||
<td>{{ __("Status") }}</td>
|
||||
<td>{{ __("By") }}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('script')
|
||||
<script type="text/javascript" src="{{ asset('themes/' . $theme->folder . '/js/cms/bookkeepings/document-libraries/upload-document-modal.js') }}"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function confirmPopUp() {
|
||||
Swal.fire({
|
||||
title: 'Require Datamolino?',
|
||||
confirmButtonText: 'Yes',
|
||||
showConfirmButton: true,
|
||||
showDenyButton: true,
|
||||
customClass: {
|
||||
confirmButton: 'pop-up-btn-confirm',
|
||||
denyButton: 'pop-up-btn-deny',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
|
||||
var bookkeepingInQueueTable = $("#bookkeepingInQueueTable").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: {
|
||||
url: '{{ route("cms.bookkeepings.table", ["isCompleted" => 0]) }}',
|
||||
type: 'post',
|
||||
"dataSrc": function ( json ) {
|
||||
for (var i = 0; i < json.data.length; i++) {
|
||||
$.each( json.data[i], function( key, value ) {
|
||||
json.data[i][key] = value ? value : '-';
|
||||
});
|
||||
}
|
||||
|
||||
return json.data;
|
||||
},
|
||||
complete: function (data) {
|
||||
if (data['responseJSON'].recordsTotal > 0) {
|
||||
$('#queueTotal').show();
|
||||
$('#queueTotal').html(data['responseJSON'].recordsTotal);
|
||||
$('#process_count').html(data['responseJSON'].processCount);
|
||||
$('#queue_count').html(data['responseJSON'].queueCount);
|
||||
}
|
||||
else {
|
||||
$('#queueTotal').hide();
|
||||
}
|
||||
},
|
||||
},
|
||||
columns: [
|
||||
{data: 'file_name', name: 'bookkeeping_documents.file_name'},
|
||||
('{{ strtolower(app()->getLocale()) }}' == 'zh_hk' ? {data: 'name_chinese', name: 'companies.name_chinese'} : {data: 'name_english', name: 'companies.name_english'}),
|
||||
{data: 'category_name', name: 'bookkeeping_document_categories.name'},
|
||||
{data: 'user_name', name: 'users.first_name'},
|
||||
{data: 'batch_name', name: 'bookkeeping_documents.batch_name'},
|
||||
{data: 'remark', name: 'bookkeeping_documents.remark'},
|
||||
{data: 'created_at', name: 'bookkeeping_documents.created_at'},
|
||||
{data: 'status_select', name: 'bookkeeping_documents.status'},
|
||||
{data: 'xero_status', name: 'bookkeeping_documents.xero_status'},
|
||||
{data: 'xero_amount', name: 'bookkeeping_documents.xero_amount'},
|
||||
{data: 'actions', name: 'actions', searchable: false, sortable: false}
|
||||
],
|
||||
order: [[6, "desc"]],
|
||||
searchDelay: 500,
|
||||
rowCallback: function ( row, data ) {
|
||||
if (data.status == 'ocr_complete') {
|
||||
$(row).css('background-color', ' #FFEFBD');
|
||||
}
|
||||
else if (data.status == 'failed') {
|
||||
$(row).css('background-color', ' #F5AE97');
|
||||
}
|
||||
},
|
||||
"language": {
|
||||
"paginate": {
|
||||
"next": ">", // Text for the "Next" page button
|
||||
"previous": "<" // Text for the "Previous" page button
|
||||
},
|
||||
"emptyTable": '{{ __("No data available in table") }}'
|
||||
// Add more text customizations if needed
|
||||
}
|
||||
});
|
||||
|
||||
var bookkeepingCompletedTable = $("#bookkeepingCompletedTable").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: {
|
||||
url: '{{ route("cms.bookkeepings.table", ["isCompleted" => 1]) }}',
|
||||
type: 'post',
|
||||
"dataSrc": function ( json ) {
|
||||
for (var i = 0; i < json.data.length; i++) {
|
||||
$.each( json.data[i], function( key, value ) {
|
||||
json.data[i][key] = value ? value : '-';
|
||||
});
|
||||
}
|
||||
|
||||
return json.data;
|
||||
},
|
||||
complete: function (data) {
|
||||
if (data['responseJSON'].recordsTotal > 0) {
|
||||
$('#completedTotal').show();
|
||||
$('#completedTotal').html(data['responseJSON'].recordsTotal);
|
||||
}
|
||||
else {
|
||||
$('#completedTotal').hide();
|
||||
}
|
||||
},
|
||||
},
|
||||
columns: [
|
||||
('{{ strtolower(app()->getLocale()) }}' == 'zh_hk' ? {data: 'name_chinese', name: 'companies.name_chinese'} : {data: 'name_english', name: 'companies.name_english'}),
|
||||
{data: 'file_name', name: 'bookkeeping_documents.file_name'},
|
||||
{data: 'category_name', name: 'bookkeeping_document_categories.name'},
|
||||
{data: 'user_name', name: 'users.name'},
|
||||
{data: 'batch_name', name: 'bookkeeping_documents.batch_name'},
|
||||
{data: 'remark', name: 'bookkeeping_documents.remark'},
|
||||
{data: 'created_at', name: 'bookkeeping_documents.created_at'},
|
||||
{data: 'status_select', name: 'bookkeeping_documents.status'},
|
||||
{data: 'xero_status', name: 'bookkeeping_documents.xero_status'},
|
||||
{data: 'xero_amount', name: 'bookkeeping_documents.xero_amount'},
|
||||
],
|
||||
order: [[6, "desc"]],
|
||||
searchDelay: 500,
|
||||
"language": {
|
||||
"paginate": {
|
||||
"next": ">", // Text for the "Next" page button
|
||||
"previous": "<" // Text for the "Previous" page button
|
||||
},
|
||||
"emptyTable": '{{ __("No data available in table") }}'
|
||||
// Add more text customizations if needed
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.reload-main-table', function (e) {
|
||||
bookkeepingInQueueTable.ajax.reload();
|
||||
bookkeepingCompletedTable.ajax.reload();
|
||||
});
|
||||
|
||||
$(document).on('change', '.change-status', function (e) {
|
||||
var _this = $(this);
|
||||
var id = _this.attr('data-id');
|
||||
var val = _this.val();
|
||||
|
||||
if (id) {
|
||||
if (val == 'completed') {
|
||||
$('#updateXeroInformationModal').modal('show');
|
||||
$('#updateXeroInformationModal input[name="id"]').val(id);
|
||||
}
|
||||
else {
|
||||
$.ajax({
|
||||
url: '{{ route("cms.bookkeepings.update-status") }}',
|
||||
type: "post",
|
||||
data: {
|
||||
'id': id,
|
||||
'status': val,
|
||||
},
|
||||
dataType: 'json',
|
||||
success:function(data) {
|
||||
if (data.success) {
|
||||
popToast('success', data.message);
|
||||
|
||||
bookkeepingInQueueTable.ajax.reload();
|
||||
bookkeepingCompletedTable.ajax.reload();
|
||||
}
|
||||
else {
|
||||
popToast('danger', data.message);
|
||||
}
|
||||
},
|
||||
error: function(data) {
|
||||
var errors = data.responseJSON.errors;
|
||||
$.each(errors, function(index, error) {
|
||||
popToast('danger', errors[0]);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('submit', '#updateXeroInformationModalFrm', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var id = $(this).find('input[name="id"]').val();
|
||||
var xeroStatus = $(this).find('input[name="xero_status"]:checked').val();
|
||||
var xeroAmount = $(this).find('input[name="xero_amount"]').val();
|
||||
var val = $(this).val();
|
||||
var button = $(this).find('button[type="submit"]');
|
||||
var buttonHtml = button.html();
|
||||
|
||||
if (!button.is(':disabled')) {
|
||||
button.attr('disabled', 'disabled');
|
||||
button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');
|
||||
|
||||
$.ajax({
|
||||
url: '{{ route("cms.bookkeepings.update-status") }}',
|
||||
type: "post",
|
||||
data: {
|
||||
'id': id,
|
||||
'status': 'completed',
|
||||
'xero_status': xeroStatus,
|
||||
'xero_amount': xeroAmount,
|
||||
},
|
||||
dataType: 'json',
|
||||
success:function(data) {
|
||||
button.removeAttr('disabled');
|
||||
button.html(buttonHtml);
|
||||
|
||||
if (data.success) {
|
||||
popToast('success', data.message);
|
||||
|
||||
$('#updateXeroInformationModal').modal('hide');
|
||||
$('#updateXeroInformationModalFrm').reset();
|
||||
bookkeepingInQueueTable.ajax.reload();
|
||||
bookkeepingCompletedTable.ajax.reload();
|
||||
}
|
||||
else {
|
||||
popToast('danger', data.message);
|
||||
}
|
||||
},
|
||||
error: function(data) {
|
||||
var errors = data.responseJSON.errors;
|
||||
$.each(errors, function(index, error) {
|
||||
popToast('danger', errors[0]);
|
||||
return false;
|
||||
});
|
||||
|
||||
button.removeAttr('disabled');
|
||||
button.html(buttonHtml);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$("#updateXeroInformationModal").on('hide.bs.modal', function(){
|
||||
bookkeepingInQueueTable.ajax.reload();
|
||||
bookkeepingCompletedTable.ajax.reload();
|
||||
});
|
||||
|
||||
$(document).on('click', '.view-bookkeeping-action-logs', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
initializeBookkeepingActionLogsListTable();
|
||||
$('#bookkeepingActionLogsModal').modal('show');
|
||||
});
|
||||
|
||||
$(document).on('click', '.reupload-button', function (e) {
|
||||
$(this).parent().find('.re-upload-file').click();
|
||||
});
|
||||
|
||||
$(document).on('change', '.re-upload-file', function (e) {
|
||||
var id = $(this).attr('data-id');
|
||||
|
||||
if (id) {
|
||||
var formData = new FormData();
|
||||
var file = $(this)[0].files[0];
|
||||
formData.append('uploaded_file', file);
|
||||
formData.append('id', id);
|
||||
|
||||
$.ajax({
|
||||
url: '{{ route("cms.bookkeepings.re-upload-file") }}',
|
||||
type: "post",
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success:function(data) {
|
||||
if (data.success) {
|
||||
popToast('success', data.message);
|
||||
|
||||
bookkeepingInQueueTable.ajax.reload();
|
||||
bookkeepingCompletedTable.ajax.reload();
|
||||
}
|
||||
else {
|
||||
popToast('danger', data.message);
|
||||
}
|
||||
},
|
||||
error: function(data) {
|
||||
var errors = data.responseJSON.errors;
|
||||
$.each(errors, function(index, error) {
|
||||
popToast('danger', errors[0]);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(".js-tab-navigate").click(function(e){
|
||||
e.preventDefault();
|
||||
var id = jQuery(this).data('id');
|
||||
jQuery(this).closest('.tabs-navigation').next().find('.tabs-content-item').hide();
|
||||
jQuery(id).show();
|
||||
jQuery(this).closest('.tabs-navigation').find('li').removeClass('active');
|
||||
jQuery(this).parent().addClass('active');
|
||||
});
|
||||
|
||||
var bookkeepingActionLogsListTable = null;
|
||||
function initializeBookkeepingActionLogsListTable(url = '{{ route("cms.bookkeepings.action-logs-table") }}') {
|
||||
if (bookkeepingActionLogsListTable) {
|
||||
bookkeepingActionLogsListTable.destroy();
|
||||
}
|
||||
|
||||
bookkeepingActionLogsListTable = $("#bookkeepingActionLogsListTable").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: {
|
||||
url: url,
|
||||
type: 'post',
|
||||
"dataSrc": function ( json ) {
|
||||
for (var i = 0; i < json.data.length; i++) {
|
||||
$.each( json.data[i], function( key, value ) {
|
||||
json.data[i][key] = value ? value : '-';
|
||||
});
|
||||
}
|
||||
|
||||
return json.data;
|
||||
}
|
||||
},
|
||||
columns: [
|
||||
{data: 'date', name: 'document_action_logs.created_at'},
|
||||
{data: 'time', name: 'document_action_logs.created_at'},
|
||||
{data: 'event', name: 'document_action_logs.event'},
|
||||
{data: 'description', name: 'document_action_logs.description'},
|
||||
{data: 'status', name: 'document_action_logs.status'},
|
||||
{data: 'name', name: 'users.name'},
|
||||
],
|
||||
order: [[1, "desc"]],
|
||||
searchDelay: 500,
|
||||
"language": {
|
||||
"paginate": {
|
||||
"next": ">", // Text for the "Next" page button
|
||||
"previous": "<" // Text for the "Previous" page button
|
||||
},
|
||||
"emptyTable": '{{ __("No data available in table") }}'
|
||||
// Add more text customizations if needed
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@endsection
|
||||
Reference in New Issue
Block a user