breakpilot-lehrer/admin-lehrer/app/(admin)/infrastructure/sbom/_components/InfoTabsSection.tsx

import type { InfoTabType } from '../types'

interface InfoTabsSectionProps {
  activeInfoTab: InfoTabType
  setActiveInfoTab: (tab: InfoTabType) => void
  showFullDocs: boolean
  setShowFullDocs: (show: boolean) => void
}

export function InfoTabsSection({
  activeInfoTab,
  setActiveInfoTab,
  showFullDocs,
  setShowFullDocs,
}: InfoTabsSectionProps) {
  return (
    <div className="mt-8">
      <div className="bg-white rounded-lg shadow">
        {/* Tab Headers */}
        <div className="border-b border-gray-200">
          <nav className="flex -mb-px">
            <button
              onClick={() => setActiveInfoTab('audit')}
              className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
                activeInfoTab === 'audit'
                  ? 'border-orange-500 text-orange-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              <span className="flex items-center gap-2">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Audit
              </span>
            </button>
            <button
              onClick={() => setActiveInfoTab('documentation')}
              className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
                activeInfoTab === 'documentation'
                  ? 'border-orange-500 text-orange-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              <span className="flex items-center gap-2">
                <svg className="w-5 h-5" 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>
                Dokumentation
              </span>
            </button>
          </nav>
        </div>

        {/* Tab Content */}
        <div className="p-6">
          {activeInfoTab === 'audit' && <AuditTab />}
          {activeInfoTab === 'documentation' && (
            <DocumentationTab showFullDocs={showFullDocs} setShowFullDocs={setShowFullDocs} />
          )}
        </div>
      </div>
    </div>
  )
}

function AuditTab() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* SBOM Status */}
      <div className="bg-slate-50 rounded-lg p-4">
        <h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
          <svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
          SBOM Status
        </h3>
        <div className="space-y-3">
          {[
            { label: 'Letzte Generierung', value: 'CI/CD' },
            { label: 'Format', value: 'CycloneDX 1.5' },
            { label: 'Komponenten', value: 'Alle erfasst' },
            { label: 'Transitive Deps', value: 'Inkludiert' },
          ].map((item) => (
            <div key={item.label} className="flex items-center justify-between">
              <span className="text-sm text-slate-600">{item.label}</span>
              <span className="flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-green-500"></span>
                <span className="text-sm font-medium">{item.value}</span>
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* License Compliance */}
      <div className="bg-slate-50 rounded-lg p-4">
        <h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
          <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
          </svg>
          License Compliance
        </h3>
        <div className="space-y-3">
          {[
            { label: 'Erlaubte Lizenzen', value: 'MIT, Apache, BSD', color: 'bg-green-500' },
            { label: 'Copyleft (GPL)', value: '0', color: 'bg-green-500' },
            { label: 'Unbekannte Lizenzen', value: '0', color: 'bg-green-500' },
            { label: 'Kommerzielle', value: 'Review erforderlich', color: 'bg-yellow-500' },
          ].map((item) => (
            <div key={item.label} className="flex items-center justify-between">
              <span className="text-sm text-slate-600">{item.label}</span>
              <span className="flex items-center gap-2">
                <span className={`w-2 h-2 rounded-full ${item.color}`}></span>
                <span className="text-sm font-medium">{item.value}</span>
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

function DocumentationTab({
  showFullDocs,
  setShowFullDocs,
}: {
  showFullDocs: boolean
  setShowFullDocs: (show: boolean) => void
}) {
  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-lg font-semibold text-slate-800">SBOM Dokumentation</h3>
        <button
          onClick={() => setShowFullDocs(!showFullDocs)}
          className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors flex items-center gap-2"
        >
          <svg className={`w-4 h-4 transition-transform ${showFullDocs ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
          {showFullDocs ? 'Weniger anzeigen' : 'Vollstaendige Dokumentation'}
        </button>
      </div>

      {!showFullDocs ? <DocsSummary /> : <DocsFullContent />}
    </div>
  )
}

function DocsSummary() {
  return (
    <div className="prose prose-slate max-w-none">
      <p className="text-slate-600">
        Das SBOM-Modul generiert und analysiert die vollstaendige Komponentenliste aller Software-Abhaengigkeiten.
        Es dient der Compliance, Sicherheit und Supply-Chain-Transparenz.
      </p>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
        <div className="bg-blue-50 p-4 rounded-lg">
          <h4 className="font-medium text-blue-800 mb-2">Generator</h4>
          <p className="text-sm text-blue-600">Syft (Primary), Trivy (Validation)</p>
        </div>
        <div className="bg-purple-50 p-4 rounded-lg">
          <h4 className="font-medium text-purple-800 mb-2">Format</h4>
          <p className="text-sm text-purple-600">CycloneDX 1.5, SPDX</p>
        </div>
        <div className="bg-green-50 p-4 rounded-lg">
          <h4 className="font-medium text-green-800 mb-2">Retention</h4>
          <p className="text-sm text-green-600">5 Jahre (Compliance)</p>
        </div>
      </div>
    </div>
  )
}

function DocsFullContent() {
  return (
    <div className="prose prose-slate max-w-none bg-slate-50 p-6 rounded-lg overflow-auto max-h-[600px]">
      <h2>Software Bill of Materials (SBOM)</h2>

      <h3>1. Uebersicht</h3>
      <p>Das SBOM-Modul generiert und analysiert die vollstaendige Komponentenliste aller Software-Abhaengigkeiten. Es dient der Compliance, Sicherheit und Supply-Chain-Transparenz.</p>

      <h3>2. SBOM-Generierung</h3>
      <pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
{`Source Code
     |
     v
+---------------------------------------------------------------+
|                     SBOM Generators                           |
|  +-------------+  +-------------+  +---------------------+   |
|  |    Syft     |  |   Trivy     |  |  Native Tooling     |   |
|  |  (Primary)  |  | (Validation)|  | (npm, go mod, pip)  |   |
|  +------+------+  +------+------+  +----------+----------+   |
+---------+----------------+--------------------+---------------+
          |                |                    |
          +----------------+--------------------+
                           |
                           v
                  +----------------+
                  |   CycloneDX    |
                  |    Format      |
                  +----------------+`}
      </pre>

      <h3>3. Erfasste Komponenten</h3>
      <table className="min-w-full">
        <thead>
          <tr>
            <th className="text-left">Typ</th>
            <th className="text-left">Quelle</th>
            <th className="text-left">Beispiele</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>npm packages</td><td>package-lock.json</td><td>react, next, tailwindcss</td></tr>
          <tr><td>Go modules</td><td>go.sum</td><td>gin, gorm, jwt-go</td></tr>
          <tr><td>Python packages</td><td>requirements.txt</td><td>fastapi, pydantic, httpx</td></tr>
          <tr><td>Container Images</td><td>Dockerfile</td><td>node:20-alpine, postgres:16</td></tr>
          <tr><td>OS Packages</td><td>apk, apt</td><td>openssl, libpq</td></tr>
        </tbody>
      </table>

      <h3>4. License Compliance</h3>
      <table className="min-w-full">
        <thead>
          <tr>
            <th className="text-left">Kategorie</th>
            <th className="text-left">Lizenzen</th>
            <th className="text-left">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>Permissive (erlaubt)</td><td>MIT, Apache 2.0, BSD, ISC</td><td className="text-green-600">OK</td></tr>
          <tr><td>Weak Copyleft</td><td>LGPL, MPL</td><td className="text-yellow-600">Review</td></tr>
          <tr><td>Strong Copyleft</td><td>GPL, AGPL</td><td className="text-red-600">Nicht erlaubt</td></tr>
          <tr><td>Proprietaer</td><td>Commercial</td><td className="text-yellow-600">Genehmigung</td></tr>
        </tbody>
      </table>

      <h3>5. Aufbewahrung & Compliance</h3>
      <ul>
        <li><strong>Retention:</strong> 5 Jahre (Compliance)</li>
        <li><strong>Format:</strong> JSON + PDF Report</li>
        <li><strong>Signierung:</strong> Digital signiert</li>
        <li><strong>Audit:</strong> Jederzeit abrufbar</li>
      </ul>
    </div>
  )
}