refactor(admin): split academy page.tsx into colocated components
Split 1257-LOC client page into _types.ts plus nine components under _components/ (TabNavigation/StatCard/FilterBar in shared, CourseCard, EnrollmentCard, CertificatesTab, EnrollmentEditModal, CourseEditModal, SettingsTab, and PageSections for header actions and empty states). Behavior preserved exactly; page.tsx is now a thin wiring shell. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
139
admin-compliance/app/sdk/academy/_components/CertificatesTab.tsx
Normal file
139
admin-compliance/app/sdk/academy/_components/CertificatesTab.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import type { Certificate } from '@/lib/sdk/academy/types'
|
||||
|
||||
// =============================================================================
|
||||
// CERTIFICATE ROW
|
||||
// =============================================================================
|
||||
|
||||
function CertificateRow({ cert }: { cert: Certificate }) {
|
||||
const now = new Date()
|
||||
const validUntil = new Date(cert.validUntil)
|
||||
const daysLeft = Math.ceil((validUntil.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
|
||||
const isExpired = daysLeft <= 0
|
||||
const isExpiringSoon = daysLeft > 0 && daysLeft <= 30
|
||||
|
||||
return (
|
||||
<tr className="hover:bg-gray-50">
|
||||
<td className="px-4 py-3 font-medium text-gray-900">{cert.userName}</td>
|
||||
<td className="px-4 py-3 text-gray-600">{cert.courseName}</td>
|
||||
<td className="px-4 py-3 text-gray-500">{new Date(cert.issuedAt).toLocaleDateString('de-DE')}</td>
|
||||
<td className="px-4 py-3 text-gray-500">{validUntil.toLocaleDateString('de-DE')}</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
{isExpired ? (
|
||||
<span className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-700">Abgelaufen</span>
|
||||
) : isExpiringSoon ? (
|
||||
<span className="px-2 py-1 text-xs rounded-full bg-orange-100 text-orange-700">Laeuft bald ab</span>
|
||||
) : (
|
||||
<span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700">Gueltig</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
{cert.pdfUrl ? (
|
||||
<a
|
||||
href={cert.pdfUrl}
|
||||
download
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-3 py-1 text-xs bg-purple-600 text-white rounded hover:bg-purple-700 transition-colors"
|
||||
>
|
||||
PDF Download
|
||||
</a>
|
||||
) : (
|
||||
<span className="px-3 py-1 text-xs bg-gray-100 text-gray-400 rounded cursor-not-allowed">
|
||||
Nicht verfuegbar
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// CERTIFICATES TAB
|
||||
// =============================================================================
|
||||
|
||||
export function CertificatesTab({
|
||||
certificates,
|
||||
certSearch,
|
||||
onSearchChange
|
||||
}: {
|
||||
certificates: Certificate[]
|
||||
certSearch: string
|
||||
onSearchChange: (s: string) => void
|
||||
}) {
|
||||
const now = new Date()
|
||||
const total = certificates.length
|
||||
const valid = certificates.filter(c => new Date(c.validUntil) > now).length
|
||||
const expired = certificates.filter(c => new Date(c.validUntil) <= now).length
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-4 text-center">
|
||||
<div className="text-2xl font-bold text-gray-900">{total}</div>
|
||||
<div className="text-sm text-gray-500">Gesamt</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-green-200 p-4 text-center">
|
||||
<div className="text-2xl font-bold text-green-600">{valid}</div>
|
||||
<div className="text-sm text-gray-500">Gueltig</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-red-200 p-4 text-center">
|
||||
<div className="text-2xl font-bold text-red-600">{expired}</div>
|
||||
<div className="text-sm text-gray-500">Abgelaufen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nach Mitarbeiter oder Kurs suchen..."
|
||||
value={certSearch}
|
||||
onChange={e => onSearchChange(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
{certificates.length === 0 ? (
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
||||
<div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
||||
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">Noch keine Zertifikate ausgestellt</h3>
|
||||
<p className="mt-2 text-gray-500">Zertifikate werden automatisch nach Kursabschluss generiert.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="text-left px-4 py-3 font-medium text-gray-700">Mitarbeiter</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-gray-700">Kurs</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-gray-700">Ausgestellt am</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-gray-700">Gueltig bis</th>
|
||||
<th className="text-center px-4 py-3 font-medium text-gray-700">Status</th>
|
||||
<th className="text-center px-4 py-3 font-medium text-gray-700">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{certificates
|
||||
.filter(c =>
|
||||
!certSearch ||
|
||||
c.userName.toLowerCase().includes(certSearch.toLowerCase()) ||
|
||||
c.courseName.toLowerCase().includes(certSearch.toLowerCase())
|
||||
)
|
||||
.map(cert => <CertificateRow key={cert.id} cert={cert} />)
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user