Autoparts-DB/DASHBOARD_GUIDE.md

Vehicle Database Dashboard - Complete Solution

Overview

I have created a complete web-based dashboard for searching and filtering your vehicle database with the following components:

1. Web Dashboard Interface - A responsive, modern UI built with HTML, CSS, and JavaScript
2. Flask Backend - API server that connects to your SQLite database
3. Filtering System - Search by brand, model, year, and engine
4. Data Visualization - Display vehicle details in an attractive card layout

Features

• Four-way Filtering: Filter vehicles by brand, model, year, and engine type
• Responsive Design: Works on desktop, tablet, and mobile devices
• Real-time Updates: Filters update immediately when selections change
• Detailed Information: Shows power, displacement, cylinders, fuel type, trim, drivetrain, and transmission
• Modern UI: Bootstrap-based interface with cards, badges, and icons

Architecture

Frontend

• index.html: Main dashboard page with Bootstrap styling
• dashboard.js: JavaScript for UI interactions and API calls

Backend

• server.py: Flask application serving the dashboard and API
• API endpoints for brands, models, years, engines, and vehicles

How to Use

Starting the Dashboard

1. Navigate to the dashboard directory:

   cd /home/Autopartes/dashboard
   

2. Start the server:

   python3 server.py
   

3. Open your web browser and go to: http://localhost:5000

Using the Dashboard

1. On the left panel, use the dropdowns to select filters:

   • Brand: Select a vehicle manufacturer
   • Model: Select a model (updates based on selected brand)
   • Year: Select a production year
   • Engine: Select an engine type

2. Click "Search Vehicles" to apply filters

3. Results appear in the right panel with detailed information

4. Use "Reset Filters" to clear all selections

API Endpoints

The dashboard uses these API endpoints:

• GET /api/brands - Get all vehicle brands
• GET /api/models?brand=[brand] - Get models for a specific brand
• GET /api/years - Get all years
• GET /api/engines - Get all engines
• GET /api/vehicles?[filters] - Search vehicles with optional filters

Files Created

dashboard/
├── index.html              # Main dashboard page
├── dashboard.js           # Frontend JavaScript
├── server.py              # Flask backend
├── requirements.txt       # Python dependencies
├── start_dashboard.sh     # Startup script
├── README.md             # Documentation
└── static/               # Static files directory (created by Flask)

Customization

You can customize the dashboard by:

• Modifying the CSS styles in index.html
• Adding more filters in the JavaScript
• Changing the layout in index.html
• Adding more vehicle details in the display

Troubleshooting

• If the server won't start, ensure Flask is installed: sudo apt-get install python3-flask
• If filters don't populate, check that your vehicle database has data
• If the page doesn't load, verify that the database file exists at ../vehicle_database/vehicle_database.db
• Check the browser console for JavaScript errors
• Check the terminal for server errors

Next Steps

1. Start the dashboard server
2. Browse your vehicle data using the intuitive interface
3. Add more data to your database using the manual input tools
4. Customize the dashboard to meet your specific needs

The dashboard is now ready to use and provides a powerful interface for exploring your vehicle database!