Interactive Financial Report
Prompt
Create an interactive financial report. With charts and tables and different months. Dashboard settings and ability to edit items.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Financial Report Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<style>
body { font-family: Arial, sans-serif; background-color: #f8f9fa; }
.dashboard { max-width: 1200px; margin: auto; padding: 20px; }
.month-selector { margin-bottom: 20px; }
.editable { border: 1px solid #ddd; padding: 5px; min-width: 100px; }
.editable:hover { background-color: #f0f0f0; cursor: pointer; }
#settingsModal .form-group { margin-bottom: 10px; }
</style>
</head>
<body>
<div class="dashboard">
<h1 class="text-center">Interactive Financial Report Dashboard</h1>
<!-- Month Selector -->
<div class="month-selector text-center">
<button class="btn btn-primary" onclick="changeMonth('January')">January</button>
<button class="btn btn-primary" onclick="changeMonth('February')">February</button>
<button class="btn btn-primary" onclick="changeMonth('March')">March</button>
<button class="btn btn-secondary" data-toggle="modal" data-target="#settingsModal">Dashboard Settings</button>
</div>
<!-- Financial Table -->
<h3 id="currentMonth">Financial Data for January</h3>
<table class="table table-bordered" id="financialTable">
<thead>
<tr>
<th>Category</th>
<th>Amount</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<!-- Data will be populated here -->
</tbody>
</table>
<!-- Charts -->
<div class="row">
<div class="col-md-6">
<canvas id="lineChart" height="200"></canvas>
</div>
<div class="col-md-6">
<canvas id="pieChart" height="200"></canvas>
</div>
</div>
</div>
<!-- Settings Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Dashboard Settings</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="theme">Theme:</label>
<select id="theme" class="form-control">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
<div class="form-group">
<label for="currency">Currency Symbol:</label>
<input type="text" id="currency" class="form-control" value="$">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="applySettings()">Apply</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Sample data for different months
const financialData = {
January: [
{ category: 'Income', amount: 5000, description: 'Salary' },
{ category: 'Expenses', amount: 2000, description: 'Rent' },
{ category: 'Savings', amount: 1000, description: 'Bank' },
{ category: 'Investments', amount: 1500, description: 'Stocks' }
],
February: [
{ category: 'Income', amount: 5200, description: 'Salary + Bonus' },
{ category: 'Expenses', amount: 2100, description: 'Rent and Utilities' },
{ category: 'Savings', amount: 1100, description: 'Bank' },
{ category: 'Investments', amount: 1600, description: 'Stocks' }
],
March: [
{ category: 'Income', amount: 4800, description: 'Salary' },
{ category: 'Expenses', amount: 1900, description: 'Rent' },
{ category: 'Savings', amount: 900, description: 'Bank' },
{ category: 'Investments', amount: 1400, description: 'Stocks' }
]
};
let currentMonth = 'January';
let currency = '$';
let lineChart, pieChart;
function populateTable(month) {
const tbody = document.querySelector('#financialTable tbody');
tbody.innerHTML = '';
financialData[month].forEach((item, index) => {
const row = document.createElement('tr');
row.innerHTML = `
<td contenteditable="true" class="editable" onblur="updateData(${index}, 'category', this.innerText)">${item.category}</td>
<td contenteditable="true" class="editable" onblur="updateData(${index}, 'amount', this.innerText)">${currency}${item.amount}</td>
<td contenteditable="true" class="editable" onblur="updateData(${index}, 'description', this.innerText)">${item.description}</td>
`;
tbody.appendChild(row);
});
document.getElementById('currentMonth').innerText = `Financial Data for ${month}`;
}
function updateData(index, field, value) {
if (field === 'amount') value = parseFloat(value.replace(currency, '')) || 0;
financialData[currentMonth][index][field] = value;
updateCharts();
}
function changeMonth(month) {
currentMonth = month;
populateTable(month);
updateCharts();
}
function updateCharts() {
const data = financialData[currentMonth];
const labels = data.map(item => item.category);
const amounts = data.map(item => item.amount);
// Line Chart
if (lineChart) lineChart.destroy();
lineChart = new Chart(document.getElementById('lineChart'), {
type: 'line',
data: {
labels: labels,
datasets: [{ label: 'Amounts', data: amounts, borderColor: 'blue', fill: false }]
},
options: { responsive: true, maintainAspectRatio: false }
});
// Pie Chart
if (pieChart) pieChart.destroy();
pieChart = new Chart(document.getElementById('pieChart'), {
type: 'pie',
data: {
labels: labels,
datasets: [{ data: amounts, backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'] }]
},
options: { responsive: true, maintainAspectRatio: false }
});
}
function applySettings() {
const theme = document.getElementById('theme').value;
currency = document.getElementById('currency').value;
document.body.style.backgroundColor = theme === 'dark' ? '#343a40' : '#f8f9fa';
document.body.style.color = theme === 'dark' ? '#fff' : '#000';
$('#settingsModal').modal('hide');
populateTable(currentMonth); // Refresh table with new currency
updateCharts();
}
// Initial load
populateTable('January');
updateCharts();
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Financial Dashboard</title>
<!-- Chart.js library for drawing charts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
/* Import Google Fonts for better aesthetics */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
/* CSS Variables for easy theme customization */
:root {
--primary-color: #2c3e50; /* Dark blue-gray for sidebar, text */
--secondary-color: #3498db; /* Bright blue for accents, buttons */
--accent-color: #e67e22; /* Orange for edit actions */
--background-color: #f4f7f6; /* Light gray for page background */
--card-background: #ffffff; /* White for content cards */
--text-color: #333; /* Dark gray for general text */
--light-text-color: #7f8c8d; /* Lighter gray for secondary text */
--border-color: #ecf0f1; /* Very light gray for borders */
--success-color: #27ae60; /* Green for add/save actions */
--danger-color: #e74c3c; /* Red for delete actions */
--income-color: #2ecc71; /* Green for income figures */
--expense-color: #e74c3c; /* Red for expense figures */
}
/* Basic body styling */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background-color: var(--background-color);
color: var(--text-color);
display: flex;
min-height: 100vh; /* Full viewport height */
flex-direction: column;
overflow-x: hidden; /* Prevent horizontal scroll */
}
/* Main container for sidebar and content */
.container {
display: flex;
flex-grow: 1; /* Allows content to fill available space */
width: 100%;
}
/* Sidebar styling */
aside.sidebar {
width: 250px;
background-color: var(--primary-color);
color: white;
padding: 20px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Subtle shadow */
display: flex;
flex-direction: column;
gap: 15px;
overflow-y: auto; /* Scroll if content overflows */
flex-shrink: 0; /* Prevent sidebar from shrinking */
}
aside.sidebar h2 {
color: var(--secondary-color);
margin-top: 0;
text-align: center;
font-size: 1.5em;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
aside.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
aside.sidebar ul li {
margin-bottom: 10px;
}
aside.sidebar ul li button {
background: none;
border: none;
color: white;
padding: 12px 15px;
text-align: left;
width: 100%;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s ease;
border-radius: 5px;
}
aside.sidebar ul li button:hover,
aside.sidebar ul li button.active {
background-color: var(--secondary-color);
}
/* Form elements styling */
select, input[type="text"], input[type="number"], input[type="date"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 15px;
border: 1px solid var(--border-color);
border-radius: 5px;
box-sizing: border-box; /* Include padding in width */
background-color: var(--card-background);
color: var(--text-color);
font-size: 1em;
}
select.month-select {
width: 100%;
margin-top: 10px;
border: none;
background-color: var(--secondary-color);
color: white;
padding: 10px;
border-radius: 5px;
font-size: 1.1em;
cursor: pointer;
-webkit-appearance: none; /* Remove default arrow on select */
-moz-appearance: none;
appearance: none;
/* Custom arrow for select */
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%204%205%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M2%200L0%202h4zm0%205L0%203h4z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 8px 10px;
}
/* Main content area */
main.content {
flex-grow: 1; /* Takes remaining space */
padding: 20px;
background-color: var(--background-color);
display: flex;
flex-direction: column;
gap: 20px; /* Space between sections */
overflow-y: auto; /* Scroll if content overflows vertically */
}
/* Hidden by default, activated by JS for navigation */
.dashboard-section, .transaction-section, .add-item-section, .settings-section {
display: none;
animation: fadeIn 0.5s ease-in-out; /* Smooth transition */
}
.dashboard-section.active, .transaction-section.active, .add-item-section.active, .settings-section.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Card styling for sections and summaries */
.card {
background-color: var(--card-background);
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Soft shadow */
padding: 20px;
margin-bottom: 20px;
/* transition: all 0.3s ease; */ /* Removed to prevent redraw issues on some animations */
}
.card h3 {
color: var(--primary-color);
margin-top: 0;
margin-bottom: 15px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
}
/* Summary boxes layout */
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
gap: 20px;
margin-bottom: 20px;
}
.summary-item {
background-color: var(--background-color);
padding: 15px;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.summary-item h4 {
margin: 0 0 10px 0;
color: var(--light-text-color);
font-size: 0.9em;
text-transform: uppercase;
}
.summary-item p {
margin: 0;
font-size: 1.8em;
font-weight: 700;
color: var(--primary-color);
}
.summary-item.income p { color: var(--income-color); }
.summary-item.expenses p { color: var(--expense-color); }
.summary-item.balance p { color: var(--secondary-color); }
/* Chart layout */
.chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.chart-container {
position: relative;
height: 300px; /* Fixed height for consistent chart size */
}
/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background-color: var(--card-background);
border-radius: 8px;
overflow: hidden; /* Ensures border-radius applies to content */
}
table thead th {
background-color: var(--secondary-color);
color: white;
padding: 12px 15px;
text-align: left;
font-weight: 700;
}
table tbody tr:nth-child(even) {
background-color: var(--background-color); /* Zebra striping */
}
table tbody tr {
border-bottom: 1px solid var(--border-color);
transition: background-color 0.3s ease;
}
table tbody tr:hover {
background-color: #eef4f8; /* Light hover effect */
}
table tbody td {
padding: 10px 15px;
vertical-align: middle;
position: relative; /* For editable cells positioning */
}
/* Editable cell styling */
table tbody td[contenteditable="true"] {
background-color: #fffacd; /* Light yellow */
border: 1px solid var(--accent-color);
outline: none; /* Remove default outline */
padding: 9px 14px; /* Adjust padding due to border */
border-radius: 4px;
}
/* Action buttons in table */
.action-buttons button {
background-color: var(--secondary-color);
color: white;
border: none;
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 0.9em;
transition: background-color 0.3s ease;
margin-right: 5px;
}
.action-buttons button:hover {
background-color: #3f9efc;
}
.action-buttons button.delete {
background-color: var(--danger-color);
}
.action-buttons button.delete:hover {
background-color: #c0392b;
}
.action-buttons button.edit {
background-color: var(--accent-color);
}
.action-buttons button.edit:hover {
background-color: #d35400;
}
/* Form group styling */
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 700;
color: var(--primary-color);
}
/* Submit button styling */
button[type="submit"] {
background-color: var(--success-color);
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #2ecc71;
}
/* Responsive adjustments */
@media screen and (max-width: 768px) {
.container {
flex-direction: column; /* Stack sidebar and content */
}
aside.sidebar {
width: 100%;
padding: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
flex-direction: row; /* Buttons in a row */
justify-content: space-around;
align-items: center;
gap: 5px;
}
aside.sidebar h2, .month-selector {
display: none; /* Hide title and month selector on small screens from sidebar */
}
aside.sidebar ul {
display: flex;
flex-wrap: wrap; /* Wrap buttons if too many */
justify-content: center;
}
aside.sidebar ul li {
margin-bottom: 0; /* Remove vertical margin */
}
aside.sidebar ul li button {
padding: 8px 10px;
font-size: 0.9em;
}
main.content {
padding: 15px;
}
.summary-grid, .chart-grid {
grid-template-columns: 1fr; /* Single column layout */
}
table th, table td {
padding: 8px 10px;
font-size: 0.9em;
}
.action-buttons button {
padding: 6px 8px;
font-size: 0.8em;
}
}
</style>
</head>
<body>
<div class="container">
<aside class="sidebar">
<h2>Financial Report</h2>
<div class="month-selector">
<label for="monthSelect" style="color:white; font-size: 0.9em; margin-bottom: 5px;">Select Month:</label>
<select id="monthSelect" class="month-select"></select>
</div>
<ul>
<li><button id="navDashboard" class="active">Dashboard</button></li>
<li><button id="navTransactions">Transactions</button></li>
<li><button id="navAddItem">Add Item</button></li>
<li><button id="navSettings">Settings</button></li>
</ul>
</aside>
<main class="content">
<section id="dashboardSection" class="dashboard-section active">
<div class="card">
<h3>Monthly Summary</h3>
<div class="summary-grid">
<div class="summary-item income">
<h4>Total Income</h4>
<p id="totalIncome">$0.00</p>
</div>
<div class="summary-item expenses">
<h4>Total Expenses</h4>
<p id="totalExpenses">$0.00</p>
</div>
<div class="summary-item balance">
<h4>Net Balance</h4>
<p id="netBalance">$0.00</p>
</div>
</div>
</div>
<div class="card">
<h3>Overview Charts</h3>
<div class="chart-grid">
<div class="chart-container">
<canvas id="incomeExpensesChart"></canvas>
</div>
<div class="chart-container">
<canvas id="expenseCategoriesChart"></canvas>
</div>
</div>
</div>
</section>
<section id="transactionsSection" class="transaction-section">
<div class="card">
<h3>All Transactions</h3>
<table id="transactionsTable">
<thead>
<tr>
<th>Date</th>
<th>Category</th>
<th>Description</th>
<th>Type</th>
<th>Amount</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Transactions will be loaded here by JavaScript -->
</tbody>
</table>
</div>
</section>
<section id="addItemSection" class="add-item-section">
<div class="card">
<h3>Add/Edit Transaction</h3>
<form id="addItemForm" autocomplete="off">
<input type="hidden" id="transactionId"> <!-- Hidden field for editing existing items -->
<div class="form-group">
<label for="itemDate">Date</label>
<input type="date" id="itemDate" required>
</div>
<div class="form-group">
<label for="itemMonth">Month</label>
<select id="itemMonth" required aria-label="Transaction Month">
<!-- Options populated by JS for demonstration/fallback -->
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="Apr">April</option>
<option value="May">May</option>
<option value="Jun">June</option>
<option value="Jul">July</option>
<option value="Aug">August</option>
<option value="Sep">September</option>
<option value="Oct">October</option>
<option value="Nov">November</option>
<option value="Dec">December</option>
</select>
</div>
<div class="form-group">
<label for="itemCategory">Category</label>
<input type="text" id="itemCategory" placeholder="e.g., Groceries, Salary, Rent" required list="categorySuggestions">
<datalist id="categorySuggestions">
<option value="Salary"></option>
<option value="Rent"></option>
<option value="Utilities"></option>
<option value="Groceries"></option>
<option value="Transport"></option>
<option value="Entertainment"></option>
<option value="Food"></option>
<option value="Health"></option>
<option value="Education"></option>
<option value="Investment"></option>
<option value="Freelance"></option>
<option value="Travel"></option>
<option value="Clothing"></option>
</datalist>
</div>
<div class="form-group">
<label for="itemDescription">Description</label>
<input type="text" id="itemDescription" placeholder="Optional notes for transaction">
</div>
<div class="form-group">
<label for="itemType">Type</label>
<select id="itemType" required aria-label="Transaction Type">
<option value="Income">Income</option>
<option value="Expense">Expense</option>
</select>
</div>
<div class="form-group">
<label for="itemAmount">Amount</label>
<input type="number" id="itemAmount" step="0.01" min="0.01" required>
</div>
<button type="submit" id="addItemBtn">Add Transaction</button>
</form>
</div>
</section>
<section id="settingsSection" class="settings-section">
<div class="card">
<h3>Dashboard Settings</h3>
<form id="settingsForm">
<div class="form-group">
<label for="currencySymbol">Currency Symbol</label>
<input type="text" id="currencySymbol" value="$">
</div>
<button type="submit">Save Settings</button>
</form>
</div>
</section>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- Data & State Management ---
// Sample financial data. In a real app, this would come from a backend.
let financialData = [
{ id: 1, month: 'Jan', category: 'Salary', type: 'Income', amount: 5000, date: '2023-01-05', description: 'Monthly salary' },
{ id: 2, month: 'Jan', category: 'Rent', type: 'Expense', amount: 1200, date: '2023-01-01', description: 'January rent' },
{ id: 3, month: 'Jan', category: 'Groceries', type: 'Expense', amount: 300, date: '2023-01-10', description: 'Weekly groceries' },
{ id: 4, month: 'Jan', category: 'Utilities', type: 'Expense', amount: 150, date: '2023-01-15', description: 'Electricity & Water' },
{ id: 5, month: 'Jan', category: 'Freelance', type: 'Income', amount: 800, date: '2023-01-20', description: 'Project payment' },
{ id: 6, month: 'Feb', category: 'Salary', type: 'Income', amount: 5000, date: '2023-02-05', description: 'Monthly salary' },
{ id: 7, month: 'Feb', category: 'Rent', type: 'Expense', amount: 1200, date: '2023-02-01', description: 'February rent' },
{ id: 8, month: 'Feb', category: 'Groceries', type: 'Expense', amount: 320, date: '2023-02-12', description: 'Weekly groceries' },
{ id: 9, month: 'Feb', category: 'Electricity', type: 'Expense', amount: 80, date: '2023-02-18', description: 'Electricity bill' },
{ id: 10, month: 'Mar', category: 'Salary', type: 'Income', amount: 5000, date: '2023-03-05', description: 'Monthly salary' },
{ id: 11, month: 'Mar', category: 'Rent', type: 'Expense', amount: 1200, date: '2023-03-01', description: 'March rent' },
{ id: 12, month: 'Mar', category: 'Transport', type: 'Expense', amount: 100, date: '2023-03-08', description: 'Bus pass' },
{ id: 13, month: 'Mar', category: 'Entertainment', type: 'Expense', amount: 200, date: '2023-03-25', description: 'Concert tickets' },
{ id: 14, month: 'Apr', category: 'Salary', type: 'Income', amount: 5200, date: '2023-04-05', description: 'Monthly salary + bonus' },
{ id: 15, month: 'Apr', category: 'Rent', type: 'Expense', amount: 1200, date: '2023-04-01', description: 'April rent' },
{ id: 16, month: 'Apr', category: 'Groceries', type: 'Expense', amount: 350, date: '2023-04-10', description: 'Weekly groceries' },
{ id: 17, month: 'May', category: 'Salary', type: 'Income', amount: 5000, date: '2023-05-05', description: 'Monthly salary' },
{ id: 18, month: 'May', category: 'Rent', type: 'Expense', amount: 1200, date: '2023-05-01', description: 'May rent' },
{ id: 19, month: 'May', category: 'Travel', type: 'Expense', amount: 500, date: '2023-05-20', description: 'Weekend trip' },
{ id: 20, month: 'Jun', category: 'Freelance', type: 'Income', amount: 1500, date: '2023-06-15', description: 'Big project payment' },
{ id: 21, month: 'Jun', category: 'Rent', type: 'Expense', amount: 1200, date: '2023-06-01', description: 'June rent' },
{ id: 22, month: 'Jun', category: 'Clothing', type: 'Expense', amount: 250, date: '2023-06-10', description: 'New clothes' },
];
let currentMonth = ''; // Holds the currently selected month for filtering
// Determine the next available ID for new transactions
let nextTransactionId = Math.max(0, ...financialData.map(d => d.id)) + 1;
// Dashboard settings
const settings = {
currencySymbol: '$',
};
// Chart.js instances
let incomeExpensesChart;
let expenseCategoriesChart;
// --- DOM Elements References ---
const monthSelect = document.getElementById('monthSelect');
const navButtons = {
dashboard: document.getElementById('navDashboard'),
transactions: document.getElementById('navTransactions'),
addItem: document.getElementById('navAddItem'),
settings: document.getElementById('navSettings')
};
const sections = {
dashboard: document.getElementById('dashboardSection'),
transactions: document.getElementById('transactionsSection'),
addItem: document.getElementById('addItemSection'),
settings: document.getElementById('settingsSection')
};
// Dashboard summary elements
const totalIncomeEl = document.getElementById('totalIncome');
const totalExpensesEl = document.getElementById('totalExpenses');
const netBalanceEl = document.getElementById('netBalance');
// Transaction table elements
const transactionsTableBody = document.querySelector('#transactionsTable tbody');
// Add/Edit Item Form elements
const addItemForm = document.getElementById('addItemForm');
const transactionIdInput = document.getElementById('transactionId');
const itemDateInput = document.getElementById('itemDate');
const itemMonthSelect = document.getElementById('itemMonth');
const itemCategoryInput = document.getElementById('itemCategory');
const itemDescriptionInput = document.getElementById('itemDescription');
const itemTypeSelect = document.getElementById('itemType');
const itemAmountInput = document.getElementById('itemAmount');
const addItemBtn = document.getElementById('addItemBtn');
// Settings Form elements
const settingsForm = document.getElementById('settingsForm');
const currencySymbolInput = document.getElementById('currencySymbol');
// --- Helper Functions ---
/**
* Formats a number as currency using the current currency symbol.
* @param {number} amount - The numeric amount.
* @returns {string} Formatted currency string.
*/
function formatCurrency(amount) {
return `${settings.currencySymbol}${amount.toFixed(2)}`;
}
/**
* Populates the month selection dropdown with unique months from financialData.
* It sorts months chronologically and defaults to the latest month.
*/
function populateMonthSelect() {
const monthOrder = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const availableMonths = [...new Set(financialData.map(d => d.month))].sort((a, b) => {
return monthOrder.indexOf(a) - monthOrder.indexOf(b);
});
monthSelect.innerHTML = ''; // Clear previous options
if (availableMonths.length === 0) {
// If no data, provide current month as an option
const today = new Date();
const currentShortMonth = monthOrder[today.getMonth()];
availableMonths.push(currentShortMonth);
}
availableMonths.forEach(month => {
const option = document.createElement('option');
option.value = month;
option.textContent = getFullMonthName(month);
monthSelect.appendChild(option);
});
// Set default to the latest month in data or current date's month
currentMonth = availableMonths[availableMonths.length - 1];
monthSelect.value = currentMonth;
}
/**
* Converts a short month code (e.g., 'Jan') to its full name (e.g., 'January').
* @param {string} shortMonth - The short month code.
* @returns {string} The full month name.
*/
function getFullMonthName(shortMonth) {
const months = {
'Jan': 'January', 'Feb': 'February', 'Mar': 'March', 'Apr': 'April', 'May': 'May', 'Jun': 'June',
'Jul': 'July', 'Aug': 'August', 'Sep': 'September', 'Oct': 'October', 'Nov': 'November', 'Dec': 'December'
};
return months[shortMonth] || shortMonth;
}
/**
* Extracts the short month code (e.g., 'Jan') from a date string (YYYY-MM-DD).
* @param {string} dateString - The date in YYYY-MM-DD format.
* @returns {string} The short month code.
*/
function getShortMonthName(dateString) {
const date = new Date(dateString);
const shortMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return shortMonths[date.getMonth()];
}
/**
* Filters the financial data for a specific month.
* @param {string} month - The short month code to filter by.
* @returns {Array<Object>} An array of transactions for the specified month.
*/
function filterDataByMonth(month) {
return financialData.filter(d => d.month === month);
}
/**
* Calculates total income, total expenses, and net balance for given data.
* @param {Array<Object>} data - An array of financial transactions.
* @returns {Object} An object containing totalIncome, totalExpenses, and netBalance.
*/
function calculateSummary(data) {
let totalIncome = 0;
let totalExpenses = 0;
data.forEach(item => {
if (item.type === 'Income') {
totalIncome += item.amount;
} else if (item.type === 'Expense') {
totalExpenses += item.amount;
}
});
const netBalance = totalIncome - totalExpenses;
return { totalIncome, totalExpenses, netBalance };
}
/**
* Aggregates expenses by category.
* @param {Array<Object>} data - An array of financial transactions.
* @returns {Object} An object where keys are categories and values are total amounts.
*/
function getExpenseCategories(data) {
const categories = {};
data.filter(d => d.type === 'Expense').forEach(item => {
categories[item.category] = (categories[item.category] || 0) + item.amount;
});
return categories;
}
/**
* Retrieves a CSS variable value from the root.
* @param {string} varName - The name of the CSS variable (e.g., 'primary-color').
* @returns {string} The value of the CSS variable.
*/
function varInCss(varName) {
return getComputedStyle(document.documentElement).getPropertyValue(`--${varName}`).trim();
}
// --- UI Rendering Functions ---
/**
* Displays a specific content section and updates navigation button active state.
* @param {string} sectionId - The ID of the section to show (e.g., 'dashboard', 'transactions').
*/
function showSection(sectionId) {
// Hide all sections
Object.values(sections).forEach(section => section.classList.remove('active'));
// Show the target section
sections[sectionId].classList.add('active');
// Update active state of navigation buttons
Object.values(navButtons).forEach(btn => btn.classList.remove('active'));
navButtons[sectionId].classList.add('active');
// If navigating to 'Add Item', reset the form
if (sectionId === 'addItem') {
resetAddItemForm();
}
}
/**
* Updates the dashboard summary (total income, expenses, balance) and charts.
*/
function updateDashboard() {
const monthlyData = filterDataByMonth(currentMonth);
const summary = calculateSummary(monthlyData);
totalIncomeEl.textContent = formatCurrency(summary.totalIncome);
totalExpensesEl.textContent = formatCurrency(summary.totalExpenses);
netBalanceEl.textContent = formatCurrency(summary.netBalance);
// Update Charts
renderIncomeExpensesChart(summary.totalIncome, summary.totalExpenses);
renderExpenseCategoriesChart(getExpenseCategories(monthlyData));
}
/**
* Renders the transaction table with data for the `currentMonth`.
* Includes inline editing and action buttons.
*/
function updateTransactionsTable() {
const monthlyData = filterDataByMonth(currentMonth);
transactionsTableBody.innerHTML = ''; // Clear existing rows
// Sort by date before rendering
monthlyData.sort((a, b) => new Date(a.date) - new Date(b.date)).forEach(item => {
const row = transactionsTableBody.insertRow();
row.dataset.id = item.id; // Store ID for easy lookup
row.innerHTML = `
<td contenteditable="true" data-field="date">${item.date}</td>
<td contenteditable="true" data-field="category">${item.category}</td>
<td contenteditable="true" data-field="description">${item.description || ''}</td>
<td contenteditable="true" data-field="type">${item.type}</td>
<td contenteditable="true" data-field="amount">${item.amount.toFixed(2)}</td>
<td class="action-buttons">
<button class="edit" data-id="${item.id}">Edit</button>
<button class="delete" data-id="${item.id}">Delete</button>
</td>
`;
// Add event listeners for inline editing (blur and Enter key)
row.querySelectorAll('[contenteditable="true"]').forEach(cell => {
cell.addEventListener('blur', (e) => handleCellEdit(e, item.id, e.target.dataset.field));
cell.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Prevent new line
e.target.blur(); // Trigger blur to save changes
}
});
});
});
}
/**
* Renders or updates the Income vs. Expenses bar chart.
* @param {number} income - Total income figure.
* @param {number} expenses - Total expenses figure.
*/
function renderIncomeExpensesChart(income, expenses) {
const ctx = document.getElementById('incomeExpensesChart').getContext('2d');
if (incomeExpensesChart) {
incomeExpensesChart.destroy(); // Destroy existing chart instance to prevent conflicts
}
incomeExpensesChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Income', 'Expenses'],
datasets: [{
label: `Amount (${settings.currencySymbol})`,
data: [income, expenses],
backgroundColor: [
varInCss('income-color'),
varInCss('expense-color')
],
borderColor: [
varInCss('income-color'),
varInCss('expense-color')
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
title: {
display: true,
text: 'Income vs. Expenses',
font: { size: 16, weight: 'bold' }
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return formatCurrency(value); // Format y-axis labels as currency
}
}
}
}
}
});
}
/**
* Renders or updates the Expense Categories doughnut chart.
* @param {Object} categoriesData - An object with category names as keys and amounts as values.
*/
function renderExpenseCategoriesChart(categoriesData) {
const ctx = document.getElementById('expenseCategoriesChart').getContext('2d');
const labels = Object.keys(categoriesData);
const data = Object.values(categoriesData);
// Define a set of appealing colors
const backgroundColors = [
'#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#d35400', '#c0392b', '#2980b9', '#8e44ad', '#27ae60', '#f1c40f', '#e67e22', '#7f8c8d'
];
if (expenseCategoriesChart) {
expenseCategoriesChart.destroy(); // Destroy existing chart instance
}
expenseCategoriesChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: backgroundColors.slice(0, labels.length) // Use enough colors for categories
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right', // Place legend on the right
align: 'start', // Align legend items to the start
labels: {
boxWidth: 20
}
},
title: {
display: true,
text: 'Expense Categories',
font: { size: 16, weight: 'bold' }
},
}
}
});
}
// --- Event Handlers ---
/**
* Handles inline editing of table cells when a cell loses focus (blur event).
* Performs basic validation and updates `financialData`.
* @param {Event} event - The blur event object.
* @param {number} id - The ID of the transaction being edited.
* @param {string} field - The data field being edited (e.g., 'date', 'amount').
*/
function handleCellEdit(event, id, field) {
let newValue = event.target.textContent.trim();
const itemIndex = financialData.findIndex(item => item.id === id);
if (itemIndex > -1) {
let originalValue = financialData[itemIndex][field];
let parseError = false;
// Type conversion and validation based on field
if (field === 'amount') {
newValue = parseFloat(newValue);
if (isNaN(newValue) || newValue < 0) {
alert('Amount must be a positive number. Reverting to original value.');
parseError = true;
}
} else if (field === 'date') {
// Validate YYYY-MM-DD format
if (!/^\d{4}-\d{2}-\d{2}$/.test(newValue)) {
alert('Date must be in YYYY-MM-DD format (e.g., 2023-01-31). Reverting to original value.');
parseError = true;
} else {
// Automatically update the 'month' field based on new date
financialData[itemIndex].month = getShortMonthName(newValue);
}
} else if (field === 'type' && !['Income', 'Expense'].includes(newValue)) {
alert('Type must be "Income" or "Expense". Reverting to original value.');
parseError = true;
}
if (parseError) {
// Revert the cell content to the original value if validation fails
event.target.textContent = (typeof originalValue === 'number') ? originalValue.toFixed(2) : originalValue;
return;
}
// Only update and re-render if the value has actually changed
if (financialData[itemIndex][field] !== newValue) {
financialData[itemIndex][field] = newValue;
updateUI(); // Re-render affected parts of the UI
console.log(`Item ${id} updated: ${field} = ${newValue}`);
}
}
}
/**
* Handles form submission for adding or updating a transaction.
* @param {Event} event - The form submit event.
*/
function handleAddItem(event) {
event.preventDefault();
const id = transactionIdInput.value ? parseInt(transactionIdInput.value) : null;
const date = itemDateInput.value;
// Month is derived from the date to ensure consistency
const month = getShortMonthName(date);
const category = itemCategoryInput.value.trim();
const description = itemDescriptionInput.value.trim();
const type = itemTypeSelect.value;
const amount = parseFloat(itemAmountInput.value);
// Basic client-side validation
if (!date || !category || !type || isNaN(amount) || amount <= 0) {
alert('Please ensure Date, Category, Type, and a positive Amount are filled.');
return;
}
if (id) {
// Edit existing transaction
const itemIndex = financialData.findIndex(item => item.id === id);
if (itemIndex > -1) {
financialData[itemIndex] = { ...financialData[itemIndex], date, month, category, description, type, amount };
alert('Transaction updated successfully!');
}
} else {
// Add new transaction
const newItem = {
id: nextTransactionId++,
date,
month,
category,
description,
type,
amount
};
financialData.push(newItem);
alert('Transaction added successfully!');
}
populateMonthSelect(); // Month might be new or data density changed
updateUI(); // Re-render the dashboard and tables
resetAddItemForm(); // Clear form for next entry
showSection('transactions'); // Navigate to transactions tab to see the change
}
/**
* Resets the Add/Edit Transaction form to its initial state.
*/
function resetAddItemForm() {
addItemForm.reset();
transactionIdInput.value = ''; // Clear hidden ID field
addItemBtn.textContent = 'Add Transaction'; // Change button text
// Set default date to today
const today = new Date();
const year = today.getFullYear();
const month = (today.getMonth() + 1).toString().padStart(2, '0');
const day = today.getDate().toString().padStart(2, '0');
const defaultDate = `${year}-${month}-${day}`;
itemDateInput.value = defaultDate;
itemMonthSelect.value = getShortMonthName(defaultDate); // and corresponding month
}
/**
* Fills the Add/Edit Transaction form with data for a specific transaction
* to allow editing.
* @param {number} id - The ID of the transaction to edit.
*/
function editTransaction(id) {
const item = financialData.find(d => d.id === id);
if (item) {
transactionIdInput.value = item.id;
itemDateInput.value = item.date;
itemMonthSelect.value = item.month; // Pre-select month in form
itemCategoryInput.value = item.category;
itemDescriptionInput.value = item.description || '';
itemTypeSelect.value = item.type;
itemAmountInput.value = item.amount;
addItemBtn.textContent = 'Update Transaction'; // Change button text
showSection('addItem'); // Navigate to add item form
}
}
/**
* Deletes a transaction from `financialData` and re-renders the UI.
* @param {number} id - The ID of the transaction to delete.
*/
function deleteTransaction(id) {
if (confirm('Are you sure you want to delete this transaction?')) {
financialData = financialData.filter(item => item.id !== id);
populateMonthSelect(); // Re-evaluate available months, as one might become empty
updateUI(); // Re-render
alert('Transaction deleted.');
}
}
/**
* Handles saving dashboard settings (e.g., currency symbol).
* @param {Event} event - The form submit event.
*/
function handleSettingsSave(event) {
event.preventDefault();
settings.currencySymbol = currencySymbolInput.value.trim();
alert('Settings saved!');
updateUI(); // Re-render the dashboard to reflect new currency symbol
}
// --- Main Initialization ---
/**
* A master function to trigger all UI updates.
*/
function updateUI() {
updateDashboard();
updateTransactionsTable();
}
/**
* Initializes the dashboard: sets up event listeners, populates initial data,
* and renders the default view.
*/
function init() {
// Set initial currency symbol in settings form
currencySymbolInput.value = settings.currencySymbol;
populateMonthSelect(); // Fill month dropdown with existing data months
// Event Listeners for month selection
monthSelect.addEventListener('change', (e) => {
currentMonth = e.target.value;
updateUI(); // Update UI when month changes
});
// Event Listeners for sidebar navigation
navButtons.dashboard.addEventListener('click', () => showSection('dashboard'));
navButtons.transactions.addEventListener('click', () => showSection('transactions'));
navButtons.addItem.addEventListener('click', () => showSection('addItem'));
navButtons.settings.addEventListener('click', () => showSection('settings'));
// Event Listener for transaction table action buttons (delegated)
transactionsTableBody.addEventListener('click', (e) => {
const target = e.target;
if (target.classList.contains('edit')) {
editTransaction(parseInt(target.dataset.id));
} else if (target.classList.contains('delete')) {
deleteTransaction(parseInt(target.dataset.id));
}
});
// Event Listeners for forms
addItemForm.addEventListener('submit', handleAddItem);
settingsForm.addEventListener('submit', handleSettingsSave);
// Initial UI setup
showSection('dashboard'); // Start on the dashboard view
resetAddItemForm(); // Set default date for add item form
updateUI(); // Perform initial data rendering
}
init(); // Call the initialization function when DOM is ready
});
</script>
</body>
</html>
```Drag to resize
Below is a complete HTML code block that creates an interactive financial report dashboard with charts, tables, multiple months, and the ability to edit items. I'm using Chart.js for charts (via a CDN) and Tailwind CSS for styling (also via a CDN). Everything is self-contained in a single HTML file.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Financial Report Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.chart-container {
max-height: 300px;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="container mx-auto p-4">
<h1 class="text-3xl font-bold text-center mb-6">Financial Report Dashboard</h1>
<!-- Month Selection -->
<div class="mb-6">
<label for="monthSelect" class="block text-lg font-medium text-gray-700 mb-2">Select Month</label>
<select id="monthSelect" class="w-full p-2 border rounded-md focus:ring focus:ring-blue-300">
<option value="0">January 2023</option>
<option value="1">February 2023</option>
<option value="2">March 2023</option>
</select>
</div>
<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold text-gray-700">Total Income</h2>
<p id="totalIncome" class="text-2xl font-bold text-green-600">$10,000</p>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold text-gray-700">Total Expenses</h2>
<p id="totalExpenses" class="text-2xl font-bold text-red-600">$7,500</p>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold text-gray-700">Net Profit</h2>
<p id="netProfit" class="text-2xl font-bold text-blue-600">$2,500</p>
</div>
</div>
<!-- Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
<div class="bg-white p-4 rounded-lg shadow chart-container">
<h2 class="text-xl font-semibold mb-2 text-gray-700">Income vs Expenses</h2>
<canvas id="barChart"></canvas>
</div>
<div class="bg-white p-4 rounded-lg shadow chart-container">
<h2 class="text-xl font-semibold mb-2 text-gray-700">Category Breakdown</h2>
<canvas id="pieChart"></canvas>
</div>
</div>
<!-- Data Table with Edit Functionality -->
<div class="bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold mb-2 text-gray-700">Transaction Details</h2>
<table id="transactionTable" class="w-full border-collapse">
<thead>
<tr class="bg-gray-200">
<th class="p-2 text-left">Description</th>
<th class="p-2 text-left">Category</th>
<th class="p-2 text-left">Amount</th>
<th class="p-2 text-left">Type</th>
<th class="p-2 text-left">Actions</th>
</tr>
</thead>
<tbody id="transactionBody"></tbody>
</table>
<button id="addItemBtn" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Add New Item</button>
</div>
</div>
<!-- Modal for Adding/Editing Items -->
<div id="modal" class="fixed inset-0 bg-gray-800 bg-opacity-50 hidden flex items-center justify-center">
<div class="bg-white p-6 rounded-lg shadow-lg w-96">
<h2 id="modalTitle" class="text-xl font-semibold mb-4">Add/Edit Item</h2>
<form id="itemForm">
<div class="mb-4">
<label for="description" class="block text-gray-700 mb-1">Description</label>
<input type="text" id="description" class="w-full p-2 border rounded" required>
</div>
<div class="mb-4">
<label for="category" class="block text-gray-700 mb-1">Category</label>
<input type="text" id="category" class="w-full p-2 border rounded" required>
</div>
<div class="mb-4">
<label for="amount" class="block text-gray-700 mb-1">Amount ($)</label>
<input type="number" id="amount" class="w-full p-2 border rounded" required>
</div>
<div class="mb-4">
<label for="type" class="block text-gray-700 mb-1">Type</label>
<select id="type" class="w-full p-2 border rounded" required>
<option value="income">Income</option>
<option value="expense">Expense</option>
</select>
</div>
<button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Save</button>
<button type="button" id="closeModal" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 ml-2">Close</button>
</form>
</div>
</div>
<script>
// Financial Data for Multiple Months (Demo Data)
const financialData = [
{
month: "January 2023",
income: 10000,
expenses: 7500,
transactions: [
{ id: 1, description: "Salary", category: "Job", amount: 8000, type: "income" },
{ id: 2, description: "Freelance", category: "Side Hustle", amount: 2000, type: "income" },
{ id: 3, description: "Rent", category: "Housing", amount: 3000, type: "expense" },
{ id: 4, description: "Groceries", category: "Food", amount: 1000, type: "expense" },
{ id: 5, description: "Utilities", category: "Bills", amount: 1500, type: "expense" },
{ id: 6, description: "Entertainment", category: "Leisure", amount: 2000, type: "expense" }
]
},
{
month: "February 2023",
income: 9500,
expenses: 7200,
transactions: [
{ id: 1, description: "Salary", category: "Job", amount: 8000, type: "income" },
{ id: 2, description: "Bonus", category: "Job", amount: 1500, type: "income" },
{ id: 3, description: "Rent", category: "Housing", amount: 3000, type: "expense" },
{ id: 4, description: "Groceries", category: "Food", amount: 900, type: "expense" },
{ id: 5, description: "Utilities", category: "Bills", amount: 1300, type: "expense" },
{ id: 6, description: "Entertainment", category: "Leisure", amount: 2000, type: "expense" }
]
},
{
month: "March 2023",
income: 11000,
expenses: 7800,
transactions: [
{ id: 1, description: "Salary", category: "Job", amount: 8000, type: "income" },
{ id: 2, description: "Freelance", category: "Side Hustle", amount: 3000, type: "income" },
{ id: 3, description: "Rent", category: "Housing", amount: 3000, type: "expense" },
{ id: 4, description: "Groceries", category: "Food", amount: 1100, type: "expense" },
{ id: 5, description: "Utilities", category: "Bills", amount: 1400, type: "expense" },
{ id: 6, description: "Entertainment", category: "Leisure", amount: 2300, type: "expense" }
]
}
];
// DOM Elements
const monthSelect = document.getElementById('monthSelect');
const totalIncomeEl = document.getElementById('totalIncome');
const totalExpensesEl = document.getElementById('totalExpenses');
const netProfitEl = document.getElementById('netProfit');
const transactionBody = document.getElementById('transactionBody');
const addItemBtn = document.getElementById('addItemBtn');
const modal = document.getElementById('modal');
const itemForm = document.getElementById('itemForm');
const closeModalBtn = document.getElementById('closeModal');
let editIndex = null;
// Charts
let barChart, pieChart;
function initCharts(data) {
if (barChart) barChart.destroy();
if (pieChart) pieChart.destroy();
// Bar Chart (Income vs Expenses)
const barCtx = document.getElementById('barChart').getContext('2d');
barChart = new Chart(barCtx, {
type: 'bar',
data: {
labels: ['Income', 'Expenses'],
datasets: [{
label: 'Amount ($)',
data: [data.income, data.expenses],
backgroundColor: ['#34D399', '#F87171'],
}]
},
options: {
scales: { y: { beginAtZero: true } },
responsive: true,
maintainAspectRatio: false
}
});
// Pie Chart (Category Breakdown for Expenses)
const pieCtx = document.getElementById('pieChart').getContext('2d');
const expenseCategories = data.transactions.filter(t => t.type === 'expense')
.reduce((acc, t) => {
acc[t.category] = (acc[t.category] || 0) + t.amount;
return acc;
}, {});
pieChart = new Chart(pieCtx, {
type: 'pie',
data: {
labels: Object.keys(expenseCategories),
datasets: [{
label: 'Expenses by Category ($)',
data: Object.values(expenseCategories),
backgroundColor: ['#F87171', '#FBBF24', '#34D399', '#60A5FA'],
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
// Update UI based on selected month
function updateDashboard() {
const monthIndex = parseInt(monthSelect.value);
const data = financialData[monthIndex];
totalIncomeEl.textContent = `$${data.income.toLocaleString()}`;
totalExpensesEl.textContent = `$${data.expenses.toLocaleString()}`;
netProfitEl.textContent = `$${(data.income - data.expenses).toLocaleString()}`;
transactionBody.innerHTML = '';
data.transactions.forEach((item, index) => {
const row = document.createElement('tr');
row.innerHTML = `
<td class="p-2 border">${item.description}</td>
<td class="p-2 border">${item.category}</td>
<td class="p-2 border">$${item.amount.toLocaleString()}</td>
<td class="p-2 border">${item.type}</td>
<td class="p-2 border">
<button onclick="editItem(${index})" class="bg-yellow-500 text-white px-2 py-1 rounded hover:bg-yellow-600">Edit</button>
<button onclick="deleteItem(${index})" class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600 ml-2">Delete</button>
</td>
`;
transactionBody.appendChild(row);
});
initCharts(data);
}
// Modal Functions
function openModal() {
modal.classList.remove('hidden');
}
function closeModal() {
modal.classList.add('hidden');
itemForm.reset();
editIndex = null;
}
// Add or Edit Item
itemForm.addEventListener('submit', (e) => {
e.preventDefault();
const monthIndex = parseInt(monthSelect.value);
const newItem = {
id: editIndex !== null ? financialData[monthIndex].transactions[editIndex].id : Date.now(),
description: document.getElementById('description').value,
category: document.getElementById('category').value,
amount: parseFloat(document.getElementById('amount').value),
type: document.getElementById('type').value
};
if (editIndex !== null) {
financialData[monthIndex].transactions[editIndex] = newItem;
} else {
financialData[monthIndex].transactions.push(newItem);
}
updateTotals(monthIndex);
updateDashboard();
closeModal();
});
// Edit Item
function editItem(index) {
editIndex = index;
const monthIndex = parseInt(monthSelect.value);
const item = financialData[monthIndex].transactions[index];
document.getElementById('description').value = item.description;
document.getElementById('category').value = item.category;
document.getElementById('amount').value = item.amount;
document.getElementById('type').value = item.type;
openModal();
}
// Delete Item
function deleteItem(index) {
if (confirm('Are you sure you want to delete this item?')) {
const monthIndex = parseInt(monthSelect.value);
financialData[monthIndex].transactions.splice(index, 1);
updateTotals(monthIndex);
updateDashboard();
}
}
// Update Totals for a Month
function updateTotals(monthIndex) {
const transactions = financialData[monthIndex].transactions;
const income = transactions.filter(t => t.type === 'income').reduce((sum, t) => sum + t.amount, 0);
const expenses = transactions.filter(t => t.type === 'expense').reduce((sum, t) => sum + t.amount, 0);
financialData[monthIndex].income = income;
financialData[monthIndex].expenses = expenses;
}
// Event Listeners
monthSelect.addEventListener('change', updateDashboard);
addItemBtn.addEventListener('click', openModal);
closeModalBtn.addEventListener('click', closeModal);
// Initialize Dashboard
updateDashboard();
</script>
</body>
</html>
```
This code creates a fully interactive financial report dashboard with the following features:
- **Month Selection**: A dropdown to switch between different months (January to March 2023 as demo data).
- **Summary Cards**: Display total income, expenses, and net profit for the selected month.
- **Charts**: A bar chart for income vs. expenses and a pie chart for expense breakdown by category, using Chart.js.
- **Transaction Table**: Lists all transactions with options to edit or delete each item.
- **Add/Edit Functionality**: A modal form to add new items or edit existing ones, updating the totals and charts dynamically.
- **Responsive Design**: Styled with Tailwind CSS for a clean, modern look that works on various devices.
- **Full Data Management**: Tracks and updates financial data for each month, recalculating totals when items are added, edited, or deleted.
The entire application runs client-side with no external dependencies beyond the Chart.js and Tailwind CSS CDNs included in the code. You can open this HTML file in a browser to see and interact with the dashboard.Drag to resize
Here's a comprehensive interactive financial report dashboard using HTML, CSS, and JavaScript with Chart.js and DataTables:
```html
<!DOCTYPE html>
<html>
<head>
<title>Financial Report Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<style>
.dashboard-container {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.chart-container {
height: 300px;
margin-bottom: 20px;
}
.edit-modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
z-index: 1000;
}
</style>
</head>
<body>
<div class="dashboard-container">
<h1 class="mb-4">Financial Report Dashboard</h1>
<!-- Dashboard Settings -->
<div class="card mb-4">
<div class="card-body">
<h5>Dashboard Settings</h5>
<div class="row g-3">
<div class="col-md-4">
<label class="form-label">Select Month</label>
<select id="monthFilter" class="form-select">
<option value="all">All Months</option>
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label">Category Filter</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Revenue" checked>
<label class="form-check-label">Revenue</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Expenses" checked>
<label class="form-check-label">Expenses</label>
</div>
</div>
<div class="col-md-4">
<button id="applyFilters" class="btn btn-primary mt-4">Apply Filters</button>
</div>
</div>
</div>
</div>
<!-- Charts -->
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<h5>Monthly Trend</h5>
<div class="chart-container">
<canvas id="monthlyTrend"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5>Category Breakdown</h5>
<div class="chart-container">
<canvas id="categoryBreakdown"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- Transactions Table -->
<div class="card mt-4">
<div class="card-body">
<h5>Transactions</h5>
<table id="transactionsTable" class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Category</th>
<th>Amount</th>
<th>Month</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Sample Data -->
<tr data-month="Jan" data-category="Revenue">
<td>2023-01-05</td>
<td>Client Payment</td>
<td>Revenue</td>
<td>$5,000</td>
<td>Jan</td>
<td><button class="btn btn-sm btn-edit">Edit</button></td>
</tr>
<tr data-month="Feb" data-category="Expenses">
<td>2023-02-12</td>
<td>Office Rent</td>
<td>Expenses</td>
<td>$2,000</td>
<td>Feb</td>
<td><button class="btn btn-sm btn-edit">Edit</button></td>
</tr>
<!-- Add more sample rows -->
</tbody>
</table>
</div>
</div>
</div>
<!-- Edit Modal -->
<div id="editModal" class="edit-modal">
<h5>Edit Transaction</h5>
<form id="editForm">
<input type="hidden" id="editIndex">
<div class="mb-3">
<label class="form-label">Description</label>
<input type="text" class="form-control" id="editDescription">
</div>
<div class="mb-3">
<label class="form-label">Category</label>
<select id="editCategory" class="form-select">
<option value="Revenue">Revenue</option>
<option value="Expenses">Expenses</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Amount</label>
<input type="number" class="form-control" id="editAmount">
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" onclick="closeEditModal()">Cancel</button>
</form>
</div>
<script>
// Sample Data
let transactions = [
{ date: '2023-01-05', description: 'Client Payment', category: 'Revenue', amount: 5000, month: 'Jan' },
{ date: '2023-02-12', description: 'Office Rent', category: 'Expenses', amount: 2000, month: 'Feb' },
// Add more sample data
];
// Initialize Charts
let monthlyChart, categoryChart;
function initCharts() {
// Monthly Trend Chart
const monthlyCtx = document.getElementById('monthlyTrend').getContext('2d');
monthlyChart = new Chart(monthlyCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Monthly Total',
data: [5000, 2000, 0],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: { responsive: true }
});
// Category Breakdown Chart
const categoryCtx = document.getElementById('categoryBreakdown').getContext('2d');
categoryChart = new Chart(categoryCtx, {
type: 'bar',
data: {
labels: ['Revenue', 'Expenses'],
datasets: [{
label: 'Category Total',
data: [5000, 2000],
backgroundColor: ['#4CAF50', '#F44336']
}]
},
options: { responsive: true }
});
}
// Initialize DataTable
let dataTable;
function initTable() {
dataTable = $('#transactionsTable').DataTable({
paging: true,
searching: true,
ordering: true
});
}
// Update Dashboard
function updateDashboard() {
// Update charts
// Update table
}
// Edit Modal Functions
function openEditModal(index) {
const transaction = transactions[index];
$('#editIndex').val(index);
$('#editDescription').val(transaction.description);
$('#editCategory').val(transaction.category);
$('#editAmount').val(transaction.amount);
$('#editModal').show();
}
function closeEditModal() {
$('#editModal').hide();
}
// Event Listeners
$(document).ready(function() {
initCharts();
initTable();
// Edit buttons
$('#transactionsTable').on('click', '.btn-edit', function() {
const rowIndex = dataTable.row($(this).closest('tr')).index();
openEditModal(rowIndex);
});
// Save edit
$('#editForm').submit(function(e) {
e.preventDefault();
// Update transaction data
closeEditModal();
updateDashboard();
});
// Filter controls
$('#applyFilters').click(updateDashboard);
});
</script>
</body>
</html>
```
This code creates a responsive dashboard with:
1. **Interactive Charts**:
- Monthly trend line chart
- Category breakdown bar chart
- Both charts update based on filters
2. **Data Table**:
- Sortable and searchable transactions table
- Edit buttons for each row
- DataTable.js integration
3. **Dashboard Settings**:
- Month filter dropdown
- Category checkboxes
- Apply filters button
4. **Edit Functionality**:
- Modal popup for editing transactions
- Form validation and submission
- Real-time updates to charts and tables
5. **Responsive Design**:
- Bootstrap grid layout
- Mobile-friendly charts
- Adaptive table display
To use this dashboard:
1. Save as an HTML file
2. Open in a modern web browser
3. Use the filters to analyze different time periods
4. Click "Edit" buttons to modify transactions
5. The charts and table will update automatically
You can customize the sample data, add more categories, or enhance the styling by modifying the CSS. The charts can be further customized by adjusting the Chart.js configuration options.Drag to resize
Here's a complete interactive financial dashboard with charts, tables, and editing capabilities:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Financial Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.card {
margin-bottom: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-header {
background-color: #f8f9fa;
border-bottom: 1px solid #eee;
font-weight: 600;
}
.setting-icon {
cursor: pointer;
float: right;
font-size: 1.2rem;
}
.editable {
cursor: pointer;
}
.settings-panel {
display: none;
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
margin-top: 10px;
}
.month-selector {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container-fluid mt-3">
<h1 class="text-center mb-4">Financial Dashboard</h1>
<div class="row month-selector">
<div class="col-md-12">
<select class="form-select" id="monthSelect">
<option value="all">All Months</option>
<option value="jan">January</option>
<option value="feb">February</option>
<option value="mar">March</option>
<option value="apr">April</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header d-flex justify-content-between">
Expense Breakdown
<span class="setting-icon" onclick="toggleSettings('expenseSettings')">⚙️</span>
</div>
<div id="expenseSettings" class="settings-panel">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="showDollarAmounts" checked>
<label class="form-check-label" for="showDollarAmounts">Show dollar amounts</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="showPercentages" checked>
<label class="form-check-label" for="showPercentages">Show percentages</label>
</div>
<button class="btn btn-sm btn-primary mt-2" onclick="updateChart('expenseChart')">Apply</button>
</div>
<div class="card-body">
<canvas id="expenseChart"></canvas>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header d-flex justify-content-between">
Revenue Trends
<span class="setting-icon" onclick="toggleSettings('revenueSettings')">⚙️</span>
</div>
<div id="revenueSettings" class="settings-panel">
<div class="mb-2">
<label class="form-label">Chart Type</label>
<select class="form-select" id="revenueChartType">
<option value="bar">Bar Chart</option>
<option value="line">Line Chart</option>
</select>
</div>
<button class="btn btn-sm btn-primary mt-2" onclick="updateChart('revenueChart')">Apply</button>
</div>
<div class="card-body">
<canvas id="revenueChart"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between">
Detailed Financial Data
<span class="setting-icon" onclick="toggleSettings('tableSettings')">⚙️</span>
</div>
<div id="tableSettings" class="settings-panel">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="showMonthly" checked>
<label class="form-check-label" for="showMonthly">Show monthly breakdown</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="showYTD">
<label class="form-check-label" for="showYTD">Show YTD totals</label>
</div>
<button class="btn btn-sm btn-primary mt-2" onclick="updateTable()">Apply</button>
</div>
<div class="card-body table-responsive">
<table class="table table-striped table-hover" id="financialTable">
<thead>
<tr>
<th>Category</th>
<th>January</th>
<th>February</th>
<th>March</th>
<th>April</th>
<th>YTD Total</th>
</tr>
</thead>
<tbody>
<!-- Data will be populated by JavaScript -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
// Sample financial data
const financialData = {
labels: ['January', 'February', 'March', 'April'],
expenses: {
categories: ['Salaries', 'Office Supplies', 'Marketing', 'Software', 'Utilities'],
data: {
jan: [15000, 2000, 3000, 1500, 800],
feb: [15000, 1800, 3500, 1500, 900],
mar: [15500, 2100, 4000, 1600, 900],
apr: [15500, 1950, 4500, 1800, 950]
}
},
revenue: {
categories: ['Product Sales', 'Services', 'Subscriptions'],
data: {
jan: [20500, 9000, 8000],
feb: [22500, 10000, 8200],
mar: [25000, 11000, 8500],
apr: [24000, 10500, 9000]
}
}
};
// Initialize charts
let expenseChart, revenueChart;
function renderExpenseChart() {
const ctx = document.getElementById('expenseChart').getContext('2d');
const showDollarAmounts = document.getElementById('showDollarAmounts').checked;
const showPercentages = document.getElementById('showPercentages').checked;
expenseChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: financialData.expenses.categories,
datasets: [{
data: financialData.expenses.data.jan,
backgroundColor: [
'#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'
]
}]
},
options: {
responsive: true,
plugins: {
datalabels: {
formatter: (value, ctx) => {
let label = '';
const sum = ctx.dataset.data.reduce((a, b) => a + b, 0);
const percentage = Math.round((value / sum) * 100);
if (showDollarAmounts) label += `$${value.toLocaleString()}`;
if (showDollarAmounts && showPercentages) label += '\n';
if (showPercentages) label += `${percentage}%`;
return label;
},
color: '#333',
font: {
weight: 'bold'
}
},
legend: {
position: 'right',
}
}
},
plugins: [ChartDataLabels]
});
}
function renderRevenueChart(type = 'bar') {
const ctx = document.getElementById('revenueChart').getContext('2d');
revenueChart = new Chart(ctx, {
type: type,
data: {
labels: financialData.revenue.categories,
datasets: [
{
label: 'January',
data: financialData.revenue.data.jan,
backgroundColor: 'rgba(255, 99, 132, 0.5)'
},
{
label: 'February',
data: financialData.revenue.data.feb,
backgroundColor: 'rgba(54, 162, 235, 0.5)'
},
{
label: 'March',
data: financialData.revenue.data.mar,
backgroundColor: 'rgba(255, 206, 86, 0.5)'
},
{
label: 'April',
data: financialData.revenue.data.apr,
backgroundColor: 'rgba(75, 192, 192, 0.5)'
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Revenue by Month'
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return '$' + value.toLocaleString();
}
}
}
}
}
});
}
function renderFinancialTable() {
const tableBody = document.querySelector('#financialTable tbody');
tableBody.innerHTML = '';
// Add expense rows
financialData.expenses.categories.forEach((category, index) => {
const row = document.createElement('tr');
// Make category cell editable
const catCell = document.createElement('td');
catCell.textContent = category;
catCell.classList.add('editable');
catCell.onclick = function() { makeEditable(this); };
row.appendChild(catCell);
// Add monthly data cells
let ytdTotal = 0;
for (const month in financialData.expenses.data) {
const value = financialData.expenses.data[month][index];
ytdTotal += value;
const cell = document.createElement('td');
cell.textContent = '$' + value.toLocaleString();
cell.classList.add('editable');
cell.dataset.category = 'expenses';
cell.dataset.subcategory = index;
cell.dataset.month = month;
cell.onclick = function() { makeEditable(this); };
row.appendChild(cell);
}
// Add YTD total cell
const totalCell = document.createElement('td');
totalCell.textContent = '$' + ytdTotal.toLocaleString();
row.appendChild(totalCell);
tableBody.appendChild(row);
});
// Add separator row
const separatorRow = document.createElement('tr');
separatorRow.innerHTML = '<td colspan="6" style="height: 20px;"></td>';
tableBody.appendChild(separatorRow);
// Add revenue rows
financialData.revenue.categories.forEach((category, index) => {
const row = document.createElement('tr');
const catCell = document.createElement('td');
catCell.textContent = category;
catCell.classList.add('editable');
catCell.onclick = function() { makeEditable(this); };
row.appendChild(catCell);
let ytdTotal = 0;
for (const month in financialData.revenue.data) {
const value = financialData.revenue.data[month][index];
ytdTotal += value;
const cell = document.createElement('td');
cell.textContent = '$' + value.toLocaleString();
cell.classList.add('editable');
cell.dataset.category = 'revenue';
cell.dataset.subcategory = index;
cell.dataset.month = month;
cell.onclick = function() { makeEditable(this); };
row.appendChild(cell);
}
const totalCell = document.createElement('td');
totalCell.textContent = '$' + ytdTotal.toLocaleString();
row.appendChild(totalCell);
tableBody.appendChild(row);
});
}
function makeEditable(cell) {
const currentText = cell.textContent;
let inputValue = currentText;
// Remove $ sign if present
if (currentText.startsWith('$')) {
inputValue = currentText.substring(1).replace(/,/g, '');
}
// Create input field
const input = document.createElement('input');
input.type = 'text';
input.value = inputValue;
input.style.width = (cell.offsetWidth - 10) + 'px';
// Replace cell content with input field
cell.innerHTML = '';
cell.appendChild(input);
input.focus();
// Save on losing focus
input.addEventListener('blur', function() {
saveCellValue(cell, input.value);
});
// Save on Enter key
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
saveCellValue(cell, input.value);
} else if (e.key === 'Escape') {
cell.textContent = currentText;
cell.classList.add('editable');
cell.onclick = function() { makeEditable(this); };
}
});
}
function saveCellValue(cell, value) {
let newValue = value;
// If it's a dollar value, format it
if (cell.textContent.startsWith('$') || cell.cellIndex > 0) {
// Remove any existing $ or ,
newValue = newValue.replace(/[^0-9.]/g, '');
// Convert to number
const numValue = parseFloat(newValue);
if (isNaN(numValue)) {
alert('Please enter a valid number');
return;
}
newValue = '$' + numValue.toLocaleString();
// Update data structure if this is a data cell
if (cell.dataset.category && cell.dataset.subcategory && cell.dataset.month) {
const category = cell.dataset.category;
const subcategory = parseInt(cell.dataset.subcategory);
const month = cell.dataset.month;
if (category === 'expenses') {
financialData.expenses.data[month][subcategory] = numValue;
} else if (category === 'revenue') {
financialData.revenue.data[month][subcategory] = numValue;
}
// Update charts
expenseChart.update();
revenueChart.update();
}
}
// Restore cell
cell.textContent = newValue;
cell.classList.add('editable');
cell.onclick = function() { makeEditable(this); };
// Re-render table to update YTD totals
renderFinancialTable();
}
function toggleSettings(panelId) {
const panel = document.getElementById(panelId);
panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
}
function updateChart(chartId) {
if (chartId === 'expenseChart') {
expenseChart.destroy();
renderExpenseChart();
} else if (chartId === 'revenueChart') {
const chartType = document.getElementById('revenueChartType').value;
revenueChart.destroy();
renderRevenueChart(chartType);
}
toggleSettings(chartId + 'Settings');
}
function updateTable() {
renderFinancialTable();
toggleSettings('tableSettings');
}
// Filter data by month
document.getElementById('monthSelect').addEventListener('change', function() {
const selectedMonth = this.value;
// In a real app, we would filter the data here
// For this demo, we'll just update the expense chart to show selected month
if (selectedMonth !== 'all') {
expenseChart.data.datasets[0].data = financialData.expenses.data[selectedMonth];
expenseChart.update();
}
});
// Initialize dashboard
window.onload = function() {
renderExpenseChart();
renderRevenueChart();
renderFinancialTable();
};
</script>
</body>
</html>
```
This interactive financial dashboard includes:
1. **Visual Charts**:
- Doughnut chart for expense breakdown
- Bar/line chart for revenue trends (switchable)
- Both charts support data labels and customization
2. **Financial Table**:
- Detailed monthly breakdowns
- Year-to-date totals
- Editable cells (click any value to edit)
3. **Interactive Features**:
- Month selection dropdown to filter data
- Settings panels for each component
- Ability to toggle between chart types (line/bar for revenue)
- Options to show/hide dollar amounts and percentages
4. **Data Management**:
- Sample financial data structure
- Built-in data updating when values change
- Automatic recalculation of totals
The dashboard is built with Chart.js for visualizations and Bootstrap for responsive layout. All charts and tables update dynamically when data changes.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Financial Dashboard</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
#header { background: #2c3e50; color: white; padding: 10px; display: flex; align-items: center; gap: 10px; }
#header select, #header button { padding: 5px; }
#dashboard { display: flex; gap: 20px; padding: 20px; }
#chartContainer, #tableContainer { flex: 1; }
#financeTable { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
#financeTable th, #financeTable td { border: 1px solid #ccc; padding: 5px; text-align: left; }
#financeTable td[contenteditable="true"] { background: #f9f9f9; }
#addRowBtn { padding: 5px 10px; }
/* Modal */
.modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%;
overflow: auto; background: rgba(0,0,0,0.5); }
.modal-content { background: #fff; margin: 15% auto; padding: 20px; width: 300px; border-radius: 5px; }
.modal-content h3 { margin-top: 0; }
</style>
</head>
<body>
<div id="header">
Month:
<select id="monthSelect"></select>
<button id="settingsBtn">Settings</button>
</div>
<div id="dashboard">
<div id="chartContainer">
<canvas id="financeChart"></canvas>
</div>
<div id="tableContainer">
<table id="financeTable">
<thead>
<tr><th>Date</th><th>Description</th><th>Category</th><th>Type</th><th>Amount</th><th>Delete</th></tr>
</thead>
<tbody></tbody>
</table>
<button id="addRowBtn">Add Entry</button>
</div>
</div>
<!-- Settings Modal -->
<div id="settingsModal" class="modal">
<div class="modal-content">
<h3>Settings</h3>
<label><input type="checkbox" id="toggleChart" checked> Show Chart</label><br>
<label><input type="checkbox" id="toggleTable" checked> Show Table</label><br><br>
<label>Chart Type:
<select id="chartTypeSelect">
<option value="bar">Bar</option>
<option value="line">Line</option>
<option value="pie">Pie</option>
</select>
</label><br><br>
<button id="closeSettings">Close</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Sample data
const data = {
"January": [
{ date: "2025-01-05", description: "Salary", category: "Income", type: "Income", amount: 5000 },
{ date: "2025-01-10", description: "Rent", category: "Housing", type: "Expense", amount: 1500 },
{ date: "2025-01-15", description: "Groceries", category: "Food", type: "Expense", amount: 300 }
],
"February": [
{ date: "2025-02-05", description: "Salary", category: "Income", type: "Income", amount: 5000 },
{ date: "2025-02-12", description: "Electricity Bill", category: "Utilities", type: "Expense", amount: 120 },
{ date: "2025-02-20", description: "Dining Out", category: "Food", type: "Expense", amount: 200 }
]
// Add more months as needed
};
const months = Object.keys(data);
const monthSelect = document.getElementById("monthSelect");
const tbody = document.querySelector("#financeTable tbody");
const addRowBtn = document.getElementById("addRowBtn");
const settingsBtn = document.getElementById("settingsBtn");
const settingsModal = document.getElementById("settingsModal");
const closeSettings = document.getElementById("closeSettings");
const toggleChart = document.getElementById("toggleChart");
const toggleTable = document.getElementById("toggleTable");
const chartTypeSelect = document.getElementById("chartTypeSelect");
const chartContainer = document.getElementById("chartContainer");
const tableContainer = document.getElementById("tableContainer");
let currentMonth = months[0];
let chart;
// Initialize month selector
months.forEach(m => {
const opt = document.createElement("option");
opt.value = m; opt.textContent = m;
monthSelect.appendChild(opt);
});
monthSelect.value = currentMonth;
// Render functions
function renderTable() {
tbody.innerHTML = "";
data[currentMonth].forEach((entry, idx) => {
const tr = document.createElement("tr");
["date","description","category","type","amount"].forEach((key) => {
const td = document.createElement("td");
td.contentEditable = "true";
td.textContent = entry[key];
td.addEventListener("blur", () => {
let val = td.textContent;
if (key === "amount") val = parseFloat(val) || 0;
data[currentMonth][idx][key] = val;
updateChart();
});
tr.appendChild(td);
});
const delTd = document.createElement("td");
const delBtn = document.createElement("button");
delBtn.textContent = "×";
delBtn.addEventListener("click", () => {
data[currentMonth].splice(idx,1);
renderTable(); updateChart();
});
delTd.appendChild(delBtn);
tr.appendChild(delTd);
tbody.appendChild(tr);
});
}
function updateChart() {
const entries = data[currentMonth];
const income = entries.filter(e=>e.type==="Income").reduce((sum,e)=>sum+e.amount,0);
const expense = entries.filter(e=>e.type==="Expense").reduce((sum,e)=>sum+e.amount,0);
const cfg = {
type: chartTypeSelect.value,
data: {
labels: chartTypeSelect.value==="pie" ? ["Income","Expense"] : ["Income","Expense"],
datasets: [{
label: currentMonth + " Summary",
data: [income, expense],
backgroundColor: ["#27ae60","#c0392b"]
}]
},
options: { responsive: true }
};
if (chart) chart.destroy();
chart = new Chart(document.getElementById("financeChart"), cfg);
}
// Event Listeners
monthSelect.addEventListener("change", () => {
currentMonth = monthSelect.value;
renderTable();
updateChart();
});
addRowBtn.addEventListener("click", () => {
data[currentMonth].push({ date: "", description: "", category: "", type: "", amount: 0 });
renderTable();
});
settingsBtn.addEventListener("click", () => settingsModal.style.display = "block");
closeSettings.addEventListener("click", () => settingsModal.style.display = "none");
toggleChart.addEventListener("change", () => {
chartContainer.style.display = toggleChart.checked ? "block" : "none";
});
toggleTable.addEventListener("change", () => {
tableContainer.style.display = toggleTable.checked ? "block" : "none";
});
chartTypeSelect.addEventListener("change", updateChart);
// Initialize
renderTable();
updateChart();
// Close modal on outside click
window.addEventListener("click", e => {
if (e.target === settingsModal) settingsModal.style.display = "none";
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Financial Report</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 1200px;
margin: 40px auto;
}
.dashboard-settings {
margin-bottom: 20px;
}
.edit-item {
cursor: pointer;
color: blue;
}
.edit-item:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>Financial Report</h1>
<div class="dashboard-settings">
<button class="btn btn-primary" id="january-button">January</button>
<button class="btn btn-primary" id="february-button">February</button>
<button class="btn btn-primary" id="march-button">March</button>
<button class="btn btn-primary" id="april-button">April</button>
<button class="btn btn-primary" id="may-button">May</button>
<button class="btn btn-primary" id="june-button">June</button>
<button class="btn btn-primary" id="july-button">July</button>
<button class="btn btn-primary" id="august-button">August</button>
<button class="btn btn-primary" id="september-button">September</button>
<button class="btn btn-primary" id="october-button">October</button>
<button class="btn btn-primary" id="november-button">November</button>
<button class="btn btn-primary" id="december-button">December</button>
</div>
<canvas id="chart" width="400" height="200"></canvas>
<table class="table" id="table">
<thead>
<tr>
<th>Item</th>
<th>Value</th>
<th>Edit</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<td>Item 1</td>
<td>1000</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>2000</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>3000</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
</tbody>
</table>
</div>
<script>
let chartData = {
labels: ['Item 1', 'Item 2', 'Item 3'],
datasets: [{
label: 'Values',
data: [1000, 2000, 3000],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
};
let chartOptions = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
let chart = new Chart(document.getElementById('chart'), {
type: 'bar',
data: chartData,
options: chartOptions
});
$(document).ready(function() {
$('#january-button').click(function() {
chartData.datasets[0].data = [1200, 2500, 3200];
chart.update();
$('#table-body').empty();
$('#table-body').append(`
<tr>
<td>Item 1</td>
<td>1200</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>2500</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>3200</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
`);
});
$('#february-button').click(function() {
chartData.datasets[0].data = [1500, 2800, 3500];
chart.update();
$('#table-body').empty();
$('#table-body').append(`
<tr>
<td>Item 1</td>
<td>1500</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>2800</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>3500</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
`);
});
$('#march-button').click(function() {
chartData.datasets[0].data = [1800, 3100, 3800];
chart.update();
$('#table-body').empty();
$('#table-body').append(`
<tr>
<td>Item 1</td>
<td>1800</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>3100</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>3800</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
`);
});
$('#april-button').click(function() {
chartData.datasets[0].data = [2000, 3300, 4000];
chart.update();
$('#table-body').empty();
$('#table-body').append(`
<tr>
<td>Item 1</td>
<td>2000</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>3300</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>4000</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
`);
});
$('#may-button').click(function() {
chartData.datasets[0].data = [2200, 3600, 4300];
chart.update();
$('#table-body').empty();
$('#table-body').append(`
<tr>
<td>Item 1</td>
<td>2200</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>3600</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>4300</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
`);
});
$('#june-button').click(function() {
chartData.datasets[0].data = [2500, 3900, 4600];
chart.update();
$('#table-body').empty();
$('#table-body').append(`
<tr>
<td>Item 1</td>
<td>2500</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>3900</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>4600</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
`);
});
$('#july-button').click(function() {
chartData.datasets[0].data = [2800, 4200, 4900];
chart.update();
$('#table-body').empty();
$('#table-body').append(`
<tr>
<td>Item 1</td>
<td>2800</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>4200</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>4900</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
`);
});
$('#august-button').click(function() {
chartData.datasets[0].data = [3000, 4500, 5200];
chart.update();
$('#table-body').empty();
$('#table-body').append(`
<tr>
<td>Item 1</td>
<td>3000</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>4500</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>5200</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
`);
});
$('#september-button').click(function() {
chartData.datasets[0].data = [3200, 4800, 5500];
chart.update();
$('#table-body').empty();
$('#table-body').append(`
<tr>
<td>Item 1</td>
<td>3200</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>4800</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>5500</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
`);
});
$('#october-button').click(function() {
chartData.datasets[0].data = [3400, 5100, 5800];
chart.update();
$('#table-body').empty();
$('#table-body').append(`
<tr>
<td>Item 1</td>
<td>3400</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>5100</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>5800</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
`);
});
$('#november-button').click(function() {
chartData.datasets[0].data = [3600, 5400, 6100];
chart.update();
$('#table-body').empty();
$('#table-body').append(`
<tr>
<td>Item 1</td>
<td>3600</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>5400</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>6100</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
`);
});
$('#december-button').click(function() {
chartData.datasets[0].data = [3800, 5700, 6400];
chart.update();
$('#table-body').empty();
$('#table-body').append(`
<tr>
<td>Item 1</td>
<td>3800</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>5700</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
<tr>
<td>Item 3</td>
<td>6400</td>
<td><a class="edit-item" href="#">Edit</a></td>
</tr>
`);
});
$('.edit-item').click(function() {
let item = $(this).parent().parent().find('td:first').text();
let value = $(this).parent().parent().find('td:nth-child(2)').text();
let newValue = prompt('Enter new value for ' + item);
if (newValue) {
$(this).parent().parent().find('td:nth-child(2)').text(newValue);
let index = chartData.labels.indexOf(item);
chartData.datasets[0].data[index] = parseInt(newValue);
chart.update();
}
});
});
</script>
</body>
</html>
```Drag to resize
# Interactive Financial Dashboard
Here's a complete interactive financial dashboard with multiple charts, an editable table, and settings panel:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Financial Dashboard</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.0.4/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.2.0"></script>
<style>
:root {
--primary: #4361ee;
--primary-dark: #3f37c9;
--secondary: #7209b7;
--success: #4cc9f0;
--info: #4895ef;
--warning: #f72585;
--dark: #2b2d42;
--light: #f8f9fa;
--gray: #8d99ae;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f0f2f5;
color: var(--dark);
padding: 10px;
}
.dashboard {
display: grid;
gap: 20px;
}
/* Header Styles */
.header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
padding: 1.2rem 2rem;
color: white;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
font-weight: 600;
font-size: 1.8rem;
display: flex;
align-items: center;
gap: 12px;
}
.header i {
font-size: 1.5rem;
}
.header-controls {
display: flex;
gap: 15px;
}
.btn {
padding: 8px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-primary {
background: var(--light);
color: var(--primary-dark);
}
.btn-primary:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.btn-outline {
background: transparent;
border: 1px solid rgba(255,255,255,0.5);
color: white;
}
.btn-outline:hover {
background: rgba(255,255,255,0.1);
}
/* Card Styles */
.card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
overflow: hidden;
}
.card-header {
padding: 1.2rem;
border-bottom: 1px solid rgba(0,0,0,0.05);
display: flex;
justify-content: space-between;
align-items: center;
}
.card-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--dark);
}
.card-actions {
display: flex;
gap: 12px;
}
.icon-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--light);
color: var(--dark);
cursor: pointer;
transition: background 0.3s ease;
}
.icon-btn:hover {
background: rgba(0,0,0,0.05);
}
.card-body {
padding: 1.2rem;
}
/* Grid Layout */
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.col-8 {
grid-column: span 8;
}
.col-4 {
grid-column: span 4;
}
.col-6 {
grid-column: span 6;
}
.col-12 {
grid-column: span 12;
}
/* KPI Cards */
.indicator-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.kpi-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: transform 0.3s ease;
}
.kpi-card:hover {
transform: translateY(-5px);
}
.kpi-title {
font-size: 0.9rem;
color: var(--gray);
margin-bottom: 8px;
}
.kpi-value {
font-size: 2rem;
font-weight: 700;
color: var(--primary-dark);
}
.kpi-trend {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 0.9rem;
}
.trend-up {
color: #10b981;
}
.trend-down {
color: #ef4444;
}
/* Chart Containers */
.chart-container {
position: relative;
height: 320px;
width: 100%;
}
/* Table Styles */
.table-container {
overflow-x: auto;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.05);
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
background-color: var(--light);
}
th, td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
th {
font-weight: 600;
color: var(--dark);
}
tbody tr:hover {
background-color: rgba(67, 97, 238, 0.05);
}
/* Editable Cells */
.editable-cell {
cursor: pointer;
}
.editable-cell:hover {
background: rgba(67, 97, 238, 0.1);
}
.editable-cell input {
width: 100%;
padding: 5px 8px;
border: 1px solid var(--info);
border-radius: 4px;
outline: none;
}
/* Settings Panel */
.settings-card ul {
list-style: none;
padding: 0;
}
.settings-card li {
padding: 12px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
display: flex;
justify-content: space-between;
align-items: center;
}
.settings-card li:last-child {
border-bottom: none;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--primary);
}
input:checked + .slider:before {
transform: translateX(26px);
}
/* Date Selector */
.date-selector {
display: flex;
gap: 10px;
align-items: center;
}
.date-btn {
padding: 8px 16px;
background: var(--light);
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.date-btn.active, .date-btn:hover {
background: var(--primary);
color: white;
}
/* Responsive */
@media (max-width: 1200px) {
.grid-container {
grid-template-columns: 1fr;
}
.col-4, .col-6, .col-8, .col-12 {
grid-column: span 12;
}
.indicator-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.indicator-grid {
grid-template-columns: 1fr;
}
.card {
margin-bottom: 15px;
}
.header {
flex-direction: column;
gap: 15px;
text-align: center;
}
}
</style>
</head>
<body>
<div class="dashboard">
<!-- Header -->
<div class="header">
<div>
<h1><i class="fas fa-chart-line"></i> Financial Dashboard</h1>
<p>Monitor and analyze your financial performance</p>
</div>
<div class="header-controls">
<button class="btn btn-primary"><i class="fas fa-download"></i> Export Report</button>
<button class="btn btn-outline"><i class="fas fa-cog"></i> Settings</button>
</div>
</div>
<!-- Date Selector -->
<div class="card">
<div class="card-body">
<div class="date-selector">
<button class="date-btn active">Jan-Mar</button>
<button class="date-btn">Apr-Jun</button>
<button class="date-btn">Jul-Sep</button>
<button class="date-btn">Oct-Dec</button>
<button class="date-btn"><i class="fas fa-caret-right"></i></button>
</div>
</div>
</div>
<!-- KPI Indicators -->
<div class="indicator-grid">
<div class="kpi-card">
<div class="kpi-title">Total Revenue</div>
<div class="kpi-value">$248,567</div>
<div class="kpi-trend trend-up">
<i class="fas fa-arrow-up"></i>
<span>12.5% vs last period</span>
</div>
</div>
<div class="kpi-card">
<div class="kpi-title">Net Profit</div>
<div class="kpi-value">$54,890</div>
<div class="kpi-trend trend-up">
<i class="fas fa-arrow-up"></i>
<span>8.7% vs last period</span>
</div>
</div>
<div class="kpi-card">
<div class="kpi-title">Expenses</div>
<div class="kpi-value">$162,350</div>
<div class="kpi-trend trend-down">
<i class="fas fa-arrow-down"></i>
<span>3.2% vs last period</span>
</div>
</div>
<div class="kpi-card">
<div class="kpi-title">Average Ticket</div>
<div class="kpi-value">$1,245</div>
<div class="kpi-trend trend-up">
<i class="fas fa-arrow-up"></i>
<span>4.8% vs last period</span>
</div>
</div>
</div>
<div class="grid-container">
<!-- Column 1: Charts -->
<div class="col-8">
<!-- Revenue Chart -->
<div class="card">
<div class="card-header">
<div class="card-title">Revenue Overview</div>
<div class="card-actions">
<div class="icon-btn"><i class="fas fa-download"></i></div>
<div class="icon-btn"><i class="fas fa-expand"></i></div>
</div>
</div>
<div class="card-body">
<div class="chart-container">
<canvas id="revenueChart"></canvas>
</div>
</div>
</div>
<!-- Expense Breakdown -->
<div class="card">
<div class="card-header">
<div class="card-title">Expense Breakdown by Category</div>
<div class="card-actions">
<div class="icon-btn"><i class="fas fa-download"></i></div>
</div>
</div>
<div class="card-body">
<div class="chart-container">
<canvas id="expenseChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Column 2: Side Panel -->
<div class="col-4">
<!-- Profitability Chart -->
<div class="card">
<div class="card-header">
<div class="card-title">Profitability</div>
<div class="card-actions">
<div class="icon-btn"><i class="fas fa-expand"></i></div>
</div>
</div>
<div class="card-body">
<div class="chart-container">
<canvas id="profitChart"></canvas>
</div>
</div>
</div>
<!-- Settings -->
<div class="card settings-card">
<div class="card-header">
<div class="card-title">Dashboard Settings</div>
</div>
<div class="card-body">
<ul>
<li>
Data Auto Refresh
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</li>
<li>
Notifications
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</li>
<li>
Dark Mode
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</li>
<li>
Export Format
<select style="padding: 5px; border-radius: 4px; border: 1px solid #ddd; width: 100px">
<option>PDF</option>
<option>Excel</option>
<option>CSV</option>
</select>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Transactions Table -->
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="card-title">Recent Transactions</div>
<div class="card-actions">
<button class="btn btn-primary"><i class="fas fa-plus"></i> Add Record</button>
</div>
</div>
<div class="card-body">
<div class="table-container">
<table>
<thead>
<tr>
<th>ID</th>
<th>Date</th>
<th>Description</th>
<th>Category</th>
<th>Amount</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>#TXN001</td>
<td>Mar 15, 2023</td>
<td>Office Supplies</td>
<td>Operations</td>
<td>$1,245.00</td>
<td><span style="color:#10b981">Completed</span></td>
<td>
<button class="icon-btn"><i class="fas fa-edit"></i></button>
</td>
</tr>
<tr>
<td>#TXN002</td>
<td class="editable-cell" data-field="date">Mar 12, 2023</td>
<td class="editable-cell" data-field="description">Marketing Campaign</td>
<td class="editable-cell" data-field="category">Marketing</td>
<td class="editable-cell" data-field="amount">$3,450.00</td>
<td><span style="color:#f59e0b">Pending</span></td>
<td>
<button class="icon-btn"><i class="fas fa-edit"></i></button>
<button class="icon-btn"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td>#TXN003</td>
<td>Mar 8, 2023</td>
<td>Software Subscription</td>
<td>Technology</td>
<td>$2,150.00</td>
<td><span style="color:#10b981">Completed</span></td>
<td>
<button class="icon-btn"><i class="fas fa-edit"></i></button>
</td>
</tr>
<tr>
<td>#TXN004</td>
<td>Mar 5, 2023</td>
<td>Team Lunch</td>
<td>Human Resources</td>
<td>$350.00</td>
<td><span style="color:#ef4444">Rejected</span></td>
<td>
<button class="icon-btn"><i class="fas fa-edit"></i></button>
<button class="icon-btn"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td>#TXN005</td>
<td>Mar 2, 2023</td>
<td>Client Meeting</td>
<td>Operations</td>
<td>$890.00</td>
<td><span style="color:#10b981">Completed</span></td>
<td>
<button class="icon-btn"><i class="fas fa-edit"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
// Initialize Charts
document.addEventListener('DOMContentLoaded', function() {
// Datasets
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
// Revenue Chart (Line)
const revCtx = document.getElementById('revenueChart').getContext('2d');
new Chart(revCtx, {
type: 'line',
data: {
labels: months,
datasets: [{
label: 'Actual Revenue',
data: [185000, 220000, 248000, 215000, 265000, 295000],
borderColor: '#4361ee',
backgroundColor: 'rgba(67, 97, 238, 0.1)',
fill: true,
tension: 0.3
}, {
label: 'Target',
data: [205000, 220000, 230000, 240000, 250000, 260000],
borderColor: '#7209b7',
borderDash: [5, 5],
backgroundColor: 'transparent',
fill: false
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'top' }
}
}
});
// Expense Chart (Bar)
const expCtx = document.getElementById('expenseChart').getContext('2d');
new Chart(expCtx, {
type: 'bar',
data: {
labels: ['Marketing', 'Operations', 'Human Res', 'Tech', 'Admin'],
datasets: [{
label: 'Expense by Category',
data: [48000, 63500, 23590, 34800, 12420],
backgroundColor: [
'rgba(114, 9, 183, 0.7)',
'rgba(67, 97, 238, 0.7)',
'rgba(76, 201, 240, 0.7)',
'rgba(72, 149, 239, 0.7)',
'rgba(247, 37, 133, 0.7)'
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
}
}
});
// Profit Chart (Doughnut)
const profitCtx = document.getElementById('profitChart').getContext('2d');
new Chart(profitCtx, {
type: 'doughnut',
data: {
labels: ['Revenue', 'Expenses', 'Net Profit'],
datasets: [{
label: 'Profits',
data: [248000, 162000, 86000],
backgroundColor: [
'rgba(67, 97, 238, 0.7)',
'rgba(247, 37, 133, 0.7)',
'rgba(76, 201, 240, 0.7)'
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom' }
}
}
});
// Table Edit Functionality
document.querySelectorAll('.editable-cell').forEach(cell => {
cell.addEventListener('click', function() {
const field = this.getAttribute('data-field');
const currentValue = this.innerText;
const input = document.createElement('input');
input.type = 'text';
input.value = currentValue;
// Style the input
input.style.width = '100%';
input.style.padding = '5px';
input.style.border = '1px solid #4361ee';
input.style.borderRadius = '4px';
this.innerText = '';
this.appendChild(input);
input.focus();
input.addEventListener('blur', function() {
const value = input.value;
cell.innerText = value;
});
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const value = input.value;
cell.innerText = value;
}
});
});
});
// Period switch buttons
document.querySelectorAll('.date-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.date-btn').forEach(b => {
b.classList.remove('active');
});
this.classList.add('active');
updateChartsForPeriod();
});
});
// Simple chart update function for demo
function updateChartsForPeriod() {
// Real implementation would fetch new data based on period
console.log('Period changed - new data would be fetched');
}
});
</script>
</body>
</html>
```
## Features
- **Interactive Charts**:
- Revenue overview (line chart with target comparison)
- Expense breakdown by category (bar chart)
- Profitability visualization (doughnut chart)
- **Key Performance Indicators**:
- Revenue, profit, expenses, and average ticket metrics
- Trend indicators showing growth/decline
- **Editable Transactions Table**:
- Sortable financial transactions
- Edit functionality with inline editing
- Record management actions (edit, delete)
- **Dashboard Settings**:
- Auto refresh toggle
- Notification settings
- Dark mode switch
- Export format selection
- **Responsive Design**:
- Fully responsive layout that adapts to different screen sizes
- Mobile-friendly interface
To edit table entries, simply click on a value in the transactions table with the edit icon. The interface also includes date period selectors to view different time periods, with the charts updating accordingly.
All functionality is contained in a single HTML file with no external dependencies beyond the included libraries (Chart.js and Font Awesome).Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Financial Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f7fa;
color: #333;
}
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
min-height: 100vh;
}
.sidebar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
color: white;
}
.logo {
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
text-align: center;
}
.nav-item {
padding: 12px 15px;
margin: 5px 0;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
}
.nav-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.nav-item.active {
background-color: rgba(255, 255, 255, 0.2);
}
.main-content {
padding: 20px;
overflow-y: auto;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.month-selector {
display: flex;
gap: 10px;
align-items: center;
}
select, input, button {
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
cursor: pointer;
transition: transform 0.2s;
}
button:hover {
transform: translateY(-1px);
}
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.card {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.card h3 {
margin-bottom: 15px;
color: #667eea;
}
.metric {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.metric:last-child {
border-bottom: none;
}
.metric-value {
font-weight: bold;
font-size: 18px;
}
.positive {
color: #28a745;
}
.negative {
color: #dc3545;
}
.chart-container {
position: relative;
height: 300px;
margin: 20px 0;
}
.table-container {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #eee;
}
th {
background-color: #f8f9fa;
font-weight: 600;
}
.editable {
background: none;
border: none;
width: 100%;
padding: 5px;
}
.editable:focus {
background-color: #fff3cd;
outline: 1px solid #ffc107;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 30px;
border-radius: 10px;
width: 90%;
max-width: 500px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.settings-section {
background: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #667eea;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="dashboard">
<div class="sidebar">
<div class="logo">FinancePro</div>
<div class="nav-item active" onclick="showSection('overview')">📊 Overview</div>
<div class="nav-item" onclick="showSection('reports')">📈 Reports</div>
<div class="nav-item" onclick="showSection('transactions')">💰 Transactions</div>
<div class="nav-item" onclick="showSection('settings')">⚙️ Settings</div>
</div>
<div class="main-content">
<div class="header">
<h1 id="section-title">Financial Overview</h1>
<div class="month-selector">
<select id="monthSelect" onchange="updateData()">
<option value="0">January 2024</option>
<option value="1">February 2024</option>
<option value="2">March 2024</option>
<option value="3">April 2024</option>
<option value="4">May 2024</option>
<option value="5" selected>June 2024</option>
<option value="6">July 2024</option>
<option value="7">August 2024</option>
<option value="8">September 2024</option>
<option value="9">October 2024</option>
<option value="10">November 2024</option>
<option value="11">December 2024</option>
</select>
<button onclick="exportData()">Export Data</button>
<button onclick="openAddTransactionModal()">Add Transaction</button>
</div>
</div>
<!-- Overview Section -->
<div id="overview-section">
<div class="dashboard-grid">
<div class="card">
<h3>💰 Revenue</h3>
<div class="metric">
<span>Total Revenue</span>
<span class="metric-value positive" id="total-revenue">$125,430</span>
</div>
<div class="metric">
<span>Monthly Growth</span>
<span class="metric-value positive" id="revenue-growth">+12.5%</span>
</div>
<div class="metric">
<span>Average Deal Size</span>
<span class="metric-value" id="avg-deal">$2,845</span>
</div>
</div>
<div class="card">
<h3>💸 Expenses</h3>
<div class="metric">
<span>Total Expenses</span>
<span class="metric-value negative" id="total-expenses">$87,250</span>
</div>
<div class="metric">
<span>Monthly Change</span>
<span class="metric-value negative" id="expense-growth">+8.3%</span>
</div>
<div class="metric">
<span>Largest Category</span>
<span class="metric-value" id="largest-category">Operations</span>
</div>
</div>
<div class="card">
<h3>📈 Profit</h3>
<div class="metric">
<span>Net Profit</span>
<span class="metric-value positive" id="net-profit">$38,180</span>
</div>
<div class="metric">
<span>Profit Margin</span>
<span class="metric-value positive" id="profit-margin">30.4%</span>
</div>
<div class="metric">
<span>vs Last Month</span>
<span class="metric-value positive" id="profit-change">+15.2%</span>
</div>
</div>
<div class="card">
<h3>💳 Cash Flow</h3>
<div class="metric">
<span>Operating Cash Flow</span>
<span class="metric-value positive" id="operating-cf">$45,320</span>
</div>
<div class="metric">
<span>Free Cash Flow</span>
<span class="metric-value positive" id="free-cf">$32,180</span>
</div>
<div class="metric">
<span>Cash Position</span>
<span class="metric-value positive" id="cash-position">$156,890</span>
</div>
</div>
</div>
<div class="dashboard-grid">
<div class="card">
<h3>Revenue vs Expenses</h3>
<div class="chart-container">
<canvas id="revenueChart"></canvas>
</div>
</div>
<div class="card">
<h3>Expense Breakdown</h3>
<div class="chart-container">
<canvas id="expenseChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Reports Section -->
<div id="reports-section" class="hidden">
<div class="card">
<h3>Monthly Trend Analysis</h3>
<div class="chart-container">
<canvas id="trendChart"></canvas>
</div>
</div>
<div class="card">
<h3>Year-over-Year Comparison</h3>
<div class="chart-container">
<canvas id="yoyChart"></canvas>
</div>
</div>
</div>
<!-- Transactions Section -->
<div id="transactions-section" class="hidden">
<div class="table-container">
<h3>Recent Transactions</h3>
<table id="transactionsTable">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Category</th>
<th>Amount</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="transactionsList">
<!-- Transactions will be populated here -->
</tbody>
</table>
</div>
</div>
<!-- Settings Section -->
<div id="settings-section" class="hidden">
<div class="settings-section">
<h3>Dashboard Preferences</h3>
<div class="form-group">
<label>Currency</label>
<select id="currencySelect" onchange="updateCurrency()">
<option value="USD">USD ($)</option>
<option value="EUR">EUR (€)</option>
<option value="GBP">GBP (£)</option>
<option value="JPY">JPY (¥)</option>
</select>
</div>
<div class="form-group">
<label>Dark Mode</label>
<label class="toggle-switch">
<input type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()">
<span class="slider"></span>
</label>
</div>
<div class="form-group">
<label>Auto-refresh Data</label>
<label class="toggle-switch">
<input type="checkbox" id="autoRefreshToggle" checked onchange="toggleAutoRefresh()">
<span class="slider"></span>
</label>
</div>
</div>
<div class="settings-section">
<h3>Data Management</h3>
<button onclick="importData()">Import Data</button>
<button onclick="exportData()">Export Data</button>
<button onclick="resetData()">Reset Dashboard</button>
</div>
</div>
</div>
</div>
<!-- Add Transaction Modal -->
<div id="addTransactionModal" class="modal">
<div class="modal-content">
<h3>Add New Transaction</h3>
<div class="form-group">
<label for="transactionDate">Date</label>
<input type="date" id="transactionDate">
</div>
<div class="form-group">
<label for="transactionDescription">Description</label>
<input type="text" id="transactionDescription" placeholder="Transaction description">
</div>
<div class="form-group">
<label for="transactionCategory">Category</label>
<select id="transactionCategory">
<option value="Revenue">Revenue</option>
<option value="Operations">Operations</option>
<option value="Marketing">Marketing</option>
<option value="Office">Office</option>
<option value="Travel">Travel</option>
</select>
</div>
<div class="form-group">
<label for="transactionAmount">Amount</label>
<input type="number" id="transactionAmount" placeholder="0.00" step="0.01">
</div>
<div style="display: flex; gap: 10px; justify-content: flex-end;">
<button onclick="closeModal()">Cancel</button>
<button onclick="addTransaction()">Add Transaction</button>
</div>
</div>
</div>
<script>
// Global data storage
let financialData = {
months: [
{ name: 'January', revenue: 98500, expenses: 75200, transactions: [] },
{ name: 'February', revenue: 105800, expenses: 78900, transactions: [] },
{ name: 'March', revenue: 112300, expenses: 82100, transactions: [] },
{ name: 'April', revenue: 108900, expenses: 79800, transactions: [] },
{ name: 'May', revenue: 119200, expenses: 84300, transactions: [] },
{ name: 'June', revenue: 125430, expenses: 87250, transactions: [
{ date: '2024-06-01', description: 'Client Payment - ABC Corp', category: 'Revenue', amount: 15000 },
{ date: '2024-06-02', description: 'Office Rent', category: 'Operations', amount: -3500 },
{ date: '2024-06-03', description: 'Marketing Campaign', category: 'Marketing', amount: -2800 },
{ date: '2024-06-04', description: 'Software Licenses', category: 'Operations', amount: -1200 },
{ date: '2024-06-05', description: 'Client Payment - XYZ Ltd', category: 'Revenue', amount: 8500 }
] },
{ name: 'July', revenue: 132100, expenses: 89700, transactions: [] },
{ name: 'August', revenue: 128900, expenses: 91200, transactions: [] },
{ name: 'September', revenue: 134600, expenses: 88900, transactions: [] },
{ name: 'October', revenue: 141200, expenses: 92800, transactions: [] },
{ name: 'November', revenue: 138800, expenses: 95100, transactions: [] },
{ name: 'December', revenue: 145900, expenses: 97300, transactions: [] }
],
currentMonth: 5,
currency: 'USD'
};
let charts = {};
// Initialize dashboard
function init() {
initializeCharts();
updateData();
populateTransactions();
// Set default date for new transactions
document.getElementById('transactionDate').value = new Date().toISOString().split('T')[0];
}
// Navigation functions
function showSection(section) {
// Update nav items
document.querySelectorAll('.nav-item').forEach(item => {
item.classList.remove('active');
});
event.target.classList.add('active');
// Hide all sections
document.querySelectorAll('[id$="-section"]').forEach(section => {
section.classList.add('hidden');
});
// Show selected section
document.getElementById(section + '-section').classList.remove('hidden');
// Update title
const titles = {
'overview': 'Financial Overview',
'reports': 'Financial Reports',
'transactions': 'Transaction Management',
'settings': 'Dashboard Settings'
};
document.getElementById('section-title').textContent = titles[section];
// Initialize section-specific content
if (section === 'reports') {
initializeReportCharts();
}
}
// Update data based on selected month
function updateData() {
const monthIndex = parseInt(document.getElementById('monthSelect').value);
financialData.currentMonth = monthIndex;
const month = financialData.months[monthIndex];
// Update metrics
document.getElementById('total-revenue').textContent = formatCurrency(month.revenue);
document.getElementById('total-expenses').textContent = formatCurrency(month.expenses);
document.getElementById('net-profit').textContent = formatCurrency(month.revenue - month.expenses);
document.getElementById('profit-margin').textContent = ((month.revenue - month.expenses) / month.revenue * 100).toFixed(1) + '%';
// Update charts
updateCharts(monthIndex);
populateTransactions();
}
// Chart initialization
function initializeCharts() {
// Revenue Chart
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
charts.revenue = new Chart(revenueCtx, {
type: 'line',
data: {
labels: financialData.months.map(m => m.name.substring(0, 3)),
datasets: [
{
label: 'Revenue',
data: financialData.months.map(m => m.revenue),
borderColor: '#28a745',
backgroundColor: 'rgba(40, 167, 69, 0.1)',
tension: 0.4
},
{
label: 'Expenses',
data: financialData.months.map(m => m.expenses),
borderColor: '#dc3545',
backgroundColor: 'rgba(220, 53, 69, 0.1)',
tension: 0.4
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return formatCurrency(value);
}
}
}
}
}
});
// Expense Chart
const expenseCtx = document.getElementById('expenseChart').getContext('2d');
charts.expense = new Chart(expenseCtx, {
type: 'doughnut',
data: {
labels: ['Operations', 'Marketing', 'Office', 'Travel', 'Other'],
datasets: [{
data: [35, 25, 15, 10, 15],
backgroundColor: [
'#667eea',
'#764ba2',
'#f093fb',
'#f5576c',
'#4facfe'
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
function initializeReportCharts() {
// Trend Chart
if (!charts.trend) {
const trendCtx = document.getElementById('trendChart').getContext('2d');
charts.trend = new Chart(trendCtx, {
type: 'bar',
data: {
labels: financialData.months.map(m => m.name.substring(0, 3)),
datasets: [{
label: 'Profit',
data: financialData.months.map(m => m.revenue - m.expenses),
backgroundColor: 'rgba(102, 126, 234, 0.6)',
borderColor: '#667eea',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return formatCurrency(value);
}
}
}
}
}
});
}
// YoY Chart
if (!charts.yoy) {
const yoyCtx = document.getElementById('yoyChart').getContext('2d');
charts.yoy = new Chart(yoyCtx, {
type: 'line',
data: {
labels: financialData.months.map(m => m.name.substring(0, 3)),
datasets: [
{
label: '2023',
data: financialData.months.map(m => m.revenue * 0.85),
borderColor: '#999',
backgroundColor: 'rgba(153, 153, 153, 0.1)',
tension: 0.4
},
{
label: '2024',
data: financialData.months.map(m => m.revenue),
borderColor: '#667eea',
backgroundColor: 'rgba(102, 126, 234, 0.1)',
tension: 0.4
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return formatCurrency(value);
}
}
}
}
}
});
}
}
function updateCharts(monthIndex) {
// Update chart highlighting for current month
if (charts.revenue) {
charts.revenue.update();
}
}
// Transaction management
function populateTransactions() {
const month = financialData.months[financialData.currentMonth];
const tbody = document.getElementById('transactionsList');
tbody.innerHTML = '';
month.transactions.forEach((transaction, index) => {
const row = tbody.insertRow();
row.innerHTML = `
<td>${new Date(transaction.date).toLocaleDateString()}</td>
<td><input type="text" class="editable" value="${transaction.description}" onchange="updateTransaction(${index}, 'description', this.value)"></td>
<td>${transaction.category}</td>
<td class="${transaction.amount >= 0 ? 'positive' : 'negative'}">${formatCurrency(transaction.amount)}</td>
<td><button onclick="deleteTransaction(${index})">Delete</button></td>
`;
});
}
function updateTransaction(index, field, value) {
financialData.months[financialData.currentMonth].transactions[index][field] = value;
}
function deleteTransaction(index) {
if (confirm('Are you sure you want to delete this transaction?')) {
financialData.months[financialData.currentMonth].transactions.splice(index, 1);
populateTransactions();
updateData();
}
}
function openAddTransactionModal() {
document.getElementById('addTransactionModal').style.display = 'block';
}
function closeModal() {
document.getElementById('addTransactionModal').style.display = 'none';
}
function addTransaction() {
const transaction = {
date: document.getElementById('transactionDate').value,
description: document.getElementById('transactionDescription').value,
category: document.getElementById('transactionCategory').value,
amount: parseFloat(document.getElementById('transactionAmount').value)
};
if (transaction.description && transaction.amount) {
financialData.months[financialData.currentMonth].transactions.push(transaction);
// Update month totals
if (transaction.category === 'Revenue') {
financialData.months[financialData.currentMonth].revenue += Math.abs(transaction.amount);
} else {
financialData.months[financialData.currentMonth].expenses += Math.abs(transaction.amount);
}
closeModal();
updateData();
// Clear form
document.getElementById('transactionDescription').value = '';
document.getElementById('transactionAmount').value = '';
}
}
// Settings functions
function updateCurrency() {
financialData.currency = document.getElementById('currencySelect').value;
updateData();
}
function toggleDarkMode() {
// Implementation for dark mode toggle
console.log('Dark mode toggled');
}
function toggleAutoRefresh() {
// Implementation for auto-refresh toggle
console.log('Auto-refresh toggled');
}
function exportData() {
const dataStr = JSON.stringify(financialData, null, 2);
const dataBlob = new Blob([dataStr], {type: 'application/json'});
const url = URL.createObjectURL(dataBlob);
const link = document.createElement('a');
link.href = url;
link.download = 'financial_data.json';
link.click();
}
function importData() {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json';
input.onchange = function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
try {
financialData = JSON.parse(e.target.result);
updateData();
alert('Data imported successfully!');
} catch (error) {
alert('Error importing data. Please check the file format.');
}
};
reader.readAsText(file);
};
input.click();
}
function resetData() {
if (confirm('Are you sure you want to reset all data? This action cannot be undone.')) {
location.reload();
}
}
// Utility functions
function formatCurrency(amount) {
const symbols = { USD: '$', EUR: '€', GBP: '£', JPY: '¥' };
const symbol = symbols[financialData.currency] || '$';
return symbol + Math.abs(amount).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
}
// Initialize dashboard when page loads
window.onload = init;
// Close modal when clicking outside
window.onclick = function(event) {
const modal = document.getElementById('addTransactionModal');
if (event.target === modal) {
closeModal();
}
}
</script>
</body>
</html>
```
This interactive financial dashboard includes:
**Key Features:**
- **Multiple Sections**: Overview, Reports, Transactions, and Settings
- **Month Selection**: Switch between different months to view data
- **Interactive Charts**: Revenue/expense trends, expense breakdown, profit analysis
- **Editable Transactions**: Add, edit, and delete financial transactions
- **Real-time Updates**: Data updates automatically when changes are made
**Dashboard Components:**
- **Sidebar Navigation**: Easy switching between sections
- **Key Metrics Cards**: Revenue, expenses, profit, and cash flow
- **Interactive Charts**: Line charts, bar charts, and doughnut charts
- **Transaction Table**: Editable transaction management
- **Settings Panel**: Currency selection, themes, and data management
**Interactive Features:**
- **Add Transactions**: Modal form to add new financial entries
- **Edit Data**: Click on transaction descriptions to edit inline
- **Export/Import**: Save and load financial data
- **Responsive Design**: Works on desktop and mobile devices
- **Month Filtering**: View data for specific months
The dashboard provides a comprehensive view of financial performance with the ability to drill down into details and make real-time edits to the data.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Financial Dashboard</title>
<!-- --------------- External libraries ----------------- -->
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<!-- Simple, light-weight icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<!-- ----------------- Styles -------------------------- -->
<style>
:root{
--bg:#f3f6fa;
--card:#fff;
--primary:#0077ff;
--text:#222;
--text-light:#555;
--border:#d0d7e1;
}
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
body{margin:0;background:var(--bg);color:var(--text);}
header{
display:flex;align-items:center;justify-content:space-between;
padding:1rem 1.5rem;background:var(--card);border-bottom:1px solid var(--border);
position:sticky;top:0;z-index:2;
}
header h1{margin:0;font-size:1.25rem;}
#monthSelect{
padding:.45rem .6rem;border:1px solid var(--border);border-radius:4px;
background:#fff;
}
main{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;padding:1.25rem;}
section.card{
background:var(--card);padding:1.25rem;border:1px solid var(--border);
border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.04);
}
#financeTable{
width:100%;border-collapse:collapse;font-size:.95rem;
}
#financeTable th,#financeTable td{
border-bottom:1px solid var(--border);padding:.55rem .4rem;text-align:right;
}
#financeTable th:first-child,#financeTable td:first-child{text-align:left;}
#financeTable tr:last-child td{font-weight:600;background:#fafbfc;}
#financeTable td[contenteditable]:focus{outline:2px solid var(--primary);background:#eaf2ff;}
.toolbar{display:flex;gap:.5rem;margin-bottom:.65rem;}
.toolbar button{
background:var(--primary);color:#fff;border:none;border-radius:4px;
padding:.45rem .65rem;cursor:pointer;font-size:.85rem;
}
.toolbar button.danger{background:#e74c3c;}
.toolbar button.secondary{background:#6c757d;}
/* Settings (off-canvas) */
#settingsToggle{font-size:1.35rem;cursor:pointer;color:var(--text-light);}
#settingsPanel{
position:fixed;top:0;right:-320px;width:300px;height:100%;
background:var(--card);box-shadow:-3px 0 6px rgba(0,0,0,.08);
padding:1rem 1.25rem;transition:right .3s ease;border-left:1px solid var(--border);z-index:3;
}
#settingsPanel.open{right:0;}
#settingsPanel h2{margin-top:0;font-size:1.1rem;}
label.selectWrap{display:block;margin-bottom:1rem;}
label.selectWrap span{display:block;margin-bottom:.35rem;font-size:.9rem;color:var(--text-light);}
label.selectWrap select{
width:100%;padding:.45rem .6rem;border:1px solid var(--border);
border-radius:4px;background:#fff;
}
@media (max-width:900px){
main{grid-template-columns:1fr;}
}
</style>
</head>
<body>
<!-- ---------------- Header ---------------- -->
<header>
<h1>Financial Performance Dashboard</h1>
<div style="display:flex;align-items:center;gap:1rem;">
<select id="monthSelect"></select>
<i id="settingsToggle" class="fa-solid fa-gear"></i>
</div>
</header>
<!-- -------------- Settings panel ------------- -->
<aside id="settingsPanel">
<h2>Dashboard Settings</h2>
<label class="selectWrap">
<span>Chart type</span>
<select id="chartTypeSelect">
<option value="bar">Bar</option>
<option value="pie">Pie</option>
<option value="doughnut">Doughnut</option>
<option value="line">Line</option>
</select>
</label>
<p style="font-size:.85rem;color:var(--text-light);">
All changes are saved locally in your browser (localStorage).
</p>
</aside>
<!-- ---------------- Main ------------------- -->
<main>
<!-- ----------- Table Card -------------- -->
<section class="card">
<div class="toolbar">
<button id="addRowBtn"><i class="fa fa-plus"></i> Add Item</button>
<button class="danger" id="delRowBtn"><i class="fa fa-trash"></i> Delete Last</button>
<button class="secondary" id="resetMonthBtn"><i class="fa fa-rotate"></i> Reset Month</button>
</div>
<table id="financeTable">
<!-- dynamically filled -->
</table>
</section>
<!-- ----------- Chart Card -------------- -->
<section class="card">
<canvas id="financeChart"></canvas>
</section>
</main>
<!-- --------------- Script ----------------- -->
<script>
/* ---------- Data model ---------- */
const defaultTemplate = [
{category:'Revenue', budget: 50000, actual: 48000},
{category:'Marketing', budget: 8000, actual: 7500},
{category:'Salaries', budget: 25000, actual: 25500},
{category:'Utilities', budget: 3000, actual: 2950},
{category:'Misc', budget: 2000, actual: 1800}
];
const months = ['Jan 2024','Feb 2024','Mar 2024','Apr 2024','May 2024','Jun 2024'];
let data = {}; // will hold month -> array clone of template
// load from localStorage or init
months.forEach(m=>{
const stored = localStorage.getItem('fin-'+m);
data[m] = stored ? JSON.parse(stored) : JSON.parse(JSON.stringify(defaultTemplate));
});
/* ---------- DOM elements ---------- */
const monthSelect = document.getElementById('monthSelect');
const table = document.getElementById('financeTable');
const addRowBtn = document.getElementById('addRowBtn');
const delRowBtn = document.getElementById('delRowBtn');
const resetMonthBtn = document.getElementById('resetMonthBtn');
const settingsToggle = document.getElementById('settingsToggle');
const settingsPanel = document.getElementById('settingsPanel');
const chartTypeSelect= document.getElementById('chartTypeSelect');
/* ---------- populate month dropdown ---------- */
months.forEach(m=>{
const opt=document.createElement('option');
opt.value=opt.textContent=m;
monthSelect.appendChild(opt);
});
monthSelect.value=months[0];
/* ---------- Table Rendering ---------- */
function renderTable(){
const rows = data[monthSelect.value];
let html = `
<thead>
<tr>
<th style="width:45%;">Category</th>
<th>Budget</th>
<th>Actual</th>
</tr>
</thead>
<tbody>
`;
rows.forEach((r,i)=>{
html+=`
<tr>
<td contenteditable="true" data-row="${i}" data-field="category">${r.category}</td>
<td contenteditable="true" data-row="${i}" data-field="budget">${formatNum(r.budget)}</td>
<td contenteditable="true" data-row="${i}" data-field="actual">${formatNum(r.actual)}</td>
</tr>
`;
});
// totals
const totals = calcTotals(rows);
html+=`
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>${formatNum(totals.budget)}</td>
<td>${formatNum(totals.actual)}</td>
</tr>
</tfoot>
`;
table.innerHTML = html;
// attach listeners to new cells
table.querySelectorAll('td[contenteditable="true"]').forEach(cell=>{
cell.addEventListener('blur',handleCellEdit);
cell.addEventListener('keydown',e=>{if(e.key==='Enter'){e.preventDefault();cell.blur();}});
});
}
/* ---------- Cell Edit Handler ---------- */
function handleCellEdit(e){
const cell=e.target;
const rowIdx=parseInt(cell.dataset.row,10);
const field=cell.dataset.field;
const text=cell.textContent.trim();
if(field==='category'){
data[monthSelect.value][rowIdx][field]=text||'Unnamed';
}else{
const num=parseFloat(text.replace(/[^\d.-]/g,''))||0;
data[monthSelect.value][rowIdx][field]=num;
cell.textContent=formatNum(num);
}
saveCurrentMonth();
renderTable(); // re-render to refresh totals
updateChart();
}
/* ---------- Add / Delete Rows ---------- */
addRowBtn.onclick=()=>{
data[monthSelect.value].push({category:'New Item',budget:0,actual:0});
saveCurrentMonth();renderTable();updateChart();
};
delRowBtn.onclick=()=>{
if(data[monthSelect.value].length>0){
data[monthSelect.value].pop();
saveCurrentMonth();renderTable();updateChart();
}
};
resetMonthBtn.onclick=()=>{
if(confirm('Reset data for '+monthSelect.value+'?')){
data[monthSelect.value]=JSON.parse(JSON.stringify(defaultTemplate));
saveCurrentMonth();renderTable();updateChart();
}
};
/* ---------- Month Change ---------- */
monthSelect.onchange=()=>{renderTable();updateChart();};
/* ---------- Save to localStorage ---------- */
function saveCurrentMonth(){
localStorage.setItem('fin-'+monthSelect.value,JSON.stringify(data[monthSelect.value]));
}
/* ---------- Helpers ---------- */
function calcTotals(arr){
return arr.reduce((acc,r)=>({
budget:acc.budget+r.budget,
actual:acc.actual+r.actual
}),{budget:0,actual:0});
}
function formatNum(n){return n.toLocaleString(undefined,{minimumFractionDigits:0,maximumFractionDigits:0});}
/* ---------- Chart ---------- */
let chart;
function initChart(){
const ctx=document.getElementById('financeChart');
chart=new Chart(ctx,{
type:chartTypeSelect.value,
data:{labels:[],datasets:[]},
options:{
responsive:true,
maintainAspectRatio:false,
plugins:{legend:{display:true}},
scales:{y:{beginAtZero:true}}
}
});
}
function updateChart(){
const rows=data[monthSelect.value];
chart.config.type=chartTypeSelect.value;
chart.data.labels=rows.map(r=>r.category);
chart.data.datasets=[
{
label:'Budget',
backgroundColor:'rgba(0,119,255,0.6)',
data:rows.map(r=>r.budget)
},
{
label:'Actual',
backgroundColor:'rgba(40,180,99,0.7)',
data:rows.map(r=>r.actual)
}
];
// hide the 2nd dataset for pie/doughnut
if(['pie','doughnut'].includes(chart.config.type)){
chart.data.datasets.pop(); // keep only Budget
}
chart.update();
}
/* ---------- Settings Panel ---------- */
settingsToggle.onclick=()=>settingsPanel.classList.toggle('open');
chartTypeSelect.onchange=()=>updateChart();
/* ---------- Init ---------- */
window.addEventListener('load',()=>{
initChart();
renderTable();
updateChart();
});
</script>
</body>
</html>
```Drag to resize
Here is an interactive financial report dashboard. You can switch between months, edit transaction details directly in the table, add new transactions, and switch between light and dark themes. All changes you make will instantly update the summary cards and charts.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Financial Report</title>
<!-- Chart.js library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
/* CSS Variables for Theming */
:root {
--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
--light-bg: #f8f9fa;
--light-card-bg: #ffffff;
--light-text: #212529;
--light-border: #dee2e6;
--light-header-bg: #e9ecef;
--dark-bg: #1a1a2e;
--dark-card-bg: #162447;
--dark-text: #e6e6e6;
--dark-border: #2a3b5c;
--dark-header-bg: #1f4068;
--bg-color: var(--light-bg);
--card-bg-color: var(--light-card-bg);
--text-color: var(--light-text);
--border-color: var(--light-border);
--header-bg-color: var(--light-header-bg);
--shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
--border-radius: 8px;
}
body.dark-mode {
--bg-color: var(--dark-bg);
--card-bg-color: var(--dark-card-bg);
--text-color: var(--dark-text);
--border-color: var(--dark-border);
--header-bg-color: var(--dark-header-bg);
}
/* General Styles */
body {
font-family: var(--font-family);
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 20px;
transition: background-color 0.3s, color 0.3s;
}
.dashboard {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
/* Header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--card-bg-color);
padding: 15px 20px;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
}
.header h1 {
margin: 0;
font-size: 1.8em;
color: var(--text-color);
}
.controls {
display: flex;
align-items: center;
gap: 15px;
}
.controls select, .controls button {
padding: 8px 12px;
border-radius: 5px;
border: 1px solid var(--border-color);
background-color: var(--bg-color);
color: var(--text-color);
font-size: 1em;
cursor: pointer;
}
/* Summary Cards */
.summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card {
background-color: var(--card-bg-color);
padding: 20px;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
border-left: 5px solid var(--primary-color);
transition: all 0.3s ease;
}
.card:hover { transform: translateY(-5px); }
.card h3 { margin-top: 0; font-size: 1.1em; color: var(--secondary-color); text-transform: uppercase; }
.card .amount { font-size: 2em; font-weight: bold; }
.card.revenue { border-color: var(--success-color); }
.card.expenses { border-color: var(--danger-color); }
.card.profit { border-color: var(--primary-color); }
/* Charts */
.charts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
}
.chart-container {
background-color: var(--card-bg-color);
padding: 20px;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
}
/* Table */
.table-container {
background-color: var(--card-bg-color);
padding: 20px;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
overflow-x: auto;
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.table-header h2 { margin: 0; }
#add-transaction-btn {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: left;
padding: 12px 15px;
border-bottom: 1px solid var(--border-color);
}
thead tr {
background-color: var(--header-bg-color);
}
tbody tr:hover {
background-color: var(--header-bg-color);
}
td[contenteditable="true"] {
background-color: rgba(255, 255, 0, 0.1);
cursor: text;
}
td[contenteditable="true"]:focus {
outline: 2px solid var(--primary-color);
background-color: rgba(255, 255, 0, 0.2);
}
.amount-cell { font-weight: bold; }
.revenue-text { color: var(--success-color); }
.expense-text { color: var(--danger-color); }
.delete-btn {
background: none;
border: none;
color: var(--danger-color);
cursor: pointer;
font-size: 1.2em;
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0; top: 0;
width: 100%; height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: var(--card-bg-color);
margin: 10% auto;
padding: 25px;
border: 1px solid var(--border-color);
width: 80%;
max-width: 500px;
border-radius: var(--border-radius);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
position: relative;
}
.close-btn {
color: var(--secondary-color);
position: absolute;
top: 10px;
right: 20px;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.modal-content h2 { margin-top: 0; }
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input, .form-group select {
width: 100%;
padding: 8px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid var(--border-color);
background-color: var(--bg-color);
color: var(--text-color);
}
#save-transaction-btn {
background-color: var(--success-color);
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
width: 100%;
font-size: 1em;
border-radius: 5px;
}
/* Settings Modal specific */
.theme-switch-wrapper {
display: flex;
align-items: center;
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input { display:none; }
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
border-radius: 34px;
}
.slider:before {
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
border-radius: 50%;
}
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(26px); }
</style>
</head>
<body>
<div class="dashboard">
<!-- Header -->
<header class="header">
<h1>Financial Report</h1>
<div class="controls">
<select id="month-selector"></select>
<button id="settings-btn">⚙️ Settings</button>
</div>
</header>
<!-- Summary Cards -->
<div class="summary-cards">
<div class="card revenue">
<h3>Total Revenue</h3>
<div id="total-revenue" class="amount">$0</div>
</div>
<div class="card expenses">
<h3>Total Expenses</h3>
<div id="total-expenses" class="amount">$0</div>
</div>
<div class="card profit">
<h3>Net Profit</h3>
<div id="net-profit" class="amount">$0</div>
</div>
</div>
<!-- Charts -->
<div class="charts">
<div class="chart-container">
<h3>Revenue vs. Expenses</h3>
<canvas id="flowChart"></canvas>
</div>
<div class="chart-container">
<h3>Expense Breakdown</h3>
<canvas id="expenseChart"></canvas>
</div>
</div>
<!-- Transactions Table -->
<div class="table-container">
<div class="table-header">
<h2>Transactions</h2>
<button id="add-transaction-btn">+ Add Transaction</button>
</div>
<table id="transactions-table">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Category</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- JS will populate this -->
</tbody>
</table>
</div>
</div>
<!-- Settings Modal -->
<div id="settings-modal" class="modal">
<div class="modal-content">
<span class="close-btn">×</span>
<h2>Dashboard Settings</h2>
<div class="form-group">
<label>Theme</label>
<div class="theme-switch-wrapper">
<span>Light</span>
<label class="theme-switch">
<input type="checkbox" id="theme-toggle">
<span class="slider"></span>
</label>
<span>Dark</span>
</div>
</div>
</div>
</div>
<!-- Add/Edit Transaction Modal -->
<div id="add-transaction-modal" class="modal">
<div class="modal-content">
<span class="close-btn">×</span>
<h2>Add New Transaction</h2>
<form id="transaction-form">
<div class="form-group">
<label for="trans-date">Date</label>
<input type="date" id="trans-date" required>
</div>
<div class="form-group">
<label for="trans-desc">Description</label>
<input type="text" id="trans-desc" placeholder="e.g., Client Payment, Office Supplies" required>
</div>
<div class="form-group">
<label for="trans-type">Type</label>
<select id="trans-type" required>
<option value="Revenue">Revenue</option>
<option value="Expense">Expense</option>
</select>
</div>
<div class="form-group">
<label for="trans-category">Category</label>
<input type="text" id="trans-category" placeholder="e.g., Sales, Utilities, Marketing" required>
</div>
<div class="form-group">
<label for="trans-amount">Amount</label>
<input type="number" id="trans-amount" placeholder="Enter a positive number" step="0.01" required>
</div>
<button type="submit" id="save-transaction-btn">Save Transaction</button>
</form>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- DATA ---
let financialData = {
"January 2024": {
transactions: [
{ id: 1, date: "2024-01-05", description: "Alpha Corp Payment", type: "Revenue", category: "Sales", amount: 7500 },
{ id: 2, date: "2024-01-08", description: "Cloud Hosting Bill", type: "Expense", category: "Utilities", amount: -150 },
{ id: 3, date: "2024-01-12", description: "Office Supplies", type: "Expense", category: "Supplies", amount: -275.50 },
{ id: 4, date: "2024-01-20", description: "Beta LLC Project", type: "Revenue", category: "Consulting", amount: 4200 },
{ id: 5, date: "2024-01-25", description: "Marketing Campaign", type: "Expense", category: "Marketing", amount: -800 },
]
},
"February 2024": {
transactions: [
{ id: 6, date: "2024-02-02", description: "Gamma Inc. Invoice", type: "Revenue", category: "Sales", amount: 6800 },
{ id: 7, date: "2024-02-08", description: "Cloud Hosting Bill", type: "Expense", category: "Utilities", amount: -150 },
{ id: 8, date: "2024-02-15", description: "New Laptops", type: "Expense", category: "Hardware", amount: -2500 },
{ id: 9, date: "2024-02-22", description: "Freelance Services", type: "Revenue", category: "Sales", amount: 1500 },
]
},
"March 2024": {
transactions: [
{ id: 10, date: "2024-03-04", description: "Delta Project Phase 1", type: "Revenue", category: "Consulting", amount: 9500 },
{ id: 11, date: "2024-03-08", description: "Cloud Hosting Bill", type: "Expense", category: "Utilities", amount: -160 },
{ id: 12, date: "2024-03-18", description: "Software Licenses", type: "Expense", category: "Software", amount: -600 },
{ id: 13, date: "2024-03-25", description: "Client Maintenance Fee", type: "Revenue", category: "Sales", amount: 2000 },
{ id: 14, date: "2024-03-28", description: "Team Lunch", type: "Expense", category: "Misc", amount: -120.75 },
]
}
};
// --- STATE ---
let currentState = {
month: Object.keys(financialData)[0],
charts: {
flow: null,
expense: null,
}
};
// --- DOM ELEMENTS ---
const monthSelector = document.getElementById('month-selector');
const totalRevenueEl = document.getElementById('total-revenue');
const totalExpensesEl = document.getElementById('total-expenses');
const netProfitEl = document.getElementById('net-profit');
const tableBody = document.querySelector('#transactions-table tbody');
// Modal elements
const settingsModal = document.getElementById('settings-modal');
const addTransactionModal = document.getElementById('add-transaction-modal');
const settingsBtn = document.getElementById('settings-btn');
const addTransactionBtn = document.getElementById('add-transaction-btn');
const closeBtns = document.querySelectorAll('.close-btn');
const themeToggle = document.getElementById('theme-toggle');
const transactionForm = document.getElementById('transaction-form');
// --- HELPER FUNCTIONS ---
const formatCurrency = (amount) => {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
};
// --- RENDER FUNCTIONS ---
const renderDashboard = () => {
const data = financialData[currentState.month].transactions;
// 1. Update Summary Cards
const totalRevenue = data.filter(t => t.type === 'Revenue').reduce((sum, t) => sum + t.amount, 0);
const totalExpenses = data.filter(t => t.type === 'Expense').reduce((sum, t) => sum + t.amount, 0);
const netProfit = totalRevenue + totalExpenses; // Expenses are negative
totalRevenueEl.textContent = formatCurrency(totalRevenue);
totalExpensesEl.textContent = formatCurrency(Math.abs(totalExpenses));
netProfitEl.textContent = formatCurrency(netProfit);
netProfitEl.style.color = netProfit >= 0 ? 'var(--success-color)' : 'var(--danger-color)';
// 2. Render Table
renderTable(data);
// 3. Render Charts
renderFlowChart(data);
renderExpenseChart(data);
};
const renderTable = (data) => {
tableBody.innerHTML = '';
data.forEach(trans => {
const row = document.createElement('tr');
row.dataset.id = trans.id;
const amountClass = trans.type === 'Revenue' ? 'revenue-text' : 'expense-text';
row.innerHTML = `
<td contenteditable="true" data-field="date">${trans.date}</td>
<td contenteditable="true" data-field="description">${trans.description}</td>
<td contenteditable="true" data-field="category">${trans.category}</td>
<td contenteditable="true" data-field="amount" class="amount-cell ${amountClass}">${formatCurrency(trans.amount)}</td>
<td><button class="delete-btn" data-id="${trans.id}">🗑️</button></td>
`;
tableBody.appendChild(row);
});
};
const renderFlowChart = (data) => {
const revenueByDate = {};
const expensesByDate = {};
data.forEach(t => {
const day = new Date(t.date).getDate();
if (t.type === 'Revenue') {
revenueByDate[day] = (revenueByDate[day] || 0) + t.amount;
} else {
expensesByDate[day] = (expensesByDate[day] || 0) + Math.abs(t.amount);
}
});
const labels = Array.from({ length: 31 }, (_, i) => i + 1);
const revenueData = labels.map(day => revenueByDate[day] || 0);
const expenseData = labels.map(day => expensesByDate[day] || 0);
const chartData = {
labels: labels,
datasets: [
{
label: 'Revenue',
data: revenueData,
borderColor: 'var(--success-color)',
backgroundColor: 'rgba(40, 167, 69, 0.1)',
fill: true,
tension: 0.4
},
{
label: 'Expenses',
data: expenseData,
borderColor: 'var(--danger-color)',
backgroundColor: 'rgba(220, 53, 69, 0.1)',
fill: true,
tension: 0.4
}
]
};
Chart.defaults.color = getComputedStyle(document.body).getPropertyValue('--text-color');
if (currentState.charts.flow) {
currentState.charts.flow.data = chartData;
currentState.charts.flow.update();
} else {
const ctx = document.getElementById('flowChart').getContext('2d');
currentState.charts.flow = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
scales: { y: { beginAtZero: true } }
}
});
}
};
const renderExpenseChart = (data) => {
const expenseByCategory = {};
data.filter(t => t.type === 'Expense').forEach(t => {
expenseByCategory[t.category] = (expenseByCategory[t.category] || 0) + Math.abs(t.amount);
});
const labels = Object.keys(expenseByCategory);
const expenseData = Object.values(expenseByCategory);
const backgroundColors = [
'#dc3545', '#ffc107', '#6f42c1', '#fd7e14', '#20c997', '#6610f2'
];
const chartData = {
labels: labels,
datasets: [{
label: 'Expense Breakdown',
data: expenseData,
backgroundColor: backgroundColors,
hoverOffset: 4
}]
};
if (currentState.charts.expense) {
currentState.charts.expense.data = chartData;
currentState.charts.expense.update();
} else {
const ctx = document.getElementById('expenseChart').getContext('2d');
currentState.charts.expense = new Chart(ctx, {
type: 'doughnut',
data: chartData,
options: { responsive: true, maintainAspectRatio: false }
});
}
};
// --- EVENT HANDLERS ---
const handleMonthChange = (e) => {
currentState.month = e.target.value;
renderDashboard();
};
const handleTableEdit = (e) => {
if (e.target.isContentEditable) {
e.target.addEventListener('blur', () => {
const id = parseInt(e.target.parentElement.dataset.id);
const field = e.target.dataset.field;
let value = e.target.textContent;
// Find the transaction and update it
const transaction = financialData[currentState.month].transactions.find(t => t.id === id);
if (transaction) {
if (field === 'amount') {
value = parseFloat(value.replace(/[^0-9.-]+/g,""));
// Keep sign consistent with type
if (transaction.type === 'Expense' && value > 0) value = -value;
if (transaction.type === 'Revenue' && value < 0) value = -value;
}
transaction[field] = value;
renderDashboard(); // Re-render everything to reflect changes
}
}, { once: true }); // Listener removed after firing once
}
};
const handleDeleteClick = (e) => {
if (e.target.classList.contains('delete-btn')) {
const id = parseInt(e.target.dataset.id);
if (confirm('Are you sure you want to delete this transaction?')) {
let transactions = financialData[currentState.month].transactions;
financialData[currentState.month].transactions = transactions.filter(t => t.id !== id);
renderDashboard();
}
}
};
const handleThemeToggle = () => {
document.body.classList.toggle('dark-mode');
localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
// Re-render charts with new theme colors
Chart.defaults.color = getComputedStyle(document.body).getPropertyValue('--text-color');
currentState.charts.flow.update();
currentState.charts.expense.update();
};
const handleFormSubmit = (e) => {
e.preventDefault();
const type = document.getElementById('trans-type').value;
let amount = parseFloat(document.getElementById('trans-amount').value);
if (type === 'Expense' && amount > 0) {
amount = -amount;
}
const newTransaction = {
id: Date.now(), // Unique ID
date: document.getElementById('trans-date').value,
description: document.getElementById('trans-desc').value,
type: type,
category: document.getElementById('trans-category').value,
amount: amount,
};
financialData[currentState.month].transactions.push(newTransaction);
renderDashboard();
addTransactionModal.style.display = 'none';
transactionForm.reset();
};
// --- MODAL LOGIC ---
settingsBtn.onclick = () => settingsModal.style.display = 'block';
addTransactionBtn.onclick = () => {
// Set default date to today
document.getElementById('trans-date').valueAsDate = new Date();
addTransactionModal.style.display = 'block'
};
closeBtns.forEach(btn => {
btn.onclick = () => {
settingsModal.style.display = 'none';
addTransactionModal.style.display = 'none';
};
});
window.onclick = (event) => {
if (event.target == settingsModal || event.target == addTransactionModal) {
settingsModal.style.display = "none";
addTransactionModal.style.display = "none";
}
};
// --- INITIALIZATION ---
const init = () => {
// Populate month selector
Object.keys(financialData).forEach(month => {
const option = document.createElement('option');
option.value = month;
option.textContent = month;
monthSelector.appendChild(option);
});
monthSelector.value = currentState.month;
// Check for saved theme
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.body.classList.add('dark-mode');
themeToggle.checked = true;
}
// Bind Event Listeners
monthSelector.addEventListener('change', handleMonthChange);
tableBody.addEventListener('focusin', handleTableEdit);
tableBody.addEventListener('click', handleDeleteClick);
themeToggle.addEventListener('change', handleThemeToggle);
transactionForm.addEventListener('submit', handleFormSubmit);
// Initial Render
renderDashboard();
};
init();
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Interactive Financial Report Dashboard</title>
<!-- Material UI -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Material UI CDN (via UNPKG) -->
<link rel="stylesheet" href="https://unpkg.com/@mui/material@5.12.4/dist/material.min.css" />
<style>
body {
font-family: 'Roboto', sans-serif;
background: #f5f6fa;
margin: 0;
padding: 0;
}
.dashboard-container {
max-width: 1100px;
margin: 32px auto 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
padding: 32px 28px;
}
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.dashboard-title {
font-size: 2rem;
font-weight: 500;
}
.dashboard-controls {
display: flex;
gap: 18px;
align-items: center;
}
.dashboard-charts, .dashboard-tables {
margin-top: 32px;
display: flex;
gap: 36px;
flex-wrap: wrap;
}
.dashboard-card {
flex: 1 1 400px;
min-width: 350px;
background: #f8fafc;
padding: 18px;
border-radius: 10px;
box-shadow: 0 0 5px rgba(70,105,140,0.12);
margin-bottom: 20px;
}
.financial-table {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
background: #fff;
}
.financial-table th, .financial-table td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid #e3e9ef;
}
.financial-table th {
background: #f0f4f8;
font-weight: 500;
}
.edit-btn, .delete-btn {
background: none;
border: none;
color: #366eff;
cursor: pointer;
font-size: 1.1em;
margin-right: 10px;
}
.delete-btn { color: #e54848; }
.add-btn {
color: #fff;
background: #366eff;
padding: 7px 18px;
border: none;
border-radius: 5px;
font-size: 1em;
cursor: pointer;
margin-top: 12px;
transition: background 0.2s;
}
.add-btn:hover {
background: #2047b6;
}
/* Modal */
.modal-backdrop {
position:fixed; z-index:99; left:0;top:0;right:0;bottom:0;
background:rgba(20,30,40,0.12);
display:flex;
align-items:center;
justify-content:center;
}
.modal-content {
background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(60,85,100,0.24);
padding: 26px 34px; min-width:320px; max-width:95vw;
display:flex;flex-direction:column;gap:18px;
}
.modal-content label { font-weight:500;margin-bottom:4px; }
.modal-actions { margin-top:4px; display:flex; gap:10px;justify-content:flex-end;}
.input, select {
padding: 7px 12px;
border: 1px solid #d3d9e3;
border-radius:5px;
font-size: 1em;
margin-bottom:8px;
}
/* Toggle & Settings */
.setting-group { display: flex; gap: 12px; align-items:center;}
</style>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/@mui/material@5.12.4/umd/material-ui.production.min.js"></script>
<script type="text/javascript">
const { useState, useMemo, useEffect } = React;
const { Button, Switch, FormControlLabel, MenuItem, Select, InputLabel, Box, Typography, IconButton, TextField, Dialog, DialogTitle, DialogContent, DialogActions, Snackbar, Alert } = MaterialUI;
// Sample Data
const initialMonths = [
"2024-03", "2024-04", "2024-05", "2024-06", "2024-07"
];
// Each item: {id, month, type: "Income"/"Expense", category, desc, amount}
const sampleData = [
{id: 1, month: "2024-05", type: "Income", category: "Salary", desc: "Monthly Salary", amount: 5000},
{id: 2, month: "2024-05", type: "Income", category: "Investments", desc: "Dividends", amount: 320},
{id: 3, month: "2024-05", type: "Expense", category: "Rent", desc: "Apartment Rent", amount: 1400},
{id: 4, month: "2024-05", type: "Expense", category: "Groceries", desc: "Supermarket", amount: 420},
{id: 5, month: "2024-05", type: "Expense", category: "Utilities", desc: "Electricity, Water", amount: 120},
{id: 6, month: "2024-05", type: "Expense", category: "Transport", desc: "Metro, Taxi", amount: 110},
{id: 7, month: "2024-05", type: "Expense", category: "Entertainment", desc: "Cinema, Games", amount: 200},
{id: 8, month: "2024-06", type: "Income", category: "Salary", desc: "Monthly Salary", amount: 5000},
{id: 9, month: "2024-06", type: "Expense", category: "Rent", desc: "Apartment Rent", amount: 1400},
{id: 10, month: "2024-06", type: "Expense", category: "Groceries", desc: "Groceries", amount: 380},
{id: 11, month: "2024-06", type: "Expense", category: "Utilities", desc: "Gas", amount: 60},
{id: 12, month: "2024-06", type: "Expense", category: "Transport", desc: "Bus", amount: 80},
{id: 13, month: "2024-06", type: "Income", category: "Freelance", desc: "Side Project", amount: 850},
{id: 14, month: "2024-06", type: "Expense", category: "Healthcare", desc: "Pharmacy", amount: 75},
{id: 15, month: "2024-04", type: "Income", category: "Salary", desc: "Monthly Salary", amount: 5000},
{id: 16, month: "2024-04", type: "Expense", category: "Rent", desc: "Apartment Rent", amount: 1400},
{id: 17, month: "2024-04", type: "Expense", category: "Groceries", desc: "Grocery", amount: 415},
{id: 18, month: "2024-04", type: "Expense", category: "Utilities", desc: "Utility bills", amount: 99},
{id: 19, month: "2024-04", type: "Expense", category: "Transport", desc: "Bus", amount: 85},
{id: 20, month: "2024-04", type: "Expense", category: "Entertainment", desc: "Subscription", amount: 25},
{id: 21, month: "2024-07", type: "Income", category: "Salary", desc: "Monthly Salary", amount: 5000},
{id: 22, month: "2024-07", type: "Income", category: "Investments", desc: "Stock Sale", amount: 420},
{id: 23, month: "2024-07", type: "Expense", category: "Rent", desc: "Apartment Rent", amount: 1450},
{id: 24, month: "2024-07", type: "Expense", category: "Groceries", desc: "Supermarket", amount: 395},
{id: 25, month: "2024-07", type: "Expense", category: "Transport", desc: "Train", amount: 130},
{id: 26, month: "2024-03", type: "Income", category: "Salary", desc: "Monthly Salary", amount: 5000},
{id: 27, month: "2024-03", type: "Expense", category: "Rent", desc: "Apartment Rent", amount: 1400},
{id: 28, month: "2024-03", type: "Expense", category: "Groceries", desc: "Freshmarket", amount: 340},
{id: 29, month: "2024-03", type: "Expense", category: "Transport", desc: "Taxi", amount: 80},
{id: 30, month: "2024-03", type: "Expense", category: "Other", desc: "Household", amount: 150}
];
const incomeCategories = ["Salary", "Investments", "Freelance", "Other"];
const expenseCategories = ["Rent", "Groceries", "Utilities", "Transport", "Healthcare", "Entertainment", "Other"];
function formatMonthLabel(monthStr) {
const d = new Date(monthStr + "-01");
return d.toLocaleString("default", { month: "short", year: "2-digit" });
}
function getNextId(items) {
return Math.max(0, ...items.map(i=>i.id)) + 1;
}
// Modal Component
function EditModal({ open, mode, item, onSave, onClose }) {
const [type, setType] = useState(item?.type || "Expense");
const [category, setCategory] = useState(item?.category || "");
const [desc, setDesc] = useState(item?.desc || "");
const [amount, setAmount] = useState(item?.amount?.toString() || "");
useEffect(()=>{
if(open) {
setType(item?.type||"Expense");
setCategory(item?.category||"");
setDesc(item?.desc||"");
setAmount(item?.amount?.toString()||"");
}
},[open,item]);
function handleSubmit(e) {
e.preventDefault();
const vAmount = amount ? parseFloat(amount):0;
if(!category||!desc||isNaN(vAmount)||vAmount<=0) return;
onSave({
...item,
type, category, desc, amount: vAmount
});
}
return open?(
<div className="modal-backdrop" onClick={onClose}>
<form className="modal-content" onClick={e=>e.stopPropagation()} onSubmit={handleSubmit}>
<h2>{mode==='edit' ? "Edit Item" : "Add New Item"}</h2>
<label>
Type:
<select className="input" value={type} onChange={e=>setType(e.target.value)}>
<option value="Income">Income</option>
<option value="Expense">Expense</option>
</select>
</label>
<label>
Category:
<select
className="input"
value={category}
onChange={e=>setCategory(e.target.value)}
required
>
<option value="" disabled>Select Category</option>
{ (type==='Income'?incomeCategories:expenseCategories).map(cat=>
<option key={cat} value={cat}>{cat}</option>
)}
</select>
</label>
<label>
Description:
<input className="input" required
type="text" value={desc} onChange={e=>setDesc(e.target.value)}/>
</label>
<label>
Amount:
<input className="input" required
type="number" step="0.01" min="0.01" value={amount} onChange={e=>setAmount(e.target.value)}/>
</label>
<div className="modal-actions">
<button type="button" className="add-btn" onClick={onClose} style={{background:'#e3e5e8',color:'#303950'}}>Cancel</button>
<button type="submit" className="add-btn">{mode==='edit'? "Save" : "Add"}</button>
</div>
</form>
</div>
):null;
}
function DashboardSettings({ months, selectedMonth, onMonthChange, showIncomes, onShowIncomes, showExpenses, onShowExpenses, darkMode, onDarkMode }) {
return (
<div className="dashboard-controls">
<div className="setting-group">
<label htmlFor="month-selector" style={{fontWeight:500}}>Month:</label>
<select
id="month-selector"
className="input"
value={selectedMonth}
onChange={e=>onMonthChange(e.target.value)}
>
{months.map(m=>(
<option key={m} value={m}>{formatMonthLabel(m)}</option>
))}
</select>
</div>
<FormControlLabel control={
<Switch checked={showIncomes} onChange={e=>onShowIncomes(e.target.checked)} color="primary"/>
} label="Show Income"/>
<FormControlLabel control={
<Switch checked={showExpenses} onChange={e=>onShowExpenses(e.target.checked)} color="primary"/>
} label="Show Expenses"/>
<FormControlLabel control={
<Switch checked={darkMode} onChange={e=>onDarkMode(e.target.checked)} color="primary"/>
} label="Dark Mode"/>
</div>
);
}
// Chart Section
function FinancialCharts({ items, selectedMonth, months, showIncomes, showExpenses }) {
// Build trend data:
const trendData = months.map(m=>{
const ms = items.filter(it=>it.month===m);
const income = ms.filter(i=>i.type==="Income").reduce((acc,i)=>acc+i.amount,0);
const expense = ms.filter(i=>i.type==="Expense").reduce((acc,i)=>acc+i.amount,0);
return {month:m, income, expense};
});
// Pie breakdown for selected month
const monthItems = items.filter(i=>i.month===selectedMonth);
const incomeCats = {};
const expenseCats = {};
monthItems.forEach(i=>{
if(i.type==="Income") incomeCats[i.category]=(incomeCats[i.category]||0)+i.amount;
if(i.type==="Expense") expenseCats[i.category]=(expenseCats[i.category]||0)+i.amount;
});
useEffect(()=>{
// Destroy charts before re-creating to avoid overlay leak
for(const id of ["trendChart","pieIncome","pieExpense"]) {
if(window[id+"Obj"]){
window[id+"Obj"].destroy();
window[id+"Obj"]=null;
}
}
// 1. Trend
const ctx = document.getElementById("trendChart").getContext('2d');
window.trendChartObj = new Chart(ctx, {
type: 'line',
data: {
labels: months.map(formatMonthLabel),
datasets:[
showIncomes?{
label: "Income",
data: trendData.map(t=>t.income),
fill: false,
borderColor: "#15c12d",
backgroundColor: "#bcfcd7",
tension:0.3
}:null,
showExpenses?{
label: "Expense",
data: trendData.map(t=>t.expense),
fill: false,
borderColor: "#fa223f",
backgroundColor: "#fee2e6",
tension:0.3
}:null
].filter(Boolean)
},
options: {
plugins:{legend:{position:'bottom'},title:{display:true,text:'Monthly Income vs Expenses'}},
responsive:true,maintainAspectRatio:false,
scales: {y: {beginAtZero:true, ticks:{callback:v=>"$"+v}}},
animation:false
}
});
// 2. Pie Income
if(showIncomes){
const ctxPieI = document.getElementById("pieIncome").getContext('2d');
window.pieIncomeObj = new Chart(ctxPieI,{
type: 'pie',
data: {
labels: Object.keys(incomeCats),
datasets: [{
data: Object.values(incomeCats),
backgroundColor: ["#23cf71","#10b981","#8b5cf6","#22d3ee","#c026d3"]
}]
},
options: {
plugins:{legend:{position:'right'},title:{display:true,text:'Income Breakdown'}}
}
});
}
// 3. Pie Expense
if(showExpenses){
const ctxPieE = document.getElementById("pieExpense").getContext('2d');
window.pieExpenseObj = new Chart(ctxPieE,{
type: 'pie',
data: {
labels: Object.keys(expenseCats),
datasets: [{
data: Object.values(expenseCats),
backgroundColor: ["#fa223f","#fea802","#fbbf24","#86b7fe","#d946ef","#6366f1","#f43f5e"]
}]
},
options: {
plugins:{legend:{position:'right'},title:{display:true,text:'Expenses Breakdown'}}
}
});
}
// Cleanup
return ()=>{
for(const id of ["trendChart","pieIncome","pieExpense"]) {
if(window[id+"Obj"]){
window[id+"Obj"].destroy();
window[id+"Obj"]=null;
}
}
};
},[trendData, incomeCats, expenseCats, showIncomes, showExpenses, months.join(",")]);
return (
<div className="dashboard-charts">
<div className="dashboard-card" style={{minWidth:460}}>
<div style={{width:"100%",height:"260px"}}>
<canvas id="trendChart" width="430" height="260"/>
</div>
</div>
{showIncomes && (
<div className="dashboard-card" style={{maxWidth:330}}>
<canvas id="pieIncome" width="250" height="220"></canvas>
</div>
)}
{showExpenses && (
<div className="dashboard-card" style={{maxWidth:330}}>
<canvas id="pieExpense" width="250" height="220"></canvas>
</div>
)}
</div>
);
}
// Table Section
function FinancialTable({ items, type, onEdit, onDelete }) {
return (
<table className="financial-table">
<thead>
<tr>
<th>Category</th>
<th>Description</th>
<th>Amount</th>
<th style={{textAlign:'center'}}>Action</th>
</tr>
</thead>
<tbody>
{items.length===0 ? (
<tr><td colSpan={4} style={{textAlign:'center', color:'#888'}}>No {type==='Income'?"income":"expense"} recorded in this month.</td></tr>
):
items.map(item=>(
<tr key={item.id}>
<td>{item.category}</td><td>{item.desc}</td>
<td style={{color:type==="Income"?"#1cb169":"#f3253d"}}>${item.amount.toLocaleString(undefined,{maximumFractionDigits:2})}</td>
<td style={{textAlign:"center"}}>
<button className="edit-btn" title="Edit" onClick={()=>onEdit(item)}><span className="material-icons">edit</span></button>
<button className="delete-btn" title="Delete" onClick={()=>onDelete(item)}><span className="material-icons">delete</span></button>
</td>
</tr>
))}
</tbody>
</table>
);
}
// Main Dashboard
function FinancialDashboard() {
// States
const [data, setData] = useState([...sampleData]);
const [months, setMonths] = useState([...initialMonths].sort());
const [selectedMonth, setSelectedMonth] = useState(months[months.length-2]||months[0]);
const [showIncomes, setShowIncomes] = useState(true);
const [showExpenses, setShowExpenses] = useState(true);
const [darkMode, setDarkMode] = useState(false);
const [editItem, setEditItem] = useState(null);
const [editMode, setEditMode] = useState("add");
const [editOpen, setEditOpen] = useState(false);
const [snack, setSnack] = useState({open:false, message:'', color:'success'});
// Filtered for current month:
const itemsOfMonth = useMemo(()=>
data.filter(i=>i.month===selectedMonth),[data,selectedMonth]
);
const incomes = useMemo(()=> itemsOfMonth.filter(i=>i.type==="Income"),[itemsOfMonth]);
const expenses = useMemo(()=>itemsOfMonth.filter(i=>i.type==="Expense"),[itemsOfMonth]);
const totalIncome = incomes.reduce((acc,i)=>acc+i.amount,0);
const totalExpense = expenses.reduce((acc,i)=>acc+i.amount,0);
const net = totalIncome-totalExpense;
// Table edit handlers
function showEditModal(mode,item=null) {
setEditMode(mode);
setEditItem(item||{month: selectedMonth});
setEditOpen(true);
}
function closeEditModal(){
setEditOpen(false);
}
function handleSaveEdit(newItem){
if(editMode==="edit") {
setData(d=>d.map(i=>i.id!==newItem.id?i:{...i, ...newItem}));
setSnack({open:true, message:"Item updated!", color:'success'});
} else {
const id = getNextId(data);
setData(d=>[...d, {...newItem, id, month:selectedMonth}]);
// Add new month if necessary
if(!months.includes(selectedMonth)) {
setMonths([...months, selectedMonth].sort());
}
setSnack({open:true, message:"Item added!", color:'success'});
}
closeEditModal();
}
function handleDelete(item){
if(window.confirm("Delete this item?")) {
setData(d=>d.filter(i=>i.id!==item.id));
setSnack({open:true, message:"Item deleted.", color:'info'});
}
}
useEffect(()=>{
document.body.style.background = darkMode ? "#1a2332" : "#f5f6fa";
document.body.style.color = darkMode?"#eaeaea":"#222";
document.querySelector('.dashboard-container').style.background = darkMode?'#222c3c':'#fff';
},[darkMode]);
// Add new month from dashboard
function handleAddMonth() {
const d = prompt("Enter new month (YYYY-MM):","");
if(d && /^\d{4}\-\d{2}$/.test(d)) {
if(!months.includes(d)) {
setMonths(ms=>[...ms,d].sort());
setSelectedMonth(d);
}
}
}
return (
<div className="dashboard-container">
<div className="dashboard-header">
<span className="dashboard-title">Financial Report Dashboard</span>
<div style={{display:'flex',gap:16}}>
<DashboardSettings
months={months}
selectedMonth={selectedMonth}
onMonthChange={setSelectedMonth}
showIncomes={showIncomes}
onShowIncomes={setShowIncomes}
showExpenses={showExpenses}
onShowExpenses={setShowExpenses}
darkMode={darkMode}
onDarkMode={(dm)=>setDarkMode(dm)}
/>
<button className="add-btn" style={{marginLeft:6}} onClick={handleAddMonth}>+ Month</button>
</div>
</div>
<FinancialCharts
items={data}
selectedMonth={selectedMonth}
months={months}
showIncomes={showIncomes}
showExpenses={showExpenses}
/>
<div className="dashboard-tables" style={{gap:32}}>
{showIncomes && (
<div className="dashboard-card" style={{maxWidth:420}}>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
<strong style={{fontSize:'1.13em'}}>Income</strong>
<span style={{color:'#1cb169',fontWeight:500}}>Total: ${totalIncome.toLocaleString(undefined,{maximumFractionDigits:2})}</span>
</div>
<FinancialTable
items={incomes}
type="Income"
onEdit={item=>showEditModal('edit',item)}
onDelete={handleDelete}
/>
<button className="add-btn" style={{background:'#1cb169',marginTop:8}} onClick={()=>showEditModal('add',{type:'Income', category:incomeCategories[0], month:selectedMonth})}>
+ Add Income
</button>
</div>
)}
{showExpenses && (
<div className="dashboard-card" style={{maxWidth:420}}>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
<strong style={{fontSize:'1.13em'}}>Expenses</strong>
<span style={{color:'#f3253d',fontWeight:500}}>Total: ${totalExpense.toLocaleString(undefined,{maximumFractionDigits:2})}</span>
</div>
<FinancialTable
items={expenses}
type="Expense"
onEdit={item=>showEditModal('edit',item)}
onDelete={handleDelete}
/>
<button className="add-btn" style={{background:'#f3253d',marginTop:8}} onClick={()=>showEditModal('add',{type:'Expense', category:expenseCategories[0], month:selectedMonth})}>
+ Add Expense
</button>
</div>
)}
<div className="dashboard-card" style={{minWidth:200,maxWidth:260,flex:'0 0 200px',alignItems:'center',justifyContent:'center'}}>
<div style={{fontWeight:500,fontSize:'1.13em',marginBottom:8}}>Net Balance</div>
<div style={{fontSize:'2.1em',fontWeight:700,color: net>=0?"#14cf73":"#ff355b"}}>${net.toLocaleString(undefined,{maximumFractionDigits:2})}</div>
</div>
</div>
<EditModal
open={editOpen}
mode={editMode}
item={editItem}
onSave={handleSaveEdit}
onClose={closeEditModal}
/>
<Snackbar open={snack.open} autoHideDuration={1950} onClose={()=>setSnack(s=>({...s,open:false}))}>
<Alert severity={snack.color}>{snack.message}</Alert>
</Snackbar>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<FinancialDashboard/>);
</script>
</body>
</html>
```
Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Financial Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/datatables.net"></script>
<style>
body {
padding: 20px;
background-color: #f8f9fa;
}
.chart-container, .table-container {
padding: 15px;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
margin: 15px 0;
}
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="dashboard-header">
<h1>Financial Dashboard</h1>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#settingsModal">Settings</button>
<select id="monthSelector" class="form-select form-select-sm" style="width: auto;">
<option value="2023-01">January 2023</option>
<option value="2023-02">February 2023</option>
<option value="2023-03">March 2023</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6 chart-container">
<canvas id="financialChart"></canvas>
</div>
<div class="col-md-6 table-container">
<table id="transactionsTable" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Description</th>
<th>Category</th>
<th>Type</th>
<th>Amount</th>
<th>Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form id="editForm">
<div class="modal-header">
<h5 class="modal-title">Edit Item</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Description</label>
<input type="text" class="form-control" name="description">
</div>
<div class="mb-3">
<label class="form-label">Category</label>
<input type="text" class="form-control" name="category">
</div>
<div class="mb-3">
<label class="form-label">Type</label>
<select class="form-select" name="type">
<option value="Income">Income</option>
<option value="Expense">Expense</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Amount</label>
<input type="number" class="form-control" name="amount" step="0.01">
</div>
<div class="mb-3">
<label class="form-label">Date</label>
<input type="date" class="form-control" name="date">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- Settings Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form id="settingsForm">
<div class="modal-header">
<h5 class="modal-title">Dashboard Settings</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Default Chart Type</label>
<select class="form-select" name="chartType">
<option value="bar">Bar Chart</option>
<option value="line">Line Chart</option>
<option value="pie">Pie Chart</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save Settings</button>
</div>
</form>
</div>
</div>
</div>
<script>
// Sample Data
const data = {
'2023-01': [
{id: 1, description: 'Salary', category: 'Income', type: 'Income', amount: 3000, date: '2023-01-15'},
{id: 2, description: 'Groceries', category: 'Food', type: 'Expense', amount: 150.99, date: '2023-01-16'},
{id: 3, description: 'Rent', category: 'Housing', type: 'Expense', amount: 1200, date: '2023-01-01'}
],
'2023-02': [
{id: 4, description: 'Freelance', category: 'Income', type: 'Income', amount: 800, date: '2023-02-20'},
{id: 5, description: 'Utilities', category: 'Housing', type: 'Expense', amount: 300, date: '2023-02-10'},
{id: 6, description: 'Restaurant', category: 'Food', type: 'Expense', amount: 45.50, date: '2023-02-22'}
],
'2023-03': [
{id: 7, description: 'Bonus', category: 'Income', type: 'Income', amount: 500, date: '2023-03-05'},
{id: 8, description: 'Office Supplies', category: 'Work', type: 'Expense', amount: 75, date: '2023-03-12'},
{id: 9, description: 'Entertainment', category: 'Fun', type: 'Expense', amount: 60, date: '2023-03-30'}
]
};
let currentMonth = '2023-01';
let chartType = localStorage.getItem('chartType') || 'bar';
let transactionsTable, financialChart;
function initializeTransactionTable(month) {
if (transactionsTable) transactionsTable.clear().draw();
transactionsTable = $('#transactionsTable').DataTable({
data: data[month],
columns: [
{data: 'description'},
{data: 'category'},
{data: 'type'},
{data: 'amount', render: $.fn.dataTable.render.number(',', '.', 2, '$')},
{data: 'date'},
{data: null,
render: (data, type, row) =>
`<button class="edit btn btn-sm btn-primary" data-id="${row.id}">Edit</button>`
}
],
destroy: true,
paging: false
});
$('#transactionsTable tbody').off('click', '.edit').on('click', '.edit', function () {
const id = $(this).data('id');
const item = data[currentMonth].find(d => d.id === id);
$('#editForm').find('input[name="description"]').val(item.description);
$('#editForm').find('input[name="category"]').val(item.category);
$('#editForm').find('select[name="type"]').val(item.type);
$('#editForm').find('input[name="amount"]').val(item.amount);
$('#editForm').find('input[name="date"]').val(item.date);
$('#editModal').data('id', id).modal('show');
});
}
function calculateTotals(month) {
const totals = { income: 0, expense: 0 };
data[month].forEach(item => {
item.type === 'Income' ? totals.income += item.amount : totals.expense += item.amount;
});
return totals;
}
function initializeChart(month) {
const totals = calculateTotals(month);
const config = {
type: chartType,
data: {
labels: ['Income', 'Expenses'],
datasets: [{
label: 'Amount ($)',
data: [totals.income, totals.expense],
backgroundColor: ['#28a745', '#dc3545'],
borderColor: ['#28a745', '#dc3545'],
borderWidth: 1
}]
},
options: {
plugins: {
legend: { position: 'right' },
tooltip: { callbacks: {label: (ctx) => `$${ctx.parsed}`}}
}
}
};
if (financialChart) financialChart.destroy();
financialChart = new Chart(document.getElementById('financialChart'), config);
}
function setupEventListeners() {
$('#monthSelector').on('change', function () {
currentMonth = this.value;
initializeTransactionTable(currentMonth);
initializeChart(currentMonth);
});
$('#editForm').on('submit', function (e) {
e.preventDefault();
const id = $('#editModal').data('id');
const itemIndex = data[currentMonth].findIndex(d => d.id === id);
const formData = $(this).serializeArray();
const newData = {};
formData.forEach(field => {
newData[field.name] =
field.name === 'amount' ? parseFloat(field.value) : field.value;
});
Object.assign(data[currentMonth][itemIndex], newData);
$('#editModal').modal('hide');
initializeTransactionTable(currentMonth);
initializeChart(currentMonth);
});
$('#settingsForm').on('submit', function (e) {
e.preventDefault();
chartType = $('#settingsForm select[name="chartType"]').val();
localStorage.setItem('chartType', chartType);
initializeChart(currentMonth);
$('#settingsModal').modal('hide');
});
$('#settingsModal').on('show.bs.modal', function () {
$('#settingsForm select[name="chartType"]').val(chartType);
});
}
function initialize() {
setupEventListeners();
initializeTransactionTable(currentMonth);
initializeChart(currentMonth);
}
document.addEventListener('DOMContentLoaded', initialize);
</script>
</body>
</html>
```Drag to resize
Sure! Below is a full HTML example that constructs an interactive financial report. This example uses the Chart.js library for creating charts and a simple approach to display financial data in a table. It includes elements for dashboard settings and editing capabilities.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Financial Report</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: #f4f4f9;
}
.container {
max-width: 1200px;
margin: auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.dashboard-controls {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.dashboard-controls button {
padding: 10px 20px;
background: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.financial-data {
display: flex;
justify-content: space-between;
}
.financial-data table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.financial-data table, .financial-data th, .financial-data td {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
}
.chart-container {
width: 50%;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="dashboard-controls">
<h1>Financial Dashboard</h1>
<div>
<button onclick="editData()">Edit Data</button>
</div>
</div>
<div class="financial-data">
<table id="financialTable">
<thead>
<tr>
<th>Month</th>
<th>Revenue</th>
<th>Expenses</th>
<th>Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td contenteditable="true">$1000</td>
<td contenteditable="true">$200</td>
<td>$800</td>
</tr>
<tr>
<td>February</td>
<td contenteditable="true">$1200</td>
<td contenteditable="true">$250</td>
<td>$950</td>
</tr>
<tr>
<td>March</td>
<td contenteditable="true">$1500</td>
<td contenteditable="true">$300</td>
<td>$1200</td>
</tr>
</tbody>
</table>
<div class="chart-container">
<canvas id="financialChart"></canvas>
</div>
</div>
</div>
<script>
const ctx = document.getElementById('financialChart').getContext('2d');
const financialData = {
labels: ['January', 'February', 'March'],
datasets: [{
label: 'Revenue',
data: [1000, 1200, 1500],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}, {
label: 'Expenses',
data: [200, 250, 300],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: 'Profit',
data: [800, 950, 1200],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
};
const financialChart = new Chart(ctx, {
type: 'bar',
data: financialData,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Financial Performance'
}
}
}
});
function editData() {
const table = document.getElementById('financialTable');
const rows = table.getElementsByTagName('tr');
const newData = {
labels: [],
revenues: [],
expenses: [],
profits: []
};
for (let i = 1; i < rows.length; i++) {
const cells = rows[i].getElementsByTagName('td');
newData.labels.push(cells[0].innerText);
newData.revenues.push(parseInt(cells[1].innerText.replace('$', '')));
newData.expenses.push(parseInt(cells[2].innerText.replace('$', '')));
newData.profits.push(parseInt(cells[3].innerText.replace('$', '')));
}
financialChart.data.labels = newData.labels;
financialChart.data.datasets[0].data = newData.revenues;
financialChart.data.datasets[1].data = newData.expenses;
financialChart.data.datasets[2].data = newData.profits;
financialChart.update();
}
</script>
</body>
</html>
```
This HTML code sets up a simple dashboard where the financial data can be edited directly in the table, and the changes will be reflected in the charts when the "Edit Data" button is clicked. The Chart.js library is used for rendering the bar charts to visualize the financial data.Drag to resize
Below is an example of an interactive financial report dashboard using HTML, CSS, and JavaScript. For simplicity, this dashboard will include basic features such as displaying financial data in charts and tables, switching between months, and some basic dashboard settings. We will use Chart.js for creating charts and Bootstrap for styling.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Financial Report Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
}
.dashboard-settings {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2>Financial Report Dashboard</h2>
<div class="row">
<div class="col-md-6">
<canvas id="revenueChart"></canvas>
</div>
<div class="col-md-6">
<canvas id="expenseChart"></canvas>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12">
<table class="table table-striped" id="financialTable">
<thead>
<tr>
<th>Month</th>
<th>Revenue</th>
<th>Expense</th>
<th>Profit</th>
<th>Action</th>
</tr>
</thead>
<tbody id="financialTableBody">
<!-- Data will be populated here -->
</tbody>
</table>
</div>
</div>
<div class="row dashboard-settings">
<div class="col-md-4">
<select id="monthSelector" class="form-select">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<!-- Add more months as needed -->
</select>
</div>
<div class="col-md-4">
<button class="btn btn-primary" onclick="editFinancialData()">Edit</button>
</div>
<div class="col-md-4">
<button class="btn btn-success" onclick="saveFinancialData()">Save</button>
</div>
</div>
</div>
<script>
// Sample financial data
let financialData = [
{ month: 'January', revenue: 10000, expense: 8000 },
{ month: 'February', revenue: 12000, expense: 9000 },
{ month: 'March', revenue: 15000, expense: 10000 },
// Add more data as needed
];
// Populate table with data
function populateTable() {
let tbody = document.getElementById('financialTableBody');
tbody.innerHTML = '';
financialData.forEach((data, index) => {
let row = document.createElement('tr');
row.innerHTML = `
<td>${data.month}</td>
<td contenteditable="false">${data.revenue}</td>
<td contenteditable="false">${data.expense}</td>
<td>${data.revenue - data.expense}</td>
<td><button class="btn btn-sm btn-secondary" onclick="editRow(${index})">Edit</button></td>
`;
tbody.appendChild(row);
});
}
// Chart data and options
let ctx1 = document.getElementById('revenueChart').getContext('2d');
let ctx2 = document.getElementById('expenseChart').getContext('2d');
let chartData = {
labels: financialData.map(data => data.month),
datasets: [{
label: 'Revenue',
data: financialData.map(data => data.revenue),
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
};
let chartOptions = {
scales: {
y: {
beginAtZero: true
}
}
};
let revenueChart = new Chart(ctx1, {
type: 'bar',
data: chartData,
options: chartOptions
});
chartData.datasets[0].label = 'Expense';
chartData.datasets[0].data = financialData.map(data => data.expense);
chartData.datasets[0].backgroundColor = 'rgba(54, 162, 235, 0.2)';
chartData.datasets[0].borderColor = 'rgba(54, 162, 235, 1)';
let expenseChart = new Chart(ctx2, {
type: 'bar',
data: chartData,
options: chartOptions
});
// Update chart data based on selected month
document.getElementById('monthSelector').addEventListener('change', (e) => {
let selectedMonth = e.target.value;
let filteredData = financialData.filter(data => data.month === selectedMonth);
revenueChart.data.datasets[0].data = [filteredData[0].revenue];
revenueChart.data.labels = [filteredData[0].month];
expenseChart.data.datasets[0].data = [filteredData[0].expense];
expenseChart.data.labels = [filteredData[0].month];
revenueChart.update();
expenseChart.update();
});
// Edit financial data
function editFinancialData() {
let rows = document.getElementById('financialTableBody').children;
for (let row of rows) {
row.cells[1].contentEditable = 'true';
row.cells[2].contentEditable = 'true';
}
}
// Save financial data
function saveFinancialData() {
let rows = document.getElementById('financialTableBody').children;
for (let i = 0; i < rows.length; i++) {
financialData[i].revenue = parseFloat(rows[i].cells[1].textContent);
financialData[i].expense = parseFloat(rows[i].cells[2].textContent);
rows[i].cells[3].textContent = financialData[i].revenue - financialData[i].expense;
rows[i].cells[1].contentEditable = 'false';
rows[i].cells[2].contentEditable = 'false';
}
updateCharts();
}
// Update charts with new data
function updateCharts() {
revenueChart.data.datasets[0].data = financialData.map(data => data.revenue);
revenueChart.data.labels = financialData.map(data => data.month);
expenseChart.data.datasets[0].data = financialData.map(data => data.expense);
expenseChart.data.labels = financialData.map(data => data.month);
revenueChart.update();
expenseChart.update();
}
// Edit row
function editRow(index) {
let row = document.getElementById('financialTableBody').children[index];
row.cells[1].contentEditable = 'true';
row.cells[2].contentEditable = 'true';
}
// Initialize table
populateTable();
</script>
</body>
</html>
```
This example provides a basic interactive financial dashboard. You can extend it by adding more features such as data validation, more complex data editing, and additional chart types. The dashboard allows users to view financial data by month, edit the data directly in the table, and save changes, which updates the charts accordingly.Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>Interactive Financial Report Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { padding: 20px; }
.dashboard-container { display: flex; gap: 20px; }
.sidebar { width: 220px; }
.chart-container { flex: 1; }
.edit-input { width: 80px; border: 1px solid #ced4da; padding: 4px; }
</style>
</head>
<body>
<div class="dashboard-container">
<div class="sidebar">
<h5>Dashboard Settings</h5>
<div class="mb-3">
<label class="form-label">Select Month</label>
<select class="form-select" id="monthSelector">
<option value="2024-01">January</option>
<option value="2024-02">February</option>
<option value="2024-03">March</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Currency</label>
<select class="form-select" id="currencySelector">
<option value="$">$ USD</option>
<option value="€">€ EUR</option>
<option value="£">£ GBP</option>
</select>
</div>
<button class="btn btn-primary w-100 mb-3" onclick="addNewItem()">Add New Item</button>
</div>
<div class="chart-container">
<canvas id="financialChart"></canvas>
<div class="table-responsive mt-4">
<table class="table table-bordered" id="dataTable">
<thead>
<tr>
<th>Category</th>
<th>Income</th>
<th>Expenses</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Salaries</td>
<td><input class="edit-input" data-type="income" value="5000"></td>
<td><input class="edit-input" data-type="expense" value="3000"></td>
<td><button class="btn btn-sm btn-danger" onclick="deleteItem(this)">Delete</button></td>
</tr>
<tr>
<td>Office</td>
<td><input class="edit-input" data-type="income" value="2000"></td>
<td><input class="edit-input" data-type="expense" value="1200"></td>
<td><button class="btn btn-sm btn-danger" onclick="deleteItem(this)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
let chart;
const currencySymbol = document.getElementById('currencySelector');
const incomeData = [5000, 2000];
const expenseData = [3000, 1200];
const categories = ['Salaries', 'Office'];
function updateChart() {
if (chart) {
chart.destroy();
}
const ctx = document.getElementById('financialChart').getContext('2d');
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: categories,
datasets: [
{
label: 'Income',
data: incomeData,
backgroundColor: '#28a745'
},
{
label: 'Expenses',
data: expenseData,
backgroundColor: '#dc3545'
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top'
},
tooltip: {
callbacks: {
label: function(context) {
return context.parsed.y.toLocaleString('en-US') + ' ' + currencySymbol.value;
}
}
}
}
}
});
}
function addNewItem() {
const tableBody = document.querySelector('#dataTable tbody');
const newRow = document.createElement('tr');
const categoryName = 'New Item ' + (categories.length + 1);
newRow.innerHTML = `
<td>${categoryName}</td>
<td><input class="edit-input" data-type="income" value="0"></td>
<td><input class="edit-input" data-type="expense" value="0"></td>
<td><button class="btn btn-sm btn-danger" onclick="deleteItem(this)">Delete</button></td>
`;
tableBody.appendChild(newRow);
categories.push(categoryName);
incomeData.push(0);
expenseData.push(0);
// Add event listeners to new inputs
const incomeInput = newRow.querySelector('[data-type="income"]');
const expenseInput = newRow.querySelector('[data-type="expense"]');
incomeInput.addEventListener('blur', function() {
incomeData[categories.indexOf(categoryName)] = parseFloat(this.value);
updateChart();
});
expenseInput.addEventListener('blur', function() {
expenseData[categories.indexOf(categoryName)] = parseFloat(this.value);
updateChart();
});
updateChart();
}
function deleteItem(button) {
const row = button.closest('tr');
const index = Array.from(row.parentNode.children).indexOf(row);
categories.splice(index, 1);
incomeData.splice(index, 1);
expenseData.splice(index, 1);
row.remove();
updateChart();
}
document.getElementById('monthSelector').addEventListener('change', () => {
// In a real implementation, this would fetch data for the selected month
alert('Switched to ' + document.getElementById('monthSelector').value);
});
document.getElementById('currencySelector').addEventListener('change', () => {
updateChart();
});
// Initialize chart
updateChart();
// Add event listeners to existing inputs
document.querySelectorAll('.edit-input').forEach((input, index) => {
if (input.hasAttribute('data-type')) {
const type = input.getAttribute('data-type');
input.addEventListener('blur', function() {
const value = parseFloat(this.value);
if (type === 'income') {
incomeData[index] = value;
} else if (type === 'expense') {
expenseData[index] = value;
}
updateChart();
});
}
});
</script>
</body>
</html>Drag to resize