e83107d71f
- 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>
78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
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>
|
|
);
|
|
}
|