From f2c506ec16d4fde8bd937f4a8ba5360f28cb3e7e Mon Sep 17 00:00:00 2001
From: blaisadmin <corey@blaishome.online>
Date: Wed, 20 May 2026 17:38:16 -0400
Subject: [PATCH] Updated bird profile view

---
 frontend/src/App.tsx   | 61 +++++++++++++++++++++++++++++++-----------
 frontend/src/index.css | 11 ++++++++
 2 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3fa7e43..9330ce9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1500,6 +1500,7 @@ function App() {
 
   const hasSelectedBirdLine = selectedBirdChart.points.length >= 2 && selectedBirdChart.path.length > 0;
   const hasSelectedBirdHistoricalLine = selectedBirdChart.historicalPoints.length >= 2 && selectedBirdChart.historicalPath.length > 0;
+  const selectedBirdLatestChartPoint = selectedBirdChart.points[selectedBirdChart.points.length - 1] ?? null;
 
   const flockWeeklyTrendItems = useMemo(() => {
     return birds
@@ -4281,18 +4282,6 @@ function App() {
                     <span>Species</span>
                     <strong>{selectedBird.species}</strong>
                   </article>
-                  <article className="detail-card">
-                    <span>Favorite snack</span>
-                    <strong>{selectedBird.favoriteSnack || 'Not recorded'}</strong>
-                  </article>
-                  <article className="detail-card">
-                    <span>Motivators</span>
-                    <strong>{selectedBird.motivators || 'Not recorded'}</strong>
-                  </article>
-                  <article className="detail-card">
-                    <span>Demotivates</span>
-                    <strong>{selectedBird.demotivators || 'Not recorded'}</strong>
-                  </article>
                   <article className="detail-card">
                     <span>Gender</span>
                     <strong className="detail-gender">
@@ -4303,8 +4292,16 @@ function App() {
                     </strong>
                   </article>
                   <article className="detail-card">
-                    <span>Latest weight</span>
-                    <strong>{formatWeight(selectedBird.latestWeightGrams)}</strong>
+                    <span>Favorite snack</span>
+                    <strong>{selectedBird.favoriteSnack || 'Not recorded'}</strong>
+                  </article>
+                  <article className="detail-card">
+                    <span>Motivators</span>
+                    <strong>{selectedBird.motivators || 'Not recorded'}</strong>
+                  </article>
+                  <article className="detail-card">
+                    <span>Demotivators</span>
+                    <strong>{selectedBird.demotivators || 'Not recorded'}</strong>
                   </article>
                 </div>
 
@@ -4315,7 +4312,10 @@ function App() {
                         <p className="eyebrow">Weight</p>
                         <h2>Trend and log</h2>
                       </div>
-                      <p className="muted">Latest reading: {formatShortDate(selectedBird.latestRecordedOn)}</p>
+                      <p className="muted">
+                        Latest: {formatWeight(selectedBird.latestWeightGrams)}
+                        {selectedBird.latestRecordedOn ? ` on ${formatShortDate(selectedBird.latestRecordedOn)}` : ''}
+                      </p>
                     </div>
                     <div className="chart-card">
                       <svg
@@ -4417,6 +4417,37 @@ function App() {
                             <title>{point.label}</title>
                           </circle>
                         ))}
+                        {selectedBirdLatestChartPoint ? (
+                          <g
+                            className="latest-weight-callout"
+                            transform={`translate(${
+                              selectedBirdLatestChartPoint.x > MEMBER_CHART_WIDTH - MEMBER_CHART_PADDING.right - 115
+                                ? selectedBirdLatestChartPoint.x - 10
+                                : selectedBirdLatestChartPoint.x + 10
+                            } ${
+                              selectedBirdLatestChartPoint.y < MEMBER_CHART_PADDING.top + 18
+                                ? selectedBirdLatestChartPoint.y + 26
+                                : selectedBirdLatestChartPoint.y - 18
+                            })`}
+                          >
+                            <rect
+                              x={selectedBirdLatestChartPoint.x > MEMBER_CHART_WIDTH - MEMBER_CHART_PADDING.right - 115 ? -104 : 0}
+                              y="-14"
+                              width="104"
+                              height="24"
+                              rx="6"
+                            />
+                            <text
+                              x={selectedBirdLatestChartPoint.x > MEMBER_CHART_WIDTH - MEMBER_CHART_PADDING.right - 115 ? -10 : 10}
+                              y="2"
+                              textAnchor={
+                                selectedBirdLatestChartPoint.x > MEMBER_CHART_WIDTH - MEMBER_CHART_PADDING.right - 115 ? 'end' : 'start'
+                              }
+                            >
+                              Latest {formatWeight(selectedBird.latestWeightGrams)}
+                            </text>
+                          </g>
+                        ) : null}
                       </svg>
                       <div className="chart-footer">
                         <p>{selectedBirdTrendCopy}</p>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b1a7fed..a8e551c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -892,6 +892,17 @@ textarea {
   font-size: 11px;
 }
 
+.latest-weight-callout rect {
+  fill: rgba(255, 253, 249, 0.94);
+  stroke: rgba(31, 42, 42, 0.16);
+}
+
+.latest-weight-callout text {
+  fill: var(--text);
+  font-size: 11px;
+  font-weight: 700;
+}
+
 .historical-weight-line,
 .historical-weight-dot {
   opacity: 0.48;