diff --git a/public/locale/en.json b/public/locale/en.json
index a5d59a8d570..4404bb41e62 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1741,6 +1741,7 @@
"show_default_presets": "Show Default Presets",
"show_patient_presets": "Show Patient Presets",
"show_unread_notifications": "Show Unread",
+ "showing_all_appointments": "Showing all appointments",
"sign_in": "Sign in",
"sign_out": "Sign out",
"skill_add_error": "Error while adding skill",
diff --git a/src/components/Schedule/Appointments/AppointmentsPage.tsx b/src/components/Schedule/Appointments/AppointmentsPage.tsx
index 9bcc5953c3c..6e350c900d9 100644
--- a/src/components/Schedule/Appointments/AppointmentsPage.tsx
+++ b/src/components/Schedule/Appointments/AppointmentsPage.tsx
@@ -90,6 +90,124 @@ interface QueryParams {
search: string | null;
}
+interface DateRangeDisplayProps {
+ dateFrom: string | null;
+ dateTo: string | null;
+}
+
+function DateRangeDisplay({ dateFrom, dateTo }: DateRangeDisplayProps) {
+ const { t } = useTranslation();
+
+ if (!dateFrom && !dateTo) {
+ return (
+ {t("showing_all_appointments")}
+ );
+ }
+
+ const today = new Date();
+
+ // Case 1: Today only
+ if (
+ dateFrom === dateQueryString(today) &&
+ dateTo === dateQueryString(today)
+ ) {
+ return (
+ <>
+ {t("today")}
+
+ ({formatDate(dateFrom, "dd MMM yyyy")})
+
+ >
+ );
+ }
+
+ // Case 2: Pre-defined ranges
+ const ranges = [
+ {
+ label: t("last_fortnight_short"),
+ from: subDays(today, 14),
+ to: today,
+ },
+ {
+ label: t("last_week_short"),
+ from: subDays(today, 7),
+ to: today,
+ },
+ {
+ label: t("next_week_short"),
+ from: today,
+ to: addDays(today, 7),
+ },
+ {
+ label: t("next_fortnight_short"),
+ from: today,
+ to: addDays(today, 14),
+ },
+ ];
+
+ const matchingRange = ranges.find(
+ (range) =>
+ dateFrom &&
+ dateTo &&
+ dateQueryString(range.from) === dateFrom &&
+ dateQueryString(range.to) === dateTo,
+ );
+
+ if (matchingRange && dateFrom && dateTo) {
+ return (
+ <>
+ {matchingRange.label}
+
+ ({formatDate(dateFrom, "dd MMM yyyy")} -{" "}
+ {formatDate(dateTo, "dd MMM yyyy")})
+
+ >
+ );
+ }
+
+ // Case 3: Same date with relative labels
+ if (dateFrom && dateFrom === dateTo) {
+ const date = new Date(dateFrom);
+ let relativeDay = null;
+
+ if (isToday(date)) {
+ relativeDay = t("today");
+ } else if (isTomorrow(date)) {
+ relativeDay = t("tomorrow");
+ } else if (isYesterday(date)) {
+ relativeDay = t("yesterday");
+ }
+
+ if (relativeDay) {
+ return (
+ <>
+ {relativeDay}
+
+ ({formatDate(dateFrom, "dd MMM yyyy")})
+
+ >
+ );
+ }
+
+ return (
+ {formatDate(dateFrom, "dd MMM yyyy")}
+ );
+ }
+
+ // Case 4: Date range or single date
+ return (
+
+ {formatDate(dateFrom!, "dd MMM yyyy")}
+ {dateTo && (
+ <>
+ {" - "}
+ {formatDate(dateTo, "dd MMM yyyy")}
+ >
+ )}
+
+ );
+}
+
export default function AppointmentsPage(props: { facilityId?: string }) {
const { t } = useTranslation();
const authUser = useAuthUser();
@@ -112,9 +230,11 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
? resources?.find((r) => r.username === qParams.practitioner)
: undefined;
- // Sets the practitioner filter to the current user if they are in the list of
- // shedulable users and no practitioner was selected on first load.
useEffect(() => {
+ const updates: Partial = {};
+
+ // Sets the practitioner filter to the current user if they are in the list of
+ // shedulable users and no practitioner was selected.
if (
!shedulableUsersQuery.isLoading &&
!qParams.practitioner &&
@@ -122,9 +242,21 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
(r) => r.username === authUser.username,
)
) {
+ updates.practitioner = authUser.username;
+ }
+
+ // Set today's date range if no dates are present
+ if (!qParams.date_from && !qParams.date_to) {
+ const today = new Date();
+ updates.date_from = dateQueryString(today);
+ updates.date_to = dateQueryString(today);
+ }
+
+ // Only update if there are changes
+ if (Object.keys(updates).length > 0) {
setQParams({
...qParams,
- practitioner: authUser.username,
+ ...updates,
});
}
}, [shedulableUsersQuery.isLoading]);
@@ -272,28 +404,10 @@ export default function AppointmentsPage(props: { facilityId?: string }) {