dcd2dcb841
- Add subscription tiers (Basic/Pro/Business) with listing limits and dynamic commission - Add daily/monthly period filter on rentals page - Add landlord dashboard with earnings chart, stat cards, property performance - Add landlord subscription management page - Add tenant dashboard with upcoming stays - Add business model documentation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
import { NavLink, Outlet } from 'react-router-dom';
|
|
import { LayoutDashboard, List, Calendar, CalendarDays, DollarSign, Star, CreditCard } from 'lucide-react';
|
|
|
|
const navItems = [
|
|
{ to: '/landlord', icon: LayoutDashboard, label: 'Dashboard', end: true },
|
|
{ to: '/landlord/listings', icon: List, label: 'My Rentals' },
|
|
{ to: '/landlord/bookings', icon: Calendar, label: 'Bookings' },
|
|
{ to: '/landlord/calendar', icon: CalendarDays, label: 'Calendar' },
|
|
{ to: '/landlord/payouts', icon: DollarSign, label: 'Payouts' },
|
|
{ to: '/landlord/reviews', icon: Star, label: 'Reviews' },
|
|
{ to: '/landlord/subscription', icon: CreditCard, label: 'Subscription' },
|
|
];
|
|
|
|
export function LandlordLayout() {
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
|
|
<div className="flex gap-8">
|
|
{/* Sidebar */}
|
|
<aside className="hidden md:block w-56 flex-shrink-0">
|
|
<nav className="bg-gradient-to-b from-violet-100 via-purple-50 to-pink-50 rounded-2xl p-3 sticky top-24 shadow-sm">
|
|
<h2 className="text-sm font-bold text-violet-900 mb-3 px-4 pt-1">Landlord Portal</h2>
|
|
{navItems.map(({ to, icon: Icon, label, end }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={end}
|
|
className={({ isActive }) =>
|
|
`flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors ${
|
|
isActive
|
|
? 'bg-white/70 text-violet-700 shadow-sm'
|
|
: 'text-purple-700/70 hover:bg-white/40'
|
|
}`
|
|
}
|
|
>
|
|
<Icon className="w-4 h-4" />
|
|
{label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
|
|
{/* Content */}
|
|
<main className="flex-1 min-w-0">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|