feat: Portal Web React + TailwindCSS
- Dashboard with stats cards and quick actions - Issues list with filters and status badges - Repositories management with add/reindex/delete - Modules editor for business rules - Settings page for integrations (JIRA, Bitbucket, LLM) - Responsive sidebar navigation - React Query for data fetching Pages: Dashboard, Issues, Repositories, Modules, Settings
This commit is contained in:
Ricel Leite
parent
dcf0988790
commit
011a93c5b9
|
|
@ -0,0 +1,12 @@
|
||||||
|
FROM node:20-alpine
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
COPY package*.json ./
|
||||||
|
RUN npm install
|
||||||
|
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>ACI AI Fixer - Portal</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"name": "aci-ai-fixer-portal",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.21.0",
|
||||||
|
"@tanstack/react-query": "^5.17.0",
|
||||||
|
"axios": "^1.6.0",
|
||||||
|
"lucide-react": "^0.303.0",
|
||||||
|
"clsx": "^2.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.0",
|
||||||
|
"@types/react-dom": "^18.2.0",
|
||||||
|
"@vitejs/plugin-react": "^4.2.0",
|
||||||
|
"autoprefixer": "^10.4.0",
|
||||||
|
"postcss": "^8.4.0",
|
||||||
|
"tailwindcss": "^3.4.0",
|
||||||
|
"typescript": "^5.3.0",
|
||||||
|
"vite": "^5.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { Routes, Route } from 'react-router-dom'
|
||||||
|
import Layout from './components/Layout'
|
||||||
|
import Dashboard from './pages/Dashboard'
|
||||||
|
import Issues from './pages/Issues'
|
||||||
|
import Repositories from './pages/Repositories'
|
||||||
|
import Modules from './pages/Modules'
|
||||||
|
import Settings from './pages/Settings'
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Dashboard />} />
|
||||||
|
<Route path="/issues" element={<Issues />} />
|
||||||
|
<Route path="/repositories" element={<Repositories />} />
|
||||||
|
<Route path="/modules" element={<Modules />} />
|
||||||
|
<Route path="/settings" element={<Settings />} />
|
||||||
|
</Routes>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
import { Link, useLocation } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
LayoutDashboard,
|
||||||
|
AlertCircle,
|
||||||
|
GitBranch,
|
||||||
|
Brain,
|
||||||
|
Settings,
|
||||||
|
Cpu
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { clsx } from 'clsx'
|
||||||
|
|
||||||
|
const navigation = [
|
||||||
|
{ name: 'Dashboard', href: '/', icon: LayoutDashboard },
|
||||||
|
{ name: 'Issues', href: '/issues', icon: AlertCircle },
|
||||||
|
{ name: 'Repositórios', href: '/repositories', icon: GitBranch },
|
||||||
|
{ name: 'Módulos', href: '/modules', icon: Brain },
|
||||||
|
{ name: 'Configurações', href: '/settings', icon: Settings },
|
||||||
|
]
|
||||||
|
|
||||||
|
interface LayoutProps {
|
||||||
|
children: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Layout({ children }: LayoutProps) {
|
||||||
|
const location = useLocation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="w-64 bg-gray-900 text-white">
|
||||||
|
<div className="p-4 flex items-center gap-2">
|
||||||
|
<Cpu className="h-8 w-8 text-blue-400" />
|
||||||
|
<div>
|
||||||
|
<h1 className="font-bold text-lg">ACI AI Fixer</h1>
|
||||||
|
<p className="text-xs text-gray-400">v0.1.0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="mt-4">
|
||||||
|
{navigation.map((item) => {
|
||||||
|
const isActive = location.pathname === item.href
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.name}
|
||||||
|
to={item.href}
|
||||||
|
className={clsx(
|
||||||
|
'flex items-center gap-3 px-4 py-3 text-sm transition-colors',
|
||||||
|
isActive
|
||||||
|
? 'bg-gray-800 text-white border-r-2 border-blue-400'
|
||||||
|
: 'text-gray-300 hover:bg-gray-800 hover:text-white'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<item.icon className="h-5 w-5" />
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<div className="flex-1 flex flex-col">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="bg-white border-b border-gray-200 px-6 py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-800">
|
||||||
|
{navigation.find(n => n.href === location.pathname)?.name || 'ACI AI Fixer'}
|
||||||
|
</h2>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<span className="text-sm text-gray-500">
|
||||||
|
Ambiente: <span className="text-green-600 font-medium">Desenvolvimento</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Page content */}
|
||||||
|
<main className="flex-1 p-6 overflow-auto">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-gray-50 text-gray-900;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||||
|
import { BrowserRouter } from 'react-router-dom'
|
||||||
|
import App from './App'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
staleTime: 1000 * 60 * 5, // 5 minutes
|
||||||
|
retry: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<BrowserRouter>
|
||||||
|
<App />
|
||||||
|
</BrowserRouter>
|
||||||
|
</QueryClientProvider>
|
||||||
|
</React.StrictMode>,
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
import {
|
||||||
|
CheckCircle,
|
||||||
|
Clock,
|
||||||
|
AlertTriangle,
|
||||||
|
XCircle,
|
||||||
|
TrendingUp,
|
||||||
|
Activity
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { api } from '../lib/api'
|
||||||
|
|
||||||
|
interface StatsCardProps {
|
||||||
|
title: string
|
||||||
|
value: string | number
|
||||||
|
icon: React.ReactNode
|
||||||
|
trend?: string
|
||||||
|
color: string
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatsCard({ title, value, icon, trend, color }: StatsCardProps) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">{title}</p>
|
||||||
|
<p className="text-3xl font-bold mt-1">{value}</p>
|
||||||
|
{trend && (
|
||||||
|
<p className="text-sm text-green-600 mt-1 flex items-center gap-1">
|
||||||
|
<TrendingUp className="h-4 w-4" />
|
||||||
|
{trend}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={`p-3 rounded-full ${color}`}>
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Dashboard() {
|
||||||
|
const { data: stats, isLoading } = useQuery({
|
||||||
|
queryKey: ['stats'],
|
||||||
|
queryFn: () => api.get('/api/issues/stats/summary').then(r => r.data),
|
||||||
|
})
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<Activity className="h-8 w-8 animate-spin text-blue-500" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Stats Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<StatsCard
|
||||||
|
title="Total de Issues"
|
||||||
|
value={stats?.total_issues || 0}
|
||||||
|
icon={<AlertTriangle className="h-6 w-6 text-white" />}
|
||||||
|
color="bg-blue-500"
|
||||||
|
/>
|
||||||
|
<StatsCard
|
||||||
|
title="Pendentes"
|
||||||
|
value={stats?.pending || 0}
|
||||||
|
icon={<Clock className="h-6 w-6 text-white" />}
|
||||||
|
color="bg-yellow-500"
|
||||||
|
/>
|
||||||
|
<StatsCard
|
||||||
|
title="Aceitas"
|
||||||
|
value={stats?.accepted || 0}
|
||||||
|
icon={<CheckCircle className="h-6 w-6 text-white" />}
|
||||||
|
color="bg-green-500"
|
||||||
|
trend={stats?.success_rate ? `${(stats.success_rate * 100).toFixed(0)}% sucesso` : undefined}
|
||||||
|
/>
|
||||||
|
<StatsCard
|
||||||
|
title="Rejeitadas"
|
||||||
|
value={stats?.rejected || 0}
|
||||||
|
icon={<XCircle className="h-6 w-6 text-white" />}
|
||||||
|
color="bg-red-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Recent Activity */}
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200">
|
||||||
|
<h3 className="text-lg font-semibold">Atividade Recente</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="text-center text-gray-500 py-8">
|
||||||
|
<Activity className="h-12 w-12 mx-auto mb-4 text-gray-300" />
|
||||||
|
<p>Nenhuma atividade recente</p>
|
||||||
|
<p className="text-sm mt-2">
|
||||||
|
Configure os webhooks do JIRA para começar a receber issues
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200">
|
||||||
|
<h3 className="text-lg font-semibold">Ações Rápidas</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<button className="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-left">
|
||||||
|
<h4 className="font-medium">Testar Conexão JIRA</h4>
|
||||||
|
<p className="text-sm text-gray-500 mt-1">Verificar integração com o servidor JIRA</p>
|
||||||
|
</button>
|
||||||
|
<button className="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-left">
|
||||||
|
<h4 className="font-medium">Re-indexar Repositórios</h4>
|
||||||
|
<p className="text-sm text-gray-500 mt-1">Atualizar índice de código fonte</p>
|
||||||
|
</button>
|
||||||
|
<button className="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-left">
|
||||||
|
<h4 className="font-medium">Testar LLM</h4>
|
||||||
|
<p className="text-sm text-gray-500 mt-1">Verificar conexão com modelo de IA</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,190 @@
|
||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
Filter,
|
||||||
|
RefreshCw,
|
||||||
|
ExternalLink,
|
||||||
|
CheckCircle,
|
||||||
|
Clock,
|
||||||
|
XCircle,
|
||||||
|
Activity
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { api } from '../lib/api'
|
||||||
|
import { clsx } from 'clsx'
|
||||||
|
|
||||||
|
type IssueStatus = 'pending' | 'analyzing' | 'analyzed' | 'fix_generated' | 'pr_created' | 'accepted' | 'rejected' | 'failed'
|
||||||
|
|
||||||
|
interface Issue {
|
||||||
|
id: string
|
||||||
|
jira_key: string
|
||||||
|
title: string
|
||||||
|
status: IssueStatus
|
||||||
|
module?: string
|
||||||
|
confidence?: number
|
||||||
|
created_at: string
|
||||||
|
pr_url?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusConfig: Record<IssueStatus, { label: string; color: string; icon: React.ReactNode }> = {
|
||||||
|
pending: { label: 'Pendente', color: 'bg-gray-100 text-gray-800', icon: <Clock className="h-4 w-4" /> },
|
||||||
|
analyzing: { label: 'Analisando', color: 'bg-blue-100 text-blue-800', icon: <Activity className="h-4 w-4 animate-spin" /> },
|
||||||
|
analyzed: { label: 'Analisado', color: 'bg-purple-100 text-purple-800', icon: <CheckCircle className="h-4 w-4" /> },
|
||||||
|
fix_generated: { label: 'Fix Gerado', color: 'bg-indigo-100 text-indigo-800', icon: <CheckCircle className="h-4 w-4" /> },
|
||||||
|
pr_created: { label: 'PR Criado', color: 'bg-cyan-100 text-cyan-800', icon: <ExternalLink className="h-4 w-4" /> },
|
||||||
|
accepted: { label: 'Aceito', color: 'bg-green-100 text-green-800', icon: <CheckCircle className="h-4 w-4" /> },
|
||||||
|
rejected: { label: 'Rejeitado', color: 'bg-red-100 text-red-800', icon: <XCircle className="h-4 w-4" /> },
|
||||||
|
failed: { label: 'Falhou', color: 'bg-red-100 text-red-800', icon: <XCircle className="h-4 w-4" /> },
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Issues() {
|
||||||
|
const [search, setSearch] = useState('')
|
||||||
|
const [statusFilter, setStatusFilter] = useState<IssueStatus | ''>('')
|
||||||
|
|
||||||
|
const { data, isLoading, refetch } = useQuery({
|
||||||
|
queryKey: ['issues', statusFilter],
|
||||||
|
queryFn: () => api.get('/api/issues', {
|
||||||
|
params: { status: statusFilter || undefined }
|
||||||
|
}).then(r => r.data),
|
||||||
|
})
|
||||||
|
|
||||||
|
const issues: Issue[] = data?.items || []
|
||||||
|
|
||||||
|
const filteredIssues = issues.filter(issue =>
|
||||||
|
issue.jira_key.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
issue.title.toLowerCase().includes(search.toLowerCase())
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="flex flex-wrap gap-4 items-center">
|
||||||
|
<div className="flex-1 min-w-[200px] relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Buscar por JIRA key ou título..."
|
||||||
|
value={search}
|
||||||
|
onChange={e => setSearch(e.target.value)}
|
||||||
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Filter className="h-5 w-5 text-gray-400" />
|
||||||
|
<select
|
||||||
|
value={statusFilter}
|
||||||
|
onChange={e => setStatusFilter(e.target.value as IssueStatus | '')}
|
||||||
|
className="border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="">Todos os status</option>
|
||||||
|
{Object.entries(statusConfig).map(([key, config]) => (
|
||||||
|
<option key={key} value={key}>{config.label}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => refetch()}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<RefreshCw className="h-4 w-4" />
|
||||||
|
Atualizar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Issues Table */}
|
||||||
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<Activity className="h-8 w-8 animate-spin text-blue-500" />
|
||||||
|
</div>
|
||||||
|
) : filteredIssues.length === 0 ? (
|
||||||
|
<div className="text-center text-gray-500 py-16">
|
||||||
|
<Clock className="h-12 w-12 mx-auto mb-4 text-gray-300" />
|
||||||
|
<p className="text-lg font-medium">Nenhuma issue encontrada</p>
|
||||||
|
<p className="text-sm mt-2">
|
||||||
|
Issues do JIRA aparecerão aqui após configurar os webhooks
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<table className="w-full">
|
||||||
|
<thead className="bg-gray-50 border-b border-gray-200">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">JIRA Key</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Título</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Módulo</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Confiança</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Ações</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-gray-200">
|
||||||
|
{filteredIssues.map(issue => {
|
||||||
|
const status = statusConfig[issue.status]
|
||||||
|
return (
|
||||||
|
<tr key={issue.id} className="hover:bg-gray-50">
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-blue-600 hover:underline font-medium"
|
||||||
|
>
|
||||||
|
{issue.jira_key}
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-gray-900 max-w-md truncate">
|
||||||
|
{issue.title}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-gray-500">
|
||||||
|
{issue.module || '-'}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<span className={clsx('inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium', status.color)}>
|
||||||
|
{status.icon}
|
||||||
|
{status.label}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
{issue.confidence ? (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-16 bg-gray-200 rounded-full h-2">
|
||||||
|
<div
|
||||||
|
className="bg-blue-500 h-2 rounded-full"
|
||||||
|
style={{ width: `${issue.confidence * 100}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-gray-600">
|
||||||
|
{(issue.confidence * 100).toFixed(0)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : '-'}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button className="text-blue-600 hover:text-blue-800 text-sm">
|
||||||
|
Ver
|
||||||
|
</button>
|
||||||
|
{issue.pr_url && (
|
||||||
|
<a
|
||||||
|
href={issue.pr_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-green-600 hover:text-green-800 text-sm flex items-center gap-1"
|
||||||
|
>
|
||||||
|
PR <ExternalLink className="h-3 w-3" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,291 @@
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import {
|
||||||
|
Plus,
|
||||||
|
Edit2,
|
||||||
|
Trash2,
|
||||||
|
Brain,
|
||||||
|
Save,
|
||||||
|
X,
|
||||||
|
Activity,
|
||||||
|
BookOpen
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { api } from '../lib/api'
|
||||||
|
|
||||||
|
interface Module {
|
||||||
|
name: string
|
||||||
|
description?: string
|
||||||
|
program_patterns: string[]
|
||||||
|
keywords: string[]
|
||||||
|
rules: string[]
|
||||||
|
restrictions: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Modules() {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
const [editingModule, setEditingModule] = useState<Module | null>(null)
|
||||||
|
const [isNew, setIsNew] = useState(false)
|
||||||
|
|
||||||
|
const { data: modules, isLoading } = useQuery({
|
||||||
|
queryKey: ['modules'],
|
||||||
|
queryFn: () => api.get('/api/config/modules').then(r => r.data),
|
||||||
|
})
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: (module: Module) =>
|
||||||
|
isNew
|
||||||
|
? api.post('/api/config/modules', module)
|
||||||
|
: api.put(`/api/config/modules/${module.name}`, module),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['modules'] })
|
||||||
|
setEditingModule(null)
|
||||||
|
setIsNew(false)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (name: string) => api.delete(`/api/config/modules/${name}`),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['modules'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const modulesList: Module[] = modules || []
|
||||||
|
|
||||||
|
const handleNewModule = () => {
|
||||||
|
setEditingModule({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
program_patterns: [],
|
||||||
|
keywords: [],
|
||||||
|
rules: [],
|
||||||
|
restrictions: [],
|
||||||
|
})
|
||||||
|
setIsNew(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">
|
||||||
|
Módulos de regras de negócio para contextualização da IA
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleNewModule}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Novo Módulo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modules List */}
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<Activity className="h-8 w-8 animate-spin text-blue-500" />
|
||||||
|
</div>
|
||||||
|
) : modulesList.length === 0 && !editingModule ? (
|
||||||
|
<div className="bg-white rounded-lg shadow p-12 text-center">
|
||||||
|
<Brain className="h-12 w-12 mx-auto mb-4 text-gray-300" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900">Nenhum módulo configurado</h3>
|
||||||
|
<p className="text-gray-500 mt-2 max-w-md mx-auto">
|
||||||
|
Módulos definem regras de negócio específicas que a IA usa para entender o contexto do sistema
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={handleNewModule}
|
||||||
|
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
Criar primeiro módulo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{modulesList.map(module => (
|
||||||
|
<div key={module.name} className="bg-white rounded-lg shadow p-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Brain className="h-8 w-8 text-purple-500" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-lg">{module.name}</h3>
|
||||||
|
<p className="text-gray-500">{module.description || 'Sem descrição'}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => { setEditingModule(module); setIsNew(false); }}
|
||||||
|
className="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg"
|
||||||
|
>
|
||||||
|
<Edit2 className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (confirm(`Remover módulo ${module.name}?`)) {
|
||||||
|
deleteMutation.mutate(module.name)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-lg"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500">Padrões de programa:</span>
|
||||||
|
<div className="flex flex-wrap gap-1 mt-1">
|
||||||
|
{module.program_patterns.map(p => (
|
||||||
|
<span key={p} className="px-2 py-0.5 bg-blue-100 text-blue-800 rounded text-xs">
|
||||||
|
{p}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{module.program_patterns.length === 0 && <span className="text-gray-400">-</span>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500">Keywords:</span>
|
||||||
|
<div className="flex flex-wrap gap-1 mt-1">
|
||||||
|
{module.keywords.slice(0, 5).map(k => (
|
||||||
|
<span key={k} className="px-2 py-0.5 bg-purple-100 text-purple-800 rounded text-xs">
|
||||||
|
{k}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{module.keywords.length > 5 && (
|
||||||
|
<span className="text-gray-400 text-xs">+{module.keywords.length - 5}</span>
|
||||||
|
)}
|
||||||
|
{module.keywords.length === 0 && <span className="text-gray-400">-</span>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Edit/Create Modal */}
|
||||||
|
{editingModule && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<div className="p-6 border-b border-gray-200 flex items-center justify-between">
|
||||||
|
<h2 className="text-xl font-semibold">
|
||||||
|
{isNew ? 'Novo Módulo' : `Editar: ${editingModule.name}`}
|
||||||
|
</h2>
|
||||||
|
<button onClick={() => setEditingModule(null)} className="p-2 hover:bg-gray-100 rounded-lg">
|
||||||
|
<X className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Nome *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={editingModule.name}
|
||||||
|
onChange={e => setEditingModule({ ...editingModule, name: e.target.value })}
|
||||||
|
disabled={!isNew}
|
||||||
|
placeholder="ACQ-Auth"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Descrição</label>
|
||||||
|
<textarea
|
||||||
|
value={editingModule.description || ''}
|
||||||
|
onChange={e => setEditingModule({ ...editingModule, description: e.target.value })}
|
||||||
|
placeholder="Módulo de autorização de transações..."
|
||||||
|
rows={2}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Padrões de Programa (um por linha)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={editingModule.program_patterns.join('\n')}
|
||||||
|
onChange={e => setEditingModule({
|
||||||
|
...editingModule,
|
||||||
|
program_patterns: e.target.value.split('\n').filter(Boolean)
|
||||||
|
})}
|
||||||
|
placeholder="AUTH* ACQAUTH* *AUTOR*"
|
||||||
|
rows={3}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 font-mono text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Keywords (uma por linha)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={editingModule.keywords.join('\n')}
|
||||||
|
onChange={e => setEditingModule({
|
||||||
|
...editingModule,
|
||||||
|
keywords: e.target.value.split('\n').filter(Boolean)
|
||||||
|
})}
|
||||||
|
placeholder="autorização ISO8583 network timeout"
|
||||||
|
rows={3}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Regras de Negócio (uma por linha)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={editingModule.rules.join('\n')}
|
||||||
|
onChange={e => setEditingModule({
|
||||||
|
...editingModule,
|
||||||
|
rules: e.target.value.split('\n').filter(Boolean)
|
||||||
|
})}
|
||||||
|
placeholder="Sempre validar CVV antes de enviar para rede Timeout de rede = 30 segundos"
|
||||||
|
rows={4}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Restrições (uma por linha)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={editingModule.restrictions.join('\n')}
|
||||||
|
onChange={e => setEditingModule({
|
||||||
|
...editingModule,
|
||||||
|
restrictions: e.target.value.split('\n').filter(Boolean)
|
||||||
|
})}
|
||||||
|
placeholder="Não alterar formato de mensagem ISO sem aprovação Não modificar copybook ISOMSGO1"
|
||||||
|
rows={3}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 border-t border-gray-200 flex gap-3">
|
||||||
|
<button
|
||||||
|
onClick={() => setEditingModule(null)}
|
||||||
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Cancelar
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => saveMutation.mutate(editingModule)}
|
||||||
|
disabled={!editingModule.name || saveMutation.isPending}
|
||||||
|
className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<Save className="h-4 w-4" />
|
||||||
|
{saveMutation.isPending ? 'Salvando...' : 'Salvar'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,233 @@
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import {
|
||||||
|
Plus,
|
||||||
|
RefreshCw,
|
||||||
|
Trash2,
|
||||||
|
GitBranch,
|
||||||
|
CheckCircle,
|
||||||
|
Clock,
|
||||||
|
Activity,
|
||||||
|
AlertCircle
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { api } from '../lib/api'
|
||||||
|
import { clsx } from 'clsx'
|
||||||
|
|
||||||
|
interface Repository {
|
||||||
|
url: string
|
||||||
|
name: string
|
||||||
|
ai_fork_name?: string
|
||||||
|
indexed: boolean
|
||||||
|
last_sync?: string
|
||||||
|
file_count: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Repositories() {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
const [showAddModal, setShowAddModal] = useState(false)
|
||||||
|
const [newRepo, setNewRepo] = useState({ url: '', name: '', ai_fork_name: '' })
|
||||||
|
|
||||||
|
const { data: repos, isLoading } = useQuery({
|
||||||
|
queryKey: ['repositories'],
|
||||||
|
queryFn: () => api.get('/api/config/repositories').then(r => r.data),
|
||||||
|
})
|
||||||
|
|
||||||
|
const addMutation = useMutation({
|
||||||
|
mutationFn: (repo: Partial<Repository>) => api.post('/api/config/repositories', repo),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['repositories'] })
|
||||||
|
setShowAddModal(false)
|
||||||
|
setNewRepo({ url: '', name: '', ai_fork_name: '' })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const reindexMutation = useMutation({
|
||||||
|
mutationFn: (name: string) => api.post(`/api/config/repositories/${name}/reindex`),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['repositories'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (name: string) => api.delete(`/api/config/repositories/${name}`),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['repositories'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const repositories: Repository[] = repos || []
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">
|
||||||
|
Repositórios Bitbucket configurados para análise de código
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAddModal(true)}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Adicionar Repositório
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Repositories Grid */}
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<Activity className="h-8 w-8 animate-spin text-blue-500" />
|
||||||
|
</div>
|
||||||
|
) : repositories.length === 0 ? (
|
||||||
|
<div className="bg-white rounded-lg shadow p-12 text-center">
|
||||||
|
<GitBranch className="h-12 w-12 mx-auto mb-4 text-gray-300" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900">Nenhum repositório configurado</h3>
|
||||||
|
<p className="text-gray-500 mt-2">
|
||||||
|
Adicione repositórios do Bitbucket para indexar o código fonte
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAddModal(true)}
|
||||||
|
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
Adicionar primeiro repositório
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{repositories.map(repo => (
|
||||||
|
<div key={repo.name} className="bg-white rounded-lg shadow p-6">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<GitBranch className="h-8 w-8 text-blue-500" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold">{repo.name}</h3>
|
||||||
|
<p className="text-sm text-gray-500 truncate max-w-[200px]">{repo.url}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span className={clsx(
|
||||||
|
'px-2 py-1 rounded-full text-xs font-medium',
|
||||||
|
repo.indexed ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
|
||||||
|
)}>
|
||||||
|
{repo.indexed ? 'Indexado' : 'Pendente'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 space-y-2 text-sm">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">Arquivos:</span>
|
||||||
|
<span className="font-medium">{repo.file_count.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
{repo.ai_fork_name && (
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">Fork IA:</span>
|
||||||
|
<span className="font-medium">{repo.ai_fork_name}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{repo.last_sync && (
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-500">Última sincr.:</span>
|
||||||
|
<span className="font-medium">
|
||||||
|
{new Date(repo.last_sync).toLocaleDateString('pt-BR')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 pt-4 border-t border-gray-100 flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => reindexMutation.mutate(repo.name)}
|
||||||
|
disabled={reindexMutation.isPending}
|
||||||
|
className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<RefreshCw className={clsx('h-4 w-4', reindexMutation.isPending && 'animate-spin')} />
|
||||||
|
Re-indexar
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (confirm(`Remover repositório ${repo.name}?`)) {
|
||||||
|
deleteMutation.mutate(repo.name)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Add Modal */}
|
||||||
|
{showAddModal && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
|
||||||
|
<h2 className="text-xl font-semibold mb-4">Adicionar Repositório</h2>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
URL do Repositório *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newRepo.url}
|
||||||
|
onChange={e => setNewRepo({ ...newRepo, url: e.target.value })}
|
||||||
|
placeholder="https://bitbucket.example.com/projects/XXX/repos/yyy"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Nome *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newRepo.name}
|
||||||
|
onChange={e => setNewRepo({ ...newRepo, name: e.target.value })}
|
||||||
|
placeholder="ACQ-MF"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Nome do Fork para IA (opcional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newRepo.ai_fork_name}
|
||||||
|
onChange={e => setNewRepo({ ...newRepo, ai_fork_name: e.target.value })}
|
||||||
|
placeholder="ACQ-MF-AI"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">
|
||||||
|
Fork onde a IA criará branches e PRs (mantém o repo original intacto)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3 mt-6">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAddModal(false)}
|
||||||
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Cancelar
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => addMutation.mutate(newRepo)}
|
||||||
|
disabled={!newRepo.url || !newRepo.name || addMutation.isPending}
|
||||||
|
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{addMutation.isPending ? 'Adicionando...' : 'Adicionar'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,319 @@
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import {
|
||||||
|
Save,
|
||||||
|
TestTube,
|
||||||
|
CheckCircle,
|
||||||
|
XCircle,
|
||||||
|
Activity,
|
||||||
|
Server,
|
||||||
|
Key,
|
||||||
|
Brain
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { api } from '../lib/api'
|
||||||
|
import { clsx } from 'clsx'
|
||||||
|
|
||||||
|
interface IntegrationConfig {
|
||||||
|
jira_url?: string
|
||||||
|
jira_token?: string
|
||||||
|
jira_projects: string[]
|
||||||
|
bitbucket_url?: string
|
||||||
|
bitbucket_token?: string
|
||||||
|
llm_provider: 'openrouter' | 'azure'
|
||||||
|
azure_endpoint?: string
|
||||||
|
azure_key?: string
|
||||||
|
azure_model: string
|
||||||
|
openrouter_key?: string
|
||||||
|
openrouter_model: string
|
||||||
|
embedding_provider: 'local' | 'azure'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Settings() {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
const [testResults, setTestResults] = useState<Record<string, boolean | null>>({})
|
||||||
|
|
||||||
|
const { data: config, isLoading } = useQuery({
|
||||||
|
queryKey: ['integrations'],
|
||||||
|
queryFn: () => api.get('/api/config/integrations').then(r => r.data),
|
||||||
|
})
|
||||||
|
|
||||||
|
const [formData, setFormData] = useState<IntegrationConfig | null>(null)
|
||||||
|
|
||||||
|
// Initialize form when config loads
|
||||||
|
if (config && !formData) {
|
||||||
|
setFormData(config)
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: (data: IntegrationConfig) => api.put('/api/config/integrations', data),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['integrations'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const testConnection = async (service: string) => {
|
||||||
|
setTestResults(prev => ({ ...prev, [service]: null }))
|
||||||
|
try {
|
||||||
|
const response = await api.post(`/api/config/integrations/test/${service}`)
|
||||||
|
setTestResults(prev => ({ ...prev, [service]: response.data.connected }))
|
||||||
|
} catch {
|
||||||
|
setTestResults(prev => ({ ...prev, [service]: false }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading || !formData) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<Activity className="h-8 w-8 animate-spin text-blue-500" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateField = (field: keyof IntegrationConfig, value: string | string[]) => {
|
||||||
|
setFormData({ ...formData, [field]: value })
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl space-y-6">
|
||||||
|
{/* JIRA */}
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200 flex items-center gap-3">
|
||||||
|
<Server className="h-5 w-5 text-blue-500" />
|
||||||
|
<h3 className="text-lg font-semibold">JIRA Server</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">URL do Servidor</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.jira_url || ''}
|
||||||
|
onChange={e => updateField('jira_url', e.target.value)}
|
||||||
|
placeholder="https://jira.example.com"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Token de Acesso</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={formData.jira_token || ''}
|
||||||
|
onChange={e => updateField('jira_token', e.target.value)}
|
||||||
|
placeholder="••••••••"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Projetos (separados por vírgula)</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.jira_projects.join(', ')}
|
||||||
|
onChange={e => updateField('jira_projects', e.target.value.split(',').map(s => s.trim()).filter(Boolean))}
|
||||||
|
placeholder="ACQSUP, ICGSUP"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<button
|
||||||
|
onClick={() => testConnection('jira')}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg"
|
||||||
|
>
|
||||||
|
{testResults.jira === null ? (
|
||||||
|
<Activity className="h-4 w-4 animate-spin" />
|
||||||
|
) : testResults.jira ? (
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500" />
|
||||||
|
) : testResults.jira === false ? (
|
||||||
|
<XCircle className="h-4 w-4 text-red-500" />
|
||||||
|
) : (
|
||||||
|
<TestTube className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
Testar Conexão
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bitbucket */}
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200 flex items-center gap-3">
|
||||||
|
<Server className="h-5 w-5 text-purple-500" />
|
||||||
|
<h3 className="text-lg font-semibold">Bitbucket Server</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">URL do Servidor</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.bitbucket_url || ''}
|
||||||
|
onChange={e => updateField('bitbucket_url', e.target.value)}
|
||||||
|
placeholder="https://bitbucket.example.com"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Token de Acesso</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={formData.bitbucket_token || ''}
|
||||||
|
onChange={e => updateField('bitbucket_token', e.target.value)}
|
||||||
|
placeholder="••••••••"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<button
|
||||||
|
onClick={() => testConnection('bitbucket')}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg"
|
||||||
|
>
|
||||||
|
{testResults.bitbucket === null ? (
|
||||||
|
<Activity className="h-4 w-4 animate-spin" />
|
||||||
|
) : testResults.bitbucket ? (
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500" />
|
||||||
|
) : testResults.bitbucket === false ? (
|
||||||
|
<XCircle className="h-4 w-4 text-red-500" />
|
||||||
|
) : (
|
||||||
|
<TestTube className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
Testar Conexão
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* LLM */}
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200 flex items-center gap-3">
|
||||||
|
<Brain className="h-5 w-5 text-green-500" />
|
||||||
|
<h3 className="text-lg font-semibold">LLM (Modelo de IA)</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Provedor</label>
|
||||||
|
<select
|
||||||
|
value={formData.llm_provider}
|
||||||
|
onChange={e => updateField('llm_provider', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="openrouter">OpenRouter (Dev)</option>
|
||||||
|
<option value="azure">Azure OpenAI (Prod)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{formData.llm_provider === 'azure' ? (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Azure Endpoint</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.azure_endpoint || ''}
|
||||||
|
onChange={e => updateField('azure_endpoint', e.target.value)}
|
||||||
|
placeholder="https://your-resource.openai.azure.com"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Azure API Key</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={formData.azure_key || ''}
|
||||||
|
onChange={e => updateField('azure_key', e.target.value)}
|
||||||
|
placeholder="••••••••"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Modelo</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.azure_model}
|
||||||
|
onChange={e => updateField('azure_model', e.target.value)}
|
||||||
|
placeholder="gpt-4o"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">OpenRouter API Key</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={formData.openrouter_key || ''}
|
||||||
|
onChange={e => updateField('openrouter_key', e.target.value)}
|
||||||
|
placeholder="••••••••"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Modelo</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.openrouter_model}
|
||||||
|
onChange={e => updateField('openrouter_model', e.target.value)}
|
||||||
|
placeholder="meta-llama/llama-3.3-70b-instruct:free"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<button
|
||||||
|
onClick={() => testConnection('llm')}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg"
|
||||||
|
>
|
||||||
|
{testResults.llm === null ? (
|
||||||
|
<Activity className="h-4 w-4 animate-spin" />
|
||||||
|
) : testResults.llm ? (
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500" />
|
||||||
|
) : testResults.llm === false ? (
|
||||||
|
<XCircle className="h-4 w-4 text-red-500" />
|
||||||
|
) : (
|
||||||
|
<TestTube className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
Testar Conexão
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Embeddings */}
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200 flex items-center gap-3">
|
||||||
|
<Key className="h-5 w-5 text-orange-500" />
|
||||||
|
<h3 className="text-lg font-semibold">Embeddings</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Provedor</label>
|
||||||
|
<select
|
||||||
|
value={formData.embedding_provider}
|
||||||
|
onChange={e => updateField('embedding_provider', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="local">Local (MiniLM-L6-v2)</option>
|
||||||
|
<option value="azure">Azure OpenAI</option>
|
||||||
|
</select>
|
||||||
|
<p className="text-sm text-gray-500 mt-1">
|
||||||
|
{formData.embedding_provider === 'local'
|
||||||
|
? 'Modelo local, sem custo adicional, ideal para desenvolvimento'
|
||||||
|
: 'Usa o mesmo endpoint Azure configurado acima'
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Save Button */}
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<button
|
||||||
|
onClick={() => saveMutation.mutate(formData)}
|
||||||
|
disabled={saveMutation.isPending}
|
||||||
|
className="flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<Save className="h-5 w-5" />
|
||||||
|
{saveMutation.isPending ? 'Salvando...' : 'Salvar Configurações'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: {
|
||||||
|
50: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#3b82f6',
|
||||||
|
600: '#2563eb',
|
||||||
|
700: '#1d4ed8',
|
||||||
|
800: '#1e40af',
|
||||||
|
900: '#1e3a8a',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:8000',
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue