From a2d07bd67cea9ac4ccab893f168ef8887c3344bc Mon Sep 17 00:00:00 2001
From: anti <samuel@securejump.cl>
Date: Thu, 9 Apr 2026 02:00:49 -0400
Subject: [PATCH] fix: refactor Bounty UI to match dashboard style and fix
 layout

---
 decnet_web/src/components/Bounty.tsx | 103 +++++++++++++++++----------
 1 file changed, 64 insertions(+), 39 deletions(-)

diff --git a/decnet_web/src/components/Bounty.tsx b/decnet_web/src/components/Bounty.tsx
index 23a3bd2..29c11c9 100644
--- a/decnet_web/src/components/Bounty.tsx
+++ b/decnet_web/src/components/Bounty.tsx
@@ -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>
               )}