init project
This commit is contained in:
201
resources/views/audit-logs/index.blade copy.php
Normal file
201
resources/views/audit-logs/index.blade copy.php
Normal file
@@ -0,0 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
|
||||
<head>
|
||||
@include('layout.header')
|
||||
|
||||
<!-- DataTables CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
|
||||
|
||||
<style>
|
||||
.audit-filter {
|
||||
background: #f8f9fa;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-scroller">
|
||||
|
||||
@include('layout.navbar')
|
||||
@include('layout.breadscrum')
|
||||
|
||||
<div class="container-fluid page-body-wrapper">
|
||||
|
||||
@include('layout.sidebar')
|
||||
|
||||
<div class="main-panel">
|
||||
<div class="content-wrapper">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="card-header">
|
||||
<h4>Audit Log List</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<!-- FILTER SECTION -->
|
||||
<div class="audit-filter">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-2">
|
||||
<input type="date" id="date_from" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<input type="date" id="date_to" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<select id="event" class="form-control">
|
||||
<option value="">All Events</option>
|
||||
<option value="created">Created</option>
|
||||
<option value="updated">Updated</option>
|
||||
<option value="deleted">Deleted</option>
|
||||
<option value="User Login">Login</option>
|
||||
<option value="User Logout">Logout</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<select id="user_id" class="form-control">
|
||||
<option value="">All Users</option>
|
||||
|
||||
@foreach($users as $user)
|
||||
<option value="{{ $user->id }}">
|
||||
{{ $user->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<button id="filter" class="btn btn-primary">
|
||||
Filter
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AUDIT TABLE -->
|
||||
<table id="auditTable" class="table table-bordered table-striped">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Event</th>
|
||||
<th>Module</th>
|
||||
<th>Record ID</th>
|
||||
<th>User</th>
|
||||
<th>IP</th>
|
||||
<th>Date</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@include('layout.footer')
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('layout.common_script')
|
||||
|
||||
<!-- JS Libraries -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
||||
|
||||
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
|
||||
const table = $('#auditTable').DataTable({
|
||||
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
|
||||
ajax: {
|
||||
url: "{{ route('audit.logs.data') }}",
|
||||
data: function (d) {
|
||||
d.date_from = $('#date_from').val();
|
||||
d.date_to = $('#date_to').val();
|
||||
d.event = $('#event').val();
|
||||
d.user_id = $('#user_id').val();
|
||||
}
|
||||
},
|
||||
|
||||
columns: [
|
||||
{ data: 'id' },
|
||||
{ data: 'description' },
|
||||
{ data: 'module' },
|
||||
{ data: 'subject_id' },
|
||||
{ data: 'user' },
|
||||
{ data: 'ip' },
|
||||
{ data: 'created_at' },
|
||||
{ data: 'action', orderable: false, searchable: false }
|
||||
],
|
||||
|
||||
dom: 'Bfrtip',
|
||||
|
||||
buttons: [
|
||||
'copy',
|
||||
'csv',
|
||||
'excel',
|
||||
'pdf',
|
||||
'print'
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Filter button
|
||||
$('#filter').click(function () {
|
||||
table.draw();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).on('click', '.view-log', function () {
|
||||
|
||||
const data = $(this).data('log');
|
||||
|
||||
const oldData = JSON.stringify(data.old, null, 2);
|
||||
const newData = JSON.stringify(data.attributes, null, 2);
|
||||
|
||||
Swal.fire({
|
||||
title: "Audit Detail",
|
||||
html:
|
||||
"<h5>Before</h5><pre>" + oldData + "</pre>" +
|
||||
"<h5>After</h5><pre>" + newData + "</pre>",
|
||||
width: 900
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
284
resources/views/audit-logs/index.blade.php
Normal file
284
resources/views/audit-logs/index.blade.php
Normal file
@@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
|
||||
<head>
|
||||
@include('layout.header')
|
||||
|
||||
<!-- DataTables CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
|
||||
|
||||
<style>
|
||||
.audit-filter {
|
||||
background: #fff;
|
||||
padding: 5px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
div.dt-buttons>.dt-button:hover:not(.disabled), div.dt-buttons>div.dt-button-split .dt-button:hover:not(.disabled) {
|
||||
background: #3b86d1 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
div.dt-buttons>.dt-button, div.dt-buttons>div.dt-button-split .dt-button {
|
||||
background: rgba(59, 134, 209, 0.2) !important;
|
||||
border-radius: 10px !important;
|
||||
color: #3b86d1 !important;
|
||||
border: none !important;
|
||||
}
|
||||
table.dataTable tbody th, table.dataTable tbody td {
|
||||
padding: 4px 10px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-scroller">
|
||||
|
||||
@include('layout.navbar')
|
||||
@include('layout.breadscrum')
|
||||
|
||||
<div class="container-fluid page-body-wrapper">
|
||||
|
||||
@include('layout.sidebar')
|
||||
|
||||
<div class="main-panel">
|
||||
<div class="content-wrapper">
|
||||
|
||||
<!-- Card -->
|
||||
<div class="card">
|
||||
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-bold"><i class="mdi mdi-dots-vertical menu-icon"></i> Audit Logs</h4>
|
||||
<!-- Filters -->
|
||||
<div class="audit-filter">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="form-group mb-1">
|
||||
<label for="start-invoice-date">{{__('invoice.table_date_filter')}}</label>
|
||||
<div class="input-group">
|
||||
<input id="start-invoice-date" value="{{isset($_GET['from_date']) ? $_GET['from_date'] : ''}}" name="date_from" class="form-control rounded-right-0" onfocus="(this.type='date')" onblur="(this.type='text')" placeholder="{{__('general.type_date_placeholder')}}">
|
||||
<input id="to-invoice-date" value="{{isset($_GET['to_date']) ? $_GET['to_date'] : ''}}" name="date_to" class="form-control rounded-left-0" onfocus="(this.type='date')" onblur="(this.type='text')" placeholder="{{__('general.type_date_placeholder')}}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="form-group mb-1">
|
||||
<label for="start-invoice-date">{{__('ព្រឹត្តការណ៍')}}</label>
|
||||
<select id="event" class="form-control">
|
||||
<option value="">All Events</option>
|
||||
<option value="created">Created</option>
|
||||
<option value="updated">Updated</option>
|
||||
<option value="deleted">Deleted</option>
|
||||
<option value="User Login">Login</option>
|
||||
<option value="User Logout">Logout</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-1">
|
||||
<label for="lab-name-en">{{__('អ្នកប្រើប្រាស់')}}</label>
|
||||
<div class="input-group">
|
||||
<select id="user_id" class="form-control rounded-right-0">
|
||||
<option value="">All Users</option>
|
||||
@foreach($users as $user)
|
||||
<option value="{{ $user->id }}">
|
||||
{{ $user->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<button id="filter" class="btn btn-sm btn-inverse-secondary rounded-bottom-right-25 rounded-top-right-25 px-3" title="Search" type="button"><i class="fa fa-search"></i> {{__('general.btn_search')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audit Table -->
|
||||
<table id="auditTable" class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>DATE</th>
|
||||
<th>EVENT</th>
|
||||
<th>TABLE</th>
|
||||
<th>USER</th>
|
||||
<th>ACTION</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="logModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Log Preview</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal">x</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
||||
<h5>INFO</h5>
|
||||
|
||||
<table class="table table-bordered">
|
||||
<tr>
|
||||
<td width="150"><b>Type</b></td>
|
||||
<td id="log_type"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><b>Table</b></td>
|
||||
<td id="log_table"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><b>Time</b></td>
|
||||
<td id="log_time"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><b>Done by</b></td>
|
||||
<td id="log_user"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h5 class="mt-4">FIELD CHANGES</h5>
|
||||
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Field</th>
|
||||
<th>Previous</th>
|
||||
<th>Current</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="log_fields"></tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('layout.footer')
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('layout.common_script')
|
||||
|
||||
<!-- JS Libraries -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
|
||||
const table = $('#auditTable').DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
|
||||
ajax: {
|
||||
url: "{{ route('audit.logs.data') }}",
|
||||
data: function (d) {
|
||||
d.date_from = $('#date_from').val();
|
||||
d.date_to = $('#date_to').val();
|
||||
d.event = $('#event').val();
|
||||
d.user_id = $('#user_id').val();
|
||||
}
|
||||
},
|
||||
|
||||
columns: [
|
||||
{ data: 'id' },
|
||||
{ data: 'created_at' },
|
||||
{ data: 'description' },
|
||||
{ data: 'module' },
|
||||
{ data: 'user' },
|
||||
{ data: 'action', orderable:false, searchable:false }
|
||||
],
|
||||
|
||||
dom: 'Bfrtip',
|
||||
|
||||
buttons: [
|
||||
'copy',
|
||||
'csv',
|
||||
'excel',
|
||||
'pdf',
|
||||
'print'
|
||||
]
|
||||
});
|
||||
|
||||
$('#filter').click(function () {
|
||||
table.draw();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).on("click",".view-log",function(){
|
||||
|
||||
let log = $(this).data("log");
|
||||
|
||||
let description = $(this).data("description");
|
||||
let user = $(this).data("user");
|
||||
let time = $(this).data("time");
|
||||
let module = $(this).data("module");
|
||||
|
||||
$("#log_type").text(description);
|
||||
$("#log_table").text(module);
|
||||
$("#log_time").text(time);
|
||||
$("#log_user").text(user);
|
||||
|
||||
let oldData = log.old ?? {};
|
||||
let newData = log.attributes ?? {};
|
||||
|
||||
let rows = "";
|
||||
|
||||
Object.keys(newData).forEach(function(field){
|
||||
|
||||
let oldValue = oldData[field] ?? "-";
|
||||
let newValue = newData[field] ?? "-";
|
||||
|
||||
let highlight = oldValue != newValue ? "style='background:#fff3cd'" : "";
|
||||
|
||||
rows += `
|
||||
<tr ${highlight}>
|
||||
<td>${field}</td>
|
||||
<td>${oldValue}</td>
|
||||
<td>${newValue}</td>
|
||||
</tr>`;
|
||||
});
|
||||
|
||||
$("#log_fields").html(rows);
|
||||
|
||||
const modal = new bootstrap.Modal(document.getElementById('logModal'));
|
||||
modal.show();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user