Dashboard Page
Route: / (Home)
File: app/page.tsx
Page Ka Maqsad
Dashboard shop ka command center hai. Ek nazar mein aapko pata chal jata hai shop ki current situation — kitne products hain, aaj ki sales kitni hui, aur kya stock kam ho raha hai.
Kya Dikhta Hai?
1. Statistics Cards (Top Row)
| Card | Data Source | Description |
|---|---|---|
| Total Products | products table count | Inventory mein kitne items hain |
| Today's Sales | sales table (aaj ki date) | Aaj ka total revenue (PKR/₨) |
| Low Stock Alerts | Products jahan stock_quantity <= min_stock_level | Kitne products restock chahiye |
| Growth | Static display (+12.5%) | UI placeholder stat |
2. Recent Added Bills (Left Panel)
- Last 10 sales ki list
- Har bill par: invoice number, date/time, amount, payment method
- Bill par click → Invoice preview dialog
- "View all" button → Order History page
3. Recent Activity (Right Panel)
- Last 20 system activities
- Product add/edit/delete, sales, settings changes
- Har 5 seconds auto-refresh
- Color-coded icons by action type
Kya Kar Sakte Hain?
| Action | Kaise |
|---|---|
| Shop overview dekhna | Page open karte hi stats cards |
| Aaj ki sales check karna | "Today's Sales" card |
| Low stock items count | "Low Stock Alerts" card |
| Recent bill detail dekhna | Recent bills list mein kisi bill par click |
| Saari orders dekhna | "View all" → /orders |
| System activity monitor | Right panel activity feed |
Low Stock Logic
// Product low stock tab samjha jata hai jab:
stock_quantity <= min_stock_level
// Example:
// stock_quantity = 3, min_stock_level = 5 → LOW STOCK (red)
// stock_quantity = 10, min_stock_level = 5 → OK
Inventory page par bhi low stock red color mein highlight hota hai.
Today's Sales Calculation
- Aaj ki date midnight (00:00:00) se ab tak ki saari
salesrecords total_amountka sum- Currency: PKR (₨) format mein display
Components Used
| Component | File | Purpose |
|---|---|---|
RecentActivity | components/recent-activity.tsx | Recent 10 bills |
ActivityLog | components/activity-log.tsx | System activity feed |
Activity Log Action Types
| Icon Color | Action | Example |
|---|---|---|
| Green | create | Product added |
| Blue | update | Product updated |
| Red | delete | Order deleted |
| Purple | sale | Sale completed |
| Cyan | settings_change | Shop settings updated |
Server vs Client
- Main page (
app/page.tsx): Server Component — stats server-side fetch - Recent Activity & Activity Log: Client Components — React Query se real-time data
Navigation
Sidebar se yeh pages directly accessible hain:
- Inventory
- Sales (POS)
- Order History
- Suppliers
Tips for Users
- Roz subah Dashboard check karein — low stock alerts dekhne ke liye
- Recent bills se quickly verify karein ke last sale sahi hui
- Activity log se pata chalega kisne kya change kiya