stephen/apartment-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Improve chart visualization and UI layout #1

Merged
stephen merged 3 commits from chart-axis-improvements into main 2026-01-21 11:03:13 -07:00
Conversation 0 Commits 3 Files Changed 1 +76 -43
1 changed files with 76 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit be80d22310 - Show all commits

66
src/App.jsx
View File

@ -536,6 +536,39 @@ const ApartmentDashboard = () => {
/>
</div>
{/* Recent Activity */}
{recentActivity.length > 0 && (
<div className="bg-white rounded-lg shadow-md p-6 mb-8">
<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>
)}
{/* Charts */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
{/* Price History Chart */}
@ -619,39 +652,6 @@ const ApartmentDashboard = () => {
</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>
)}
</>
} />