Add URL routing for pages

- Install react-router-dom for client-side routing
- Overview accessible at /
- Available Units accessible at /units
- Analytics accessible at /analytics
- Unknown routes redirect to overview
- Update page title to Towers Tracking

src/App.jsx

@@ -1,11 +1,14 @@
 import React, { useState, useEffect } from 'react';
+import { Routes, Route, Link, useLocation, Navigate } from 'react-router-dom';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, Area, AreaChart, ScatterChart, Scatter, ComposedChart, ReferenceLine } from 'recharts';
 import { TrendingUp, TrendingDown, Home, DollarSign, Calendar, MapPin, Activity, AlertCircle, Star, RefreshCw, Wifi, WifiOff, Bell, Target, Filter, Search, ArrowUp, ArrowDown, Zap, Clock, Eye } from 'lucide-react';
 
 const ApartmentDashboard = () => {
+  // Router
+  const location = useLocation();
+
   // Basic state
   const [selectedUnit, setSelectedUnit] = useState(null);
-  const [viewMode, setViewMode] = useState('overview');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [lastUpdated, setLastUpdated] = useState(new Date());
@@ -297,10 +300,10 @@ const ApartmentDashboard = () => {
 
   // Fetch analytics when switching to analytics tab
   useEffect(() => {
-    if (viewMode === 'analytics' && !analyticsData) {
+    if (location.pathname === '/analytics' && !analyticsData) {
       fetchAnalytics();
     }
-  }, [viewMode]);
+  }, [location.pathname]);
 
   // Calculate insights from available data
   const calculateInsights = () => {
@@ -442,30 +445,31 @@ const ApartmentDashboard = () => {
           </div>
           
           <div className="flex items-center space-x-4 mt-4">
-            <button
-              onClick={() => setViewMode('overview')}
-              className={`px-4 py-2 rounded-md ${viewMode === 'overview' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border'}`}
+            <Link
+              to="/"
+              className={`px-4 py-2 rounded-md ${location.pathname === '/' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border'}`}
             >
               Overview
-            </button>
-            <button
-              onClick={() => setViewMode('units')}
-              className={`px-4 py-2 rounded-md ${viewMode === 'units' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border'}`}
+            </Link>
+            <Link
+              to="/units"
+              className={`px-4 py-2 rounded-md ${location.pathname === '/units' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border'}`}
             >
               Available Units ({availableUnits.length})
-            </button>
-            <button
-              onClick={() => setViewMode('analytics')}
-              className={`px-4 py-2 rounded-md ${viewMode === 'analytics' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border'}`}
+            </Link>
+            <Link
+              to="/analytics"
+              className={`px-4 py-2 rounded-md ${location.pathname === '/analytics' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border'}`}
             >
               Analytics
-            </button>
+            </Link>
           </div>
         </div>
 
-        {/* Overview Tab */}
-        {viewMode === 'overview' && (
-          <>
+        <Routes>
+          {/* Overview Page */}
+          <Route path="/" element={
+            <>
             {/* Key Metrics */}
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
               <MetricCard
@@ -616,10 +620,10 @@ const ApartmentDashboard = () => {
               </div>
             )}
           </>
-        )}
+          } />
 
-        {/* Units Tab */}
-        {viewMode === 'units' && (
+          {/* Units Page */}
+          <Route path="/units" element={
           <div className="space-y-6">
             {/* Filters */}
             <div className="bg-white rounded-lg shadow-md p-6">
@@ -730,10 +734,10 @@ const ApartmentDashboard = () => {
               </div>
             )}
           </div>
-        )}
+          } />
 
-        {/* Analytics Tab */}
-        {viewMode === 'analytics' && (
+          {/* Analytics Page */}
+          <Route path="/analytics" element={
           <div className="space-y-6">
             <div className="flex justify-between items-center">
               <h2 className="text-xl font-semibold">Market Analytics</h2>
@@ -937,7 +941,11 @@ const ApartmentDashboard = () => {
               </div>
             )}
           </div>
-        )}
+          } />
+
+          {/* Catch-all redirect to overview */}
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
 
         {/* Unit Detail Modal */}
         {selectedUnit && (

src/main.jsx

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
 import './index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )