0affa4eb66
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-ai-compliance (push) Failing after 33s
CI / test-python-backend-compliance (push) Successful in 34s
CI / test-python-document-crawler (push) Successful in 23s
CI / test-python-dsms-gateway (push) Successful in 19s
Jeder Tenant kann jetzt mehrere Compliance-Projekte anlegen (z.B. verschiedene Produkte, Tochterunternehmen). CompanyProfile ist pro Projekt kopierbar und danach unabhaengig editierbar. Multi-Tab-Support via separater BroadcastChannel und localStorage Keys pro Projekt. - Migration 039: compliance_projects Tabelle, sdk_states.project_id - Backend: FastAPI CRUD-Routes fuer Projekte mit Tenant-Isolation - Frontend: ProjectSelector UI, SDKProvider mit projectId, URL ?project= - State API: UPSERT auf (tenant_id, project_id) mit Abwaertskompatibilitaet - Tests: pytest fuer Model-Validierung, Row-Konvertierung, Tenant-Isolation - Docs: MKDocs Seite, CLAUDE.md, Backend README Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
347 lines
13 KiB
TypeScript
347 lines
13 KiB
TypeScript
'use client'
|
|
|
|
import React, { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useSDK } from '@/lib/sdk'
|
|
import type { ProjectInfo, CustomerType } from '@/lib/sdk/types'
|
|
|
|
// =============================================================================
|
|
// CREATE PROJECT DIALOG
|
|
// =============================================================================
|
|
|
|
interface CreateProjectDialogProps {
|
|
open: boolean
|
|
onClose: () => void
|
|
onCreated: (project: ProjectInfo) => void
|
|
existingProjects: ProjectInfo[]
|
|
}
|
|
|
|
function CreateProjectDialog({ open, onClose, onCreated, existingProjects }: CreateProjectDialogProps) {
|
|
const { createProject } = useSDK()
|
|
const [name, setName] = useState('')
|
|
const [customerType, setCustomerType] = useState<CustomerType>('new')
|
|
const [copyFromId, setCopyFromId] = useState<string>('')
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
if (!open) return null
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!name.trim()) {
|
|
setError('Projektname ist erforderlich')
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
setError('')
|
|
try {
|
|
const project = await createProject(
|
|
name.trim(),
|
|
customerType,
|
|
copyFromId || undefined
|
|
)
|
|
onCreated(project)
|
|
setName('')
|
|
setCopyFromId('')
|
|
onClose()
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Fehler beim Erstellen des Projekts')
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
|
|
<div
|
|
className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 p-6"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<h2 className="text-xl font-bold text-gray-900 mb-6">Neues Projekt erstellen</h2>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
{/* Project Name */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Projektname *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={e => setName(e.target.value)}
|
|
placeholder="z.B. KI-Produkt X, SaaS API, Tochter GmbH..."
|
|
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
{/* Customer Type */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Projekttyp
|
|
</label>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setCustomerType('new')}
|
|
className={`p-3 rounded-lg border-2 text-left transition-all ${
|
|
customerType === 'new'
|
|
? 'border-purple-500 bg-purple-50'
|
|
: 'border-gray-200 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<div className="font-medium text-sm text-gray-900">Neukunde</div>
|
|
<div className="text-xs text-gray-500 mt-0.5">Compliance von Grund auf</div>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setCustomerType('existing')}
|
|
className={`p-3 rounded-lg border-2 text-left transition-all ${
|
|
customerType === 'existing'
|
|
? 'border-purple-500 bg-purple-50'
|
|
: 'border-gray-200 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<div className="font-medium text-sm text-gray-900">Bestandskunde</div>
|
|
<div className="text-xs text-gray-500 mt-0.5">Bestehende Dokumente erweitern</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Copy from existing project */}
|
|
{existingProjects.length > 0 && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Stammdaten kopieren von (optional)
|
|
</label>
|
|
<select
|
|
value={copyFromId}
|
|
onChange={e => setCopyFromId(e.target.value)}
|
|
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none bg-white"
|
|
>
|
|
<option value="">— Keine Kopie (leeres Projekt) —</option>
|
|
{existingProjects.map(p => (
|
|
<option key={p.id} value={p.id}>
|
|
{p.name} (V{String(p.projectVersion).padStart(3, '0')})
|
|
</option>
|
|
))}
|
|
</select>
|
|
<p className="mt-1 text-xs text-gray-500">
|
|
Firmenprofil wird kopiert und kann dann unabhaengig bearbeitet werden.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Error */}
|
|
{error && (
|
|
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-3 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting || !name.trim()}
|
|
className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 disabled:bg-purple-300 rounded-lg transition-colors"
|
|
>
|
|
{isSubmitting ? 'Erstelle...' : 'Projekt erstellen'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// PROJECT CARD
|
|
// =============================================================================
|
|
|
|
function ProjectCard({ project, onClick }: { project: ProjectInfo; onClick: () => void }) {
|
|
const timeAgo = formatTimeAgo(project.updatedAt)
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className="block w-full text-left bg-white rounded-xl border-2 border-gray-200 hover:border-purple-300 hover:shadow-lg p-6 transition-all"
|
|
>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<h3 className="font-semibold text-gray-900 text-lg truncate pr-2">{project.name}</h3>
|
|
<span className={`px-2 py-0.5 text-xs rounded-full flex-shrink-0 ${
|
|
project.status === 'active'
|
|
? 'bg-green-100 text-green-700'
|
|
: 'bg-gray-100 text-gray-500'
|
|
}`}>
|
|
{project.status === 'active' ? 'Aktiv' : 'Archiviert'}
|
|
</span>
|
|
</div>
|
|
|
|
{project.description && (
|
|
<p className="text-sm text-gray-500 mb-3 line-clamp-2">{project.description}</p>
|
|
)}
|
|
|
|
<div className="flex items-center gap-4 text-sm text-gray-500">
|
|
<span className="font-mono">V{String(project.projectVersion).padStart(3, '0')}</span>
|
|
<span className="text-gray-300">|</span>
|
|
<div className="flex items-center gap-2 flex-1">
|
|
<div className="flex-1 h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full rounded-full transition-all ${
|
|
project.completionPercentage === 100 ? 'bg-green-500' : 'bg-purple-600'
|
|
}`}
|
|
style={{ width: `${project.completionPercentage}%` }}
|
|
/>
|
|
</div>
|
|
<span className="font-medium text-gray-600">{project.completionPercentage}%</span>
|
|
</div>
|
|
<span className="text-gray-300">|</span>
|
|
<span>{timeAgo}</span>
|
|
</div>
|
|
|
|
<div className="mt-2 text-xs text-gray-400">
|
|
{project.customerType === 'new' ? 'Neukunde' : 'Bestandskunde'}
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// HELPER
|
|
// =============================================================================
|
|
|
|
function formatTimeAgo(dateStr: string): string {
|
|
const date = new Date(dateStr)
|
|
const now = Date.now()
|
|
const diff = now - date.getTime()
|
|
const seconds = Math.floor(diff / 1000)
|
|
if (seconds < 60) return 'Gerade eben'
|
|
const minutes = Math.floor(seconds / 60)
|
|
if (minutes < 60) return `vor ${minutes} Min`
|
|
const hours = Math.floor(minutes / 60)
|
|
if (hours < 24) return `vor ${hours} Std`
|
|
const days = Math.floor(hours / 24)
|
|
return `vor ${days} Tag${days > 1 ? 'en' : ''}`
|
|
}
|
|
|
|
// =============================================================================
|
|
// MAIN COMPONENT
|
|
// =============================================================================
|
|
|
|
export function ProjectSelector() {
|
|
const router = useRouter()
|
|
const { listProjects } = useSDK()
|
|
const [projects, setProjects] = useState<ProjectInfo[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [showCreateDialog, setShowCreateDialog] = useState(false)
|
|
|
|
useEffect(() => {
|
|
loadProjects()
|
|
}, [])
|
|
|
|
const loadProjects = async () => {
|
|
setLoading(true)
|
|
try {
|
|
const result = await listProjects()
|
|
setProjects(result)
|
|
} catch (error) {
|
|
console.error('Failed to load projects:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleProjectClick = (project: ProjectInfo) => {
|
|
router.push(`/sdk?project=${project.id}`)
|
|
}
|
|
|
|
const handleProjectCreated = (project: ProjectInfo) => {
|
|
router.push(`/sdk?project=${project.id}`)
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto py-12 px-4">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Ihre Projekte</h1>
|
|
<p className="mt-1 text-gray-500">
|
|
Waehlen Sie ein Compliance-Projekt oder erstellen Sie ein neues.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowCreateDialog(true)}
|
|
className="flex items-center gap-2 px-4 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium text-sm"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Neues Projekt
|
|
</button>
|
|
</div>
|
|
|
|
{/* Loading */}
|
|
{loading && (
|
|
<div className="flex items-center justify-center py-16">
|
|
<div className="w-8 h-8 border-4 border-purple-200 border-t-purple-600 rounded-full animate-spin" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Empty State */}
|
|
{!loading && projects.length === 0 && (
|
|
<div className="text-center py-16">
|
|
<div className="w-16 h-16 mx-auto mb-4 bg-purple-100 rounded-2xl flex items-center justify-center">
|
|
<svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-gray-900">Noch keine Projekte</h2>
|
|
<p className="mt-2 text-gray-500 max-w-md mx-auto">
|
|
Erstellen Sie Ihr erstes Compliance-Projekt, um mit der DSGVO- und AI-Act-Konformitaet zu beginnen.
|
|
</p>
|
|
<button
|
|
onClick={() => setShowCreateDialog(true)}
|
|
className="mt-6 inline-flex items-center gap-2 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Erstes Projekt erstellen
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Project Grid */}
|
|
{!loading && projects.length > 0 && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{projects.map(project => (
|
|
<ProjectCard
|
|
key={project.id}
|
|
project={project}
|
|
onClick={() => handleProjectClick(project)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Create Dialog */}
|
|
<CreateProjectDialog
|
|
open={showCreateDialog}
|
|
onClose={() => setShowCreateDialog(false)}
|
|
onCreated={handleProjectCreated}
|
|
existingProjects={projects}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|