refactor(admin): split AIUseCaseModuleEditor, DataPointCatalog, ProjectSelector components
AIUseCaseModuleEditor (698 LOC) → thin orchestrator (187) + constants (29) + barrel tabs (4) + tabs implementation split into SystemData (261), PurposeAct (149), RisksReview (219). DataPointCatalog (658 LOC) → main (291) + helpers (190) + CategoryGroup (124) + Row (108). ProjectSelector (656 LOC) → main (211) + CreateProjectDialog (169) + ProjectActionDialog (140) + ProjectCard (128). All files now under 300 LOC soft target and 500 LOC hard cap. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
@@ -0,0 +1,169 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { useSDK } from '@/lib/sdk'
|
||||
import type { ProjectInfo, CustomerType } from '@/lib/sdk/types'
|
||||
|
||||
/** Map snake_case backend response to camelCase ProjectInfo */
|
||||
export function normalizeProject(p: any): ProjectInfo {
|
||||
return {
|
||||
id: p.id,
|
||||
name: p.name,
|
||||
description: p.description || '',
|
||||
customerType: p.customerType || p.customer_type || 'new',
|
||||
status: p.status || 'active',
|
||||
projectVersion: p.projectVersion ?? p.project_version ?? 1,
|
||||
completionPercentage: p.completionPercentage ?? p.completion_percentage ?? 0,
|
||||
createdAt: p.createdAt || p.created_at || '',
|
||||
updatedAt: p.updatedAt || p.updated_at || '',
|
||||
}
|
||||
}
|
||||
|
||||
interface CreateProjectDialogProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onCreated: (project: ProjectInfo) => void
|
||||
existingProjects: ProjectInfo[]
|
||||
}
|
||||
|
||||
export 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(normalizeProject(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">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
{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 && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import type { ProjectInfo } from '@/lib/sdk/types'
|
||||
|
||||
type ActionStep = 'choose' | 'confirm-delete'
|
||||
|
||||
interface ProjectActionDialogProps {
|
||||
project: ProjectInfo
|
||||
onArchive: () => void
|
||||
onPermanentDelete: () => void
|
||||
onCancel: () => void
|
||||
isProcessing: boolean
|
||||
}
|
||||
|
||||
export function ProjectActionDialog({
|
||||
project,
|
||||
onArchive,
|
||||
onPermanentDelete,
|
||||
onCancel,
|
||||
isProcessing,
|
||||
}: ProjectActionDialogProps) {
|
||||
const [step, setStep] = useState<ActionStep>('choose')
|
||||
|
||||
if (step === 'confirm-delete') {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
|
||||
<div
|
||||
className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg font-bold text-red-700">Endgueltig loeschen</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
||||
<p className="text-sm text-red-800 font-medium mb-2">
|
||||
Sind Sie sicher, dass Sie <strong>{project.name}</strong> unwiderruflich loeschen moechten?
|
||||
</p>
|
||||
<p className="text-sm text-red-700">
|
||||
Alle Projektdaten, SDK-States und Dokumente werden permanent geloescht. Diese Aktion kann nicht rueckgaengig gemacht werden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setStep('choose')}
|
||||
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"
|
||||
>
|
||||
Zurueck
|
||||
</button>
|
||||
<button
|
||||
onClick={onPermanentDelete}
|
||||
disabled={isProcessing}
|
||||
className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-red-700 hover:bg-red-800 disabled:bg-red-300 rounded-lg transition-colors"
|
||||
>
|
||||
{isProcessing ? 'Loesche...' : 'Endgueltig loeschen'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
|
||||
<div
|
||||
className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg font-bold text-gray-900">Projekt entfernen</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 mb-6">
|
||||
Was moechten Sie mit dem Projekt <strong>{project.name}</strong> tun?
|
||||
</p>
|
||||
|
||||
<div className="space-y-3 mb-6">
|
||||
<button
|
||||
onClick={onArchive}
|
||||
disabled={isProcessing}
|
||||
className="w-full flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-orange-300 hover:bg-orange-50 transition-all text-left disabled:opacity-50"
|
||||
>
|
||||
<div className="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg className="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">Archivieren</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
Projekt wird ausgeblendet, Daten bleiben erhalten. Kann jederzeit wiederhergestellt werden.
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setStep('confirm-delete')}
|
||||
disabled={isProcessing}
|
||||
className="w-full flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-red-300 hover:bg-red-50 transition-all text-left disabled:opacity-50"
|
||||
>
|
||||
<div className="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg className="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-red-700">Endgueltig loeschen</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
Alle Daten werden unwiderruflich geloescht. Diese Aktion kann nicht rueckgaengig gemacht werden.
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="w-full 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>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
128
admin-compliance/components/sdk/ProjectSelector/ProjectCard.tsx
Normal file
128
admin-compliance/components/sdk/ProjectSelector/ProjectCard.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import type { ProjectInfo } from '@/lib/sdk/types'
|
||||
|
||||
export function formatTimeAgo(dateStr: string): string {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
if (isNaN(date.getTime())) return ''
|
||||
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' : ''}`
|
||||
}
|
||||
|
||||
interface ProjectCardProps {
|
||||
project: ProjectInfo
|
||||
onClick: () => void
|
||||
onDelete?: () => void
|
||||
onRestore?: () => void
|
||||
}
|
||||
|
||||
export function ProjectCard({
|
||||
project,
|
||||
onClick,
|
||||
onDelete,
|
||||
onRestore,
|
||||
}: ProjectCardProps) {
|
||||
const timeAgo = formatTimeAgo(project.updatedAt)
|
||||
const isArchived = project.status === 'archived'
|
||||
|
||||
return (
|
||||
<div className={`relative bg-white rounded-xl border-2 transition-all ${
|
||||
isArchived
|
||||
? 'border-gray-200 opacity-75'
|
||||
: 'border-gray-200 hover:border-purple-300 hover:shadow-lg'
|
||||
}`}>
|
||||
{/* Action buttons */}
|
||||
<div className="absolute top-3 right-3 flex items-center gap-1 z-10">
|
||||
{isArchived && onRestore && (
|
||||
<button
|
||||
onClick={e => {
|
||||
e.stopPropagation()
|
||||
onRestore()
|
||||
}}
|
||||
className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
|
||||
title="Wiederherstellen"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<button
|
||||
onClick={e => {
|
||||
e.stopPropagation()
|
||||
onDelete()
|
||||
}}
|
||||
className="p-1.5 text-gray-300 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="Entfernen"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Card content */}
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="block w-full text-left p-6"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3 pr-16">
|
||||
<h3 className={`font-semibold text-lg truncate pr-2 ${isArchived ? 'text-gray-500' : 'text-gray-900'}`}>
|
||||
{project.name}
|
||||
</h3>
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full flex-shrink-0 ${
|
||||
isArchived
|
||||
? 'bg-gray-100 text-gray-500'
|
||||
: 'bg-green-100 text-green-700'
|
||||
}`}>
|
||||
{isArchived ? 'Archiviert' : 'Aktiv'}
|
||||
</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' : isArchived ? 'bg-gray-400' : 'bg-purple-600'
|
||||
}`}
|
||||
style={{ width: `${project.completionPercentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="font-medium text-gray-600">{project.completionPercentage}%</span>
|
||||
</div>
|
||||
{timeAgo && (
|
||||
<>
|
||||
<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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -3,454 +3,10 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useSDK } from '@/lib/sdk'
|
||||
import type { ProjectInfo, CustomerType } from '@/lib/sdk/types'
|
||||
|
||||
// =============================================================================
|
||||
// HELPERS
|
||||
// =============================================================================
|
||||
|
||||
/** Map snake_case backend response to camelCase ProjectInfo */
|
||||
function normalizeProject(p: any): ProjectInfo {
|
||||
return {
|
||||
id: p.id,
|
||||
name: p.name,
|
||||
description: p.description || '',
|
||||
customerType: p.customerType || p.customer_type || 'new',
|
||||
status: p.status || 'active',
|
||||
projectVersion: p.projectVersion ?? p.project_version ?? 1,
|
||||
completionPercentage: p.completionPercentage ?? p.completion_percentage ?? 0,
|
||||
createdAt: p.createdAt || p.created_at || '',
|
||||
updatedAt: p.updatedAt || p.updated_at || '',
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimeAgo(dateStr: string): string {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
if (isNaN(date.getTime())) return ''
|
||||
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' : ''}`
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 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(normalizeProject(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 ACTION DIALOG (Archive / Permanent Delete)
|
||||
// =============================================================================
|
||||
|
||||
type ActionStep = 'choose' | 'confirm-delete'
|
||||
|
||||
function ProjectActionDialog({
|
||||
project,
|
||||
onArchive,
|
||||
onPermanentDelete,
|
||||
onCancel,
|
||||
isProcessing,
|
||||
}: {
|
||||
project: ProjectInfo
|
||||
onArchive: () => void
|
||||
onPermanentDelete: () => void
|
||||
onCancel: () => void
|
||||
isProcessing: boolean
|
||||
}) {
|
||||
const [step, setStep] = useState<ActionStep>('choose')
|
||||
|
||||
if (step === 'confirm-delete') {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
|
||||
<div
|
||||
className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg font-bold text-red-700">Endgueltig loeschen</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
||||
<p className="text-sm text-red-800 font-medium mb-2">
|
||||
Sind Sie sicher, dass Sie <strong>{project.name}</strong> unwiderruflich loeschen moechten?
|
||||
</p>
|
||||
<p className="text-sm text-red-700">
|
||||
Alle Projektdaten, SDK-States und Dokumente werden permanent geloescht. Diese Aktion kann nicht rueckgaengig gemacht werden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setStep('choose')}
|
||||
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"
|
||||
>
|
||||
Zurueck
|
||||
</button>
|
||||
<button
|
||||
onClick={onPermanentDelete}
|
||||
disabled={isProcessing}
|
||||
className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-red-700 hover:bg-red-800 disabled:bg-red-300 rounded-lg transition-colors"
|
||||
>
|
||||
{isProcessing ? 'Loesche...' : 'Endgueltig loeschen'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
|
||||
<div
|
||||
className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-lg font-bold text-gray-900">Projekt entfernen</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 mb-6">
|
||||
Was moechten Sie mit dem Projekt <strong>{project.name}</strong> tun?
|
||||
</p>
|
||||
|
||||
<div className="space-y-3 mb-6">
|
||||
{/* Archive option */}
|
||||
<button
|
||||
onClick={onArchive}
|
||||
disabled={isProcessing}
|
||||
className="w-full flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-orange-300 hover:bg-orange-50 transition-all text-left disabled:opacity-50"
|
||||
>
|
||||
<div className="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg className="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">Archivieren</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
Projekt wird ausgeblendet, Daten bleiben erhalten. Kann jederzeit wiederhergestellt werden.
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Permanent delete option */}
|
||||
<button
|
||||
onClick={() => setStep('confirm-delete')}
|
||||
disabled={isProcessing}
|
||||
className="w-full flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-red-300 hover:bg-red-50 transition-all text-left disabled:opacity-50"
|
||||
>
|
||||
<div className="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg className="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-red-700">Endgueltig loeschen</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
Alle Daten werden unwiderruflich geloescht. Diese Aktion kann nicht rueckgaengig gemacht werden.
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="w-full 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>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// PROJECT CARD
|
||||
// =============================================================================
|
||||
|
||||
function ProjectCard({
|
||||
project,
|
||||
onClick,
|
||||
onDelete,
|
||||
onRestore,
|
||||
}: {
|
||||
project: ProjectInfo
|
||||
onClick: () => void
|
||||
onDelete?: () => void
|
||||
onRestore?: () => void
|
||||
}) {
|
||||
const timeAgo = formatTimeAgo(project.updatedAt)
|
||||
const isArchived = project.status === 'archived'
|
||||
|
||||
return (
|
||||
<div className={`relative bg-white rounded-xl border-2 transition-all ${
|
||||
isArchived
|
||||
? 'border-gray-200 opacity-75'
|
||||
: 'border-gray-200 hover:border-purple-300 hover:shadow-lg'
|
||||
}`}>
|
||||
{/* Action buttons */}
|
||||
<div className="absolute top-3 right-3 flex items-center gap-1 z-10">
|
||||
{isArchived && onRestore && (
|
||||
<button
|
||||
onClick={e => {
|
||||
e.stopPropagation()
|
||||
onRestore()
|
||||
}}
|
||||
className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
|
||||
title="Wiederherstellen"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<button
|
||||
onClick={e => {
|
||||
e.stopPropagation()
|
||||
onDelete()
|
||||
}}
|
||||
className="p-1.5 text-gray-300 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="Entfernen"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Card content */}
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="block w-full text-left p-6"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3 pr-16">
|
||||
<h3 className={`font-semibold text-lg truncate pr-2 ${isArchived ? 'text-gray-500' : 'text-gray-900'}`}>
|
||||
{project.name}
|
||||
</h3>
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full flex-shrink-0 ${
|
||||
isArchived
|
||||
? 'bg-gray-100 text-gray-500'
|
||||
: 'bg-green-100 text-green-700'
|
||||
}`}>
|
||||
{isArchived ? 'Archiviert' : 'Aktiv'}
|
||||
</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' : isArchived ? 'bg-gray-400' : 'bg-purple-600'
|
||||
}`}
|
||||
style={{ width: `${project.completionPercentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="font-medium text-gray-600">{project.completionPercentage}%</span>
|
||||
</div>
|
||||
{timeAgo && (
|
||||
<>
|
||||
<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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// MAIN COMPONENT
|
||||
// =============================================================================
|
||||
import type { ProjectInfo } from '@/lib/sdk/types'
|
||||
import { CreateProjectDialog, normalizeProject } from './CreateProjectDialog'
|
||||
import { ProjectActionDialog } from './ProjectActionDialog'
|
||||
import { ProjectCard } from './ProjectCard'
|
||||
|
||||
export function ProjectSelector() {
|
||||
const router = useRouter()
|
||||
@@ -494,7 +50,6 @@ export function ProjectSelector() {
|
||||
setIsProcessing(true)
|
||||
try {
|
||||
await archiveProject(actionTarget.id)
|
||||
// Move from active to archived
|
||||
setProjects(prev => prev.filter(p => p.id !== actionTarget.id))
|
||||
setArchivedProjects(prev => [...prev, { ...actionTarget, status: 'archived' as const }])
|
||||
setActionTarget(null)
|
||||
|
||||
Reference in New Issue
Block a user