<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Dashboard</title>
<style>
/* General styles */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f7f9;
}
h2 {
text-align: center;
font-size: 2em;
margin-bottom: 20px;
color: #333;
text-transform: uppercase;
}
/* Table styles */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
th, td {
border: 1px solid #e0e0e0;
padding: 15px;
text-align: center;
color: #555;
}
th {
background-color: #3498db;
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
td {
background-color: #f9f9f9;
}
td input, td select {
background-color: #e9ecef;
border: 1px solid #ccc;
padding: 8px 10px;
width: 95%;
border-radius: 4px;
font-size: 1em;
box-sizing: border-box;
transition: all 0.3s ease;
}
td input:focus, td select:focus {
border-color: #3498db;
outline: none;
}
/* Button Styles */
button {
padding: 12px 25px;
margin-top: 20px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 5px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
button:hover {
background-color: #27ae60;
transform: translateY(-2px);
}
#add-row-btn {
background-color: #3498db;
}
#add-row-btn:hover {
background-color: #2980b9;
}
#clear-btn {
background-color: #e74c3c;
}
#clear-btn:hover {
background-color: #c0392b;
}
/* Form and Input Style */
select, input[type="date"], input[type="number"], input[type="text"] {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px;
font-size: 1em;
background-color: #fafafa;
transition: all 0.3s ease;
}
select:hover, input[type="number"]:hover, input[type="text"]:hover, input[type="date"]:hover {
border-color: #3498db;
}
select:focus, input[type="number"]:focus, input[type="text"]:focus, input[type="date"]:focus {
border-color: #3498db;
outline: none;
}
/* Responsive Design */
@media (max-width: 768px) {
body {
padding: 10px;
}
table {
width: 100%;
font-size: 0.9em;
}
td input, td select {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Main Dashboard</h2>
<form id="data-form">
<table id="data-table">
<thead>
<tr>
<th>STAFF/ACCOUNT</th>
<th>USER/SERVICE AGENT</th>
<th>CUSTOMERS</th>
<th>DATE</th>
<th>COMPANY NAME</th>
<th>DESCRIPTION</th>
<th>APPLICATION NUMBER</th>
<th>CARD/CASH BOOK/BANK</th>
<th>AMOUNT</th>
<th>CUS DISCOUNT</th>
<th>CUS SERVICE CHARGE</th>
<th>PAYMENT RECEIVED</th>
<th>PAYMENT OUTWARD</th>
<th>AGENT COMMISSION</th>
<th>AGENT FEE</th>
<th>PROFIT</th>
</tr>
</thead>
<tbody>
<tr>
<td><select name="staff_account">
<option value="">Select STAFF/ACCOUNT</option>
<option value="Ameen">Ameen</option>
<option value="Haseeb">Haseeb</option>
<option value="Mubashir">Mubashir</option>
<option value="Khasim">Khasim</option>
<option value="Usman">Usman</option>
</select></td>
<td><select name="user_agent">
<option value="">Select USER/SERVICE AGENT</option>
<option value="Kalthoom">Kalthoom</option>
<option value="Insurance">Insurance</option>
<option value="Easy Way User">Easy Way User</option>
<option value="GDRFA Personal">GDRFA Personal</option>
<option value="MBS">MBS</option>
<option value="Dawn Amer">Dawn Amer</option>
</select></td>
<td><select name="customer">
<option value="">Select CUSTOMERS</option>
<option value="Echtibi Typing">Echtibi Typing</option>
<option value="Echtibi Branch">Echtibi Branch</option>
<option value="Pro Team">Pro Team</option>
<option value="Suhair">Suhair</option>
<option value="Prosas">Prosas</option>
<option value="Abbas Qawaed">Abbas Qawaed</option>
</select></td>
<td><input type="date" name="date"></td>
<td><input type="text" name="company_name"></td>
<td><input type="text" name="description"></td>
<td><input type="text" name="application_number"></td>
<td><select name="card_cash">
<option value="">Select CARD/CASH BOOK/BANK</option>
<option value="ADCB Wafi">ADCB Wafi</option>
<option value="WIO Bab">WIO Bab</option>
<option value="Khasim CBD Debit">Khasim CBD Debit</option>
<option value="Service Agent Card">Service Agent Card</option>
<option value="Customer Card">Customer Card</option>
</select></td>
<td><input type="number" name="amount"></td>
<td><input type="number" name="cus_discount" oninput="calculateProfit(this)"></td>
<td><input type="number" name="cus_service_charge" oninput="calculateProfit(this)"></td>
<td><input type="number" name="payment_received"></td>
<td><input type="number" name="payment_outward"></td>
<td><input type="number" name="agent_commission" oninput="calculateProfit(this)"></td>
<td><input type="number" name="agent_fee" oninput="calculateProfit(this)"></td>
<td><input type="number" name="profit" readonly></td>
</tr>
</tbody>
</table>
<button type="button" onclick="submitData()">Submit</button>
<button type="button" id="add-row-btn" onclick="addRow()">Add Row</button>
<button type="button" id="clear-btn" onclick="clearTable()">Clear</button>
</form>
<script>
// Handle paste for all relevant columns
function handlePaste(event) {
const target = event.target;
const clipboardData = event.clipboardData.getData('text');
const rows = clipboardData.split('\n'); // Split the pasted content into rows
rows.forEach((row, rowIndex) => {
const parts = row.split(/\t/); // Split each row by tabs (as Excel/Google Sheets use tabs for columns)
// Ensure there's enough data for the row to be processed
if (parts.length >= 3) {
// Create new rows if there are more rows to paste
if (rowIndex > 0) {
addRow();
}
const currentRow = document.querySelectorAll('#data-table tbody tr')[rowIndex];
currentRow.querySelector('[name="company_name"]').value = parts[0]; // First part goes to COMPANY NAME
currentRow.querySelector('[name="description"]').value = parts[1]; // Second part goes to DESCRIPTION
currentRow.querySelector('[name="application_number"]').value = parts[2]; // Third part goes to APPLICATION NUMBER
}
});
event.preventDefault(); // Prevent the default paste behavior
}
// Function to add a new row
function addRow() {
const table = document.getElementById('data-table').getElementsByTagName('tbody')[0];
const newRow = table.insertRow();
const cells = [
{ element: "select", options: '<option value="">Select STAFF/ACCOUNT</option><option value="Ameen">Ameen</option><option value="Haseeb">Haseeb</option><option value="Mubashir">Mubashir</option><option value="Khasim">Khasim</option><option value="Usman">Usman</option>' },
{ element: "select", options: '<option value="">Select USER/SERVICE AGENT</option><option value="Kalthoom">Kalthoom</option><option value="Insurance">Insurance</option><option value="Easy Way User">Easy Way User</option><option value="GDRFA Personal">GDRFA Personal</option><option value="MBS">MBS</option><option value="Dawn Amer">Dawn Amer</option>' },
{ element: "select", options: '<option value="">Select CUSTOMERS</option><option value="Echtibi Typing">Echtibi Typing</option><option value="Echtibi Branch">Echtibi Branch</option><option value="Pro Team">Pro Team</option><option value="Suhair">Suhair</option><option value="Prosas">Prosas</option><option value="Abbas Qawaed">Abbas Qawaed</option>' },
{ element: "input", type: "date" },
{ element: "input", type: "text", name: "company_name" },
{ element: "input", type: "text", name: "description" },
{ element: "input", type: "text", name: "application_number" },
{ element: "select", options: '<option value="">Select CARD/CASH BOOK/BANK</option><option value="ADCB Wafi">ADCB Wafi</option><option value="WIO Bab">WIO Bab</option><option value="Khasim CBD Debit">Khasim CBD Debit</option><option value="Service Agent Card">Service Agent Card</option><option value="Customer Card">Customer Card</option>' },
{ element: "input", type: "number" },
{ element: "input", type: "number" },
{ element: "input", type: "number" },
{ element: "input", type: "number" },
{ element: "input", type: "number" },
{ element: "input", type: "number" },
{ element: "input", type: "text" }, // Invoice field
{ element: "input", type: "number", name: "profit", readonly: true } // Profit field with read-only attribute
];
cells.forEach((cell, index) => {
const newCell = newRow.insertCell(index);
if (cell.element === "select") {
const selectElement = document.createElement("select");
selectElement.innerHTML = cell.options;
newCell.appendChild(selectElement);
} else {
const inputElement = document.createElement("input");
inputElement.type = cell.type;
inputElement.name = cell.name || '';
if (cell.readonly) {
inputElement.setAttribute("readonly", true); // Make profit field read-only
}
newCell.appendChild(inputElement);
}
});
// Attach the paste handler for new rows
const inputs = newRow.querySelectorAll('input[type="text"]');
inputs.forEach(input => {
input.addEventListener("paste", handlePaste);
});
}
// Add paste listener to existing rows when page loads
document.querySelectorAll('input[type="text"]').forEach(input => {
input.addEventListener("paste", handlePaste);
});
// Function to clear all rows (keep data in localStorage intact)
function clearTable() {
const tableBody = document.querySelector('#data-table tbody');
tableBody.innerHTML = ''; // Clear only the table rows, not localStorage data
localStorage.removeItem('mainDashboardData'); // Remove the main dashboard data from localStorage
}
// Function to submit data and redirect to second_dashboard.html
function submitData() {
const rows = document.querySelectorAll('#data-table tbody tr');
const submittedData = [];
rows.forEach(row => {
const rowData = [];
row.querySelectorAll('td').forEach((cell) => {
const input = cell.querySelector('input') || cell.querySelector('select');
rowData.push(input.value);
});
submittedData.push(rowData);
});
// Save data in localStorage for second_dashboard.html
const existingData = JSON.parse(localStorage.getItem('submittedRows')) || [];
const combinedData = existingData.concat(submittedData); // Combine old and new data
localStorage.setItem('submittedRows', JSON.stringify(combinedData));
// Redirect to second_dashboard.html
window.location.href = 'second_dashboard.html';
}
// Add paste listener to existing rows when page loads
document.querySelectorAll('input[type="text"]').forEach(input => {
input.addEventListener("paste", handlePaste);
});
// Function to load data from localStorage when the page loads
window.onload = function() {
const savedData = localStorage.getItem('mainDashboardData');
if (savedData) {
const rows = JSON.parse(savedData);
rows.forEach((rowData, index) => {
if (index > 0) {
addRow(); // Add extra rows if there is more data
}
const currentRow = document.querySelectorAll('#data-table tbody tr')[index];
rowData.forEach((value, cellIndex) => {
const cell = currentRow.querySelectorAll('td')[cellIndex];
const input = cell.querySelector('input') || cell.querySelector('select');
if (input) {
input.value = value;
}
});
});
}
};
// Function to calculate PROFIT
function calculateProfit(input) {
const row = input.closest('tr');
const agentCommission = parseFloat(row.querySelector('[name="agent_commission"]').value) || 0;
const agentFee = parseFloat(row.querySelector('[name="agent_fee"]').value) || 0;
const cusDiscount = parseFloat(row.querySelector('[name="cus_discount"]').value) || 0;
const cusServiceCharge = parseFloat(row.querySelector('[name="cus_service_charge"]').value) || 0;
const profit = agentCommission - agentFee - cusDiscount + cusServiceCharge;
row.querySelector('[name="profit"]').value = profit.toFixed(2);
}
</script>
</body>
</html>