Add base for fhir forms

.cursorrules

@@ -33,3 +33,5 @@ General Guidelines
 
 - Care uses a custom useQuery hook to fetch data from the API. (Docs @ /Utils/request/useQuery)
 - APIs are defined in the api.tsx file.
+- Use raviger for routing.
+- Use care icons for icons.

package.json

@@ -60,11 +60,13 @@
     "@pnotify/mobile": "^5.2.0",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.0",
-    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.4",
     "@sentry/browser": "^8.42.0",

src/Routers/AppRouter.tsx

@@ -28,6 +28,9 @@ import SampleRoutes from "@/Routers/routes/SampleRoutes";
 import ShiftingRoutes from "@/Routers/routes/ShiftingRoutes";
 import UserRoutes from "@/Routers/routes/UserRoutes";
 
+import { QuestionnaireList } from "../components/Questionnaire";
+import { QuestionnaireShow } from "../components/Questionnaire/show";
+
 export type RouteParams<T extends string> =
   T extends `${string}:${infer Param}/${infer Rest}`
     ? { [K in Param | keyof RouteParams<Rest>]: string }
@@ -64,6 +67,10 @@ const Routes: AppRoutes = {
 
   // Only include the icon route in development environment
   ...(import.meta.env.PROD ? { "/icons": () => <IconIndex /> } : {}),
+
+  // Questionnaire Routes
+  "/questionnaire": () => <QuestionnaireList />,
+  "/questionnaire/:id": ({ id }) => <QuestionnaireShow id={id} />,
 };
 
 export default function AppRouter() {

src/Routers/routes/ConsultationRoutes.tsx

@@ -11,6 +11,7 @@ import ManagePrescriptions from "@/components/Medicine/ManagePrescriptions";
 import PrescriptionsPrintPreview from "@/components/Medicine/PrintPreview";
 import { DailyRoundListDetails } from "@/components/Patient/DailyRoundListDetails";
 import { DailyRounds } from "@/components/Patient/DailyRounds";
+import EncounterQuestionnaire from "@/components/Patient/EncounterQuestionnaire";
 import FileUploadPage from "@/components/Patient/FileUploadPage";
 import PatientConsentRecords from "@/components/Patient/PatientConsentRecords";
 
@@ -159,6 +160,23 @@ const consultationRoutes: AppRoutes = {
         consultationId={consultationId}
       />
     ),
+  "/facility/:facilityId/patient/:patientId/consultation/:consultationId/questionnaire":
+    ({ facilityId, patientId, consultationId }) => (
+      <EncounterQuestionnaire
+        facilityId={facilityId}
+        patientId={patientId}
+        consultationId={consultationId}
+      />
+    ),
+  "/facility/:facilityId/patient/:patientId/consultation/:consultationId/questionnaire/:slug":
+    ({ facilityId, patientId, consultationId, slug }) => (
+      <EncounterQuestionnaire
+        facilityId={facilityId}
+        patientId={patientId}
+        consultationId={consultationId}
+        questionnaireSlug={slug}
+      />
+    ),
   "/facility/:facilityId/patient/:patientId/consultation/:consultationId/:tab":
     ({ facilityId, patientId, consultationId, tab }) => (
       <ConsultationDetails

src/Utils/request/api.tsx

@@ -90,6 +90,14 @@ import {
 } from "@/components/Users/models";
 
 import { PaginatedResponse } from "@/Utils/request/types";
+import {
+  BatchRequestBody,
+  BatchSubmissionResult,
+} from "@/types/questionnaire/batch";
+import type {
+  QuestionnaireDetail,
+  QuestionnaireResponse,
+} from "@/types/questionnaire/questionnaire";
 
 /**
  * A fake function that returns an empty object casted to type T
@@ -1399,6 +1407,74 @@ const routes = {
       },
     },
   },
+
+  // Questionnaire Routes
+  questionnaire: {
+    list: {
+      path: "/api/v1/questionnaire/",
+      method: "GET",
+      TRes: Type<PaginatedResponse<QuestionnaireDetail>>(),
+    },
+
+    detail: {
+      path: "/api/v1/questionnaire/{id}/",
+      method: "GET",
+      TRes: Type<QuestionnaireDetail>(),
+    },
+
+    create: {
+      path: "/api/v1/questionnaire/",
+      method: "POST",
+      TRes: Type<QuestionnaireDetail>(),
+      TBody: Type<Partial<QuestionnaireDetail>>(),
+    },
+
+    update: {
+      path: "/api/v1/questionnaire/{id}/",
+      method: "PUT",
+      TRes: Type<QuestionnaireDetail>(),
+      TBody: Type<QuestionnaireDetail>(),
+    },
+
+    partialUpdate: {
+      path: "/api/v1/questionnaire/{id}/",
+      method: "PATCH",
+      TRes: Type<QuestionnaireDetail>(),
+      TBody: Type<Partial<QuestionnaireDetail>>(),
+    },
+
+    delete: {
+      path: "/api/v1/questionnaire/{id}/",
+      method: "DELETE",
+      TRes: Type<Record<string, never>>(),
+    },
+
+    submit: {
+      path: "/api/v1/questionnaire/{id}/submit/",
+      method: "POST",
+      TRes: Type<Record<string, never>>(),
+      TBody: Type<{
+        resource_id: string;
+        encounter: string;
+        responses: Array<{
+          question_id: string;
+          value: string | number | boolean;
+          note?: string;
+          bodysite?: string;
+          method?: string;
+        }>;
+      }>(),
+    },
+  },
+
+  batchRequest: {
+    path: "/api/v1/batch_requests/",
+    method: "POST",
+    TRes: Type<{
+      results: BatchSubmissionResult[];
+    }>(),
+    TBody: Type<BatchRequestBody>(),
+  },
 } as const;
 
 export default routes;

src/Utils/request/request.ts

@@ -61,7 +61,7 @@ export default async function request<TData, TBody>(
       result = {
         res,
         data: res.ok ? data : undefined,
-        error: res.ok ? undefined : (data as Record<string, unknown>),
+        error: res.ok ? undefined : (data as Record<any, unknown>),
       };
 
       onResponse?.(result);

src/components/Common/SearchByMultipleFields.tsx

@@ -49,10 +49,7 @@ interface SearchByMultipleFieldsProps {
   clearSearch?: { value: boolean; params?: string[] };
 }
 
-type EventType = {
-  value: string;
-  target?: { value: string };
-};
+type EventType = React.ChangeEvent<HTMLInputElement> | { value: string };
 
 const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   id,
@@ -161,24 +158,21 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     return () => clearTimeout(timeout);
   }, [searchValue]);
 
-  const handleSearchChange = useCallback(
-    (value: string) => {
-      setSearchValue(value);
-    },
-    [selectedOption, onSearch],
-  );
+  const handleSearchChange = useCallback((event: EventType) => {
+    const value = "target" in event ? event.target.value : event.value;
+    setSearchValue(value);
+  }, []);
 
   const renderSearchInput = useMemo(() => {
     const commonProps = {
       ref: inputRef,
       value: searchValue,
-      onChange: (e: EventType) =>
-        handleSearchChange(e.target ? e.target.value : e.value),
+      onChange: handleSearchChange,
       className: cn(
         "flex-grow border-none shadow-none focus-visible:ring-0 h-10",
         inputClassName,
       ),
-    };
+    } as const;
 
     switch (selectedOption.type) {
       case "phone":

src/components/Patient/EncounterQuestionnaire.tsx

@@ -0,0 +1,82 @@
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Card, CardContent } from "@/components/ui/card";
+
+import Loading from "@/components/Common/Loading";
+import Page from "@/components/Common/Page";
+import { QuestionnaireForm } from "@/components/Questionnaire/QuestionnaireForm";
+
+import routes from "@/Utils/request/api";
+import useQuery from "@/Utils/request/useQuery";
+
+interface Props {
+  facilityId: string;
+  patientId: string;
+  consultationId: string;
+  questionnaireSlug?: string;
+}
+
+export default function EncounterQuestionnaire({
+  facilityId,
+  patientId,
+  consultationId,
+  questionnaireSlug,
+}: Props) {
+  const {
+    data: consultation,
+    loading,
+    error,
+  } = useQuery(routes.getConsultation, {
+    pathParams: { id: consultationId },
+  });
+
+  const { data: patient } = useQuery(routes.getPatient, {
+    pathParams: { id: patientId },
+  });
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (error) {
+    return (
+      <Alert variant="destructive">
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>
+          Failed to load consultation details. Please try again later.
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <Page
+      title="Questionnaire"
+      crumbsReplacements={{
+        [facilityId]: { name: patient?.facility_object?.name },
+        [patientId]: { name: patient?.name },
+        consultation: {
+          name: "Consultation",
+          uri: `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}`,
+        },
+        [consultationId]: {
+          name: consultation?.encounter_date
+            ? `Admitted on ${consultation.encounter_date}`
+            : consultation?.suggestion_text,
+        },
+      }}
+      backUrl={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}`}
+    >
+      <div className="container mx-auto p-4">
+        <Card>
+          <CardContent className="pt-6">
+            <QuestionnaireForm
+              resourceId={patientId}
+              encounterId={consultationId}
+              questionnaireSlug={questionnaireSlug}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </Page>
+  );
+}

src/components/Questionnaire/QuestionRenderer.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef } from "react";
+
+import { QuestionValidationError } from "@/types/questionnaire/batch";
+import { QuestionnaireResponse } from "@/types/questionnaire/form";
+import { Question } from "@/types/questionnaire/question";
+
+import { QuestionGroup } from "./QuestionTypes/QuestionGroup";
+
+interface QuestionRendererProps {
+  questions: Question[];
+  responses: QuestionnaireResponse[];
+  onResponseChange: (responses: QuestionnaireResponse[]) => void;
+  errors: QuestionValidationError[];
+  clearError: (questionId: string) => void;
+  disabled?: boolean;
+  activeGroupId?: string;
+}
+
+export function QuestionRenderer({
+  questions,
+  responses,
+  onResponseChange,
+  errors,
+  clearError,
+  disabled,
+  activeGroupId,
+}: QuestionRendererProps) {
+  const questionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
+
+  useEffect(() => {
+    if (activeGroupId && questionRefs.current[activeGroupId]) {
+      questionRefs.current[activeGroupId]?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    }
+  }, [activeGroupId]);
+
+  const handleResponseChange = (updatedResponse: QuestionnaireResponse) => {
+    const newResponses = [...responses];
+    const index = newResponses.findIndex(
+      (r) => r.question_id === updatedResponse.question_id,
+    );
+    if (index !== -1) {
+      newResponses[index] = updatedResponse;
+    } else {
+      newResponses.push(updatedResponse);
+    }
+    onResponseChange(newResponses);
+  };
+
+  return (
+    <div className="space-y-4">
+      {questions.map((question) => (
+        <div
+          key={question.id}
+          ref={(el) => (questionRefs.current[question.id] = el)}
+        >
+          <QuestionGroup
+            question={question}
+            questionnaireResponses={responses}
+            updateQuestionnaireResponseCB={handleResponseChange}
+            errors={errors}
+            clearError={clearError}
+            disabled={disabled}
+            activeGroupId={activeGroupId}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx

@@ -0,0 +1,22 @@
+import { Label } from "@/components/ui/label";
+
+import { QuestionnaireResponse } from "@/types/questionnaire/form";
+import { Question } from "@/types/questionnaire/question";
+
+interface AllergyQuestionProps {
+  question: Question;
+  questionnaireResponse: QuestionnaireResponse;
+  updateQuestionnaireResponseCB: (response: QuestionnaireResponse) => void;
+  disabled?: boolean;
+}
+
+export function AllergyQuestion({ question }: AllergyQuestionProps) {
+  return (
+    <div className="space-y-4">
+      <Label>{question.text}</Label>
+      <div className="rounded-lg border border-dashed border-gray-300 bg-gray-50 p-4 text-center text-sm text-gray-500">
+        Allergy component to be implemented
+      </div>
+    </div>
+  );
+}