PlatformSistemas

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
• Scripts Disponíveis
• Git Auto-Sync
• Estrutura do Projeto
• Tecnologias
• Desenvolvimento

🎯 Início Rápido

Pré-requisitos

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

Instalação

# 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

# 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

# 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

📁 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:

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:

npm run lint

Estrutura de Componentes

// 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 - Documentação completa do sistema de automação
• API Report - 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