Delivery & Fleet Tracking Dashboard

You are a full-stack logistics technology expert, proficient in Next.js 16, Tailwind CSS 4, Supabase (including Realtime), and Google Maps API.

Build a complete Delivery and Fleet Tracking Dashboard system for {company_name}. The company currently has {num_drivers} drivers, serves the {service_area} area, and primarily uses {vehicle_type}. The brand primary color is {primary_color}.

## System Architecture

### Tech Stack
- Frontend: Next.js 16 (App Router) + TypeScript + Tailwind CSS 4
- Backend/Database: Supabase (PostgreSQL + Auth + Realtime + Storage)
- Maps: Google Maps JavaScript API + Directions API + Geocoding API
- Navigation Integration: Waze deeplink (preferred by Malaysian drivers)
- Real-time: Supabase Realtime (driver location broadcast + status change subscriptions)
- File Storage: Supabase Storage (proof of delivery photos + signature images)

### Database Design (Supabase PostgreSQL)

Create the following core tables:

1. **orders** - Order/parcel management
   - id, order_number (auto-generated, format: {company_name abbreviation}-YYYYMMDD-XXXX)
   - sender_name, sender_phone, pickup_address, pickup_lat, pickup_lng
   - receiver_name, receiver_phone, delivery_address, delivery_lat, delivery_lng
   - package_description, package_weight_kg, package_size (small/medium/large/oversized)
   - status (pending/assigned/picked_up/in_transit/out_for_delivery/delivered/failed)
   - payment_method (prepaid/cod), cod_amount (RM currency), cod_collected (boolean)
   - assigned_driver_id, delivery_zone_id
   - estimated_delivery_time, actual_delivery_time
   - failure_reason, delivery_attempts
   - created_at, updated_at

2. **drivers** - Driver information
   - id, user_id (linked to Supabase Auth)
   - name, phone, ic_number (Malaysian IC)
   - vehicle_plate, vehicle_type
   - status (available/on_delivery/offline/on_break)
   - current_lat, current_lng, last_location_update
   - daily_capacity, current_load
   - rating, total_deliveries, success_rate

3. **delivery_zones** - Delivery zone management
   - id, name, boundary_geojson (GeoJSON polygon)
   - base_delivery_fee, surcharge_rules (JSONB)
   - assigned_drivers (array)

4. **delivery_proofs** - Proof of delivery
   - id, order_id, photo_url, signature_url
   - received_by_name, relationship_to_receiver
   - notes, captured_lat, captured_lng, captured_at

5. **status_history** - Status change audit trail
   - id, order_id, old_status, new_status
   - changed_by, notes, lat, lng, created_at

6. **cod_collections** - COD payment tracking
   - id, order_id, driver_id, amount_rm
   - collection_method (cash/ewallet), collected_at
   - remitted (whether handed over), remitted_at

7. **delivery_analytics_daily** - Daily analytics summary (materialized view or scheduled aggregation)
   - date, total_orders, delivered, failed
   - avg_delivery_minutes, on_time_rate
   - revenue_rm, cod_collected_rm

Set up RLS policies: public tracking page can only query a single order by order_number; drivers can only view and update their own assigned orders; dispatchers/admins have full access.

### Page Structure

#### 1. Dispatch Dashboard (/dispatch) - Dispatcher main interface
- Full-screen map view showing all online driver locations in real-time (color-coded by status)
- Map displays pickup/delivery location markers for unassigned orders
- Left panel: Unassigned orders list (drag-and-drop to assign to drivers)
- Right panel: Driver list (online status, current load, today completions)
- Top stats bar: Today total orders, delivered, in transit, unassigned, failed
- Smart assignment suggestions: Recommend best driver based on proximity, zone, current load
- Route optimization suggestions: Calculate optimal delivery sequence for each driver
- Subscribe to driver location changes via Supabase Realtime, update map in real-time

#### 2. Order Management (/orders)
- Order list (table view), filterable by status/date/zone/driver
- New order form: sender info, receiver info, package details, payment method
- Address input integrated with Google Places Autocomplete (Malaysian address format)
- Bulk order import (CSV upload)
- Order detail page: full status timeline, map route, proof of delivery viewer
- COD orders specially flagged, showing collection status

#### 3. Driver Mobile View (/driver) - Responsive mobile-first design
- Today delivery list (sorted by optimized route order)
- Each order card shows: receiver, address, package info, payment method
- One-tap navigation button (Waze deeplink: waze://?ll={lat},{lng}&navigate=yes)
- Status update buttons (swipe to transition: picked up > in transit > out for delivery > delivered)
- Proof of delivery: camera capture + canvas signature pad component
- COD collection confirmation (enter collected amount)
- Auto location reporting (broadcast GPS coordinates via Supabase Realtime every 30 seconds)
- Today stats: completed, remaining, COD amount to collect

#### 4. Customer Tracking Page (/track) - No login required
- Clean order number input (large font, mobile-friendly)
- Query result displays:
  - Current package status (large icon + status description)
  - Full status timeline (time and location for each step)
  - Driver real-time location on map (only during active delivery)
  - Estimated delivery time
  - Proof of delivery photo (for delivered orders)
- SEO-friendly page, tracking link can be sent to customers via SMS
- Branded page: display {company_name} logo and {primary_color} theme

#### 5. Delivery Zone Management (/zones)
- Draw zone polygons on Google Maps
- Set delivery fees and surcharge rules per zone
- Assign default drivers to zones
- Auto-match delivery address to zone

#### 6. Analytics Dashboard (/analytics)
- Key metric cards: delivery success rate, avg delivery time (minutes), daily volume, driver efficiency
- Trend charts (past 30 days): daily volume, success rate trends
- Driver leaderboard: ranked by success rate, avg time, customer rating
- Zone analysis: volume and success rate heatmap by zone
- COD reports: daily collection summary, driver collection details, outstanding amount alerts
- Peak hours analysis: identify delivery peaks for shift optimization
- All monetary values in RM (Malaysian Ringgit)

### Core Feature Implementation Requirements

#### Real-time Tracking (Supabase Realtime)
- Driver app broadcasts location every 30 seconds: channel.send({ type: 'broadcast', event: 'location', payload: { driver_id, lat, lng } })
- Dispatch dashboard subscribes to all driver location channels, updates map markers in real-time
- Customer tracking page subscribes to specific order status changes
- Use Postgres Changes to listen for order status updates and trigger notifications

#### Route Optimization Suggestions
- Use Google Directions API Waypoints to calculate multi-stop routes
- Sort driver delivery sequence by distance and estimated time
- Display estimated total driving distance and time

#### Address Handling (Malaysian Context)
- Google Places Autocomplete restricted to Malaysia (componentRestrictions: { country: 'my' })
- Support Malaysian address formats (Jalan, Lorong, Taman, etc.)
- Address input supports both Chinese and Malay

#### COD Management
- Select payment method at order creation (prepaid/cash on delivery)
- Driver confirms COD collection amount upon delivery
- Daily COD summary reports
- Outstanding COD amount alerts

### UI/UX Design Requirements
- Primary color: {primary_color}, paired with white background and dark text
- Dispatch view: Desktop-first, full-screen map layout
- Driver view: Mobile-first, large buttons and fonts for use between stops
- Customer tracking: Clean and minimal, fast loading, mobile browser optimized
- All statuses use triple encoding: icon + color + text label
- Custom map markers to differentiate: pending pickup (blue), in transit (orange), delivered (green), failed (red)
- Chinese-primary interface with bilingual labels for key fields

### Deployment and Environment Variables
- NEXT_PUBLIC_SUPABASE_URL
- NEXT_PUBLIC_SUPABASE_ANON_KEY
- SUPABASE_SERVICE_ROLE_KEY
- NEXT_PUBLIC_GOOGLE_MAPS_API_KEY
- Deploy to Vercel, ensure Edge Functions compatibility

Implement this system fully according to the specifications above. Output the database schema (SQL) first, then implement all pages and components page by page. Ensure the code is complete and runnable — do not omit any parts.