New fitness analytics page

apps/frontend/app/lib/generals.ts

@@ -296,6 +296,11 @@ export const getStringAsciiValue = (input: string) => {
 	return total;
 };
 
+export const selectRandomElement = <T>(array: T[], input: string): T => {
+	// taken from https://stackoverflow.com/questions/44975435/using-mod-operator-in-javascript-to-wrap-around#comment76926119_44975435
+	return array[(getStringAsciiValue(input) + array.length) % array.length];
+};
+
 export const getMetadataIcon = (lot: MediaLot) =>
 	match(lot)
 		.with(MediaLot.Book, () => IconBook)
@@ -452,3 +457,13 @@ export const refreshUserMetadataDetails = (metadataId: string) =>
 			queryKey: queryFactory.media.userMetadataDetails(metadataId).queryKey,
 		});
 	}, 1500);
+
+export const convertUtcHourToLocalHour = (
+	utcHour: number,
+	userTimezone?: string,
+) => {
+	const targetTimezone = userTimezone || dayjs.tz.guess();
+	const utcDate = dayjs.utc().hour(utcHour).minute(0).second(0);
+	const localDate = utcDate.tz(targetTimezone);
+	return localDate.hour();
+};

apps/frontend/app/lib/hooks.ts

@@ -20,8 +20,8 @@ import {
 	FitnessAction,
 	dayjsLib,
 	getMetadataDetailsQuery,
-	getStringAsciiValue,
 	getUserMetadataDetailsQuery,
+	selectRandomElement,
 } from "~/lib/generals";
 import { type InProgressWorkout, useCurrentWorkout } from "~/lib/state/fitness";
 import type { loader as dashboardLoader } from "~/routes/_dashboard";
@@ -34,9 +34,7 @@ export const useGetMantineColors = () => {
 
 export const useGetRandomMantineColor = (input: string) => {
 	const colors = useGetMantineColors();
-
-	// taken from https://stackoverflow.com/questions/44975435/using-mod-operator-in-javascript-to-wrap-around#comment76926119_44975435
-	return colors[(getStringAsciiValue(input) + colors.length) % colors.length];
+	return selectRandomElement(colors, input);
 };
 
 export const useFallbackImageUrl = (text = "No Image") => {

apps/frontend/app/lib/state/fitness.ts

@@ -57,6 +57,7 @@ export type Exercise = {
 	isCollapsed?: boolean;
 	sets: Array<ExerciseSet>;
 	isShowDetailsOpen: boolean;
+	scrollMarginRemoved?: true;
 	openedDetailsTab?: "images" | "history";
 	alreadyDoneSets: Array<AlreadyDoneExerciseSet>;
 };

apps/frontend/app/routes/_dashboard._index.tsx

@@ -662,7 +662,7 @@ const ActivitySection = () => {
 		queryFn: async () => {
 			const { dailyUserActivities } = await clientGqlService.request(
 				DailyUserActivitiesDocument,
-				{ input: { startDate, endDate } },
+				{ input: { dateRange: { startDate, endDate } } },
 			);
 			const trackSeries = mapValues(MediaColors, () => false);
 			const data = dailyUserActivities.items.map((d) => {

apps/frontend/app/routes/_dashboard.fitness.$action.tsx

@@ -1101,7 +1101,7 @@ const ExerciseDisplay = (props: {
 			<Paper
 				radius={0}
 				style={{
-					scrollMargin: "60px",
+					scrollMargin: exercise.scrollMarginRemoved ? "10px" : "60px",
 					borderLeft: partOfSuperset
 						? `3px solid ${theme.colors[partOfSuperset.color][6]}`
 						: undefined,
@@ -1856,6 +1856,7 @@ const SetDisplay = (props: {
 												draft.exercises[props.exerciseIdx];
 											currentExercise.sets[props.setIdx].confirmedAt =
 												newConfirmed ? dayjsLib().toISOString() : null;
+											currentExercise.scrollMarginRemoved = true;
 											if (newConfirmed) {
 												const nextSet = getNextSetInWorkout(
 													draft,