anti/DECNET
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: refactor Bounty UI to match dashboard style and fix layout

Browse Source
This commit is contained in:
anti
2026-04-09 02:00:49 -04:00
parent a3b92d4dd6
commit a2d07bd67c
1 changed files with 64 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
decnet_web/src/components/Bounty.tsx
View File

@@ -65,53 +65,72 @@ const Bounty: React.FC = () => {
const totalPages = Math.ceil(total / limit);
return (
<div className="dashboard-container">
<div className="dashboard-header">
<div className="header-title">
<Archive size={24} className="violet-accent" />
<h1>BOUNTY VAULT</h1>
<div className="dashboard">
{/* Page Header */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<Archive size={32} className="violet-accent" />
<h1 style={{ fontSize: '1.5rem', letterSpacing: '4px' }}>BOUNTY VAULT</h1>
</div>
<div className="header-actions">
<div className="filter-group">
<Filter size={16} className="dim-color" />
<select value={typeFilter} onChange={(e) => setType(e.target.value)}>
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', border: '1px solid var(--border-color)', padding: '4px 12px' }}>
<Filter size={16} className="dim" />
<select
value={typeFilter}
onChange={(e) => setType(e.target.value)}
style={{ background: 'transparent', border: 'none', color: 'inherit', fontSize: '0.8rem', outline: 'none' }}
>
<option value="">ALL TYPES</option>
<option value="credential">CREDENTIALS</option>
<option value="payload">PAYLOADS</option>
</select>
</div>
<form onSubmit={handleSearch} className="query-container">
<Search size={18} className="search-icon" />
<form onSubmit={handleSearch} style={{ display: 'flex', alignItems: 'center', border: '1px solid var(--border-color)', padding: '4px 12px' }}>
<Search size={18} style={{ opacity: 0.5, marginRight: '8px' }} />
<input
type="text"
placeholder="Search bounty..."
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
style={{ background: 'transparent', border: 'none', padding: '4px', fontSize: '0.8rem', width: '200px' }}
/>
</form>
</div>
</div>
<div className="card log-card">
<div className="card-header">
<div className="status-indicator">
<span className="matrix-text">{total} ARTIFACTS CAPTURED</span>
<div className="logs-section">
<div className="section-header" style={{ justifyContent: 'space-between' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<span className="matrix-text" style={{ fontSize: '0.8rem' }}>{total} ARTIFACTS CAPTURED</span>
</div>
<div className="pagination-controls">
<button disabled={page <= 1} onClick={() => setPage(page - 1)} className="icon-btn">
<ChevronLeft size={16} />
</button>
<span className="dim-color">PAGE {page} OF {totalPages || 1}</span>
<button disabled={page >= totalPages} onClick={() => setPage(page + 1)} className="icon-btn">
<ChevronRight size={16} />
</button>
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<span className="dim" style={{ fontSize: '0.8rem' }}>
Page {page} of {totalPages || 1}
</span>
<div style={{ display: 'flex', gap: '8px' }}>
<button
disabled={page <= 1}
onClick={() => setPage(page - 1)}
style={{ padding: '4px', border: '1px solid var(--border-color)', opacity: page <= 1 ? 0.3 : 1 }}
>
<ChevronLeft size={16} />
</button>
<button
disabled={page >= totalPages}
onClick={() => setPage(page + 1)}
style={{ padding: '4px', border: '1px solid var(--border-color)', opacity: page >= totalPages ? 0.3 : 1 }}
>
<ChevronRight size={16} />
</button>
</div>
</div>
</div>
<div className="log-table-container">
<table className="log-table">
<div className="logs-table-container">
<table className="logs-table">
<thead>
<tr>
<th>TIMESTAMP</th>
@@ -123,35 +142,41 @@ const Bounty: React.FC = () => {
</tr>
</thead>
<tbody>
{bounties.map((b) => (
{bounties.length > 0 ? bounties.map((b) => (
<tr key={b.id}>
<td className="dim-color" style={{ whiteSpace: 'nowrap' }}>{b.timestamp}</td>
<td className="dim" style={{ fontSize: '0.75rem', whiteSpace: 'nowrap' }}>{new Date(b.timestamp).toLocaleString()}</td>
<td className="violet-accent">{b.decky}</td>
<td>{b.service}</td>
<td className="matrix-text">{b.attacker_ip}</td>
<td>
<span className={`severity-badge ${b.bounty_type === 'credential' ? 'high' : 'info'}`}>
<span style={{
fontSize: '0.7rem',
padding: '2px 8px',
borderRadius: '4px',
border: `1px solid ${b.bounty_type === 'credential' ? 'var(--text-color)' : 'var(--accent-color)'}`,
backgroundColor: b.bounty_type === 'credential' ? 'rgba(0, 255, 65, 0.1)' : 'rgba(238, 130, 238, 0.1)',
color: b.bounty_type === 'credential' ? 'var(--text-color)' : 'var(--accent-color)'
}}>
{b.bounty_type.toUpperCase()}
</span>
</td>
<td>
<div className="payload-preview">
<div style={{ fontSize: '0.9rem' }}>
{b.bounty_type === 'credential' ? (
<>
<span className="dim-color">user:</span> {b.payload.username}
<span className="dim-color" style={{marginLeft: '10px'}}>pass:</span> {b.payload.password}
</>
<div style={{ display: 'flex', gap: '12px' }}>
<span><span className="dim" style={{ marginRight: '4px' }}>user:</span>{b.payload.username}</span>
<span><span className="dim" style={{ marginRight: '4px' }}>pass:</span>{b.payload.password}</span>
</div>
) : (
JSON.stringify(b.payload)
<span className="dim" style={{ fontSize: '0.8rem' }}>{JSON.stringify(b.payload)}</span>
)}
</div>
</td>
</tr>
))}
{!loading && bounties.length === 0 && (
)) : (
<tr>
<td colSpan={6} style={{ textAlign: 'center', padding: '40px' }} className="dim-color">
THE VAULT IS EMPTY
<td colSpan={6} style={{ textAlign: 'center', padding: '60px', opacity: 0.5, letterSpacing: '4px' }}>
{loading ? 'RETRIEVING ARTIFACTS...' : 'THE VAULT IS EMPTY'}
</td>
</tr>
)}