Fix stats layout
This commit is contained in:
parent
0f720d7c91
commit
00da6cab80
1 changed files with 39 additions and 47 deletions
|
|
@ -86,7 +86,7 @@ export default function StatsBox({
|
|||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
className="flex items-center justify-center px-2 py-1 rounded bg-red-600/20 border border-red-500/50 text-red-400 hover:bg-red-600/40 hover:text-red-300 transition-colors text-sm"
|
||||
className="flex items-center justify-center px-2 py-1 rounded border border-red-500/50 text-red-500 hover:bg-red-800/40 hover:text-red-300 transition-colors text-sm"
|
||||
aria-label="Add actions"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
|
|
@ -112,7 +112,7 @@ export default function StatsBox({
|
|||
onAddMilestone();
|
||||
setIsDropdownOpen(false);
|
||||
}}
|
||||
className="w-full text-left px-4 py-2 text-blue-400 hover:bg-blue-600/20 hover:text-blue-300 transition-colors text-sm font-mono border-b border-red-500/20 last:border-b-0"
|
||||
className="w-full text-left px-4 py-2 text-red-400 hover:bg-red-600/20 hover:text-red-300 transition-colors transition-colors text-sm font-mono border-b border-red-500/20 last:border-b-0"
|
||||
>
|
||||
ADD MILESTONE
|
||||
</button>
|
||||
|
|
@ -123,7 +123,7 @@ export default function StatsBox({
|
|||
onUpdatePrice();
|
||||
setIsDropdownOpen(false);
|
||||
}}
|
||||
className="w-full text-left px-4 py-2 text-green-400 hover:bg-green-600/20 hover:text-green-300 transition-colors text-sm font-mono border-b border-red-500/20 last:border-b-0"
|
||||
className="w-full text-left px-4 py-2 text-red-400 hover:bg-red-600/20 hover:text-red-300 transition-colors transition-colors text-sm font-mono border-b border-red-500/20 last:border-b-0"
|
||||
>
|
||||
UPDATE PRICE
|
||||
</button>
|
||||
|
|
@ -136,7 +136,7 @@ export default function StatsBox({
|
|||
{milestones.length > 1 && (
|
||||
<button
|
||||
onClick={handleCycleMilestone}
|
||||
className="flex items-center justify-center px-2 py-1 rounded bg-blue-600/20 border border-blue-500/50 text-blue-400 hover:bg-blue-600/40 hover:text-blue-300 transition-colors text-sm"
|
||||
className="flex items-center justify-center px-2 py-1 rounded border border-red-500/50 text-red-500 hover:bg-red-800/40 hover:text-red-300 transition-colors text-sm"
|
||||
aria-label="Cycle milestone"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
|
|
@ -146,67 +146,59 @@ export default function StatsBox({
|
|||
</div>
|
||||
|
||||
{/* Milestone Table */}
|
||||
<div className="border-t border-red-500/30 pt-4">
|
||||
<div className="text-red-400/70 text-xs mb-3">MILESTONES</div>
|
||||
<div className="pt-4">
|
||||
<div className="text-red-500 underline font-bold mb-3 font-mono">MILESTONES</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm font-mono">
|
||||
<thead>
|
||||
<tr className="border-b border-red-500/20">
|
||||
<th className="text-left text-red-400/60 text-xs py-2">DESCRIPTION</th>
|
||||
<th className="text-right text-red-400/60 text-xs py-2">SHARES</th>
|
||||
<th className="text-right text-red-400/60 text-xs py-2">SWR 3%</th>
|
||||
<th className="text-right text-red-400/60 text-xs py-2">SWR 4%</th>
|
||||
<tr>
|
||||
<th className="text-left text-red-500 text-xs py-2">DESCRIPTION</th>
|
||||
<th className="text-right text-red-500 text-xs py-2">SHARES</th>
|
||||
<th className="text-right text-red-500 text-xs py-2 pr-4">SWR 3%</th>
|
||||
<th className="text-right text-red-500 text-xs py-2">SWR 4%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* Create combined array with current position and milestones, sorted by target */}
|
||||
{[
|
||||
...milestones.map(m => ({ ...m, isCurrent: false })),
|
||||
{
|
||||
target: stats.totalShares,
|
||||
description: 'CURRENT',
|
||||
created_at: '',
|
||||
isCurrent: true
|
||||
}
|
||||
]
|
||||
.sort((a, b) => a.target - b.target)
|
||||
.map((item, index) => {
|
||||
const swr3 = stats.currentPrice ? item.target * stats.currentPrice * 0.03 : 0;
|
||||
const swr4 = stats.currentPrice ? item.target * stats.currentPrice * 0.04 : 0;
|
||||
{/* Current position row */}
|
||||
<tr className="text-red-500 font-bold">
|
||||
<td className="py-1 pr-4">CURRENT</td>
|
||||
<td className="text-right py-1 pr-4">
|
||||
{Math.floor(stats.totalShares).toLocaleString()}
|
||||
</td>
|
||||
<td className="text-right py-1 pr-4">
|
||||
{stats.currentPrice ? formatCurrency(stats.totalShares * stats.currentPrice * 0.03) : 'N/A'}
|
||||
</td>
|
||||
<td className="text-right py-1">
|
||||
{stats.currentPrice ? formatCurrency(stats.totalShares * stats.currentPrice * 0.04) : 'N/A'}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
// Check if this milestone is the selected one for progress bar
|
||||
const isSelectedMilestone = !item.isCurrent && milestones.findIndex(m =>
|
||||
m.target === item.target && m.description === item.description
|
||||
) === selectedMilestoneIndex;
|
||||
{/* Render milestones after current */}
|
||||
{milestones.map((milestone, index) => {
|
||||
const swr3 = stats.currentPrice ? milestone.target * stats.currentPrice * 0.03 : 0;
|
||||
const swr4 = stats.currentPrice ? milestone.target * stats.currentPrice * 0.04 : 0;
|
||||
|
||||
const isSelectedMilestone = index === selectedMilestoneIndex;
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={index}
|
||||
className={cn(
|
||||
"border-b border-red-500/10",
|
||||
item.isCurrent
|
||||
? "bg-red-500/10 text-red-300"
|
||||
: isSelectedMilestone
|
||||
? "bg-blue-500/10 text-blue-300 border-blue-500/30"
|
||||
: stats.totalShares >= item.target
|
||||
? "text-green-400/80"
|
||||
: "text-red-400/70"
|
||||
isSelectedMilestone
|
||||
? "text-red-500 font-bold"
|
||||
: "bg-red-500 text-black"
|
||||
)}
|
||||
>
|
||||
<td className="py-2 pr-4">
|
||||
{item.isCurrent ? (
|
||||
<span className="font-bold">{item.description}</span>
|
||||
) : (
|
||||
item.description
|
||||
)}
|
||||
<td className="py-1 pr-4">
|
||||
{milestone.description}
|
||||
</td>
|
||||
<td className="text-right py-2 pr-4">
|
||||
{Math.floor(item.target).toLocaleString()}
|
||||
<td className="text-right py-1 pr-4">
|
||||
{Math.floor(milestone.target).toLocaleString()}
|
||||
</td>
|
||||
<td className="text-right py-2 pr-4">
|
||||
<td className="text-right py-1 pr-4">
|
||||
{stats.currentPrice ? formatCurrency(swr3) : 'N/A'}
|
||||
</td>
|
||||
<td className="text-right py-2">
|
||||
<td className="text-right py-1">
|
||||
{stats.currentPrice ? formatCurrency(swr4) : 'N/A'}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Reference in a new issue