Global Sales Performance Dashboard - Act as an Expert Front-End Developer and Data Visualization Specialist. Your task is to generate a fully...
Lovable
Enhanced
Minimalist
light mode
5h ago
Generated Prompt
## APPLICATION OVERVIEW
The application is a fully responsive single-page dashboard designed to visualize retail sales data. It provides users with interactive charts and key performance indicators (KPIs) that help analyze sales performance across various categories, regions, and time periods.
## CORE FEATURES
1. **Header Navigation**: A clean top navigation bar that includes the title "Global Sales Performance Dashboard" and allows users to filter data by region and category.
2. **KPI Summary Cards**: Four distinct summary cards displaying total sales, total profit, total orders, and average profit margin, all calculated from the provided dataset.
3. **Interactive Visualizations**: Three charts generated using Chart.js to visualize sales by category, profit trends, and sales distribution by region.
4. **Recent Transactions Table**: A styled HTML table showing the latest five orders, including order ID, date, customer, product, sales, and profit, with color coding for profit values.
5. **Responsive Design**: The layout adapts to mobile screens, ensuring a pleasant user experience on any device.
6. **Tooltips and Animations**: Interactive tooltips on charts and subtle entrance animations for KPI cards enhance user engagement.
## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout consists of a header at the top, KPI summary cards in a grid format, followed by interactive visualizations, and a recent transactions table at the bottom.
## TECHNICAL REQUIREMENTS
- **Framework**: Vanilla HTML/CSS/JS
- **Styling**: Tailwind CSS via CDN
- **Charting Library**: Chart.js via CDN
- **Icons**: FontAwesome or Heroicons via CDN
## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create an HTML file and link to Tailwind CSS, Chart.js, and FontAwesome or Heroicons CDNs in the `<head>`.
2. **Build the Header**: Create a top navigation bar with the title and a mock date-picker or filter dropdowns for region and category.
3. **Create KPI Summary Cards**: Use Tailwind CSS classes to style four cards at the top, calculating values from mock data.
4. **Implement the Charts**: Set up three divs for the charts, initialize Chart.js with the appropriate configurations, and bind mock data to each chart.
5. **Design the Recent Transactions Table**: Create a table to display the latest orders, applying styles to differentiate profit values visually.
6. **Add Responsiveness**: Use Tailwind CSS grid utilities to ensure the layout collapses correctly on mobile devices.
7. **Enhance Interactivity**: Enable tooltips on charts and add animations for KPI cards and charts loading.
## USER EXPERIENCE
Users will interact with the dashboard primarily through the header navigation to filter data. The KPIs will provide immediate insights into performance, while the charts will allow for deeper analysis of trends and distributions. The recent transactions table will offer a quick view of the latest orders, with visual cues for performance metrics. Overall, the minimalist design and responsive layout ensure a clean and engaging user experience across all devices.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global Sales Performance Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f9fafb;
}
.card {
border-radius: 8px;
background-color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<header class="bg-gray-100 p-4">
<h1 class="text-2xl font-bold">Global Sales Performance Dashboard</h1>
<div class="mt-2">
<select class="border rounded-md">
<option>Region</option>
<option>North</option>
<option>Central</option>
<option>South</option>
</select>
<select class="border rounded-md ml-2">
<option>Category</option>
<option>Office Supplies</option>
<option>Furniture</option>
<option>Technology</option>
</select>
</div>
</header>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 p-4">
<div class="card p-4">
<h2>Total Sales</h2>
<p id="totalSales">$0</p>
</div>
<div class="card p-4 text-green-600">
<h2>Total Profit</h2>
<p id="totalProfit">$0</p>
</div>
<div class="card p-4">
<h2>Total Orders</h2>
<p id="totalOrders">0</p>
</div>
<div class="card p-4">
<h2>Average Profit Margin</h2>
<p id="avgProfitMargin">0%</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
<canvas id="salesByCategory"></canvas>
<canvas id="profitTrend"></canvas>
<canvas id="salesByRegion"></canvas>
</div>
<div class="p-4">
<h2 class="text-xl">Recent Transactions</h2>
<table class="min-w-full border border-gray-200">
<thead>
<tr>
<th class="border border-gray-300">Order ID</th>
<th class="border border-gray-300">Date</th>
<th class="border border-gray-300">Customer</th>
<th class="border border-gray-300">Product</th>
<th class="border border-gray-300">Sales</th>
<th class="border border-gray-300">Profit</th>
</tr>
</thead>
<tbody>
<!-- Example Data -->
<tr>
<td class="border border-gray-300">1</td>
<td class="border border-gray-300">2023-01-01</td>
<td class="border border-gray-300">John Doe</td>
<td class="border border-gray-300">Office Supplies</td>
<td class="border border-gray-300">$100</td>
<td class="border border-gray-300 text-red-600">-$20</td>
</tr>
<!-- More rows can be added here -->
</tbody>
</table>
</div>
<script>
// Mock data
const data = [
{ orderDate: "2023-01-01", customerName: "John Doe", city: "New York", country: "USA", region: "North", segment: "Consumer", category: "Office Supplies", subCategory: "Binders", productName: "Binder A", cost: 20, sales: 100, profit: -20, quantity: 5 },
// More mock data...
];
// Logic for calculating total sales, profits, etc.
const totalSales = data.reduce((acc, curr) => acc + curr.sales, 0);
const totalProfit = data.reduce((acc, curr) => acc + curr.profit, 0);
const totalOrders = data.length;
const avgProfitMargin = (totalProfit / totalSales * 100).toFixed(2) + '%';
document.getElementById("totalSales").innerText = `$${totalSales.toLocaleString()}`;
document.getElementById("totalProfit").innerText = `$${totalProfit.toLocaleString()}`;
document.getElementById("totalOrders").innerText = totalOrders;
document.getElementById("avgProfitMargin").innerText = avgProfitMargin;
// Initialize charts using Chart.js
const salesByCategoryCtx = document.getElementById('salesByCategory').getContext('2d');
const profitTrendCtx = document.getElementById('profitTrend').getContext('2d');
const salesByRegionCtx = document.getElementById('salesByRegion').getContext('2d');
const salesByCategoryChart = new Chart(salesByCategoryCtx, {
type: 'bar',
data: {
labels: ['Office Supplies', 'FurnitureLoved by thousands of makers from
From early prototypes to real products, they started here.
How it works
Generate optimized prompts for your vibe coding projects
1
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
2
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
3
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!