+
+
+
+
+
+
+
+
+
+ {/* Mobile */}
+
+
+
+
+
+ {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 (
+
+
+ 
+
+
+
+ {username || "—"}
+
+
+
+
+ );
+};
+
+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 (
+ Control Center
+
+
+
+
+ Control Center 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 (
+ Discipline
+
+
+
+
+ Discipline 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 Finance
+
+
+
+
+ Finance dashboard content goes here.
+
+
+ );
+};
+
+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")}
+ />
+ 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 (
+
+ Prices unavailable: {quotesError}
+
+ ) : null}
+
+ {pendingDelete ? (
+
+
+ ) : null}
+
+
+
+ Delete investment?
++ This will permanently delete{" "} + + {pendingDelete.tickerSymbol || "this asset"} + + . +
+ +
+
+
+
+
+
+ );
+}
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 (
+
+
+
+
+ Add new investment
++ Add an asset you bought. (We’ll build performance tracking next.) +
+ + {error ? ( +
+ {error}
+
+ ) : null}
+
+
+
+
+ );
+}
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 (
+
+
+
+
+
+ {error ? (
+ Assets
+ + Showing {pageSize} per page + +
+ {error}
+
+ ) : null}
+
+
+
+
+
+
+
+ | {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/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 (
+
+
+
+
+
+
+ {title}
+{message}
+
+
+ );
+}
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 (
+
+
+
+
+
+
+ Progress
++ Graph placeholder — we’ll visualize portfolio value here. +
+
+
+
+ 
+
+
+
+ );
+}
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
++ 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/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 (
+
+
+
+ Investing
+Track your assets over time.
+
+
+
+ );
+};
+
+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
+
+ );
+};
+
+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 (
+
+ {step === "cta" ? (
+
+
+ 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 ? (
+
+ );
+};
+
+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 (
+ + Estimated calories: — + {profileWeightKg === null ? " (missing profile weight)" : ""} +
+ ) : ( ++ Estimated calories:{" "} + {estimatedCalories} kcal +
+ )} +
+
+ );
+};
+
+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 (
+
+
+
+ {title ?
+ {title}
: null} + {message ?{message}
: null} + {children} +
+
+ );
+};
+
+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 (
+
+
+
+
+ Progress
+ Graph placeholder +
+
+
+
+
+ );
+};
+
+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 (
+
+
+
+
+
+ {error ? Recent sessions
+ Showing up to {pageSize} +{error}
: null} + +
+
+
+
+
+
+ | {c.label} | + ))} +|||
|---|---|---|---|
| + Loading… + | +|||
| + No sessions yet. + | +|||
| {formatDate(s.date)} | +{titleCase(s.type)} | +{s.duration ?? "—"} | +{s.calories ?? "—"} | +
+
+
+
+
+ );
+};
+
+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 (
+
+ );
+};
+
+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 (
+
+
+ You are not tracking training
++ Start tracking to log sessions, see trends, and build consistency. +
+ + {error ?{error}
: null} + + +
+
+ );
+};
+
+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 (
+
+
+
+
+ Training
+Your recent sessions and progress.
+
+
+
+
+ );
+};
+
+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 (
+
+
+ );
+};
+
+export default Weight;
Index: frontend/vite.config.js
===================================================================
--- frontend/vite.config.js (revision ff01f66118570f9849d473fe7df4fe26b5e3a361)
+++ frontend/vite.config.js (revision 8c01a1f14ebd23dc0aeffe2d391546a92ddde9f9)
@@ -6,3 +6,21 @@
export default defineConfig({
plugins: [react(), tailwindcss()],
+ server: {
+ proxy: {
+ // Dev-only Yahoo Finance proxy to avoid browser CORS.
+ // Frontend can call `/yahoo/...` and `/yahoo2/...` as same-origin.
+ '/yahoo': {
+ target: 'https://query1.finance.yahoo.com',
+ changeOrigin: true,
+ secure: true,
+ rewrite: (path) => path.replace(/^\/yahoo/, ''),
+ },
+ '/yahoo2': {
+ target: 'https://query2.finance.yahoo.com',
+ changeOrigin: true,
+ secure: true,
+ rewrite: (path) => path.replace(/^\/yahoo2/, ''),
+ },
+ },
+ },
})
Weight
+
+
+
+
+ Weight dashboard content goes here.
+