Hacienda-San-Angel/frontend/Frontend-Hotel/.github/copilot-instructions.md

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.