74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import type { Tenant, Namespace } from '../_types'
|
|
import { formatDate } from '../_api'
|
|
|
|
interface Props {
|
|
tenants: Tenant[]
|
|
namespaces: Namespace[]
|
|
selectedTenantId: string | null
|
|
onSelectTenant: (id: string) => void
|
|
onOpenCreate: () => void
|
|
onLoadNamespaces: (tenantId: string) => void
|
|
}
|
|
|
|
export function NamespacesTab({ tenants, namespaces, selectedTenantId, onSelectTenant, onOpenCreate, onLoadNamespaces }: Props) {
|
|
return (
|
|
<div>
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<select
|
|
value={selectedTenantId || ''}
|
|
onChange={e => { onSelectTenant(e.target.value); if (e.target.value) onLoadNamespaces(e.target.value) }}
|
|
className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
|
|
>
|
|
<option value="">Mandant waehlen...</option>
|
|
{tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
|
|
</select>
|
|
{selectedTenantId && (
|
|
<button
|
|
onClick={onOpenCreate}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
|
|
>
|
|
+ Namespace
|
|
</button>
|
|
)}
|
|
</div>
|
|
{!selectedTenantId ? (
|
|
<div className="text-center py-12 text-gray-400">Bitte einen Mandanten waehlen</div>
|
|
) : (
|
|
<div className="overflow-x-auto bg-white rounded-xl border border-gray-200">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-200 bg-gray-50">
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Name</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Slug</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Isolation</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Klassifikation</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Erstellt</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{namespaces.length === 0 ? (
|
|
<tr><td colSpan={5} className="text-center py-8 text-gray-400">Keine Namespaces</td></tr>
|
|
) : namespaces.map(ns => (
|
|
<tr key={ns.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="px-4 py-3 font-medium">{ns.name}</td>
|
|
<td className="px-4 py-3 font-mono text-xs text-gray-500">{ns.slug}</td>
|
|
<td className="px-4 py-3">
|
|
<span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-xs">{ns.isolation_level}</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded text-xs">{ns.classification}</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-gray-500">{formatDate(ns.created_at)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|