# Copilot Instructions for AI Coding Agents

## Project Overview
- This is a React (Vite) frontend for a hotel management system.
- Main app entry: `src/main.jsx`, root component: `src/App.jsx`.
- Pages are in `src/pages/` (e.g., `Dashboard.jsx`, `LoginPage.jsx`, `Employees.jsx`).
- Reusable UI components are in `src/components/` (e.g., `Navbar/`, `Sidebar.jsx`, `Modals/`, `Table/`).
- Service modules for API calls are in `src/services/` (e.g., `api.js`, `employeeService.js`).
- Styles are in `src/styles/` and component subfolders.

## Architecture & Patterns
- **Routing**: Managed in `src/routes/ProtectedRoute.jsx` and page components.
- **State**: Local state via React hooks; no global state manager detected.
- **API**: All backend communication is abstracted in `src/services/`.
- **Component Structure**: Prefer functional components and hooks. Group related files (JSX, CSS) in subfolders.
- **UI**: Uses Tailwind CSS (see `tailwind.config.cjs`), with custom styles in `src/styles/` and per-component CSS files.

## Developer Workflows
- **Start dev server**: `npm run dev` (Vite)
- **Build for production**: `npm run build`
- **Preview production build**: `npm run preview`
- **Install dependencies**: `npm install`
- **Lint**: `npm run lint` (uses `eslint.config.js`)
- **No test scripts or test files detected**

## Conventions & Tips
- **Component Naming**: PascalCase for components, camelCase for files/variables.
- **Pages vs Components**: Pages in `src/pages/`, reusable elements in `src/components/`.
- **Service Layer**: All API logic should go in `src/services/`, not in components.
- **Assets**: Place images/icons in `public/` or `src/assets/`.
- **Modals, Tables, Filters**: Use the subfolders in `src/components/` as templates for new UI patterns.
- **Protected Routes**: Use `src/routes/ProtectedRoute.jsx` for auth-guarded navigation.

## Integration Points
- **API Base URL**: Likely configured via `.env` (not shown here).
- **External Libraries**: React, Vite, Tailwind CSS, ESLint.

## Examples
- To add a new page: create a file in `src/pages/`, add a route, and (if needed) update navigation in `Sidebar.jsx` or `Navbar.jsx`.
- To add a new API call: add a function in the relevant `src/services/*.js` file and import it in your component/page.

---

For questions about unclear patterns or missing documentation, ask the user for clarification or examples from their workflow.