I'll create a dashboard for an HVAC installation company with the features you've requested. We'll use Next.js with the App Router, React Server Components, and Server Actions for the backend functionality. We'll also use shadcn/ui components for a polished UI.

Let's start by setting up the project structure and creating the main components:

This completes the basic structure of the HVAC installation company dashboard. Here's a summary of what we've created:

1. A layout with navigation using the MainNav and UserNav components.
2. A login/signup page with a form that toggles between login and signup modes.
3. A dashboard home page displaying key metrics.
4. An estimate request form for customers to submit their HVAC installation needs.
5. A referral system page where users can view and share their referral code.
6. A support ticket creation page for customers to submit issues or questions.
7. A care subscription page where customers can subscribe to a maintenance plan.

To fully implement this system, you would need to:

1. Set up a backend API to handle user authentication, data storage, and business logic.
2. Implement proper state management, possibly using React Context or a state management library like Redux.
3. Add form validation and error handling to all forms.
4. Implement actual API calls to your backend instead of the placeholder redirects.
5. Add more detailed pages for viewing estimates, tracking referrals, and managing support tickets.
6. Implement proper authentication checks to ensure only logged-in users can access certain pages.

Remember to style your components as needed and add any additional features specific to your HVAC installation company's needs. This structure provides a solid foundation that you can build upon and customize further.

I understand you want to modify the dashboard to show customer-specific HVAC information instead of the general metrics. Let's update the dashboard to reflect this change, making it more of a customer portal for those who have had HVAC equipment installed by your company.

Let's update the dashboard to show customer-specific HVAC information:

I've updated the dashboard to reflect a customer portal for those who have had HVAC equipment installed by your company. Here's a breakdown of the changes:

1. We now display a personalized welcome message with the customer's name.

2. The four cards at the top now show:

   • Last Installation Date
   • Last Service Date
   • Next Scheduled Service Date
   • Total Number of Installed Equipment

3. Below these cards, we have a new section that lists all the HVAC equipment installed for this customer. Each item shows:

   • Equipment Name
   • Model Number
   • Installation Date
   • A "View Details" button (which you can link to a detailed page for each piece of equipment)
4. I've used icons from the Lucide React library to make the cards more visually appealing.
5. The data is currently hardcoded in a customerData object at the top of the file. In a real application, you would fetch this data from your backend API.

This dashboard now provides a more personalized and relevant experience for your customers. They can quickly see their HVAC installation history, service dates, and details about their equipment.

To further improve this dashboard, you could:

1. Implement API calls to fetch real customer data.
2. Add links to schedule new services or request maintenance.
3. Include a section for any active alerts or notifications (e.g., "Your air filter needs changing").
4. Add a chart or graph showing energy usage over time if you have smart thermostats or energy monitoring.
5. Include quick links to user manuals or FAQs for their specific equipment.

Remember to ensure that this page is only accessible to authenticated users and that you're showing the correct data for each logged-in customer.