Spaces:
Sleeping
Sleeping
File size: 8,411 Bytes
2a5d15a c085a48 2a5d15a c085a48 2a5d15a c085a48 2a5d15a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 | 'use client';
import React from 'react';
interface LeftDocumentPanelProps {
onSelectQuestion?: (q: string) => void;
onCollapse?: () => void;
recentQuestions?: string[];
}
interface FAQItem {
question: string;
tag: string;
}
export function LeftDocumentPanel({
onSelectQuestion,
onCollapse,
recentQuestions = [],
}: LeftDocumentPanelProps) {
const defaultFaqGroups: { title: string; items: FAQItem[] }[] = [
{
title: "Today",
items: [
{ question: "What was the Net Interest Margin in Q1 2026?", tag: "Margin & NIM" },
{ question: "How did Net Profit perform year-on-year?", tag: "Profitability" },
{ question: "How did business segment performance vary across RBWM, CIB, GM&T and DenizBank?", tag: "Segments" },
{ question: "What ESG progress did Emirates NBD report in the presentation?", tag: "ESG" },
{ question: "How did loans and deposits perform in Q1 2026?", tag: "Loans & Deposits" },
{ question: "What is the loans by sector distribution?", tag: "Sector Mix" },
{ question: "What were the key Q1 2026 performance highlights?", tag: "Highlights" },
],
},
{
title: "Last 7 days",
items: [
{ question: "What is the Capital Adequacy Ratio?", tag: "Capital Strength" },
{ question: "What drove the improvement in Cost of Risk?", tag: "Credit Quality" },
{ question: "Which business segment contributed most to operating income and PBT?", tag: "Segment PBT" },
{ question: "What are the sustainable finance and ESG rating highlights?", tag: "ESG Ratings" },
{ question: "What drove loan growth and deposit growth?", tag: "Growth Drivers" },
{ question: "How diversified is the gross loan book by sector?", tag: "Loan Sectors" },
{ question: "How did total income and operating income perform?", tag: "Income" },
],
},
{
title: "Last 30 days",
items: [
{ question: "How did the retail banking segment perform?", tag: "Retail Segment" },
{ question: "What is the liquidity coverage ratio?", tag: "Liquidity" },
{ question: "Compare divisional performance across operating income, costs and PBT.", tag: "Divisions" },
{ question: "What are the ESG forward journey and net-zero milestones?", tag: "ESG Roadmap" },
{ question: "What is the CASA ratio and deposit mix?", tag: "Deposit Mix" },
{ question: "What sector concentration risks are visible in the loan portfolio?", tag: "Sector Risk" },
{ question: "What are the funding and liquidity strengths of the group?", tag: "Funding" },
],
},
];
const existingQuestions = new Set(
defaultFaqGroups.flatMap(group => group.items.map(item => item.question.toLowerCase()))
);
const recentItems = recentQuestions
.filter(question => !existingQuestions.has(question.toLowerCase()))
.map(question => ({ question, tag: "Recent" }));
const faqGroups = recentItems.length > 0
? [{ title: "Recent Questions", items: recentItems }, ...defaultFaqGroups]
: defaultFaqGroups;
return (
<aside className="app-left" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
{/* Header with collapse button */}
<div style={{
padding: '1rem',
borderBottom: '1px solid var(--border-subtle)',
background: 'var(--bg-high)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}>
<div>
<span style={{ fontSize: '0.75rem', fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--enbd-blue)' }}>
IR Intelligence FAQ
</span>
<div style={{ fontSize: '0.62rem', color: 'var(--text-disabled)', marginTop: '2px' }}>
Frequently Asked Queries
</div>
</div>
<button
onClick={onCollapse}
title="Collapse Panel"
style={{
background: 'none',
border: 'none',
cursor: 'pointer',
color: 'var(--enbd-blue)',
padding: '0.3rem',
borderRadius: 'var(--radius-sm)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'all 0.15s ease',
}}
className="collapse-btn"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="11 17 6 12 11 7"/>
<polyline points="18 17 13 12 18 7"/>
</svg>
</button>
</div>
{/* FAQ Cards Body */}
<div style={{ flex: 1, padding: '1.25rem 1rem', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
{faqGroups.map((group, groupIdx) => (
<div key={groupIdx} style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
{/* Group Timeframe Header */}
<div style={{
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
paddingBottom: '0.2rem',
borderBottom: '1px solid var(--enbd-blue-border)',
}}>
<span style={{ fontSize: '0.68rem', fontWeight: 700, color: 'var(--enbd-blue)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
{group.title}
</span>
<span style={{ width: '4px', height: '4px', borderRadius: '50%', background: 'var(--gold)' }} />
</div>
{/* Group Questions List */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
{group.items.map((item, itemIdx) => (
<button
key={itemIdx}
onClick={() => onSelectQuestion?.(item.question)}
style={{
background: 'var(--bg-card)',
border: '1px solid var(--border-mid)',
borderRadius: 'var(--radius-md)',
padding: '0.75rem 0.875rem',
textAlign: 'left',
cursor: 'pointer',
transition: 'all 0.15s ease-in-out',
width: '100%',
fontFamily: 'var(--font-body)',
boxShadow: 'var(--shadow-card)',
position: 'relative',
overflow: 'hidden',
}}
className="faq-card-item"
>
{/* Subtle left gold stripe */}
<div style={{
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
width: '3px',
background: 'var(--gold)',
}} />
{/* Header containing tag */}
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.35rem' }}>
<span className="badge" style={{ fontSize: '0.58rem', background: 'var(--enbd-blue-muted)', color: 'var(--enbd-blue)', border: '1px solid var(--enbd-blue-border)', fontWeight: 600, padding: '0.1rem 0.4rem' }}>
{item.tag}
</span>
</div>
{/* Question text */}
<p style={{
fontSize: '0.75rem',
color: 'var(--text-primary)',
fontWeight: 500,
lineHeight: 1.45,
}}>
{item.question}
</p>
</button>
))}
</div>
</div>
))}
</div>
{/* Brand footer inside Left panel */}
<div style={{
padding: '0.875rem 1rem',
borderTop: '1px solid var(--border-subtle)',
background: 'var(--bg-high)',
textAlign: 'center',
}}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.35rem' }}>
<span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', fontWeight: 600, letterSpacing: '0.04em' }}>
EMIRATES NBD · INVESTOR RELATIONS
</span>
</div>
</div>
</aside>
);
}
|