feat: Solace Bank Group PLC Treasury Management Portal

- Web3 authentication with MetaMask, WalletConnect, Coinbase wallet options
- Demo mode for testing without wallet
- Overview dashboard with KPI cards, asset allocation, positions, accounts, alerts
- Transaction Builder module (full IDE-style drag-and-drop canvas with 28 gap fixes)
- Accounts module with multi-account/subaccount hierarchical structures
- Treasury Management module with positions table and 14-day cash forecast
- Financial Reporting module with IPSAS, US GAAP, IFRS compliance
- Compliance & Risk module with KYC/AML/Sanctions monitoring
- Settlement & Clearing module with DVP/FOP/PVP operations
- Settings with role-based permissions and enterprise controls
- Dark theme professional UI with Solace Bank branding
- HashRouter for static hosting compatibility

Co-Authored-By: Nakamoto, S <defi@defi-oracle.io>

src/components/ActivityBar.tsx

@@ -0,0 +1,77 @@
+import {
+  Blocks, Coins, LayoutTemplate, ShieldCheck, Route, Globe,
+  Bot, Terminal, History, Settings
+} from 'lucide-react';
+import type { ActivityTab } from '../types';
+
+const tabs: { id: ActivityTab; icon: typeof Blocks; label: string }[] = [
+  { id: 'builder', icon: Blocks, label: 'Builder' },
+  { id: 'assets', icon: Coins, label: 'Assets' },
+  { id: 'templates', icon: LayoutTemplate, label: 'Templates' },
+  { id: 'compliance', icon: ShieldCheck, label: 'Compliance' },
+  { id: 'routes', icon: Route, label: 'Routes' },
+  { id: 'protocols', icon: Globe, label: 'Protocols' },
+  { id: 'agents', icon: Bot, label: 'Agents' },
+  { id: 'terminal', icon: Terminal, label: 'Terminal' },
+  { id: 'audit', icon: History, label: 'Audit' },
+  { id: 'settings', icon: Settings, label: 'Settings' },
+];
+
+interface ActivityBarProps {
+  activeTab: ActivityTab;
+  onTabChange: (tab: ActivityTab) => void;
+  leftPanelOpen: boolean;
+  onToggleLeftPanel: () => void;
+}
+
+export default function ActivityBar({ activeTab, onTabChange, leftPanelOpen, onToggleLeftPanel }: ActivityBarProps) {
+  return (
+    <div className="activity-bar">
+      <div className="activity-bar-top">
+        {tabs.slice(0, 7).map(tab => {
+          const Icon = tab.icon;
+          const isActive = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              className={`activity-btn ${isActive && leftPanelOpen ? 'active' : ''}`}
+              title={tab.label}
+              onClick={() => {
+                if (isActive && leftPanelOpen) {
+                  onToggleLeftPanel();
+                } else {
+                  onTabChange(tab.id);
+                  if (!leftPanelOpen) onToggleLeftPanel();
+                }
+              }}
+            >
+              <Icon size={20} />
+            </button>
+          );
+        })}
+      </div>
+      <div className="activity-bar-bottom">
+        {tabs.slice(7).map(tab => {
+          const Icon = tab.icon;
+          return (
+            <button
+              key={tab.id}
+              className={`activity-btn ${activeTab === tab.id && leftPanelOpen ? 'active' : ''}`}
+              title={tab.label}
+              onClick={() => {
+                if (activeTab === tab.id && leftPanelOpen) {
+                  onToggleLeftPanel();
+                } else {
+                  onTabChange(tab.id);
+                  if (!leftPanelOpen) onToggleLeftPanel();
+                }
+              }}
+            >
+              <Icon size={20} />
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}