Add URL routing for pages
Some checks failed
Deploy Apartment Dashboard / deploy (push) Failing after 1s
Some checks failed
Deploy Apartment Dashboard / deploy (push) Failing after 1s
- 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
This commit is contained in:
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React</title>
|
||||
<title>Towers Tracking</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
58
package-lock.json
generated
58
package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"lucide-react": "^0.525.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-router-dom": "^7.12.0",
|
||||
"recharts": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -1980,6 +1981,19 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
|
||||
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@ -3642,6 +3656,44 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.12.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
|
||||
"integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^1.0.1",
|
||||
"set-cookie-parser": "^2.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.12.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz",
|
||||
"integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.12.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
@ -3848,6 +3900,12 @@
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/set-cookie-parser": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
|
||||
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
"lucide-react": "^0.525.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-router-dom": "^7.12.0",
|
||||
"recharts": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
56
src/App.jsx
56
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,29 +445,30 @@ 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">
|
||||
@ -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 && (
|
||||
|
||||
@ -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>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user