81fb1a4499
Add public Foerderantrag (funding application) pages to the website. Add website management section to admin-v2 with content and status APIs. Extend Header, LandingContent, and i18n with new navigation entries. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
257 lines
13 KiB
TypeScript
257 lines
13 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import Header from '@/components/Header'
|
|
import Footer from '@/components/Footer'
|
|
import { useLanguage } from '@/lib/LanguageContext'
|
|
|
|
interface FundingApplication {
|
|
id: string
|
|
application_number: string
|
|
title: string
|
|
funding_program: string
|
|
status: string
|
|
current_step: number
|
|
total_steps: number
|
|
requested_amount: number
|
|
school_profile?: {
|
|
name: string
|
|
federal_state: string
|
|
}
|
|
created_at: string
|
|
updated_at: string
|
|
}
|
|
|
|
interface Statistics {
|
|
total_applications: number
|
|
draft_count: number
|
|
submitted_count: number
|
|
approved_count: number
|
|
total_requested: number
|
|
total_approved: number
|
|
}
|
|
|
|
export default function FoerderantragPage() {
|
|
const { t, isRTL } = useLanguage()
|
|
const [applications, setApplications] = useState<FundingApplication[]>([])
|
|
const [statistics, setStatistics] = useState<Statistics | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
setApplications([])
|
|
setStatistics({
|
|
total_applications: 0,
|
|
draft_count: 0,
|
|
submitted_count: 0,
|
|
approved_count: 0,
|
|
total_requested: 0,
|
|
total_approved: 0,
|
|
})
|
|
setLoading(false)
|
|
}, [])
|
|
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat('de-DE', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
}).format(amount)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Header />
|
|
<main className={`min-h-screen bg-slate-50 pt-20 ${isRTL ? 'rtl' : ''}`}>
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="space-y-8">
|
|
{/* Hero Section */}
|
|
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 p-8 text-white">
|
|
<div className="absolute inset-0 bg-[url('/grid-pattern.svg')] opacity-10" />
|
|
<div className="relative z-10">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">{t('fa_title')}</h1>
|
|
<p className="mt-2 text-blue-100 max-w-2xl">
|
|
{t('fa_subtitle')}
|
|
</p>
|
|
<div className="mt-6 flex gap-4">
|
|
<Link
|
|
href="/foerderantrag/new"
|
|
className={`inline-flex items-center gap-2 px-6 py-3 bg-white text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition-colors shadow-lg ${isRTL ? 'flex-row-reverse' : ''}`}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
{t('fa_new_application')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="hidden lg:block">
|
|
<svg className="w-32 h-32 text-blue-300 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Statistics Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div className="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
|
|
<div className={`flex items-center gap-3 ${isRTL ? 'flex-row-reverse' : ''}`}>
|
|
<div className="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-blue-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>
|
|
<div>
|
|
<div className="text-2xl font-bold text-slate-900">{statistics?.total_applications || 0}</div>
|
|
<div className="text-sm text-slate-500">{t('fa_statistics')}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
|
|
<div className={`flex items-center gap-3 ${isRTL ? 'flex-row-reverse' : ''}`}>
|
|
<div className="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-slate-900">{formatCurrency(statistics?.total_requested || 0)}</div>
|
|
<div className="text-sm text-slate-500">{t('fa_program_dp2')}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Start Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<Link
|
|
href="/foerderantrag/new?preset=breakpilot_basic"
|
|
className="group bg-white rounded-xl border-2 border-slate-200 p-6 hover:border-blue-400 hover:shadow-lg transition-all"
|
|
>
|
|
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mb-4">
|
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="font-semibold text-lg text-slate-900 group-hover:text-blue-600 transition-colors">
|
|
{t('fa_preset_basic_name')}
|
|
</h3>
|
|
<p className="text-sm text-slate-500 mt-1">
|
|
{t('fa_preset_basic_desc')}
|
|
</p>
|
|
<div className="mt-4 text-sm font-medium text-blue-600">
|
|
{t('fa_preset_basic_budget')}
|
|
</div>
|
|
</Link>
|
|
|
|
<Link
|
|
href="/foerderantrag/new?preset=breakpilot_cluster"
|
|
className="group bg-white rounded-xl border-2 border-slate-200 p-6 hover:border-purple-400 hover:shadow-lg transition-all"
|
|
>
|
|
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center mb-4">
|
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="font-semibold text-lg text-slate-900 group-hover:text-purple-600 transition-colors">
|
|
{t('fa_preset_cluster_name')}
|
|
</h3>
|
|
<p className="text-sm text-slate-500 mt-1">
|
|
{t('fa_preset_cluster_desc')}
|
|
</p>
|
|
<div className="mt-4 text-sm font-medium text-purple-600">
|
|
{t('fa_preset_cluster_budget')}
|
|
</div>
|
|
</Link>
|
|
|
|
<Link
|
|
href="/foerderantrag/new"
|
|
className="group bg-white rounded-xl border-2 border-slate-200 p-6 hover:border-slate-400 hover:shadow-lg transition-all"
|
|
>
|
|
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-slate-500 to-slate-700 flex items-center justify-center mb-4">
|
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="font-semibold text-lg text-slate-900 group-hover:text-slate-700 transition-colors">
|
|
{t('fa_preset_custom_name')}
|
|
</h3>
|
|
<p className="text-sm text-slate-500 mt-1">
|
|
{t('fa_preset_custom_desc')}
|
|
</p>
|
|
<div className="mt-4 text-sm font-medium text-slate-600">
|
|
{t('fa_preset_custom_budget')}
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Applications List */}
|
|
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
{loading ? (
|
|
<div className="p-12 text-center">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
|
|
</div>
|
|
) : applications.length === 0 ? (
|
|
<div className="p-12 text-center">
|
|
<svg className="w-16 h-16 text-slate-300 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} 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>
|
|
<h3 className="mt-4 text-lg font-medium text-slate-900">{t('fa_no_applications')}</h3>
|
|
<p className="mt-2 text-slate-500">{t('fa_start_first')}</p>
|
|
<Link
|
|
href="/foerderantrag/new"
|
|
className="mt-6 inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
{t('fa_new_application')}
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="divide-y divide-slate-100">
|
|
{applications.map((app) => (
|
|
<Link
|
|
key={app.id}
|
|
href={`/foerderantrag/${app.id}`}
|
|
className={`flex items-center gap-4 p-4 hover:bg-slate-50 transition-colors ${isRTL ? 'flex-row-reverse' : ''}`}
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-medium text-slate-900 truncate">{app.title}</h3>
|
|
<div className="text-sm text-slate-500 mt-1">{app.application_number}</div>
|
|
</div>
|
|
<div className={isRTL ? 'text-left' : 'text-right'}>
|
|
<div className="font-medium text-slate-900">{formatCurrency(app.requested_amount)}</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Info Box */}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-xl p-6">
|
|
<div className={`flex gap-4 ${isRTL ? 'flex-row-reverse' : ''}`}>
|
|
<div className="flex-shrink-0">
|
|
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-blue-800">{t('fa_info_title')}</h3>
|
|
<p className="mt-1 text-sm text-blue-700">{t('fa_info_text')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
)
|
|
}
|