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

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

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