Skip to content

Fixed the sidebar navigation issue. #162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
coderranger2 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixed the sidebar navigation issue. #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/components/BankHouse.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
width: 100%;
background-color: #050b14;
color: #e2e8f0;
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
font-family: inherit;
}

Expand Down Expand Up @@ -214,6 +215,8 @@
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
z-index: 20;
}

.bank-side-nav {
Expand Down Expand Up @@ -279,6 +282,7 @@
gap: 1.5rem;
overflow-y: auto;
padding-right: 0.5rem;
min-height: 0;
}

.bank-main-content::-webkit-scrollbar {
Expand Down
266 changes: 191 additions & 75 deletions src/components/BankHouse.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,93 +119,209 @@ export default function BankHouse({ onBack }) {
</div>
</aside>

<section className="bank-main-content">
<div className="bank-summary-row">
<div className="bank-card summary-card bank-glass">
<h3>Total Balance</h3>
<div className="balance-value glitch-target">₮ {glitchText}</div>
<span className="trend positive">+12.5% this month</span>
</div>
<div className="bank-card summary-card bank-glass">
<h3>Savings Vault</h3>
<div className="balance-value">₮ {savings.toLocaleString('en-US', {minimumFractionDigits: 2})}</div>
<span className="trend positive">Locked</span>
</div>
<div className="bank-card summary-card bank-glass">
<h3>Current Account</h3>
<div className="balance-value">₮ {balance.toLocaleString('en-US', {minimumFractionDigits: 2})}</div>
<span className="trend negative hover-glitch">Pending holds</span>
</div>
<div className="bank-card summary-card bank-glass">
<h3>Monthly Spend</h3>
<div className="balance-value">₮ {monthlySpend.toLocaleString('en-US', {minimumFractionDigits: 2})}</div>
<span className="trend negative">+8.2% vs last month</span>
</div>
</div>
<section className="bank-main-content">
<h1 style={{ color: 'white' }}>
Active Tab: {activeTab}
</h1>

<div className="bank-content-grid">
<div className="bank-center-panel">
<TransactionsTable allTransactions={mockTransactions} />
<TransferVault
balance={balance}
beneficiaries={mockBeneficiaries}
onTransfer={transferFunds}
selectedBeneficiary={selectedBen}
setSelectedBeneficiary={setSelectedBen}
/>
</div>
{activeTab === 'dashboard' && (
<>
<div className="bank-summary-row">
<div className="bank-card summary-card bank-glass">
<h3>Total Balance</h3>

<div className="balance-value glitch-target">
₮ {glitchText}
</div>

<span className="trend positive">
+12.5% this month
</span>
</div>

<div className="bank-card summary-card bank-glass">
<h3>Savings Vault</h3>

<div className="balance-value">
₮{' '}
{savings.toLocaleString('en-US', {
minimumFractionDigits: 2
})}
</div>

<span className="trend positive">Locked</span>
</div>

<div className="bank-card summary-card bank-glass">
<h3>Current Account</h3>

<div className="balance-value">
₮{' '}
{balance.toLocaleString('en-US', {
minimumFractionDigits: 2
})}
</div>

<span className="trend negative hover-glitch">
Pending holds
</span>
</div>

<div className="bank-card summary-card bank-glass">
<h3>Monthly Spend</h3>

<div className="balance-value">
₮{' '}
{monthlySpend.toLocaleString('en-US', {
minimumFractionDigits: 2
})}
</div>

<span className="trend negative">
+8.2% vs last month
</span>
</div>
</div>

<div className="bank-content-grid">
<div className="bank-center-panel">
<TransactionsTable
allTransactions={mockTransactions}
/>

<TransferVault
balance={balance}
beneficiaries={mockBeneficiaries}
onTransfer={transferFunds}
selectedBeneficiary={selectedBen}
setSelectedBeneficiary={setSelectedBen}
/>
</div>

<div className="bank-right-panel">
<div className="bank-card bank-glass">
<h2>Security Alerts</h2>

<div className="bank-right-panel">
<div className="bank-card bank-glass">
<h2>Security Alerts</h2>
<div className="alert-list">
<div className="alert-item critical">
<AlertTriangle size={16} />
<div className="alert-content">
<strong>Unauthorized Access Attempt</strong>
<span>Terminal 4A - 2 mins ago</span>
<div className="alert-list">
<div className="alert-item critical">
<AlertTriangle size={16} />

<div className="alert-content">
<strong>
Unauthorized Access Attempt
</strong>

<span>
Terminal 4A - 2 mins ago
</span>
</div>
</div>

<div className="alert-item warning">
<ShieldAlert size={16} />

<div className="alert-content">
<strong>
Large Transfer Pending
</strong>

<span>
₮ 89,000.00 awaiting clearance
</span>
</div>
</div>
</div>
</div>
<div className="alert-item warning">
<ShieldAlert size={16} />
<div className="alert-content">
<strong>Large Transfer Pending</strong>
<span>₮ 89,000.00 awaiting clearance</span>

<div className="bank-card bank-glass chart-card">
<h2>Spending Overview</h2>

<div className="chart-placeholder">
<div className="bar-chart">
{dailySpending.map((day, idx) => (
<div
key={idx}
className={`bar ${
day.isToday
? 'active-bar'
: ''
}`}
style={{ height: day.height }}
title={`₮ ${day.amount.toLocaleString()}`}
/>
))}
</div>

<div className="chart-labels">
{dailySpending.map((day, idx) => (
<span key={idx}>
{day.label}
</span>
))}
</div>
</div>
</div>

<BeneficiariesPanel
beneficiaries={mockBeneficiaries}
onSelectBeneficiary={ben =>
setSelectedBen(ben?.id || '')
}
/>
</div>
</div>
</>
)}

<div className="bank-card bank-glass chart-card">
<h2>Spending Overview</h2>
<div className="chart-placeholder">
<div className="bar-chart">
{dailySpending && dailySpending.map((day, idx) => (
<div
key={idx}
className={`bar ${day.isToday ? 'active-bar' : ''}`}
style={{ height: day.height }}
title={`₮ ${day.amount.toLocaleString()}`}
/>
))}
</div>
<div className="chart-labels">
{dailySpending && dailySpending.map((day, idx) => (
<span key={idx}>{day.label}</span>
))}
</div>
</div>
</div>

<BeneficiariesPanel
beneficiaries={mockBeneficiaries}
onSelectBeneficiary={(ben) => setSelectedBen(ben?.id || '')}
/>
{activeTab === 'accounts' && (
<div className="bank-card bank-glass">
<h2>Accounts</h2>
<p>Accounts section coming soon...</p>
</div>
</div>
)}

{activeTab === 'transfer' && (
<TransferVault
balance={balance}
beneficiaries={mockBeneficiaries}
onTransfer={transferFunds}
selectedBeneficiary={selectedBen}
setSelectedBeneficiary={setSelectedBen}
/>
)}

{activeTab === 'beneficiaries' && (
<BeneficiariesPanel
beneficiaries={mockBeneficiaries}
onSelectBeneficiary={ben =>
setSelectedBen(ben?.id || '')
}
/>
)}

{activeTab === 'statements' && (
<div className="bank-card bank-glass">
<h2>Statements</h2>
<p>Statement archive loading...</p>
</div>
)}

{activeTab === 'fraud' && (
<div className="bank-card bank-glass">
<h2>Fraud Monitor</h2>
<p>No critical threats detected.</p>
</div>
)}

{activeTab === 'support' && (
<div className="bank-card bank-glass">
<h2>Support</h2>
<p>Support systems online.</p>
</div>
)}
</section>
</section>
</div>
</main>
)
}
}
13 changes: 10 additions & 3 deletions src/components/bank-house/TransferVault.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function TransferVault({ balance, beneficiaries, onTransfer, sele
{toast && (
<div
className={`absolute top-2 right-2 px-4 py-2 rounded shadow border ${
toast.includes('Processing')
toast?.includes('Processing')
? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50'
: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/50'
}`}
Expand Down Expand Up @@ -80,7 +80,8 @@ export default function TransferVault({ balance, beneficiaries, onTransfer, sele
value={amount}
onChange={(e) => setAmount(e.target.value)}
/>
<button
<button
type="button"
className="max-btn"
onClick={() => setAmount(balance.toString())}
disabled={isSubmitting}
Expand All @@ -89,7 +90,13 @@ export default function TransferVault({ balance, beneficiaries, onTransfer, sele
</button>
</div>
</div>
<button className="bank-btn primary-btn w-full flex items-center justify-center gap-2" style={{ marginTop: '1rem' }} onClick={handleTransfer} disabled={isSubmitting}>
<button
type="button"
className="bank-btn primary-btn w-full flex items-center justify-center gap-2"
style={{ marginTop: '1rem' }}
onClick={handleTransfer}
disabled={isSubmitting}
>
<Send size={18} /> INITIALIZE TRANSFER
</button>
</div>
Expand Down