# 🤖 INSTRUÇÕES ESPECÍFICAS PARA IA - INTEGRA FINANCE (REACT)

> **Migrado**: Use `.agent/instructions/CORE_INSTRUCTIONS.md` (base) e `.agent/project/PROJECT_CONTEXT.md` (contexto do projeto). Este arquivo permanece como referência legada.

## 🎯 OBJETIVO
Fornecer contexto detalhado para que a IA compreenda o projeto Integra Finance (PRALOG) em sua nova arquitetura React e possa oferecer sugestões precisas, seguindo os padrões de alta performance e design premium.

---

## 📋 CONTEXTO TÉCNICO ESSENCIAL

### Arquitetura Atual
- **Framework**: React 18+ com Vite.
- **Linguagem**: JavaScript (Moderno/ES6+).
- **Estilização**: Tailwind CSS (Mobile-first, Design System Atômico).
- **UI library**: Shadcn UI (Radix UI + Lucide).
- **Conceito**: Arquitetura Modular (Encapsulamento de features).
- **Estado**: Zustand (Global) + React Context (Módulos).
- **Padrão Principal**: Domain-Driven Feature Folders (Módulos em `src/features/`).

### Template de Referência OBRIGATÓRIO (Módulo RH)
**Localização**: `src/features/rh/ponto-eletronico/`
Deve conter:
- ✅ Hook customizado para lógica (`usePonto.js`).
- ✅ Componentes de apresentação isolados.
- ✅ Tratamento de geolocalização e erros null-safe.
- ✅ Animações Framer Motion ou Tailwind Keyframes.

### Estrutura de Pastas Obrigatória
```
src/
├── components/
│   ├── ui/             # Componentes Shadcn (NUNCA EDITAR MANUALMENTE)
│   └── shared/         # Componentes transversais (Ex: StatCard, PageHeader)
├── features/           # Domínios de negócio (FOLDER POR FEATURE)
├── hooks/              # Hooks globais (Ex: useTheme, useAuth)
├── services/           # Integrações com API (Axios/React Query)
└── utils/              # Formatadores e validadores
```

---

## 🛠️ PADRÕES DE DESENVOLVIMENTO

### 1. Componentes Funcionais (OBRIGATÓRIO)
```jsx
export const PointCard = ({ data }) => {
  return (
    <Card className="hover:shadow-md transition-all">
      {/* ... */}
    </Card>
  );
};
```

### 2. Hooks para Lógica de Negócio
```javascript
export const useAuth = () => {
  const login = async (credentials) => {
    // Implementação
  };
  return { login };
};
```

### 3. JSDoc para Documentação (Recomendado)
```javascript
/**
 * @typedef {Object} User
 * @property {string} id
 * @property {string} name
 * @property {'active' | 'inactive'} status
 */
```

---

## 🌐 AMBIENTE DE DESENVOLVIMENTO E TESTES
Todos os agentes de teste e validação devem utilizar o ambiente abaixo para verificações em tempo real:

- **URL Base**: `https://dev.workspace.itguys.com.br`
- **URL Plataforma**: `https://dev.workspace.itguys.com.br/plataforma/`
- **Usuário**: `financeiro@pralog.com.br`
- **Senha**: `123Mudar`

---

## 🏗️ ARQUITETURA DE AMBIENTES E ISOLAMENTO

### Regra de Ouro: Isolamento Total
- **Modificação Segura**: Ao ajustar um ambiente, a IA **NUNCA** deve alterar componentes internos de outro ambiente.
- **Localização de Componentes**: Componentes que pertencem apenas a um ambiente devem residir em `src/features/[ambiente]/components/`.
- **Uso de Shared**: Somente use `src/components/shared` para elementos verdadeiramente universais. Se uma alteração no `shared` puder quebrar outro ambiente, crie uma cópia local no ambiente em desenvolvimento ou use variantes/props.

---

## 🧬 PADRÃO DE VERSIONAMENTO DE COMPONENTES (DUAL-VERSION)

Todo componente complexo deve seguir esta estrutura:
```
src/features/[feature]/components/[NomeComponente]/
├── index.js                # Entry point (Exporta Produção por padrão)
├── [Componente].jsx        # Versão de PRODUÇÃO (Limpa, funcional)
└── [Componente].debug.jsx  # Versão de DEBUG (Wrapper com controles e mocks)
```

---

## 🚫 O QUE NUNCA FAZER
1. ❌ Importar componentes privados de um ambiente em outro.
2. ❌ Criar lógica de negócio global que seja específica de apenas um módulo.
3. ❌ Ignorar o bundle size ao adicionar novas dependências.
4. ❌ Criar componentes gigantes (> 200 linhas).

**IMPORTANTE**: Esta documentação é a verdade única para o padrão de código. Priorize o isolamento, a performance e a experiência premium por ambiente.