Stephen Minakian
763e5a0785
All checks were successful
Deploy Apartment Dashboard / deploy (push) Successful in 9m59s
599 lines
27 KiB
JavaScript
599 lines
27 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, Area, AreaChart } from 'recharts';
|
|
import { TrendingUp, TrendingDown, Home, DollarSign, Calendar, MapPin, Activity, AlertCircle, Star, RefreshCw, Wifi, WifiOff } from 'lucide-react';
|
|
|
|
const ApartmentDashboard = () => {
|
|
const [selectedUnit, setSelectedUnit] = useState(null);
|
|
const [viewMode, setViewMode] = useState('overview');
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [lastUpdated, setLastUpdated] = useState(null);
|
|
|
|
// Real data state
|
|
const [dailySummary, setDailySummary] = useState(null);
|
|
const [priceHistory, setPriceHistory] = useState([]);
|
|
const [availableUnits, setAvailableUnits] = useState([]);
|
|
const [recentActivity, setRecentActivity] = useState([]);
|
|
const [planStats, setPlanStats] = useState([]);
|
|
|
|
// API base URL
|
|
const API_BASE = '/api';
|
|
|
|
// Fetch data from API
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
console.log('🔄 Fetching apartment data...');
|
|
|
|
// Fetch all endpoints in parallel
|
|
const [
|
|
dailySummaryRes,
|
|
priceHistoryRes,
|
|
availableUnitsRes,
|
|
recentActivityRes,
|
|
planStatsRes
|
|
] = await Promise.all([
|
|
fetch(`${API_BASE}/daily-summary`),
|
|
fetch(`${API_BASE}/price-history`),
|
|
fetch(`${API_BASE}/available-units`),
|
|
fetch(`${API_BASE}/recent-activity`),
|
|
fetch(`${API_BASE}/plan-stats`)
|
|
]);
|
|
|
|
// Check if all requests were successful
|
|
if (!dailySummaryRes.ok || !priceHistoryRes.ok || !availableUnitsRes.ok ||
|
|
!recentActivityRes.ok || !planStatsRes.ok) {
|
|
throw new Error('One or more API requests failed');
|
|
}
|
|
|
|
// Parse JSON responses
|
|
const [
|
|
dailySummaryData,
|
|
priceHistoryData,
|
|
availableUnitsData,
|
|
recentActivityData,
|
|
planStatsData
|
|
] = await Promise.all([
|
|
dailySummaryRes.json(),
|
|
priceHistoryRes.json(),
|
|
availableUnitsRes.json(),
|
|
recentActivityRes.json(),
|
|
planStatsRes.json()
|
|
]);
|
|
|
|
console.log('✅ Data fetched successfully:', {
|
|
dailySummary: dailySummaryData,
|
|
priceHistory: priceHistoryData.length,
|
|
availableUnits: availableUnitsData.length,
|
|
recentActivity: recentActivityData.length,
|
|
planStats: planStatsData.length
|
|
});
|
|
|
|
// Update state with real data
|
|
setDailySummary(dailySummaryData);
|
|
setPriceHistory(priceHistoryData);
|
|
setAvailableUnits(availableUnitsData);
|
|
setRecentActivity(recentActivityData);
|
|
setPlanStats(planStatsData);
|
|
setLastUpdated(new Date());
|
|
setLoading(false);
|
|
|
|
} catch (err) {
|
|
console.error('❌ Error fetching data:', err);
|
|
setError(err.message);
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Initial data fetch
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
// Auto-refresh every 5 minutes
|
|
useEffect(() => {
|
|
const interval = setInterval(fetchData, 5 * 60 * 1000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const MetricCard = ({ title, value, subtitle, icon: Icon, trend, color = "blue" }) => (
|
|
<div className="bg-white rounded-lg shadow-md p-6 border-l-4" style={{borderLeftColor: color === 'blue' ? '#3B82F6' : color === 'green' ? '#10B981' : color === 'red' ? '#EF4444' : '#F59E0B'}}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">{title}</p>
|
|
<p className="text-2xl font-bold text-gray-900">{value}</p>
|
|
{subtitle && <p className="text-sm text-gray-500">{subtitle}</p>}
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
{trend && (
|
|
<span className={`text-sm ${trend > 0 ? 'text-green-600' : 'text-red-600'} flex items-center`}>
|
|
{trend > 0 ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
|
|
{Math.abs(trend)}%
|
|
</span>
|
|
)}
|
|
<Icon className="w-8 h-8 text-gray-400" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const formatPrice = (price) => `$${price?.toLocaleString()}`;
|
|
const formatDate = (dateStr) => new Date(dateStr).toLocaleDateString();
|
|
|
|
const COLORS = ['#8B0000', '#DC143C', '#B22222', '#CD5C5C', '#F08080'];
|
|
|
|
// Loading state
|
|
if (loading && !dailySummary) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<RefreshCw className="w-12 h-12 animate-spin text-blue-600 mx-auto mb-4" />
|
|
<h2 className="text-xl font-semibold text-gray-900 mb-2">Loading Apartment Data</h2>
|
|
<p className="text-gray-600">Fetching real-time market information...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Error state
|
|
if (error && !dailySummary) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<WifiOff className="w-12 h-12 text-red-600 mx-auto mb-4" />
|
|
<h2 className="text-xl font-semibold text-gray-900 mb-2">Connection Error</h2>
|
|
<p className="text-gray-600 mb-4">Unable to fetch apartment data: {error}</p>
|
|
<button
|
|
onClick={fetchData}
|
|
className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
|
|
>
|
|
Try Again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 p-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">Country Club Towers & Gardens</h1>
|
|
<p className="text-gray-600">Real-time apartment market dashboard</p>
|
|
{lastUpdated && (
|
|
<div className="flex items-center mt-2 text-sm text-gray-500">
|
|
<Wifi className="w-4 h-4 mr-1" />
|
|
Last updated: {lastUpdated.toLocaleTimeString()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={fetchData}
|
|
disabled={loading}
|
|
className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
|
<span>Refresh</span>
|
|
</button>
|
|
</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'}`}
|
|
>
|
|
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'}`}
|
|
>
|
|
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'}`}
|
|
>
|
|
Market Analytics
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Overview Tab */}
|
|
{viewMode === 'overview' && dailySummary && (
|
|
<>
|
|
{/* Daily Metrics */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<MetricCard
|
|
title="Available Units"
|
|
value={dailySummary.totalAvailable || availableUnits.length}
|
|
icon={Home}
|
|
color="blue"
|
|
/>
|
|
<MetricCard
|
|
title="New Today"
|
|
value={dailySummary.newUnits || dailySummary.new_units_count || 0}
|
|
subtitle="Units available"
|
|
icon={TrendingUp}
|
|
color="green"
|
|
/>
|
|
<MetricCard
|
|
title="Rented Today"
|
|
value={dailySummary.rentedUnits || dailySummary.rented_units_count || 0}
|
|
subtitle="Units leased"
|
|
icon={TrendingDown}
|
|
color="red"
|
|
/>
|
|
<MetricCard
|
|
title="Turnover Rate"
|
|
value={`${(dailySummary.turnoverRate || dailySummary.turnover_rate || 0).toFixed(1)}%`}
|
|
subtitle="Daily activity"
|
|
icon={Activity}
|
|
color="orange"
|
|
/>
|
|
</div>
|
|
|
|
{/* Price Trends */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
<div className="bg-white rounded-lg shadow-md p-6">
|
|
<h3 className="text-lg font-semibold mb-4">Average Price Trend ({priceHistory.length} days)</h3>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<AreaChart data={priceHistory.filter(d => d.avgPrice !== null)}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey="date"
|
|
tickFormatter={(date) => new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
|
/>
|
|
<YAxis tickFormatter={(value) => `$${value}`} />
|
|
<Tooltip
|
|
formatter={(value, name) => [formatPrice(value), 'Avg Price']}
|
|
labelFormatter={(date) => formatDate(date)}
|
|
/>
|
|
<Area type="monotone" dataKey="avgPrice" stroke="#8B0000" fill="#8B0000" fillOpacity={0.1} />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow-md p-6">
|
|
<h3 className="text-lg font-semibold mb-4">Unit Availability</h3>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<AreaChart data={priceHistory}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey="date"
|
|
tickFormatter={(date) => new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
|
/>
|
|
<YAxis />
|
|
<Tooltip
|
|
formatter={(value, name) => [value, 'Available Units']}
|
|
labelFormatter={(date) => formatDate(date)}
|
|
/>
|
|
<Area type="monotone" dataKey="unitCount" stroke="#3B82F6" fill="#3B82F6" fillOpacity={0.2} />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Plan Distribution */}
|
|
{planStats.length > 0 && (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
<div className="bg-white rounded-lg shadow-md p-6">
|
|
<h3 className="text-lg font-semibold mb-4">Units by Floor Plan</h3>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<PieChart>
|
|
<Pie
|
|
data={planStats}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={({ name, count }) => `${name}: ${count}`}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="count"
|
|
>
|
|
{planStats.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow-md p-6">
|
|
<h3 className="text-lg font-semibold mb-4">Average Price by Plan</h3>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<BarChart data={planStats}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="name" angle={-45} textAnchor="end" height={80} />
|
|
<YAxis tickFormatter={(value) => `$${value}`} />
|
|
<Tooltip formatter={(value, name) => [formatPrice(value), 'Avg Price']} />
|
|
<Bar dataKey="avgPrice" fill="#8B0000" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Recent Activity */}
|
|
{recentActivity.length > 0 && (
|
|
<div className="bg-white rounded-lg shadow-md p-6">
|
|
<h3 className="text-lg font-semibold mb-4">Recent Activity</h3>
|
|
<div className="space-y-4">
|
|
{recentActivity.map((activity, index) => (
|
|
<div key={index} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div className="flex items-center space-x-3">
|
|
{activity.type === 'new' && <div className="w-3 h-3 bg-green-500 rounded-full"></div>}
|
|
{activity.type === 'rented' && <div className="w-3 h-3 bg-red-500 rounded-full"></div>}
|
|
{activity.type === 'price_drop' && <div className="w-3 h-3 bg-orange-500 rounded-full"></div>}
|
|
<div>
|
|
<p className="font-medium">
|
|
{activity.type === 'new' && `New unit available: ${activity.unitCode}`}
|
|
{activity.type === 'rented' && `Unit rented: ${activity.unitCode}`}
|
|
{activity.type === 'price_drop' && `Price drop: ${activity.unitCode}`}
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
{activity.planName} • {activity.bedCount}BR/{activity.bathCount}BA
|
|
{activity.type === 'price_drop'
|
|
? ` • ${formatPrice(activity.oldPrice)} → ${formatPrice(activity.newPrice)}`
|
|
: activity.price ? ` • ${formatPrice(activity.price)}` : ''
|
|
}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span className="text-sm text-gray-500">{formatDate(activity.date)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Units Tab */}
|
|
{viewMode === 'units' && (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="text-xl font-semibold">Available Units ({availableUnits.length})</h2>
|
|
<div className="flex space-x-2">
|
|
<select className="border rounded-md px-3 py-2">
|
|
<option>All Plans</option>
|
|
{[...new Set(availableUnits.map(u => u.planName))].map(plan => (
|
|
<option key={plan}>{plan}</option>
|
|
))}
|
|
</select>
|
|
<select className="border rounded-md px-3 py-2">
|
|
<option>All Bedrooms</option>
|
|
{[...new Set(availableUnits.map(u => u.bedCount))].sort().map(beds => (
|
|
<option key={beds}>{beds} BR</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
{availableUnits.map((unit) => (
|
|
<div key={unit.unitCode} className="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div>
|
|
<h3 className="text-lg font-bold">{unit.unitCode}</h3>
|
|
<p className="text-gray-600">{unit.planName}</p>
|
|
{unit.planName && unit.planName.toLowerCase().includes('maroon peak') && unit.currentPrice < 3800 &&
|
|
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 mt-1">
|
|
<Star className="w-3 h-3 mr-1" />
|
|
Priority
|
|
</span>
|
|
}
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-2xl font-bold text-green-600">{formatPrice(unit.currentPrice)}</p>
|
|
<p className="text-sm text-gray-500">Current Price</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4 mb-4">
|
|
<div className="text-center p-3 bg-gray-50 rounded">
|
|
<p className="text-sm text-gray-600">Bedrooms</p>
|
|
<p className="font-semibold">{unit.bedCount}</p>
|
|
</div>
|
|
<div className="text-center p-3 bg-gray-50 rounded">
|
|
<p className="text-sm text-gray-600">Bathrooms</p>
|
|
<p className="font-semibold">{unit.bathCount}</p>
|
|
</div>
|
|
<div className="text-center p-3 bg-gray-50 rounded">
|
|
<p className="text-sm text-gray-600">Area</p>
|
|
<p className="font-semibold">{unit.area} sqft</p>
|
|
</div>
|
|
<div className="text-center p-3 bg-gray-50 rounded">
|
|
<p className="text-sm text-gray-600">Available</p>
|
|
<p className="font-semibold">{unit.daysAvailable || 0} days</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t pt-4">
|
|
<div className="flex justify-between text-sm mb-2">
|
|
<span>Price Range:</span>
|
|
<span>{formatPrice(unit.minPrice)} - {formatPrice(unit.maxPrice)}</span>
|
|
</div>
|
|
<div className="w-full bg-gray-200 rounded-full h-2">
|
|
<div
|
|
className="bg-blue-600 h-2 rounded-full"
|
|
style={{
|
|
width: unit.maxPrice > unit.minPrice
|
|
? `${((unit.currentPrice - unit.minPrice) / (unit.maxPrice - unit.minPrice)) * 100}%`
|
|
: '50%'
|
|
}}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setSelectedUnit(unit)}
|
|
className="w-full mt-4 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors"
|
|
>
|
|
View Details
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{availableUnits.length === 0 && !loading && (
|
|
<div className="text-center py-12">
|
|
<Home className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">No Available Units</h3>
|
|
<p className="text-gray-600">No apartment units are currently available.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Analytics Tab */}
|
|
{viewMode === 'analytics' && (
|
|
<div className="space-y-6">
|
|
<h2 className="text-xl font-semibold">Market Analytics</h2>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div className="bg-white rounded-lg shadow-md p-6">
|
|
<h3 className="text-lg font-semibold mb-4">Price Distribution by Plan</h3>
|
|
<div className="space-y-4">
|
|
{planStats.map((plan, index) => (
|
|
<div key={plan.name} className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<div
|
|
className="w-4 h-4 rounded"
|
|
style={{ backgroundColor: COLORS[index % COLORS.length] }}
|
|
></div>
|
|
<span className="font-medium">{plan.name}</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-semibold">{formatPrice(plan.avgPrice)}</p>
|
|
<p className="text-sm text-gray-500">{plan.count} units</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow-md p-6">
|
|
<h3 className="text-lg font-semibold mb-4">Market Insights</h3>
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-red-50 rounded-lg border-l-4 border-red-500">
|
|
<h4 className="font-semibold text-red-800">Maroon Peak Priority</h4>
|
|
<p className="text-sm text-red-700">
|
|
Maroon Peak units under $3,800 are highlighted as priority opportunities based on your preferences.
|
|
</p>
|
|
</div>
|
|
{dailySummary && (
|
|
<div className="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
|
|
<h4 className="font-semibold text-blue-800">Market Activity</h4>
|
|
<p className="text-sm text-blue-700">
|
|
Daily turnover rate of {(dailySummary.turnoverRate || dailySummary.turnover_rate || 0).toFixed(1)}% indicates {
|
|
(dailySummary.turnoverRate || dailySummary.turnover_rate || 0) > 10 ? 'high' :
|
|
(dailySummary.turnoverRate || dailySummary.turnover_rate || 0) > 5 ? 'moderate' : 'low'
|
|
} market activity.
|
|
</p>
|
|
</div>
|
|
)}
|
|
{priceHistory.length > 0 && (
|
|
<div className="p-4 bg-green-50 rounded-lg border-l-4 border-green-500">
|
|
<h4 className="font-semibold text-green-800">Price Trends</h4>
|
|
<p className="text-sm text-green-700">
|
|
{priceHistory.length > 1 ? (
|
|
`Average prices ${priceHistory[priceHistory.length - 1].avgPrice > priceHistory[priceHistory.length - 2].avgPrice ? 'increased' : 'decreased'} in recent days.`
|
|
) : (
|
|
'Price trend data is being collected.'
|
|
)}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Unit Detail Modal */}
|
|
{selectedUnit && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
|
<div className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-start mb-6">
|
|
<div>
|
|
<h2 className="text-2xl font-bold">{selectedUnit.unitCode}</h2>
|
|
<p className="text-gray-600">{selectedUnit.planName} • {selectedUnit.community}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setSelectedUnit(null)}
|
|
className="text-gray-500 hover:text-gray-700 text-2xl"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6 mb-6">
|
|
<div>
|
|
<h3 className="font-semibold mb-2">Current Price</h3>
|
|
<p className="text-3xl font-bold text-green-600">{formatPrice(selectedUnit.currentPrice)}</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold mb-2">Price Range</h3>
|
|
<p className="text-lg">{formatPrice(selectedUnit.minPrice)} - {formatPrice(selectedUnit.maxPrice)}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 gap-4 mb-6">
|
|
<div className="text-center">
|
|
<p className="text-sm text-gray-600">Bedrooms</p>
|
|
<p className="text-xl font-semibold">{selectedUnit.bedCount}</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-sm text-gray-600">Bathrooms</p>
|
|
<p className="text-xl font-semibold">{selectedUnit.bathCount}</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-sm text-gray-600">Area</p>
|
|
<p className="text-xl font-semibold">{selectedUnit.area}</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-sm text-gray-600">Days Available</p>
|
|
<p className="text-xl font-semibold">{selectedUnit.daysAvailable || 0}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{selectedUnit.priceHistory && selectedUnit.priceHistory.length > 0 && (
|
|
<div className="mb-6">
|
|
<h3 className="font-semibold mb-4">Price History</h3>
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<LineChart data={selectedUnit.priceHistory}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey="date"
|
|
tickFormatter={(date) => new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
|
/>
|
|
<YAxis tickFormatter={(value) => `$${value}`} />
|
|
<Tooltip
|
|
formatter={(value, name) => [formatPrice(value), 'Price']}
|
|
labelFormatter={(date) => formatDate(date)}
|
|
/>
|
|
<Line type="monotone" dataKey="price" stroke="#8B0000" strokeWidth={2} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ApartmentDashboard; |