DISPLAY AND DOWNLOAD LOGS

This commit is contained in:
BIG2EYEZ 2024-01-01 17:08:02 +08:00
parent e538a5fb6e
commit 7cc372497b
7 changed files with 525 additions and 351 deletions

View File

@ -0,0 +1,35 @@
// models/User.js
const { Sequelize, DataTypes } = require('sequelize');
const sequelize = new Sequelize(process.env.database, process.env.user, process.env.password, {
host: process.env.host,
dialect: 'mysql',
timezone: 'Z', // Set the timezone to UTC
});
const User = sequelize.define('User', {
name: {
type: DataTypes.STRING,
allowNull: false,
},
username: {
type: DataTypes.STRING,
allowNull: false,
unique: true,
},
email: {
type: DataTypes.STRING,
allowNull: false,
unique: true,
},
password: {
type: DataTypes.STRING,
allowNull: false,
},
jobTitle: {
type: DataTypes.STRING,
allowNull: false,
},
});
module.exports = User;

View File

@ -37,10 +37,10 @@ const connection = mysql.createConnection({
user: process.env.DB_USER,
password: process.env.DB_PASS,
database: "adminusers",
timezone: "Z", // Set the timezone to UTC
});
module.exports = { connection };
module.exports = { connection };

View File

@ -722,7 +722,28 @@ app.get('/api/users', (req, res) => {
});
}
app.get('/api/getLogs', (req, res) => {
// Query the database to fetch logs
const query = 'SELECT id, username, activity, timestamp FROM user_logs';
connection.query(query, (err, results) => {
if (err) {
console.error('Error fetching logs from MySQL:', err);
res.status(500).json({ error: 'Error fetching logs from MySQL' });
return;
}
// Format timestamps to a more readable format
const formattedLogs = results.map((log) => ({
id: log.id,
username: log.username,
activity: log.activity,
timestamp: new Date(log.timestamp).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }),
}));
// Send the formatted logs as a JSON response
res.json(formattedLogs);
});
});
app.use(express.static("views"));

View File

@ -23,6 +23,7 @@
<a href="#" id="addUserLink">Add User</a>
<a href="#" id="deleteUserLink">Delete User</a>
<a href="#" id="resetPasswordLink">Reset Password</a>
<a href="#" id="logsLink">Logs</a>
<a href="/home" id="homeLink">Home</a>
</div>
@ -47,11 +48,11 @@
<% if (allUsers && allUsers.length > 0) { %>
<% allUsers.forEach(user => { %>
<tr>
<td><%= user.name %></td>
<td><%= user.username %></td>
<td><%= user.email %></td>
<td><%= new Date(user.lastLogin).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) %></td>
<td><%= user.jobTitle %></td>
<td><%- user.name %></td>
<td><%- user.username %></td>
<td><%- user.email %></td>
<td><%- new Date(user.lastLogin).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) %></td>
<td><%- user.jobTitle %></td>
</tr>
<% }); %>
<% } else { %>
@ -139,356 +140,20 @@
</div>
</div>
<!-- Your existing script tags -->
<div id="logsContainer" style="display: none;">
<!-- Content for logs will be added here -->
</div>
<script>
const allUsers = <%- JSON.stringify(allUsers) %>;
</script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.2.1/exceljs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
const allUsers = <%- JSON.stringify(allUsers) %>;
$(document).ready(function () {
$('#resetPasswordLink').on('click', function () {
$('#resetPasswordFormContainer').show();
$('#createUserForm').hide();
$('#userDataContainer').hide();
$('#downloadButtonContainer').hide();
$('#deleteUserContainer').hide();
});
$('#addUserLink').on('click', function () {
$('#resetPasswordFormContainer').hide();
$('#createUserForm').show();
$('#userDataContainer').hide();
$('#downloadButtonContainer').hide();
$('#deleteUserContainer').hide();
});
$('#userDataLink').on('click', function () {
$('#resetPasswordFormContainer').hide();
$('#createUserForm').hide();
$('#userDataContainer').show();
$('#downloadButtonContainer').show();
$('#deleteUserContainer').hide();
});
$('#searchUserButton').on('click', function () {
console.log('Search button clicked');
const searchUsername = $('#searchUserInput').val();
// Call the function to search for the user
searchUser(searchUsername);
});
$('#deleteUserLink').on('click', function () {
$('#deleteUserContainer').show();
$('#resetPasswordFormContainer').hide();
$('#createUserForm').hide();
$('#userDataContainer').hide();
$('#downloadButtonContainer').hide();
});
$('#downloadButton').on('click', function () {
// Call the downloadExcel function with the allUsers data
downloadExcel(allUsers);
});
});
function searchUser(username) {
fetch(`/api/searchUser?username=${username}`) // Add the /api prefix here
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error(`HTTP error! Status: ${response.status}`);
}
})
.then(users => {
// Display search results
displaySearchResults(users);
})
.catch(error => {
console.error('Search error:', error);
// Handle errors, e.g., display an alert
});
}
// Function to display search results
function displaySearchResults(users) {
const searchResultsList = $('#searchResultsList');
// Clear previous results
searchResultsList.empty();
if (users && users.length > 0) {
users.forEach(user => {
const listItem = `<li>${user.username} - <button class="deleteUserButton" data-username="${user.username}">Delete</button></li>`;
searchResultsList.append(listItem);
});
// Show the search results container
$('#searchResultsContainer').show();
} else {
// Hide the search results container if no results
$('#searchResultsContainer').hide();
}
}
// Event listener for delete user button in search results
$('#searchResultsList').on('click', '.deleteUserButton', function () {
const usernameToDelete = $(this).data('username');
console.log('Before fetch for user deletion');
// Make a fetch request to delete the user
fetch(`/api/deleteUser/${usernameToDelete}`, {
method: 'DELETE',
})
.then(response => {
console.log('Inside fetch response handler');
if (response.ok) {
// Assuming your server sends a JSON response
return response.json();
} else {
throw new Error(`HTTP error! Status: ${response.status}`);
}
})
.then(data => {
console.log('User deletion success:', data);
alert('User deleted successfully');
$('#searchResultsContainer').hide();
})
.catch(error => {
console.error('User deletion error:', error);
alert('Failed to delete user. Please try again.');
// Handle errors, e.g., display an alert
});
});
function downloadExcel(allUsers) {
if (allUsers && allUsers.length > 0) {
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('All Users');
const headers = ['Name', 'Username', 'Email', 'Last Login', 'Job Title'];
worksheet.addRow(headers);
allUsers.forEach(user => {
const rowData = [
user.name || '',
user.username || '',
user.email || '',
user.lastLogin ? new Date(user.lastLogin).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) : '',
user.jobTitle || ''
];
worksheet.addRow(rowData);
});
workbook.xlsx.writeBuffer().then(buffer => {
const currentDate = new Date();
const formattedDate = currentDate.toISOString().split('T')[0];
const formattedTime = currentDate.toTimeString().split(' ')[0].replace(/:/g, '-');
const fileName = `user_data_${formattedDate}_${formattedTime}.xlsx`;
const blob = new Blob([buffer], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
});
saveAs(blob, fileName);
});
} else {
console.error('No data available for download.');
}
}
function isStrongPassword(password) {
// Password must be at least 10 characters long
if (password.length < 10) {
return false;
}
// Password must contain at least one uppercase letter
if (!/[A-Z]/.test(password)) {
return false;
}
// Password must contain at least one lowercase letter
if (!/[a-z]/.test(password)) {
return false;
}
// Password must contain at least one digit
if (!/\d/.test(password)) {
return false;
}
// Password must contain at least one symbol
if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
return false;
}
return true;
}
function resetFormFields() {
$('#name').val('');
$('#username').val('');
$('#email').val('');
$('#password').val('');
$('#confirmPassword').val('');
$('#jobTitle').val('');
}
$('#userForm').on('submit', function (e) {
e.preventDefault();
const name = $('#name').val();
const username = $('#username').val();
const email = $('#email').val();
const password = $('#password').val();
const confirmPassword = $('#confirmPassword').val();
const jobTitle = $('#jobTitle').val();
if (password !== confirmPassword) {
alert('Passwords do not match. Please enter the same password in both fields.');
return;
}
if (!isStrongPassword(password)) {
alert('Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
return;
}
fetch('/createUser', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: name,
username: username,
email: email,
password: password,
jobTitle: jobTitle,
}),
})
.then(response => {
if (response.status === 201) {
// Status 201 indicates successful creation
return response.json();
} else {
return response.json().then(data => {
throw new Error(data.error || `HTTP error! Status: ${response.status}`);
});
}
})
.then(data => {
console.log('User registration success:', data);
alert('User registered successfully!');
resetFormFields();
})
.catch(error => {
console.error('User registration error:', error);
handleRegistrationError(error);
});
});
function handleRegistrationError(error) {
console.error('Registration error:', error); // Log the full error object for debugging
let errorMessage;
if (typeof error === 'string') {
errorMessage = error;
} else if (error instanceof Error) {
errorMessage = error.message;
} else if (error.response && error.response.data && error.response.data.error) {
errorMessage = error.response.data.error;
} else {
errorMessage = 'Unknown error';
}
if (errorMessage.includes('Username is already taken')) {
alert('Username is already taken. Please choose a different username.');
} else if (errorMessage.includes('Email is already in use')) {
alert('Email is already in use. Please choose a different email.');
} else if (errorMessage.includes('Password does not meet complexity requirements')) {
alert('Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
} else if (errorMessage.includes('User registration failed')) {
alert('User registration failed. Please try again.');
} else {
alert(`Unknown error: ${errorMessage}`);
}
}
$('#resetPasswordForm').on('submit', function (e) {
e.preventDefault();
// Get values from the form
const username = $('#resetUsername').val();
const password = $('#resetPassword').val();
const confirmPassword = $('#resetConfirmPassword').val();
console.log('Username:', username);
console.log('New Password:', password);
// Validate passwords
if (password !== confirmPassword) {
alert('Error: Passwords do not match. Please enter the same password in both fields.');
return;
}
// Check if the new password meets complexity requirements
if (!isStrongPassword(password)) {
alert('Error: Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
return;
}
// Make a fetch request
fetch('/reset-password', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: username,
password: password,
confirmPassword: confirmPassword,
}),
})
.then(response => {
if (!response.ok) {
return response.text().then(errorText => {
throw new Error(`HTTP error! Status: ${response.status}, Error: ${errorText}`);
});
}
return response.json();
})
.then(data => {
console.log('Success:', data);
// Show an alert with the received data
alert(data.success || data.error || 'Password change status unknown');
// Optionally, you can clear the form or take other actions after the password change
$('#resetUsername').val('');
$('#resetPassword').val('');
$('#resetConfirmPassword').val('');
// You might want to hide the reset password form after submission
$('#resetPasswordFormContainer').hide();
})
.catch(error => {
// Handle 404 error separately to show an alert
if (error.message.includes('HTTP error! Status: 404')) {
alert('Error: User not found. Please enter a valid username.');
} else {
console.error('Fetch Error:', error);
}
});
});
</script>
<script src="inusers.js"></script>
</div>

433
Sean/views/inusers.js Normal file
View File

@ -0,0 +1,433 @@
$(document).ready(function () {
$('#resetPasswordLink').on('click', function () {
$('#resetPasswordFormContainer').show();
$('#createUserForm').hide();
$('#userDataContainer').hide();
$('#downloadButtonContainer').hide();
$('#deleteUserContainer').hide();
$('#logsContainer').hide();
});
$('#addUserLink').on('click', function () {
$('#resetPasswordFormContainer').hide();
$('#createUserForm').show();
$('#userDataContainer').hide();
$('#downloadButtonContainer').hide();
$('#deleteUserContainer').hide();
$('#logsContainer').hide();
});
$('#userDataLink').on('click', function () {
$('#resetPasswordFormContainer').hide();
$('#createUserForm').hide();
$('#userDataContainer').show();
$('#downloadButtonContainer').show();
$('#deleteUserContainer').hide();
$('#logsContainer').hide();
});
$('#searchUserButton').on('click', function () {
console.log('Search button clicked');
const searchUsername = $('#searchUserInput').val();
// Call the function to search for the user
searchUser(searchUsername);
});
$('#deleteUserLink').on('click', function () {
$('#deleteUserContainer').show();
$('#resetPasswordFormContainer').hide();
$('#createUserForm').hide();
$('#userDataContainer').hide();
$('#downloadButtonContainer').hide();
$('#logsContainer').hide();
});
$('#downloadButton').on('click', function () {
// Call the downloadExcel function with the allUsers data
downloadExcel(allUsers);
});
$('#logsLink').on('click', function () {
// Hide other containers
$('#resetPasswordFormContainer').hide();
$('#createUserForm').hide();
$('#userDataContainer').hide();
$('#downloadButtonContainer').hide();
$('#deleteUserContainer').hide();
// Show logs container
$('#logsContainer').show();
fetchLogs();
});
function fetchLogs() {
// Make a fetch request to your server endpoint for logs
fetch('/api/getLogs')
.then(response => response.json())
.then(logs => {
// Process and display logs in the logs container
displayLogs(logs);
})
.catch(error => {
console.error('Error fetching logs:', error);
// Handle errors, e.g., display an alert
});
}
// Update the displayLogs function to generate a table
function displayLogs(logs) {
const logsContainer = $('#logsContainer');
// Clear previous logs
logsContainer.empty();
if (logs && logs.length > 0) {
// Create the table and header row
const table = $('<table>').addClass('logs-table');
const headerRow = '<tr><th>ID</th><th>Username</th><th>Activity</th><th>Timestamp</th></tr>';
table.append(headerRow);
// Add each log as a row in the table
logs.forEach(log => {
const row = `<tr><td>${log.id}</td><td>${log.username}</td><td>${log.activity}</td><td>${log.timestamp}</td></tr>`;
table.append(row);
});
// Append the table to the logsContainer
logsContainer.append(table);
// Add a download button at the top with the current date and time in the file name
const currentDate = new Date();
const formattedDate = currentDate.toISOString().split('T')[0];
const formattedTime = currentDate.toTimeString().split(' ')[0].replace(/:/g, '-');
const downloadButton = $('<button>').text('Download Log').on('click', function () {
downloadLogs(logs, `log_${formattedDate}_${formattedTime}.csv`);
});
// Prepend the download button to the logsContainer
logsContainer.prepend(downloadButton);
} else {
// Display a message if no logs are available
logsContainer.html('<p>No logs available.</p>');
}
}
function downloadLogs(logs, filename) {
if (logs && logs.length > 0) {
const csvContent = 'data:text/csv;charset=utf-8,';
const header = 'ID,Username,Activity,Timestamp\n';
const rows = logs.map(log => `${log.id},${log.username},${log.activity},"${log.timestamp}"`).join('\n');
const data = header + rows;
const encodedData = encodeURI(csvContent + data);
// Create a hidden anchor element to trigger the download
const link = document.createElement('a');
link.setAttribute('href', encodedData);
link.setAttribute('download', 'logs.csv');
document.body.appendChild(link);
// Trigger the download
link.click();
// Remove the link from the DOM
document.body.removeChild(link);
} else {
console.error('No logs available for download.');
}
}
});
function searchUser(username) {
fetch(`/api/searchUser?username=${username}`) // Add the /api prefix here
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error(`HTTP error! Status: ${response.status}`);
}
})
.then(users => {
// Display search results
displaySearchResults(users);
})
.catch(error => {
console.error('Search error:', error);
// Handle errors, e.g., display an alert
});
}
// Function to display search results
function displaySearchResults(users) {
const searchResultsList = $('#searchResultsList');
// Clear previous results
searchResultsList.empty();
if (users && users.length > 0) {
users.forEach(user => {
const listItem = `<li>${user.username} - <button class="deleteUserButton" data-username="${user.username}">Delete</button></li>`;
searchResultsList.append(listItem);
});
// Show the search results container
$('#searchResultsContainer').show();
} else {
// Hide the search results container if no results
$('#searchResultsContainer').hide();
}
}
// Event listener for delete user button in search results
$('#searchResultsList').on('click', '.deleteUserButton', function () {
const usernameToDelete = $(this).data('username');
console.log('Before fetch for user deletion');
// Make a fetch request to delete the user
fetch(`/api/deleteUser/${usernameToDelete}`, {
method: 'DELETE',
})
.then(response => {
console.log('Inside fetch response handler');
if (response.ok) {
// Assuming your server sends a JSON response
return response.json();
} else {
throw new Error(`HTTP error! Status: ${response.status}`);
}
})
.then(data => {
console.log('User deletion success:', data);
alert('User deleted successfully');
$('#searchResultsContainer').hide();
})
.catch(error => {
console.error('User deletion error:', error);
alert('Failed to delete user. Please try again.');
// Handle errors, e.g., display an alert
});
});
function downloadExcel(allUsers) {
if (allUsers && allUsers.length > 0) {
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('All Users');
const headers = ['Name', 'Username', 'Email', 'Last Login', 'Job Title'];
worksheet.addRow(headers);
allUsers.forEach(user => {
const rowData = [
user.name || '',
user.username || '',
user.email || '',
user.lastLogin ? new Date(user.lastLogin).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) : '',
user.jobTitle || ''
];
worksheet.addRow(rowData);
});
workbook.xlsx.writeBuffer().then(buffer => {
const currentDate = new Date();
const formattedDate = currentDate.toISOString().split('T')[0];
const formattedTime = currentDate.toTimeString().split(' ')[0].replace(/:/g, '-');
const fileName = `user_data_${formattedDate}_${formattedTime}.xlsx`;
const blob = new Blob([buffer], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
});
saveAs(blob, fileName);
});
} else {
console.error('No data available for download.');
}
}
function isStrongPassword(password) {
// Password must be at least 10 characters long
if (password.length < 10) {
return false;
}
// Password must contain at least one uppercase letter
if (!/[A-Z]/.test(password)) {
return false;
}
// Password must contain at least one lowercase letter
if (!/[a-z]/.test(password)) {
return false;
}
// Password must contain at least one digit
if (!/\d/.test(password)) {
return false;
}
// Password must contain at least one symbol
if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
return false;
}
return true;
}
function resetFormFields() {
$('#name').val('');
$('#username').val('');
$('#email').val('');
$('#password').val('');
$('#confirmPassword').val('');
$('#jobTitle').val('');
}
$('#userForm').on('submit', function (e) {
e.preventDefault();
const name = $('#name').val();
const username = $('#username').val();
const email = $('#email').val();
const password = $('#password').val();
const confirmPassword = $('#confirmPassword').val();
const jobTitle = $('#jobTitle').val();
if (password !== confirmPassword) {
alert('Passwords do not match. Please enter the same password in both fields.');
return;
}
if (!isStrongPassword(password)) {
alert('Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
return;
}
fetch('/createUser', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: name,
username: username,
email: email,
password: password,
jobTitle: jobTitle,
}),
})
.then(response => {
if (response.status === 201) {
// Status 201 indicates successful creation
return response.json();
} else {
return response.json().then(data => {
throw new Error(data.error || `HTTP error! Status: ${response.status}`);
});
}
})
.then(data => {
console.log('User registration success:', data);
alert('User registered successfully!');
resetFormFields();
})
.catch(error => {
console.error('User registration error:', error);
handleRegistrationError(error);
});
});
function handleRegistrationError(error) {
console.error('Registration error:', error); // Log the full error object for debugging
let errorMessage;
if (typeof error === 'string') {
errorMessage = error;
} else if (error instanceof Error) {
errorMessage = error.message;
} else if (error.response && error.response.data && error.response.data.error) {
errorMessage = error.response.data.error;
} else {
errorMessage = 'Unknown error';
}
if (errorMessage.includes('Username is already taken')) {
alert('Username is already taken. Please choose a different username.');
} else if (errorMessage.includes('Email is already in use')) {
alert('Email is already in use. Please choose a different email.');
} else if (errorMessage.includes('Password does not meet complexity requirements')) {
alert('Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
} else if (errorMessage.includes('User registration failed')) {
alert('User registration failed. Please try again.');
} else {
alert(`Unknown error: ${errorMessage}`);
}
}
$('#resetPasswordForm').on('submit', function (e) {
e.preventDefault();
// Get values from the form
const username = $('#resetUsername').val();
const password = $('#resetPassword').val();
const confirmPassword = $('#resetConfirmPassword').val();
console.log('Username:', username);
console.log('New Password:', password);
// Validate passwords
if (password !== confirmPassword) {
alert('Error: Passwords do not match. Please enter the same password in both fields.');
return;
}
// Check if the new password meets complexity requirements
if (!isStrongPassword(password)) {
alert('Error: Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
return;
}
// Make a fetch request
fetch('/reset-password', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: username,
password: password,
confirmPassword: confirmPassword,
}),
})
.then(response => {
if (!response.ok) {
return response.text().then(errorText => {
throw new Error(`HTTP error! Status: ${response.status}, Error: ${errorText}`);
});
}
return response.json();
})
.then(data => {
console.log('Success:', data);
// Show an alert with the received data
alert(data.success || data.error || 'Password change status unknown');
// Optionally, you can clear the form or take other actions after the password change
$('#resetUsername').val('');
$('#resetPassword').val('');
$('#resetConfirmPassword').val('');
// You might want to hide the reset password form after submission
$('#resetPasswordFormContainer').hide();
})
.catch(error => {
// Handle 404 error separately to show an alert
if (error.message.includes('HTTP error! Status: 404')) {
alert('Error: User not found. Please enter a valid username.');
} else {
console.error('Fetch Error:', error);
}
});
});

View File

@ -94,5 +94,11 @@ button:hover {
<p>If you have forgotten your password, please <span class="reset-link" onclick="location.href='/forgot-password'">reset here</span>.</p>
</div>
</div>
<script>
// Function to escape HTML characters
function escapeHTML(str) {
return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
}
</script>
</body>
</html>

View File

@ -221,4 +221,18 @@ body {
background-color: #0056b3;
border-color: #0056b3;
}
.logs-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.logs-table th, .logs-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.logs-table th {
background-color: #f2f2f2;
}