Settings & Sidebar
Component: components/sidebar.tsx
Available on: Har authenticated page (login ke alawa)
Sidebar Ka Maqsad
Sidebar system ka main navigation aur global settings hub hai. Yahan se pages switch karte hain, currency change karte hain, theme toggle karte hain, shop details update karte hain, aur logout karte hain.
Sidebar Layout
┌──────────────────────┐
│ [Shop Name] 🌙 │
│ [Currency: PKR ▼] │
├──────────────────────┤
│ 📊 Dashboard │
│ 📦 Inventory │
│ 🛒 Sales (POS) │
│ 📜 Order History │
│ 👥 Suppliers │
├──────────────────────┤
│ ⚙️ Shop Settings │
│ 🌙 Dark/Light Mode │
│ 🚪 Logout │
└──────────────────────┘
Navigation Links
| Menu Item | Route | Icon |
|---|---|---|
| Dashboard | / | LayoutDashboard |
| Inventory | /inventory | Package |
| Sales (POS) | /sales | ShoppingCart |
| Order History | /orders | History |
| Suppliers | /suppliers | Users |
Active page highlighted (primary color background).
Currency Selector
Sidebar top par currency dropdown:
| Code | Symbol | Name |
|---|---|---|
| PKR | ₨ | Pakistani Rupee (default) |
| USD | $ | US Dollar |
| EUR | € | Euro |
| GBP | £ | British Pound |
- Selection
localStoragemein save hoti hai - Poori app mein prices is currency mein dikhte hain
- Inventory, Sales, Orders, Dashboard — sab affected
Shop Settings Dialog
Open: Sidebar → Shop Settings button
Tab 1: Shop Details
| Field | Required | Storage | Used In |
|---|---|---|---|
| Shop Name | ✅ Yes | localStorage | Sidebar title, Invoices |
| Owner Name | No | localStorage | Records |
| Phone Number | No | localStorage | Invoices |
| No | localStorage | Records | |
| Address | No | localStorage | Invoices |
- Save Shop Details → localStorage update + activity log
- Invoice print par shop name, address, phone dikhte hain
Tab 2: User Profile
| Action | Requirements |
|---|---|
| Username change | Minimum 3 characters, unique |
| Password change | Current password required, new min 6 chars, confirm match |
Profile update flow:
Form submit
↓
updateUsername() / updatePassword() — Supabase RPC
↓
localStorage user data update
↓
Activity log: "User profile updated"
↓
Success message (2 seconds)
Validation errors:
- "Username must be at least 3 characters long"
- "Username already exists"
- "Current password is incorrect"
- "New passwords do not match"
- "Password must be at least 6 characters long"
Theme Toggle
| Mode | Button Text |
|---|---|
| Dark mode active | ☀️ Light Mode |
| Light mode active | 🌙 Dark Mode |
next-themeslibrary use hoti hai- System preference respect hoti hai
- Preference persist hoti hai
Logout
Logout button click par:
localStorageclearsessionStorageclear- Supabase auth signOut
- Redirect →
/login
Mobile Responsive
Mobile (< lg breakpoint)
- Sidebar hidden by default
- Hamburger menu (top-left) se open
- Dark overlay background
- Menu item click → sidebar close
- Bottom section: Settings, Theme, Logout
Desktop (≥ lg breakpoint)
- Sidebar always visible (fixed left, 256px width)
- Main content:
ml-64offset
Context Providers Used
| Context | File | Purpose |
|---|---|---|
| Shop | lib/shop-context.tsx | Shop details localStorage |
| Currency | lib/currency-context.tsx | Currency preference |
| Auth | lib/auth-context.tsx | User session, profile update |
| Theme | next-themes | Dark/light mode |
Activity Logging (Settings)
| Action | Log |
|---|---|
| Shop settings save | Shop settings updated: [shop name] |
| Profile update | User profile updated: [username] |
Kya Kya Kar Sakte Hain? (Summary)
| Feature | Location |
|---|---|
| Pages navigate | Sidebar menu |
| Currency change | Top dropdown |
| Shop name on invoices | Shop Settings → Shop Details |
| Username change | Shop Settings → User Profile |
| Password change | Shop Settings → User Profile |
| Dark/Light mode | Sidebar bottom |
| Logout | Sidebar bottom |
| Mobile menu | Top-left hamburger |
Tips
- Pehle shop details set karein — invoices par sahi naam aayega
- Default password change karein production use se pehle
- PKR default hai — agar international clients hain to USD select karein