Bugfix/calendar time

src/modules/shared/components/ProfileArea/utils/index.ts

@@ -92,3 +92,27 @@ export const useAdherenceEvents = (data: any, programStage: string) => {
 
 	return { filteredEvents };
 };
+
+export const useActualCurrentDate = () => {
+	const [date, setDate] = useState<Date | null>(null);
+	const [error, setError] = useState<any>(null);
+
+	const fetchActualDate = async () => {
+		try {
+			const response = await fetch("http://worldtimeapi.org/api/ip");
+			if (!response.ok) throw new Error("Failed to fetch date");
+			const data = await response.json();
+			setDate(new Date(data.datetime));
+		} catch (error) {
+			console.error("Error fetching actual date:", error);
+			setDate(new Date());
+			setError(error);
+		}
+	};
+
+	useEffect(() => {
+		fetchActualDate();
+	}, []);
+
+	return { date, error };
+};

src/modules/shared/components/adherenceCalendar/adherenceCalendar.tsx

@@ -7,16 +7,19 @@ import { useSetting } from "@dhis2/app-service-datastore";
 import { useSearchParams } from "react-router-dom";
 import { PatientProfile } from "../../models";
 import { getProgramMapping } from "../../utils";
-import { useAdherenceEvents } from "../ProfileArea/utils";
+import { useActualCurrentDate, useAdherenceEvents } from "../ProfileArea/utils";
 import NoDeviceAssigned from "../ProfileArea/components/NoDeviceAssigned";
 import BatteryLevel from "../BatteryLevel/BatteryLevel";
+import { CircularLoader } from "@dhis2/ui";
+import { Center } from "@dhis2/ui";
 
 export interface ProfileAreaProps {
 	profile: PatientProfile;
 	data: any;
 }
 
 function AdherenceCalendar({ profile, data }: ProfileAreaProps) {
+	const { date: actualDate } = useActualCurrentDate();
 	const [programMapping] = useSetting("programMapping", {
 		global: true,
 	});
@@ -130,16 +133,25 @@ function AdherenceCalendar({ profile, data }: ProfileAreaProps) {
 					marginRight: "12px",
 				}}
 			>
-				<Calendar
-					events={events}
-					frequency={profile.adherenceFrequency}
-					onClick={(val) => {
-						setBatteryLevel(val.batteryLevel);
-						setFormattedDateWithTime(formatDateWithTime(val.date));
-						setFormattedDate(formatDate(val.date));
-						setEventCode(val.event);
-					}}
-				/>
+				{actualDate == null ? (
+					<Center>
+						<CircularLoader />
+					</Center>
+				) : (
+					<Calendar
+						events={events}
+						frequency={profile.adherenceFrequency}
+						onClick={(val) => {
+							setBatteryLevel(val.batteryLevel);
+							setFormattedDateWithTime(
+								formatDateWithTime(val.date),
+							);
+							setFormattedDate(formatDate(val.date));
+							setEventCode(val.event);
+						}}
+						actualDate={actualDate}
+					/>
+				)}
 			</div>
 			<div
 				style={{

src/modules/shared/components/adherenceCalendar/components/calendar.tsx

@@ -18,35 +18,36 @@ export interface DateEvent {
 interface CalendarProps {
 	events: DateEvent[];
 	frequency: "Daily" | "Weekly" | "Monthly" | string;
+	actualDate: Date;
 	onClick: ({
 		date,
 		event,
 		batteryLevel,
 	}: {
 		date: string;
 		event: string;
-		batteryLevel: string;
+		batteryLevel?: string;
 	}) => void;
 }
 
-function Calendar({ events, frequency, onClick }: CalendarProps) {
+function Calendar({ events, frequency, onClick, actualDate }: CalendarProps) {
 	const cellColors = {
 		enrolled: "blue",
 		takenDose: "green",
 		notTakenDose: "red",
 	};
-	const month = new Date().getMonth();
-	const year = new Date().getFullYear();
+	const month = actualDate.getMonth();
+	const year = actualDate.getFullYear();
 
 	useEffect(() => {
 		let targetDate: string | null = null;
 		let targetColor = "";
 
 		switch (frequency) {
 			case "Daily":
-				targetDate = DateTime.fromJSDate(new Date()).toISO();
+				targetDate = DateTime.fromJSDate(actualDate).toISO();
 				targetColor = getCellColor(
-					DateTime.fromJSDate(new Date()).toISODate(),
+					DateTime.fromJSDate(actualDate).toISODate(),
 				)[0];
 				break;
 			case "Weekly":
@@ -62,9 +63,8 @@ function Calendar({ events, frequency, onClick }: CalendarProps) {
 					) {
 						targetColor = cellColors[event.event];
 						if (targetDate === null) {
-							targetDate = DateTime.fromJSDate(
-								new Date(),
-							).toISO();
+							targetDate =
+								DateTime.fromJSDate(actualDate).toISO();
 						}
 					}
 				});
@@ -81,9 +81,8 @@ function Calendar({ events, frequency, onClick }: CalendarProps) {
 							DateTime.fromJSDate(endDateM)
 					) {
 						if (targetDate === null) {
-							targetDate = DateTime.fromJSDate(
-								new Date(),
-							).toISO();
+							targetDate =
+								DateTime.fromJSDate(actualDate).toISO();
 							targetColor = cellColors[event.event];
 						}
 					}
@@ -126,7 +125,11 @@ function Calendar({ events, frequency, onClick }: CalendarProps) {
 		));
 	};
 
-	const showDetails = (date: string, event: string, batteryLevel: string) => {
+	const showDetails = (
+		date: string,
+		event: string,
+		batteryLevel?: string,
+	) => {
 		onClick({ date, event, batteryLevel });
 	};
 
@@ -168,7 +171,7 @@ function Calendar({ events, frequency, onClick }: CalendarProps) {
 					event.event === "takenDose" || event.event === "enrolled",
 			);
 
-			const currentDate = DateTime.now().toJSDate();
+			const currentDate = actualDate;
 
 			if (takenDosePresent) {
 				return filteredEvents.filter(