Extract types, constants, helpers, and UI pieces (LoadingSkeleton, EmptyState, StatCard, ComplianceRing, Modal, TenantCard, CreateTenantModal, EditTenantModal, TenantDetailModal) into _components/ and _types.ts to bring page.tsx from 1663 LOC to 432 LOC (under the 500 hard cap). Behavior preserved. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
124 lines
3.3 KiB
TypeScript
124 lines
3.3 KiB
TypeScript
import React from 'react'
|
|
import { AlertTriangle, CheckCircle2, XCircle } from 'lucide-react'
|
|
import { API_BASE, FALLBACK_TENANT_ID, FALLBACK_USER_ID } from './constants'
|
|
|
|
export function getTenantId(): string {
|
|
if (typeof window !== 'undefined') {
|
|
return localStorage.getItem('sdk-tenant-id') || FALLBACK_TENANT_ID
|
|
}
|
|
return FALLBACK_TENANT_ID
|
|
}
|
|
|
|
export function getUserId(): string {
|
|
if (typeof window !== 'undefined') {
|
|
return localStorage.getItem('sdk-user-id') || FALLBACK_USER_ID
|
|
}
|
|
return FALLBACK_USER_ID
|
|
}
|
|
|
|
export function formatDate(dateStr: string | null): string {
|
|
if (!dateStr) return '-'
|
|
return new Date(dateStr).toLocaleDateString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
})
|
|
}
|
|
|
|
export function formatDateTime(dateStr: string | null): string {
|
|
if (!dateStr) return '-'
|
|
return new Date(dateStr).toLocaleString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})
|
|
}
|
|
|
|
export function slugify(text: string): string {
|
|
return text
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-+|-+$/g, '')
|
|
}
|
|
|
|
export function getScoreColor(score: number): string {
|
|
if (score >= 80) return '#22c55e'
|
|
if (score >= 60) return '#eab308'
|
|
if (score >= 40) return '#f97316'
|
|
return '#ef4444'
|
|
}
|
|
|
|
export function getScoreBgClasses(score: number): string {
|
|
if (score >= 80) return 'bg-green-50 text-green-700 border-green-200'
|
|
if (score >= 60) return 'bg-amber-50 text-amber-700 border-amber-200'
|
|
if (score >= 40) return 'bg-orange-50 text-orange-700 border-orange-200'
|
|
return 'bg-red-50 text-red-700 border-red-200'
|
|
}
|
|
|
|
export function getRiskBadgeClasses(level: string): string {
|
|
switch (level.toUpperCase()) {
|
|
case 'LOW':
|
|
return 'bg-green-100 text-green-800'
|
|
case 'MEDIUM':
|
|
return 'bg-yellow-100 text-yellow-800'
|
|
case 'HIGH':
|
|
return 'bg-orange-100 text-orange-800'
|
|
case 'CRITICAL':
|
|
return 'bg-red-100 text-red-800'
|
|
default:
|
|
return 'bg-gray-100 text-gray-800'
|
|
}
|
|
}
|
|
|
|
export function getStatusBadge(status: string): { bg: string; text: string; label: string; icon: React.ReactNode } {
|
|
switch (status) {
|
|
case 'active':
|
|
return {
|
|
bg: 'bg-green-100',
|
|
text: 'text-green-700',
|
|
label: 'Aktiv',
|
|
icon: <CheckCircle2 className="w-3 h-3" />,
|
|
}
|
|
case 'suspended':
|
|
return {
|
|
bg: 'bg-yellow-100',
|
|
text: 'text-yellow-700',
|
|
label: 'Suspendiert',
|
|
icon: <AlertTriangle className="w-3 h-3" />,
|
|
}
|
|
case 'inactive':
|
|
return {
|
|
bg: 'bg-red-100',
|
|
text: 'text-red-700',
|
|
label: 'Inaktiv',
|
|
icon: <XCircle className="w-3 h-3" />,
|
|
}
|
|
default:
|
|
return {
|
|
bg: 'bg-gray-100',
|
|
text: 'text-gray-700',
|
|
label: status,
|
|
icon: null,
|
|
}
|
|
}
|
|
}
|
|
|
|
export async function apiFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
|
|
const res = await fetch(`${API_BASE}${endpoint}`, {
|
|
...options,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-Tenant-ID': getTenantId(),
|
|
'X-User-ID': getUserId(),
|
|
...options.headers,
|
|
},
|
|
})
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => ({}))
|
|
throw new Error(body.error || body.message || `HTTP ${res.status}`)
|
|
}
|
|
return res.json()
|
|
}
|