Quiero que construyas una aplicaci贸n web SaaS tipo CMMS/EAM para mantenimiento industrial, inspirada en la estructura y experiencia de uso de...
Generated Prompt
## APPLICATION OVERVIEW The project is a web application designed as a SaaS solution for industrial maintenance management, focusing on asset management, work order handling, and preventive maintenance. The app will provide a clear and efficient user experience tailored for maintenance managers, planners, and technicians, enabling them to manage multiple plants and sites effectively. ## CORE FEATURES 1. **Dashboard**: A comprehensive view displaying key performance indicators (KPIs) such as open work orders, overdue tasks, and maintenance costs, along with widgets for quick insights. 2. **Asset Management**: A detailed table view of assets with capabilities to filter, search, and manage asset details, including maintenance history and associated documents. 3. **Work Orders**: A powerful work order management system allowing users to create, assign, and track work orders with extensive filtering options and detailed views for each order. 4. **Preventive Maintenance Plans**: Management of maintenance plans with automatic work order generation, scheduling, and execution tracking. 5. **Requests and Tickets**: An internal ticketing system for users to submit maintenance requests easily, which can be converted into work orders with minimal effort. 6. **Inventory Management**: A system for tracking spare parts and inventory levels, with alerts for low stock and detailed movement histories. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean, simple design with plenty of white space, minimal color palette, and a focus on typography to enhance readability and usability. - **Color Mode**: Light theme with dark text on light backgrounds to ensure clarity and comfort during prolonged use. - **Layout**: - Persistent left sidebar for navigation, with a top bar for actions and notifications. - Main content area displaying detailed tables, dashboards, and forms. - Tabs for detailed views of assets, work orders, and maintenance plans, ensuring clear organization of information. - **Typography**: Utilize a sans-serif font for clarity, with a clear hierarchy for headings, subheadings, and body text to guide users through the content seamlessly. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for robust and scalable application development. - **Styling**: Tailwind CSS for utility-first styling, enabling rapid design adjustments and a responsive layout. - **UI Components**: Utilize shadcn/ui for rich and reusable UI components, ensuring a cohesive look and feel across the application. - **State Management**: Implement context API or Redux for managing application state, if needed, to provide a seamless user experience. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and set up Tailwind CSS for styling. 2. **Create Main Structure**: Develop the main layout with a sidebar and top bar, ensuring responsive design principles are applied. 3. **Build Core Features**: - Implement the Dashboard with KPIs and widgets. - Create the Asset Management module with table views and detailed asset pages. - Develop the Work Orders module with filtering and detailed work order functionality. - Set up Preventive Maintenance, Requests, and Inventory Management modules. 4. **Integrate Navigation**: Ensure smooth navigation between modules using React Router or similar routing solutions. 5. **Implement State Management**: Set up context or Redux for managing application state across components. 6. **Testing and Optimization**: Conduct thorough testing for functionality, responsiveness, and user experience. Optimize for performance and usability. ## USER EXPERIENCE Users will interact with the application through a streamlined interface, beginning at the dashboard that provides an overview of critical metrics. They can navigate through the sidebar to access various modules, where they will utilize tables for asset and work order management, leveraging advanced filters and search features. Users can create and manage requests and preventive maintenance plans with ease, and the application will provide real-time feedback through notifications and alerts, ensuring a productive workflow. The design will focus on operational efficiency, minimizing distractions and enhancing user engagement with clear, actionable insights.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
