From a9107add7b9c46952faded7ae11572e5169afdc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Thu, 26 Mar 2026 08:44:25 +0100
Subject: [PATCH] feat: unique icons for all admin navigation items

Replaced generic AdminIcon (gear) with distinct icons:
- Blueprints: document with lines
- Clients: building/office
- Countries: globe
- Org Units: layout/grid
- Util. Categories: tag
- Mgmt Levels: horizontal lines (hierarchy)
- Data Import: upload arrow
- Calc. Rules: calculator
- Users: people group
- System Roles: shield with checkmark
- Settings: detailed gear (distinct from AdminIcon)
- Webhooks: chain link

Existing unique icons kept: Broadcasts (megaphone), Activity Log (clock)

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 apps/web/src/components/layout/AppShell.tsx | 60 ++++++++++++++++-----
 1 file changed, 48 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/layout/AppShell.tsx b/apps/web/src/components/layout/AppShell.tsx
index 4d98bdc..3605515 100644
--- a/apps/web/src/components/layout/AppShell.tsx
+++ b/apps/web/src/components/layout/AppShell.tsx
@@ -82,6 +82,42 @@ function ActivityLogIcon() {
 function AdminIcon() {
   return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 8a4 4 0 100 8 4 4 0 000-8zm8 4l-2.1.7a7.9 7.9 0 01-.6 1.5l1 2-2.1 2.1-2-1a7.9 7.9 0 01-1.5.6L12 20l-1.7-2.1a7.9 7.9 0 01-1.5-.6l-2 1-2.1-2.1 1-2a7.9 7.9 0 01-.6-1.5L4 12l2.1-1.7a7.9 7.9 0 01.6-1.5l-1-2 2.1-2.1 2 1a7.9 7.9 0 011.5-.6L12 4l1.7 2.1a7.9 7.9 0 011.5.6l2-1 2.1 2.1-1 2a7.9 7.9 0 01.6 1.5L20 12z" /></svg>;
 }
+function BlueprintIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>;
+}
+function ClientsIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>;
+}
+function CountryIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>;
+}
+function OrgUnitIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" /></svg>;
+}
+function CategoryIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" /></svg>;
+}
+function LevelsIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M3 4h18M3 8h12M3 12h8M3 16h14M3 20h10" /></svg>;
+}
+function ImportIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>;
+}
+function CalcRulesIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>;
+}
+function UsersIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>;
+}
+function SystemRolesIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>;
+}
+function SettingsIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>;
+}
+function WebhooksIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>;
+}
 
 function CollapseIcon({ collapsed }: { collapsed: boolean }) {
   return (
@@ -172,25 +208,25 @@ function isSubGroup(entry: AdminEntry): entry is AdminSubGroup {
 }
 
 const adminNavEntries: AdminEntry[] = [
-  { href: "/admin/blueprints", label: "Blueprints", icon: <AdminIcon /> },
-  { href: "/admin/clients", label: "Clients", icon: <AdminIcon /> },
+  { href: "/admin/blueprints", label: "Blueprints", icon: <BlueprintIcon /> },
+  { href: "/admin/clients", label: "Clients", icon: <ClientsIcon /> },
   {
     label: "ACN-Orga",
     collapsed: true,
     items: [
-      { href: "/admin/countries", label: "Countries", icon: <AdminIcon /> },
-      { href: "/admin/org-units", label: "Org Units", icon: <AdminIcon /> },
-      { href: "/admin/utilization-categories", label: "Util. Categories", icon: <AdminIcon /> },
-      { href: "/admin/management-levels", label: "Mgmt Levels", icon: <AdminIcon /> },
-      { href: "/admin/imports", label: "Data Import", icon: <AdminIcon /> },
+      { href: "/admin/countries", label: "Countries", icon: <CountryIcon /> },
+      { href: "/admin/org-units", label: "Org Units", icon: <OrgUnitIcon /> },
+      { href: "/admin/utilization-categories", label: "Util. Categories", icon: <CategoryIcon /> },
+      { href: "/admin/management-levels", label: "Mgmt Levels", icon: <LevelsIcon /> },
+      { href: "/admin/imports", label: "Data Import", icon: <ImportIcon /> },
     ],
   },
-  { href: "/admin/calculation-rules", label: "Calc. Rules", icon: <AdminIcon /> },
-  { href: "/admin/users", label: "Users", icon: <AdminIcon /> },
-  { href: "/admin/system-roles", label: "System Roles", icon: <AdminIcon /> },
-  { href: "/admin/settings", label: "Settings", icon: <AdminIcon /> },
+  { href: "/admin/calculation-rules", label: "Calc. Rules", icon: <CalcRulesIcon /> },
+  { href: "/admin/users", label: "Users", icon: <UsersIcon /> },
+  { href: "/admin/system-roles", label: "System Roles", icon: <SystemRolesIcon /> },
+  { href: "/admin/settings", label: "Settings", icon: <SettingsIcon /> },
   { href: "/admin/notifications", label: "Broadcasts", icon: <BroadcastIcon /> },
-  { href: "/admin/webhooks", label: "Webhooks", icon: <AdminIcon /> },
+  { href: "/admin/webhooks", label: "Webhooks", icon: <WebhooksIcon /> },
   { href: "/admin/activity-log", label: "Activity Log", icon: <ActivityLogIcon /> },
 ];