QLDA Configuration

---
alwaysApply: false
---
You are an expert in modern React (React 19) and TypeScript, specialized in:
Ant Design 5, Pro Components, TanStack React Query 5, React Router v7,
DnD-Kit, Vite 7, and scalable component-driven frontend architecture.

Your job is to write frontend code that integrates perfectly into the QLDA FE project,
following its conventions, patterns, folder structure, and component behaviors.

===========================================================
📌 1. GENERAL REACT + TYPESCRIPT RULES
===========================================================
- Use React 19 with function components only.
- Use TypeScript strictly; avoid "any".
- Write explicit props types:
    type Props = { ... }
- Use named exports unless file is a page-level index.
- Avoid unnecessary re-renders using useCallback + useMemo.
- Avoid inline logic inside JSX; extract small functions when needed.
- Keep components small, pure, predictable.
- Keep UI logic in components and business logic in hooks/services.

===========================================================
📌 2. PROJECT ARCHITECTURE (PATTERN, NOT STRICT)
===========================================================
The project follows a consistent modular structure:

src/
 ├── App.tsx
 ├── main.tsx
 ├── assets/
 ├── components/               → shared UI components
 ├── context/                  → AuthProvider, global contexts
 ├── hooks/                    → reusable custom hooks
 ├── layouts/                  → AppLayout, AuthLayout
 ├── pages/                    → feature pages grouped by domain
 ├── services/                 → axios API modules
 ├── types/                    → shared FE types matching BE
 ├── styles/                   → CSS
 └── utils/                    → helpers & constants

Rules:
- Shared UI → src/components
- Domain-specific UI → src/pages/<domain>/components
- Page routes ALWAYS live in src/pages/<domain>/index.tsx
- DO NOT put API logic into components (use services)

===========================================================
📌 3. REACT ROUTER RULES (v7)
===========================================================
- Use <BrowserRouter> in App.tsx.
- Use:
    import { Route, Routes, Navigate } from 'react-router-dom';
- Private routes must be wrapped with <PrivateRoute/>.
- Use loader and suspense patterns when required.
- Pages MUST live inside src/pages/**.

===========================================================
📌 4. ANT DESIGN & PRO COMPONENTS RULES
===========================================================
- Use Ant Design 5 components: Button, Space, Table, Modal, Form, Input…
- Use Pro Components for tables/forms only when beneficial.
- Prefer responsive layout using Grid, Row, Col.
- UI must be clean, simple, consistent.
- Use message.success | message.error for notifications.
- Use Typography.Text for readable content.
- Keep Modal fully controlled (open={isOpen} onCancel={...}).

===========================================================
📌 5. REACT QUERY 5 RULES
===========================================================
- ALL API calls use React Query via services/ layer.
- NEVER call axios directly inside components.
- Must use:
    const { data, isLoading } = useQuery({ queryKey, queryFn });
    const mutation = useMutation({ mutationFn });
- After mutations, ALWAYS invalidate relevant query keys.

Query key rules:
- Projects: ['projects']
- Project detail: ['project', projectId]
- Columns: ['columns', projectId]
- Tasks: ['tasks', columnId]
- Labels: ['labels', projectId]

===========================================================
📌 6. SERVICES / API RULES
===========================================================
All API calls must:
- live in src/services/*.services.ts
- use axios instance from api.ts
- return typed responses
- avoid mixing UI logic
- be named consistently:
    projectService.create()
    taskService.updatePosition()
    userService.getProfile()

DO NOT:
- construct URLs manually inside components
- mutate axios instance outside api.ts

===========================================================
📌 7. TYPESYSTEM RULES
===========================================================
Types must match backend exactly (NestJS + TypeORM entities):
- user.type.ts
- group.type.ts
- project.type.ts
- project-board.ts (columns + tasks)
- task.type.ts

Rules:
- Do not rename fields unless requested by user.
- Use optional fields only when truly optional from backend.
- Avoid nested “any”.

===========================================================
📌 8. DND-KIT RULES (COLUMN + TASK DRAGGING)
===========================================================
This is CRITICAL for QLDA's board UI.

Required components:
- SortableColumn.tsx
- SortableTask.tsx
- TaskList.tsx
- AddColumnCard.tsx
- AddTaskCard.tsx

Rules:
- Must use:
    DndContext
    SortableContext
    PointerSensor
    KeyboardSensor
    closestCenter / rectSortingStrategy
- NEVER change column.id or task.id.
- ALWAYS update backend position using:
    columnService.updatePosition(...)
    taskService.updatePosition(...)

Task drag:
- within same column → use arrayMove
- across columns → remove + insert + update columnId

Column drag:
- reorder based on new index
- update backend with new position

Do not break:
- add task flow
- add column flow
- task modal logic
- react-query updaters

===========================================================
📌 9. FORM MANAGEMENT RULES
===========================================================
- Use Ant Form OR React Hook Form consistently inside modals.
- Validation must be inside form rules or useController (RHF).
- Avoid mixing uncontrolled & controlled inputs.
- Always reset form when modal closes.

===========================================================
📌 10. UI/UX RULES
===========================================================
- Keep visual layout simple (Space, Flex, Card).
- Use Skeleton or Spin for loading states.
- Avoid unnecessary animations.
- Respect minimal spacing (gap={8}, padding).
- Use meaningful icons from Ant Design Icons.

===========================================================
📌 11. PERFORMANCE RULES
===========================================================
- Use useMemo for computed lists (sorted tasks/columns).
- Use React.memo around TaskCard, Column components.
- Prevent unnecessary rerenders with stable keys.
- Do NOT re-render the entire board on small updates.

===========================================================
📌 12. CLEAN CODE RULES
===========================================================
- No inline styles except very simple ones.
- No commented-out code.
- Keep components below ~150 lines; split when needed.
- Use constants from utils/constants.ts.
- Use descriptive names: selectedTask, activeColumn, isAdding.

===========================================================
📌 13. ERROR HANDLING
===========================================================
- Use message.error('…') for API errors.
- Always guard against undefined data.
- Display empty states: <Empty /> for tables/boards.

===========================================================
📌 14. AI BEHAVIOR RULES
===========================================================
- Follow existing patterns + coding style of the project.
- Respect folder placement for new components/services/hooks.
- Do not generate code that breaks DnD behavior.
- Do not rewrite entire files unless explicitly requested.
- Output FULL file content when asked for “full code”.
- Ask clarifying questions when changes affect multiple components.
- Prefer simple, maintainable solutions instead of over-engineered ones.