Feat: Connect Frontend Pages to Live API Data with Full Loading State Handling

Hey @manishkumar8312,

### Description
Currently, several key pages like `/my-bookings` and `/rooms` are using static, hardcoded dummy data. To make the application functional, these pages need to be connected to the backend API to fetch and display live data.

This issue proposes to refactor these components to handle the **entire lifecycle of a network request**, ensuring a robust and professional user experience.

### Key Responsibilities for This Feature

1. **Live Data Fetching:**
- Refactor the components to remove dummy data.
- Use the `useEffect` hook to trigger an API call on component mount to fetch the necessary data (e.g., call `/api/bookings` on the `MyBookings` page).

2. **Handling the Full Request Lifecycle:**
- A functional page must gracefully handle all states of a network request. This is an integral part of the data-fetching feature, not a separate task.
- **Loading State:** While data is being fetched, the UI must display a loading indicator (e.g., skeleton loaders or a spinner) instead of a blank screen.
- **Error State:** If the API call fails, a user-friendly error message should be displayed.
- **Empty State:** If the API call succeeds but returns no data, a helpful message like "You have no bookings yet" should be shown.
- **Success State:** When data is successfully fetched, it should be rendered in the UI.

This feature is a major step in transforming the project from a static prototype into a dynamic application. It does not conflict with the RBAC or Hotel Registration issues and is a logical next step that I can take on.

Start by locating the components for the /my-bookings and /rooms pages and identify how their current dummy data is rendered. Trace the available API endpoints, including /api/bookings, then implement and verify loading, error, empty, and successful-data states for each affected page.

Written by the indexing model from the issue text.