From eb0ae3a98e5d796c9011f26d6b574c76636715af Mon Sep 17 00:00:00 2001
From: Christopher Seven Phiri <chris7phiri@gmail.com>
Date: Tue, 16 Jul 2024 12:35:22 +0200
Subject: [PATCH] update

---
 src/app/(dashboard)/stats/actions.ts   | 31 ++++++--------
 src/app/(dashboard)/stats/filters.ts   | 38 ++++++++++++++---
 src/components/filters/filter-card.tsx | 58 +++++++++++++++++++++++++-
 src/model/filters.ts                   | 14 +++++++
 4 files changed, 115 insertions(+), 26 deletions(-)

diff --git a/src/app/(dashboard)/stats/actions.ts b/src/app/(dashboard)/stats/actions.ts
index 339e0bf..9792ab4 100644
--- a/src/app/(dashboard)/stats/actions.ts
+++ b/src/app/(dashboard)/stats/actions.ts
@@ -6,7 +6,10 @@ import { FilterFormData } from "@/model/filters";
 import { fhirR4 } from "@smile-cdr/fhirts";
 import { format } from "date-fns";
 import { QueryParam, fixDate } from "./model";
-import { createPatientFilters } from "./filters";
+import {
+  createPatientFilters,
+  createQuestionnaireResponseFilters,
+} from "./filters";
 
 export async function fetchRequiredData() {
   const locationQuery = paramGenerator("/Location", {
@@ -51,22 +54,12 @@ export async function fetchData(formData: FormData) {
     rawDate = fixDate(rawDate);
   }
 
-  const allFinishVisitsQuery = new QueryParam({
-    _summary: "count",
-    questionnaire: "patient-finish-visit",
-  });
-
-  allFinishVisitsQuery.fromArray(baseFilter);
-  allFinishVisitsQuery.remove("date");
-
-  if (rawDate) {
-    allFinishVisitsQuery.set("authored", format(rawDate, "yyyy-MM-dd"));
-  }
-
-  const allVisits = allFinishVisitsQuery.toUrl("/QuestionnaireResponse");
-
   const bundle = await fetchBundle([
-    allVisits,
+    createQuestionnaireResponseFilters(
+      "patient-finish-visit",
+      rawDate,
+      baseFilter
+    ),
     createPatientFilters(["newly-diagnosed-client"], rawDate, baseFilter),
     createPatientFilters(["client-already-on-art"], rawDate, baseFilter),
     createPatientFilters(["exposed-infant"], rawDate, baseFilter),
@@ -74,9 +67,9 @@ export async function fetchData(formData: FormData) {
   ]);
   const summary: string[] = [
     "Total visits",
-    "Newly diagnosed clients",
-    "Already on Art",
-    "Exposed infant",
+    "Newly diagnosed clients (created)",
+    "Already on Art (created)",
+    "Exposed infant (created)",
   ];
   console.log(JSON.stringify(bundle));
 
diff --git a/src/app/(dashboard)/stats/filters.ts b/src/app/(dashboard)/stats/filters.ts
index 45f6827..cdeb610 100644
--- a/src/app/(dashboard)/stats/filters.ts
+++ b/src/app/(dashboard)/stats/filters.ts
@@ -6,28 +6,54 @@ type PatientType =
   | "client-already-on-art"
   | "exposed-infant";
 
+export const createQuestionnaireResponseFilters = (
+  questionnaire: string,
+  date: string | null,
+  baseFilter: Record<string, string>[],
+  hasCount = true
+) => {
+  const query = new QueryParam({
+    questionnaire: questionnaire,
+  });
+
+  if (hasCount) {
+    query.set("_summary", "count");
+  }
+  query.fromArray(baseFilter);
+
+  query.remove("date");
+  if (date) {
+    query.set(
+      "_tag",
+      `https://d-tree.org/fhir/created-on-tag|${format(date, "dd/MM/yyyy")}`
+    );
+  }
+  return query.toUrl("/QuestionnaireResponse");
+};
+
+
 export const createPatientFilters = (
   types: PatientType[] | undefined = undefined,
   date: string | null,
   baseFilter: Record<string, string>[]
 ) => {
-  const allNewlyRegisteredQuery = new QueryParam({
+  const query = new QueryParam({
     _summary: "count",
   });
-  allNewlyRegisteredQuery.fromArray(baseFilter);
+  query.fromArray(baseFilter);
 
-  allNewlyRegisteredQuery.remove("date");
+  query.remove("date");
   if (date) {
-    allNewlyRegisteredQuery.set(
+    query.set(
       "_tag",
       `https://d-tree.org/fhir/created-on-tag|${format(date, "dd/MM/yyyy")}`
     );
   }
   if (types) {
-    allNewlyRegisteredQuery.add(
+    query.add(
       "_tag",
       `https://d-tree.org/fhir/patient-meta-tag|${types.join(",")}`
     );
   }
-  return allNewlyRegisteredQuery.toUrl("/Patient");
+  return query.toUrl("/Patient");
 };
diff --git a/src/components/filters/filter-card.tsx b/src/components/filters/filter-card.tsx
index 4e3e30f..996b333 100644
--- a/src/components/filters/filter-card.tsx
+++ b/src/components/filters/filter-card.tsx
@@ -28,7 +28,8 @@ import { useFieldArray, useFormContext } from "react-hook-form";
 import { Input } from "@/components/ui/input";
 import { Button } from "../ui/button";
 import { cn } from "@/lib/utils";
-import { format, formatISO } from "date-fns";
+import { eachDayOfInterval, format, formatISO } from "date-fns";
+import { DateRange } from "react-day-picker";
 
 const GetInput = ({
   type,
@@ -126,6 +127,51 @@ const GetInput = ({
         )}
       />
     );
+  } else if (type === FilterParamType.dateRange) {
+    return (
+      <FormField
+        control={control}
+        name={name}
+        render={({ field }) => (
+          <FormItem className="flex flex-col">
+            <Popover>
+              <PopoverTrigger asChild>
+                <FormControl>
+                  <Button
+                    variant={"outline"}
+                    className={cn(
+                      "w-full pl-3 text-left font-normal",
+                      !field.value && "text-muted-foreground"
+                    )}
+                  >
+                    {field.value ? (
+                      formatRandge(field.value)
+                    ) : (
+                      <span>Pick a date</span>
+                    )}
+                    <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                  </Button>
+                </FormControl>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                  mode="range"
+                  selected={field.value}
+                  onSelect={(date) => {
+                    field.onChange(date);
+                  }}
+                  // disabled={(date) =>
+                  //   date > new Date() || date < new Date("1900-01-01")
+                  // }
+                  initialFocus
+                />
+              </PopoverContent>
+            </Popover>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    );
   }
 
   return <div>Input</div>;
@@ -177,4 +223,14 @@ const FilterCard = ({
   );
 };
 
+const formatRandge = (value: DateRange | undefined) => {
+  if (value) {
+    return `${value.from ? format(value.from, "PPP") : "Pick a date"} - ${
+      value.to ? format(value.to, "PPP") : "Pick a date"
+    }`;
+  }
+
+  return "Pick a date";
+};
+
 export default FilterCard;
diff --git a/src/model/filters.ts b/src/model/filters.ts
index a647061..7c7a8ab 100644
--- a/src/model/filters.ts
+++ b/src/model/filters.ts
@@ -9,6 +9,7 @@ export interface Filter {
 export enum FilterParamType {
   string = "string",
   date = "date",
+  dateRange = "dateRange",
   number = "number",
   boolean = "boolean",
   select = "select",
@@ -105,6 +106,19 @@ export const statsFilters: Filter[] = [
       },
     ],
   },
+  {
+    id: "filter-by-date-rage",
+    name: "Search by date range",
+    template: "date",
+    isObject: true,
+    params: [
+      {
+        name: "dateRange",
+        title: "Enter date",
+        type: FilterParamType.dateRange,
+      },
+    ],
+  },
 ];
 
 export const filters = {