Fix: UI Update Suggestions: Appointment Page (Date Picker Filter) (#9958

)
ohcnetwork · Jan 20, 2025 · 23806f6 · 23806f6
1 parent 96fd5db
commit 23806f6
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 79 deletions.
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
@@ -50,7 +50,7 @@ function Calendar({
         day_selected:
           "bg-gray-900 text-gray-50 hover:bg-gray-900 hover:text-gray-50 focus:bg-gray-900 focus:text-gray-50 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50 dark:hover:text-gray-900 dark:focus:bg-gray-50 dark:focus:text-gray-900",
         day_today:
-          "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50",
+          "dark:bg-gray-800 dark:text-gray-50 border-2 border-green-500",
         day_outside:
           "day-outside text-gray-500 aria-selected:bg-gray-100/50 aria-selected:text-gray-500 dark:text-gray-400 dark:aria-selected:bg-gray-800/50 dark:aria-selected:text-gray-400",
         day_disabled: "text-gray-500 opacity-50 dark:text-gray-400",

diff --git a/src/components/ui/date-range-picker.tsx b/src/components/ui/date-range-picker.tsx
@@ -36,7 +36,7 @@ export function DateRangePicker({
             id="date"
             variant={"outline"}
             className={cn(
-              "justify-start text-left font-normal",
+              "justify-center text-left font-normal",
               !date && "text-muted-foreground",
             )}
           >

diff --git a/src/pages/Appointments/AppointmentsPage.tsx b/src/pages/Appointments/AppointmentsPage.tsx
@@ -1,5 +1,5 @@
 import careConfig from "@careConfig";
-import { CaretDownIcon, CheckIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { CaretDownIcon, CheckIcon } from "@radix-ui/react-icons";
 import { PopoverClose } from "@radix-ui/react-popover";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -107,19 +107,30 @@ function DateRangeDisplay({ dateFrom, dateTo }: DateRangeDisplayProps) {
 
   const today = new Date();
 
-  // Case 1: Today only
+  // Case 1: Today only or Yesterday only
   if (
-    dateFrom === dateQueryString(today) &&
-    dateTo === dateQueryString(today)
+    (dateFrom === dateQueryString(today) &&
+      dateTo === dateQueryString(today)) ||
+    (dateFrom === dateQueryString(subDays(today, 1)) &&
+      dateTo === dateQueryString(subDays(today, 1)))
   ) {
-    return (
-      <>
-        <span className="text-black">{t("today")}</span>
-        <span className="pl-1 text-gray-500">
-          ({formatDate(dateFrom, "dd MMM yyyy")})
-        </span>
-      </>
-    );
+    <>
+      {dateFrom === dateQueryString(today) ? (
+        <>
+          <span className="text-black">{t("today")}</span>
+          <span className="pl-1 text-gray-500">
+            ({formatDate(dateFrom, "dd MMM yyyy")})
+          </span>
+        </>
+      ) : (
+        <>
+          <span className="text-black">{t("yesterday")}</span>
+          <span className="pl-1 text-gray-500">
+            ({formatDate(dateFrom, "dd MMM yyyy")})
+          </span>
+        </>
+      )}
+    </>;
   }
 
   // Case 2: Pre-defined ranges
@@ -129,11 +140,6 @@ function DateRangeDisplay({ dateFrom, dateTo }: DateRangeDisplayProps) {
       from: subDays(today, 7),
       to: today,
     },
-    {
-      label: t("yesterday"),
-      from: subDays(today, 1),
-      to: subDays(today, 1),
-    },
     {
       label: t("next_week_short"),
       from: today,
@@ -192,8 +198,8 @@ function DateRangeDisplay({ dateFrom, dateTo }: DateRangeDisplayProps) {
 
     return (
       <>
-        <span>{t("on")} </span>
-        <span className="text-black">
+        <span className="capitalize text-gray-500">{t("on")} </span>
+        <span className="pl-1 text-black ">
           {formatDate(dateFrom, "dd MMM yyyy")}
         </span>
       </>
@@ -204,8 +210,8 @@ function DateRangeDisplay({ dateFrom, dateTo }: DateRangeDisplayProps) {
   if (dateFrom && !dateTo) {
     return (
       <>
-        <span>{t("after")} </span>
-        <span className="text-black">
+        <span className="capitalize text-gray-500">{t("after")} </span>
+        <span className="pl-1 text-black">
           {formatDate(dateFrom, "dd MMM yyyy")}
         </span>
       </>
@@ -215,8 +221,10 @@ function DateRangeDisplay({ dateFrom, dateTo }: DateRangeDisplayProps) {
   if (!dateFrom && dateTo) {
     return (
       <>
-        <span>{t("before")} </span>
-        <span className="text-black">{formatDate(dateTo, "dd MMM yyyy")}</span>
+        <span className=" capitalize text-gray-500">{t("before")} </span>
+        <span className="pl-1 text-black">
+          {formatDate(dateTo, "dd MMM yyyy")}
+        </span>
       </>
     );
   }
@@ -445,19 +453,19 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
 
           <div>
             <div className="flex items-center gap-1 -mt-2">
-              <Label>
-                <DateRangeDisplay
-                  dateFrom={qParams.date_from}
-                  dateTo={qParams.date_to}
-                />
-              </Label>
               <Popover modal>
                 <PopoverTrigger asChild>
-                  <Button variant="ghost" size="icon">
-                    <Edit3Icon className="size-4" />
+                  <Button variant="ghost">
+                    <Label>
+                      <DateRangeDisplay
+                        dateFrom={qParams.date_from}
+                        dateTo={qParams.date_to}
+                      />
+                    </Label>
+                    <Edit3Icon />
                   </Button>
                 </PopoverTrigger>
-                <PopoverContent className="w-auto">
+                <PopoverContent className="w-auto" align="start">
                   <div className="flex flex-col gap-4">
                     <div className="flex justify-between">
                       <Button
@@ -589,51 +597,6 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
             value={qParams.search ?? ""}
             onChange={(e) => setQParams({ ...qParams, search: e.target.value })}
           />
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="secondary">
-                <CareIcon icon="l-filter" className="mr-2" />
-                <span>{t("filter")}</span>
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="mr-11">
-              <div>
-                <Label className="mb-2">{t("date")}</Label>
-                <DateRangePicker
-                  date={{
-                    from: qParams.date_from
-                      ? new Date(qParams.date_from)
-                      : undefined,
-                    to: qParams.date_to ? new Date(qParams.date_to) : undefined,
-                  }}
-                  onChange={(date) =>
-                    setQParams({
-                      ...qParams,
-                      date_from: date?.from ? dateQueryString(date.from) : null,
-                      date_to: date?.to ? dateQueryString(date?.to) : null,
-                    })
-                  }
-                />
-              </div>
-              <div className="flex justify-end bg-gray-100 mt-6 -m-4 py-3 px-4 rounded-md">
-                <Button
-                  variant="outline"
-                  onClick={() =>
-                    setQParams({
-                      date_from: null,
-                      date_to: null,
-                      slot: null,
-                      search: null,
-                      practitioner: null,
-                    })
-                  }
-                >
-                  <ReloadIcon className="mr-2" />
-                  {t("clear_all_filters")}
-                </Button>
-              </div>
-            </PopoverContent>
-          </Popover>
         </div>
       </div>