Milan Dashboard – A complete, fully responsive admin panel for a sportswear store, built with HTML, CSS and Vanilla JavaScript. Designed with clean spacing, real RTL layout, smooth micro-interactions and full dark mode, perfect for portfolio showcase.
⚡ Portfolio-Level Project – Showcasing Senior Front-End expertise in RTL interfaces, dashboard layouts, data visualization and reusable component design.
- 📊 Dashboard Overview – Hero sales card, five KPI tiles, activity timeline, best-selling products and a live sales chart
- 🧾 New Sale Form – Item rows with quantity steppers, per-row supply location and automatic line, total and discount math
- 💳 Payment Methods – Cash, credit, POS, gateway, bank transfer and card-to-card, each with its own detail panel
- 🧮 Discount Engine – Amount and percentage discount, quick 5 / 10 / 15 / 20 % chips and a live payable total
- 📁 Products, Orders & Customers – Searchable tables, status tags, row actions and pagination, plus a dedicated empty state
- 📈 Reports – Eight KPI boxes with line, bar and doughnut charts
- 🔍 Live Table Search – Typing filters rows instantly and shows a friendly empty result when nothing matches
- 🌗 Light & Dark Theme – Follows the system preference on the first visit and remembers your choice afterwards
- 🇮🇷 Persian First – Full RTL layout, Jalali calendar dates and Persian digits
- 📱 Fully Responsive – Off-canvas sidebar on small screens, tables turn into labeled cards on mobile
- ⚡ No Build Step – Plain HTML, CSS and JavaScript with self-hosted Vazirmatn font, Font Awesome icons and Chart.js
Sales summary, KPI tiles, activity timeline and store shortcuts.
Invoice form with item rows, discount chips and a live payment summary.
Searchable table with category and stock tags, row actions and pagination.
KPI boxes with line, bar and doughnut charts.
The whole panel in dark mode, toggled from the top bar and saved for next time.
Off-canvas sidebar and stacked cards, down to a 390px viewport.
| Page | What it does |
|---|---|
index.html |
Dashboard overview |
sales.html |
New sale / invoice form |
products.html |
Product list with search, filters and pagination |
orders.html |
Orders list with type and channel tags |
customers.html |
Customer list with contact details |
reports.html |
Reports and charts |
empty.html |
Empty state screen |
| Path | Description |
|---|---|
style.css |
Design tokens, layout, components and responsive rules |
dashboard.css |
Dashboard grid and cards |
sales.css |
Sale form and payment panel |
vendor/js/app.js |
Theme, Jalali date, number helpers, toast, tooltip, sidebar and search |
vendor/fonts |
Self-hosted Vazirmatn webfont |
vendor/fontawesome |
Self-hosted Font Awesome icons |
assets |
Logos, product artwork and readme screenshots |
- Pick a customer and the sale type
- Add item rows, set quantity and unit price
- Apply an amount or percentage discount
- Choose the payment method and fill its details
- Hit ثبت فروش and the invoice summary updates live
git clone https://github.com/condev-dev/dashboard.git
cd dashboard
open index.htmlNo install, no build, no dependencies. Just open it in a browser.
© ConDev – All rights reserved.