Construye el Dashboard Principal (Home / Feed) del rol Administrador para una aplicación MVP de control y seguimiento de interventorías de obra.
Generated Prompt
## APPLICATION OVERVIEW This web application is a dashboard specifically designed for the Administrator role within an MVP for monitoring and tracking construction interventions. The primary purpose of this dashboard is to provide a clear, concise overview of the status of various construction projects, allowing the Administrator to quickly identify delays, risks, and overall progress. ## CORE FEATURES 1. **Executive Header**: Displays a dynamic greeting, current date, and a simple global filter for projects (active, at risk, delayed, completed) along with a notification icon. 2. **Global KPIs Summary**: Four horizontal cards showcasing key performance indicators: total active projects, projects at risk, delayed projects, and average progress percentage, each card featuring a large number and a visual traffic light indicator. 3. **General Project Status Visualization**: A dominant yet simple donut or bar chart illustrating the distribution of projects based on their status: on time, at risk, delayed, and completed, with hover effects revealing detailed counts and percentages. 4. **General Timeline**: A simplified horizontal timeline view for the next 4-6 weeks, displaying project names, current stages, scheduled end dates, and delay indicators for projects that are behind schedule, with the ability to click through to detailed views. 5. **Project Ranking by Deviation**: A compact table listing up to 5 projects with the greatest deviations, detailing project names, scheduled progress, actual progress, percentage deviation, and status indicators, along with a "View Details" button. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - A clean and simple design with ample white space, focusing on clarity and readability. - **Color Mode**: Light theme with dark text on light backgrounds, ensuring strong contrast and easy readability. - **Layout**: Vertical scroll layout organized into five key sections (Header, KPIs, Status Visualization, Timeline, Ranking). - **Typography**: Use a sans-serif font for clarity, with a clear hierarchy (larger sizes for titles, medium for section headers, and smaller for body text). ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for type safety and component-based architecture. - **Styling**: Tailwind CSS for a utility-first design approach that allows for rapid styling. - **UI Components**: Utilize shadcn/ui for pre-built components that align with the design requirements. - **State Management**: Use React Context API for global state management to handle dashboard data. ## IMPLEMENTATION STEPS 1. **Setup Project Structure**: Initialize a new React project with TypeScript and install required dependencies including Tailwind CSS and shadcn/ui. 2. **Build Executive Header Component**: Create the header component to include dynamic greeting, date, global filter, and notification icon. 3. **Develop KPI Cards Component**: Implement four KPI cards using responsive design principles, ensuring they are clickable and provide visual feedback. 4. **Create Status Visualization Component**: Integrate a chart library (e.g., Chart.js or Recharts) to display the general project status in a visually appealing manner. 5. **Design General Timeline Component**: Implement the timeline view with appropriate styling and clickable functionality to access detailed project information. 6. **Build Ranking Table Component**: Create a compact table to display the projects ranked by deviation, ensuring it’s sortable by default. ## USER EXPERIENCE The dashboard should prioritize user interaction through smooth navigation and a clean layout. Users should be able to scan the dashboard in under 10 seconds, with each section clearly defined and accessible. Hover effects will provide additional insights without overwhelming the user, while click actions will seamlessly transition them to detailed views of specific projects, ensuring a fluid and engaging experience. This dashboard design will empower Administrators to maintain control and make strategic decisions based on clear and straightforward data presentations.
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!
