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