# PlatformSistemas

<!-- Test for auto-sync -->
Sistema de gestão integrada desenvolvido em React + TypeScript + Vite.

## 🚀 Repositório

- **Remote**: https://git.itguys.com.br/itguys_dev/Workspace
- **Branch**: `frontend_React`

## 📋 Índice

- [Início Rápido](#início-rápido)
- [Scripts Disponíveis](#scripts-disponíveis)
- [Git Auto-Sync](#git-auto-sync)
- [Estrutura do Projeto](#estrutura-do-projeto)
- [Tecnologias](#tecnologias)
- [Desenvolvimento](#desenvolvimento)

## 🎯 Início Rápido

### Pré-requisitos

- Node.js (v18 ou superior)
- npm ou yarn
- Git

### Instalação

```bash
# Clone o repositório
git clone https://git.itguys.com.br/itguys_dev/Workspace.git
cd PlatformSistemas

# Instale as dependências
npm install

# Configure as variáveis de ambiente
cp .env.example .env
# Edite o arquivo .env com suas configurações

# Inicie o servidor de desenvolvimento
npm run dev
```

## 📜 Scripts Disponíveis

```bash
# Desenvolvimento
npm run dev              # Inicia o servidor de desenvolvimento

# Build
npm run build            # Gera build de produção
npm run preview          # Preview do build de produção

# Qualidade de Código
npm run lint             # Executa ESLint

# Git Auto-Sync
npm run git:sync         # Inicia monitoramento Git com build automático
npm run git:sync:nobuild # Inicia monitoramento Git sem build automático
```

## 🔄 Git Auto-Sync

O **Git Auto-Sync** é um sistema de automação que monitora alterações no projeto e realiza commits/push automáticos.

### Como Usar

```bash
# Com build automático (recomendado para produção)
npm run git:sync

# Sem build automático (mais rápido para desenvolvimento)
npm run git:sync:nobuild
```

### Características

- ✅ Monitoramento em tempo real de alterações
- ✅ Debounce de 10 segundos (agrupa alterações)
- ✅ Build automático antes de cada commit
- ✅ Filtragem inteligente de arquivos
- ✅ Mensagens de commit descritivas

### Documentação Completa

Para mais detalhes, consulte [GIT-AUTO-SYNC.md](./GIT-AUTO-SYNC.md)

## 📁 Estrutura do Projeto

```
PlatformSistemas/
├── src/
│   ├── components/      # Componentes reutilizáveis
│   │   ├── access/      # Componentes de acesso
│   │   ├── admin/       # Componentes administrativos
│   │   ├── layout/      # Componentes de layout
│   │   └── ui/          # Componentes de UI
│   ├── features/        # Features do sistema
│   │   ├── fleet-v2/    # Gestão de frota
│   │   └── ...
│   ├── services/        # Serviços e APIs
│   ├── hooks/           # Custom hooks
│   ├── utils/           # Utilitários
│   └── index.css        # Estilos globais
├── public/              # Arquivos públicos
├── docs/                # Documentação
├── .env                 # Variáveis de ambiente
├── git-auto-sync.ps1    # Script de automação Git
└── package.json         # Dependências e scripts
```

## 🛠️ Tecnologias

### Core
- **React 19** - Biblioteca UI
- **TypeScript** - Superset JavaScript
- **Vite** - Build tool e dev server

### UI/UX
- **TailwindCSS** - Framework CSS
- **Radix UI** - Componentes acessíveis
- **Framer Motion** - Animações
- **Lucide React** - Ícones

### Estado e Formulários
- **Zustand** - Gerenciamento de estado
- **React Hook Form** - Formulários
- **Zod** - Validação de schemas

### Roteamento e Requisições
- **React Router DOM** - Roteamento
- **Axios** - Cliente HTTP

### Gráficos
- **Recharts** - Biblioteca de gráficos

## 💻 Desenvolvimento

### Variáveis de Ambiente

Copie `.env.example` para `.env` e configure:

```env
VITE_API_URL=https://dev.workspace.itguys.com.br/api
VITE_APP_NAME=PlatformSistemas
```

### Padrões de Código

- **Componentes**: Use componentes funcionais com hooks
- **Tipagem**: Sempre utilize TypeScript
- **Estilos**: Prefira TailwindCSS
- **Estado**: Use Zustand para estado global
- **Formulários**: Use React Hook Form + Zod

### ESLint

O projeto usa ESLint para garantir qualidade de código:

```bash
npm run lint
```

### Estrutura de Componentes

```tsx
// Exemplo de componente
import { useState } from 'react'
import { Button } from '@/components/ui/button'

interface MyComponentProps {
  title: string
  onAction?: () => void
}

export function MyComponent({ title, onAction }: MyComponentProps) {
  const [state, setState] = useState(false)
  
  return (
    <div className="p-4">
      <h2 className="text-xl font-bold">{title}</h2>
      <Button onClick={onAction}>Ação</Button>
    </div>
  )
}
```

## 🔐 Segurança

- Nunca commite arquivos `.env` (já está no `.gitignore`)
- Use variáveis de ambiente para dados sensíveis
- Mantenha dependências atualizadas

## 📝 Documentação Adicional

- [Git Auto-Sync](./GIT-AUTO-SYNC.md) - Documentação completa do sistema de automação
- [API Report](./RELATORIO_API.md) - Relatório de APIs utilizadas

## 🤝 Contribuindo

1. Crie uma branch para sua feature (`git checkout -b feature/MinhaFeature`)
2. Faça commit das suas alterações (`git commit -m 'Adiciona MinhaFeature'`)
3. Push para a branch (`git push origin feature/MinhaFeature`)
4. Abra um Pull Request

Ou simplesmente use o **Git Auto-Sync** para automação completa! 🚀

## 📄 Licença

Este projeto é propriedade da ITGuys.

---

**Desenvolvido com ❤️ pela equipe ITGuys**