-
Discipline
-
-
-
+ Discipline dashboard content goes here.
-
+
);
-};
-
-export default Discipline;
+}
Index: frontend/src/pages/Dashboard/pages/Discipline/DisciplineTracking.jsx
===================================================================
--- frontend/src/pages/Dashboard/pages/Discipline/DisciplineTracking.jsx (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4)
+++ frontend/src/pages/Dashboard/pages/Discipline/DisciplineTracking.jsx (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4)
@@ -0,0 +1,397 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import graphPlaceholder from "../../../../assets/graph-placeholder.svg";
+
+import {
+ createTask,
+ deleteTask,
+ getTasks,
+ updateTask,
+ updateTaskFinished,
+} from "../../../../api/discipline";
+
+import {
+ computeDailyCompletion,
+ getDailyCompletions,
+} from "../../../../api/dailyCompletion";
+
+import TaskList from "./components/TaskList.jsx";
+
+export default function DisciplineTracking() {
+ const pageSize = 50;
+ const completionPageSize = 14;
+
+ const todayIso = useMemo(() => {
+ const d = new Date();
+ return d.toISOString().slice(0, 10);
+ }, []);
+
+ const [tasks, setTasks] = 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 [completionInfo, setCompletionInfo] = useState(null);
+ const [isComputing, setIsComputing] = useState(false);
+ const [workingTaskIds, setWorkingTaskIds] = useState([]);
+
+ const [dailyCompletions, setDailyCompletions] = useState([]);
+ const [completionPage, setCompletionPage] = useState(0);
+ const [completionHasMore, setCompletionHasMore] = useState(false);
+ const [isLoadingCompletions, setIsLoadingCompletions] = useState(true);
+ const [isLoadingMoreCompletions, setIsLoadingMoreCompletions] = useState(false);
+ const [completionError, setCompletionError] = useState("");
+
+ const workingSet = useMemo(
+ () => new Set(workingTaskIds),
+ [workingTaskIds],
+ );
+
+ const fetchPage = useCallback(async (nextPage) => {
+ const data = await getTasks({ page: nextPage, size: pageSize });
+ return {
+ nextTasks: Array.isArray(data?.tasks) ? data.tasks : [],
+ nextHasMore: Boolean(data?.hasMore),
+ };
+ }, []);
+
+ const fetchCompletionsPage = useCallback(async (nextPage) => {
+ const data = await getDailyCompletions({
+ page: nextPage,
+ size: completionPageSize,
+ });
+ return {
+ nextCompletions: Array.isArray(data?.completions) ? data.completions : [],
+ nextHasMore: Boolean(data?.hasMore),
+ };
+ }, []);
+
+ useEffect(() => {
+ let cancelled = false;
+ (async () => {
+ try {
+ setIsLoading(true);
+ setError("");
+ const { nextTasks, nextHasMore } = await fetchPage(0);
+ if (cancelled) return;
+ setTasks(nextTasks);
+ setHasMore(nextHasMore);
+ setPage(0);
+ } catch (e) {
+ if (cancelled) return;
+ setError(e?.response?.data?.message || "Failed to load tasks.");
+ } finally {
+ if (!cancelled) setIsLoading(false);
+ }
+ })();
+ return () => {
+ cancelled = true;
+ };
+ }, [fetchPage]);
+
+ useEffect(() => {
+ let cancelled = false;
+ (async () => {
+ try {
+ setIsLoadingCompletions(true);
+ setCompletionError("");
+ const { nextCompletions, nextHasMore } = await fetchCompletionsPage(0);
+ if (cancelled) return;
+ setDailyCompletions(nextCompletions);
+ setCompletionHasMore(nextHasMore);
+ setCompletionPage(0);
+ } catch (e) {
+ if (cancelled) return;
+ setCompletionError(
+ e?.response?.data?.message ||
+ "Failed to load daily completion history.",
+ );
+ } finally {
+ if (!cancelled) setIsLoadingCompletions(false);
+ }
+ })();
+
+ return () => {
+ cancelled = true;
+ };
+ }, [fetchCompletionsPage]);
+
+ const onLoadMoreCompletions = async () => {
+ if (isLoadingMoreCompletions || !completionHasMore) return;
+ const nextPage = completionPage + 1;
+ try {
+ setIsLoadingMoreCompletions(true);
+ setCompletionError("");
+ const { nextCompletions, nextHasMore } =
+ await fetchCompletionsPage(nextPage);
+ setDailyCompletions((prev) => [...prev, ...nextCompletions]);
+ setCompletionHasMore(nextHasMore);
+ setCompletionPage(nextPage);
+ } catch (e) {
+ setCompletionError(
+ e?.response?.data?.message || "Failed to load more completions.",
+ );
+ } finally {
+ setIsLoadingMoreCompletions(false);
+ }
+ };
+
+ const onLoadMore = async () => {
+ if (isLoadingMore || !hasMore) return;
+ const nextPage = page + 1;
+ try {
+ setIsLoadingMore(true);
+ setError("");
+ const { nextTasks, nextHasMore } = await fetchPage(nextPage);
+ setTasks((prev) => [...prev, ...nextTasks]);
+ setHasMore(nextHasMore);
+ setPage(nextPage);
+ } catch (e) {
+ setError(e?.response?.data?.message || "Failed to load more tasks.");
+ } finally {
+ setIsLoadingMore(false);
+ }
+ };
+
+ const withWorking = async (taskId, fn) => {
+ setWorkingTaskIds((prev) => [...prev, taskId]);
+ try {
+ await fn();
+ } finally {
+ setWorkingTaskIds((prev) => prev.filter((id) => id !== taskId));
+ }
+ };
+
+ const onAdd = async (name) => {
+ setError("");
+ try {
+ const created = await createTask({ name });
+ setTasks((prev) => [created, ...prev]);
+ } catch (e) {
+ setError(e?.response?.data?.message || "Failed to create task.");
+ }
+ };
+
+ const onDelete = async (taskId) => {
+ setError("");
+ await withWorking(taskId, async () => {
+ try {
+ await deleteTask(taskId);
+ setTasks((prev) => prev.filter((t) => t.taskId !== taskId));
+ } catch (e) {
+ setError(e?.response?.data?.message || "Failed to delete task.");
+ }
+ });
+ };
+
+ const onToggleFinished = async (taskId, isFinished) => {
+ if (workingSet.has(taskId)) return;
+ setError("");
+
+ // optimistic update
+ setTasks((prev) =>
+ prev.map((t) => (t.taskId === taskId ? { ...t, isFinished } : t)),
+ );
+
+ await withWorking(taskId, async () => {
+ try {
+ const updated = await updateTaskFinished(taskId, isFinished);
+ setTasks((prev) =>
+ prev.map((t) => (t.taskId === taskId ? updated : t)),
+ );
+ } catch (e) {
+ // revert
+ setTasks((prev) =>
+ prev.map((t) =>
+ t.taskId === taskId ? { ...t, isFinished: !isFinished } : t,
+ ),
+ );
+ setError(e?.response?.data?.message || "Failed to update task.");
+ }
+ });
+ };
+
+ const onRename = async (taskId, name) => {
+ setError("");
+ await withWorking(taskId, async () => {
+ try {
+ const updated = await updateTask(taskId, { name });
+ setTasks((prev) =>
+ prev.map((t) => (t.taskId === taskId ? updated : t)),
+ );
+ } catch (e) {
+ setError(e?.response?.data?.message || "Failed to update task.");
+ }
+ });
+ };
+
+ const onComputeToday = async () => {
+ setError("");
+ setCompletionInfo(null);
+ setIsComputing(true);
+ try {
+ const result = await computeDailyCompletion();
+ setCompletionInfo(result?.completion ?? null);
+
+ // refresh daily completion history
+ try {
+ const { nextCompletions, nextHasMore } = await fetchCompletionsPage(0);
+ setDailyCompletions(nextCompletions);
+ setCompletionHasMore(nextHasMore);
+ setCompletionPage(0);
+ } catch {
+ // ignore
+ }
+
+ // refresh tasks as backend will reset finished -> false
+ const { nextTasks, nextHasMore } = await fetchPage(0);
+ setTasks(nextTasks);
+ setHasMore(nextHasMore);
+ setPage(0);
+ } catch (e) {
+ setError(
+ e?.response?.data?.message || "Failed to compute daily completion.",
+ );
+ } finally {
+ setIsComputing(false);
+ }
+ };
+
+ const isTodayClosed = useMemo(() => {
+ return (dailyCompletions ?? []).some((dc) => dc?.date === todayIso);
+ }, [dailyCompletions, todayIso]);
+
+ return (
+
+
+
+ );
+}
+
Index: frontend/src/pages/Dashboard/pages/Discipline/components/DisciplineCenteredCard.jsx
===================================================================
--- frontend/src/pages/Dashboard/pages/Discipline/components/DisciplineCenteredCard.jsx (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4)
+++ frontend/src/pages/Dashboard/pages/Discipline/components/DisciplineCenteredCard.jsx (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4)
@@ -0,0 +1,17 @@
+import React from "react";
+
+export default function DisciplineCenteredCard({ title, message }) {
+ return (
+
+
+
+ {completionInfo ? (
+ Discipline
+ +
+
+ ) : null}
+
+ {isLoading ? (
+
+
+ Daily completion saved
++ Date: {completionInfo.date} — Completion: {completionInfo.procent}% +
+
+
+ ) : (
+ <>
+
+
+ Loading tasks…
+{error}
: null} + + {hasMore ? ( + + ) : null} + +
+
+
+
+
+ Progress
+(Placeholder graph for now)
+
+ 
+
+
+
+
+ )}
+
+
+ Daily completion
++ Previous days completion percentages. +
+ + {completionError ? ( +{completionError}
+ ) : null} + +
+
+
+
+
+
+ | Date | +Completion | +
|---|---|
| + Loading… + | +|
| + No daily completion records yet. Click “Close day” to + save today. + | +|
| {dc.date ?? "—"} | ++ {dc.procent ?? 0}% + | +
+ {completionHasMore ? (
+
+ ) : null}
+
+
+
+ );
+}
+
Index: frontend/src/pages/Dashboard/pages/Discipline/components/DisciplineStartCtaCard.jsx
===================================================================
--- frontend/src/pages/Dashboard/pages/Discipline/components/DisciplineStartCtaCard.jsx (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4)
+++ frontend/src/pages/Dashboard/pages/Discipline/components/DisciplineStartCtaCard.jsx (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4)
@@ -0,0 +1,26 @@
+import React from "react";
+
+export default function DisciplineStartCtaCard({ error, onStart, isSubmitting }) {
+ return (
+
+
+
+
+
+
+ {title}
+{message}
+
+
+ );
+}
+
Index: frontend/src/pages/Dashboard/pages/Discipline/components/TaskList.jsx
===================================================================
--- frontend/src/pages/Dashboard/pages/Discipline/components/TaskList.jsx (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4)
+++ frontend/src/pages/Dashboard/pages/Discipline/components/TaskList.jsx (revision 4f85b41e4eaa6d668912791fb3cff6efbe7dc1a4)
@@ -0,0 +1,171 @@
+import React, { useMemo, useState } from "react";
+
+function normalizeName(value) {
+ return String(value ?? "").trim();
+}
+
+export default function TaskList({
+ tasks,
+ onAdd,
+ onDelete,
+ onToggleFinished,
+ onRename,
+ isWorkingTaskIds,
+}) {
+ const [newTaskName, setNewTaskName] = useState("");
+ const [editTaskId, setEditTaskId] = useState(null);
+ const [editName, setEditName] = useState("");
+
+ const workingSet = useMemo(
+ () => new Set(isWorkingTaskIds ?? []),
+ [isWorkingTaskIds],
+ );
+
+ const beginEdit = (t) => {
+ setEditTaskId(t.taskId);
+ setEditName(t.name ?? "");
+ };
+
+ const cancelEdit = () => {
+ setEditTaskId(null);
+ setEditName("");
+ };
+
+ const submitRename = async () => {
+ const name = normalizeName(editName);
+ if (!name) return;
+ await onRename(editTaskId, name);
+ cancelEdit();
+ };
+
+ return (
+
+
+ Discipline
++ Start tracking your daily discipline tasks. You can add, edit, and mark + tasks as completed. +
+ {error ?{error}
: null} +
+
+
+
+
+ );
+}
+
+
+
+
+
+
+
+
+
+ Daily tasks
++ Check a task to mark it finished. Changes are saved immediately. +
+
+ {(tasks ?? []).length === 0 ? (
+
+ No tasks yet.
+ ) : ( + (tasks ?? []).map((t) => { + const isWorking = workingSet.has(t.taskId); + const isEditing = editTaskId === t.taskId; + + return ( +
+
+ );
+ })
+ )}
+
+
+ onToggleFinished(t.taskId, e.target.checked)
+ }
+ />
+
+ {isEditing ? (
+ setEditName(e.target.value)}
+ maxLength={200}
+ />
+ ) : (
+
+
+
+
+ )}
+
+ {t.name}
+
+
+ {isEditing ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+ )}
+
+