Index: frontend/src/pages/Dashboard/DashboardLayout.jsx =================================================================== --- frontend/src/pages/Dashboard/DashboardLayout.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/DashboardLayout.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,44 @@ +import React, { useMemo } from "react"; +import { Outlet, useNavigate } from "react-router-dom"; + +import { SidebarInset, SidebarProvider } from "@relume_io/relume-ui"; + +import DashboardSidebar from "./components/DashboardSidebar.jsx"; +import DashboardTopbar from "./components/DashboardTopbar.jsx"; + +const DashboardLayout = () => { + const navigate = useNavigate(); + + const user = useMemo(() => { + try { + const raw = localStorage.getItem("authUser"); + return raw ? JSON.parse(raw) : null; + } catch { + return null; + } + }, []); + + const username = user?.username ?? ""; + + const onLogout = () => { + localStorage.removeItem("authToken"); + localStorage.removeItem("authUser"); + navigate("/", { replace: true }); + }; + + return ( + + + + +
+
+ +
+
+ + + ); +}; + +export default DashboardLayout; Index: frontend/src/pages/Dashboard/components/DashboardSidebar.jsx =================================================================== --- frontend/src/pages/Dashboard/components/DashboardSidebar.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/components/DashboardSidebar.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,106 @@ +import React from "react"; +import { NavLink, useLocation } from "react-router-dom"; + +import { + Button, + Sidebar, + SidebarContent, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@relume_io/relume-ui"; + +import { + MdTune, + MdFitnessCenter, + MdMonitorWeight, + MdAccountBalanceWallet, + MdTrendingUp, + MdChecklist, + MdAdd, +} from "react-icons/md"; + +import logo from "../../../assets/logo.png"; + +const navItems = [ + { title: "Control Center", to: "/dashboard/control-center", icon: MdTune }, + { title: "Training", to: "/dashboard/training", icon: MdFitnessCenter }, + { title: "Weight", to: "/dashboard/weight", icon: MdMonitorWeight }, + { title: "Finance", to: "/dashboard/finance", icon: MdAccountBalanceWallet }, + { title: "Investing", to: "/dashboard/investing", icon: MdTrendingUp }, + { title: "Discipline", to: "/dashboard/discipline", icon: MdChecklist }, +]; + +const DashboardSidebar = () => { + const location = useLocation(); + + return ( + + + + Trekr + + + + + + {navItems.map((item) => ( + + {(() => { + const isActive = + location.pathname === item.to || + location.pathname.startsWith(`${item.to}/`); + + return ( + + + + + {item.title} + + + + ); + })()} + + ))} + + +
+ +
+ + + ); +}; + +export default DashboardSidebar; Index: frontend/src/pages/Dashboard/components/DashboardTopbar.jsx =================================================================== --- frontend/src/pages/Dashboard/components/DashboardTopbar.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/components/DashboardTopbar.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,59 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +import { MdLogout } from "react-icons/md"; + +import logo from "../../../assets/logo.png"; + +const DashboardTopbar = ({ username, onLogout }) => { + return ( + <> + {/* Desktop */} +
+
+
+ +
+ {username || "—"} + +
+
+
+ + {/* Mobile */} +
+
+ + Trekr + +
+
+ {username || "—"} + +
+
+ + ); +}; + +export default DashboardTopbar; Index: frontend/src/pages/Dashboard/pages/ControlCenter/ControlCenter.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/ControlCenter/ControlCenter.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/ControlCenter/ControlCenter.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,16 @@ +import React from "react"; + +const ControlCenter = () => { + return ( +
+

Control Center

+
+
+

Control Center content goes here.

+
+
+
+ ); +}; + +export default ControlCenter; Index: frontend/src/pages/Dashboard/pages/Discipline/Discipline.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Discipline/Discipline.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Discipline/Discipline.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,16 @@ +import React from "react"; + +const Discipline = () => { + return ( +
+

Discipline

+
+
+

Discipline dashboard content goes here.

+
+
+
+ ); +}; + +export default Discipline; Index: frontend/src/pages/Dashboard/pages/Finance/Finance.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Finance/Finance.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Finance/Finance.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,16 @@ +import React from "react"; + +const Finance = () => { + return ( +
+

Finance

+
+
+

Finance dashboard content goes here.

+
+
+
+ ); +}; + +export default Finance; Index: frontend/src/pages/Dashboard/pages/Investing/Investing.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Investing/Investing.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Investing/Investing.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,85 @@ +import React, { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; + +import api from "../../../../api/axios"; + +import InvestingCenteredCard from "./components/InvestingCenteredCard.jsx"; +import InvestingStartCtaCard from "./components/InvestingStartCtaCard.jsx"; + +const Investing = () => { + const navigate = useNavigate(); + + const [isLoading, setIsLoading] = useState(true); + const [isTracking, setIsTracking] = useState(false); + const [error, setError] = useState(""); + const [isSubmitting, setIsSubmitting] = useState(false); + + useEffect(() => { + let isMounted = true; + const run = async () => { + setIsLoading(true); + setError(""); + try { + const res = await api.get("/investing/status"); + const tracking = Boolean(res?.data?.tracking); + if (!isMounted) return; + setIsTracking(tracking); + if (tracking) { + navigate("/dashboard/investing/tracking", { replace: true }); + } + } catch (err) { + if (!isMounted) return; + const message = + err?.response?.data?.message || "Failed to load investing status"; + setError(message); + } finally { + if (isMounted) setIsLoading(false); + } + }; + + run(); + return () => { + isMounted = false; + }; + }, [navigate]); + + const onStart = async () => { + setError(""); + setIsSubmitting(true); + try { + await api.post("/investing/start", {}); + setIsTracking(true); + navigate("/dashboard/investing/tracking", { replace: true }); + } catch (err) { + const message = + err?.response?.data?.message || + Object.values(err?.response?.data?.errors ?? {})[0] || + "Failed to start tracking"; + setError(message); + } finally { + setIsSubmitting(false); + } + }; + + if (isLoading) { + return ; + } + + if (isTracking) { + return ; + } + + return ( +
+
+ +
+
+ ); +}; + +export default Investing; Index: frontend/src/pages/Dashboard/pages/Investing/InvestingTracking.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Investing/InvestingTracking.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Investing/InvestingTracking.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,264 @@ +import React, { useCallback, useEffect, useMemo, useState } from "react"; +import { useNavigate } from "react-router-dom"; + +import api from "../../../../api/axios"; +import graphPlaceholder from "../../../../assets/graph-placeholder.svg"; +import { fetchCurrentPricesBySymbol } from "../../../../api/twelveData"; + +import InvestingTrackingHeader from "./components/InvestingTrackingHeader.jsx"; +import InvestingProgressCard from "./components/InvestingProgressCard.jsx"; +import InvestingAssetsTable from "./components/InvestingAssetsTable.jsx"; + +function formatDate(value) { + if (!value) return "—"; + const d = new Date(value); + if (Number.isNaN(d.getTime())) return String(value); + return d.toLocaleDateString(undefined, { + year: "numeric", + month: "short", + day: "2-digit", + }); +} + +function formatMoney(value) { + if (value === null || value === undefined || value === "") return "—"; + const num = Number(value); + if (Number.isNaN(num)) return String(value); + return num.toLocaleString(undefined, { + style: "currency", + currency: "USD", + maximumFractionDigits: 2, + }); +} + +export default function InvestingTracking() { + const navigate = useNavigate(); + const pageSize = 5; + + const [assets, setAssets] = useState([]); + const [page, setPage] = useState(0); + const [hasMore, setHasMore] = useState(false); + const [isLoading, setIsLoading] = useState(true); + const [isLoadingMore, setIsLoadingMore] = useState(false); + const [isDeletingId, setIsDeletingId] = useState(null); + const [pendingDelete, setPendingDelete] = useState(null); + const [error, setError] = useState(""); + + const [quotesBySymbol, setQuotesBySymbol] = useState({}); + const [isQuotesLoading, setIsQuotesLoading] = useState(false); + const [quotesError, setQuotesError] = useState(""); + + const columns = useMemo( + () => [ + { key: "tickerSymbol", label: "Ticker" }, + { key: "quantity", label: "Quantity" }, + { key: "buyPrice", label: "Buy Price" }, + { key: "buyDate", label: "Buy Date" }, + { key: "currentPrice", label: "Current Price" }, + { key: "roi", label: "ROI" }, + { key: "actions", label: "" }, + ], + [], + ); + + const fetchPage = useCallback(async (nextPage) => { + const resp = await api.get("/investing/assets", { + params: { page: nextPage, size: pageSize }, + }); + const data = resp?.data ?? {}; + const nextAssets = Array.isArray(data.assets) ? data.assets : []; + const nextHasMore = Boolean(data.hasMore); + return { nextAssets, nextHasMore }; + }, []); + + useEffect(() => { + let cancelled = false; + (async () => { + try { + setIsLoading(true); + setError(""); + const { nextAssets, nextHasMore } = await fetchPage(0); + if (cancelled) return; + setAssets(nextAssets); + setHasMore(nextHasMore); + setPage(0); + } catch (e) { + if (cancelled) return; + setError(e?.response?.data?.message || "Failed to load assets."); + } finally { + if (!cancelled) setIsLoading(false); + } + })(); + return () => { + cancelled = true; + }; + }, [fetchPage]); + + const tickerSymbols = useMemo(() => { + const set = new Set(); + for (const a of assets) { + if (a?.tickerSymbol) set.add(String(a.tickerSymbol).toUpperCase()); + } + return Array.from(set).sort(); + }, [assets]); + + useEffect(() => { + if (tickerSymbols.length === 0) { + setQuotesBySymbol({}); + setIsQuotesLoading(false); + setQuotesError(""); + return; + } + + let cancelled = false; + let intervalId; + + const fetchQuotes = async () => { + try { + setIsQuotesLoading(true); + setQuotesError(""); + if (cancelled) return; + const map = await fetchCurrentPricesBySymbol(tickerSymbols); + if (cancelled) return; + setQuotesBySymbol(map); + } catch (err) { + if (cancelled) return; + const msg = + err?.message || + "Could not fetch current prices (check API key / provider availability)."; + setQuotesError(msg); + // Keep any previously loaded quotes instead of wiping the table. + // (If this is the first load, quotesBySymbol will already be empty.) + } finally { + if (!cancelled) setIsQuotesLoading(false); + } + }; + + fetchQuotes(); + // Keep refresh infrequent to avoid provider rate limits. + intervalId = setInterval(fetchQuotes, 5 * 60_000); + + return () => { + cancelled = true; + if (intervalId) clearInterval(intervalId); + }; + }, [tickerSymbols.join(",")]); + + const onLoadMore = async () => { + if (isLoadingMore || !hasMore) return; + const nextPage = page + 1; + try { + setIsLoadingMore(true); + setError(""); + const { nextAssets, nextHasMore } = await fetchPage(nextPage); + setAssets((prev) => [...prev, ...nextAssets]); + setHasMore(nextHasMore); + setPage(nextPage); + } catch (e) { + setError(e?.response?.data?.message || "Failed to load more assets."); + } finally { + setIsLoadingMore(false); + } + }; + + const doDelete = async (assetId) => { + if (!assetId || isDeletingId) return; + try { + setIsDeletingId(assetId); + setError(""); + await api.delete(`/investing/assets/${assetId}`); + setAssets((prev) => prev.filter((a) => a.assetId !== assetId)); + setPendingDelete(null); + } catch (e) { + setError(e?.response?.data?.message || "Failed to delete asset."); + } finally { + setIsDeletingId(null); + } + }; + + const onRequestDelete = (asset) => { + if (!asset?.assetId) return; + setPendingDelete({ + assetId: asset.assetId, + tickerSymbol: asset.tickerSymbol, + }); + }; + + return ( +
+ navigate("/dashboard/investing/assets/new")} + /> + + + {quotesError ? ( +
+ Prices unavailable: {quotesError} +
+ ) : null} + + {pendingDelete ? ( +
+
+

Delete investment?

+

+ This will permanently delete{" "} + + {pendingDelete.tickerSymbol || "this asset"} + + . +

+ +
+ + +
+
+
+ ) : null} + + navigate("/dashboard/investing/assets/new")} + onRequestDelete={onRequestDelete} + isDeletingId={isDeletingId} + /> +
+ ); +} Index: frontend/src/pages/Dashboard/pages/Investing/NewInvestment.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Investing/NewInvestment.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Investing/NewInvestment.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,250 @@ +import React, { useEffect, useMemo, useState } from "react"; +import { useNavigate } from "react-router-dom"; + +import api from "../../../../api/axios"; +import { searchTickers } from "../../../../api/yahooFinance"; + +export default function NewInvestment() { + const navigate = useNavigate(); + + const todayIso = useMemo(() => { + const now = new Date(); + const yyyy = now.getFullYear(); + const mm = String(now.getMonth() + 1).padStart(2, "0"); + const dd = String(now.getDate()).padStart(2, "0"); + return `${yyyy}-${mm}-${dd}`; + }, []); + + const initialForm = useMemo( + () => ({ tickerSymbol: "", quantity: "", buyPrice: "", buyDate: "" }), + [], + ); + + const [form, setForm] = useState(initialForm); + const [error, setError] = useState(""); + const [isSubmitting, setIsSubmitting] = useState(false); + + const [tickerQuery, setTickerQuery] = useState(""); + const [tickerOptions, setTickerOptions] = useState([]); + const [isLoadingTickers, setIsLoadingTickers] = useState(false); + + useEffect(() => { + const q = tickerQuery.trim(); + if (q.length < 2) { + setTickerOptions([]); + setIsLoadingTickers(false); + return; + } + + let cancelled = false; + const handle = setTimeout(async () => { + try { + setIsLoadingTickers(true); + if (cancelled) return; + const data = await searchTickers(q, 20); + if (cancelled) return; + setTickerOptions(Array.isArray(data) ? data : []); + } catch { + if (!cancelled) setTickerOptions([]); + } finally { + if (!cancelled) setIsLoadingTickers(false); + } + }, 250); + + return () => { + cancelled = true; + clearTimeout(handle); + }; + }, [tickerQuery]); + + const onSubmit = async (e) => { + e.preventDefault(); + setError(""); + + if (!form.tickerSymbol) { + setError("Please select a ticker symbol"); + return; + } + + if (form.buyDate && form.buyDate > todayIso) { + setError("Buy date cannot be in the future"); + return; + } + + const quantityNum = form.quantity === "" ? null : Number(form.quantity); + if (!quantityNum || Number.isNaN(quantityNum) || quantityNum <= 0) { + setError("Quantity must be greater than 0"); + return; + } + + const buyPriceNum = form.buyPrice === "" ? null : Number(form.buyPrice); + if ( + buyPriceNum !== null && + (Number.isNaN(buyPriceNum) || buyPriceNum < 0) + ) { + setError("Buy price must be 0 or greater"); + return; + } + + try { + setIsSubmitting(true); + await api.post("/investing/assets", { + tickerSymbol: form.tickerSymbol, + quantity: quantityNum, + buyPrice: buyPriceNum, + buyDate: form.buyDate === "" ? null : form.buyDate, + }); + + navigate("/dashboard/investing/tracking", { replace: true }); + } catch (err) { + const message = + err?.response?.data?.message || + Object.values(err?.response?.data?.errors ?? {})[0] || + "Failed to add investment"; + setError(message); + } finally { + setIsSubmitting(false); + } + }; + + return ( +
+
+
+

Add new investment

+

+ Add an asset you bought. (We’ll build performance tracking next.) +

+ + {error ? ( +
+ {error} +
+ ) : null} + +
+
+ +
+ setTickerQuery(e.target.value)} + /> + +
+

+ Only tickers returned by Yahoo Finance can be selected. +

+
+ +
+
+ + + setForm((p) => ({ ...p, quantity: e.target.value })) + } + required + /> +
+ +
+ + + setForm((p) => ({ ...p, buyPrice: e.target.value })) + } + /> +
+
+ +
+ + + setForm((p) => ({ ...p, buyDate: e.target.value })) + } + max={todayIso} + /> +
+ +
+ + +
+
+
+
+
+ ); +} Index: frontend/src/pages/Dashboard/pages/Investing/components/InvestingAssetsTable.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Investing/components/InvestingAssetsTable.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Investing/components/InvestingAssetsTable.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,151 @@ +import React from "react"; +import { MdDelete } from "react-icons/md"; + +export default function InvestingAssetsTable({ + columns, + assets, + isLoading, + error, + quotesBySymbol, + isQuotesLoading, + isLoadingMore, + hasMore, + onLoadMore, + pageSize, + formatDate, + formatMoney, + onAddAsset, + onRequestDelete, + onDelete, + isDeletingId, +}) { + return ( +
+
+
+

Assets

+ + Showing {pageSize} per page + +
+ + {error ? ( +
+ {error} +
+ ) : null} + +
+ + + + {columns.map((c) => ( + + ))} + + + + {isLoading ? ( + + + + ) : assets.length === 0 ? ( + + + + ) : ( + assets.map((a) => ( + + + + + + + + + + )) + )} + +
{c.label}
+ Loading… +
+
+

No investments yet.

+ +
+
{a.tickerSymbol ?? "—"}{a.quantity ?? "—"}{formatMoney(a.buyPrice)}{formatDate(a.buyDate)} + {isQuotesLoading + ? "Loading…" + : formatMoney( + quotesBySymbol?.[ + String(a.tickerSymbol ?? "").toUpperCase() + ], + )} + + {(() => { + const symbol = String( + a.tickerSymbol ?? "", + ).toUpperCase(); + const current = Number(quotesBySymbol?.[symbol]); + const buy = Number(a.buyPrice); + if (!symbol || Number.isNaN(current)) return "—"; + if (Number.isNaN(buy) || buy <= 0) return "—"; + const roiPct = ((current - buy) / buy) * 100; + const cls = + roiPct > 0 + ? "text-green-400 font-semibold" + : roiPct < 0 + ? "text-red-400 font-semibold" + : "opacity-80"; + const sign = roiPct > 0 ? "+" : ""; + return ( + + {sign} + {roiPct.toFixed(2)}% + + ); + })()} + + +
+
+ +
+ {!isLoading && assets.length === 0 ? null : hasMore ? ( + + ) : ( + No more assets. + )} +
+
+
+ ); +} Index: frontend/src/pages/Dashboard/pages/Investing/components/InvestingCenteredCard.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Investing/components/InvestingCenteredCard.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Investing/components/InvestingCenteredCard.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,16 @@ +import React from "react"; + +export default function InvestingCenteredCard({ title, message }) { + return ( +
+
+
+
+

{title}

+

{message}

+
+
+
+
+ ); +} Index: frontend/src/pages/Dashboard/pages/Investing/components/InvestingProgressCard.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Investing/components/InvestingProgressCard.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Investing/components/InvestingProgressCard.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,27 @@ +import React from "react"; + +export default function InvestingProgressCard({ graphSrc }) { + return ( +
+
+
+
+

Progress

+

+ Graph placeholder — we’ll visualize portfolio value here. +

+
+
+
+
+ Graph placeholder +
+
+
+
+ ); +} Index: frontend/src/pages/Dashboard/pages/Investing/components/InvestingStartCtaCard.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Investing/components/InvestingStartCtaCard.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Investing/components/InvestingStartCtaCard.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,36 @@ +import React from "react"; + +export default function InvestingStartCtaCard({ + error, + onStart, + isSubmitting, +}) { + return ( +
+
+

Investing

+

+ You’re not tracking investments yet. Start tracking to log your assets + and visualize your progress. +

+ + {error ? ( +
+ {error} +
+ ) : null} + +
+ +
+
+
+ ); +} Index: frontend/src/pages/Dashboard/pages/Investing/components/InvestingTrackingHeader.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Investing/components/InvestingTrackingHeader.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Investing/components/InvestingTrackingHeader.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,19 @@ +import React from "react"; + +export default function InvestingTrackingHeader({ onAddAsset }) { + return ( +
+
+

Investing

+

Track your assets over time.

+
+ +
+ ); +} Index: frontend/src/pages/Dashboard/pages/Training/NewTrainingSession.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Training/NewTrainingSession.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Training/NewTrainingSession.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,241 @@ +import React, { useEffect, useMemo, useState } from "react"; +import { useNavigate } from "react-router-dom"; + +import api from "../../../../api/axios"; + +import WorkoutTypeSelect from "./components/WorkoutTypeSelect.jsx"; +import CaloriesEstimate from "./components/CaloriesEstimate.jsx"; + +const NewTrainingSession = () => { + const navigate = useNavigate(); + + const [workoutTypes, setWorkoutTypes] = useState([]); + const [profileWeightKg, setProfileWeightKg] = useState(null); + const [isLoading, setIsLoading] = useState(true); + + const [type, setType] = useState(""); + const [durationMinutes, setDurationMinutes] = useState(""); + const [autoCalculateCalories, setAutoCalculateCalories] = useState(true); + const [calories, setCalories] = useState(""); + + const [error, setError] = useState(""); + const [isSubmitting, setIsSubmitting] = useState(false); + + useEffect(() => { + let cancelled = false; + (async () => { + try { + setIsLoading(true); + setError(""); + + const [typesRes, profileRes] = await Promise.all([ + api.get("/training/workout-types"), + api.get("/training/profile"), + ]); + + if (cancelled) return; + + const types = Array.isArray(typesRes?.data) ? typesRes.data : []; + setWorkoutTypes(types); + + const weight = profileRes?.data?.weight; + setProfileWeightKg( + weight === null || weight === undefined || weight === "" + ? null + : Number(weight), + ); + } catch (err) { + if (cancelled) return; + setError( + err?.response?.data?.message || + "Failed to load workout types/training profile.", + ); + } finally { + if (!cancelled) setIsLoading(false); + } + })(); + return () => { + cancelled = true; + }; + }, []); + + const selectedWorkout = useMemo( + () => workoutTypes.find((t) => t.type === type) ?? null, + [workoutTypes, type], + ); + + const estimatedCalories = useMemo(() => { + const met = selectedWorkout?.met; + const durationNum = durationMinutes === "" ? NaN : Number(durationMinutes); + const weightNum = profileWeightKg; + if (!Number.isFinite(Number(met))) return null; + if (!Number.isFinite(durationNum) || durationNum <= 0) return null; + if (!Number.isFinite(weightNum) || weightNum <= 0) return null; + + const caloriesValue = Number(met) * weightNum * (durationNum / 60); + if (!Number.isFinite(caloriesValue)) return null; + return Math.round(caloriesValue * 100) / 100; + }, [durationMinutes, profileWeightKg, selectedWorkout?.met]); + + const onSubmit = async (e) => { + e.preventDefault(); + setError(""); + + if (isLoading) return; + + if (!type) { + setError("Please select a workout type."); + return; + } + + const durationNum = durationMinutes === "" ? NaN : Number(durationMinutes); + if (!Number.isFinite(durationNum) || durationNum < 1) { + setError("Duration must be at least 1 minute."); + return; + } + + const caloriesNum = calories === "" ? NaN : Number(calories); + if (!autoCalculateCalories) { + if (!Number.isFinite(caloriesNum) || caloriesNum < 0) { + setError("Calories must be 0 or greater."); + return; + } + } + + try { + setIsSubmitting(true); + await api.post("/training/sessions", { + type, + durationMinutes: durationNum, + autoCalculateCalories, + calories: autoCalculateCalories ? null : caloriesNum, + }); + + navigate("/dashboard/training/tracking", { replace: true }); + } catch (err) { + setError( + err?.response?.data?.message || "Failed to add training session.", + ); + } finally { + setIsSubmitting(false); + } + }; + + return ( +
+
+
+
+
+

Add training session

+

+ Choose a workout type, enter the duration, and we’ll save your + session. +

+
+
+ + {error ?

{error}

: null} + + {isLoading ? ( +

Loading workout types…

+ ) : null} + +
+ setType(e.target.value)} + disabled={isLoading} + /> + +
+ + setDurationMinutes(e.target.value)} + min={1} + step={1} + required + disabled={isLoading} + /> +
+
+ +
+ +

+ Uses your training profile weight and the workout type. +

+ +
+ +
+ + setCalories(e.target.value)} + min={0} + step={1} + disabled={autoCalculateCalories} + placeholder={ + autoCalculateCalories + ? "Calculated automatically" + : "Enter calories" + } + required={!autoCalculateCalories} + /> +
+ +
+ + +
+
+
+
+ ); +}; + +export default NewTrainingSession; Index: frontend/src/pages/Dashboard/pages/Training/Training.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Training/Training.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Training/Training.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,114 @@ +import React, { useEffect, useMemo, useState } from "react"; +import { useNavigate } from "react-router-dom"; + +import api from "../../../../api/axios"; + +import TrainingCenteredCard from "./components/TrainingCenteredCard.jsx"; +import TrainingStartCtaCard from "./components/TrainingStartCtaCard.jsx"; +import TrainingStartForm from "./components/TrainingStartForm.jsx"; + +const Training = () => { + const navigate = useNavigate(); + + const [isLoading, setIsLoading] = useState(true); + const [isTracking, setIsTracking] = useState(false); + const [step, setStep] = useState("cta"); // cta | form + const [error, setError] = useState(""); + const [isSubmitting, setIsSubmitting] = useState(false); + + const initialForm = useMemo(() => ({ gender: "", age: "", weight: "" }), []); + const [form, setForm] = useState(initialForm); + + useEffect(() => { + let isMounted = true; + const run = async () => { + setIsLoading(true); + setError(""); + try { + const res = await api.get("/training/status"); + const tracking = Boolean(res?.data?.tracking); + if (!isMounted) return; + setIsTracking(tracking); + if (tracking) { + navigate("/dashboard/training/tracking", { replace: true }); + } + } catch (err) { + if (!isMounted) return; + const message = + err?.response?.data?.message || "Failed to load training status"; + setError(message); + } finally { + if (isMounted) setIsLoading(false); + } + }; + + run(); + return () => { + isMounted = false; + }; + }, [navigate]); + + const onStart = () => { + setError(""); + setStep("form"); + }; + + const onCancel = () => { + setStep("cta"); + setForm(initialForm); + setError(""); + }; + + const onSubmit = async (e) => { + e.preventDefault(); + setError(""); + setIsSubmitting(true); + try { + await api.post("/training/start", { + gender: form.gender, + age: form.age === "" ? null : Number(form.age), + weight: form.weight === "" ? null : Number(form.weight), + }); + + setIsTracking(true); + navigate("/dashboard/training/tracking", { replace: true }); + } catch (err) { + const message = + err?.response?.data?.message || + Object.values(err?.response?.data?.errors ?? {})[0] || + "Failed to start tracking"; + setError(message); + } finally { + setIsSubmitting(false); + } + }; + + if (isLoading) { + return ; + } + + if (isTracking) { + return ; + } + + return ( +
+
+ {step === "cta" ? ( + + ) : ( + + )} +
+
+ ); +}; + +export default Training; Index: frontend/src/pages/Dashboard/pages/Training/TrainingTracking.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Training/TrainingTracking.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Training/TrainingTracking.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,120 @@ +import React, { useCallback, useEffect, useMemo, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import api from "../../../../api/axios"; +import graphPlaceholder from "../../../../assets/graph-placeholder.svg"; + +import TrainingTrackingHeader from "./components/TrainingTrackingHeader.jsx"; +import TrainingProgressCard from "./components/TrainingProgressCard.jsx"; +import TrainingSessionsTable from "./components/TrainingSessionsTable.jsx"; + +function formatDate(value) { + if (!value) return "—"; + const d = new Date(value); + if (Number.isNaN(d.getTime())) return String(value); + return d.toLocaleDateString(undefined, { + year: "numeric", + month: "short", + day: "2-digit", + }); +} + +function titleCase(value) { + if (!value) return "—"; + const s = String(value); + return s.charAt(0).toUpperCase() + s.slice(1); +} + +export default function TrainingTracking() { + const navigate = useNavigate(); + const pageSize = 5; + + const [sessions, setSessions] = useState([]); + const [page, setPage] = useState(0); + const [hasMore, setHasMore] = useState(false); + const [isLoading, setIsLoading] = useState(true); + const [isLoadingMore, setIsLoadingMore] = useState(false); + const [error, setError] = useState(""); + + const columns = useMemo( + () => [ + { key: "date", label: "Date" }, + { key: "type", label: "Type" }, + { key: "duration", label: "Duration (min)" }, + { key: "calories", label: "Calories" }, + ], + [], + ); + + const fetchPage = useCallback(async (nextPage) => { + const resp = await api.get("/training/sessions", { + params: { page: nextPage, size: pageSize }, + }); + const data = resp?.data ?? {}; + const nextSessions = Array.isArray(data.sessions) ? data.sessions : []; + const nextHasMore = Boolean(data.hasMore); + return { nextSessions, nextHasMore }; + }, []); + + useEffect(() => { + let cancelled = false; + (async () => { + try { + setIsLoading(true); + setError(""); + const { nextSessions, nextHasMore } = await fetchPage(0); + if (cancelled) return; + setSessions(nextSessions); + setHasMore(nextHasMore); + setPage(0); + } catch (e) { + if (cancelled) return; + setError( + e?.response?.data?.message || "Failed to load training sessions.", + ); + } finally { + if (!cancelled) setIsLoading(false); + } + })(); + return () => { + cancelled = true; + }; + }, [fetchPage]); + + const onLoadMore = async () => { + if (isLoadingMore || !hasMore) return; + const nextPage = page + 1; + try { + setIsLoadingMore(true); + setError(""); + const { nextSessions, nextHasMore } = await fetchPage(nextPage); + setSessions((prev) => [...prev, ...nextSessions]); + setHasMore(nextHasMore); + setPage(nextPage); + } catch (e) { + setError(e?.response?.data?.message || "Failed to load more sessions."); + } finally { + setIsLoadingMore(false); + } + }; + + return ( +
+ navigate("/dashboard/training/sessions/new")} + /> + + +
+ ); +} Index: frontend/src/pages/Dashboard/pages/Training/components/CaloriesEstimate.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Training/components/CaloriesEstimate.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Training/components/CaloriesEstimate.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,21 @@ +import React from "react"; + +const CaloriesEstimate = ({ estimatedCalories, profileWeightKg }) => { + return ( +
+ {estimatedCalories === null ? ( +

+ Estimated calories: — + {profileWeightKg === null ? " (missing profile weight)" : ""} +

+ ) : ( +

+ Estimated calories:{" "} + {estimatedCalories} kcal +

+ )} +
+ ); +}; + +export default CaloriesEstimate; Index: frontend/src/pages/Dashboard/pages/Training/components/TrainingCenteredCard.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Training/components/TrainingCenteredCard.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Training/components/TrainingCenteredCard.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,17 @@ +import React from "react"; + +const TrainingCenteredCard = ({ title, message, children }) => { + return ( +
+
+
+ {title ?

{title}

: null} + {message ?

{message}

: null} + {children} +
+
+
+ ); +}; + +export default TrainingCenteredCard; Index: frontend/src/pages/Dashboard/pages/Training/components/TrainingProgressCard.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Training/components/TrainingProgressCard.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Training/components/TrainingProgressCard.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,23 @@ +import React from "react"; + +const TrainingProgressCard = ({ graphSrc }) => { + return ( +
+
+
+

Progress

+ Graph placeholder +
+
+ Training progress graph placeholder +
+
+
+ ); +}; + +export default TrainingProgressCard; Index: frontend/src/pages/Dashboard/pages/Training/components/TrainingSessionsTable.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Training/components/TrainingSessionsTable.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Training/components/TrainingSessionsTable.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,81 @@ +import React from "react"; + +const TrainingSessionsTable = ({ + columns, + sessions, + isLoading, + error, + isLoadingMore, + hasMore, + onLoadMore, + pageSize, + formatDate, + titleCase, +}) => { + return ( +
+
+
+

Recent sessions

+ Showing up to {pageSize} +
+ + {error ?

{error}

: null} + +
+ + + + {columns.map((c) => ( + + ))} + + + + {isLoading ? ( + + + + ) : sessions.length === 0 ? ( + + + + ) : ( + sessions.map((s) => ( + + + + + + + )) + )} + +
{c.label}
+ Loading… +
+ No sessions yet. +
{formatDate(s.date)}{titleCase(s.type)}{s.duration ?? "—"}{s.calories ?? "—"}
+
+ +
+ +
+
+
+ ); +}; + +export default TrainingSessionsTable; Index: frontend/src/pages/Dashboard/pages/Training/components/TrainingStartCtaCard.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Training/components/TrainingStartCtaCard.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Training/components/TrainingStartCtaCard.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,26 @@ +import React from "react"; + +const TrainingStartCtaCard = ({ error, onStart }) => { + return ( +
+
+

You are not tracking training

+

+ Start tracking to log sessions, see trends, and build consistency. +

+ + {error ?

{error}

: null} + + +
+
+ ); +}; + +export default TrainingStartCtaCard; Index: frontend/src/pages/Dashboard/pages/Training/components/TrainingStartForm.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Training/components/TrainingStartForm.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Training/components/TrainingStartForm.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,94 @@ +import React from "react"; + +const TrainingStartForm = ({ + form, + setForm, + onSubmit, + onCancel, + error, + isSubmitting, +}) => { + return ( +
+
+

Start tracking training

+

+ Fill in a few details to set up your training profile. +

+ + {error ?

{error}

: null} + +
+
+ + +
+ +
+ + setForm((p) => ({ ...p, age: e.target.value }))} + min={1} + max={120} + required + /> +
+ +
+ + + setForm((p) => ({ ...p, weight: e.target.value })) + } + min={1} + step="0.1" + required + /> +
+
+ +
+ + +
+
+
+ ); +}; + +export default TrainingStartForm; Index: frontend/src/pages/Dashboard/pages/Training/components/TrainingTrackingHeader.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Training/components/TrainingTrackingHeader.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Training/components/TrainingTrackingHeader.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,22 @@ +import React from "react"; + +const TrainingTrackingHeader = ({ onAddSession }) => { + return ( +
+
+

Training

+

Your recent sessions and progress.

+
+ + +
+ ); +}; + +export default TrainingTrackingHeader; Index: frontend/src/pages/Dashboard/pages/Training/components/WorkoutTypeSelect.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Training/components/WorkoutTypeSelect.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Training/components/WorkoutTypeSelect.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,27 @@ +import React from "react"; + +const WorkoutTypeSelect = ({ workoutTypes, value, onChange, disabled }) => { + return ( +
+ + +
+ ); +}; + +export default WorkoutTypeSelect; Index: frontend/src/pages/Dashboard/pages/Weight/Weight.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/Weight/Weight.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) +++ frontend/src/pages/Dashboard/pages/Weight/Weight.jsx (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9) @@ -0,0 +1,16 @@ +import React from "react"; + +const Weight = () => { + return ( +
+

Weight

+
+
+

Weight dashboard content goes here.

+
+
+
+ ); +}; + +export default Weight;