From 5ed76f681004f90b596441815c5ffc76b2f48d84 Mon Sep 17 00:00:00 2001
From: root <root@AI-M.intra.weidenhaupt.net>
Date: Mon, 30 Mar 2026 07:33:19 +0000
Subject: [PATCH] feat: mandantenzentrische UI-Umstellung
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dashboard zeigt Mandanten-Karten statt Workflow-Statistiken
- Neue /tenants/:id Detail-Seite (Workflows pro Mandant)
- Sidebar: Mandanten als primäre Navigation
- TenantList: klickbare Zeilen → Detail-Seite
- WorkflowList: Mandant-Vorfilter via URL-Parameter
- WorkflowEditor: Mandant-Vorauswahl bei Erstellung aus Mandant-Kontext
- Arbeitsweise: Kunde öffnen → dessen Workflows sehen/verwalten
---
 frontend/src/App.tsx                  |  12 +
 frontend/src/components/Layout.tsx    |  80 +++--
 frontend/src/pages/Dashboard.tsx      | 248 ++++++++++++--
 frontend/src/pages/TenantDetail.tsx   | 458 ++++++++++++++++++++++++++
 frontend/src/pages/TenantList.tsx     |  69 +++-
 frontend/src/pages/WorkflowEditor.tsx |   8 +-
 frontend/src/pages/WorkflowList.tsx   |  51 ++-
 7 files changed, 862 insertions(+), 64 deletions(-)
 create mode 100644 frontend/src/pages/TenantDetail.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0d48f51..902d8bc 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,6 +7,7 @@ import WorkflowList from './pages/WorkflowList';
 import WorkflowView from './pages/WorkflowView';
 import WorkflowEditor from './pages/WorkflowEditor';
 import TenantList from './pages/TenantList';
+import TenantDetail from './pages/TenantDetail';
 import UserList from './pages/UserList';
 
 function AppLayout({ children }: { children: React.ReactNode }) {
@@ -84,6 +85,17 @@ export default function App() {
         }
       />
 
+      <Route
+        path="/tenants/:id"
+        element={
+          <ProtectedRoute requiredRoles={['SYSTEM_ADMIN', 'TECHNICIAN']}>
+            <AppLayout>
+              <TenantDetail />
+            </AppLayout>
+          </ProtectedRoute>
+        }
+      />
+
       <Route
         path="/users"
         element={
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 79e3688..aeeed0a 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,5 +1,5 @@
 import { Fragment, useState } from 'react';
-import { Link, NavLink, useNavigate } from 'react-router-dom';
+import { Link, NavLink, useNavigate, useLocation } from 'react-router-dom';
 import {
   Building2,
   FileText,
@@ -17,20 +17,10 @@ import { Menu as HeadlessMenu, MenuButton, MenuItem, MenuItems, Transition } fro
 import { useAuth } from '../hooks/useAuth';
 import { useDarkMode } from '../hooks/useDarkMode';
 
-const navigation = [
-  { name: 'Dashboard', href: '/', icon: LayoutDashboard },
-  { name: 'Workflows', href: '/workflows', icon: FileText },
-  { name: 'Vorlagen', href: '/workflows?template=true', icon: Settings },
-];
-
-const adminNavigation = [
-  { name: 'Mandanten', href: '/tenants', icon: Building2 },
-  { name: 'Benutzer', href: '/users', icon: Users },
-];
-
 export default function Layout({ children }: { children: React.ReactNode }) {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
+  const location = useLocation();
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const { isDark, toggle: toggleDark } = useDarkMode();
 
@@ -42,6 +32,21 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     navigate('/login');
   };
 
+  // Build navigation based on role
+  const navigation = [
+    { name: 'Dashboard', href: '/', icon: LayoutDashboard },
+    // Mandanten visible to admins/technicians, placed early in nav
+    ...(isAdmin
+      ? [{ name: 'Mandanten', href: '/tenants', icon: Building2 }]
+      : []),
+    { name: 'Workflows', href: '/workflows', icon: FileText },
+    { name: 'Vorlagen', href: '/workflows?template=true', icon: Settings },
+  ];
+
+  const adminNavigation = [
+    { name: 'Benutzer', href: '/users', icon: Users },
+  ];
+
   const navLinkClass = ({ isActive }: { isActive: boolean }) =>
     `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
       isActive
@@ -49,6 +54,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100'
     }`;
 
+  // Check if we're on a tenant detail page to highlight Mandanten nav
+  const isTenantDetailPage = /^\/tenants\/[^/]+$/.test(location.pathname);
+
   const sidebarContent = (
     <>
       <div className="flex h-16 items-center gap-3 border-b border-gray-200 px-6 dark:border-gray-700">
@@ -66,18 +74,42 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       </div>
 
       <nav className="flex-1 space-y-1 overflow-y-auto px-3 py-4">
-        {navigation.map((item) => (
-          <NavLink
-            key={item.href}
-            to={item.href}
-            end={item.href === '/'}
-            className={navLinkClass}
-            onClick={() => setSidebarOpen(false)}
-          >
-            <item.icon size={20} />
-            {item.name}
-          </NavLink>
-        ))}
+        {navigation.map((item) => {
+          // Special handling for Mandanten: also highlight when on /tenants/:id
+          if (item.href === '/tenants') {
+            const isActive =
+              location.pathname === '/tenants' || isTenantDetailPage;
+            return (
+              <NavLink
+                key={item.href}
+                to={item.href}
+                className={() =>
+                  `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
+                    isActive
+                      ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400'
+                      : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100'
+                  }`
+                }
+                onClick={() => setSidebarOpen(false)}
+              >
+                <item.icon size={20} />
+                {item.name}
+              </NavLink>
+            );
+          }
+          return (
+            <NavLink
+              key={item.href}
+              to={item.href}
+              end={item.href === '/'}
+              className={navLinkClass}
+              onClick={() => setSidebarOpen(false)}
+            >
+              <item.icon size={20} />
+              {item.name}
+            </NavLink>
+          );
+        })}
 
         {isAdmin && (
           <>
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index fc0eace..dfd4109 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
   Archive,
+  Building2,
   Clock,
   FileCheck,
   FilePlus,
@@ -22,29 +23,78 @@ interface Stats {
   draft: number;
 }
 
+interface TenantWithStats extends Tenant {
+  workflowTotal: number;
+  workflowPublished: number;
+  lastUpdated: string | null;
+}
+
 export default function Dashboard() {
   const { user } = useAuth();
   const [stats, setStats] = useState<Stats>({ total: 0, published: 0, review: 0, draft: 0 });
   const [recent, setRecent] = useState<Workflow[]>([]);
   const [tenants, setTenants] = useState<Tenant[]>([]);
-  const [selectedTenant, setSelectedTenant] = useState('');
+  const [tenantCards, setTenantCards] = useState<TenantWithStats[]>([]);
   const [loading, setLoading] = useState(true);
+  const [tenantsLoading, setTenantsLoading] = useState(true);
 
   const isAdmin = user?.role === 'SYSTEM_ADMIN' || user?.role === 'TECHNICIAN';
+  const isCustomer = user?.role === 'CUSTOMER_ADMIN' || user?.role === 'CUSTOMER_USER';
 
+  // Load tenants for admin/technician view
+  useEffect(() => {
+    if (!isAdmin) {
+      setTenantsLoading(false);
+      return;
+    }
+    setTenantsLoading(true);
+    tenantsApi
+      .list({ pageSize: 100 })
+      .then(async (r) => {
+        setTenants(r.data);
+        // Load workflow stats for each tenant
+        const cardsWithStats: TenantWithStats[] = await Promise.all(
+          r.data.map(async (tenant) => {
+            try {
+              const [allRes, pubRes] = await Promise.all([
+                workflowsApi.list({ tenantId: tenant.id, pageSize: 1 }),
+                workflowsApi.list({ tenantId: tenant.id, pageSize: 1, status: 'PUBLISHED' }),
+              ]);
+              // Get latest workflow date
+              const latestRes = await workflowsApi.list({ tenantId: tenant.id, pageSize: 1 });
+              const lastUpdated = latestRes.data.length > 0 ? latestRes.data[0].updatedAt : null;
+              return {
+                ...tenant,
+                workflowTotal: allRes.total,
+                workflowPublished: pubRes.total,
+                lastUpdated,
+              };
+            } catch {
+              return {
+                ...tenant,
+                workflowTotal: 0,
+                workflowPublished: 0,
+                lastUpdated: null,
+              };
+            }
+          })
+        );
+        setTenantCards(cardsWithStats);
+      })
+      .catch(() => {})
+      .finally(() => setTenantsLoading(false));
+  }, [isAdmin]);
+
+  // Load stats and recent workflows
   useEffect(() => {
     loadData();
-    if (isAdmin) {
-      tenantsApi.list({ pageSize: 100 }).then((r) => setTenants(r.data)).catch(() => {});
-    }
-  }, [isAdmin]);
+  }, []);
 
   const loadData = async () => {
     setLoading(true);
     try {
       const params: Record<string, unknown> = { page: 1, pageSize: 5 };
-      if (selectedTenant) params.tenantId = selectedTenant;
-
+      // For customer users, stats are scoped to their tenant automatically by backend
       const [allRes, pubRes, revRes, draftRes] = await Promise.all([
         workflowsApi.list({ ...params, pageSize: 1 } as Parameters<typeof workflowsApi.list>[0]),
         workflowsApi.list({ ...params, pageSize: 1, status: 'PUBLISHED' } as Parameters<typeof workflowsApi.list>[0]),
@@ -68,10 +118,166 @@ export default function Dashboard() {
     }
   };
 
-  useEffect(() => {
-    loadData();
-  }, [selectedTenant]);
+  // --- Admin / Technician View ---
+  if (isAdmin) {
+    return (
+      <div className="space-y-8">
+        {/* Header */}
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+              Willkommen, {user?.firstName}!
+            </h1>
+            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              Hier ist eine Übersicht Ihrer Mandanten und Workflows.
+            </p>
+          </div>
+          <Link to="/tenants" className="btn-secondary gap-2">
+            <Plus size={18} />
+            Neuer Mandant
+          </Link>
+        </div>
 
+        {/* Tenant Cards Grid */}
+        <div>
+          <h2 className="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
+            Mandanten
+          </h2>
+          {tenantsLoading ? (
+            <div className="flex items-center justify-center py-16">
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary-600 border-t-transparent" />
+            </div>
+          ) : tenantCards.length === 0 ? (
+            <div className="card py-12 text-center">
+              <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
+                <Building2 className="text-gray-400 dark:text-gray-500" size={32} />
+              </div>
+              <h3 className="mt-4 text-base font-semibold text-gray-900 dark:text-white">
+                Keine Mandanten vorhanden
+              </h3>
+              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                Erstellen Sie den ersten Mandanten.
+              </p>
+              <div className="mt-6">
+                <Link to="/tenants" className="btn-primary gap-2">
+                  <Plus size={18} />
+                  Neuer Mandant
+                </Link>
+              </div>
+            </div>
+          ) : (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {tenantCards.map((tc) => (
+                <Link
+                  key={tc.id}
+                  to={`/tenants/${tc.id}`}
+                  className="card p-5 transition-shadow hover:shadow-md"
+                >
+                  <div className="flex items-start gap-4">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-50 text-lg font-bold text-primary-700 dark:bg-primary-900/30 dark:text-primary-400">
+                      {tc.name[0]}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <h3 className="truncate text-base font-semibold text-gray-900 dark:text-white">
+                        {tc.name}
+                      </h3>
+                      <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+                        {tc.slug}
+                      </p>
+                    </div>
+                    {!tc.active && (
+                      <span className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-300 dark:bg-gray-700 dark:text-gray-400 dark:ring-gray-600">
+                        Inaktiv
+                      </span>
+                    )}
+                  </div>
+                  <div className="mt-4 flex items-center gap-3">
+                    <span className="inline-flex items-center gap-1.5 rounded-full bg-primary-50 px-2.5 py-0.5 text-xs font-medium text-primary-700 dark:bg-primary-900/30 dark:text-primary-400">
+                      <FileText size={12} />
+                      {tc.workflowPublished}/{tc.workflowTotal} Workflows
+                    </span>
+                  </div>
+                  <div className="mt-3 flex items-center justify-between text-xs text-gray-400 dark:text-gray-500">
+                    <span>
+                      {tc.lastUpdated
+                        ? `Zuletzt aktiv: ${new Date(tc.lastUpdated).toLocaleDateString('de-DE')}`
+                        : 'Keine Workflows'}
+                    </span>
+                    <span className="font-medium text-primary-600 dark:text-primary-400">
+                      Workflows anzeigen
+                    </span>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Recent Activity across all tenants */}
+        <div className="card">
+          <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700">
+            <h2 className="text-base font-semibold text-gray-900 dark:text-white">
+              Letzte Aktivität
+            </h2>
+            <Link
+              to="/workflows"
+              className="text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
+            >
+              Alle Workflows
+            </Link>
+          </div>
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary-600 border-t-transparent" />
+            </div>
+          ) : recent.length === 0 ? (
+            <div className="py-12 text-center text-sm text-gray-500 dark:text-gray-400">
+              Noch keine Workflows vorhanden.
+            </div>
+          ) : (
+            <ul className="divide-y divide-gray-100 dark:divide-gray-700">
+              {recent.map((wf) => (
+                <li key={wf.id}>
+                  <Link
+                    to={`/workflows/${wf.id}`}
+                    className="flex items-center gap-4 px-6 py-4 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
+                  >
+                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700">
+                      <FilePlus className="text-gray-500 dark:text-gray-400" size={20} />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate font-medium text-gray-900 dark:text-white">
+                        {wf.title}
+                      </p>
+                      <p className="truncate text-sm text-gray-500 dark:text-gray-400">
+                        {wf.tenant && (
+                          <Link
+                            to={`/tenants/${wf.tenantId}`}
+                            className="font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            {wf.tenant.name}
+                          </Link>
+                        )}
+                        {wf.tenant && <span> &middot; </span>}
+                        {wf._count?.steps ?? wf.steps?.length ?? 0} Schritte &middot; v{wf.version}
+                      </p>
+                    </div>
+                    <StatusBadge status={wf.status} />
+                    <span className="hidden text-xs text-gray-400 dark:text-gray-500 sm:inline">
+                      {new Date(wf.updatedAt).toLocaleDateString('de-DE')}
+                    </span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // --- Customer View (CUSTOMER_ADMIN / CUSTOMER_USER) ---
   const statCards = [
     {
       label: 'Gesamt',
@@ -108,23 +314,11 @@ export default function Dashboard() {
             Willkommen, {user?.firstName}!
           </h1>
           <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-            Hier ist eine Übersicht Ihrer Workflows.
+            {user?.tenant
+              ? `Übersicht für ${user.tenant.name}`
+              : 'Hier ist eine Übersicht Ihrer Workflows.'}
           </p>
         </div>
-        {isAdmin && tenants.length > 0 && (
-          <select
-            value={selectedTenant}
-            onChange={(e) => setSelectedTenant(e.target.value)}
-            className="input-field w-auto"
-          >
-            <option value="">Alle Mandanten</option>
-            {tenants.map((t) => (
-              <option key={t.id} value={t.id}>
-                {t.name}
-              </option>
-            ))}
-          </select>
-        )}
       </div>
 
       {/* Stats */}
@@ -217,10 +411,6 @@ export default function Dashboard() {
                       {wf.title}
                     </p>
                     <p className="truncate text-sm text-gray-500 dark:text-gray-400">
-                      {wf.tenant && (
-                        <span className="font-medium text-primary-600 dark:text-primary-400">{wf.tenant.name}</span>
-                      )}
-                      {wf.tenant && <span> &middot; </span>}
                       {wf._count?.steps ?? wf.steps?.length ?? 0} Schritte &middot; v{wf.version}
                     </p>
                   </div>
diff --git a/frontend/src/pages/TenantDetail.tsx b/frontend/src/pages/TenantDetail.tsx
new file mode 100644
index 0000000..30ca7f2
--- /dev/null
+++ b/frontend/src/pages/TenantDetail.tsx
@@ -0,0 +1,458 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import {
+  ArrowLeft,
+  Building2,
+  Check,
+  Clock,
+  Edit,
+  FileCheck,
+  FilePlus,
+  FileText,
+  Grid3X3,
+  List,
+  Plus,
+  Tag,
+  X,
+} from 'lucide-react';
+import toast from 'react-hot-toast';
+import { tenantsApi, workflowsApi } from '../services/api';
+import type { Tenant, Workflow } from '../types';
+import SearchBar from '../components/SearchBar';
+import StatusBadge from '../components/StatusBadge';
+import Pagination from '../components/Pagination';
+import EmptyState from '../components/EmptyState';
+
+interface TenantStats {
+  total: number;
+  published: number;
+  draft: number;
+  review: number;
+}
+
+type ViewMode = 'grid' | 'list';
+
+const statusOptions: { value: string; label: string }[] = [
+  { value: '', label: 'Alle Status' },
+  { value: 'DRAFT', label: 'Entwurf' },
+  { value: 'REVIEW', label: 'In Prüfung' },
+  { value: 'PUBLISHED', label: 'Veröffentlicht' },
+  { value: 'ARCHIVED', label: 'Archiviert' },
+];
+
+export default function TenantDetail() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  const [tenant, setTenant] = useState<Tenant | null>(null);
+  const [stats, setStats] = useState<TenantStats>({ total: 0, published: 0, draft: 0, review: 0 });
+  const [workflows, setWorkflows] = useState<Workflow[]>([]);
+  const [recentActivity, setRecentActivity] = useState<Workflow[]>([]);
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [workflowsLoading, setWorkflowsLoading] = useState(true);
+  const [viewMode, setViewMode] = useState<ViewMode>('grid');
+
+  // Load tenant info
+  useEffect(() => {
+    if (!id) return;
+    setLoading(true);
+    tenantsApi
+      .get(id)
+      .then((t) => {
+        setTenant(t);
+      })
+      .catch(() => {
+        toast.error('Mandant konnte nicht geladen werden');
+        navigate('/tenants');
+      })
+      .finally(() => setLoading(false));
+  }, [id, navigate]);
+
+  // Load stats
+  useEffect(() => {
+    if (!id) return;
+    Promise.all([
+      workflowsApi.list({ tenantId: id, pageSize: 1 }),
+      workflowsApi.list({ tenantId: id, pageSize: 1, status: 'PUBLISHED' }),
+      workflowsApi.list({ tenantId: id, pageSize: 1, status: 'DRAFT' }),
+      workflowsApi.list({ tenantId: id, pageSize: 1, status: 'REVIEW' }),
+    ])
+      .then(([allRes, pubRes, draftRes, revRes]) => {
+        setStats({
+          total: allRes.total,
+          published: pubRes.total,
+          draft: draftRes.total,
+          review: revRes.total,
+        });
+      })
+      .catch(() => {});
+  }, [id]);
+
+  // Load recent activity (last 5 updated workflows)
+  useEffect(() => {
+    if (!id) return;
+    workflowsApi
+      .list({ tenantId: id, pageSize: 5 })
+      .then((res) => setRecentActivity(res.data))
+      .catch(() => {});
+  }, [id]);
+
+  // Load workflows with filters
+  useEffect(() => {
+    if (!id) return;
+    setWorkflowsLoading(true);
+    workflowsApi
+      .list({
+        tenantId: id,
+        page,
+        pageSize: 12,
+        search: search || undefined,
+        status: statusFilter || undefined,
+      })
+      .then((res) => {
+        setWorkflows(res.data);
+        setTotalPages(res.totalPages);
+      })
+      .catch(() => {
+        toast.error('Workflows konnten nicht geladen werden');
+      })
+      .finally(() => setWorkflowsLoading(false));
+  }, [id, search, statusFilter, page]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-24">
+        <div className="h-10 w-10 animate-spin rounded-full border-4 border-primary-600 border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (!tenant) return null;
+
+  const statCards = [
+    {
+      label: 'Gesamt',
+      value: stats.total,
+      icon: FileText,
+      color: 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400',
+    },
+    {
+      label: 'Veröffentlicht',
+      value: stats.published,
+      icon: FileCheck,
+      color: 'bg-green-50 text-green-600 dark:bg-green-900/30 dark:text-green-400',
+    },
+    {
+      label: 'Entwurf',
+      value: stats.draft,
+      icon: FilePlus,
+      color: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400',
+    },
+    {
+      label: 'In Prüfung',
+      value: stats.review,
+      icon: Clock,
+      color: 'bg-yellow-50 text-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-400',
+    },
+  ];
+
+  return (
+    <div className="space-y-8">
+      {/* Back link */}
+      <button
+        onClick={() => navigate('/tenants')}
+        className="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+      >
+        <ArrowLeft size={16} />
+        Alle Mandanten
+      </button>
+
+      {/* Tenant Header */}
+      <div className="card p-6">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-4">
+            <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary-50 text-xl font-bold text-primary-700 dark:bg-primary-900/30 dark:text-primary-400">
+              {tenant.name[0]}
+            </div>
+            <div>
+              <div className="flex items-center gap-3">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+                  {tenant.name}
+                </h1>
+                {tenant.active ? (
+                  <span className="inline-flex items-center gap-1 rounded-full bg-green-50 px-2.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-300 dark:bg-green-900/30 dark:text-green-400 dark:ring-green-700">
+                    <Check size={12} />
+                    Aktiv
+                  </span>
+                ) : (
+                  <span className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-300 dark:bg-gray-700 dark:text-gray-400 dark:ring-gray-600">
+                    <X size={12} />
+                    Inaktiv
+                  </span>
+                )}
+              </div>
+              <p className="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+                Slug: {tenant.slug}
+              </p>
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <Link
+              to={`/workflows/new?tenantId=${tenant.id}`}
+              className="btn-primary gap-2"
+            >
+              <Plus size={18} />
+              Neuer Workflow
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* Stats Row */}
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        {statCards.map((card) => (
+          <div key={card.label} className="card p-5">
+            <div className="flex items-center justify-between">
+              <div
+                className={`flex h-10 w-10 items-center justify-center rounded-lg ${card.color}`}
+              >
+                <card.icon size={20} />
+              </div>
+            </div>
+            <div className="mt-3">
+              <p className="text-2xl font-bold text-gray-900 dark:text-white">
+                {card.value}
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">{card.label}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Workflows Section */}
+      <div className="space-y-4">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Workflows
+          </h2>
+          <Link
+            to={`/workflows?tenantId=${tenant.id}`}
+            className="text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
+          >
+            Alle in Workflow-Ansicht
+          </Link>
+        </div>
+
+        {/* Filters */}
+        <div className="card p-4">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+            <div className="flex-1">
+              <SearchBar
+                value={search}
+                onChange={(val) => {
+                  setSearch(val);
+                  setPage(1);
+                }}
+                placeholder="Workflows suchen..."
+              />
+            </div>
+            <select
+              value={statusFilter}
+              onChange={(e) => {
+                setStatusFilter(e.target.value);
+                setPage(1);
+              }}
+              className="input-field w-auto"
+            >
+              {statusOptions.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                </option>
+              ))}
+            </select>
+            <div className="flex rounded-lg border border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800">
+              <button
+                onClick={() => setViewMode('grid')}
+                className={`rounded-l-lg p-2 ${
+                  viewMode === 'grid'
+                    ? 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400'
+                    : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+                }`}
+              >
+                <Grid3X3 size={18} />
+              </button>
+              <button
+                onClick={() => setViewMode('list')}
+                className={`rounded-r-lg p-2 ${
+                  viewMode === 'list'
+                    ? 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400'
+                    : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+                }`}
+              >
+                <List size={18} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Results */}
+        {workflowsLoading ? (
+          <div className="flex items-center justify-center py-16">
+            <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary-600 border-t-transparent" />
+          </div>
+        ) : workflows.length === 0 ? (
+          <EmptyState
+            icon={FileText}
+            title="Keine Workflows gefunden"
+            description={
+              search || statusFilter
+                ? 'Versuchen Sie andere Suchkriterien.'
+                : 'Erstellen Sie den ersten Workflow für diesen Mandanten.'
+            }
+            action={
+              <Link to={`/workflows/new?tenantId=${tenant.id}`} className="btn-primary gap-2">
+                <Plus size={18} />
+                Neuer Workflow
+              </Link>
+            }
+          />
+        ) : viewMode === 'grid' ? (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {workflows.map((wf) => (
+              <Link
+                key={wf.id}
+                to={`/workflows/${wf.id}`}
+                className="card p-5 transition-shadow hover:shadow-md"
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <h3 className="line-clamp-1 font-semibold text-gray-900 dark:text-white">
+                    {wf.title}
+                  </h3>
+                  <StatusBadge status={wf.status} />
+                </div>
+                {wf.description && (
+                  <p className="mt-2 line-clamp-2 text-sm text-gray-500 dark:text-gray-400">
+                    {wf.description}
+                  </p>
+                )}
+                <div className="mt-4 flex items-center justify-between text-xs text-gray-400 dark:text-gray-500">
+                  <span>
+                    {wf._count?.steps ?? wf.steps?.length ?? 0} Schritte &middot; v{wf.version}
+                  </span>
+                  <span>
+                    {new Date(wf.updatedAt).toLocaleDateString('de-DE')}
+                  </span>
+                </div>
+                {wf.category && (
+                  <div className="mt-3 flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
+                    <Tag size={12} />
+                    {wf.category.name}
+                  </div>
+                )}
+                {wf.tags && wf.tags.length > 0 && (
+                  <div className="mt-2 flex flex-wrap gap-1">
+                    {wf.tags.slice(0, 3).map((tag) => (
+                      <span
+                        key={tag}
+                        className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-300"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                    {wf.tags.length > 3 && (
+                      <span className="text-xs text-gray-400 dark:text-gray-500">
+                        +{wf.tags.length - 3}
+                      </span>
+                    )}
+                  </div>
+                )}
+              </Link>
+            ))}
+          </div>
+        ) : (
+          <div className="card divide-y divide-gray-100 dark:divide-gray-700">
+            {workflows.map((wf) => (
+              <Link
+                key={wf.id}
+                to={`/workflows/${wf.id}`}
+                className="flex items-center gap-4 px-6 py-4 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700">
+                  <FileText className="text-gray-500 dark:text-gray-400" size={20} />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="truncate font-medium text-gray-900 dark:text-white">{wf.title}</p>
+                  <p className="truncate text-sm text-gray-500 dark:text-gray-400">
+                    {wf.description}
+                  </p>
+                </div>
+                {wf.category && (
+                  <span className="hidden rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 md:inline dark:bg-gray-700 dark:text-gray-300">
+                    {wf.category.name}
+                  </span>
+                )}
+                <span className="hidden text-sm text-gray-400 dark:text-gray-500 sm:inline">
+                  {wf._count?.steps ?? wf.steps?.length ?? 0} Schritte
+                </span>
+                <StatusBadge status={wf.status} />
+                <span className="hidden text-xs text-gray-400 dark:text-gray-500 lg:inline">
+                  {new Date(wf.updatedAt).toLocaleDateString('de-DE')}
+                </span>
+              </Link>
+            ))}
+          </div>
+        )}
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <Pagination page={page} totalPages={totalPages} onPageChange={setPage} />
+        )}
+      </div>
+
+      {/* Recent Activity */}
+      <div className="card">
+        <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700">
+          <h2 className="text-base font-semibold text-gray-900 dark:text-white">
+            Letzte Aktivität
+          </h2>
+        </div>
+        {recentActivity.length === 0 ? (
+          <div className="py-12 text-center text-sm text-gray-500 dark:text-gray-400">
+            Noch keine Aktivität vorhanden.
+          </div>
+        ) : (
+          <ul className="divide-y divide-gray-100 dark:divide-gray-700">
+            {recentActivity.map((wf) => (
+              <li key={wf.id}>
+                <Link
+                  to={`/workflows/${wf.id}`}
+                  className="flex items-center gap-4 px-6 py-4 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
+                >
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700">
+                    <FilePlus className="text-gray-500 dark:text-gray-400" size={20} />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate font-medium text-gray-900 dark:text-white">
+                      {wf.title}
+                    </p>
+                    <p className="truncate text-sm text-gray-500 dark:text-gray-400">
+                      {wf._count?.steps ?? wf.steps?.length ?? 0} Schritte &middot; v{wf.version}
+                    </p>
+                  </div>
+                  <StatusBadge status={wf.status} />
+                  <span className="hidden text-xs text-gray-400 dark:text-gray-500 sm:inline">
+                    {new Date(wf.updatedAt).toLocaleDateString('de-DE')}
+                  </span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/TenantList.tsx b/frontend/src/pages/TenantList.tsx
index 3dfc2b6..8099b07 100644
--- a/frontend/src/pages/TenantList.tsx
+++ b/frontend/src/pages/TenantList.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   Building2,
   Check,
@@ -8,7 +9,7 @@ import {
   X,
 } from 'lucide-react';
 import toast from 'react-hot-toast';
-import { tenantsApi } from '../services/api';
+import { tenantsApi, workflowsApi } from '../services/api';
 import type { Tenant } from '../types';
 import Modal from '../components/Modal';
 import ConfirmDialog from '../components/ConfirmDialog';
@@ -16,8 +17,14 @@ import SearchBar from '../components/SearchBar';
 import Pagination from '../components/Pagination';
 import EmptyState from '../components/EmptyState';
 
+interface TenantWithMeta extends Tenant {
+  workflowCount: number;
+  lastActive: string | null;
+}
+
 export default function TenantList() {
-  const [tenants, setTenants] = useState<Tenant[]>([]);
+  const navigate = useNavigate();
+  const [tenants, setTenants] = useState<TenantWithMeta[]>([]);
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
@@ -47,7 +54,27 @@ export default function TenantList() {
         pageSize: 20,
         search: search || undefined,
       });
-      setTenants(res.data);
+      // Enrich each tenant with workflow count and last active date
+      const enriched: TenantWithMeta[] = await Promise.all(
+        res.data.map(async (tenant) => {
+          try {
+            const wfRes = await workflowsApi.list({ tenantId: tenant.id, pageSize: 1 });
+            const lastActive = wfRes.data.length > 0 ? wfRes.data[0].updatedAt : null;
+            return {
+              ...tenant,
+              workflowCount: wfRes.total,
+              lastActive,
+            };
+          } catch {
+            return {
+              ...tenant,
+              workflowCount: 0,
+              lastActive: null,
+            };
+          }
+        })
+      );
+      setTenants(enriched);
       setTotalPages(res.totalPages);
     } catch {
       toast.error('Mandanten konnten nicht geladen werden');
@@ -64,7 +91,8 @@ export default function TenantList() {
     setModalOpen(true);
   };
 
-  const openEdit = (tenant: Tenant) => {
+  const openEdit = (tenant: Tenant, e: React.MouseEvent) => {
+    e.stopPropagation();
     setEditingTenant(tenant);
     setFormName(tenant.name);
     setFormSlug(tenant.slug);
@@ -124,6 +152,10 @@ export default function TenantList() {
     }
   };
 
+  const handleRowClick = (tenantId: string) => {
+    navigate(`/tenants/${tenantId}`);
+  };
+
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -181,6 +213,12 @@ export default function TenantList() {
                   <th className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     Slug
                   </th>
+                  <th className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                    Workflows
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                    Zuletzt aktiv
+                  </th>
                   <th className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     Status
                   </th>
@@ -191,7 +229,11 @@ export default function TenantList() {
               </thead>
               <tbody className="divide-y divide-gray-100 bg-white dark:divide-gray-700 dark:bg-gray-800">
                 {tenants.map((tenant) => (
-                  <tr key={tenant.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                  <tr
+                    key={tenant.id}
+                    onClick={() => handleRowClick(tenant.id)}
+                    className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
+                  >
                     <td className="whitespace-nowrap px-6 py-4">
                       <div className="flex items-center gap-3">
                         <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary-50 text-sm font-bold text-primary-700 dark:bg-primary-900/30 dark:text-primary-400">
@@ -205,6 +247,16 @@ export default function TenantList() {
                     <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                       {tenant.slug}
                     </td>
+                    <td className="whitespace-nowrap px-6 py-4">
+                      <span className="inline-flex items-center rounded-full bg-primary-50 px-2.5 py-0.5 text-xs font-medium text-primary-700 dark:bg-primary-900/30 dark:text-primary-400">
+                        {tenant.workflowCount}
+                      </span>
+                    </td>
+                    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+                      {tenant.lastActive
+                        ? new Date(tenant.lastActive).toLocaleDateString('de-DE')
+                        : '-'}
+                    </td>
                     <td className="whitespace-nowrap px-6 py-4">
                       {tenant.active ? (
                         <span className="inline-flex items-center gap-1 rounded-full bg-green-50 px-2.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-300 dark:bg-green-900/30 dark:text-green-400 dark:ring-green-700">
@@ -221,14 +273,17 @@ export default function TenantList() {
                     <td className="whitespace-nowrap px-6 py-4 text-right">
                       <div className="flex items-center justify-end gap-2">
                         <button
-                          onClick={() => openEdit(tenant)}
+                          onClick={(e) => openEdit(tenant, e)}
                           className="rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
                           title="Bearbeiten"
                         >
                           <Edit size={16} />
                         </button>
                         <button
-                          onClick={() => setDeactivateTarget(tenant)}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setDeactivateTarget(tenant);
+                          }}
                           className="rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
                           title={tenant.active ? 'Deaktivieren' : 'Aktivieren'}
                         >
diff --git a/frontend/src/pages/WorkflowEditor.tsx b/frontend/src/pages/WorkflowEditor.tsx
index 3eaf310..d6ade6e 100644
--- a/frontend/src/pages/WorkflowEditor.tsx
+++ b/frontend/src/pages/WorkflowEditor.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, useCallback } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import {
   ArrowLeft,
   GripVertical,
@@ -40,16 +40,20 @@ function nextKey() {
 
 export default function WorkflowEditor() {
   const { id } = useParams<{ id: string }>();
+  const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const { user } = useAuth();
   const isNew = !id;
 
+  // Pre-select tenant from URL query param (when coming from tenant detail page)
+  const urlTenantId = searchParams.get('tenantId') || '';
+
   const [title, setTitle] = useState('');
   const [description, setDescription] = useState('');
   const [categoryId, setCategoryId] = useState('');
   const [tagsInput, setTagsInput] = useState('');
   const [isTemplate, setIsTemplate] = useState(false);
-  const [tenantId, setTenantId] = useState(user?.tenantId || '');
+  const [tenantId, setTenantId] = useState(urlTenantId || user?.tenantId || '');
   const [tenants, setTenants] = useState<Tenant[]>([]);
   const [steps, setSteps] = useState<StepDraft[]>([]);
   const [categories, setCategories] = useState<Category[]>([]);
diff --git a/frontend/src/pages/WorkflowList.tsx b/frontend/src/pages/WorkflowList.tsx
index 6101131..9812d13 100644
--- a/frontend/src/pages/WorkflowList.tsx
+++ b/frontend/src/pages/WorkflowList.tsx
@@ -7,6 +7,7 @@ import {
   List,
   Plus,
   Tag,
+  X,
 } from 'lucide-react';
 import toast from 'react-hot-toast';
 import { workflowsApi, categoriesApi, tenantsApi } from '../services/api';
@@ -30,6 +31,7 @@ const statusOptions: { value: string; label: string }[] = [
 export default function WorkflowList() {
   const [searchParams, setSearchParams] = useSearchParams();
   const isTemplate = searchParams.get('template') === 'true';
+  const urlTenantId = searchParams.get('tenantId') || '';
   const { user } = useAuth();
   const isAdmin = user?.role === 'SYSTEM_ADMIN' || user?.role === 'TECHNICIAN';
 
@@ -39,12 +41,21 @@ export default function WorkflowList() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('');
   const [categoryFilter, setCategoryFilter] = useState('');
-  const [tenantFilter, setTenantFilter] = useState('');
+  const [tenantFilter, setTenantFilter] = useState(urlTenantId);
   const [page, setPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [loading, setLoading] = useState(true);
   const [viewMode, setViewMode] = useState<ViewMode>('grid');
 
+  // Sync tenantFilter from URL param
+  useEffect(() => {
+    const paramTenantId = searchParams.get('tenantId') || '';
+    if (paramTenantId !== tenantFilter) {
+      setTenantFilter(paramTenantId);
+      setPage(1);
+    }
+  }, [searchParams]);
+
   useEffect(() => {
     categoriesApi.list().then(setCategories).catch(() => {});
     if (isAdmin) {
@@ -78,6 +89,18 @@ export default function WorkflowList() {
     }
   };
 
+  // Find the current tenant name for the breadcrumb chip
+  const activeTenant = tenants.find((t) => t.id === tenantFilter);
+
+  const clearTenantFilter = () => {
+    setTenantFilter('');
+    setPage(1);
+    // Remove tenantId from URL params
+    const newParams = new URLSearchParams(searchParams);
+    newParams.delete('tenantId');
+    setSearchParams(newParams);
+  };
+
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -92,12 +115,36 @@ export default function WorkflowList() {
               : 'Alle Workflows Ihres Mandanten'}
           </p>
         </div>
-        <Link to="/workflows/new" className="btn-primary gap-2">
+        <Link
+          to={tenantFilter ? `/workflows/new?tenantId=${tenantFilter}` : '/workflows/new'}
+          className="btn-primary gap-2"
+        >
           <Plus size={18} />
           Neuer Workflow
         </Link>
       </div>
 
+      {/* Tenant breadcrumb chip when filtered */}
+      {isAdmin && activeTenant && (
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-500 dark:text-gray-400">Mandant:</span>
+          <Link
+            to={`/tenants/${activeTenant.id}`}
+            className="inline-flex items-center gap-1.5 rounded-full bg-primary-50 px-3 py-1 text-sm font-medium text-primary-700 transition-colors hover:bg-primary-100 dark:bg-primary-900/30 dark:text-primary-400 dark:hover:bg-primary-900/50"
+          >
+            <Building2 size={14} />
+            {activeTenant.name}
+          </Link>
+          <button
+            onClick={clearTenantFilter}
+            className="rounded-full p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+            title="Filter entfernen"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      )}
+
       {/* Filters */}
       <div className="card p-4">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center">