Projektarten: Bereich Services

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/App.jsx

@@ -12,6 +12,7 @@ import CustomerDetailPage from './pages/CustomerDetailPage'
 import FinancePage from './pages/FinancePage'
 import LegalPage from './pages/LegalPage'
 import AssignProjectPage from './pages/AssignProjectPage'
+import ServicesPage from './pages/ServicesPage'
 import ServerpulsPage from './pages/ServerpulsPage'
 
 function ProtectedRoute({ children }) {
@@ -49,6 +50,7 @@ function AppRoutes() {
       <Route path="/serverpuls" element={<ProtectedRoute><ServerpulsPage /></ProtectedRoute>} />
       <Route path="/planboard" element={<ProtectedRoute><PlanboardPage /></ProtectedRoute>} />
       <Route path="/projects" element={<ProtectedRoute><ProjectsPage /></ProtectedRoute>} />
+      <Route path="/services" element={<ProtectedRoute><ServicesPage /></ProtectedRoute>} />
       <Route path="/projects/zuordnen/:id" element={<ProtectedRoute><AssignProjectPage /></ProtectedRoute>} />
       <Route path="/admin" element={<ProtectedRoute><AdminPage /></ProtectedRoute>} />
       {/* Alte Links (z. B. die entfernten Seiten Assets, Reports, Docs, Roadmaps) landen bei den Tickets */}

src/components/Navbar.jsx

@@ -9,6 +9,7 @@ import {
   IconScale,
   IconActivityHeartbeat,
   IconFolders,
+  IconLayoutGrid,
   IconCalendar,
   IconSettings,
   IconLogout,
@@ -56,6 +57,7 @@ export default function Sidebar() {
     { label: 'Tickets', href: '/tickets', icon: <IconTicket /> },
     { label: 'Planboard', href: '/planboard', icon: <IconCalendar /> },
     { label: 'Projekte', href: '/projects', icon: <IconFolders /> },
+    { label: 'Services', href: '/services', icon: <IconLayoutGrid /> },
     { label: 'Kunden', href: '/customers', icon: <IconUsers /> },
     // Leads liegen auf Eis (Lead-Automatik gestoppt 2026-09-30): grau, nicht klickbar
     { label: 'Leads', href: '/leads', icon: <IconTargetArrow />, paused: true },

src/lib/servicesView.js

@@ -0,0 +1,34 @@
+// Aufbereitung der /api/admin/services-Antwort für die Seite "Services"
+const STATUS_LABELS = { in_development: 'In Entwicklung' }
+
+export function servicesCards(api) {
+  if (!api) return []
+  const groups = api.groups || {}
+  const featureDefs = api.features || {}
+  const cards = (api.kinds || []).map((k) => {
+    const projects = groups[k.key] || []
+    return {
+      key: k.key,
+      label: k.label,
+      description: k.description || '',
+      count: projects.length,
+      features: (k.features || []).map((f) => ({
+        label: featureDefs[f]?.label || f,
+        statusLabel: STATUS_LABELS[featureDefs[f]?.status] || '',
+      })),
+      projects,
+    }
+  })
+  const missing = groups.missing || []
+  if (missing.length) {
+    cards.push({
+      key: 'missing',
+      label: 'Art fehlt',
+      description: 'Diese Projekte sind noch keiner Art zugeordnet.',
+      count: missing.length,
+      features: [],
+      projects: missing,
+    })
+  }
+  return cards
+}

src/pages/ServicesPage.jsx

@@ -0,0 +1,73 @@
+import { useState, useEffect, useMemo } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { FaSpinner } from 'react-icons/fa6'
+import { fetchServices } from '../lib/projectKindsApi'
+import { servicesCards } from '../lib/servicesView'
+import { PageHeader, Card, Button, Badge } from '../components/ui'
+
+export default function ServicesPage() {
+  const navigate = useNavigate()
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  const load = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      setData(await fetchServices())
+    } catch (err) {
+      setError(err.message || 'Services konnten nicht geladen werden.')
+    } finally {
+      setLoading(false)
+    }
+  }
+  useEffect(() => { load() }, [])
+
+  const cards = useMemo(() => servicesCards(data), [data])
+
+  if (loading) return <div className="page"><div className="empty"><FaSpinner className="spinner" /></div></div>
+
+  return (
+    <div className="page">
+      <PageHeader title="Services" subtitle="Unsere Projekte nach Art" />
+      {error && (
+        <Card>
+          <div className="text-red" style={{ marginBottom: 8 }}>{error}</div>
+          <Button onClick={load}>Erneut versuchen</Button>
+        </Card>
+      )}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: 12 }}>
+        {cards.map((c) => (
+          <Card key={c.key} title={`${c.label} (${c.count})`}>
+            {c.description && <div className="muted" style={{ marginBottom: 8 }}>{c.description}</div>}
+            {c.features.length > 0 && (
+              <div className="flex gap-2 wrap" style={{ marginBottom: 8 }}>
+                {c.features.map((f) => (
+                  <Badge key={f.label}>{f.label}{f.statusLabel ? ` · ${f.statusLabel}` : ''}</Badge>
+                ))}
+              </div>
+            )}
+            <div className="list">
+              {c.projects.map((p) => (
+                <div key={p.id} className="list-row" style={{ flexWrap: 'wrap' }}>
+                  <div className="grow" style={{ minWidth: 0, overflowWrap: 'anywhere' }}>
+                    <div style={{ fontWeight: 700 }}>{p.projectName || p.repoFullName}</div>
+                    <div className="muted">
+                      {[p.customerName, p.previewUrl && 'Preview'].filter(Boolean).join(' · ') || 'Intern'}
+                    </div>
+                  </div>
+                  {p.woid && <Link to={`/tickets?woid=${encodeURIComponent(p.woid)}`}>Ticket #{p.woid}</Link>}
+                  {c.key === 'missing' && (
+                    <Button variant="primary" onClick={() => navigate(`/projects/zuordnen/${p.id}`)}>Zuordnen</Button>
+                  )}
+                </div>
+              ))}
+              {c.projects.length === 0 && <div className="muted" style={{ padding: 12 }}>Noch keine Projekte.</div>}
+            </div>
+          </Card>
+        ))}
+      </div>
+    </div>
+  )
+}