fix(growth): move latest card to top, remove duplicate
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
dcb510964e
commit
0ea81b329a
1 changed files with 59 additions and 59 deletions
|
|
@ -406,6 +406,65 @@ export default function GrowthPage() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Latest Reading Card */}
|
||||
{latest && (
|
||||
<div className="mx-4 mb-4 p-4 bg-rose-100 dark:bg-rose-900 rounded-xl">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-300 mb-2">
|
||||
Latest: {new Date(latest.measured_at).toLocaleDateString()}
|
||||
{velocity && (
|
||||
<span className="ml-2 text-green-600">
|
||||
({velocity.weight}kg/mo {velocity.direction === "up" ? "↑" : "↓"})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
{latest.weight_kg && (
|
||||
<div>
|
||||
<div className="text-gray-500 text-xs">Weight</div>
|
||||
<div className="text-xl font-bold">{latest.weight_kg} kg</div>
|
||||
{weightPercentile && (
|
||||
<div className={`text-xs font-medium ${getPercentileColor(weightPercentile)}`}>
|
||||
{weightPercentile} percentile
|
||||
{savedGoals.weightKg && (
|
||||
<span className="ml-1">
|
||||
→ {((latest.weight_kg / savedGoals.weightKg) * 100).toFixed(0)}% of goal
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{latest.height_cm && (
|
||||
<div>
|
||||
<div className="text-gray-500 text-xs">Height</div>
|
||||
<div className="text-xl font-bold">{latest.height_cm} cm</div>
|
||||
{heightPercentile && (
|
||||
<div className={`text-xs font-medium ${getPercentileColor(heightPercentile)}`}>
|
||||
{heightPercentile} percentile
|
||||
{savedGoals.heightCm && (
|
||||
<span className="ml-1">
|
||||
→ {((latest.height_cm / savedGoals.heightCm) * 100).toFixed(0)}% of goal
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{latest.head_circumference_cm && (
|
||||
<div>
|
||||
<div className="text-gray-500 text-xs">Head</div>
|
||||
<div className="text-xl font-bold">{latest.head_circumference_cm} cm</div>
|
||||
{headPercentile && (
|
||||
<div className={`text-xs font-medium ${getPercentileColor(headPercentile)}`}>
|
||||
{headPercentile} percentile
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* WHO Standards Card - Enhanced with age-wise targets */}
|
||||
{child && standard && (
|
||||
<div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl">
|
||||
|
|
@ -515,65 +574,6 @@ export default function GrowthPage() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Latest Reading Card */}
|
||||
{latest && (
|
||||
<div className="mx-4 mb-4 p-4 bg-rose-100 dark:bg-rose-900 rounded-xl">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-300 mb-2">
|
||||
Latest: {new Date(latest.measured_at).toLocaleDateString()}
|
||||
{velocity && (
|
||||
<span className="ml-2 text-green-600">
|
||||
({velocity.weight}kg/mo {velocity.direction === "up" ? "↑" : "↓"})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
{latest.weight_kg && (
|
||||
<div>
|
||||
<div className="text-gray-500 text-xs">Weight</div>
|
||||
<div className="text-xl font-bold">{latest.weight_kg} kg</div>
|
||||
{weightPercentile && (
|
||||
<div className={`text-xs font-medium ${getPercentileColor(weightPercentile)}`}>
|
||||
{weightPercentile} percentile
|
||||
{savedGoals.weightKg && (
|
||||
<span className="ml-1">
|
||||
→ {((latest.weight_kg / savedGoals.weightKg) * 100).toFixed(0)}% of goal
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{latest.height_cm && (
|
||||
<div>
|
||||
<div className="text-gray-500 text-xs">Height</div>
|
||||
<div className="text-xl font-bold">{latest.height_cm} cm</div>
|
||||
{heightPercentile && (
|
||||
<div className={`text-xs font-medium ${getPercentileColor(heightPercentile)}`}>
|
||||
{heightPercentile} percentile
|
||||
{savedGoals.heightCm && (
|
||||
<span className="ml-1">
|
||||
→ {((latest.height_cm / savedGoals.heightCm) * 100).toFixed(0)}% of goal
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{latest.head_circumference_cm && (
|
||||
<div>
|
||||
<div className="text-gray-500 text-xs">Head</div>
|
||||
<div className="text-xl font-bold">{latest.head_circumference_cm} cm</div>
|
||||
{headPercentile && (
|
||||
<div className={`text-xs font-medium ${getPercentileColor(headPercentile)}`}>
|
||||
{headPercentile} percentile
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add/Edit Form */}
|
||||
{showAdd && (
|
||||
<div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl space-y-3">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue