feat: initial commit web-cad-neu with docker-compose, frontend and backend

2026-06-26 10:50:24 +02:00
commit 4ec76fe406
102 changed files with 25722 additions and 0 deletions
@@ -0,0 +1,150 @@
+/**
+ * Dashboard Page – Project overview after login
+ */
+import { useState, useEffect, useCallback } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+
+const API_BASE = 'http://localhost:3001';
+
+interface Project {
+  id: string;
+  name: string;
+  description: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+interface DashboardProps {
+  onOpenProject: (projectId: string) => void;
+}
+
+export function Dashboard({ onOpenProject }: DashboardProps) {
+  const { user, logout, token } = useAuth();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreate, setShowCreate] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newDesc, setNewDesc] = useState('');
+
+  const fetchProjects = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(`${API_BASE}/api/projects`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (res.ok) {
+        setProjects(await res.json());
+      }
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    fetchProjects();
+  }, [fetchProjects]);
+
+  const handleCreate = async () => {
+    if (!newName.trim()) return;
+    try {
+      const res = await fetch(`${API_BASE}/api/projects`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+        body: JSON.stringify({ name: newName, description: newDesc || null }),
+      });
+      if (res.ok) {
+        setNewName('');
+        setNewDesc('');
+        setShowCreate(false);
+        fetchProjects();
+      }
+    } catch {
+      // ignore
+    }
+  };
+
+  const handleDelete = async (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!confirm('Projekt wirklich löschen?')) return;
+    try {
+      await fetch(`${API_BASE}/api/projects/${id}`, {
+        method: 'DELETE',
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      fetchProjects();
+    } catch {
+      // ignore
+    }
+  };
+
+  return (
+    <div className="dashboard-page">
+      <header className="dashboard-header">
+        <div className="dashboard-brand">
+          <h1>Web CAD</h1>
+          <span className="dashboard-user">{user?.name} ({user?.role})</span>
+        </div>
+        <button className="dashboard-logout" onClick={logout}>Abmelden</button>
+      </header>
+
+      <div className="dashboard-content">
+        <div className="dashboard-section-header">
+          <h2>Projekte</h2>
+          <button className="dashboard-create-btn" onClick={() => setShowCreate(!showCreate)}>
+            + Neues Projekt
+          </button>
+        </div>
+
+        {showCreate && (
+          <div className="dashboard-create-form">
+            <input
+              type="text"
+              placeholder="Projektname"
+              value={newName}
+              onChange={e => setNewName(e.target.value)}
+              autoFocus
+            />
+            <input
+              type="text"
+              placeholder="Beschreibung (optional)"
+              value={newDesc}
+              onChange={e => setNewDesc(e.target.value)}
+            />
+            <button onClick={handleCreate}>Erstellen</button>
+            <button onClick={() => setShowCreate(false)}>Abbrechen</button>
+          </div>
+        )}
+
+        {loading ? (
+          <p className="dashboard-loading">Lade Projekte…</p>
+        ) : projects.length === 0 ? (
+          <p className="dashboard-empty">Noch keine Projekte. Erstellen Sie ein neues Projekt.</p>
+        ) : (
+          <div className="dashboard-project-grid">
+            {projects.map(project => (
+              <div
+                key={project.id}
+                className="dashboard-project-card"
+                onClick={() => onOpenProject(project.id)}
+              >
+                <h3>{project.name}</h3>
+                {project.description && <p>{project.description}</p>}
+                <div className="dashboard-project-meta">
+                  <span>Erstellt: {new Date(project.created_at).toLocaleDateString('de-DE')}</span>
+                  <button
+                    className="dashboard-delete-btn"
+                    onClick={(e) => handleDelete(project.id, e)}
+                  >
+                    Löschen
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}