I'll create a billing UI for a dashboard with tabs for All, Pending, Upcoming, and Ongoing billing information. This will be a React component using the shadcn/ui library for styling and functionality.

Let's create the billing UI with the requested features:

This implementation creates a billing UI for a dashboard with the following features:

1. Tabs for All, Pending, Upcoming, and Ongoing billing information.
2. A table displaying billing details including description, amount, status, and date.
3. Color-coded status indicators for easy identification.
4. Responsive design using shadcn/ui components.

To use this billing UI in your dashboard:

1. Make sure you have the necessary shadcn/ui components installed (Table, Tabs, and Card).
2. Copy the provided files into your project structure.
3. Import and use the <Billing /> component in your dashboard layout or page.

You can customize the mock data in utils/mockData.ts to reflect your actual billing information. In a real-world scenario, you would replace this with data fetched from your backend API.

The billing information is displayed in a table format, and users can switch between different tabs to view All, Pending, Upcoming, or Ongoing billing items. The status of each item is color-coded for quick visual reference.

Feel free to adjust the styling or add more features as needed for your specific dashboard requirements.

I've created a reservations page that closely matches the design in the image with the following features:

1. Clean header with back button and action icons
2. Horizontal tab navigation with underline indicators

3. List of reservation cards showing:

   • Confirmation status
   • Guest name
   • Date range
   • Property details
   • Guest avatar (with fallback to initials)
4. Responsive layout that works on mobile and desktop
5. Subtle shadows and rounded corners matching the design
6. Proper spacing and typography hierarchy

The component uses shadcn/ui components for consistency and accessibility. You can customize the colors, spacing, and typography by adjusting the Tailwind classes to match your specific design system.

To use this component:

1. Make sure you have shadcn/ui's Avatar, Button, Card, and Tabs components installed
2. Copy the code into your project
3. Replace the mock data with your actual reservation data
4. Adjust the styling as needed to match your brand

The tabs are fully functional and you can add tab content by implementing the tab panels and filtering the reservations based on their status.