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",
@@ -180,4 +182,4 @@
     "node": ">=22.11.0"
   },
   "packageManager": "[email protected]"
-}
+}

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,12 @@ import {
 } from "@/components/Users/models";
 
 import { PaginatedResponse } from "@/Utils/request/types";
+import {
+  BatchRequestBody,
+  BatchSubmissionResult,
+} from "@/types/questionnaire/batch";
+import { Code } from "@/types/questionnaire/code";
+import type { QuestionnaireDetail } from "@/types/questionnaire/questionnaire";
 
 /**
  * A fake function that returns an empty object casted to type T
@@ -1399,6 +1405,88 @@ const routes = {
       },
     },
   },
+
+  valueset: {
+    // list: {
+    //   path: "/api/v1/valueset/",
+    //   method: "GET",
+    //   TRes: Type<PaginatedResponse<ValueSet>>(),
+    // },
+    expand: {
+      path: "/api/v1/valueset/{system}/expand/",
+      method: "POST",
+      TBody: Type<{ search: string; count: number }>(),
+      TRes: Type<{ results: Code[] }>(),
+    },
+  },
+
+  // 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/Utils/request/types.ts

@@ -8,8 +8,9 @@ interface RouteBase<TData> {
   noAuth?: boolean;
 }
 
-export interface QueryRoute<TData> extends RouteBase<TData> {
-  method?: "GET";
+export interface QueryRoute<TData, TBody = unknown> extends RouteBase<TData> {
+  method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+  TBody?: TBody;
 }
 
 export interface MutationRoute<TData, TBody> extends RouteBase<TData> {
@@ -18,7 +19,7 @@ export interface MutationRoute<TData, TBody> extends RouteBase<TData> {
 }
 
 export type Route<TData, TBody> =
-  | QueryRoute<TData>
+  | QueryRoute<TData, TBody>
   | MutationRoute<TData, TBody>;
 
 export interface RequestResult<TData> {

src/Utils/request/useQuery.ts

@@ -14,8 +14,8 @@ export interface QueryOptions<TData> extends RequestOptions<TData> {
   key?: string;
 }
 
-export default function useQuery<TData>(
-  route: QueryRoute<TData>,
+export default function useQuery<TData, TBody = unknown>(
+  route: QueryRoute<TData, TBody>,
   options?: QueryOptions<TData>,
 ) {
   const [response, setResponse] = useState<RequestResult<TData>>();

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>
+  );
+}