Project Management Dashboard - Copy this React, Tailwind Component to your project
Create a user interface (UI) that closely resembles the provided image. The UI should include the following elements and functionality: Core Structure Header: A top bar with a logo, navigation links (e.g., "Back to Projects," "Team," "Project"), and a search bar. Sidebar: A left hand sidebar with sections like "Main," "My Project," "My Team," "My Payment," "My Profile," and "Other." Main Content Area: The primary workspace where project details, freelancer profiles, and other relevant information are displayed. Specific Elements Project Details Section: Project name (e.g., "Audio Visual Meet Asian Expo 4th edition") Project status (e.g., "Active") Project type (e.g., "Event Planning") Project metrics (e.g., "Contracted," "Average Offer," "Unpaid Contracts," "Missing Itineraries," "Unread Messages") Project timeline (start and end dates) Project location (e.g., "Sector 23, Los Angeles, CA") Project number (e.g., "76431") Project manager (e.g., "Jaison Alexander Jr.") Freelancer Profiles: Freelancer name Freelancer rating and reviews Freelancer location Freelancer average daily rate Freelancer availability status (e.g., "May not be available") Actions: Wishlist, Invite, Mute, Like Additional Features Filters: A mechanism to filter freelancers based on various criteria (e.g., location, rating, availability). Pagination: For displaying a large number of freelancers in a manageable way. Tooltip or hover effects: To provide additional information on elements when hovered over. Responsive design: To ensure the UI looks and functions well on different screen sizes. Specific UI Libraries or Frameworks: Consider using popular UI libraries or frameworks like: React: For a component based approach and efficient updates. Vue.js: For its declarative syntax and reactivity. Angular: For a more structured and enterprise ready solution. Material UI: For a pre built component library with a Material Design aesthetic. Bootstrap: For a more classic and responsive framework. Design Considerations: Color palette: Maintain a consistent color scheme throughout the UI. Typography: Use clear and legible fonts that are easy to read. Layout: Ensure a clean and organized layout with appropriate spacing and alignment. User experience: Focus on providing a smooth and intuitive user experience. Remember: The specific implementation details will depend on your chosen technology stack and design preferences. This prompt provides a solid foundation for creating a UI that closely resembles the provided image.
