<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Record Transportation</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
.navbar {
background-color: #007bff;
padding: 10px;
text-align: center;
.navbar a {
color: white;
text-decoration: none;
padding: 10px 20px;
font-size: 18px;
margin: 0 10px;
.navbar a:hover {
background-color: #0056b3;
border-radius: 5px;
}
.container {
padding: 20px;
text-align: center;
.container h1 {
color: #333;
form {
max-width: 500px;
margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
form label {
display: block;
margin-bottom: 5px;
color: #333;
form input, form select, form textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
form button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
form button:hover {
background-color: #218838;
</style>
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar">
<a href="dashboard.html">Dashboard</a>
<a href="record-transportation.html">Record Transportation</a>
<a href="calculate-bill.html">Calculate Bill</a>
<a href="report.html">Reports</a>
<a href="logout.html">Logout</a>
</div>
<div class="container">
<h1>Transportation Record Form</h1>
<!-- Form to record transportation details -->
<form>
<label for="date">Date of Transit:</label>
<input type="date" id="date" name="date" required><br>
<label for="passenger_id">Passenger ID:</label>
<input type="text" id="passenger_id" name="passenger_id" required><br>
<label for="vehicle">Type of Vehicle:</label>
<input type="text" id="vehicle" name="vehicle" placeholder="e.g., 14 Seater Bus" required><br>
<label for="plate_number">Plate Number:</label>
<input type="text" id="plate_number" name="plate_number" required><br>
<label for="driver">Name of Driver:</label>
<input type="text" id="driver" name="driver" required><br>
<label for="passenger_name">Name of Passenger:</label>
<input type="text" id="passenger_name" name="passenger_name" required><br>
<label for="phone">Phone No:</label>
<input type="tel" id="phone" name="phone" required><br>
<label for="from">From:</label>
<input type="text" id="from" name="from" required><br>
<label for="to">To:</label>
<input type="text" id="to" name="to" required><br>
<label for="luggage_type">Type of Luggage:</label>
<input type="text" id="luggage_type" name="luggage_type" placeholder="e.g., Ghana must go"
required><br>
<label for="weight">Weight of Luggage:</label>
<input type="text" id="weight" name="weight" placeholder="e.g., 9kg" required><br>
<label for="description">Description of Content:</label>
<textarea id="description" name="description" rows="3" placeholder="e.g., Clothes and Books"
required></textarea><br>
<label for="amount">Amount Paid:</label>
<input type="number" id="amount" name="amount" placeholder="e.g., 450" required><br>
<button type="submit">Save Record</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - Transport Management</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
.navbar {
background-color: #007bff;
padding: 10px;
text-align: center;
.navbar a {
color: white;
text-decoration: none;
padding: 10px 20px;
font-size: 18px;
margin: 0 10px;
.navbar a:hover {
background-color: #0056b3;
border-radius: 5px;
.container {
padding: 20px;
text-align: center;
.container h1 {
color: #333;
.menu {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
.menu a {
padding: 10px 20px;
background-color: #28a745;
color: white;
text-decoration: none;
border-radius: 5px;
.menu a:hover {
background-color: #218838;
/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
th {
background-color: #007bff;
color: white;
/* Add Entry Row Styling */
.input-row input {
width: 100%;
padding: 8px;
box-sizing: border-box;
.add-entry-button {
margin-top: 10px;
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
.add-entry-button:hover {
background-color: #218838;
</style>
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar">
<a href="dashboard.html">Dashboard</a>
<a href="record-transportation.html">Record Transportation</a>
<a href="calculate-bill.html">Calculate Bill</a>
<a href="report.html">Reports</a>
<a href="logout.html">Logout</a>
</div>
<!-- Dashboard Content -->
<div class="container">
<h1>Welcome to the Transport Management Dashboard</h1>
<p>Use the links below to navigate the system</p>
<div class="menu">
<a href="record-transportation.html">Record Transportation</a>
<a href="calculate-bill.html">Calculate Bill</a>
<a href="report.html">View Reports</a>
</div>
<!-- Transport Data Table -->
<table id="transportTable">
<tr>
<th>Date of Transit</th>
<th>Passenger ID</th>
<th>Type of Vehicle</th>
<th>Plate Number</th>
<th>Name of Driver</th>
<th>Name of Passenger</th>
<th>Phone No</th>
<th>From</th>
</tr>
<tr>
<td>12/01/2015</td>
<td>001</td>
<td>14 Seater Bus</td>
<td>KTY657A</td>
<td>Mr. Ime</td>
<td>Attah Bassey</td>
<td>08089876</td>
<td>Uyo</td>
</tr>
<tr>
<td>12/3/2015</td>
<td>002</td>
<td>14 Seater Hiace Bus</td>
<td>KTY657A</td>
<td>Mr. Udeme Bassey</td>
<td>Okon Attah</td>
<td>090987867</td>
<td>Uyo</td>
</tr>
<!-- Input fields row for new entry -->
<tr class="input-row">
<td><input type="text" id="dateOfTransit"></td>
<td><input type="text" id="passengerID"></td>
<td><input type="text" id="vehicleType"></td>
<td><input type="text" id="plateNumber"></td>
<td><input type="text" id="driverName"></td>
<td><input type="text" id="passengerName"></td>
<td><input type="text" id="phoneNo"></td>
<td><input type="text" id="fromLocation"></td>
</tr>
</table>
<!-- Add Entry Button -->
<button class="add-entry-button" onclick="addEntry()">Add Entry</button>
</div>
<script>
function addEntry() {
// Get values from input fields
const dateOfTransit = document.getElementById('dateOfTransit').value;
const passengerID = document.getElementById('passengerID').value;
const vehicleType = document.getElementById('vehicleType').value;
const plateNumber = document.getElementById('plateNumber').value;
const driverName = document.getElementById('driverName').value;
const passengerName = document.getElementById('passengerName').value;
const phoneNo = document.getElementById('phoneNo').value;
const fromLocation = document.getElementById('fromLocation').value;
// Check if all fields are filled
if (!dateOfTransit || !passengerID || !vehicleType || !plateNumber || !driverName || !
passengerName || !phoneNo || !fromLocation) {
alert("Please fill in all fields.");
return;
// Create a new row and add it to the table
const table = document.getElementById("transportTable");
const newRow = table.insertRow(table.rows.length - 1);
newRow.insertCell(0).innerText = dateOfTransit;
newRow.insertCell(1).innerText = passengerID;
newRow.insertCell(2).innerText = vehicleType;
newRow.insertCell(3).innerText = plateNumber;
newRow.insertCell(4).innerText = driverName;
newRow.insertCell(5).innerText = passengerName;
newRow.insertCell(6).innerText = phoneNo;
newRow.insertCell(7).innerText = fromLocation;
// Clear input fields after adding the row
document.getElementById('dateOfTransit').value = '';
document.getElementById('passengerID').value = '';
document.getElementById('vehicleType').value = '';
document.getElementById('plateNumber').value = '';
document.getElementById('driverName').value = '';
document.getElementById('passengerName').value = '';
document.getElementById('phoneNo').value = '';
document.getElementById('fromLocation').value = '';
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Record Transportation</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
.navbar {
background-color: #007bff;
padding: 10px;
text-align: center;
.navbar a {
color: white;
text-decoration: none;
padding: 10px 20px;
font-size: 18px;
margin: 0 10px;
.navbar a:hover {
background-color: #0056b3;
border-radius: 5px;
.container {
padding: 20px;
text-align: center;
.container h1 {
color: #333;
form {
max-width: 500px;
margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
form label {
display: block;
margin-bottom: 5px;
color: #333;
form input, form select, form textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
form button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
form button:hover {
background-color: #218838;
</style>
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar">
<a href="dashboard.html">Dashboard</a>
<a href="record-transportation.html">Record Transportation</a>
<a href="calculate-bill.html">Calculate Bill</a>
<a href="report.html">Reports</a>
<a href="logout.html">Logout</a>
</div>
<div class="container">
<h1>Transportation Record Form</h1>
<!-- Form to record transportation details -->
<form>
<label for="date">Date of Transit:</label>
<input type="date" id="date" name="date" required><br>
<label for="passenger_id">Passenger ID:</label>
<input type="text" id="passenger_id" name="passenger_id" required><br>
<label for="vehicle">Type of Vehicle:</label>
<input type="text" id="vehicle" name="vehicle" placeholder="e.g., 14 Seater Bus" required><br>
<label for="plate_number">Plate Number:</label>
<input type="text" id="plate_number" name="plate_number" required><br>
<label for="driver">Name of Driver:</label>
<input type="text" id="driver" name="driver" required><br>
<label for="passenger_name">Name of Passenger:</label>
<input type="text" id="passenger_name" name="passenger_name" required><br>
<label for="phone">Phone No:</label>
<input type="tel" id="phone" name="phone" required><br>
<label for="from">From:</label>
<input type="text" id="from" name="from" required><br>
<label for="to">To:</label>
<input type="text" id="to" name="to" required><br>
<label for="luggage_type">Type of Luggage:</label>
<input type="text" id="luggage_type" name="luggage_type" placeholder="e.g., Ghana must go"
required><br>
<label for="weight">Weight of Luggage:</label>
<input type="text" id="weight" name="weight" placeholder="e.g., 9kg" required><br>
<label for="description">Description of Content:</label>
<textarea id="description" name="description" rows="3" placeholder="e.g., Clothes and Books"
required></textarea><br>
<label for="amount">Amount Paid:</label>
<input type="number" id="amount" name="amount" placeholder="e.g., 450" required><br>
<button type="submit">Save Record</button>
</form>
</div>
</body>
</html>
