hazme una aplicacion web de sistema de rentas en react con los siguientes requisitos ### 1. Página Principal (Home)- Título Principal: "Service Rentals"- Elementos en Portada:- Botón: "Iniciar sesión" (desencadena un modal flotante de autenticación).- Sección "Encuentra tu hogar perfecto":- Filtro por Ubicación.- Filtro por Rango de precio.- Filtro por Fecha.- Filtro por Tipo de habitación (estudiante, pareja, individual).- Sección "Propiedades destacadas": Muestra una selección curada de propiedades.- Sección "Todas las propiedades": Presenta el listado completo de propiedades disponibles (planteado como parte de un dashboard general).- Sección "¿Por qué elegir Service Rentals?":- Búsqueda inteligente.- Propiedades verificadas.- Flexibilidad total.### 2. Sistema de Autenticación- Activación: Al hacer clic en "Iniciar sesión" (desde la página principal o cualquier otro punto de acceso).- Interfaz: Ventana flotante (modal).- Funcionalidades:- Accesos Rápidos a Cuentas Demo:- Usuario (con correo prellenado).- Arrendatario (con correo prellenado).- Administrador (con correo prellenado).- Campos de Login:- Correo electrónico.- Contraseña.- Registro de Nuevos Usuarios:- Nombre.- Correo electrónico.- Contraseña.### 3. Panel de Usuario (Inquilino)- Acceso: Tras iniciar sesión como "Usuario".- Vista Principal: Panel de usuario con un menú de navegación.- Opciones del Menú de Perfil:- Mi Perfil:- Edición de Datos Personales:- Nombre.- Apellido.- Foto de perfil (editar imagen).- Correo electrónico.- Otros datos personales.- Guardados: Sección para ver las propiedades que el usuario ha marcado como favoritas o guardadas.- Configuración:- Edición de Datos Avanzada: Permite las mismas ediciones que "Mi Perfil" pero con una interfaz potencialmente más detallada o con opciones adicionales.- Opción Avanzada: Cambiar cuenta a cuenta Arrendatario:- Funcionalidad: Transforma la cuenta de usuario actual en una cuenta de arrendatario.- Naturaleza: Esta conversión es permanente e irreversible. La cuenta deja de ser de usuario y pasa a ser exclusivamente de arrendatario.- Cerrar Sesión: Finaliza la sesión del usuario.### 4. ‍ Panel de Arrendatario (Propietario)- Acceso: Tras iniciar sesión como "Arrendatario" o al convertir una cuenta de "Usuario" a "Arrendatario".- Vista Principal: Dashboard del arrendatario.- Dashboard - Métricas Clave:- Resumen General: Visión global de la actividad.- Propiedades: Cantidad total de propiedades registradas.- Inquilinos: Cantidad total de inquilinos asociados.- Ganancias: Métricas financieras (diarias, semanales, mensuales, anuales).- Documentos: Estado de los documentos por inquilino (cuáles se han subido y cuáles están pendientes/faltantes).- Secciones del Panel de Arrendatario:- Propiedades:- Listado de Propiedades: Muestra todas las propiedades del arrendatario.- Botón "Agregar nueva propiedad":- Formulario de Información Básica de la Propiedad:- Título.- Dirección completa.- Ciudad o comuna/distrito.- Descripción.- Precio por día.- Servicios Generales de la Propiedad (Checkboxes): Ej. estacionamiento, seguridad, lavandería, Wi-Fi, televisión, etc.- Mini-Sección "Habitaciones":- Campos por Habitación (se pueden agregar múltiples):- Número de habitación.- Tipo (individual, pareja, estudio).- Precio mensual.- Disponibilidad (checkbox).- Servicios de Habitación (Checkboxes): Ej. muebles, TV, sábanas, etc.- Imágenes de la Habitación:- Hasta 5 imágenes por habitación.- Formato: cuadrados pequeños.- Descripción: fotos tomadas de distintos lados (frente, esquina, delante, atrás, etc.).- Inquilinos:- Listado de Inquilinos: Muestra todos los inquilinos asociados a las propiedades del arrendatario.- Botón "Agregar nuevo inquilino":- Formulario de Datos Personales:- Nombre y Apellido.- Edad.- Nacionalidad (chilena o extranjera).- Teléfono personal.- Teléfono de contacto cercano (familiar).- Mención de familia cercana en la comuna/región.- Formulario de Información Laboral:- Cargo o profesión.- Lugar de trabajo (ubicación o nombre de la empresa).- Días de trabajo.- Horario (diurno o nocturno).- Formulario de Información de Arriendo:- Propiedad y habitación asociada (filtrado por propiedades propias del arrendatario).- Monto mensual a pagar.- Forma de Pago (Selección Múltiple/Combinaciones): Efectivo, Transferencia, Débito, o combinaciones (ej. efectivo y transferencia, débito y transferencia).- Fecha de inicio del arriendo.- Duración del Arriendo: Meses (1, 3, 6, 12) o Indefinido.- Inventario de la Habitación (Checkboxes):- Objetos que se incluyen en la habitación: TV, decodificador, camas, sábanas, almohada, frazada, muebles, escritorio, silla, closet, etc.- Servicios incluidos en la habitación: Agua, luz, internet, gas, calefón, entre otros.- Documentos Solicitados (Carga de Archivos):- Cédula de identidad (solo el frente).- Contrato de trabajo.- Certificado de antecedentes.- Foto personal.- Finanzas:- Cálculo Automático de Ganancias:- Diarias.- Semanales.- Mensuales.- Anuales.- Exportar Reportes: En formato Excel, con opción de seleccionar rango de fechas.### 5. ️ Panel de Administrador- Acceso: Tras iniciar sesión como "Administrador".- Vista Principal: Dashboard del administrador.- Secciones del Panel de Administrador:- Resumen: Visión general del estado del sistema.- Usuarios:- Crear nuevos usuarios manualmente.- Supervisión de cuentas (ej. ver propiedades subidas por cada arrendatario).- Propiedades:- Verificar ubicación, habitaciones, estado de las propiedades.- Tomar acciones sobre propiedades (ej. eliminar propiedad).- Reportes del Sistema (Separados):- Reporte de seguridad.- Reporte de usuarios.- Reporte de propiedades.- Reporte financiero.y por ultimo te entregare la estructura de rutas de archivos para el sistema y si o si sigue mi estructura de rutas pq yo uso vite para ejecutarlo .... ....Sistema-de-Rentas/├── dist/│ ├── assets/│ └── index.html├── plugins/│ ├── babel-plugin-inject-data-locator.js│ └── vite-plugin-inject-data-locator.js├── src/│ ├── assets/│ ├── components/│ │ ├── Header.tsx│ │ ├── Header.css│ │ ├── RoomCard.tsx│ │ ├── RoomCard.css│ │ ├── Carousel.tsx│ │ ├── Carousel.css│ │ └── ...│ ├── context/│ │ └── UserContext.tsx│ ├── contents/│ │ └── MainContent.tsx│ ├── App.tsx│ ├── main.tsx│ └── index.css├── dist/│ ├── assets/│ └── index.html├── plugins/│ ├── babel-plugin-inject-data-locator.js│ └── vite-plugin-inject-data-locator.js├── README.md├── index.html├── package.json├── postcss.config.js├── tailwind.config.js├── tsconfig.json├── tsconfig.node.json└── vite.config.ts