Projektarten: Bereich Services

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-09-30 17:44:55 +00:00
1 parent 8185081921
commit 7e79dac6b4
@@ -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>
+  )
+}