import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import { FaHome, FaFileAlt, FaBell, FaCog, FaSignOutAlt, FaExclamationTriangle } from 'react-icons/fa'; import './Dashboard.css'; const Dashboard = () => { const [activeTab, setActiveTab] = useState('properties'); const [notifications, setNotifications] = useState([]); const [properties, setProperties] = useState([]); const [documents, setDocuments] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { // Simulate API calls const fetchData = async () => { try { // Mock property data const mockProperties = [ { id: 1, address: '123 Main St, Apartment 4B', city: 'New York', rent: 2500, dueDate: '5th of each month', status: 'current', image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60' }, { id: 2, address: '456 Oak Ave, Unit 12', city: 'Chicago', rent: 1800, dueDate: '1st of each month', status: 'past', image: 'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60' } ]; // Mock documents const mockDocuments = [ { id: 1, name: 'Lease Agreement', date: '2023-01-15', type: 'pdf' }, { id: 2, name: 'Rent Receipt - March 2023', date: '2023-03-05', type: 'pdf' }, { id: 3, name: 'Maintenance Request', date: '2023-02-20', type: 'doc' } ]; // Mock notifications const mockNotifications = [ { id: 1, message: 'Rent payment received for April', date: '2023-04-05', read: false }, { id: 2, message: 'Maintenance scheduled for April 15', date: '2023-04-01', read: true }, { id: 3, message: 'Lease renewal available', date: '2023-03-25', read: false } ]; setProperties(mockProperties); setDocuments(mockDocuments); setNotifications(mockNotifications); setLoading(false); } catch (error) { console.error('Error fetching data:', error); setLoading(false); } }; fetchData(); }, []); const markAsRead = (id) => { setNotifications(notifications.map(notification => notification.id === id ? { ...notification, read: true } : notification )); }; const renderContent = () => { switch (activeTab) { case 'properties': return (

My Properties

{loading ? (

Loading properties...

) : (

{properties.map(property => (

{property.address}

{property.city}

Rent: ${property.rent}/month Due: {property.dueDate}

{property.status === 'current' ? 'Current' : 'Past'}

))}

)}

); case 'documents': return (

My Documents

{loading ? (

Loading documents...

) : (

{documents.map(document => (

{document.type === 'pdf' ? ( ) : ( )}

{document.name}

Uploaded: {document.date}

))}

)}

); case 'notifications': return (

Notifications

{loading ? (

Loading notifications...

) : (

{notifications.map(notification => (

markAsRead(notification.id)} >

{notification.message}

{notification.date}

{!notification.read && }

))}

)}

); case 'settings': return (

Account Settings

Phone Number

Change Password

); default: return

Select a tab to view content

; } }; return (

Tenant Portal

Welcome back, Tenant!

{renderContent()}

); }; export default Dashboard; .tenant-dashboard { display: flex; min-height: 100vh; background-color: #f5f7fa; } .sidebar { width: 250px; background-color: #2c3e50; color: white; padding: 20px 0; display: flex; flex-direction: column; } .sidebar-header { padding: 0 20px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-header h2 { margin: 0; font-size: 1.5rem; } .sidebar-nav { flex: 1; padding: 20px 0; } .nav-item { display: flex; align-items: center; width: 100%; padding: 12px 20px; background: transparent; border: none; color: white; text-align: left; cursor: pointer; transition: background-color 0.3s; } .nav-item:hover { background-color: rgba(255, 255, 255, 0.1); } .nav-item.active { background-color: #3498db; } .nav-icon { margin-right: 10px; font-size: 1.1rem; } .notification-count { background-color: #e74c3c; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; margin-left: auto; } .sidebar-footer { padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .logout-btn { display: flex; align-items: center; background: none; border: none; color: white; cursor: pointer; } .main-content { flex: 1; padding: 20px; } .content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #e0e0e0; } .content-header h1 { margin: 0; color: #2c3e50; } .profile-image { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .properties-container, .documents-container, .notifications-container, .settings-container { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .properties-container h2, .documents-container h2, .notifications-container h2, .settings-container h2 { margin-top: 0; color: #2c3e50; padding-bottom: 15px; border-bottom: 1px solid #eee; } .property-list { display: grid; gap: 20px; } .property-card { display: flex; border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .property-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .property-image { width: 200px; height: 150px; object-fit: cover; } .property-details { flex: 1; padding: 15px; display: flex; flex-direction: column; } .property-details h3 { margin: 0 0 5px; color: #2c3e50; } .property-info { display: flex; gap: 20px; margin: 10px 0; color: #7f8c8d; } .status-badge { align-self: flex-start; padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; margin-bottom: 10px; } .status-badge.current { background-color: #2ecc71; color: white; } .status-badge.past { background-color: #e74c3c; color: white; } .view-details-btn { align-self: flex-start; padding: 8px 15px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } .view-details-btn:hover { background-color: #2980b9; } .document-list { display: grid; gap: 15px; } .document-card { display: flex; align-items: center; padding: 15px; border: 1px solid #eee; border-radius: 8px; } .document-icon { margin-right: 15px; font-size: 1.5rem; } .pdf-icon { color: #e74c3c; } .doc-icon { color: #3498db; } .document-info { flex: 1; } .document-info h3 { margin: 0 0 5px; color: #2c3e50; } .document-info p { margin: 0; color: #7f8c8d; font-size: 0.9rem; } .download-btn { padding: 8px 15px; background-color: #2ecc71; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } .download-btn:hover { background-color: #27ae60; } .notification-list { display: grid; gap: 10px; } .notification-item { display: flex; align-items: center; padding: 15px; border: 1px solid #eee; border-radius: 8px; cursor: pointer; transition: background-color 0.3s; } .notification-item:hover { background-color: #f8f9fa; } .notification-item.unread { background-color: #f0f7ff; border-left: 3px solid #3498db; } .notification-content { flex: 1; } .notification-content p { margin: 0 0 5px; color: #2c3e50; } .notification-date { color: #7f8c8d; font-size: 0.8rem; } .unread-icon { color: #3498db; margin-left: 15px; } .settings-form { max-width: 500px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; color: #2c3e50; font-weight: 500; } .form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } .save-btn { padding: 10px 20px; background-color: #2ecc71; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } .save-btn:hover { background-color: #27ae60; } import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Dashboard from './pages/tenant/Dashboard'; import './App.css'; function App() { return ( } /> ); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import './index.css'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); #root { min-height: 100vh; }