69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import type { Tenant, TabId } from '../_types'
|
|
import { formatDate } from '../_api'
|
|
|
|
interface Props {
|
|
tenants: Tenant[]
|
|
onOpenCreate: () => void
|
|
onSelectTenant: (id: string) => void
|
|
setActiveTab: (tab: TabId) => void
|
|
}
|
|
|
|
export function TenantsTab({ tenants, onOpenCreate, onSelectTenant, setActiveTab }: Props) {
|
|
return (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-lg font-semibold">{tenants.length} Mandanten</h2>
|
|
<button
|
|
onClick={onOpenCreate}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
|
|
>
|
|
+ Mandant anlegen
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{tenants.map(t => (
|
|
<div key={t.id} className="bg-white rounded-xl border border-gray-200 p-5">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900">{t.name}</h3>
|
|
<span className="text-xs font-mono text-gray-400">{t.slug}</span>
|
|
</div>
|
|
<span className={`px-2 py-0.5 rounded text-xs font-medium ${
|
|
t.status === 'active' ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500'
|
|
}`}>
|
|
{t.status}
|
|
</span>
|
|
</div>
|
|
<div className="space-y-1 text-sm text-gray-600">
|
|
<div className="flex justify-between">
|
|
<span>User-Limit</span>
|
|
<span className="font-mono">{t.user_limit || 'unbegrenzt'}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>LLM-Quota</span>
|
|
<span className="font-mono">{t.llm_quota || 'unbegrenzt'}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Erstellt</span>
|
|
<span>{formatDate(t.created_at)}</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => { onSelectTenant(t.id); setActiveTab('namespaces') }}
|
|
className="mt-3 w-full text-center text-sm text-purple-600 hover:text-purple-700 py-1"
|
|
>
|
|
Namespaces anzeigen
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{tenants.length === 0 && (
|
|
<div className="text-center py-12 text-gray-400">Keine Mandanten vorhanden</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|