v01.5
This commit is contained in:
Flatlogic Bot
parent
afa89167b4
commit
758f3e1226
266
dashboard.php
266
dashboard.php
@ -1,42 +1,10 @@
|
|||||||
<?php
|
<?php
|
||||||
require_once 'db/config.php';
|
require_once 'db/config.php';
|
||||||
|
|
||||||
// --- Database Setup ---
|
|
||||||
try {
|
try {
|
||||||
$pdo = db();
|
$pdo = db();
|
||||||
|
|
||||||
// 1. Create table
|
|
||||||
$migrationSql = file_get_contents('db/migrations/001_create_expense_reports_table.sql');
|
|
||||||
if ($migrationSql) {
|
|
||||||
$pdo->exec($migrationSql);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. Seed data if table is empty
|
|
||||||
$stmt = $pdo->query("SELECT COUNT(*) FROM expense_reports");
|
|
||||||
$count = $stmt->fetchColumn();
|
|
||||||
|
|
||||||
if ($count == 0) {
|
|
||||||
$seedData = [
|
|
||||||
['agent_name' => 'John Doe', 'amount' => 150.75, 'description' => 'Client Dinner', 'status' => 'Approved'],
|
|
||||||
['agent_name' => 'Jane Smith', 'amount' => 89.99, 'description' => 'Office Supplies', 'status' => 'Pending'],
|
|
||||||
['agent_name' => 'Peter Jones', 'amount' => 1200.00, 'description' => 'Flight to Conference', 'status' => 'Pending'],
|
|
||||||
['agent_name' => 'John Doe', 'amount' => 45.50, 'description' => 'Taxi Fare', 'status' => 'Rejected'],
|
|
||||||
['agent_name' => 'Susan Williams', 'amount' => 320.00, 'description' => 'Hotel Stay', 'status' => 'Approved'],
|
|
||||||
];
|
|
||||||
|
|
||||||
$insertSql = "INSERT INTO expense_reports (agent_name, amount, description, status) VALUES (?, ?, ?, ?)";
|
|
||||||
$stmt = $pdo->prepare($insertSql);
|
|
||||||
|
|
||||||
foreach ($seedData as $row) {
|
|
||||||
$stmt->execute([$row['agent_name'], $row['amount'], $row['description'], $row['status']]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Fetch all reports
|
|
||||||
$reports = $pdo->query("SELECT * FROM expense_reports ORDER BY created_at DESC")->fetchAll(PDO::FETCH_ASSOC);
|
$reports = $pdo->query("SELECT * FROM expense_reports ORDER BY created_at DESC")->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
} catch (PDOException $e) {
|
} catch (PDOException $e) {
|
||||||
// In a real app, log this error. For now, we'll just show a message.
|
|
||||||
die("Database error: " . $e->getMessage());
|
die("Database error: " . $e->getMessage());
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -49,152 +17,120 @@ function getStatusBadgeClass($status) {
|
|||||||
return 'badge-pending';
|
return 'badge-pending';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$page_title = 'Manager Dashboard';
|
||||||
|
require_once 'includes/header.php';
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Manager Dashboard - ExpenseTracker</title>
|
|
||||||
<meta name="description" content="Review and manage all agent expense reports from one central dashboard.">
|
|
||||||
<meta name="keywords" content="expense dashboard, manage expenses, approve reports, expense overview, financial dashboard, agent spending">
|
|
||||||
<meta name="robots" content="noindex, nofollow"> <!-- This is an internal tool page -->
|
|
||||||
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<h1>Expense Reports</h1>
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<a href="submit_expense.php" class="btn btn-primary">Submit New Expense</a>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Georgia:wght@700&display=swap" rel="stylesheet">
|
</div>
|
||||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light">
|
<div class="card">
|
||||||
<div class="container">
|
<div class="card-body">
|
||||||
<a class="navbar-brand" href="/">ExpenseTracker</a>
|
<div class="table-responsive">
|
||||||
<ul class="navbar-nav ms-auto">
|
<table class="table align-middle">
|
||||||
<li class="nav-item">
|
<thead>
|
||||||
<a class="nav-link active" href="dashboard.php">Dashboard</a>
|
<tr>
|
||||||
</li>
|
<th>Agent Name</th>
|
||||||
<li class="nav-item">
|
<th>Amount</th>
|
||||||
<a class="nav-link" href="submit_expense.php">Submit Report</a>
|
<th>Date</th>
|
||||||
</li>
|
<th>Status</th>
|
||||||
</ul>
|
<th>Description</th>
|
||||||
</div>
|
<th>Actions</th>
|
||||||
</nav>
|
</tr>
|
||||||
|
</thead>
|
||||||
<div class="container mt-5">
|
<tbody>
|
||||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
<?php if (empty($reports)):
|
||||||
<h1>Expense Reports</h1>
|
<tr>
|
||||||
<a href="submit_expense.php" class="btn btn-primary">Submit New Expense</a>
|
<td colspan="6" class="text-center text-muted pt-4 pb-4">No expense reports submitted yet.</td>
|
||||||
</div>
|
</tr>
|
||||||
|
<?php else:
|
||||||
<div class="card">
|
foreach ($reports as $report):
|
||||||
<div class="card-body">
|
?>
|
||||||
<div class="table-responsive">
|
|
||||||
<table class="table align-middle">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
<tr>
|
||||||
<th>Agent Name</th>
|
<td>
|
||||||
<th>Amount</th>
|
<a href="my_reports.php?agent=<?php echo urlencode($report['agent_name']); ?>" class="text-decoration-none">
|
||||||
<th>Date</th>
|
<?php echo htmlspecialchars($report['agent_name']); ?>
|
||||||
<th>Status</th>
|
</a>
|
||||||
<th>Description</th>
|
</td>
|
||||||
<th>Actions</th>
|
<td>$<?php echo number_format($report['amount'], 2); ?></td>
|
||||||
|
<td><?php echo date('M d, Y', strtotime($report['created_at'])); ?></td>
|
||||||
|
<td>
|
||||||
|
<span class="badge-status <?php echo getStatusBadgeClass($report['status']); ?>">
|
||||||
|
<?php echo htmlspecialchars($report['status']); ?>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td><?php echo htmlspecialchars($report['description']); ?></td>
|
||||||
|
<td>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button class="btn btn-sm btn-success btn-action" data-id="<?php echo $report['id']; ?>" data-status="Approved">Approve</button>
|
||||||
|
<button class="btn btn-sm btn-danger btn-action" data-id="<?php echo $report['id']; ?>" data-status="Rejected">Reject</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
<?php endforeach; ?>
|
||||||
<tbody>
|
<?php endif; ?>
|
||||||
<?php if (empty($reports)): ?>
|
</tbody>
|
||||||
<tr>
|
</table>
|
||||||
<td colspan="6" class="text-center text-muted pt-4 pb-4">No expense reports submitted yet.</td>
|
|
||||||
</tr>
|
|
||||||
<?php else: ?>
|
|
||||||
<?php foreach ($reports as $report): ?>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<a href="my_reports.php?agent=<?php echo urlencode($report['agent_name']); ?>" class="text-decoration-none">
|
|
||||||
<?php echo htmlspecialchars($report['agent_name']); ?>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td>$<?php echo number_format($report['amount'], 2); ?></td>
|
|
||||||
<td><?php echo date('M d, Y', strtotime($report['created_at'])); ?></td>
|
|
||||||
<td>
|
|
||||||
<span class="badge-status <?php echo getStatusBadgeClass($report['status']); ?>">
|
|
||||||
<?php echo htmlspecialchars($report['status']); ?>
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td><?php echo htmlspecialchars($report['description']); ?></td>
|
|
||||||
<td>
|
|
||||||
<div class="btn-group" role="group">
|
|
||||||
<button class="btn btn-sm btn-success btn-action" data-id="<?php echo $report['id']; ?>" data-status="Approved">Approve</button>
|
|
||||||
<button class="btn btn-sm btn-danger btn-action" data-id="<?php echo $report['id']; ?>" data-status="Rejected">Reject</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
<?php endif; ?>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<footer class="text-center p-4 mt-5">
|
<script>
|
||||||
<p>© <?php echo date("Y"); ?> ExpenseTracker. All rights reserved.</p>
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
</footer>
|
const actionButtons = document.querySelectorAll('.btn-action');
|
||||||
|
actionButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', function() {
|
||||||
|
const reportId = this.dataset.id;
|
||||||
|
const newStatus = this.dataset.status;
|
||||||
|
const row = this.closest('tr');
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
if (!confirm(`Are you sure you want to ${newStatus.toLowerCase()} this report?`)) {
|
||||||
<script>
|
return;
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
}
|
||||||
const actionButtons = document.querySelectorAll('.btn-action');
|
|
||||||
actionButtons.forEach(button => {
|
|
||||||
button.addEventListener('click', function() {
|
|
||||||
const reportId = this.dataset.id;
|
|
||||||
const newStatus = this.dataset.status;
|
|
||||||
const row = this.closest('tr');
|
|
||||||
|
|
||||||
if (!confirm(`Are you sure you want to ${newStatus.toLowerCase()} this report?`)) {
|
const formData = new FormData();
|
||||||
return;
|
formData.append('id', reportId);
|
||||||
}
|
formData.append('status', newStatus);
|
||||||
|
|
||||||
const formData = new FormData();
|
fetch('api/update_status.php', {
|
||||||
formData.append('id', reportId);
|
method: 'POST',
|
||||||
formData.append('status', newStatus);
|
body: formData
|
||||||
|
})
|
||||||
fetch('api/update_status.php', {
|
.then(response => response.json())
|
||||||
method: 'POST',
|
.then(data => {
|
||||||
body: formData
|
if (data.success) {
|
||||||
})
|
const statusCell = row.querySelector('.badge-status');
|
||||||
.then(response => response.json())
|
if (statusCell) {
|
||||||
.then(data => {
|
statusCell.textContent = newStatus;
|
||||||
if (data.success) {
|
statusCell.className = 'badge-status'; // Reset classes
|
||||||
const statusCell = row.querySelector('.badge-status');
|
if (newStatus === 'Approved') {
|
||||||
if (statusCell) {
|
statusCell.classList.add('badge-approved');
|
||||||
statusCell.textContent = newStatus;
|
} else if (newStatus === 'Rejected') {
|
||||||
statusCell.className = 'badge-status'; // Reset classes
|
statusCell.classList.add('badge-rejected');
|
||||||
if (newStatus === 'Approved') {
|
} else {
|
||||||
statusCell.classList.add('badge-approved');
|
statusCell.classList.add('badge-pending');
|
||||||
} else if (newStatus === 'Rejected') {
|
|
||||||
statusCell.classList.add('badge-rejected');
|
|
||||||
} else {
|
|
||||||
statusCell.classList.add('badge-pending');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
// Disable buttons after action
|
|
||||||
row.querySelectorAll('.btn-action').forEach(btn => {
|
|
||||||
btn.disabled = true;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
alert('Error: ' + data.message);
|
|
||||||
}
|
}
|
||||||
})
|
// Disable buttons after action
|
||||||
.catch(error => {
|
row.querySelectorAll('.btn-action').forEach(btn => {
|
||||||
console.error('Fetch error:', error);
|
btn.disabled = true;
|
||||||
alert('An unexpected error occurred. Please try again.');
|
});
|
||||||
});
|
} else {
|
||||||
|
alert('Error: ' + data.message);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Fetch error:', error);
|
||||||
|
alert('An unexpected error occurred. Please try again.');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
});
|
||||||
</body>
|
</script>
|
||||||
</html>
|
|
||||||
|
<?php
|
||||||
|
require_once 'includes/footer.php';
|
||||||
|
?>
|
||||||
7
includes/footer.php
Normal file
7
includes/footer.php
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
</main>
|
||||||
|
<footer class="text-center p-4 mt-auto">
|
||||||
|
<p>© <?php echo date("Y"); ?> ExpenseTracker. All rights reserved.</p>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
includes/header.php
Normal file
32
includes/header.php
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title><?php echo isset($page_title) ? $page_title : 'ExpenseTracker'; ?></title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<a class="navbar-brand" href="index.php">ExpenseTracker</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
|
<ul class="navbar-nav ms-auto">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="dashboard.php">Manager Dashboard</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="submit_expense.php">Submit Expense</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="my_reports.php">My Reports</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main class="container mt-4">
|
||||||
91
index.php
91
index.php
@ -1,65 +1,34 @@
|
|||||||
<!DOCTYPE html>
|
<?php
|
||||||
<html lang="en">
|
$page_title = 'Welcome to ExpenseTracker';
|
||||||
<head>
|
require_once 'includes/header.php';
|
||||||
<meta charset="UTF-8">
|
?>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>ExpenseTracker - Welcome</title>
|
|
||||||
<meta name="description" content="ExpenseTracker App simplifies agent expenses management with detailed reports and intuitive dashboard tools.">
|
|
||||||
<meta name="keywords" content="expense tracking, expense report, agent expenses, budget management, financial reporting, business expenses, reimbursement software, expense management, corporate expenses, employee spending, receipt tracking, financial control">
|
|
||||||
<meta property="og:title" content="expensereport">
|
|
||||||
<meta property="og:description" content="ExpenseTracker App simplifies agent expenses management with detailed reports and intuitive dashboard tools.">
|
|
||||||
<meta property="og:image" content="https://project-screens.s3.amazonaws.com/screenshots/34660/app-hero-20251004-171240.png">
|
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
|
||||||
<meta name="twitter:image" content="https://project-screens.s3.amazonaws.com/screenshots/34660/app-hero-20251004-171240.png">
|
|
||||||
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Georgia:wght@700&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light">
|
<section class="hero text-center">
|
||||||
<div class="container">
|
<h1>Effortless Expense Reporting</h1>
|
||||||
<a class="navbar-brand" href="/">ExpenseTracker</a>
|
<p class="lead">Simplify how your team tracks and manages expenses. Get a clear overview, approve reports on the fly, and keep your budget in check.</p>
|
||||||
|
<a href="dashboard.php" class="btn btn-primary btn-lg">View Manager Dashboard</a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="container mt-5 mb-5">
|
||||||
|
<div class="row text-center">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<img src="https://picsum.photos/seed/submit/800/600" class="img-fluid rounded mb-3" alt="An agent submitting an expense report on a mobile device.">
|
||||||
|
<h3>Submit with Ease</h3>
|
||||||
|
<p>Agents can quickly submit expenses from anywhere, on any device.</p>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
<div class="col-md-4">
|
||||||
|
<img src="https://picsum.photos/seed/dashboard/800/600" class="img-fluid rounded mb-3" alt="A manager reviewing an expense dashboard on a tablet.">
|
||||||
<main>
|
<h3>Manage with Clarity</h3>
|
||||||
<section class="hero">
|
<p>Managers get a real-time dashboard to review and approve reports.</p>
|
||||||
<div class="container">
|
|
||||||
<h1>Effortless Expense Reporting</h1>
|
|
||||||
<p>Simplify how your team tracks and manages expenses. Get a clear overview, approve reports on the fly, and keep your budget in check.</p>
|
|
||||||
<a href="dashboard.php" class="btn btn-light btn-lg">View Manager Dashboard</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="container mt-5 mb-5">
|
|
||||||
<div class="row text-center">
|
|
||||||
<div class="col-md-4">
|
|
||||||
<img src="https://picsum.photos/seed/submit/800/600" class="img-fluid rounded mb-3" alt="An agent submitting an expense report on a mobile device.">
|
|
||||||
<h3>Submit with Ease</h3>
|
|
||||||
<p>Agents can quickly submit expenses from anywhere, on any device.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4">
|
|
||||||
<img src="https://picsum.photos/seed/dashboard/800/600" class="img-fluid rounded mb-3" alt="A manager reviewing an expense dashboard on a tablet.">
|
|
||||||
<h3>Manage with Clarity</h3>
|
|
||||||
<p>Managers get a real-time dashboard to review and approve reports.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4">
|
|
||||||
<img src="https://picsum.photos/seed/insights/800/600" class="img-fluid rounded mb-3" alt="Charts and graphs showing expense analytics.">
|
|
||||||
<h3>Gain Instant Insights</h3>
|
|
||||||
<p>Track spending patterns and make informed budget decisions.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
<div class="col-md-4">
|
||||||
|
<img src="https://picsum.photos/seed/insights/800/600" class="img-fluid rounded mb-3" alt="Charts and graphs showing expense analytics.">
|
||||||
|
<h3>Gain Instant Insights</h3>
|
||||||
|
<p>Track spending patterns and make informed budget decisions.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<footer class="text-center p-4">
|
<?php
|
||||||
<p>© <?php echo date("Y"); ?> ExpenseTracker. All rights reserved.</p>
|
require_once 'includes/footer.php';
|
||||||
</footer>
|
?>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
117
my_reports.php
117
my_reports.php
@ -23,88 +23,56 @@ if (empty($agent_name)) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getStatusClass($status) {
|
function getStatusBadgeClass($status) {
|
||||||
switch ($status) {
|
switch ($status) {
|
||||||
case 'Approved':
|
case 'Approved': return 'badge-approved';
|
||||||
return 'bg-green-100 text-green-800';
|
case 'Rejected': return 'badge-rejected';
|
||||||
case 'Rejected':
|
|
||||||
return 'bg-red-100 text-red-800';
|
|
||||||
case 'Pending':
|
case 'Pending':
|
||||||
default:
|
default:
|
||||||
return 'bg-yellow-100 text-yellow-800';
|
return 'badge-pending';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
require_once 'includes/header.php';
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title><?php echo $page_title; ?> - Expense Tracker</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="stylesheet" href="assets/css/custom.css">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Georgia:wght@400;700&display=swap" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body class="bg-gray-50 font-sans">
|
|
||||||
<header class="bg-white shadow-sm">
|
|
||||||
<nav class="container mx-auto px-4 lg:px-8 py-4 flex justify-between items-center">
|
|
||||||
<a href="index.php" class="text-2xl font-bold font-serif text-indigo-600">ExpenseApp</a>
|
|
||||||
<div class="flex items-center space-x-4">
|
|
||||||
<a href="dashboard.php" class="text-gray-600 hover:text-indigo-600">Dashboard</a>
|
|
||||||
<a href="submit_expense.php" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">Submit Report</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="container mx-auto px-4 lg:px-8 py-8">
|
<h1 class="mb-4"><?php echo $page_title; ?></h1>
|
||||||
<div class="flex justify-between items-center mb-6">
|
|
||||||
<h1 class="text-3xl font-bold font-serif text-gray-800"><?php echo $page_title; ?></h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php if (empty($agent_name)): ?>
|
<?php if (empty($agent_name)):
|
||||||
<div class="bg-white p-8 rounded-lg shadow-md text-center">
|
<div class="alert alert-warning text-center">
|
||||||
<h2 class="text-xl font-semibold text-gray-700">No Agent Selected</h2>
|
<h2 class="h4">No Agent Selected</h2>
|
||||||
<p class="text-gray-500 mt-2">Please go to the <a href="dashboard.php" class="text-indigo-600 hover:underline">main dashboard</a> and click on an agent's name to see their reports.</p>
|
<p>Please go to the <a href="dashboard.php" class="alert-link">main dashboard</a> and click on an agent's name to see their reports.</p>
|
||||||
</div>
|
</div>
|
||||||
<?php elseif (empty($reports)): ?>
|
<?php elseif (empty($reports)):
|
||||||
<div class="bg-white p-8 rounded-lg shadow-md text-center">
|
<div class="alert alert-info text-center">
|
||||||
<h2 class="text-xl font-semibold text-gray-700">No Reports Found</h2>
|
<h2 class="h4">No Reports Found</h2>
|
||||||
<p class="text-gray-500 mt-2">This agent has not submitted any expense reports yet.</p>
|
<p>This agent has not submitted any expense reports yet.</p>
|
||||||
<a href="submit_expense.php" class="mt-4 inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">Submit First Report</a>
|
<a href="submit_expense.php" class="btn btn-primary mt-3">Submit First Report</a>
|
||||||
</div>
|
</div>
|
||||||
<?php else: ?>
|
<?php else:
|
||||||
<div class="bg-white shadow-md rounded-lg overflow-hidden">
|
<div class="card">
|
||||||
<table class="min-w-full leading-normal">
|
<div class="card-body">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table align-middle">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Agent</th>
|
<th>Agent</th>
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Date</th>
|
<th>Date</th>
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Amount</th>
|
<th class="text-end">Amount</th>
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Description</th>
|
<th>Description</th>
|
||||||
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
|
<th class="text-center">Status</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<?php foreach ($reports as $report): ?>
|
<?php foreach ($reports as $report): ?>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="px-5 py-4 border-b border-gray-200 bg-white text-sm">
|
<td><?php echo htmlspecialchars($report['agent_name']); ?></td>
|
||||||
<p class="text-gray-900 whitespace-no-wrap"><?php echo htmlspecialchars($report['agent_name']); ?></p>
|
<td><?php echo date("M d, Y", strtotime($report['created_at'])); ?></td>
|
||||||
</td>
|
<td class="text-end">$<?php echo number_format($report['amount'], 2); ?></td>
|
||||||
<td class="px-5 py-4 border-b border-gray-200 bg-white text-sm">
|
<td><?php echo htmlspecialchars($report['description']); ?></td>
|
||||||
<p class="text-gray-900 whitespace-no-wrap"><?php echo date("M d, Y", strtotime($report['created_at'])); ?></p>
|
<td class="text-center">
|
||||||
</td>
|
<span class="badge-status <?php echo getStatusBadgeClass($report['status']); ?>">
|
||||||
<td class="px-5 py-4 border-b border-gray-200 bg-white text-sm text-right">
|
<?php echo htmlspecialchars($report['status']); ?>
|
||||||
<p class="text-gray-900 whitespace-no-wrap">$<?php echo number_format($report['amount'], 2); ?></p>
|
|
||||||
</td>
|
|
||||||
<td class="px-5 py-4 border-b border-gray-200 bg-white text-sm">
|
|
||||||
<p class="text-gray-900 whitespace-no-wrap"><?php echo htmlspecialchars($report['description']); ?></p>
|
|
||||||
</td>
|
|
||||||
<td class="px-5 py-4 border-b border-gray-200 bg-white text-sm text-center">
|
|
||||||
<span class="relative inline-block px-3 py-1 font-semibold leading-tight <?php echo getStatusClass($report['status']); ?> rounded-full">
|
|
||||||
<span aria-hidden class="absolute inset-0 opacity-50 rounded-full"></span>
|
|
||||||
<span class="relative"><?php echo htmlspecialchars($report['status']); ?></span>
|
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -112,13 +80,10 @@ function getStatusClass($status) {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="bg-white mt-12">
|
|
||||||
<div class="container mx-auto px-4 lg:px-8 py-6 text-center text-gray-500">
|
|
||||||
<p>© <?php echo date("Y"); ?> ExpenseApp. All Rights Reserved.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</div>
|
||||||
</body>
|
<?php endif; ?>
|
||||||
</html>
|
|
||||||
|
<?php
|
||||||
|
require_once 'includes/footer.php';
|
||||||
|
?>
|
||||||
@ -20,114 +20,54 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
$stmt->execute([$agent_name, $amount, $description, 'Pending']);
|
$stmt->execute([$agent_name, $amount, $description, 'Pending']);
|
||||||
$success_message = 'Expense report submitted successfully!';
|
$success_message = 'Expense report submitted successfully!';
|
||||||
} catch (PDOException $e) {
|
} catch (PDOException $e) {
|
||||||
// In a real app, you would log this error, not show it to the user.
|
|
||||||
$error_message = 'Database error: Could not submit the report.';
|
$error_message = 'Database error: Could not submit the report.';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$page_title = 'Submit Expense Report';
|
||||||
|
require_once 'includes/header.php';
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
<div class="row justify-content-center">
|
||||||
<head>
|
<div class="col-md-6">
|
||||||
<meta charset="UTF-8">
|
<h1 class="mb-4">Submit New Expense Report</h1>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Submit Expense Report</title>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Georgia:wght@700&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background-color: #F3F4F6;
|
|
||||||
}
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-family: 'Georgia', serif;
|
|
||||||
}
|
|
||||||
.form-container {
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 4rem auto;
|
|
||||||
padding: 2rem;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
||||||
}
|
|
||||||
.form-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.75rem;
|
|
||||||
border: 1px solid #D1D5DB;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
transition: border-color 0.2s;
|
|
||||||
}
|
|
||||||
.form-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #4F46E5;
|
|
||||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
|
|
||||||
}
|
|
||||||
.btn-primary {
|
|
||||||
background-color: #4F46E5;
|
|
||||||
color: white;
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
}
|
|
||||||
.btn-primary:hover {
|
|
||||||
background-color: #4338CA;
|
|
||||||
}
|
|
||||||
.alert {
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
.alert-success {
|
|
||||||
background-color: #D1FAE5;
|
|
||||||
color: #065F46;
|
|
||||||
}
|
|
||||||
.alert-error {
|
|
||||||
background-color: #FEE2E2;
|
|
||||||
color: #991B1B;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="form-container">
|
|
||||||
<h1 class="text-2xl font-bold text-gray-800 mb-6">Submit New Expense Report</h1>
|
|
||||||
|
|
||||||
<?php if ($success_message): ?>
|
<?php if ($success_message): ?>
|
||||||
<div class="alert alert-success">
|
<div class="alert alert-success">
|
||||||
<?php echo htmlspecialchars($success_message); ?>
|
<?php echo htmlspecialchars($success_message); ?>
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
<a href="dashboard.php" class="font-semibold text-indigo-600 hover:text-indigo-500">Return to Dashboard</a>
|
<a href="dashboard.php" class="btn btn-primary">Return to Dashboard</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<?php if ($error_message): ?>
|
<?php if ($error_message): ?>
|
||||||
<div class="alert alert-error">
|
<div class="alert alert-danger">
|
||||||
<?php echo htmlspecialchars($error_message); ?>
|
<?php echo htmlspecialchars($error_message); ?>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<?php if (!$success_message): ?>
|
<?php if (!$success_message): ?>
|
||||||
<form action="submit_expense.php" method="POST">
|
<form action="submit_expense.php" method="POST">
|
||||||
<div class="space-y-6">
|
<div class="mb-3">
|
||||||
<div>
|
<label for="agent_name" class="form-label">Agent Name</label>
|
||||||
<label for="agent_name" class="block text-sm font-medium text-gray-700 mb-1">Agent Name</label>
|
<input type="text" id="agent_name" name="agent_name" class="form-control" required>
|
||||||
<input type="text" id="agent_name" name="agent_name" class="form-input" required>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="amount" class="block text-sm font-medium text-gray-700 mb-1">Amount ($)</label>
|
|
||||||
<input type="number" id="amount" name="amount" step="0.01" min="0.01" class="form-input" required>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
|
|
||||||
<textarea id="description" name="description" rows="4" class="form-input" required></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-8 border-t pt-6 flex justify-end">
|
<div class="mb-3">
|
||||||
<button type="submit" class="btn-primary">Submit Report</button>
|
<label for="amount" class="form-label">Amount ($)</label>
|
||||||
|
<input type="number" id="amount" name="amount" step="0.01" min="0.01" class="form-control" required>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="description" class="form-label">Description</label>
|
||||||
|
<textarea id="description" name="description" rows="4" class="form-control" required></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit Report</button>
|
||||||
</form>
|
</form>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</div>
|
||||||
</html>
|
|
||||||
|
<?php
|
||||||
|
require_once 'includes/footer.php';
|
||||||
|
?>
|
||||||
Loading…
x
Reference in New Issue
Block a user