feat(growth): add edit/delete, goals, CSV export, and WHO percentile enhancements
- Add PUT and DELETE endpoints for growth records - Add CSV export for pediatrician visits - Add goal tracking with localStorage persistence - Color-coded percentiles (green/yellow/red zones) - Show WHO percentile lines (15th, 50th, 85th) on chart - Growth velocity indicator (kg/month between readings) - Enhanced WHO standards card with actual vs target + goal progress - Better empty state with encouraging prompt - Fix UUID type for growth record IDs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
1628588d5a
commit
318b277e44
3 changed files with 474 additions and 74 deletions
|
|
@ -124,7 +124,7 @@ if (!ownership.success) {
|
|||
|
||||
**AI Integration:**
|
||||
|
||||
- Route: `/api/ai` → LiteLLM at `https://llm.manohargupta.com`
|
||||
- Route: `/api/ai` → LiteLLM (set via `LITELLM_BASE_URL` env var)
|
||||
- Model: `minimax-2.7`
|
||||
- See `/docs/debugging.md` for troubleshooting
|
||||
|
||||
|
|
@ -235,8 +235,8 @@ Required:
|
|||
|
||||
- `DATABASE_URL` - PostgreSQL connection (as `tia_app` role after H2.1)
|
||||
- `DATABASE_URL_SUPERUSER` - Superuser connection (for migrations only)
|
||||
- `LITELLM_URL` - AI gateway URL
|
||||
- `LITELLM_KEY` - AI API key
|
||||
- `LITELLM_BASE_URL` - AI gateway URL (e.g., https://llm.manohargupta.com)
|
||||
- `LITELLM_API_KEY` - AI API key
|
||||
- `R2_ACCOUNT_ID` - Cloudflare R2 account ID
|
||||
- `R2_ACCESS_KEY_ID` - R2 access key
|
||||
- `R2_SECRET_ACCESS_KEY` - R2 secret key
|
||||
|
|
|
|||
|
|
@ -89,4 +89,79 @@ export async function GET(request: Request) {
|
|||
console.error(error);
|
||||
return NextResponse.json({ error: String(error) }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function PUT(request: Request) {
|
||||
const auth = await requireFamily();
|
||||
if (!auth.success) {
|
||||
return NextResponse.json({ error: auth.error }, { status: auth.status });
|
||||
}
|
||||
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { id, measuredAt, weightKg, heightCm, headCircumferenceCm, notes } = body;
|
||||
|
||||
if (!id) {
|
||||
return NextResponse.json({ error: "id required" }, { status: 400 });
|
||||
}
|
||||
|
||||
// Verify the growth record belongs to a child in user's family
|
||||
const existing = await sql.unsafe(
|
||||
`SELECT g.child_id FROM growth g
|
||||
JOIN children c ON g.child_id = c.id
|
||||
JOIN family_members fm ON c.family_id = fm.family_id
|
||||
WHERE g.id = $1 AND fm.user_id = (SELECT user_id FROM sessions WHERE session_token = $2 LIMIT 1)`,
|
||||
[id, request.headers.get("cookie")?.match(/tia_session=([^;]+)/)?.[1]]
|
||||
);
|
||||
|
||||
if (!existing || existing.length === 0) {
|
||||
return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
await sql.unsafe(
|
||||
`UPDATE growth SET measured_at = $1, weight_kg = $2, height_cm = $3, head_circumference_cm = $4, notes = $5 WHERE id = $6`,
|
||||
[measuredAt ? new Date(measuredAt) : null, weightKg ?? null, heightCm ?? null, headCircumferenceCm ?? null, notes ?? null, id]
|
||||
);
|
||||
|
||||
return NextResponse.json({ success: true });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return NextResponse.json({ error: String(error) }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(request: Request) {
|
||||
const auth = await requireFamily();
|
||||
if (!auth.success) {
|
||||
return NextResponse.json({ error: auth.error }, { status: auth.status });
|
||||
}
|
||||
|
||||
const { searchParams } = new URL(request.url);
|
||||
const id = searchParams.get("id");
|
||||
|
||||
if (!id) {
|
||||
return NextResponse.json({ error: "id required" }, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
// Verify the growth record belongs to a child in user's family
|
||||
const sessionToken = request.headers.get("cookie")?.match(/tia_session=([^;]+)/)?.[1] || "";
|
||||
const existing = await sql.unsafe(
|
||||
`SELECT g.child_id FROM growth g
|
||||
JOIN children c ON g.child_id = c.id
|
||||
JOIN family_members fm ON c.family_id = fm.family_id
|
||||
WHERE g.id = $1 AND fm.user_id = (SELECT user_id FROM sessions WHERE session_token = $2 LIMIT 1)`,
|
||||
[id, sessionToken]
|
||||
);
|
||||
|
||||
if (!existing || existing.length === 0) {
|
||||
return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
await sql.unsafe(`DELETE FROM growth WHERE id = $1`, [id]);
|
||||
return NextResponse.json({ success: true });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return NextResponse.json({ error: String(error) }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useFamily } from "../FamilyProvider";
|
||||
import { WHO_BOY_WEIGHT, WHO_GIRL_WEIGHT, getAgeInMonthsFromBirth, getPercentile } from "@/lib/growth-standards";
|
||||
import { WHO_BOY_WEIGHT, WHO_GIRL_WEIGHT, getAgeInMonthsFromBirth, getPercentile, type GrowthStandard } from "@/lib/growth-standards";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
|
|
@ -15,6 +15,7 @@ import {
|
|||
Filler,
|
||||
} from "chart.js";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import { useTheme } from "../ThemeProvider";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
|
|
@ -27,18 +28,67 @@ ChartJS.register(
|
|||
Filler
|
||||
);
|
||||
|
||||
interface GrowthRecord {
|
||||
id: string;
|
||||
child_id: string;
|
||||
measured_at: string;
|
||||
weight_kg: number | null;
|
||||
height_cm: number | null;
|
||||
head_circumference_cm: number | null;
|
||||
notes: string | null;
|
||||
}
|
||||
|
||||
interface Goal {
|
||||
weightKg?: number;
|
||||
heightCm?: number;
|
||||
targetDate?: string;
|
||||
}
|
||||
|
||||
export default function GrowthPage() {
|
||||
const { childId, child, familyId } = useFamily();
|
||||
const [growthData, setGrowthData] = useState<any[]>([]);
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
|
||||
const [growthData, setGrowthData] = useState<GrowthRecord[]>([]);
|
||||
const [whoStandard, setWhoStandard] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showAdd, setShowAdd] = useState(false);
|
||||
const [showGoals, setShowGoals] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
|
||||
// Form state
|
||||
const [weight, setWeight] = useState("");
|
||||
const [height, setHeight] = useState("");
|
||||
const [headCircumference, setHeadCircumference] = useState("");
|
||||
const [measuredAt, setMeasuredAt] = useState(new Date().toISOString().split("T")[0]);
|
||||
|
||||
// Chart state
|
||||
const [chartMetric, setChartMetric] = useState<"weight" | "height" | "head">("weight");
|
||||
|
||||
// Goals state
|
||||
const [goal, setGoal] = useState<Goal>({});
|
||||
|
||||
// Saved goals from localStorage
|
||||
const [savedGoals, setSavedGoals] = useState<Goal>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (!childId) return;
|
||||
fetchGrowthData();
|
||||
}, [childId]);
|
||||
|
||||
useEffect(() => {
|
||||
// Load saved goals for this child
|
||||
if (childId) {
|
||||
const saved = localStorage.getItem(`tia_growth_goal_${childId}`);
|
||||
if (saved) {
|
||||
const parsed = JSON.parse(saved);
|
||||
setSavedGoals(parsed);
|
||||
setGoal(parsed);
|
||||
}
|
||||
}
|
||||
}, [childId]);
|
||||
|
||||
const fetchGrowthData = () => {
|
||||
if (!childId) return;
|
||||
fetch(`/api/growth?childId=${childId}`)
|
||||
.then(r => r.json())
|
||||
|
|
@ -48,7 +98,7 @@ export default function GrowthPage() {
|
|||
setLoading(false);
|
||||
})
|
||||
.catch(() => setLoading(false));
|
||||
}, [childId]);
|
||||
};
|
||||
|
||||
const handleAdd = async () => {
|
||||
if (!childId || (!weight && !height && !headCircumference)) return;
|
||||
|
|
@ -57,23 +107,83 @@ export default function GrowthPage() {
|
|||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
childId,
|
||||
measuredAt: new Date().toISOString(),
|
||||
measuredAt: new Date(measuredAt).toISOString(),
|
||||
weightKg: weight ? parseFloat(weight) : null,
|
||||
heightCm: height ? parseFloat(height) : null,
|
||||
headCircumferenceCm: headCircumference ? parseFloat(headCircumference) : null,
|
||||
}),
|
||||
});
|
||||
resetForm();
|
||||
fetchGrowthData();
|
||||
};
|
||||
|
||||
const handleEdit = async (id: string) => {
|
||||
await fetch("/api/growth", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
id,
|
||||
measuredAt: new Date(measuredAt).toISOString(),
|
||||
weightKg: weight ? parseFloat(weight) : null,
|
||||
heightCm: height ? parseFloat(height) : null,
|
||||
headCircumferenceCm: headCircumference ? parseFloat(headCircumference) : null,
|
||||
}),
|
||||
});
|
||||
setEditingId(null);
|
||||
resetForm();
|
||||
fetchGrowthData();
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm("Delete this record?")) return;
|
||||
await fetch(`/api/growth?id=${id}`, { method: "DELETE" });
|
||||
fetchGrowthData();
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setShowAdd(false);
|
||||
setEditingId(null);
|
||||
setWeight("");
|
||||
setHeight("");
|
||||
setHeadCircumference("");
|
||||
// Refresh data
|
||||
fetch(`/api/growth?childId=${childId}`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
setGrowthData(data.growth || []);
|
||||
setWhoStandard(data.whoStandard);
|
||||
});
|
||||
setMeasuredAt(new Date().toISOString().split("T")[0]);
|
||||
};
|
||||
|
||||
const startEdit = (record: GrowthRecord) => {
|
||||
setEditingId(record.id);
|
||||
setShowAdd(true);
|
||||
setWeight(record.weight_kg?.toString() || "");
|
||||
setHeight(record.height_cm?.toString() || "");
|
||||
setHeadCircumference(record.head_circumference_cm?.toString() || "");
|
||||
setMeasuredAt(new Date(record.measured_at).toISOString().split("T")[0]);
|
||||
};
|
||||
|
||||
const saveGoal = () => {
|
||||
if (!childId) return;
|
||||
localStorage.setItem(`tia_growth_goal_${childId}`, JSON.stringify(goal));
|
||||
setSavedGoals(goal);
|
||||
setShowGoals(false);
|
||||
};
|
||||
|
||||
const exportCSV = () => {
|
||||
if (growthData.length === 0) return;
|
||||
|
||||
const headers = ["Date", "Weight (kg)", "Height (cm)", "Head (cm)", "Notes"];
|
||||
const rows = growthData.map(r => [
|
||||
new Date(r.measured_at).toLocaleDateString(),
|
||||
r.weight_kg || "",
|
||||
r.height_cm || "",
|
||||
r.head_circumference_cm || "",
|
||||
r.notes || ""
|
||||
]);
|
||||
|
||||
const csv = [headers, ...rows].map(row => row.join(",")).join("\n");
|
||||
const blob = new Blob([csv], { type: "text/csv" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `${child?.name || "child"}_growth_${new Date().toISOString().split("T")[0]}.csv`;
|
||||
a.click();
|
||||
};
|
||||
|
||||
// Get latest measurement
|
||||
|
|
@ -84,6 +194,14 @@ export default function GrowthPage() {
|
|||
const standards = child?.sex === "male" ? WHO_BOY_WEIGHT : WHO_GIRL_WEIGHT;
|
||||
const standard = standards.find(s => s.ageMonths === Math.min(ageMonths, 24)) || standards[standards.length - 1];
|
||||
|
||||
// Get percentile color
|
||||
const getPercentileColor = (p: string | null): string => {
|
||||
if (!p) return "text-gray-500";
|
||||
if (p.includes("Below") || p.includes("3rd")) return "text-red-500";
|
||||
if (p.includes("85th") || p.includes("97th")) return "text-amber-500";
|
||||
return "text-green-600";
|
||||
};
|
||||
|
||||
// Calculate percentile for latest reading
|
||||
const weightPercentile = latest?.weight_kg && whoStandard ?
|
||||
getPercentile(latest.weight_kg, whoStandard.weight.p3, whoStandard.weight.p15, whoStandard.weight.p50, whoStandard.weight.p85, whoStandard.weight.p97) : null;
|
||||
|
|
@ -92,6 +210,20 @@ export default function GrowthPage() {
|
|||
const headPercentile = latest?.head_circumference_cm && whoStandard ?
|
||||
getPercentile(latest.head_circumference_cm, whoStandard.headCircumference.p3, whoStandard.headCircumference.p15, whoStandard.headCircumference.p50, whoStandard.headCircumference.p85, whoStandard.headCircumference.p97) : null;
|
||||
|
||||
// Calculate growth velocity (change between last two readings)
|
||||
const velocity = (() => {
|
||||
if (growthData.length < 2) return null;
|
||||
const current = growthData[0];
|
||||
const previous = growthData[1];
|
||||
const daysDiff = (new Date(current.measured_at).getTime() - new Date(previous.measured_at).getTime()) / (1000 * 60 * 60 * 24);
|
||||
|
||||
if (!current.weight_kg || !previous.weight_kg || daysDiff < 1) return null;
|
||||
const weightChange = current.weight_kg - previous.weight_kg;
|
||||
const monthsDiff = daysDiff / 30;
|
||||
const monthlyGain = weightChange / monthsDiff;
|
||||
return { weight: monthlyGain.toFixed(2), direction: monthlyGain > 0 ? "up" : "down" };
|
||||
})();
|
||||
|
||||
// Prepare chart data
|
||||
const chartData = (() => {
|
||||
if (growthData.length === 0 || !child?.birthDate) return null;
|
||||
|
|
@ -103,7 +235,6 @@ export default function GrowthPage() {
|
|||
const sorted = [...growthData].reverse();
|
||||
|
||||
const labels = sorted.map(r => {
|
||||
const age = getAgeInMonthsFromBirth(child.birthDate);
|
||||
const measured = new Date(r.measured_at);
|
||||
const birth = new Date(child.birthDate);
|
||||
const months = Math.floor((measured.getTime() - birth.getTime()) / (1000 * 60 * 60 * 24 * 30));
|
||||
|
|
@ -122,17 +253,42 @@ export default function GrowthPage() {
|
|||
backgroundColor: "rgba(251, 113, 133, 0.1)",
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 6,
|
||||
pointBackgroundColor: "#fb7185",
|
||||
},
|
||||
// WHO 85th percentile
|
||||
{
|
||||
label: "WHO 50th",
|
||||
label: "85th",
|
||||
data: labels.map(() => whoStandard?.[whoKey]?.p85),
|
||||
borderColor: "#fbbf24",
|
||||
borderDash: [5, 5],
|
||||
fill: false,
|
||||
pointRadius: 0,
|
||||
tension: 0.4,
|
||||
},
|
||||
// WHO 50th percentile
|
||||
{
|
||||
label: "50th",
|
||||
data: labels.map(() => whoStandard?.[whoKey]?.p50),
|
||||
borderColor: "#22c55e",
|
||||
borderDash: [5, 5],
|
||||
fill: false,
|
||||
pointRadius: 0,
|
||||
tension: 0.4,
|
||||
},
|
||||
// WHO 15th percentile
|
||||
{
|
||||
label: "WHO 3rd-97th",
|
||||
label: "15th",
|
||||
data: labels.map(() => whoStandard?.[whoKey]?.p15),
|
||||
borderColor: "#fbbf24",
|
||||
borderDash: [5, 5],
|
||||
fill: false,
|
||||
pointRadius: 0,
|
||||
tension: 0.4,
|
||||
},
|
||||
// WHO 3rd-97th band
|
||||
{
|
||||
label: "3rd-97th",
|
||||
data: labels.map(() => [whoStandard?.[whoKey]?.p3, whoStandard?.[whoKey]?.p97]),
|
||||
borderColor: "transparent",
|
||||
backgroundColor: "rgba(34, 197, 94, 0.1)",
|
||||
|
|
@ -146,11 +302,13 @@ export default function GrowthPage() {
|
|||
const chartOptions = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: { display: true, position: "top" as const },
|
||||
legend: { display: true, position: "top" as const, labels: { boxWidth: 10 } },
|
||||
title: { display: false },
|
||||
},
|
||||
scales: {
|
||||
y: { title: { display: true, text: chartMetric === "weight" ? "Weight (kg)" : "cm" } },
|
||||
y: {
|
||||
title: { display: true, text: chartMetric === "weight" ? "Weight (kg)" : "cm" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -159,41 +317,140 @@ export default function GrowthPage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
|
||||
<div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800 pb-20">
|
||||
<div className="p-4 flex justify-between items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<a href="/menu" className="p-2">←</a>
|
||||
<h1 className="text-xl font-bold">Growth 📈</h1>
|
||||
</div>
|
||||
<button onClick={() => setShowAdd(!showAdd)} className="p-2 bg-rose-400 text-white rounded-lg">
|
||||
+ Add
|
||||
</button>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={exportCSV} className="p-2 text-sm bg-gray-200 dark:bg-gray-700 rounded-lg" title="Export CSV">
|
||||
📥
|
||||
</button>
|
||||
<button onClick={() => setShowGoals(!showGoals)} className="p-2 text-sm bg-gray-200 dark:bg-gray-700 rounded-lg" title="Set goals">
|
||||
🎯
|
||||
</button>
|
||||
<button onClick={() => { setShowAdd(!showAdd); setEditingId(null); resetForm(); }} className="p-2 bg-rose-400 text-white rounded-lg">
|
||||
+ Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Benchmark Card */}
|
||||
{/* Goals Card */}
|
||||
{showGoals && (
|
||||
<div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl">
|
||||
<h3 className="font-semibold mb-3">Set Growth Goals</h3>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-sm text-gray-500">Target Weight (kg)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
placeholder="e.g., 10"
|
||||
value={goal.weightKg || ""}
|
||||
onChange={e => setGoal({ ...goal, weightKg: parseFloat(e.target.value) || undefined })}
|
||||
className="w-full p-2 border rounded-lg dark:bg-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-gray-500">Target Height (cm)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
placeholder="e.g., 80"
|
||||
value={goal.heightCm || ""}
|
||||
onChange={e => setGoal({ ...goal, heightCm: parseFloat(e.target.value) || undefined })}
|
||||
className="w-full p-2 border rounded-lg dark:bg-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={saveGoal} className="flex-1 p-2 bg-rose-400 text-white rounded-lg">
|
||||
Save Goal
|
||||
</button>
|
||||
<button onClick={() => setShowGoals(false)} className="flex-1 p-2 bg-gray-200 dark:bg-gray-700 rounded-lg">
|
||||
Cancel
|
||||
</button>
|
||||
</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">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<div className="font-medium">{child.name}</div>
|
||||
<div className="text-sm text-gray-500">{ageMonths} months old</div>
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<div>
|
||||
<div className="font-semibold text-lg">{child.name}</div>
|
||||
<div className="text-sm text-gray-500">{ageMonths} months old</div>
|
||||
</div>
|
||||
{savedGoals.weightKg && (
|
||||
<div className="text-right text-sm">
|
||||
<div className="text-gray-500">Goal</div>
|
||||
<div className="font-medium text-rose-500">{savedGoals.weightKg}kg</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Color-coded percentile zones legend */}
|
||||
<div className="flex gap-2 mb-3 text-xs">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-3 h-3 rounded-full bg-green-500"></span>
|
||||
Normal (15th-85th)
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-3 h-3 rounded-full bg-amber-500"></span>
|
||||
Watch (<15th or >85th)
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-3 h-3 rounded-full bg-red-500"></span>
|
||||
Alert (<3rd or >97th)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<div className="text-gray-500 mb-1">Weight (50th %)</div>
|
||||
<div className={`p-2 rounded-lg ${latest?.weight_kg && latest.weight_kg < standard.weight.p3 ? "bg-red-100 dark:bg-red-900" : latest?.weight_kg && latest.weight_kg > standard.weight.p85 ? "bg-amber-100 dark:bg-amber-900" : "bg-green-100 dark:bg-green-900"}`}>
|
||||
<div className="text-gray-500 mb-1">Weight</div>
|
||||
<div className="font-medium text-lg">{standard.weight.p50} kg</div>
|
||||
<div className="text-xs text-gray-400">Range: {standard.weight.p3}-{standard.weight.p97}</div>
|
||||
<div className="text-xs text-gray-400">Target: {standard.weight.p3}-{standard.weight.p97}</div>
|
||||
{latest?.weight_kg && (
|
||||
<div className={`font-medium mt-1 ${getPercentileColor(weightPercentile)}`}>
|
||||
Actual: {latest.weight_kg}kg ({weightPercentile})
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-gray-500 mb-1">Height (50th %)</div>
|
||||
<div className={`p-2 rounded-lg ${latest?.height_cm && latest.height_cm < standard.height.p3 ? "bg-red-100 dark:bg-red-900" : latest?.height_cm && latest.height_cm > standard.height.p85 ? "bg-amber-100 dark:bg-amber-900" : "bg-green-100 dark:bg-green-900"}`}>
|
||||
<div className="text-gray-500 mb-1">Height</div>
|
||||
<div className="font-medium text-lg">{standard.height.p50} cm</div>
|
||||
<div className="text-xs text-gray-400">Range: {standard.height.p3}-{standard.height.p97}</div>
|
||||
<div className="text-xs text-gray-400">Target: {standard.height.p3}-{standard.height.p97}</div>
|
||||
{latest?.height_cm && (
|
||||
<div className={`font-medium mt-1 ${getPercentileColor(heightPercentile)}`}>
|
||||
Actual: {latest.height_cm}cm ({heightPercentile})
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-gray-500 mb-1">Head (50th %)</div>
|
||||
<div className={`p-2 rounded-lg ${latest?.head_circumference_cm && latest.head_circumference_cm < standard.headCircumference.p3 ? "bg-red-100 dark:bg-red-900" : latest?.head_circumference_cm && latest.head_circumference_cm > standard.headCircumference.p85 ? "bg-amber-100 dark:bg-amber-900" : "bg-green-100 dark:bg-green-900"}`}>
|
||||
<div className="text-gray-500 mb-1">Head</div>
|
||||
<div className="font-medium text-lg">{standard.headCircumference.p50} cm</div>
|
||||
<div className="text-xs text-gray-400">Range: {standard.headCircumference.p3}-{standard.headCircumference.p97}</div>
|
||||
<div className="text-xs text-gray-400">Target: {standard.headCircumference.p3}-{standard.headCircumference.p97}</div>
|
||||
{latest?.head_circumference_cm && (
|
||||
<div className={`font-medium mt-1 ${getPercentileColor(headPercentile)}`}>
|
||||
Actual: {latest.head_circumference_cm}cm ({headPercentile})
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Growth velocity indicator */}
|
||||
{velocity && (
|
||||
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="text-gray-500">Growth velocity:</span>
|
||||
<span className={`font-medium ${velocity.direction === "up" ? "text-green-600" : "text-amber-600"}`}>
|
||||
{velocity.weight} kg/month {velocity.direction === "up" ? "↑" : "↓"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -205,19 +462,19 @@ export default function GrowthPage() {
|
|||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => setChartMetric("weight")}
|
||||
className={`px-2 py-1 text-xs rounded ${chartMetric === "weight" ? "bg-rose-400 text-white" : "bg-gray-100"}`}
|
||||
className={`px-3 py-1 text-xs rounded ${chartMetric === "weight" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`}
|
||||
>
|
||||
Weight
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setChartMetric("height")}
|
||||
className={`px-2 py-1 text-xs rounded ${chartMetric === "height" ? "bg-rose-400 text-white" : "bg-gray-100"}`}
|
||||
className={`px-3 py-1 text-xs rounded ${chartMetric === "height" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`}
|
||||
>
|
||||
Height
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setChartMetric("head")}
|
||||
className={`px-2 py-1 text-xs rounded ${chartMetric === "head" ? "bg-rose-400 text-white" : "bg-gray-100"}`}
|
||||
className={`px-3 py-1 text-xs rounded ${chartMetric === "head" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`}
|
||||
>
|
||||
Head
|
||||
</button>
|
||||
|
|
@ -227,11 +484,16 @@ export default function GrowthPage() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Latest Reading with Percentile */}
|
||||
{/* 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-500 mb-2">
|
||||
<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 && (
|
||||
|
|
@ -239,8 +501,13 @@ export default function GrowthPage() {
|
|||
<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 ${weightPercentile === "Below 3rd" ? "text-red-500" : "text-green-600"}`}>
|
||||
<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>
|
||||
|
|
@ -250,8 +517,13 @@ export default function GrowthPage() {
|
|||
<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 ${heightPercentile === "Below 3rd" ? "text-red-500" : "text-green-600"}`}>
|
||||
<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>
|
||||
|
|
@ -261,7 +533,7 @@ export default function GrowthPage() {
|
|||
<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 ${headPercentile === "Below 3rd" ? "text-red-500" : "text-green-600"}`}>
|
||||
<div className={`text-xs font-medium ${getPercentileColor(headPercentile)}`}>
|
||||
{headPercentile} percentile
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -271,15 +543,23 @@ export default function GrowthPage() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Add/Edit Form */}
|
||||
{showAdd && (
|
||||
<div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl space-y-2">
|
||||
<div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl space-y-3">
|
||||
<h3 className="font-semibold">{editingId ? "Edit Record" : "Add New Measurement"}</h3>
|
||||
<input
|
||||
type="date"
|
||||
value={measuredAt}
|
||||
onChange={e => setMeasuredAt(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl dark:bg-gray-700"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Weight (kg)"
|
||||
value={weight}
|
||||
onChange={e => setWeight(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl"
|
||||
className="w-full p-3 border rounded-xl dark:bg-gray-700"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
|
|
@ -287,7 +567,7 @@ export default function GrowthPage() {
|
|||
placeholder="Height (cm)"
|
||||
value={height}
|
||||
onChange={e => setHeight(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl"
|
||||
className="w-full p-3 border rounded-xl dark:bg-gray-700"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
|
|
@ -295,40 +575,85 @@ export default function GrowthPage() {
|
|||
placeholder="Head circumference (cm)"
|
||||
value={headCircumference}
|
||||
onChange={e => setHeadCircumference(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl"
|
||||
className="w-full p-3 border rounded-xl dark:bg-gray-700"
|
||||
/>
|
||||
<button onClick={handleAdd} className="w-full p-3 bg-rose-400 text-white rounded-xl">
|
||||
Save
|
||||
</button>
|
||||
<div className="flex gap-2">
|
||||
{editingId ? (
|
||||
<>
|
||||
<button onClick={() => handleEdit(editingId)} className="flex-1 p-3 bg-rose-400 text-white rounded-xl">
|
||||
Update
|
||||
</button>
|
||||
<button onClick={resetForm} className="flex-1 p-3 bg-gray-200 dark:bg-gray-700 rounded-xl">
|
||||
Cancel
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button onClick={handleAdd} className="w-full p-3 bg-rose-400 text-white rounded-xl">
|
||||
Save
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="px-4 space-y-2">
|
||||
{loading ? (
|
||||
<p className="text-gray-500">Loading...</p>
|
||||
) : growthData.length === 0 ? (
|
||||
<p className="text-gray-500">No growth records yet</p>
|
||||
) : (
|
||||
growthData.map((record: any, i: number) => (
|
||||
<div key={i} className="p-4 bg-white dark:bg-gray-800 rounded-xl">
|
||||
<div className="text-sm text-gray-500">
|
||||
{new Date(record.measured_at).toLocaleDateString()}
|
||||
{/* Empty State */}
|
||||
{loading ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
) : growthData.length === 0 ? (
|
||||
<div className="mx-4 p-8 bg-white dark:bg-gray-800 rounded-xl text-center">
|
||||
<div className="text-4xl mb-4">📏</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Track {child?.name}'s Growth</h3>
|
||||
<p className="text-gray-500 mb-4">
|
||||
Start logging weight, height, and head measurements to see how {child?.name} is growing compared to WHO standards.
|
||||
</p>
|
||||
<button onClick={() => setShowAdd(true)} className="p-3 bg-rose-400 text-white rounded-xl">
|
||||
Add First Measurement
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
/* History List */
|
||||
<div className="px-4 space-y-2">
|
||||
<h3 className="font-semibold mb-2">History</h3>
|
||||
{growthData.map((record: any, i: number) => (
|
||||
<div key={i} className="p-4 bg-white dark:bg-gray-800 rounded-xl flex justify-between items-center">
|
||||
<div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{new Date(record.measured_at).toLocaleDateString()}
|
||||
</div>
|
||||
<div className="flex gap-4 mt-1">
|
||||
{record.weight_kg && (
|
||||
<div>⚖️ {record.weight_kg} kg</div>
|
||||
)}
|
||||
{record.height_cm && (
|
||||
<div>📏 {record.height_cm} cm</div>
|
||||
)}
|
||||
{record.head_circumference_cm && (
|
||||
<div>⭕ {record.head_circumference_cm} cm</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 mt-2">
|
||||
{record.weight_kg && (
|
||||
<div>⚖️ {record.weight_kg} kg</div>
|
||||
)}
|
||||
{record.height_cm && (
|
||||
<div>📏 {record.height_cm} cm</div>
|
||||
)}
|
||||
{record.head_circumference_cm && (
|
||||
<div>⭕ {record.head_circumference_cm} cm</div>
|
||||
)}
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => startEdit(record)}
|
||||
className="p-2 text-sm text-gray-500 hover:text-rose-500"
|
||||
title="Edit"
|
||||
>
|
||||
✏️
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(record.id)}
|
||||
className="p-2 text-sm text-gray-500 hover:text-red-500"
|
||||
title="Delete"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue