| --- |
| license: mit |
| title: DTE Punjab — Training Dashboard v2 |
| sdk: docker |
| colorFrom: yellow |
| short_description: A full-featured Flask dashboard for the BDDS, DTE, NIELIT. |
| --- |
| |
|
|
|
|
| # 🎓 DTE Punjab — Training Dashboard v2 |
|
|
| A comprehensive, full-featured Flask-based analytical dashboard designed for the Big Data & Data Science Training Programme conducted for the Department of Technical Education and Industrial Training (DTE), Government of Punjab. |
|
|
| ## 🌐 Live Demo |
| [Experience the Dashboard Live](https://princelv-dte.hf.space/) |
|
|
|
|
| ## 🌐 GITHUB REPO: |
|
|
| https://github.com/lovnishverma/dte_dashboard |
| |
| --- |
| |
| <img width="1910" height="962" alt="image" src="https://github.com/user-attachments/assets/4c9a6b22-f98f-4022-aef7-03c96a98b970" /> |
| |
| ## ✨ Key Features |
| |
| * **📊 Comprehensive Analytics:** Real-time KPI cards, batch overview strips, and multi-dimensional mini-charts (gender/batch/branch splits). |
| * **📈 Advanced Visualizations:** Detailed district bar charts, branch/gender doughnuts, designation breakdowns, and batch-gender grouped metrics using Chart.js. |
| * **💡 Smart Insights Engine:** Auto-generated analytical insight cards with animated progress bars evaluating demographic and geographic distributions. |
| * **🗺️ Interactive Geospatial Mapping:** Clickable bubble map plotting participant density across Punjab districts. Features an integrated Google Maps fallback and click-to-open functionality for specific polytechnic colleges. |
| * **🗄️ Dynamic Participant Data:** Searchable, filterable (by batch, designation, district), and fully sortable paginated data table. |
| * **📥 Export Capabilities:** One-click CSV generation for both complete datasets and actively filtered views. |
| * **🌓 Modern UI/UX:** Fully responsive, premium interface with a persistent Dark / Light mode toggle powered by vanilla CSS variables and `localStorage`. |
| * **🖼️ Media Gallery:** Built-in lightbox gallery showcasing batch-wise group photographs. |
| |
| --- |
| |
| ## 🛠️ Technology Stack |
| |
| * **Backend:** Python 3, Flask, Pandas, OpenPyXL, python-dotenv |
| * **Frontend:** HTML5, CSS3, Vanilla JavaScript (ES6+), Chart.js |
| * **APIs & Integrations:** Google Maps JavaScript API (Advanced Markers) |
| |
| --- |
| |
| ## ⚙️ Installation & Setup |
| |
| **1. Clone the repository:** |
| ```bash |
| git clone https://github.com/lovnishverma/dte_dashboard.git |
| cd dte_dashboard |
| ``` |
| |
| **2. Create and activate a virtual environment (Recommended):** |
| ```bash |
| python -m venv venv |
| source venv/bin/activate # On Windows use: venv\Scripts\activate |
| ``` |
| |
| **3. Install the required dependencies:** |
| ```bash |
| pip install -r requirements.txt |
| ``` |
| |
| **4. Configure Environment Variables:** |
| Ensure you have a `.env` file in the root directory containing your Google Maps API key (and optionally the Flask environment): |
| ```env |
| GOOGLE_MAPS_API_KEY=your_actual_api_key_here |
| FLASK_ENV=development |
| ``` |
| |
| **5. Run the application:** |
| ```bash |
| python app.py |
| ``` |
| *The dashboard will be available at `http://localhost:5000`* |
| |
| --- |
| |
| ## 🔧 Updates & Bug Fixes (v2) |
| |
| * Fixed `gm_authFailure` crash on `AdvancedMarkerElement` with a robust authentication guard. |
| * Resolved designation normalization edge cases (e.g., standardizing "SR. LECTURER" vs "Senior Lecturer"). |
| * Pagination now correctly displays windowed page numbers, preventing overflow for large datasets. |
| * Optimized count-up animations to correctly target the first text node. |
| * Charts and Canvas maps now seamlessly redraw on theme toggles and section re-visits. |
|
|
| --- |
|
|
| ## 📁 Project Structure |
|
|
| ```text |
| dte_dashboard/ |
| ├── app.py # Core Flask backend & API routing |
| ├── requirements.txt # Python dependencies |
| ├── .env # Environment variables (API Keys) |
| ├── data/ |
| │ └── DTE_all_Batch.xlsx # Source dataset |
| ├── templates/ |
| │ └── index.html # Main dashboard UI |
| └── static/ |
| ├── css/style.css # Custom styling (Dark/Light themes) |
| ├── js/main.js # Frontend logic & Chart integrations |
| └── images/ # Batch group photographs |
| ``` |
|
|
| --- |
|
|
| ## ©️ Copyright & Credits |
|
|
| **Copyright © NIELIT Ropar** |
|
|
| This dashboard was developed as part of a specialized training initiative under FutureSkills PRIME. |
|
|
| Created by **Lovnish Verma** (Project Engineer) and **Ravi Kant** (Project Assistant), NIELIT ROPAR, under the expert guidance of **Dr. Sarwan Singh** and **Anita Budhiraja Mam**. |
|
|
