Initial commit: ZiRA Classification Tool for Zuyderland CMDB

2026-01-06 15:32:28 +01:00
commit 0b27adc2fb
55 changed files with 24310 additions and 0 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,84 @@
+import { Routes, Route, Link, useLocation } from 'react-router-dom';
+import { clsx } from 'clsx';
+import Dashboard from './components/Dashboard';
+import ApplicationList from './components/ApplicationList';
+import ApplicationDetail from './components/ApplicationDetail';
+import TeamDashboard from './components/TeamDashboard';
+import Configuration from './components/Configuration';
+import ConfigurationV25 from './components/ConfigurationV25';
+
+function App() {
+  const location = useLocation();
+
+  const navItems = [
+    { path: '/', label: 'Dashboard', exact: true },
+    { path: '/applications', label: 'Applicaties', exact: false },
+    { path: '/teams', label: 'Team-indeling', exact: true },
+    { path: '/configuration', label: 'FTE Config v25', exact: true },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Header */}
+      <header className="bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center space-x-8">
+              <div className="flex items-center space-x-3">
+                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                  <span className="text-white font-bold text-sm">ZiRA</span>
+                </div>
+                <div>
+                  <h1 className="text-lg font-semibold text-gray-900">
+                    Classificatie Tool
+                  </h1>
+                  <p className="text-xs text-gray-500">Zuyderland CMDB</p>
+                </div>
+              </div>
+
+              <nav className="hidden md:flex space-x-1">
+                {navItems.map((item) => {
+                  const isActive = item.exact
+                    ? location.pathname === item.path
+                    : location.pathname.startsWith(item.path);
+
+                  return (
+                    <Link
+                      key={item.path}
+                      to={item.path}
+                      className={clsx(
+                        'px-3 py-2 rounded-md text-sm font-medium transition-colors',
+                        isActive
+                          ? 'bg-blue-50 text-blue-700'
+                          : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
+                      )}
+                    >
+                      {item.label}
+                    </Link>
+                  );
+                })}
+              </nav>
+            </div>
+
+            <div className="flex items-center space-x-4">
+              <span className="text-sm text-gray-500">ICMT</span>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/applications" element={<ApplicationList />} />
+          <Route path="/applications/:id" element={<ApplicationDetail />} />
+          <Route path="/teams" element={<TeamDashboard />} />
+          <Route path="/configuration" element={<ConfigurationV25 />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}
+
+export default App;