feat: Extract PresetSection component with document preview by category
When selecting an industry preset on the SDK dashboard, a categorized document preview panel now appears showing which documents will be generated (Website, Vertraege, HR, Compliance, etc.). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -0,0 +1,131 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { COMPANY_PROFILE_PRESETS, type CompanyProfilePreset } from '@/lib/sdk/company-profile-presets'
|
||||
|
||||
const DOC_LABELS: Record<string, { label: string; category: string }> = {
|
||||
privacy_policy: { label: 'Datenschutzerklaerung', category: 'Website' },
|
||||
impressum: { label: 'Impressum', category: 'Website' },
|
||||
agb: { label: 'AGB', category: 'Vertraege' },
|
||||
cookie_policy: { label: 'Cookie-Richtlinie', category: 'Website' },
|
||||
cookie_banner: { label: 'Cookie-Banner-Texte', category: 'Website' },
|
||||
dpa: { label: 'AVV (Auftragsverarbeitung)', category: 'Vertraege' },
|
||||
nda: { label: 'Geheimhaltungsvereinbarung', category: 'Vertraege' },
|
||||
sla: { label: 'Service Level Agreement', category: 'Vertraege' },
|
||||
terms_of_use: { label: 'Nutzungsbedingungen', category: 'Vertraege' },
|
||||
community_guidelines: { label: 'Community Guidelines', category: 'Plattform' },
|
||||
acceptable_use: { label: 'Acceptable Use Policy', category: 'Plattform' },
|
||||
widerruf: { label: 'Widerrufsbelehrung', category: 'E-Commerce' },
|
||||
employee_dsi: { label: 'Mitarbeiter-DSI', category: 'HR' },
|
||||
applicant_dsi: { label: 'Bewerber-DSI', category: 'HR' },
|
||||
whistleblower_policy: { label: 'Whistleblower-Richtlinie', category: 'HR' },
|
||||
tom_documentation: { label: 'TOM-Dokumentation', category: 'Compliance' },
|
||||
vvt_register: { label: 'Verarbeitungsverzeichnis', category: 'Compliance' },
|
||||
loeschkonzept: { label: 'Loeschkonzept', category: 'Compliance' },
|
||||
dsfa: { label: 'Datenschutz-Folgenabschaetzung', category: 'Compliance' },
|
||||
pflichtenregister: { label: 'Pflichtenregister', category: 'Compliance' },
|
||||
isms_manual: { label: 'ISMS-Handbuch', category: 'Sicherheit' },
|
||||
social_media_dsi: { label: 'Social-Media-DSI', category: 'Marketing' },
|
||||
transfer_impact_assessment: { label: 'Transfer Impact Assessment', category: 'Drittland' },
|
||||
media_content_policy: { label: 'Medien-Richtlinie', category: 'Plattform' },
|
||||
cloud_service_agreement: { label: 'Cloud-Vertrag', category: 'Vertraege' },
|
||||
}
|
||||
|
||||
const CATEGORY_COLORS: Record<string, string> = {
|
||||
Website: 'bg-blue-50 text-blue-700',
|
||||
Vertraege: 'bg-purple-50 text-purple-700',
|
||||
Plattform: 'bg-indigo-50 text-indigo-700',
|
||||
'E-Commerce': 'bg-green-50 text-green-700',
|
||||
HR: 'bg-amber-50 text-amber-700',
|
||||
Compliance: 'bg-red-50 text-red-700',
|
||||
Sicherheit: 'bg-gray-100 text-gray-700',
|
||||
Marketing: 'bg-pink-50 text-pink-700',
|
||||
Drittland: 'bg-orange-50 text-orange-700',
|
||||
}
|
||||
|
||||
export function PresetSection({ projectId }: { projectId?: string }) {
|
||||
const [selectedPreset, setSelectedPreset] = useState<CompanyProfilePreset | null>(null)
|
||||
|
||||
// Group recommended docs by category
|
||||
const groupedDocs = selectedPreset
|
||||
? selectedPreset.recommendedDocs.reduce<Record<string, string[]>>((acc, docType) => {
|
||||
const info = DOC_LABELS[docType]
|
||||
if (!info) return acc
|
||||
if (!acc[info.category]) acc[info.category] = []
|
||||
acc[info.category].push(info.label)
|
||||
return acc
|
||||
}, {})
|
||||
: null
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-br from-purple-50 to-white rounded-xl border border-purple-200 p-6 space-y-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-gray-900">Schnellstart: Welcher Unternehmenstyp sind Sie?</h2>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Waehlen Sie Ihre Branche — wir zeigen Ihnen welche Dokumente Sie benoetigen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Preset Cards */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
|
||||
{COMPANY_PROFILE_PRESETS.map((preset) => (
|
||||
<button
|
||||
key={preset.id}
|
||||
onClick={() => setSelectedPreset(selectedPreset?.id === preset.id ? null : preset)}
|
||||
className={`flex flex-col items-center gap-2 p-3 rounded-xl transition-all text-center ${
|
||||
selectedPreset?.id === preset.id
|
||||
? 'bg-purple-100 border-2 border-purple-500 shadow-md'
|
||||
: 'bg-white border border-gray-200 hover:border-purple-300 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl">{preset.icon}</span>
|
||||
<span className={`text-xs font-medium ${selectedPreset?.id === preset.id ? 'text-purple-700' : 'text-gray-900'}`}>
|
||||
{preset.label}
|
||||
</span>
|
||||
<span className="text-[10px] text-gray-400 leading-tight">{preset.description}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Document Preview — shown when a preset is selected */}
|
||||
{selectedPreset && groupedDocs && (
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-5 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">
|
||||
{selectedPreset.icon} {selectedPreset.label} — Ihre Dokumente
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 mt-0.5">
|
||||
{selectedPreset.recommendedDocs.length} Dokumente werden fuer Sie vorbereitet
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href={projectId
|
||||
? `/sdk/company-profile?project=${projectId}&preset=${selectedPreset.id}`
|
||||
: `/sdk/company-profile?preset=${selectedPreset.id}`}
|
||||
className="px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-lg hover:bg-purple-700 transition-colors"
|
||||
>
|
||||
Jetzt starten
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
|
||||
{Object.entries(groupedDocs).map(([category, docs]) => (
|
||||
<div key={category} className="space-y-1.5">
|
||||
<span className={`inline-block px-2 py-0.5 rounded-full text-[10px] font-medium ${CATEGORY_COLORS[category] || 'bg-gray-100 text-gray-600'}`}>
|
||||
{category}
|
||||
</span>
|
||||
{docs.map((doc) => (
|
||||
<div key={doc} className="text-xs text-gray-700 pl-1">
|
||||
{doc}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user