function TenantCard({ name, email, phone, leaseStart, leaseEnd, rentAmount, paymentHistory }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 max-w-md", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, name), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, email)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, phone)))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200 pt-4 mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mb-2 font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Lease Details"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2 text-sm", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Start Date:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, leaseStart), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "End Date:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, leaseEnd), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Monthly Rent:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "$", rentAmount))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200 pt-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mb-2 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Payment History"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, paymentHistory.map((payment, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center text-sm", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, payment.date), /*#__PURE__*/ React.createElement("span", { className: `font-medium ${payment.status === "Paid" ? "text-green-500" : "text-red-500"}`, __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "$", payment.amount, " - ", payment.status)))))); } function TenantCardStory() { const sampleData = { name: "John Smith", email: "john.smith@email.com", phone: "(555) 123-4567", leaseStart: "01/01/2024", leaseEnd: "12/31/2024", rentAmount: 1500, paymentHistory: [ { date: "01/01/2024", amount: 1500, status: "Paid" }, { date: "12/01/2023", amount: 1500, status: "Paid" }, { date: "11/01/2023", amount: 1500, status: "Late" } ] }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100", __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TenantCard, { ...sampleData, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this })); } function PropertyCard({ image, address, status, onEdit, onDelete }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-sm bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `Property at ${address}`, className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, address), /*#__PURE__*/ React.createElement("span", { className: `inline-block px-2 py-1 text-sm rounded-full ${status === "Occupied" ? "bg-green-100 text-green-800" : status === "Vacant" ? "bg-red-100 text-red-800" : "bg-yellow-100 text-yellow-800"}`, __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, status)), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onEdit, className: "inline-block p-2 text-blue-600 hover:bg-blue-50 rounded-full", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onDelete, className: "inline-block p-2 text-red-600 hover:bg-red-50 rounded-full", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }))))); } function PropertyCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PropertyCard, { image: "/sample-property-1.jpg", address: "123 Main St, Anytown, USA", status: "Occupied", onEdit: ()=>{}, onDelete: ()=>{}, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PropertyCard, { image: "/sample-property-2.jpg", address: "456 Park Ave, Somewhere, USA", status: "Vacant", onEdit: ()=>{}, onDelete: ()=>{}, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PropertyCard, { image: "/sample-property-3.jpg", address: "789 Oak Rd, Elsewhere, USA", status: "Maintenance", onEdit: ()=>{}, onDelete: ()=>{}, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this })); } function DashboardStats({ totalProperties, occupancyRate, pendingPayments, maintenanceRequests }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 w-full font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f8fafc] p-4 rounded-lg", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#64748b] text-sm", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, "Total Properties"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-building text-[#3b82f6]", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-semibold text-[#1e293b]", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, totalProperties))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#f8fafc] p-4 rounded-lg", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#64748b] text-sm", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Occupancy Rate"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-percentage text-[#10b981]", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-semibold text-[#1e293b]", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, occupancyRate, "%"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#f8fafc] p-4 rounded-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#64748b] text-sm", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Pending Payments"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-dollar-sign text-[#f59e0b]", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-semibold text-[#1e293b]", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "$", pendingPayments))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#f8fafc] p-4 rounded-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#64748b] text-sm", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Maintenance Requests"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-tools text-[#ef4444]", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-semibold text-[#1e293b]", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, maintenanceRequests))))); } function DashboardStatsStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#f1f5f9]", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DashboardStats, { totalProperties: 42, occupancyRate: 85, pendingPayments: 15750, maintenanceRequests: 8, __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this })); } function SideNavigation() { const [activeLink, setActiveLink] = useState("Dashboard"); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-lg", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-8", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, [ "Dashboard", "Properties", "Tenants", "Payments", "Calendar", "Reports" ].map((item)=>/*#__PURE__*/ React.createElement("button", { key: item, onClick: ()=>setActiveLink(item), className: `inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium h-full ${activeLink === item ? "border-blue-500 text-gray-900" : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"}`, __source: { fileName: "", lineNumber: 18, columnNumber: 17 }, __self: this }, item))))))); } function SideNavigationStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SideNavigation, { __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function MainComponent() { const recentActivity = [ { id: 1, type: "payment", description: "Rent payment received from Unit 4B", date: "2024-01-20" }, { id: 2, type: "maintenance", description: "New maintenance request for Unit 2A", date: "2024-01-19" }, { id: 3, type: "lease", description: "Lease renewal for Unit 3C", date: "2024-01-18" } ]; const upcomingPayments = [ { id: 1, unit: "1A", amount: 1200, dueDate: "2024-02-01" }, { id: 2, unit: "2B", amount: 1500, dueDate: "2024-02-01" }, { id: 3, unit: "3D", amount: 1350, dueDate: "2024-02-03" } ]; const maintenanceRequests = [ { id: 1, unit: "2A", issue: "Leaking faucet", priority: "Medium", date: "2024-01-19" }, { id: 2, unit: "4C", issue: "Heating not working", priority: "High", date: "2024-01-18" }, { id: 3, unit: "1B", issue: "Light fixture replacement", priority: "Low", date: "2024-01-17" } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-gray-50 min-h-screen", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Recent Activity"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, recentActivity.map((activity)=>/*#__PURE__*/ React.createElement("div", { key: activity.id, className: "flex items-start space-x-3 border-b pb-3", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${activity.type === "payment" ? "fa-dollar-sign bg-green-100" : activity.type === "maintenance" ? "fa-wrench bg-red-100" : "fa-file-contract bg-blue-100"} p-2 rounded-full text-sm`, __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 73, columnNumber: 21 }, __self: this }, activity.description), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-xs", __source: { fileName: "", lineNumber: 76, columnNumber: 21 }, __self: this }, activity.date)))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Upcoming Payments"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, upcomingPayments.map((payment)=>/*#__PURE__*/ React.createElement("div", { key: payment.id, className: "flex justify-between items-center border-b pb-3", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 94, columnNumber: 21 }, __self: this }, "Unit ", payment.unit), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 95, columnNumber: 21 }, __self: this }, payment.dueDate)), /*#__PURE__*/ React.createElement("span", { className: "font-roboto font-semibold text-green-600", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, "$", payment.amount))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Maintenance Requests"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, maintenanceRequests.map((request)=>/*#__PURE__*/ React.createElement("div", { key: request.id, className: "border-b pb-3", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 113, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 114, columnNumber: 23 }, __self: this }, "Unit ", request.unit), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 115, columnNumber: 23 }, __self: this }, request.issue)), /*#__PURE__*/ React.createElement("span", { className: `text-xs px-2 py-1 rounded ${request.priority === "High" ? "bg-red-100 text-red-800" : request.priority === "Medium" ? "bg-yellow-100 text-yellow-800" : "bg-green-100 text-green-800"}`, __source: { fileName: "", lineNumber: 117, columnNumber: 21 }, __self: this }, request.priority)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-xs mt-1", __source: { fileName: "", lineNumber: 129, columnNumber: 19 }, __self: this }, request.date)))))))); }