APPLICATION OVERVIEW PATUH is a web application designed for medium to large enterprises to monitor compliance with AMDAL/RKL-RPL or PROPER...
Generated Prompt
```markdown # APPLICATION TYPE & PURPOSE Create a web application named PATUH designed for medium to large enterprises to monitor compliance with AMDAL/RKL-RPL or PROPER regulations. This SaaS solution enables companies to manage essential testing for wastewater, emissions, and other mandatory evaluations through a user-friendly interface. # CORE FEATURES & FUNCTIONALITY 1. **Compliance Calendar**: - A grid or calendar view displaying scheduled testing dates and associated laboratories. - Users can visualize upcoming compliance tasks and check details for specific dates. 2. **Laboratory Uploads**: - Functionality for users to upload laboratory results (LHU). - Ensures all compliance documents are stored securely and are easily accessible. 3. **Reminder Notifications**: - Automated alerts and reminders for upcoming tests. - Helps users stay on top of compliance responsibilities. 4. **User Authentication**: - Secure login for users to manage their accounts. - Access compliance schedules specific to their organization. 5. **Dashboard Overview**: - A user-friendly dashboard presenting an overview of compliance status, upcoming tests, and overdue tasks. - Visual indicators for compliance health. 6. **Reporting Tools**: - Generate reports based on compliance data. - Allows companies to track their environmental impact and performance over time. # TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Redux (or Context API if preferred) # DESIGN & UX SPECIFICATIONS - **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography. - **Color Mode**: Light theme with dark text on light backgrounds. - **Primary Color**: #1978E5 (accent for buttons, links, highlights). - **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements. - **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs. - **Layout**: - The main layout will feature a header with navigation links. - A central content area showcasing the calendar and dashboard. - A sidebar for quick access to upload functionality and settings. - **User Experience**: - Users log in to a dashboard overview of their compliance status. - Simple navigation to the compliance calendar and upload functionality. - Notifications for impending tests ensure usability without distraction. # IMPLEMENTATION APPROACH 1. **Set Up Project**: - Initialize a new React project with TypeScript. - Install necessary dependencies including Tailwind CSS and shadcn/ui. 2. **Create Components**: - Develop reusable components for the calendar, upload functionality, dashboard, and user authentication. 3. **Implement Routing**: - Set up routing using React Router to manage navigation between different views. 4. **Integrate State Management**: - Implement Redux (or Context API) to manage application state, particularly for user authentication and compliance data. 5. **Design Layout**: - Apply Tailwind CSS to structure the layout according to the design specifications. - Ensure responsiveness across devices. 6. **Testing**: - Conduct unit and integration testing to ensure all features function as intended and meet user requirements. # ERROR HANDLING & PERFORMANCE - Implement input validation for laboratory uploads to ensure data integrity. - Manage loading states for async operations to enhance user experience. - Handle edge cases, such as failed uploads or missing compliance data gracefully, providing user feedback. # ORGANIZATION & STRUCTURE - **Sections**: Organize the application into clear sections for: - Dashboard - Compliance Calendar - Laboratory Uploads - User Management - Reporting Tools ``` This prompt provides a comprehensive and structured outline for building the PATUH web application using V0, covering all necessary aspects from features to design specifications.
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!
