Initial commit: ERV Platform MVP - FastAPI + React
This commit is contained in:
AI Assistant
41
frontend/package.json
Normal file
41
frontend/package.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "erv-insurance-platform-frontend",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"description": "ERV Insurance Claims Platform - Frontend",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"type-check": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.2",
|
||||
"antd": "^5.21.6",
|
||||
"@ant-design/icons": "^5.5.1",
|
||||
"axios": "^1.7.7",
|
||||
"@tanstack/react-query": "^5.59.16",
|
||||
"zustand": "^5.0.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"imask": "^7.6.1",
|
||||
"react-dropzone": "^14.3.5",
|
||||
"socket.io-client": "^4.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.11",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react": "^4.3.3",
|
||||
"typescript": "^5.6.3",
|
||||
"vite": "^5.4.10",
|
||||
"eslint": "^9.13.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.11.0",
|
||||
"@typescript-eslint/parser": "^8.11.0",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.13"
|
||||
}
|
||||
}
|
||||
|
||||
14
frontend/public/index.html
Normal file
14
frontend/public/index.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<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>ERV Insurance Platform</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
129
frontend/src/App.css
Normal file
129
frontend/src/App.css
Normal file
@@ -0,0 +1,129 @@
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.app-header p {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin-bottom: 1rem;
|
||||
color: #333;
|
||||
border-bottom: 2px solid #667eea;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.card ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.card ul li {
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.card ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.services li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.status-ok {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.card pre {
|
||||
background: #f5f5f5;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.card a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
font-size: 1.5rem;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #52c41a;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #faad14;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #f5222d;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
background: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
124
frontend/src/App.tsx
Normal file
124
frontend/src/App.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import './App.css'
|
||||
|
||||
interface APIInfo {
|
||||
platform?: string;
|
||||
version?: string;
|
||||
features?: string[];
|
||||
tech_stack?: any;
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [apiInfo, setApiInfo] = useState<APIInfo | null>(null)
|
||||
const [health, setHealth] = useState<any>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
// Проверяем подключение к API
|
||||
Promise.all([
|
||||
fetch('http://147.45.146.17:8100/api/v1/info').then(r => r.json()),
|
||||
fetch('http://147.45.146.17:8100/health').then(r => r.json())
|
||||
])
|
||||
.then(([info, healthData]) => {
|
||||
setApiInfo(info)
|
||||
setHealth(healthData)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('API Error:', err)
|
||||
setLoading(false)
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<header className="app-header">
|
||||
<h1>🚀 ERV Insurance Platform</h1>
|
||||
<p>Python FastAPI + React TypeScript</p>
|
||||
</header>
|
||||
|
||||
<main className="app-main">
|
||||
{loading ? (
|
||||
<div className="loading">⏳ Подключение к API...</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="card">
|
||||
<h2>📊 Информация о платформе</h2>
|
||||
{apiInfo ? (
|
||||
<>
|
||||
<p><strong>Платформа:</strong> {apiInfo.platform}</p>
|
||||
<p><strong>Версия:</strong> {apiInfo.version}</p>
|
||||
|
||||
<h3>✨ Возможности:</h3>
|
||||
<ul>
|
||||
{apiInfo.features?.map((f, i) => (
|
||||
<li key={i}>{f}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h3>🛠️ Технологический стек:</h3>
|
||||
<pre>{JSON.stringify(apiInfo.tech_stack, null, 2)}</pre>
|
||||
</>
|
||||
) : (
|
||||
<p className="error">❌ Не удалось получить данные</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2>🏥 Здоровье сервисов</h2>
|
||||
{health ? (
|
||||
<>
|
||||
<p className={health.status === 'healthy' ? 'success' : 'warning'}>
|
||||
Статус: <strong>{health.status}</strong>
|
||||
</p>
|
||||
|
||||
<h3>Сервисы:</h3>
|
||||
<ul className="services">
|
||||
{Object.entries(health.services || {}).map(([name, status]) => (
|
||||
<li key={name}>
|
||||
<span className={status === 'ok' ? 'status-ok' : 'status-error'}>
|
||||
{status === 'ok' ? '✅' : '❌'}
|
||||
</span>
|
||||
<strong>{name}:</strong> {String(status)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
) : (
|
||||
<p className="error">❌ Health check недоступен</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2>🔗 Полезные ссылки</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://147.45.146.17:8100/docs" target="_blank">
|
||||
📚 API Документация (Swagger UI)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://147.45.146.17:8100/health" target="_blank">
|
||||
🏥 Health Check
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://147.45.146.17:3002" target="_blank">
|
||||
🐙 Gitea (Git репозиторий)
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<footer className="app-footer">
|
||||
<p>© 2025 ERV Insurance Platform | Powered by FastAPI + React</p>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
17
frontend/src/index.css
Normal file
17
frontend/src/index.css
Normal file
@@ -0,0 +1,17 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
11
frontend/src/main.tsx
Normal file
11
frontend/src/main.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
||||
22
frontend/tsconfig.json
Normal file
22
frontend/tsconfig.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"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
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
||||
17
frontend/vite.config.ts
Normal file
17
frontend/vite.config.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8100',
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user