Relocated the "Show/Hide Geofences" toggle button from floating
position (top-right corner) to the main header toolbar.
**Changes:**
- Moved toggle button to header, positioned between Export and Admin buttons
- Converted showGeofences from local state to prop passed from parent
- Button now matches header design system (same styling as Export/Admin)
- Purple background when active, white when inactive
- Better UX: All controls now in one consistent location
**New Button Position:**
Export | Show/Hide Geofences | Admin | Logout
Much cleaner and more intuitive than the floating button!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented visual representation of geofences on the main map view:
**New Component:**
- GeofenceLayer.tsx - Renders active geofences as circles with:
- Configurable opacity (15% fill, 80% border)
- Color matching from geofence settings
- Interactive popups showing zone details (name, device, radius, coordinates)
- Auto-refresh every 30 seconds
**Map Integration:**
- Added toggle button to show/hide geofences (top-right corner)
- Purple button when active, white when hidden
- Only displays active geofences (is_active = 1)
- Geofences render below markers for better visibility
**Features:**
- Real-time sync with geofence management
- Responsive to geofence changes (color, radius, status)
- Clean visual hierarchy with location markers on top
- Hover/click popups for detailed zone information
Users can now visually see their geofence zones on the map and
understand the spatial relationship between device locations and zones.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Move types/location.ts to lib/types.ts
- Update all imports from @/types/location to @/lib/types
- Remove empty types/ directory
- Better aligns with Next.js conventions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
