From 8deec252ebc59a03fe3c053280286ac60de79b15 Mon Sep 17 00:00:00 2001
From: arhamathar <arhamathar789@gmail.com>
Date: Tue, 7 Jan 2025 15:49:10 +0530
Subject: [PATCH 01/16] diet preference options with kebab case value

---
 .../Questionnaire/QuestionTypes/EncounterQuestion.tsx       | 6 +++---
 src/types/emr/encounter.ts                                  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx b/src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx
index 00ba6ce0536..82341545d43 100644
--- a/src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx
@@ -392,9 +392,9 @@ export function EncounterQuestion({
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="vegetarian">Vegetarian</SelectItem>
-                  <SelectItem value="diary_free">Dairy Free</SelectItem>
-                  <SelectItem value="nut_free">Nut Free</SelectItem>
-                  <SelectItem value="gluten_free">Gluten Free</SelectItem>
+                  <SelectItem value="diary-free">Dairy Free</SelectItem>
+                  <SelectItem value="nut-free">Nut Free</SelectItem>
+                  <SelectItem value="gluten-free">Gluten Free</SelectItem>
                   <SelectItem value="vegan">Vegan</SelectItem>
                   <SelectItem value="halal">Halal</SelectItem>
                   <SelectItem value="kosher">Kosher</SelectItem>
diff --git a/src/types/emr/encounter.ts b/src/types/emr/encounter.ts
index 7b6fdb5bed6..afb13b6ffcc 100644
--- a/src/types/emr/encounter.ts
+++ b/src/types/emr/encounter.ts
@@ -43,9 +43,9 @@ export type EncounterDischargeDisposition =
 
 export type EncounterDietPreference =
   | "vegetarian"
-  | "diary_free"
-  | "nut_free"
-  | "gluten_free"
+  | "diary-free"
+  | "nut-free"
+  | "gluten-free"
   | "vegan"
   | "halal"
   | "kosher"

From e4c4e71e612559938aa32a8e88b93a3419d6c0c6 Mon Sep 17 00:00:00 2001
From: Bodhish Thomas <bodhish@gmail.com>
Date: Tue, 7 Jan 2025 17:32:03 +0530
Subject: [PATCH 02/16] feat: Add new fields to Question interface (#9824)

---
 package-lock.json                             |    6 +-
 src/Routers/routes/questionnaireRoutes.tsx    |    2 +
 .../Questionnaire/QuestionnaireEditor.tsx     | 1214 +++++++++++++++++
 src/types/questionnaire/questionnaire.ts      |    4 +
 src/types/questionnaire/questionnaireApi.ts   |    4 +-
 5 files changed, 1224 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Questionnaire/QuestionnaireEditor.tsx

diff --git a/package-lock.json b/package-lock.json
index edfd7250ef1..a95d10cbac0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -146,8 +146,8 @@
         "node": ">=22.8.0"
       },
       "optionalDependencies": {
-        "@esbuild/linux-arm64": "*",
-        "@esbuild/linux-x64": "*",
+        "@esbuild/linux-arm64": "latest",
+        "@esbuild/linux-x64": "latest",
         "@rollup/rollup-linux-arm64-gnu": "4.29.1",
         "@rollup/rollup-linux-x64-gnu": "4.29.1"
       }
@@ -3720,7 +3720,6 @@
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-17.0.0.tgz",
       "integrity": "sha512-LDDPOix/5N0j5QZxubiW9T0M0+1PR0rTDWeZF5pu1Tz91UQnuVK4qQ/EjY83Qm2QeX0eM8qDXANfDh3VVqtR4Q==",
-      "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.25.6",
         "css-box-model": "^1.2.1",
@@ -5379,7 +5378,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.4.tgz",
       "integrity": "sha512-Sch9idFJHJTMH9YNpxxESqABcAFweJG4tKv+0zo0m5XBvUSL8FM5xKcJLFLXononpePs8IclyX1KieL5SDUNgA==",
-      "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.1",
         "@radix-ui/react-collection": "1.1.1",
diff --git a/src/Routers/routes/questionnaireRoutes.tsx b/src/Routers/routes/questionnaireRoutes.tsx
index 69d3a114d5a..044f9fcc1d4 100644
--- a/src/Routers/routes/questionnaireRoutes.tsx
+++ b/src/Routers/routes/questionnaireRoutes.tsx
@@ -1,4 +1,5 @@
 import { QuestionnaireList } from "@/components/Questionnaire";
+import QuestionnaireEditor from "@/components/Questionnaire/QuestionnaireEditor";
 import { QuestionnaireShow } from "@/components/Questionnaire/show";
 
 import { AppRoutes } from "../AppRouter";
@@ -6,6 +7,7 @@ import { AppRoutes } from "../AppRouter";
 const QuestionnaireRoutes: AppRoutes = {
   "/questionnaire": () => <QuestionnaireList />,
   "/questionnaire/:id": ({ id }) => <QuestionnaireShow id={id} />,
+  "/questionnaire/:id/edit": ({ id }) => <QuestionnaireEditor id={id} />,
 };
 
 export default QuestionnaireRoutes;
diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx
new file mode 100644
index 00000000000..8c7f0fa0854
--- /dev/null
+++ b/src/components/Questionnaire/QuestionnaireEditor.tsx
@@ -0,0 +1,1214 @@
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "raviger";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+
+import mutate from "@/Utils/request/mutate";
+import useQuery from "@/Utils/request/useQuery";
+import {
+  AnswerOption,
+  EnableWhen,
+  Question,
+  QuestionType,
+  StructuredQuestionType,
+} from "@/types/questionnaire/question";
+import {
+  QuestionStatus,
+  QuestionnaireDetail,
+  QuestionnaireUpdate,
+  SubjectType,
+} from "@/types/questionnaire/questionnaire";
+import questionnaireApi from "@/types/questionnaire/questionnaireApi";
+
+import Loading from "../Common/Loading";
+import { QuestionnaireForm } from "./QuestionnaireForm";
+
+interface QuestionnaireEditorProps {
+  id: string;
+}
+
+export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState<"edit" | "preview">("edit");
+  const [expandedQuestions, setExpandedQuestions] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const {
+    data: initialQuestionnaire,
+    loading,
+    error,
+  } = useQuery(questionnaireApi.detail, {
+    pathParams: { id },
+  });
+
+  const { mutate: updateQuestionnaire, isPending } = useMutation({
+    mutationFn: mutate(questionnaireApi.update, {
+      pathParams: { id },
+    }),
+    onSuccess: () => {
+      toast.success("Questionnaire updated successfully");
+    },
+    onError: (_error) => {
+      toast.error("Failed to update questionnaire");
+    },
+  });
+
+  const [questionnaire, setQuestionnaire] =
+    useState<QuestionnaireUpdate | null>(null);
+
+  useEffect(() => {
+    if (initialQuestionnaire) {
+      setQuestionnaire({
+        ...initialQuestionnaire,
+        organizations: ["628b44da-3da0-4321-a75d-e53697b281bb"],
+      });
+    }
+  }, [initialQuestionnaire]);
+
+  if (loading) return <Loading />;
+  if (error) {
+    return (
+      <Alert variant="destructive">
+        <CareIcon icon="l-exclamation-circle" className="h-4 w-4" />
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>
+          Failed to load questionnaire. Please try again later.
+        </AlertDescription>
+      </Alert>
+    );
+  }
+  if (!questionnaire) {
+    return (
+      <Alert>
+        <CareIcon icon="l-info-circle" className="h-4 w-4" />
+        <AlertTitle>Not Found</AlertTitle>
+        <AlertDescription>
+          The requested questionnaire could not be found.
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  const updateQuestionnaireField = (
+    field: keyof QuestionnaireDetail,
+    value: any,
+  ) => {
+    setQuestionnaire((prev) => (prev ? { ...prev, [field]: value } : null));
+  };
+
+  const handleCancel = () => {
+    navigate(`/questionnaire/${id}`);
+  };
+
+  const handleDragEnd = (result: any) => {
+    if (!result.destination) return;
+
+    const items = Array.from(questionnaire.questions);
+    const [reorderedItem] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, reorderedItem);
+
+    updateQuestionnaireField("questions", items);
+  };
+
+  const toggleQuestionExpanded = (questionId: string) => {
+    setExpandedQuestions((prev) => {
+      const next = new Set(prev);
+      if (next.has(questionId)) {
+        next.delete(questionId);
+      } else {
+        next.add(questionId);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-6">
+      {/* Top bar: Title + Buttons */}
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Edit Questionnaire</h1>
+          <p className="text-sm text-muted-foreground">
+            {questionnaire.description}
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={handleCancel}>
+            <CareIcon icon="l-arrow-left" className="mr-2 h-4 w-4" />
+            Cancel
+          </Button>
+          <Button
+            onClick={() => updateQuestionnaire(questionnaire)}
+            disabled={isPending}
+          >
+            <CareIcon icon="l-save" className="mr-2 h-4 w-4" />
+            Save
+          </Button>
+        </div>
+      </div>
+
+      <Tabs
+        value={activeTab}
+        onValueChange={(v) => setActiveTab(v as "edit" | "preview")}
+      >
+        <TabsList className="mb-4">
+          <TabsTrigger value="edit">Edit</TabsTrigger>
+          <TabsTrigger value="preview">Preview</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="edit">
+          <div className="grid gap-6 lg:grid-cols-[300px,1fr]">
+            {/* Left Sidebar: Navigation */}
+            <div className="space-y-4">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Navigation</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <nav className="space-y-1">
+                    {questionnaire.questions.map((question, index) => {
+                      const hasSubQuestions =
+                        question.type === "group" &&
+                        question.questions &&
+                        question.questions.length > 0;
+                      return (
+                        <div key={question.id} className="space-y-1">
+                          <button
+                            onClick={() => {
+                              const element = document.getElementById(
+                                `question-${question.id}`,
+                              );
+                              if (element) {
+                                element.scrollIntoView({ behavior: "smooth" });
+                                toggleQuestionExpanded(question.id);
+                              }
+                            }}
+                            className={`w-full text-left px-3 py-2 text-sm rounded-md hover:bg-accent flex items-center gap-2 ${
+                              expandedQuestions.has(question.id)
+                                ? "bg-accent"
+                                : ""
+                            }`}
+                          >
+                            <span className="font-medium text-muted-foreground">
+                              {index + 1}.
+                            </span>
+                            <span className="flex-1 truncate">
+                              {question.text || "Untitled Question"}
+                            </span>
+                            <Badge variant="secondary" className="text-xs">
+                              {question.type}
+                            </Badge>
+                          </button>
+                          {hasSubQuestions && question.questions && (
+                            <div className="ml-6 border-l-2 border-muted pl-2 space-y-1">
+                              {question.questions.map(
+                                (subQuestion, subIndex) => (
+                                  <button
+                                    key={subQuestion.id}
+                                    onClick={() => {
+                                      const element = document.getElementById(
+                                        `question-${subQuestion.id}`,
+                                      );
+                                      if (element) {
+                                        element.scrollIntoView({
+                                          behavior: "smooth",
+                                        });
+                                        toggleQuestionExpanded(question.id);
+                                      }
+                                    }}
+                                    className="w-full text-left px-3 py-1.5 text-sm rounded-md hover:bg-accent flex items-center gap-2"
+                                  >
+                                    <span className="font-medium text-muted-foreground">
+                                      {index + 1}.{subIndex + 1}
+                                    </span>
+                                    <span className="flex-1 truncate">
+                                      {subQuestion.text || "Untitled Question"}
+                                    </span>
+                                    <Badge
+                                      variant="outline"
+                                      className="text-xs"
+                                    >
+                                      {subQuestion.type}
+                                    </Badge>
+                                  </button>
+                                ),
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </nav>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle>Properties</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div>
+                    <Label htmlFor="status">Status</Label>
+                    <Select
+                      value={questionnaire.status}
+                      onValueChange={(val: QuestionStatus) =>
+                        updateQuestionnaireField("status", val)
+                      }
+                    >
+                      <SelectTrigger id="status">
+                        <SelectValue placeholder="Select status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="active">Active</SelectItem>
+                        <SelectItem value="draft">Draft</SelectItem>
+                        <SelectItem value="retired">Retired</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div>
+                    <Label htmlFor="version">Version</Label>
+                    <Input
+                      id="version"
+                      value={questionnaire.version || ""}
+                      onChange={(e) =>
+                        updateQuestionnaireField("version", e.target.value)
+                      }
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor="subject_type">Subject Type</Label>
+                    <Select
+                      value={questionnaire.subject_type}
+                      onValueChange={(val: SubjectType) =>
+                        updateQuestionnaireField("subject_type", val)
+                      }
+                    >
+                      <SelectTrigger id="subject_type">
+                        <SelectValue placeholder="Select subject type" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="patient">Patient</SelectItem>
+                        <SelectItem value="encounter">Encounter</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Main Content */}
+            <div className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Basic Information</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div>
+                    <Label htmlFor="title">Title</Label>
+                    <Input
+                      id="title"
+                      value={questionnaire.title}
+                      onChange={(e) =>
+                        updateQuestionnaireField("title", e.target.value)
+                      }
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor="desc">Description</Label>
+                    <Textarea
+                      id="desc"
+                      value={questionnaire.description || ""}
+                      onChange={(e) =>
+                        updateQuestionnaireField("description", e.target.value)
+                      }
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between border-b">
+                  <div>
+                    <CardTitle>Questions</CardTitle>
+                    <p className="text-sm text-muted-foreground mt-1">
+                      {questionnaire.questions?.length || 0} question
+                      {questionnaire.questions?.length !== 1 ? "s" : ""}
+                    </p>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      const newQuestion: Question = {
+                        id: crypto.randomUUID(),
+                        link_id: `Q-${Date.now()}`,
+                        text: "New Question",
+                        type: "string",
+                        questions: [],
+                      };
+                      updateQuestionnaireField("questions", [
+                        ...questionnaire.questions,
+                        newQuestion,
+                      ]);
+                      setExpandedQuestions(
+                        (prev) => new Set([...prev, newQuestion.id]),
+                      );
+                    }}
+                  >
+                    <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
+                    Add Question
+                  </Button>
+                </CardHeader>
+                <CardContent className="p-6">
+                  <DragDropContext onDragEnd={handleDragEnd}>
+                    <Droppable droppableId="questions">
+                      {(provided) => (
+                        <div
+                          {...provided.droppableProps}
+                          ref={provided.innerRef}
+                          className="space-y-6"
+                        >
+                          {questionnaire.questions.map((question, index) => (
+                            <Draggable
+                              key={question.id}
+                              draggableId={question.id}
+                              index={index}
+                            >
+                              {(provided) => (
+                                <div
+                                  ref={provided.innerRef}
+                                  {...provided.draggableProps}
+                                  id={`question-${question.id}`}
+                                  className="relative"
+                                >
+                                  <div className="absolute -left-10 top-4 font-medium text-muted-foreground">
+                                    {index + 1}.
+                                  </div>
+                                  <QuestionEditor
+                                    question={question}
+                                    onChange={(updatedQuestion) => {
+                                      const newQuestions = [
+                                        ...questionnaire.questions,
+                                      ];
+                                      newQuestions[index] = updatedQuestion;
+                                      updateQuestionnaireField(
+                                        "questions",
+                                        newQuestions,
+                                      );
+                                    }}
+                                    onDelete={() => {
+                                      const newQuestions =
+                                        questionnaire.questions.filter(
+                                          (_, i) => i !== index,
+                                        );
+                                      updateQuestionnaireField(
+                                        "questions",
+                                        newQuestions,
+                                      );
+                                    }}
+                                    dragHandleProps={provided.dragHandleProps}
+                                    isExpanded={expandedQuestions.has(
+                                      question.id,
+                                    )}
+                                    onToggleExpand={() =>
+                                      toggleQuestionExpanded(question.id)
+                                    }
+                                    depth={0}
+                                  />
+                                </div>
+                              )}
+                            </Draggable>
+                          ))}
+                          {provided.placeholder}
+                        </div>
+                      )}
+                    </Droppable>
+                  </DragDropContext>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="preview">
+          <Card>
+            <CardHeader>
+              <CardTitle>Preview</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <QuestionnaireForm
+                questionnaireSlug={id}
+                patientId="preview"
+                subjectType={questionnaire.subject_type}
+                encounterId="preview"
+                facilityId="preview"
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+interface QuestionEditorProps {
+  question: Question;
+  onChange: (updated: Question) => void;
+  onDelete: () => void;
+  dragHandleProps?: any;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+  depth: number;
+  parentId?: string;
+}
+
+function QuestionEditor({
+  question,
+  onChange,
+  onDelete,
+  dragHandleProps,
+  isExpanded,
+  onToggleExpand,
+  depth,
+  parentId,
+}: QuestionEditorProps) {
+  const {
+    text,
+    type,
+    structured_type,
+    required,
+    repeats,
+    answer_option,
+    questions,
+  } = question;
+
+  const [expandedSubQuestions, setExpandedSubQuestions] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const updateField = <K extends keyof Question>(
+    field: K,
+    value: Question[K],
+  ) => {
+    onChange({ ...question, [field]: value });
+  };
+
+  const toggleSubQuestionExpanded = (questionId: string) => {
+    setExpandedSubQuestions((prev) => {
+      const next = new Set(prev);
+      if (next.has(questionId)) {
+        next.delete(questionId);
+      } else {
+        next.add(questionId);
+      }
+      return next;
+    });
+  };
+
+  const getQuestionPath = () => {
+    return parentId ? `${parentId}-${question.id}` : question.id;
+  };
+
+  return (
+    <Collapsible
+      open={isExpanded}
+      onOpenChange={onToggleExpand}
+      className={`rounded-lg border bg-card text-card-foreground shadow-sm ${
+        depth > 0 ? "border-l-4 border-l-primary/20" : ""
+      }`}
+    >
+      <div className="flex items-center p-4">
+        <div {...dragHandleProps} className="mr-2 cursor-move">
+          <CareIcon icon="l-arrow" className="h-4 w-4 text-muted-foreground" />
+        </div>
+        <CollapsibleTrigger className="flex-1 flex items-center">
+          <div className="flex-1">
+            <div className="font-medium text-left">
+              {text || "Untitled Question"}
+            </div>
+            <div className="flex gap-2 mt-1">
+              <Badge variant="secondary">{type}</Badge>
+              {required && <Badge>Required</Badge>}
+              {repeats && <Badge variant="outline">Repeatable</Badge>}
+              {type === "group" && questions && questions.length > 0 && (
+                <Badge variant="outline">
+                  {questions.length} sub-questions
+                </Badge>
+              )}
+            </div>
+          </div>
+          <CareIcon
+            icon={isExpanded ? "l-angle-up" : "l-angle-down"}
+            className="h-4 w-4 text-muted-foreground"
+          />
+        </CollapsibleTrigger>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="ml-2"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete();
+          }}
+        >
+          <CareIcon icon="l-trash-alt" className="h-4 w-4 text-destructive" />
+        </Button>
+      </div>
+
+      <CollapsibleContent>
+        <div className="p-4 pt-0 space-y-4">
+          <div className="flex gap-4">
+            <div className="flex-1">
+              <Label>Question Text</Label>
+              <Input
+                value={text}
+                onChange={(e) => updateField("text", e.target.value)}
+              />
+            </div>
+            <div className="flex-1">
+              <Label>Link ID</Label>
+              <Input
+                value={question.link_id}
+                onChange={(e) => updateField("link_id", e.target.value)}
+                placeholder="Unique identifier for this question"
+              />
+            </div>
+          </div>
+
+          <div>
+            <Label>Description</Label>
+            <Textarea
+              value={question.description || ""}
+              onChange={(e) => updateField("description", e.target.value)}
+              placeholder="Additional context or instructions for this question"
+              className="h-20"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label>Type</Label>
+              <Select
+                value={type}
+                onValueChange={(val: QuestionType) => {
+                  updateField("type", val);
+                  // Reset questions array when changing from group to another type
+                  if (val !== "group") {
+                    updateField("questions", []);
+                  }
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select question type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="group">Group</SelectItem>
+                  <SelectItem value="boolean">Boolean</SelectItem>
+                  <SelectItem value="decimal">Decimal</SelectItem>
+                  <SelectItem value="integer">Integer</SelectItem>
+                  <SelectItem value="date">Date</SelectItem>
+                  <SelectItem value="dateTime">DateTime</SelectItem>
+                  <SelectItem value="time">Time</SelectItem>
+                  <SelectItem value="string">String</SelectItem>
+                  <SelectItem value="text">Text</SelectItem>
+                  <SelectItem value="url">URL</SelectItem>
+                  <SelectItem value="choice">Choice</SelectItem>
+                  <SelectItem value="quantity">Quantity</SelectItem>
+                  <SelectItem value="structured">Structured</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {type === "structured" && (
+              <div>
+                <Label>Structured Type</Label>
+                <Select
+                  value={structured_type ?? "allergy_intolerance"}
+                  onValueChange={(val: StructuredQuestionType) =>
+                    updateField("structured_type", val)
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select structured type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="allergy_intolerance">
+                      Allergy Intolerance
+                    </SelectItem>
+                    <SelectItem value="medication_request">
+                      Medication Request
+                    </SelectItem>
+                    <SelectItem value="medication_statement">
+                      Medication Statement
+                    </SelectItem>
+                    <SelectItem value="symptom">Symptom</SelectItem>
+                    <SelectItem value="diagnosis">Diagnosis</SelectItem>
+                    <SelectItem value="encounter">Encounter</SelectItem>
+                    <SelectItem value="follow_up_appointment">
+                      Follow-up Appointment
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+          </div>
+
+          <div className="flex flex-wrap gap-4">
+            <div className="flex items-center gap-2">
+              <Switch
+                checked={required ?? false}
+                onCheckedChange={(val) => updateField("required", val)}
+                id={`required-${getQuestionPath()}`}
+              />
+              <Label htmlFor={`required-${getQuestionPath()}`}>Required</Label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Switch
+                checked={repeats ?? false}
+                onCheckedChange={(val) => updateField("repeats", val)}
+                id={`repeats-${getQuestionPath()}`}
+              />
+              <Label htmlFor={`repeats-${getQuestionPath()}`}>Repeatable</Label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Switch
+                checked={question.collect_time ?? false}
+                onCheckedChange={(val) => updateField("collect_time", val)}
+                id={`collect_time-${getQuestionPath()}`}
+              />
+              <Label htmlFor={`collect_time-${getQuestionPath()}`}>
+                Collect Time
+              </Label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Switch
+                checked={question.collect_performer ?? false}
+                onCheckedChange={(val) => updateField("collect_performer", val)}
+                id={`collect_performer-${getQuestionPath()}`}
+              />
+              <Label htmlFor={`collect_performer-${getQuestionPath()}`}>
+                Collect Performer
+              </Label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Switch
+                checked={question.collect_body_site ?? false}
+                onCheckedChange={(val) => updateField("collect_body_site", val)}
+                id={`collect_body_site-${getQuestionPath()}`}
+              />
+              <Label htmlFor={`collect_body_site-${getQuestionPath()}`}>
+                Collect Body Site
+              </Label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Switch
+                checked={question.collect_method ?? false}
+                onCheckedChange={(val) => updateField("collect_method", val)}
+                id={`collect_method-${getQuestionPath()}`}
+              />
+              <Label htmlFor={`collect_method-${getQuestionPath()}`}>
+                Collect Method
+              </Label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Switch
+                checked={question.read_only ?? false}
+                onCheckedChange={(val) => updateField("read_only", val)}
+                id={`read_only-${getQuestionPath()}`}
+              />
+              <Label htmlFor={`read_only-${getQuestionPath()}`}>
+                Read Only
+              </Label>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label>Styling Classes</Label>
+              <Input
+                value={question.styling_metadata?.classes || ""}
+                onChange={(e) =>
+                  updateField("styling_metadata", {
+                    ...question.styling_metadata,
+                    classes: e.target.value,
+                  })
+                }
+                placeholder="CSS classes (space-separated)"
+              />
+            </div>
+            <div>
+              <Label>Container Classes</Label>
+              <Input
+                value={question.styling_metadata?.containerClasses || ""}
+                onChange={(e) =>
+                  updateField("styling_metadata", {
+                    ...question.styling_metadata,
+                    containerClasses: e.target.value,
+                  })
+                }
+                placeholder="Container CSS classes"
+              />
+            </div>
+          </div>
+
+          {type === "choice" && (
+            <div className="space-y-4">
+              <div>
+                <Label>Answer Options</Label>
+                <div className="flex items-center gap-2 mb-2">
+                  <Select
+                    value={question.answer_value_set ?? "custom"}
+                    onValueChange={(val: string) =>
+                      updateField(
+                        "answer_value_set",
+                        val === "custom" ? undefined : val,
+                      )
+                    }
+                  >
+                    <SelectTrigger className="flex-1">
+                      <SelectValue placeholder="Select a value set (optional)" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="custom">Custom Options</SelectItem>
+                      <SelectItem value="system-yes-no">Yes/No</SelectItem>
+                      <SelectItem value="system-severity">
+                        Severity Levels
+                      </SelectItem>
+                      <SelectItem value="system-frequency">
+                        Frequency
+                      </SelectItem>
+                      <SelectItem value="system-duration">Duration</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                {(!question.answer_value_set ||
+                  question.answer_value_set === "custom") && (
+                  <div className="space-y-2">
+                    {(answer_option || []).map((opt, idx) => (
+                      <div key={idx} className="grid grid-cols-2 gap-2">
+                        <Input
+                          value={opt.value}
+                          onChange={(e) => {
+                            const newOptions = [...(answer_option || [])];
+                            newOptions[idx] = { ...opt, value: e.target.value };
+                            updateField("answer_option", newOptions);
+                          }}
+                          placeholder="Option value"
+                        />
+                        <div className="flex gap-2">
+                          <Input
+                            value={opt.display || ""}
+                            onChange={(e) => {
+                              const newOptions = [...(answer_option || [])];
+                              newOptions[idx] = {
+                                ...opt,
+                                display: e.target.value,
+                              };
+                              updateField("answer_option", newOptions);
+                            }}
+                            placeholder="Display text (optional)"
+                          />
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              const newOptions = answer_option?.filter(
+                                (_, i) => i !== idx,
+                              );
+                              updateField("answer_option", newOptions);
+                            }}
+                          >
+                            <CareIcon icon="l-times" className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    ))}
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        const newOption: AnswerOption = { value: "" };
+                        updateField("answer_option", [
+                          ...(answer_option || []),
+                          newOption,
+                        ]);
+                      }}
+                    >
+                      <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
+                      Add Option
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              <div className="space-y-4">
+                <Label>Enable When Conditions</Label>
+                <div className="space-y-2">
+                  {(question.enable_when || []).length > 0 && (
+                    <div>
+                      <Label className="text-xs">Enable Behavior</Label>
+                      <Select
+                        value={question.enable_behavior ?? "all"}
+                        onValueChange={(val: "all" | "any") =>
+                          updateField("enable_behavior", val)
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="all">
+                            All conditions must be met
+                          </SelectItem>
+                          <SelectItem value="any">
+                            Any condition must be met
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+                  {(question.enable_when || []).map((condition, idx) => (
+                    <div
+                      key={idx}
+                      className="grid grid-cols-[2fr,1fr,2fr] gap-2 items-start"
+                    >
+                      <div>
+                        <Label className="text-xs">Question</Label>
+                        <Input
+                          value={condition.question}
+                          onChange={(e) => {
+                            const newConditions = [
+                              ...(question.enable_when || []),
+                            ];
+                            newConditions[idx] = {
+                              ...condition,
+                              question: e.target.value,
+                            };
+                            updateField("enable_when", newConditions);
+                          }}
+                          placeholder="Question Link ID"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-xs">Operator</Label>
+                        <Select
+                          value={condition.operator}
+                          onValueChange={(
+                            val:
+                              | "equals"
+                              | "not_equals"
+                              | "exists"
+                              | "greater"
+                              | "less"
+                              | "greater_or_equals"
+                              | "less_or_equals",
+                          ) => {
+                            const newConditions = [
+                              ...(question.enable_when || []),
+                            ];
+
+                            switch (val) {
+                              case "greater":
+                              case "less":
+                              case "greater_or_equals":
+                              case "less_or_equals":
+                                newConditions[idx] = {
+                                  question: condition.question,
+                                  operator: val,
+                                  answer: 0,
+                                };
+                                break;
+                              case "exists":
+                                newConditions[idx] = {
+                                  question: condition.question,
+                                  operator: val,
+                                  answer: true,
+                                };
+                                break;
+                              case "equals":
+                              case "not_equals":
+                                newConditions[idx] = {
+                                  question: condition.question,
+                                  operator: val,
+                                  answer: "",
+                                };
+                                break;
+                            }
+
+                            updateField("enable_when", newConditions);
+                          }}
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="equals">Equals</SelectItem>
+                            <SelectItem value="not_equals">
+                              Not Equals
+                            </SelectItem>
+                            <SelectItem value="greater">
+                              Greater Than
+                            </SelectItem>
+                            <SelectItem value="less">Less Than</SelectItem>
+                            <SelectItem value="greater_or_equals">
+                              Greater Than or Equal
+                            </SelectItem>
+                            <SelectItem value="less_or_equals">
+                              Less Than or Equal
+                            </SelectItem>
+                            <SelectItem value="exists">Exists</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="flex gap-2">
+                        <div className="flex-1">
+                          <Label className="text-xs">Answer</Label>
+                          {condition.operator === "exists" ? (
+                            <Select
+                              value={condition.answer ? "true" : "false"}
+                              onValueChange={(val: "true" | "false") => {
+                                const newConditions = [
+                                  ...(question.enable_when || []),
+                                ];
+                                newConditions[idx] = {
+                                  question: condition.question,
+                                  operator: "exists" as const,
+                                  answer: val === "true",
+                                };
+                                updateField("enable_when", newConditions);
+                              }}
+                            >
+                              <SelectTrigger>
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="true">True</SelectItem>
+                                <SelectItem value="false">False</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          ) : (
+                            <Input
+                              value={condition.answer?.toString() ?? ""}
+                              type={
+                                [
+                                  "greater",
+                                  "less",
+                                  "greater_or_equals",
+                                  "less_or_equals",
+                                ].includes(condition.operator)
+                                  ? "number"
+                                  : "text"
+                              }
+                              onChange={(e) => {
+                                const newConditions = [
+                                  ...(question.enable_when || []),
+                                ];
+                                const value = e.target.value;
+                                let newCondition;
+
+                                if (
+                                  [
+                                    "greater",
+                                    "less",
+                                    "greater_or_equals",
+                                    "less_or_equals",
+                                  ].includes(condition.operator)
+                                ) {
+                                  newCondition = {
+                                    question: condition.question,
+                                    operator: condition.operator as
+                                      | "greater"
+                                      | "less"
+                                      | "greater_or_equals"
+                                      | "less_or_equals",
+                                    answer: Number(value),
+                                  };
+                                } else {
+                                  newCondition = {
+                                    question: condition.question,
+                                    operator: condition.operator as
+                                      | "equals"
+                                      | "not_equals",
+                                    answer: value,
+                                  };
+                                }
+
+                                newConditions[idx] = newCondition;
+                                updateField("enable_when", newConditions);
+                              }}
+                              placeholder="Answer value"
+                            />
+                          )}
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="mt-5"
+                          onClick={() => {
+                            const newConditions = question.enable_when?.filter(
+                              (_, i) => i !== idx,
+                            );
+                            updateField("enable_when", newConditions);
+                          }}
+                        >
+                          <CareIcon icon="l-times" className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      const newCondition: EnableWhen = {
+                        question: "",
+                        operator: "equals",
+                        answer: "",
+                      };
+                      updateField("enable_when", [
+                        ...(question.enable_when || []),
+                        newCondition,
+                      ]);
+                    }}
+                  >
+                    <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
+                    Add Condition
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {type === "group" && (
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <Label>Sub-Questions</Label>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    const newQuestion: Question = {
+                      id: crypto.randomUUID(),
+                      link_id: `Q-${Date.now()}`,
+                      text: "New Sub-Question",
+                      type: "string",
+                      questions: [],
+                    };
+                    updateField("questions", [
+                      ...(questions || []),
+                      newQuestion,
+                    ]);
+                    setExpandedSubQuestions(
+                      (prev) => new Set([...prev, newQuestion.id]),
+                    );
+                  }}
+                >
+                  <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
+                  Add Sub-Question
+                </Button>
+              </div>
+
+              <DragDropContext
+                onDragEnd={(result) => {
+                  if (!result.destination) return;
+
+                  const items = Array.from(questions || []);
+                  const [reorderedItem] = items.splice(result.source.index, 1);
+                  items.splice(result.destination.index, 0, reorderedItem);
+
+                  updateField("questions", items);
+                }}
+              >
+                <Droppable droppableId={`group-${getQuestionPath()}`}>
+                  {(provided) => (
+                    <div
+                      {...provided.droppableProps}
+                      ref={provided.innerRef}
+                      className="space-y-4"
+                    >
+                      {(questions || []).map((subQuestion, idx) => (
+                        <Draggable
+                          key={subQuestion.id}
+                          draggableId={`${getQuestionPath()}-${subQuestion.id}`}
+                          index={idx}
+                        >
+                          {(provided) => (
+                            <div
+                              ref={provided.innerRef}
+                              {...provided.draggableProps}
+                            >
+                              <QuestionEditor
+                                key={subQuestion.id}
+                                question={subQuestion}
+                                onChange={(updated) => {
+                                  const newQuestions = [...(questions || [])];
+                                  newQuestions[idx] = updated;
+                                  updateField("questions", newQuestions);
+                                }}
+                                onDelete={() => {
+                                  const newQuestions = questions?.filter(
+                                    (_, i) => i !== idx,
+                                  );
+                                  updateField("questions", newQuestions);
+                                }}
+                                dragHandleProps={provided.dragHandleProps}
+                                isExpanded={expandedSubQuestions.has(
+                                  subQuestion.id,
+                                )}
+                                onToggleExpand={() =>
+                                  toggleSubQuestionExpanded(subQuestion.id)
+                                }
+                                depth={depth + 1}
+                                parentId={getQuestionPath()}
+                              />
+                            </div>
+                          )}
+                        </Draggable>
+                      ))}
+                      {provided.placeholder}
+                    </div>
+                  )}
+                </Droppable>
+              </DragDropContext>
+            </div>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
diff --git a/src/types/questionnaire/questionnaire.ts b/src/types/questionnaire/questionnaire.ts
index 13117da5ac0..32d277ba000 100644
--- a/src/types/questionnaire/questionnaire.ts
+++ b/src/types/questionnaire/questionnaire.ts
@@ -17,6 +17,10 @@ export interface QuestionnaireDetail {
   subject_type: SubjectType;
 }
 
+export interface QuestionnaireUpdate extends QuestionnaireDetail {
+  organizations: string[];
+}
+
 export interface QuestionnaireForms {
   count: number;
   results: QuestionnaireDetail[];
diff --git a/src/types/questionnaire/questionnaireApi.ts b/src/types/questionnaire/questionnaireApi.ts
index f63535fa5c3..6be03b3a14c 100644
--- a/src/types/questionnaire/questionnaireApi.ts
+++ b/src/types/questionnaire/questionnaireApi.ts
@@ -2,7 +2,7 @@ import { HttpMethod, Type } from "@/Utils/request/api";
 import { PaginatedResponse } from "@/Utils/request/types";
 
 import { Organization } from "../organization/organization";
-import { QuestionnaireDetail } from "./questionnaire";
+import { QuestionnaireDetail, QuestionnaireUpdate } from "./questionnaire";
 
 export default {
   list: {
@@ -27,7 +27,7 @@ export default {
   update: {
     path: "/api/v1/questionnaire/{id}/",
     method: HttpMethod.PUT,
-    TRes: Type<QuestionnaireDetail>(),
+    TRes: Type<QuestionnaireUpdate>(),
     TBody: Type<QuestionnaireDetail>(),
   },
 

From 8a288a36376e2d03f5af787668cf0d48fb0afa6c Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Tue, 7 Jan 2025 18:36:38 +0530
Subject: [PATCH 03/16] Cleanup Labels in Questionnaire

---
 .../Questionnaire/QuestionLabel.tsx           |  29 ++-
 .../QuestionTypes/AllergyQuestion.tsx         |   9 +-
 .../FollowUpAppointmentQuestion.tsx           | 215 +++++++++---------
 .../QuestionTypes/FollowUpVisitQuestion.tsx   |   0
 .../MedicationStatementQuestion.tsx           |   9 +-
 .../QuestionTypes/QuestionGroup.tsx           |   8 +-
 6 files changed, 130 insertions(+), 140 deletions(-)
 delete mode 100644 src/components/Questionnaire/QuestionTypes/FollowUpVisitQuestion.tsx

diff --git a/src/components/Questionnaire/QuestionLabel.tsx b/src/components/Questionnaire/QuestionLabel.tsx
index 17855845b0f..3614c6b1b06 100644
--- a/src/components/Questionnaire/QuestionLabel.tsx
+++ b/src/components/Questionnaire/QuestionLabel.tsx
@@ -5,22 +5,33 @@ import type { Question } from "@/types/questionnaire/question";
 interface QuestionLabelProps {
   question: Question;
   className?: string;
+  groupLabel?: boolean;
 }
 
+const defaultGroupClass = "text-lg font-medium text-gray-900";
+const defaultInputClass = "text-base font-medium block";
+
 export function QuestionLabel({
   question,
-  className = "text-base font-medium block",
+  className,
+  groupLabel,
 }: QuestionLabelProps) {
+  const defaultClass = groupLabel ? defaultGroupClass : defaultInputClass;
   return (
-    <Label className={className}>
-      <div className="flex justify-between items-center text-gray-800 font-semibold">
-        <div>
-          {question.text}
-          {question.required && <span className="ml-1 text-red-500">*</span>}
+    <Label className={className ?? defaultClass}>
+      <div className="flex flex-col gap-3">
+        {groupLabel && <div className="h-1 w-4 rounded-full bg-indigo-600" />}
+        <div className="flex gap-3 items-center">
+          <span>
+            {question.text}
+            {question.required && <span className="ml-1 text-red-500">*</span>}
+          </span>
+          {question.unit?.code && (
+            <span className="text-sm text-gray-500">
+              ({question.unit.code})
+            </span>
+          )}
         </div>
-        {question.unit?.code && (
-          <span className="text-sm text-gray-500">{question.unit.code}</span>
-        )}
       </div>
     </Label>
   );
diff --git a/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx b/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx
index 4e802f407a1..f0c0c6a5581 100644
--- a/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx
@@ -78,7 +78,6 @@ const CATEGORY_ICONS: Record<AllergyCategory, React.ReactNode> = {
 };
 
 export function AllergyQuestion({
-  question,
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
@@ -119,11 +118,7 @@ export function AllergyQuestion({
   };
 
   return (
-    <div className="space-y-4">
-      <Label className="text-base font-medium">
-        {question.text}
-        {question.required && <span className="ml-1 text-red-500">*</span>}
-      </Label>
+    <>
       {allergies.length > 0 && (
         <div className="rounded-lg border">
           <div className="overflow-x-auto">
@@ -170,7 +165,7 @@ export function AllergyQuestion({
         onSelect={handleAddAllergy}
         disabled={disabled}
       />
-    </div>
+    </>
   );
 }
 interface AllergyItemProps {
diff --git a/src/components/Questionnaire/QuestionTypes/FollowUpAppointmentQuestion.tsx b/src/components/Questionnaire/QuestionTypes/FollowUpAppointmentQuestion.tsx
index 098c4f71151..f0f1cd3d79f 100644
--- a/src/components/Questionnaire/QuestionTypes/FollowUpAppointmentQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/FollowUpAppointmentQuestion.tsx
@@ -38,7 +38,6 @@ interface FollowUpVisitQuestionProps {
 }
 
 export function FollowUpAppointmentQuestion({
-  question,
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
@@ -94,121 +93,113 @@ export function FollowUpAppointmentQuestion({
 
   return (
     <div className="space-y-4">
-      <Label className="text-base font-medium">
-        {question.text}
-        {question.required && <span className="ml-1 text-red-500">*</span>}
-      </Label>
-      <div className="space-y-4">
-        <div>
-          <Label className="mb-2">{t("reason_for_visit")}</Label>
-          <Textarea
-            placeholder={t("reason_for_visit_placeholder")}
-            value={value.reason_for_visit || ""}
-            onChange={(e) => handleUpdate({ reason_for_visit: e.target.value })}
-            disabled={disabled}
-          />
-        </div>
-        <div>
-          <Label className="block mb-2">{t("select_practitioner")}</Label>
-          <Select
-            disabled={resourcesQuery.isLoading || disabled}
-            value={resource?.id}
-            onValueChange={(value) =>
-              setResource(
-                resourcesQuery.data?.users.find((r) => r.id === value),
-              )
-            }
-          >
-            <SelectTrigger>
-              <SelectValue placeholder={t("show_all")} />
-            </SelectTrigger>
-            <SelectContent>
-              {resourcesQuery.data?.users.map((user) => (
-                <SelectItem key={user.username} value={user.id}>
-                  <div className="flex items-center gap-2">
-                    <Avatar
-                      imageUrl={user.profile_picture_url}
-                      name={formatDisplayName(user)}
-                      className="size-6 rounded-full"
-                    />
-                    <span>{formatDisplayName(user)}</span>
-                  </div>
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+      <div>
+        <Label className="mb-2">{t("reason_for_visit")}</Label>
+        <Textarea
+          placeholder={t("reason_for_visit_placeholder")}
+          value={value.reason_for_visit || ""}
+          onChange={(e) => handleUpdate({ reason_for_visit: e.target.value })}
+          disabled={disabled}
+        />
+      </div>
+      <div>
+        <Label className="block mb-2">{t("select_practitioner")}</Label>
+        <Select
+          disabled={resourcesQuery.isLoading || disabled}
+          value={resource?.id}
+          onValueChange={(value) =>
+            setResource(resourcesQuery.data?.users.find((r) => r.id === value))
+          }
+        >
+          <SelectTrigger>
+            <SelectValue placeholder={t("show_all")} />
+          </SelectTrigger>
+          <SelectContent>
+            {resourcesQuery.data?.users.map((user) => (
+              <SelectItem key={user.username} value={user.id}>
+                <div className="flex items-center gap-2">
+                  <Avatar
+                    imageUrl={user.profile_picture_url}
+                    name={formatDisplayName(user)}
+                    className="size-6 rounded-full"
+                  />
+                  <span>{formatDisplayName(user)}</span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
 
-        <div className="flex gap-2">
-          <div className="flex-1">
-            <Label className="block mb-2">{t("select_date")}</Label>
-            <DatePicker date={selectedDate} onChange={setSelectedDate} />
-          </div>
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <Label className="block mb-2">{t("select_date")}</Label>
+          <DatePicker date={selectedDate} onChange={setSelectedDate} />
+        </div>
 
-          <div className="flex-1">
-            <Label className="block mb-2">{t("select_time")}</Label>
-            {(!slotsQuery.data?.results ||
-              slotsQuery.data.results.length === 0) &&
-            selectedDate &&
-            resource ? (
-              <div className="rounded-md border border-input px-3 py-2 text-sm text-muted-foreground">
-                {t("no_slots_available")}
-              </div>
-            ) : (
-              <Select
-                disabled={
-                  !selectedDate || !resource || slotsQuery.isLoading || disabled
-                }
-                value={value.slot_id}
-                onValueChange={(slotId) => {
-                  handleUpdate({ slot_id: slotId });
-                }}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder={t("select_time_slot")} />
-                </SelectTrigger>
-                <SelectContent>
-                  {slotsQuery.data?.results &&
-                    groupSlotsByAvailability(slotsQuery.data.results).map(
-                      ({ availability, slots }) => (
-                        <div key={availability.name}>
-                          <div className="px-2 py-1.5 text-sm font-semibold">
-                            {availability.name}
-                          </div>
-                          {slots.map((slot) => {
-                            const isFullyBooked =
-                              slot.allocated >= availability.tokens_per_slot;
-                            return (
-                              <SelectItem
-                                key={slot.id}
-                                value={slot.id}
-                                disabled={isFullyBooked}
-                              >
-                                <div className="flex items-center justify-between">
-                                  <span>
-                                    {format(slot.start_datetime, "HH:mm")}
-                                  </span>
-                                  <span className="pl-1 text-xs text-gray-500">
-                                    {availability.tokens_per_slot -
-                                      slot.allocated}{" "}
-                                    {t("slots_left")}
-                                  </span>
-                                </div>
-                              </SelectItem>
-                            );
-                          })}
+        <div className="flex-1">
+          <Label className="block mb-2">{t("select_time")}</Label>
+          {(!slotsQuery.data?.results ||
+            slotsQuery.data.results.length === 0) &&
+          selectedDate &&
+          resource ? (
+            <div className="rounded-md border border-input px-3 py-2 text-sm text-muted-foreground">
+              {t("no_slots_available")}
+            </div>
+          ) : (
+            <Select
+              disabled={
+                !selectedDate || !resource || slotsQuery.isLoading || disabled
+              }
+              value={value.slot_id}
+              onValueChange={(slotId) => {
+                handleUpdate({ slot_id: slotId });
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder={t("select_time_slot")} />
+              </SelectTrigger>
+              <SelectContent>
+                {slotsQuery.data?.results &&
+                  groupSlotsByAvailability(slotsQuery.data.results).map(
+                    ({ availability, slots }) => (
+                      <div key={availability.name}>
+                        <div className="px-2 py-1.5 text-sm font-semibold">
+                          {availability.name}
                         </div>
-                      ),
-                    )}
-                  {slotsQuery.data?.results.length === 0 && (
-                    <div className="px-2 py-4 text-center text-sm text-gray-500">
-                      {t("no_slots_available")}
-                    </div>
+                        {slots.map((slot) => {
+                          const isFullyBooked =
+                            slot.allocated >= availability.tokens_per_slot;
+                          return (
+                            <SelectItem
+                              key={slot.id}
+                              value={slot.id}
+                              disabled={isFullyBooked}
+                            >
+                              <div className="flex items-center justify-between">
+                                <span>
+                                  {format(slot.start_datetime, "HH:mm")}
+                                </span>
+                                <span className="pl-1 text-xs text-gray-500">
+                                  {availability.tokens_per_slot -
+                                    slot.allocated}{" "}
+                                  {t("slots_left")}
+                                </span>
+                              </div>
+                            </SelectItem>
+                          );
+                        })}
+                      </div>
+                    ),
                   )}
-                </SelectContent>
-              </Select>
-            )}
-          </div>
+                {slotsQuery.data?.results.length === 0 && (
+                  <div className="px-2 py-4 text-center text-sm text-gray-500">
+                    {t("no_slots_available")}
+                  </div>
+                )}
+              </SelectContent>
+            </Select>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/components/Questionnaire/QuestionTypes/FollowUpVisitQuestion.tsx b/src/components/Questionnaire/QuestionTypes/FollowUpVisitQuestion.tsx
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
index e4b63b125bf..42321e84b7c 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
@@ -53,7 +53,6 @@ const MEDICATION_STATEMENT_INITIAL_VALUE: Omit<
 };
 
 export function MedicationStatementQuestion({
-  question,
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
@@ -110,11 +109,7 @@ export function MedicationStatementQuestion({
   };
 
   return (
-    <div className="space-y-4">
-      <Label className="text-base font-medium">
-        {question.text}
-        {question.required && <span className="ml-1 text-red-500">*</span>}
-      </Label>
+    <>
       {medications.length > 0 && (
         <div className="rounded-lg border space-y-4">
           <ul className="space-y-2 divide-y-2 divide-gray-200 divide-dashed">
@@ -141,7 +136,7 @@ export function MedicationStatementQuestion({
         disabled={disabled}
         searchPostFix=" clinical drug"
       />
-    </div>
+    </>
   );
 }
 
diff --git a/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx b/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
index 8176dbaf294..132f9628a70 100644
--- a/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
+++ b/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
@@ -2,7 +2,7 @@ import { memo } from "react";
 
 import { cn } from "@/lib/utils";
 
-import { Label } from "@/components/ui/label";
+import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
 
 import { QuestionValidationError } from "@/types/questionnaire/batch";
 import type { QuestionnaireResponse } from "@/types/questionnaire/form";
@@ -111,16 +111,14 @@ export const QuestionGroup = memo(function QuestionGroup({
     <div
       title="group_styling"
       className={cn(
-        "space-y-4 rounded-lg border p-4",
+        "space-y-4 rounded-lg",
         isActive && "ring-2 ring-primary",
         question.styling_metadata?.classes && question.styling_metadata.classes,
       )}
     >
       {question.text && (
         <div className="space-y-1">
-          <Label className="text-lg font-semibold text-gray-900">
-            {question.text}
-          </Label>
+          <QuestionLabel question={question} groupLabel />
           {question.description && (
             <p className="text-sm text-muted-foreground">
               {question.description}

From 5ce7943f53522b20a7f1d564d9af7325fb13b81f Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Tue, 7 Jan 2025 18:38:42 +0530
Subject: [PATCH 04/16] Allergy intolerance Cleanup (#9812)

---
 .../QuestionnaireResponsesList.tsx            | 110 ++----
 .../StructuredResponseView.tsx                |  99 -----
 src/components/Patient/allergy/list.tsx       |   6 +-
 .../Questionnaire/QuestionRenderer.tsx        |   3 +
 .../QuestionTypes/AllergyQuestion.tsx         | 348 ++++++++++++++++--
 .../QuestionTypes/QuestionGroup.tsx           |   4 +
 .../QuestionTypes/QuestionInput.tsx           |   3 +
 .../Questionnaire/QuestionnaireForm.tsx       |   1 +
 .../Questionnaire/structured/handlers.ts      |  32 +-
 .../Questionnaire/structured/types.ts         |   9 +-
 .../Encounters/tabs/EncounterUpdatesTab.tsx   |   6 +
 .../allergyIntolerance/allergyIntolerance.ts  |  11 +-
 src/types/questionnaire/form.ts               |   4 +-
 13 files changed, 397 insertions(+), 239 deletions(-)
 delete mode 100644 src/components/Facility/ConsultationDetails/StructuredResponseView.tsx

diff --git a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
index 11f9ea4529b..3cbad3a75c6 100644
--- a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
+++ b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
@@ -1,10 +1,8 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 import PaginatedList from "@/CAREUI/misc/PaginatedList";
 
-import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 
 import routes from "@/Utils/request/api";
@@ -13,8 +11,6 @@ import { Encounter } from "@/types/emr/encounter";
 import { Question } from "@/types/questionnaire/question";
 import { QuestionnaireResponse } from "@/types/questionnaire/questionnaireResponse";
 
-import { StructuredResponseView } from "./StructuredResponseView";
-
 interface Props {
   encounter: Encounter;
 }
@@ -128,21 +124,6 @@ function QuestionGroup({
 
 export default function QuestionnaireResponsesList({ encounter }: Props) {
   const { t } = useTranslation();
-  const [expandedResponseIds, setExpandedResponseIds] = useState<Set<string>>(
-    new Set(),
-  );
-
-  const toggleResponse = (id: string) => {
-    setExpandedResponseIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  };
 
   return (
     <PaginatedList
@@ -204,74 +185,63 @@ export default function QuestionnaireResponsesList({ encounter }: Props) {
                           <CareIcon icon="l-clock" className="h-3 w-3" />
                           <span>{formatDateTime(item.created_date)}</span>
                           <span className="mt-0.5 text-xs text-muted-foreground">
-                            by {item.created_by?.first_name || ""}{" "}
-                            {item.created_by?.last_name || ""}
-                            {` (${item.created_by?.user_type})`}
+                            {!item.questionnaire && (
+                              <>
+                                {Object.values(
+                                  item.structured_responses ?? {},
+                                )[0]?.submit_type === "CREATE"
+                                  ? "Created"
+                                  : "Updated"}{" "}
+                              </>
+                            )}
+                            {
+                              <>
+                                by {item.created_by?.first_name || ""}{" "}
+                                {item.created_by?.last_name || ""}
+                                {item.created_by?.user_type &&
+                                  ` (${item.created_by?.user_type})`}
+                              </>
+                            }
                           </span>
                         </div>
                       </div>
                     </div>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => toggleResponse(item.id)}
-                    >
-                      {expandedResponseIds.has(item.id) ? "Hide" : "View"}
-                    </Button>
                   </div>
 
-                  {expandedResponseIds.has(item.id) && (
+                  {item.questionnaire && (
                     <div className="mt-3 border-t pt-3">
-                      {item.questionnaire ? (
-                        // Existing questionnaire response rendering
-                        <div className="space-y-4">
-                          {item.questionnaire?.questions.map(
-                            (question: Question) => {
-                              // Skip structured questions for now as they need special handling
-                              if (question.type === "structured") return null;
-
-                              const response = item.responses.find(
-                                (r) => r.question_id === question.id,
-                              );
+                      <div className="space-y-4">
+                        {item.questionnaire?.questions.map(
+                          (question: Question) => {
+                            // Skip structured questions for now as they need special handling
+                            if (question.type === "structured") return null;
 
-                              if (question.type === "group") {
-                                return (
-                                  <QuestionGroup
-                                    key={question.id}
-                                    group={question}
-                                    responses={item.responses}
-                                  />
-                                );
-                              }
-
-                              if (!response) return null;
+                            const response = item.responses.find(
+                              (r) => r.question_id === question.id,
+                            );
 
+                            if (question.type === "group") {
                               return (
-                                <QuestionResponseValue
+                                <QuestionGroup
                                   key={question.id}
-                                  question={question}
-                                  response={response}
+                                  group={question}
+                                  responses={item.responses}
                                 />
                               );
-                            },
-                          )}
-                        </div>
-                      ) : item.structured_responses ? (
-                        // New structured response rendering
-                        Object.entries(item.structured_responses).map(
-                          ([type, response]) => {
+                            }
+
+                            if (!response) return null;
+
                             return (
-                              <StructuredResponseView
-                                key={response.id}
-                                type={type}
-                                id={response.id}
-                                patientId={encounter.patient.id}
-                                encounterId={encounter.id}
+                              <QuestionResponseValue
+                                key={question.id}
+                                question={question}
+                                response={response}
                               />
                             );
                           },
-                        )
-                      ) : null}
+                        )}
+                      </div>
                     </div>
                   )}
                 </Card>
diff --git a/src/components/Facility/ConsultationDetails/StructuredResponseView.tsx b/src/components/Facility/ConsultationDetails/StructuredResponseView.tsx
deleted file mode 100644
index 9d6b06ae2b8..00000000000
--- a/src/components/Facility/ConsultationDetails/StructuredResponseView.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-
-import { AllergyTable } from "@/components/Patient/allergy/AllergyTable";
-import { DiagnosisTable } from "@/components/Patient/diagnosis/DiagnosisTable";
-import { SymptomTable } from "@/components/Patient/symptoms/SymptomTable";
-
-import query from "@/Utils/request/query";
-import { AllergyIntolerance } from "@/types/emr/allergyIntolerance/allergyIntolerance";
-import allergyApi from "@/types/emr/allergyIntolerance/allergyIntoleranceApi";
-import { Diagnosis } from "@/types/emr/diagnosis/diagnosis";
-import diagnosisApi from "@/types/emr/diagnosis/diagnosisApi";
-import { Symptom } from "@/types/emr/symptom/symptom";
-import symptomApi from "@/types/emr/symptom/symptomApi";
-
-interface Props {
-  type: string;
-  id: string;
-  patientId: string;
-  encounterId: string;
-}
-
-export function StructuredResponseView({
-  type,
-  id,
-  patientId,
-  encounterId,
-}: Props) {
-  const getRouteAndParams = () => {
-    const params: Record<string, string> = { patientId };
-    switch (type) {
-      case "symptom":
-        return {
-          route: symptomApi.retrieveSymptom,
-          pathParams: { ...params, symptomId: id },
-          queryParams: { encounter: encounterId },
-        };
-      case "diagnosis":
-        return {
-          route: diagnosisApi.retrieveDiagnosis,
-          pathParams: { ...params, diagnosisId: id },
-          queryParams: { encounter: encounterId },
-        };
-      case "allergy_intolerance":
-        return {
-          route: allergyApi.retrieveAllergy,
-          pathParams: { ...params, allergyId: id },
-          queryParams: { encounter: encounterId },
-        };
-    }
-  };
-
-  const routeConfig = getRouteAndParams();
-
-  const { data, isLoading, error } = useQuery({
-    queryKey: [type, id],
-    queryFn: query(routeConfig?.route as any, {
-      pathParams: routeConfig?.pathParams,
-      queryParams: routeConfig?.queryParams,
-    }),
-    enabled: !!id && !!routeConfig,
-  });
-
-  if (!routeConfig) return null;
-
-  if (isLoading) {
-    return <div className="animate-pulse h-20 bg-muted rounded-md" />;
-  }
-
-  if (error) {
-    console.error(`Error loading ${type}:`, error);
-    return <div>Error loading {type}</div>;
-  }
-
-  switch (type) {
-    case "symptom":
-      return (
-        <SymptomTable
-          symptoms={[data as unknown as Symptom]}
-          showHeader={true}
-        />
-      );
-    case "diagnosis":
-      return (
-        <DiagnosisTable
-          diagnoses={[data as unknown as Diagnosis]}
-          showHeader={true}
-        />
-      );
-    case "allergy_intolerance":
-      return (
-        <AllergyTable
-          allergies={[data as unknown as AllergyIntolerance]}
-          showHeader={true}
-        />
-      );
-    default:
-      return null;
-  }
-}
diff --git a/src/components/Patient/allergy/list.tsx b/src/components/Patient/allergy/list.tsx
index 372b353563e..284b7885a70 100644
--- a/src/components/Patient/allergy/list.tsx
+++ b/src/components/Patient/allergy/list.tsx
@@ -20,13 +20,15 @@ import allergyIntoleranceApi from "@/types/emr/allergyIntolerance/allergyIntoler
 
 interface AllergyListProps {
   patientId: string;
+  encounterId?: string;
 }
 
-export function AllergyList({ patientId }: AllergyListProps) {
+export function AllergyList({ patientId, encounterId }: AllergyListProps) {
   const { data: allergies, isLoading } = useQuery({
-    queryKey: ["allergies", patientId],
+    queryKey: ["allergies", patientId, encounterId],
     queryFn: query(allergyIntoleranceApi.getAllergy, {
       pathParams: { patientId },
+      queryParams: encounterId ? { encounter: encounterId } : undefined,
     }),
   });
 
diff --git a/src/components/Questionnaire/QuestionRenderer.tsx b/src/components/Questionnaire/QuestionRenderer.tsx
index 8882f38b162..71b04cb0a77 100644
--- a/src/components/Questionnaire/QuestionRenderer.tsx
+++ b/src/components/Questionnaire/QuestionRenderer.tsx
@@ -16,6 +16,7 @@ interface QuestionRendererProps {
   activeGroupId?: string;
   encounterId?: string;
   facilityId: string;
+  patientId: string;
 }
 
 export function QuestionRenderer({
@@ -28,6 +29,7 @@ export function QuestionRenderer({
   activeGroupId,
   encounterId,
   facilityId,
+  patientId,
 }: QuestionRendererProps) {
   const questionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
 
@@ -70,6 +72,7 @@ export function QuestionRenderer({
             clearError={clearError}
             disabled={disabled}
             activeGroupId={activeGroupId}
+            patientId={patientId}
           />
         </div>
       ))}
diff --git a/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx b/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx
index f0c0c6a5581..798c6dee303 100644
--- a/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx
@@ -1,17 +1,21 @@
 "use client";
 
 import {
+  CheckCircledIcon,
+  CircleBackslashIcon,
   DotsVerticalIcon,
   MinusCircledIcon,
   Pencil2Icon,
 } from "@radix-ui/react-icons";
+import { useQuery } from "@tanstack/react-query";
 import {
   BeakerIcon,
   CookingPotIcon,
   HeartPulseIcon,
   LeafIcon,
 } from "lucide-react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -41,19 +45,25 @@ import {
 
 import ValueSetSelect from "@/components/Questionnaire/ValueSetSelect";
 
-import { AllergyIntolerance } from "@/types/emr/allergyIntolerance/allergyIntolerance";
+import query from "@/Utils/request/query";
+import {
+  AllergyIntolerance,
+  AllergyIntoleranceRequest,
+} from "@/types/emr/allergyIntolerance/allergyIntolerance";
+import allergyIntoleranceApi from "@/types/emr/allergyIntolerance/allergyIntoleranceApi";
 import { Code } from "@/types/questionnaire/code";
 import { QuestionnaireResponse } from "@/types/questionnaire/form";
 import { Question } from "@/types/questionnaire/question";
 
 interface AllergyQuestionProps {
+  patientId: string;
   question: Question;
   questionnaireResponse: QuestionnaireResponse;
   updateQuestionnaireResponseCB: (response: QuestionnaireResponse) => void;
   disabled?: boolean;
 }
 
-const ALLERGY_INITIAL_VALUE: Partial<AllergyIntolerance> = {
+const ALLERGY_INITIAL_VALUE: Partial<AllergyIntoleranceRequest> = {
   code: { code: "", display: "", system: "" },
   clinical_status: "active",
   verification_status: "confirmed",
@@ -77,19 +87,68 @@ const CATEGORY_ICONS: Record<AllergyCategory, React.ReactNode> = {
   biologic: <HeartPulseIcon className="h-4 w-4" />,
 };
 
+function convertToAllergyRequest(
+  allergy: AllergyIntolerance,
+): AllergyIntoleranceRequest {
+  return {
+    id: allergy.id,
+    code: allergy.code,
+    clinical_status: allergy.clinical_status,
+    verification_status: allergy.verification_status,
+    category: allergy.category,
+    criticality: allergy.criticality,
+    last_occurrence: allergy.last_occurrence,
+    note: allergy.note,
+    encounter: allergy.encounter,
+  };
+}
+
 export function AllergyQuestion({
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
+  patientId,
 }: AllergyQuestionProps) {
   const allergies =
-    (questionnaireResponse.values?.[0]?.value as AllergyIntolerance[]) || [];
+    (questionnaireResponse.values?.[0]?.value as AllergyIntoleranceRequest[]) ||
+    [];
+
+  const { data: patientAllergies } = useQuery({
+    queryKey: ["allergies", patientId],
+    queryFn: query(allergyIntoleranceApi.getAllergy, {
+      pathParams: { patientId },
+    }),
+  });
+
+  useEffect(() => {
+    if (patientAllergies?.results && !allergies.length) {
+      updateQuestionnaireResponseCB({
+        ...questionnaireResponse,
+        values: [
+          {
+            type: "allergy_intolerance",
+            value: patientAllergies.results.map(convertToAllergyRequest),
+          },
+        ],
+      });
+      if (patientAllergies.count > patientAllergies.results.length) {
+        toast.info(
+          `Showing first ${patientAllergies.results.length} of ${patientAllergies.count} allergies`,
+        );
+      }
+    }
+  }, [
+    patientAllergies,
+    allergies.length,
+    questionnaireResponse,
+    updateQuestionnaireResponseCB,
+  ]);
 
   const handleAddAllergy = (code: Code) => {
     const newAllergies = [
       ...allergies,
       { ...ALLERGY_INITIAL_VALUE, code },
-    ] as AllergyIntolerance[];
+    ] as AllergyIntoleranceRequest[];
     updateQuestionnaireResponseCB({
       ...questionnaireResponse,
       values: [{ type: "allergy_intolerance", value: newAllergies }],
@@ -106,7 +165,7 @@ export function AllergyQuestion({
 
   const handleUpdateAllergy = (
     index: number,
-    updates: Partial<AllergyIntolerance>,
+    updates: Partial<AllergyIntoleranceRequest>,
   ) => {
     const newAllergies = allergies.map((allergy, i) =>
       i === index ? { ...allergy, ...updates } : allergy,
@@ -121,24 +180,19 @@ export function AllergyQuestion({
     <>
       {allergies.length > 0 && (
         <div className="rounded-lg border">
-          <div className="overflow-x-auto">
+          <div className="hidden md:block overflow-x-auto">
             <Table>
               <TableHeader>
                 <TableRow>
                   <TableHead className="w-[40px]"></TableHead>
                   <TableHead className="w-[220px]">Substance</TableHead>
-                  <TableHead className="w-[85px] text-center whitespace-normal px-0.5">
-                    Clinical
-                    <br />
-                    Status
-                  </TableHead>
                   <TableHead className="w-[65px] text-center px-0.5">
                     Critical
                   </TableHead>
                   <TableHead className="w-[85px] text-center px-0.5">
                     Status
                   </TableHead>
-                  <TableHead className="w-[125px] text-center px-0.5">
+                  <TableHead className="w-[100px] text-center px-0.5 pr-6">
                     Occurrence
                   </TableHead>
                   <TableHead className="w-[35px]"></TableHead>
@@ -157,6 +211,200 @@ export function AllergyQuestion({
               </TableBody>
             </Table>
           </div>
+
+          <div className="md:hidden divide-y divide-gray-200">
+            {allergies.map((allergy, index) => (
+              <div
+                key={index}
+                className={`p-3 space-y-3 ${
+                  allergy.clinical_status === "inactive"
+                    ? "opacity-60"
+                    : allergy.clinical_status === "resolved"
+                      ? "line-through"
+                      : ""
+                }`}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Select
+                      value={allergy.category}
+                      onValueChange={(value) =>
+                        handleUpdateAllergy(index, { category: value })
+                      }
+                      disabled={disabled}
+                    >
+                      <SelectTrigger className="h-8 w-[32px] px-0 [&>svg]:hidden flex items-center justify-center">
+                        <SelectValue>
+                          {allergy.category &&
+                            CATEGORY_ICONS[allergy.category as AllergyCategory]}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {Object.entries(ALLERGY_CATEGORIES).map(
+                          ([value, label]) => (
+                            <SelectItem key={value} value={value}>
+                              <div className="flex items-center gap-2">
+                                {CATEGORY_ICONS[value as AllergyCategory]}
+                                <span>{label}</span>
+                              </div>
+                            </SelectItem>
+                          ),
+                        )}
+                      </SelectContent>
+                    </Select>
+                    <span className="font-medium">{allergy.code.display}</span>
+                  </div>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        disabled={disabled}
+                        className="h-8 w-8"
+                      >
+                        <DotsVerticalIcon className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onClick={() =>
+                          handleUpdateAllergy(index, {
+                            note: allergy.note !== undefined ? undefined : "",
+                          })
+                        }
+                      >
+                        <Pencil2Icon className="h-4 w-4 mr-2" />
+                        {allergy.note !== undefined
+                          ? "Hide Notes"
+                          : "Add Notes"}
+                      </DropdownMenuItem>
+                      {allergy.clinical_status !== "active" && (
+                        <DropdownMenuItem
+                          onClick={() =>
+                            handleUpdateAllergy(index, {
+                              clinical_status: "active",
+                            })
+                          }
+                        >
+                          <CheckCircledIcon className="h-4 w-4 mr-2" />
+                          Mark Active
+                        </DropdownMenuItem>
+                      )}
+                      {allergy.clinical_status !== "inactive" && (
+                        <DropdownMenuItem
+                          onClick={() =>
+                            handleUpdateAllergy(index, {
+                              clinical_status: "inactive",
+                            })
+                          }
+                        >
+                          <CircleBackslashIcon className="h-4 w-4 mr-2" />
+                          Mark Inactive
+                        </DropdownMenuItem>
+                      )}
+                      {allergy.clinical_status !== "resolved" && (
+                        <DropdownMenuItem
+                          onClick={() =>
+                            handleUpdateAllergy(index, {
+                              clinical_status: "resolved",
+                            })
+                          }
+                        >
+                          <CheckCircledIcon className="h-4 w-4 mr-2 text-green-600" />
+                          Mark Resolved
+                        </DropdownMenuItem>
+                      )}
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        className="text-destructive focus:text-destructive"
+                        onClick={() => handleRemoveAllergy(index)}
+                      >
+                        <MinusCircledIcon className="h-4 w-4 mr-2" />
+                        Remove Allergy
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <Label className="text-xs text-gray-500">Criticality</Label>
+                    <Select
+                      value={allergy.criticality}
+                      onValueChange={(value) =>
+                        handleUpdateAllergy(index, { criticality: value })
+                      }
+                      disabled={disabled}
+                    >
+                      <SelectTrigger className="h-8 mt-1">
+                        <SelectValue placeholder="Critical" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="low">Low</SelectItem>
+                        <SelectItem value="high">High</SelectItem>
+                        <SelectItem value="unable-to-assess">
+                          Unable to Assess
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div>
+                    <Label className="text-xs text-gray-500">Status</Label>
+                    <Select
+                      value={allergy.verification_status}
+                      onValueChange={(value) =>
+                        handleUpdateAllergy(index, {
+                          verification_status: value,
+                        })
+                      }
+                      disabled={disabled}
+                    >
+                      <SelectTrigger className="h-8 mt-1">
+                        <SelectValue placeholder="Verify" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="confirmed">Confirmed</SelectItem>
+                        <SelectItem value="unconfirmed">Unconfirmed</SelectItem>
+                        <SelectItem value="refuted">Refuted</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div>
+                    <Label className="text-xs text-gray-500">Occurrence</Label>
+                    <Input
+                      type="date"
+                      value={allergy.last_occurrence || ""}
+                      onChange={(e) =>
+                        handleUpdateAllergy(index, {
+                          last_occurrence: e.target.value,
+                        })
+                      }
+                      disabled={disabled}
+                      className="h-8 mt-1"
+                    />
+                  </div>
+                </div>
+
+                {allergy.note !== undefined && (
+                  <div>
+                    <Label className="text-xs text-gray-500">Notes</Label>
+                    <Input
+                      type="text"
+                      placeholder="Add notes about the allergy..."
+                      value={allergy.note ?? ""}
+                      onChange={(e) =>
+                        handleUpdateAllergy(index, { note: e.target.value })
+                      }
+                      disabled={disabled}
+                      className="mt-1"
+                    />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
         </div>
       )}
       <ValueSetSelect
@@ -169,9 +417,9 @@ export function AllergyQuestion({
   );
 }
 interface AllergyItemProps {
-  allergy: AllergyIntolerance;
+  allergy: AllergyIntoleranceRequest;
   disabled?: boolean;
-  onUpdate?: (allergy: Partial<AllergyIntolerance>) => void;
+  onUpdate?: (allergy: Partial<AllergyIntoleranceRequest>) => void;
   onRemove?: () => void;
 }
 const AllergyTableRow = ({
@@ -180,11 +428,29 @@ const AllergyTableRow = ({
   onUpdate,
   onRemove,
 }: AllergyItemProps) => {
-  const [showNotes, setShowNotes] = useState(false);
+  const [showNotes, setShowNotes] = useState(allergy.note !== undefined);
+
+  const rowClassName = `group ${
+    allergy.clinical_status === "inactive"
+      ? "opacity-60"
+      : allergy.clinical_status === "resolved"
+        ? "line-through"
+        : ""
+  }`;
+
+  const handleNotesToggle = () => {
+    if (showNotes) {
+      setShowNotes(false);
+      onUpdate?.({ note: undefined });
+    } else {
+      setShowNotes(true);
+      onUpdate?.({ note: "" });
+    }
+  };
 
   return (
     <>
-      <TableRow className="group">
+      <TableRow className={rowClassName}>
         <TableCell className="min-w-[40px] py-1 pr-0">
           <Select
             value={allergy.category}
@@ -220,22 +486,6 @@ const AllergyTableRow = ({
         <TableCell className="min-w-[220px] font-medium py-1 pl-1">
           {allergy.code.display}
         </TableCell>
-        <TableCell className="min-w-[85px] py-1 px-0.5">
-          <Select
-            value={allergy.clinical_status}
-            onValueChange={(value) => onUpdate?.({ clinical_status: value })}
-            disabled={disabled}
-          >
-            <SelectTrigger className="h-7 w-[85px] px-1">
-              <SelectValue placeholder="Status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="active">Active</SelectItem>
-              <SelectItem value="inactive">Inactive</SelectItem>
-              <SelectItem value="resolved">Resolved</SelectItem>
-            </SelectContent>
-          </Select>
-        </TableCell>
         <TableCell className="min-w-[65px] py-1 px-0.5">
           <Select
             value={allergy.criticality}
@@ -270,7 +520,7 @@ const AllergyTableRow = ({
             </SelectContent>
           </Select>
         </TableCell>
-        <TableCell className="min-w-[125px] py-1 px-1">
+        <TableCell className="min-w-[100px] py-1 px-1">
           <Input
             type="date"
             value={allergy.last_occurrence || ""}
@@ -292,10 +542,34 @@ const AllergyTableRow = ({
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => setShowNotes(!showNotes)}>
+              <DropdownMenuItem onClick={handleNotesToggle}>
                 <Pencil2Icon className="h-4 w-4 mr-2" />
                 {showNotes ? "Hide Notes" : "Add Notes"}
               </DropdownMenuItem>
+              {allergy.clinical_status !== "active" && (
+                <DropdownMenuItem
+                  onClick={() => onUpdate?.({ clinical_status: "active" })}
+                >
+                  <CheckCircledIcon className="h-4 w-4 mr-2" />
+                  Mark Active
+                </DropdownMenuItem>
+              )}
+              {allergy.clinical_status !== "inactive" && (
+                <DropdownMenuItem
+                  onClick={() => onUpdate?.({ clinical_status: "inactive" })}
+                >
+                  <CircleBackslashIcon className="h-4 w-4 mr-2" />
+                  Mark Inactive
+                </DropdownMenuItem>
+              )}
+              {allergy.clinical_status !== "resolved" && (
+                <DropdownMenuItem
+                  onClick={() => onUpdate?.({ clinical_status: "resolved" })}
+                >
+                  <CheckCircledIcon className="h-4 w-4 mr-2 text-green-600" />
+                  Mark Resolved
+                </DropdownMenuItem>
+              )}
               <DropdownMenuSeparator />
               <DropdownMenuItem
                 className="text-destructive focus:text-destructive"
@@ -310,12 +584,12 @@ const AllergyTableRow = ({
       </TableRow>
       {showNotes && (
         <TableRow>
-          <TableCell colSpan={7} className="px-4 py-2">
+          <TableCell colSpan={6} className="px-4 py-2">
             <Label className="text-xs text-gray-500">Notes</Label>
             <Input
               type="text"
               placeholder="Add notes about the allergy..."
-              value={allergy.note || ""}
+              value={allergy.note ?? ""}
               onChange={(e) => onUpdate?.({ note: e.target.value })}
               disabled={disabled}
               className="mt-0.5"
diff --git a/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx b/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
index 132f9628a70..f615964eeec 100644
--- a/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
+++ b/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
@@ -20,6 +20,7 @@ interface QuestionGroupProps {
   disabled?: boolean;
   activeGroupId?: string;
   facilityId: string;
+  patientId: string;
 }
 
 function isQuestionEnabled(
@@ -83,6 +84,7 @@ export const QuestionGroup = memo(function QuestionGroup({
   disabled,
   activeGroupId,
   facilityId,
+  patientId,
 }: QuestionGroupProps) {
   const isEnabled = isQuestionEnabled(question, questionnaireResponses);
 
@@ -101,6 +103,7 @@ export const QuestionGroup = memo(function QuestionGroup({
         clearError={() => clearError(question.id)}
         disabled={disabled}
         facilityId={facilityId}
+        patientId={patientId}
       />
     );
   }
@@ -145,6 +148,7 @@ export const QuestionGroup = memo(function QuestionGroup({
             clearError={clearError}
             disabled={disabled}
             activeGroupId={activeGroupId}
+            patientId={patientId}
           />
         ))}
       </div>
diff --git a/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx b/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx
index c7df9d23153..e6249bbe491 100644
--- a/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx
+++ b/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx
@@ -36,6 +36,7 @@ interface QuestionInputProps {
   clearError: () => void;
   disabled?: boolean;
   facilityId: string;
+  patientId: string;
 }
 
 export function QuestionInput({
@@ -47,6 +48,7 @@ export function QuestionInput({
   clearError,
   disabled,
   facilityId,
+  patientId,
 }: QuestionInputProps) {
   const questionnaireResponse = questionnaireResponses.find(
     (v) => v.question_id === question.id,
@@ -83,6 +85,7 @@ export function QuestionInput({
       withLabel: false,
       clearError,
       index,
+      patientId,
     };
 
     switch (question.type) {
diff --git a/src/components/Questionnaire/QuestionnaireForm.tsx b/src/components/Questionnaire/QuestionnaireForm.tsx
index ad9e802ade0..8c7c02b5613 100644
--- a/src/components/Questionnaire/QuestionnaireForm.tsx
+++ b/src/components/Questionnaire/QuestionnaireForm.tsx
@@ -350,6 +350,7 @@ export function QuestionnaireForm({
               disabled={isProcessing}
               activeGroupId={activeGroupId}
               errors={form.errors}
+              patientId={patientId}
               clearError={(questionId: string) => {
                 setQuestionnaireForms((prev) =>
                   prev.map((f) =>
diff --git a/src/components/Questionnaire/structured/handlers.ts b/src/components/Questionnaire/structured/handlers.ts
index 380860be3e6..5d11c1b7359 100644
--- a/src/components/Questionnaire/structured/handlers.ts
+++ b/src/components/Questionnaire/structured/handlers.ts
@@ -27,27 +27,21 @@ const handlers: {
   [K in StructuredQuestionType]: StructuredHandler<K>;
 } = {
   allergy_intolerance: {
-    getRequests: (allergies, { patientId, encounterId }) =>
-      allergies.map((allergy) => {
-        // Ensure all required fields have default values
-        const body: RequestTypeFor<"allergy_intolerance"> = {
-          clinical_status: allergy.clinical_status ?? "active",
-          verification_status: allergy.verification_status ?? "unconfirmed",
-          category: allergy.category ?? "medication",
-          criticality: allergy.criticality ?? "low",
-          code: allergy.code,
-          last_occurrence: allergy.last_occurrence,
-          note: allergy.note,
-          encounter: encounterId,
-        };
-
-        return {
-          url: `/api/v1/patient/${patientId}/allergy_intolerance/`,
+    getRequests: (allergies, { patientId, encounterId }) => {
+      return [
+        {
+          url: `/api/v1/patient/${patientId}/allergy_intolerance/upsert/`,
           method: "POST",
-          body,
+          body: {
+            datapoints: allergies.map((allergy) => ({
+              ...allergy,
+              encounter: encounterId,
+            })),
+          },
           reference_id: "allergy_intolerance",
-        };
-      }),
+        },
+      ];
+    },
   },
   medication_request: {
     getRequests: (medications, { patientId, encounterId }) => {
diff --git a/src/components/Questionnaire/structured/types.ts b/src/components/Questionnaire/structured/types.ts
index 6995831cd6c..7f31f61ad4c 100644
--- a/src/components/Questionnaire/structured/types.ts
+++ b/src/components/Questionnaire/structured/types.ts
@@ -3,10 +3,7 @@ import {
   FollowUpAppointmentRequest,
 } from "@/components/Schedule/types";
 
-import {
-  AllergyIntolerance,
-  AllergyIntoleranceRequest,
-} from "@/types/emr/allergyIntolerance/allergyIntolerance";
+import { AllergyIntoleranceRequest } from "@/types/emr/allergyIntolerance/allergyIntolerance";
 import { Diagnosis, DiagnosisRequest } from "@/types/emr/diagnosis/diagnosis";
 import { Encounter, EncounterEditRequest } from "@/types/emr/encounter";
 import { MedicationRequest } from "@/types/emr/medicationRequest";
@@ -16,7 +13,7 @@ import { StructuredQuestionType } from "@/types/questionnaire/question";
 
 // Map structured types to their data types
 export interface StructuredDataMap {
-  allergy_intolerance: AllergyIntolerance;
+  allergy_intolerance: AllergyIntoleranceRequest;
   medication_request: MedicationRequest;
   medication_statement: MedicationStatement;
   symptom: Symptom;
@@ -27,7 +24,7 @@ export interface StructuredDataMap {
 
 // Map structured types to their request types
 export interface StructuredRequestMap {
-  allergy_intolerance: AllergyIntoleranceRequest;
+  allergy_intolerance: { datapoints: AllergyIntoleranceRequest[] };
   medication_request: { datapoints: MedicationRequest[] };
   medication_statement: { datapoints: MedicationStatement[] };
   symptom: SymptomRequest;
diff --git a/src/pages/Encounters/tabs/EncounterUpdatesTab.tsx b/src/pages/Encounters/tabs/EncounterUpdatesTab.tsx
index fb49046d1cb..72de24a181b 100644
--- a/src/pages/Encounters/tabs/EncounterUpdatesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterUpdatesTab.tsx
@@ -1,5 +1,6 @@
 import ObservationsList from "@/components/Facility/ConsultationDetails/ObservationsList";
 import QuestionnaireResponsesList from "@/components/Facility/ConsultationDetails/QuestionnaireResponsesList";
+import { AllergyList } from "@/components/Patient/allergy/list";
 import { DiagnosisList } from "@/components/Patient/diagnosis/list";
 import { SymptomsList } from "@/components/Patient/symptoms/list";
 
@@ -15,6 +16,11 @@ export const EncounterUpdatesTab = ({
       <div className="flex flex-col xl:flex-row gap-4">
         {/* Left Column - Symptoms, Diagnoses, and Questionnaire Responses */}
         <div className="flex-1 space-y-4">
+          {/* Allergies Section */}
+          <div>
+            <AllergyList patientId={patient.id} encounterId={encounter.id} />
+          </div>
+
           {/* Symptoms Section */}
           <div>
             <SymptomsList patientId={patient.id} encounterId={encounter.id} />
diff --git a/src/types/emr/allergyIntolerance/allergyIntolerance.ts b/src/types/emr/allergyIntolerance/allergyIntolerance.ts
index 915e5e0be09..860cfe14243 100644
--- a/src/types/emr/allergyIntolerance/allergyIntolerance.ts
+++ b/src/types/emr/allergyIntolerance/allergyIntolerance.ts
@@ -3,11 +3,12 @@ import { UserBase } from "../../user/user";
 
 // Base type for allergy data
 export interface AllergyIntolerance {
+  id: string;
   code: Code;
-  clinical_status?: string;
-  verification_status?: string;
-  category?: string;
-  criticality?: string;
+  clinical_status: string;
+  verification_status: string;
+  category: string;
+  criticality: string;
   last_occurrence?: string;
   note?: string;
   created_by: UserBase;
@@ -16,7 +17,9 @@ export interface AllergyIntolerance {
 }
 
 // Type for API request, extends base type with required fields
+// Added optional id here as this type is used only in one place
 export interface AllergyIntoleranceRequest {
+  id?: string;
   clinical_status: string;
   verification_status: string;
   category: string;
diff --git a/src/types/questionnaire/form.ts b/src/types/questionnaire/form.ts
index eedd90c49b2..61df21fe62a 100644
--- a/src/types/questionnaire/form.ts
+++ b/src/types/questionnaire/form.ts
@@ -1,6 +1,6 @@
 import { FollowUpAppointmentRequest } from "@/components/Schedule/types";
 
-import { AllergyIntolerance } from "@/types/emr/allergyIntolerance/allergyIntolerance";
+import { AllergyIntoleranceRequest } from "@/types/emr/allergyIntolerance/allergyIntolerance";
 import { Diagnosis } from "@/types/emr/diagnosis/diagnosis";
 import { Encounter } from "@/types/emr/encounter";
 import { MedicationRequest } from "@/types/emr/medicationRequest";
@@ -29,7 +29,7 @@ export type ResponseValue = {
     | number
     | boolean
     | Date
-    | AllergyIntolerance[]
+    | AllergyIntoleranceRequest[]
     | MedicationRequest[]
     | MedicationStatement[]
     | Symptom[]

From 0f2a8b71ea97fff21203d137b11e6e6561fefd6c Mon Sep 17 00:00:00 2001
From: Mahendar Chikolla <119734520+Mahendar0701@users.noreply.github.com>
Date: Tue, 7 Jan 2025 19:46:34 +0530
Subject: [PATCH 05/16] cleanup CarePatientTokenKey (#9827)

---
 src/Providers/PatientUserProvider.tsx         |  4 ++--
 src/common/constants.tsx                      |  5 -----
 src/hooks/usePatientSignOut.ts                |  4 ++--
 src/pages/Appoinments/PatientRegistration.tsx |  4 ++--
 src/pages/Appoinments/PatientSelect.tsx       |  4 ++--
 src/pages/Appoinments/Schedule.tsx            |  4 ++--
 src/pages/Appoinments/Success.tsx             |  4 ++--
 src/pages/Appoinments/auth/PatientLogin.tsx   | 13 ++++++++-----
 src/pages/Facility/components/UserCard.tsx    |  9 +++++----
 9 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/Providers/PatientUserProvider.tsx b/src/Providers/PatientUserProvider.tsx
index e7705b1b797..3ec0c5f038a 100644
--- a/src/Providers/PatientUserProvider.tsx
+++ b/src/Providers/PatientUserProvider.tsx
@@ -4,7 +4,7 @@ import { createContext, useEffect, useState } from "react";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/ui/sidebar/app-sidebar";
 
-import { CarePatientTokenKey } from "@/common/constants";
+import { LocalStorageKeys } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
@@ -12,7 +12,7 @@ import { AppointmentPatient } from "@/pages/Patient/Utils";
 import { TokenData } from "@/types/auth/otpToken";
 
 const tokenData: TokenData = JSON.parse(
-  localStorage.getItem(CarePatientTokenKey) || "{}",
+  localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
 );
 
 export type PatientUserContextType = {
diff --git a/src/common/constants.tsx b/src/common/constants.tsx
index 39fe769520c..64af8d373ac 100644
--- a/src/common/constants.tsx
+++ b/src/common/constants.tsx
@@ -1757,8 +1757,3 @@ export const HEADER_CONTENT_TYPES = {
 } as const;
 
 export const ADMIN_USER_TYPES = ["DistrictAdmin", "StateAdmin"] as const;
-
-/**
- * @deprecated use `LocalStorageKeys.patientTokenKey` instead
- */
-export const CarePatientTokenKey = LocalStorageKeys.patientTokenKey;
diff --git a/src/hooks/usePatientSignOut.ts b/src/hooks/usePatientSignOut.ts
index 1f10d2c5234..4b48b2886bc 100644
--- a/src/hooks/usePatientSignOut.ts
+++ b/src/hooks/usePatientSignOut.ts
@@ -1,7 +1,7 @@
 import { navigate } from "raviger";
 import { useCallback } from "react";
 
-import { CarePatientTokenKey } from "@/common/constants";
+import { LocalStorageKeys } from "@/common/constants";
 
 const getRedirectURL = () => {
   return new URLSearchParams(window.location.search).get("redirect");
@@ -9,7 +9,7 @@ const getRedirectURL = () => {
 
 export const usePatientSignOut = () => {
   const signOut = useCallback(async () => {
-    localStorage.removeItem(CarePatientTokenKey);
+    localStorage.removeItem(LocalStorageKeys.patientTokenKey);
     localStorage.removeItem("selectedPatient");
 
     const redirectURL = getRedirectURL();
diff --git a/src/pages/Appoinments/PatientRegistration.tsx b/src/pages/Appoinments/PatientRegistration.tsx
index 0e4ada8b57f..cbbd2ce5fe6 100644
--- a/src/pages/Appoinments/PatientRegistration.tsx
+++ b/src/pages/Appoinments/PatientRegistration.tsx
@@ -29,7 +29,7 @@ import {
   SlotAvailability,
 } from "@/components/Schedule/types";
 
-import { CarePatientTokenKey, GENDER_TYPES } from "@/common/constants";
+import { GENDER_TYPES, LocalStorageKeys } from "@/common/constants";
 import { validateName, validatePincode } from "@/common/validation";
 
 import * as Notification from "@/Utils/Notifications";
@@ -73,7 +73,7 @@ export function PatientRegistration(props: PatientRegistrationProps) {
   ) as SlotAvailability;
   const reason = localStorage.getItem("reason");
   const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(CarePatientTokenKey) || "{}",
+    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
   );
 
   const { t } = useTranslation();
diff --git a/src/pages/Appoinments/PatientSelect.tsx b/src/pages/Appoinments/PatientSelect.tsx
index 1dd8d75f626..d3379d6c000 100644
--- a/src/pages/Appoinments/PatientSelect.tsx
+++ b/src/pages/Appoinments/PatientSelect.tsx
@@ -15,7 +15,7 @@ import {
   SlotAvailability,
 } from "@/components/Schedule/types";
 
-import { CarePatientTokenKey } from "@/common/constants";
+import { LocalStorageKeys } from "@/common/constants";
 
 import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
@@ -39,7 +39,7 @@ export default function PatientSelect({
   ) as SlotAvailability;
   const reason = localStorage.getItem("reason");
   const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(CarePatientTokenKey) || "{}",
+    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
   );
   const [selectedPatient, setSelectedPatient] = useState<string | null>(null);
 
diff --git a/src/pages/Appoinments/Schedule.tsx b/src/pages/Appoinments/Schedule.tsx
index e31b63a71a8..1b0423afcd7 100644
--- a/src/pages/Appoinments/Schedule.tsx
+++ b/src/pages/Appoinments/Schedule.tsx
@@ -20,7 +20,7 @@ import { FacilityModel } from "@/components/Facility/models";
 import { groupSlotsByAvailability } from "@/components/Schedule/Appointments/utils";
 import { SlotAvailability } from "@/components/Schedule/types";
 
-import { CarePatientTokenKey } from "@/common/constants";
+import { LocalStorageKeys } from "@/common/constants";
 
 import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
@@ -45,7 +45,7 @@ export function ScheduleAppointment(props: AppointmentsProps) {
   const [reason, setReason] = useState("");
 
   const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(CarePatientTokenKey) || "{}",
+    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
   );
 
   if (!staffId) {
diff --git a/src/pages/Appoinments/Success.tsx b/src/pages/Appoinments/Success.tsx
index ff3e63c3d32..14ce2cb209a 100644
--- a/src/pages/Appoinments/Success.tsx
+++ b/src/pages/Appoinments/Success.tsx
@@ -7,7 +7,7 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 import Loading from "@/components/Common/Loading";
 import { UserModel } from "@/components/Users/models";
 
-import { CarePatientTokenKey } from "@/common/constants";
+import { LocalStorageKeys } from "@/common/constants";
 
 import * as Notification from "@/Utils/Notifications";
 import query from "@/Utils/request/query";
@@ -19,7 +19,7 @@ export function AppointmentSuccess(props: { appointmentId: string }) {
   const { appointmentId } = props;
   const { t } = useTranslation();
   const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(CarePatientTokenKey) || "{}",
+    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
   );
   const userData: UserModel = JSON.parse(localStorage.getItem("user") ?? "{}");
 
diff --git a/src/pages/Appoinments/auth/PatientLogin.tsx b/src/pages/Appoinments/auth/PatientLogin.tsx
index 5b1ae45f76e..e8d22387090 100644
--- a/src/pages/Appoinments/auth/PatientLogin.tsx
+++ b/src/pages/Appoinments/auth/PatientLogin.tsx
@@ -29,7 +29,7 @@ import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormFi
 
 import useAppHistory from "@/hooks/useAppHistory";
 
-import { CarePatientTokenKey } from "@/common/constants";
+import { LocalStorageKeys } from "@/common/constants";
 
 import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
@@ -66,7 +66,7 @@ export default function PatientLogin({
   });
 
   const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(CarePatientTokenKey) || "{}",
+    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
   );
 
   if (
@@ -101,7 +101,7 @@ export default function PatientLogin({
     onSuccess: () => {
       if (page === "send") {
         const tokenData: TokenData = JSON.parse(
-          localStorage.getItem(CarePatientTokenKey) || "{}",
+          localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
         );
         if (
           Object.keys(tokenData).length > 0 &&
@@ -160,7 +160,10 @@ export default function PatientLogin({
           phoneNumber: phoneNumber,
           createdAt: new Date().toISOString(),
         };
-        localStorage.setItem(CarePatientTokenKey, JSON.stringify(tokenData));
+        localStorage.setItem(
+          LocalStorageKeys.patientTokenKey,
+          JSON.stringify(tokenData),
+        );
         navigate(
           `/facility/${facilityId}/appointments/${staffId}/book-appointment`,
         );
@@ -294,7 +297,7 @@ export default function PatientLogin({
         }
       >
         <CareIcon icon="l-square-shape" className="h-4 w-4 mr-1" />
-        <span className="text-sm underline">Back</span>
+        <span className="text-sm underline">{t("back")}</span>
       </Button>
       {page === "send" ? renderPhoneNumberForm() : renderVerifyForm()}
     </div>
diff --git a/src/pages/Facility/components/UserCard.tsx b/src/pages/Facility/components/UserCard.tsx
index 7ae0221e4ff..29798a96d62 100644
--- a/src/pages/Facility/components/UserCard.tsx
+++ b/src/pages/Facility/components/UserCard.tsx
@@ -1,4 +1,5 @@
 import dayjs from "dayjs";
+import { t } from "i18next";
 import { navigate } from "raviger";
 import { useMemo } from "react";
 
@@ -10,7 +11,7 @@ import { Card } from "@/components/ui/card";
 import { Avatar } from "@/components/Common/Avatar";
 import { UserAssignedModel } from "@/components/Users/models";
 
-import { CarePatientTokenKey } from "@/common/constants";
+import { LocalStorageKeys } from "@/common/constants";
 
 import { formatName } from "@/Utils/utils";
 import { TokenData } from "@/types/auth/otpToken";
@@ -28,7 +29,7 @@ export function UserCard({ user, className, facilityId }: Props) {
   });
 
   const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(CarePatientTokenKey) || "{}",
+    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
   );
 
   const returnLink = useMemo(() => {
@@ -58,7 +59,7 @@ export function UserCard({ user, className, facilityId }: Props) {
 
               {user.qualification && (
                 <>
-                  <p className="text-xs mt-3">Education: </p>
+                  <p className="text-xs mt-3">{t("education")}: </p>
                   <p className="text-sm text-muted-foreground">
                     {user.qualification}
                   </p>
@@ -77,7 +78,7 @@ export function UserCard({ user, className, facilityId }: Props) {
                 navigate(returnLink);
               }}
             >
-              Book Appointment
+              {t("book_appointment")}
             </Button>
           </div>
         </div>

From 0fc88a661b8a6ba0f2c34543624306d93d2bc377 Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Tue, 7 Jan 2025 20:03:58 +0530
Subject: [PATCH 06/16] changed the facility name (#9829)

---
 cypress/e2e/patient_spec/patient_search.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/patient_spec/patient_search.cy.ts b/cypress/e2e/patient_spec/patient_search.cy.ts
index 96ba5d94a47..b63e456be9b 100644
--- a/cypress/e2e/patient_spec/patient_search.cy.ts
+++ b/cypress/e2e/patient_spec/patient_search.cy.ts
@@ -17,7 +17,7 @@ describe("Patient Search", () => {
 
   it("search patient with phone number and verifies details", () => {
     patientSearch
-      .selectFacility("PHC Kakkanad -1")
+      .selectFacility("Arike")
       .clickSearchPatients()
       .searchPatient(TEST_PHONE)
       .verifySearchResults(PATIENT_DETAILS);

From 0aa4f8114b0e946c1a5ac4732a92fd135ba37003 Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Tue, 7 Jan 2025 23:35:12 +0530
Subject: [PATCH 07/16] Cleanup localStorage Management in Patient Login; Fix
 Time in Confirmation

---
 src/Providers/AuthUserProvider.tsx            | 37 +++-----
 src/Providers/PatientUserProvider.tsx         | 54 +++++------
 src/Routers/PatientRouter.tsx                 | 94 +++++++++++++------
 src/Routers/PublicRouter.tsx                  | 24 -----
 src/components/Auth/Login.tsx                 |  8 +-
 src/components/ui/sidebar/app-sidebar.tsx     |  7 +-
 .../ui/sidebar/patient-switcher.tsx           | 15 +--
 src/hooks/useAuthOrPatientUser.ts             | 24 -----
 src/hooks/useAuthUser.ts                      |  4 +-
 src/hooks/usePatientUser.ts                   | 13 +++
 src/pages/Appoinments/PatientRegistration.tsx | 11 ++-
 src/pages/Appoinments/PatientSelect.tsx       |  9 +-
 src/pages/Appoinments/Schedule.tsx            |  8 +-
 src/pages/Appoinments/Success.tsx             | 36 +++----
 src/pages/Appoinments/auth/PatientLogin.tsx   | 54 +++++------
 src/pages/Facility/components/UserCard.tsx    |  8 +-
 src/pages/Patient/index.tsx                   |  2 +-
 17 files changed, 188 insertions(+), 220 deletions(-)
 delete mode 100644 src/hooks/useAuthOrPatientUser.ts
 create mode 100644 src/hooks/usePatientUser.ts

diff --git a/src/Providers/AuthUserProvider.tsx b/src/Providers/AuthUserProvider.tsx
index 2f657b67fc6..7b94ba73e4a 100644
--- a/src/Providers/AuthUserProvider.tsx
+++ b/src/Providers/AuthUserProvider.tsx
@@ -1,6 +1,5 @@
 import careConfig from "@careConfig";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import dayjs from "dayjs";
 import { navigate } from "raviger";
 import { useCallback, useEffect, useState } from "react";
 
@@ -13,6 +12,7 @@ import { LocalStorageKeys } from "@/common/constants";
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
+import { TokenData } from "@/types/auth/otpToken";
 
 interface Props {
   children: React.ReactNode;
@@ -29,8 +29,10 @@ export default function AuthUserProvider({
   const [accessToken, setAccessToken] = useState(
     localStorage.getItem(LocalStorageKeys.accessToken),
   );
-  const [patientToken, setPatientToken] = useState(
-    JSON.parse(localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}"),
+  const [patientToken, setPatientToken] = useState<TokenData | null>(
+    JSON.parse(
+      localStorage.getItem(LocalStorageKeys.patientTokenKey) || "null",
+    ),
   );
 
   const { data: user, isLoading } = useQuery({
@@ -40,16 +42,6 @@ export default function AuthUserProvider({
     enabled: !!localStorage.getItem(LocalStorageKeys.accessToken),
   });
 
-  useEffect(() => {
-    if (
-      patientToken.token &&
-      Object.keys(patientToken).length > 0 &&
-      dayjs(patientToken.createdAt).isAfter(dayjs().subtract(14, "minutes"))
-    ) {
-      navigate("/patient/home");
-    }
-  }, [patientToken]);
-
   useEffect(() => {
     if (!user) {
       return;
@@ -83,20 +75,20 @@ export default function AuthUserProvider({
     [queryClient],
   );
 
-  const patientLogin = useCallback(() => {
-    setPatientToken(
-      JSON.parse(
-        localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
-      ),
+  const patientLogin = (tokenData: TokenData, redirectUrl: string) => {
+    setPatientToken(tokenData);
+    localStorage.setItem(
+      LocalStorageKeys.patientTokenKey,
+      JSON.stringify(tokenData),
     );
-    navigate("/patient/home");
-  }, []);
+    navigate(redirectUrl);
+  };
 
   const signOut = useCallback(async () => {
     localStorage.removeItem(LocalStorageKeys.accessToken);
     localStorage.removeItem(LocalStorageKeys.refreshToken);
     localStorage.removeItem(LocalStorageKeys.patientTokenKey);
-    setPatientToken({});
+    setPatientToken(null);
 
     await queryClient.resetQueries({ queryKey: ["currentUser"] });
 
@@ -134,7 +126,7 @@ export default function AuthUserProvider({
   const SelectedRouter = () => {
     if (user) {
       return children;
-    } else if (patientToken.token) {
+    } else if (patientToken?.token) {
       return otpAuthorized;
     } else {
       return unauthorized;
@@ -148,6 +140,7 @@ export default function AuthUserProvider({
         signOut,
         user,
         patientLogin,
+        patientToken,
       }}
     >
       <SelectedRouter />
diff --git a/src/Providers/PatientUserProvider.tsx b/src/Providers/PatientUserProvider.tsx
index 3ec0c5f038a..1ae9a9af8f1 100644
--- a/src/Providers/PatientUserProvider.tsx
+++ b/src/Providers/PatientUserProvider.tsx
@@ -1,20 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
+import { navigate } from "raviger";
 import { createContext, useEffect, useState } from "react";
 
-import { SidebarProvider } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/ui/sidebar/app-sidebar";
-
-import { LocalStorageKeys } from "@/common/constants";
+import { useAuthContext } from "@/hooks/useAuthUser";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import { AppointmentPatient } from "@/pages/Patient/Utils";
 import { TokenData } from "@/types/auth/otpToken";
 
-const tokenData: TokenData = JSON.parse(
-  localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
-);
-
 export type PatientUserContextType = {
   patients?: AppointmentPatient[];
   selectedPatient: AppointmentPatient | null;
@@ -22,12 +16,9 @@ export type PatientUserContextType = {
   tokenData: TokenData;
 };
 
-export const PatientUserContext = createContext<PatientUserContextType>({
-  patients: undefined,
-  selectedPatient: null,
-  setSelectedPatient: () => {},
-  tokenData: tokenData,
-});
+export const PatientUserContext = createContext<PatientUserContextType | null>(
+  null,
+);
 
 interface Props {
   children: React.ReactNode;
@@ -38,14 +29,16 @@ export default function PatientUserProvider({ children }: Props) {
   const [selectedPatient, setSelectedPatient] =
     useState<AppointmentPatient | null>(null);
 
+  const { patientToken: tokenData } = useAuthContext();
+
   const { data: userData } = useQuery({
-    queryKey: ["patients", tokenData.phoneNumber],
+    queryKey: ["patients", tokenData],
     queryFn: query(routes.otp.getPatient, {
       headers: {
-        Authorization: `Bearer ${tokenData.token}`,
+        Authorization: `Bearer ${tokenData?.token}`,
       },
     }),
-    enabled: !!tokenData.token,
+    enabled: !!tokenData?.token,
   });
 
   useEffect(() => {
@@ -62,22 +55,21 @@ export default function PatientUserProvider({ children }: Props) {
     }
   }, [userData]);
 
-  const patientUserContext: PatientUserContextType = {
-    patients,
-    selectedPatient,
-    setSelectedPatient,
-    tokenData,
-  };
+  if (!tokenData) {
+    navigate("/");
+    return null;
+  }
 
   return (
-    <PatientUserContext.Provider value={patientUserContext}>
-      <SidebarProvider>
-        <AppSidebar
-          patientUserContext={patientUserContext}
-          facilitySidebar={false}
-        />
-        {children}
-      </SidebarProvider>
+    <PatientUserContext.Provider
+      value={{
+        patients,
+        selectedPatient,
+        setSelectedPatient,
+        tokenData: tokenData,
+      }}
+    >
+      {children}
     </PatientUserContext.Provider>
   );
 }
diff --git a/src/Routers/PatientRouter.tsx b/src/Routers/PatientRouter.tsx
index ded69ce375d..99deda2f3a7 100644
--- a/src/Routers/PatientRouter.tsx
+++ b/src/Routers/PatientRouter.tsx
@@ -1,7 +1,8 @@
 import careConfig from "@careConfig";
 import { useRoutes } from "raviger";
 
-import { SidebarTrigger } from "@/components/ui/sidebar";
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/ui/sidebar/app-sidebar";
 
 import ErrorBoundary from "@/components/Common/ErrorBoundary";
 import ErrorPage from "@/components/ErrorPages/DefaultErrorPage";
@@ -9,13 +10,16 @@ import { patientTabs } from "@/components/Patient/PatientDetailsTab";
 import { PatientHome } from "@/components/Patient/PatientHome";
 
 import PatientUserProvider from "@/Providers/PatientUserProvider";
+import { PatientRegistration } from "@/pages/Appoinments/PatientRegistration";
+import PatientSelect from "@/pages/Appoinments/PatientSelect";
+import { ScheduleAppointment } from "@/pages/Appoinments/Schedule";
 import { AppointmentSuccess } from "@/pages/Appoinments/Success";
 import { FacilitiesPage } from "@/pages/Facility/FacilitiesPage";
 import PatientIndex from "@/pages/Patient/index";
 
 import PublicRouter from "./PublicRouter";
 
-const PatientRoutes = {
+const DashboardRoutes = {
   "/nearby_facilities": () => <FacilitiesPage />,
   "/facility/:facilityId/appointments/:appointmentId/success": ({
     appointmentId,
@@ -35,43 +39,75 @@ const PatientRoutes = {
   }) => <PatientHome id={id} page={tab} />,
 };
 
+const AppointmentRoutes = {
+  "/facility/:facilityId/appointments/:staffId/book-appointment": ({
+    facilityId,
+    staffId,
+  }: {
+    facilityId: string;
+    staffId: string;
+  }) => <ScheduleAppointment facilityId={facilityId} staffId={staffId} />,
+  "/facility/:facilityId/appointments/:staffId/patient-select": ({
+    facilityId,
+    staffId,
+  }: {
+    facilityId: string;
+    staffId: string;
+  }) => <PatientSelect facilityId={facilityId} staffId={staffId} />,
+  "/facility/:facilityId/appointments/:staffId/patient-registration": ({
+    facilityId,
+    staffId,
+  }: {
+    facilityId: string;
+    staffId: string;
+  }) => <PatientRegistration facilityId={facilityId} staffId={staffId} />,
+};
+
 export default function PatientRouter() {
-  const pages = useRoutes(PatientRoutes);
+  const pages = useRoutes(DashboardRoutes);
+
+  const appointmentPages = useRoutes(AppointmentRoutes);
 
   if (!pages) {
+    if (appointmentPages) {
+      return <PatientUserProvider>{appointmentPages}</PatientUserProvider>;
+    }
     return <PublicRouter />;
   }
 
   return (
     <PatientUserProvider>
-      <main
-        id="pages"
-        className="flex-1 overflow-y-auto bg-gray-100 focus:outline-none md:pb-2 md:pr-2"
-      >
-        <div className="relative z-10 flex h-16 shrink-0 bg-white shadow md:hidden">
-          <div className="flex items-center">
-            <SidebarTrigger className="px-2" />
+      <SidebarProvider>
+        <AppSidebar facilitySidebar={false} />
+        <main
+          id="pages"
+          className="flex-1 overflow-y-auto bg-gray-100 focus:outline-none md:pb-2 md:pr-2"
+        >
+          <div className="relative z-10 flex h-16 shrink-0 bg-white shadow md:hidden">
+            <div className="flex items-center">
+              <SidebarTrigger className="px-2" />
+            </div>
+            <a
+              href="/"
+              className="flex h-full w-full items-center px-4 md:hidden"
+            >
+              <img
+                className="h-8 w-auto"
+                src={careConfig.mainLogo?.dark}
+                alt="care logo"
+              />
+            </a>
           </div>
-          <a
-            href="/"
-            className="flex h-full w-full items-center px-4 md:hidden"
+          <div
+            className="max-w-8xl mx-auto mt-4 min-h-[96vh] rounded-lg border bg-gray-50 p-3 shadow"
+            data-cui-page
           >
-            <img
-              className="h-8 w-auto"
-              src={careConfig.mainLogo?.dark}
-              alt="care logo"
-            />
-          </a>
-        </div>
-        <div
-          className="max-w-8xl mx-auto mt-4 min-h-[96vh] rounded-lg border bg-gray-50 p-3 shadow"
-          data-cui-page
-        >
-          <ErrorBoundary fallback={<ErrorPage forError="PAGE_LOAD_ERROR" />}>
-            {pages}
-          </ErrorBoundary>
-        </div>
-      </main>
+            <ErrorBoundary fallback={<ErrorPage forError="PAGE_LOAD_ERROR" />}>
+              {pages}
+            </ErrorBoundary>
+          </div>
+        </main>
+      </SidebarProvider>
     </PatientUserProvider>
   );
 }
diff --git a/src/Routers/PublicRouter.tsx b/src/Routers/PublicRouter.tsx
index 62c67eb8cbf..47739e6ff37 100644
--- a/src/Routers/PublicRouter.tsx
+++ b/src/Routers/PublicRouter.tsx
@@ -6,9 +6,6 @@ import ResetPassword from "@/components/Auth/ResetPassword";
 import InvalidReset from "@/components/ErrorPages/InvalidReset";
 import SessionExpired from "@/components/ErrorPages/SessionExpired";
 
-import { PatientRegistration } from "@/pages/Appoinments/PatientRegistration";
-import PatientSelect from "@/pages/Appoinments/PatientSelect";
-import { ScheduleAppointment } from "@/pages/Appoinments/Schedule";
 import PatientLogin from "@/pages/Appoinments/auth/PatientLogin";
 import { FacilitiesPage } from "@/pages/Facility/FacilitiesPage";
 import { FacilityDetailsPage } from "@/pages/Facility/FacilityDetailsPage";
@@ -29,27 +26,6 @@ export const routes = {
     staffId: string;
     page: string;
   }) => <PatientLogin facilityId={facilityId} staffId={staffId} page={page} />,
-  "/facility/:facilityId/appointments/:staffId/book-appointment": ({
-    facilityId,
-    staffId,
-  }: {
-    facilityId: string;
-    staffId: string;
-  }) => <ScheduleAppointment facilityId={facilityId} staffId={staffId} />,
-  "/facility/:facilityId/appointments/:staffId/patient-select": ({
-    facilityId,
-    staffId,
-  }: {
-    facilityId: string;
-    staffId: string;
-  }) => <PatientSelect facilityId={facilityId} staffId={staffId} />,
-  "/facility/:facilityId/appointments/:staffId/patient-registration": ({
-    facilityId,
-    staffId,
-  }: {
-    facilityId: string;
-    staffId: string;
-  }) => <PatientRegistration facilityId={facilityId} staffId={staffId} />,
   "/login": () => <Login />,
   "/forgot-password": () => <Login forgot={true} />,
   "/password_reset/:token": ({ token }: { token: string }) => (
diff --git a/src/components/Auth/Login.tsx b/src/components/Auth/Login.tsx
index d1756c79624..8858d33be0e 100644
--- a/src/components/Auth/Login.tsx
+++ b/src/components/Auth/Login.tsx
@@ -28,8 +28,6 @@ import BrowserWarning from "@/components/ErrorPages/BrowserWarning";
 
 import { useAuthContext } from "@/hooks/useAuthUser";
 
-import { LocalStorageKeys } from "@/common/constants";
-
 import FiltersCache from "@/Utils/FiltersCache";
 import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
@@ -152,11 +150,7 @@ const Login = (props: LoginProps) => {
           phoneNumber: `+91${phone}`,
           createdAt: new Date().toISOString(),
         };
-        localStorage.setItem(
-          LocalStorageKeys.patientTokenKey,
-          JSON.stringify(tokenData),
-        );
-        patientLogin();
+        patientLogin(tokenData, `/patient/home`);
       }
     },
     onError: (error: any) => {
diff --git a/src/components/ui/sidebar/app-sidebar.tsx b/src/components/ui/sidebar/app-sidebar.tsx
index a5d718f6374..ed29d5db37d 100644
--- a/src/components/ui/sidebar/app-sidebar.tsx
+++ b/src/components/ui/sidebar/app-sidebar.tsx
@@ -24,6 +24,8 @@ import { OrganizationSwitcher } from "@/components/ui/sidebar/organization-switc
 
 import { UserFacilityModel, UserModel } from "@/components/Users/models";
 
+import { usePatientContext } from "@/hooks/usePatientUser";
+
 import { PatientUserContextType } from "@/Providers/PatientUserProvider";
 import { AppointmentPatient } from "@/pages/Patient/Utils";
 import { Organization } from "@/types/organization/organization";
@@ -128,7 +130,6 @@ function generatePatientLinks(
 export function AppSidebar({
   user,
   facilitySidebar = true,
-  patientUserContext,
   ...props
 }: AppSidebarProps) {
   const exactMatch = usePathParams("/facility/:facilityId");
@@ -142,6 +143,8 @@ export function AppSidebar({
   const [selectedFacility, setSelectedFacility] =
     React.useState<UserFacilityModel | null>(null);
 
+  const patientUserContext = usePatientContext();
+
   const { t } = useTranslation();
 
   const selectedOrganization = React.useMemo(() => {
@@ -216,7 +219,7 @@ export function AppSidebar({
         )}
         {patientUserContext && (
           <>
-            <PatientSwitcher patientUserContext={patientUserContext} />
+            <PatientSwitcher />
             <NavMain
               links={generatePatientLinks(
                 patientUserContext.selectedPatient,
diff --git a/src/components/ui/sidebar/patient-switcher.tsx b/src/components/ui/sidebar/patient-switcher.tsx
index 96749b2e033..fe2b0aa02d6 100644
--- a/src/components/ui/sidebar/patient-switcher.tsx
+++ b/src/components/ui/sidebar/patient-switcher.tsx
@@ -10,23 +10,26 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 
-import { PatientUserContextType } from "@/Providers/PatientUserProvider";
+import { usePatientContext } from "@/hooks/usePatientUser";
+
 import { classNames } from "@/Utils/utils";
 
 import { useSidebar } from "../sidebar";
 
 interface PatientSwitcherProps {
-  patientUserContext: PatientUserContextType;
   className?: string;
 }
 
-export function PatientSwitcher({
-  patientUserContext,
-  className,
-}: PatientSwitcherProps) {
+export function PatientSwitcher({ className }: PatientSwitcherProps) {
   const { t } = useTranslation();
   const { open } = useSidebar();
 
+  const patientUserContext = usePatientContext();
+
+  if (!patientUserContext) {
+    return null;
+  }
+
   return (
     <div
       className={classNames(
diff --git a/src/hooks/useAuthOrPatientUser.ts b/src/hooks/useAuthOrPatientUser.ts
deleted file mode 100644
index 9130be491cc..00000000000
--- a/src/hooks/useAuthOrPatientUser.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useContext } from "react";
-
-import { PatientUserContext } from "@/Providers/PatientUserProvider";
-
-import { useAuthContext } from "./useAuthUser";
-
-export function usePatientContext() {
-  const ctx = useContext(PatientUserContext);
-  if (!ctx) {
-    return undefined;
-  }
-  return ctx;
-}
-
-export default function useAuthOrPatientUser() {
-  const user = useAuthContext().user;
-  const patient = usePatientContext()?.selectedPatient;
-  if (!user && !patient) {
-    throw new Error(
-      "'useAuthOrPatientUser' must be used within 'App or PatientRouter' only",
-    );
-  }
-  return { user, patient };
-}
diff --git a/src/hooks/useAuthUser.ts b/src/hooks/useAuthUser.ts
index 4c207d073c7..38cdddc16b3 100644
--- a/src/hooks/useAuthUser.ts
+++ b/src/hooks/useAuthUser.ts
@@ -4,6 +4,7 @@ import { UserModel } from "@/components/Users/models";
 
 import { JwtTokenObtainPair, LoginCredentials } from "@/Utils/request/api";
 import { RequestResult } from "@/Utils/request/types";
+import { TokenData } from "@/types/auth/otpToken";
 
 type SignInReturnType = RequestResult<JwtTokenObtainPair>;
 
@@ -11,7 +12,8 @@ interface AuthContextType {
   user: UserModel | undefined;
   signIn: (creds: LoginCredentials) => Promise<SignInReturnType>;
   signOut: () => Promise<void>;
-  patientLogin: () => void;
+  patientLogin: (tokenData: TokenData, redirectUrl: string) => void;
+  patientToken: TokenData | null;
 }
 
 export const AuthUserContext = createContext<AuthContextType | null>(null);
diff --git a/src/hooks/usePatientUser.ts b/src/hooks/usePatientUser.ts
new file mode 100644
index 00000000000..06137cfd93b
--- /dev/null
+++ b/src/hooks/usePatientUser.ts
@@ -0,0 +1,13 @@
+import { useContext } from "react";
+
+import { PatientUserContext } from "@/Providers/PatientUserProvider";
+
+export function usePatientContext() {
+  const ctx = useContext(PatientUserContext);
+  if (!ctx) {
+    throw new Error(
+      "'usePatientContext' must be used within 'PatientUserProvider' only",
+    );
+  }
+  return ctx;
+}
diff --git a/src/pages/Appoinments/PatientRegistration.tsx b/src/pages/Appoinments/PatientRegistration.tsx
index cbbd2ce5fe6..b48cb640b53 100644
--- a/src/pages/Appoinments/PatientRegistration.tsx
+++ b/src/pages/Appoinments/PatientRegistration.tsx
@@ -29,7 +29,9 @@ import {
   SlotAvailability,
 } from "@/components/Schedule/types";
 
-import { GENDER_TYPES, LocalStorageKeys } from "@/common/constants";
+import { usePatientContext } from "@/hooks/usePatientUser";
+
+import { GENDER_TYPES } from "@/common/constants";
 import { validateName, validatePincode } from "@/common/validation";
 
 import * as Notification from "@/Utils/Notifications";
@@ -42,7 +44,6 @@ import {
   AppointmentPatient,
   AppointmentPatientRegister,
 } from "@/pages/Patient/Utils";
-import { TokenData } from "@/types/auth/otpToken";
 import PublicAppointmentApi from "@/types/scheduling/PublicAppointmentApi";
 
 import OrganizationSelector from "../Organization/components/OrganizationSelector";
@@ -72,9 +73,6 @@ export function PatientRegistration(props: PatientRegistrationProps) {
     localStorage.getItem("selectedSlot") ?? "",
   ) as SlotAvailability;
   const reason = localStorage.getItem("reason");
-  const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
-  );
 
   const { t } = useTranslation();
 
@@ -82,6 +80,9 @@ export function PatientRegistration(props: PatientRegistrationProps) {
 
   const { publish } = usePubSub();
 
+  const patientUserContext = usePatientContext();
+  const tokenData = patientUserContext?.tokenData;
+
   const patientSchema = z
     .object({
       name: z
diff --git a/src/pages/Appoinments/PatientSelect.tsx b/src/pages/Appoinments/PatientSelect.tsx
index d3379d6c000..2dffd1bcbfb 100644
--- a/src/pages/Appoinments/PatientSelect.tsx
+++ b/src/pages/Appoinments/PatientSelect.tsx
@@ -15,7 +15,7 @@ import {
   SlotAvailability,
 } from "@/components/Schedule/types";
 
-import { LocalStorageKeys } from "@/common/constants";
+import { usePatientContext } from "@/hooks/usePatientUser";
 
 import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
@@ -23,7 +23,6 @@ import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import { PaginatedResponse } from "@/Utils/request/types";
 import { AppointmentPatient } from "@/pages/Patient/Utils";
-import { TokenData } from "@/types/auth/otpToken";
 import PublicAppointmentApi from "@/types/scheduling/PublicAppointmentApi";
 
 export default function PatientSelect({
@@ -38,11 +37,11 @@ export default function PatientSelect({
     localStorage.getItem("selectedSlot") ?? "",
   ) as SlotAvailability;
   const reason = localStorage.getItem("reason");
-  const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
-  );
   const [selectedPatient, setSelectedPatient] = useState<string | null>(null);
 
+  const patientUserContext = usePatientContext();
+  const tokenData = patientUserContext?.tokenData;
+
   const queryClient = useQueryClient();
 
   if (!staffId) {
diff --git a/src/pages/Appoinments/Schedule.tsx b/src/pages/Appoinments/Schedule.tsx
index 1b0423afcd7..a26b8bf3ad7 100644
--- a/src/pages/Appoinments/Schedule.tsx
+++ b/src/pages/Appoinments/Schedule.tsx
@@ -20,7 +20,7 @@ import { FacilityModel } from "@/components/Facility/models";
 import { groupSlotsByAvailability } from "@/components/Schedule/Appointments/utils";
 import { SlotAvailability } from "@/components/Schedule/types";
 
-import { LocalStorageKeys } from "@/common/constants";
+import { usePatientContext } from "@/hooks/usePatientUser";
 
 import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
@@ -28,7 +28,6 @@ import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
 import { RequestResult } from "@/Utils/request/types";
 import { dateQueryString } from "@/Utils/utils";
-import { TokenData } from "@/types/auth/otpToken";
 import PublicAppointmentApi from "@/types/scheduling/PublicAppointmentApi";
 
 interface AppointmentsProps {
@@ -44,9 +43,8 @@ export function ScheduleAppointment(props: AppointmentsProps) {
   const [selectedSlot, setSelectedSlot] = useState<SlotAvailability>();
   const [reason, setReason] = useState("");
 
-  const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
-  );
+  const patientUserContext = usePatientContext();
+  const tokenData = patientUserContext?.tokenData;
 
   if (!staffId) {
     Notification.Error({ msg: "Staff username not found" });
diff --git a/src/pages/Appoinments/Success.tsx b/src/pages/Appoinments/Success.tsx
index 14ce2cb209a..7a7ae0399fc 100644
--- a/src/pages/Appoinments/Success.tsx
+++ b/src/pages/Appoinments/Success.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
+import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -7,20 +8,20 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 import Loading from "@/components/Common/Loading";
 import { UserModel } from "@/components/Users/models";
 
-import { LocalStorageKeys } from "@/common/constants";
+import { usePatientContext } from "@/hooks/usePatientUser";
 
 import * as Notification from "@/Utils/Notifications";
 import query from "@/Utils/request/query";
 import { formatName } from "@/Utils/utils";
-import { TokenData } from "@/types/auth/otpToken";
 import PublicAppointmentApi from "@/types/scheduling/PublicAppointmentApi";
 
 export function AppointmentSuccess(props: { appointmentId: string }) {
   const { appointmentId } = props;
   const { t } = useTranslation();
-  const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
-  );
+
+  const patientUserContext = usePatientContext();
+  const tokenData = patientUserContext?.tokenData;
+
   const userData: UserModel = JSON.parse(localStorage.getItem("user") ?? "{}");
 
   const { data, isLoading, error } = useQuery({
@@ -45,6 +46,13 @@ export function AppointmentSuccess(props: { appointmentId: string }) {
     return <Loading />;
   }
 
+  const appointmentTime = dayjs(appointmentData?.token_slot.start_datetime)
+    .add(-5, "hours")
+    .add(-30, "minutes")
+    .toISOString();
+  const appointmentDate = format(new Date(appointmentTime), "do MMMM");
+  const appointmentTimeSlot = format(new Date(appointmentTime), "hh:mm a");
+
   return (
     <div className="mx-auto p-2 max-w-3xl">
       <div className="bg-secondary-100/50 rounded-lg shadow-sm p-12 border border-secondary-400 text-center mb-12">
@@ -76,28 +84,14 @@ export function AppointmentSuccess(props: { appointmentId: string }) {
           <h2 className="text-sm font-medium text-gray-500 mb-1">
             {t("date")}:
           </h2>
-          <p className="text-lg font-medium">
-            {appointmentData?.token_slot.start_datetime
-              ? format(
-                  new Date(appointmentData?.token_slot.start_datetime),
-                  "do MMMM",
-                )
-              : ""}
-          </p>
+          <p className="text-lg font-medium">{appointmentDate}</p>
         </div>
 
         <div>
           <h2 className="text-sm font-medium text-gray-500 mb-1">
             {t("time")}:
           </h2>
-          <p className="text-lg font-medium">
-            {appointmentData?.token_slot.start_datetime
-              ? format(
-                  new Date(appointmentData?.token_slot.start_datetime),
-                  "hh:mm a",
-                )
-              : ""}
-          </p>
+          <p className="text-lg font-medium">{appointmentTimeSlot}</p>
         </div>
       </div>
 
diff --git a/src/pages/Appoinments/auth/PatientLogin.tsx b/src/pages/Appoinments/auth/PatientLogin.tsx
index e8d22387090..c43d8331fda 100644
--- a/src/pages/Appoinments/auth/PatientLogin.tsx
+++ b/src/pages/Appoinments/auth/PatientLogin.tsx
@@ -24,12 +24,12 @@ import {
   InputOTPSlot,
 } from "@/components/ui/input-otp";
 
+import CircularProgress from "@/components/Common/CircularProgress";
 import { PhoneNumberValidator } from "@/components/Form/FieldValidators";
 import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
 
 import useAppHistory from "@/hooks/useAppHistory";
-
-import { LocalStorageKeys } from "@/common/constants";
+import { useAuthContext } from "@/hooks/useAuthUser";
 
 import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
@@ -64,12 +64,11 @@ export default function PatientLogin({
       pin: "",
     },
   });
-
-  const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
-  );
+  const { patientLogin } = useAuthContext();
+  const { patientToken: tokenData } = useAuthContext();
 
   if (
+    tokenData &&
     Object.keys(tokenData).length > 0 &&
     dayjs(tokenData.createdAt).isAfter(dayjs().subtract(14, "minutes"))
   ) {
@@ -90,7 +89,7 @@ export default function PatientLogin({
     return errors;
   };
 
-  const { mutate: sendOTP } = useMutation({
+  const { mutate: sendOTP, isPending: isSendOTPLoading } = useMutation({
     mutationFn: (phoneNumber: string) =>
       request(routes.otp.sendOtp, {
         body: {
@@ -100,23 +99,7 @@ export default function PatientLogin({
       }),
     onSuccess: () => {
       if (page === "send") {
-        const tokenData: TokenData = JSON.parse(
-          localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
-        );
-        if (
-          Object.keys(tokenData).length > 0 &&
-          tokenData.phoneNumber === phoneNumber &&
-          dayjs(tokenData.createdAt).isAfter(dayjs().subtract(14, "minutes"))
-        ) {
-          Notification.Success({ msg: t("valid_otp_found") });
-          navigate(
-            `/facility/${facilityId}/appointments/${staffId}/book-appointment`,
-          );
-        } else {
-          navigate(
-            `/facility/${facilityId}/appointments/${staffId}/otp/verify`,
-          );
-        }
+        navigate(`/facility/${facilityId}/appointments/${staffId}/otp/verify`);
       }
     },
     onError: () => {
@@ -136,7 +119,7 @@ export default function PatientLogin({
     sendOTP(phoneNumber);
   };
 
-  const { mutate: verifyOTP } = useMutation({
+  const { mutate: verifyOTP, isPending: isVerifyOTPLoading } = useMutation({
     mutationFn: async ({
       phone_number,
       otp,
@@ -160,11 +143,8 @@ export default function PatientLogin({
           phoneNumber: phoneNumber,
           createdAt: new Date().toISOString(),
         };
-        localStorage.setItem(
-          LocalStorageKeys.patientTokenKey,
-          JSON.stringify(tokenData),
-        );
-        navigate(
+        patientLogin(
+          tokenData,
           `/facility/${facilityId}/appointments/${staffId}/book-appointment`,
         );
       }
@@ -208,9 +188,14 @@ export default function PatientLogin({
             variant="primary"
             type="submit"
             className="w-full h-12 text-lg"
+            disabled={isSendOTPLoading}
           >
             <span className="bg-gradient-to-b from-white/15 to-transparent"></span>
-            {t("send_otp")}
+            {isSendOTPLoading ? (
+              <CircularProgress className="text-white" />
+            ) : (
+              t("send_otp")
+            )}
           </Button>
         </form>
       </div>
@@ -268,8 +253,13 @@ export default function PatientLogin({
               variant="primary_gradient"
               type="submit"
               className="w-full h-12 text-lg"
+              disabled={isVerifyOTPLoading}
             >
-              {t("verify_otp")}
+              {isVerifyOTPLoading ? (
+                <CircularProgress className="text-white" />
+              ) : (
+                t("verify_otp")
+              )}
             </Button>
             <a
               className="w-full text-sm underline text-center cursor-pointer text-secondary-800"
diff --git a/src/pages/Facility/components/UserCard.tsx b/src/pages/Facility/components/UserCard.tsx
index 29798a96d62..e946c114d9a 100644
--- a/src/pages/Facility/components/UserCard.tsx
+++ b/src/pages/Facility/components/UserCard.tsx
@@ -11,10 +11,9 @@ import { Card } from "@/components/ui/card";
 import { Avatar } from "@/components/Common/Avatar";
 import { UserAssignedModel } from "@/components/Users/models";
 
-import { LocalStorageKeys } from "@/common/constants";
+import { useAuthContext } from "@/hooks/useAuthUser";
 
 import { formatName } from "@/Utils/utils";
-import { TokenData } from "@/types/auth/otpToken";
 
 interface Props {
   user: UserAssignedModel;
@@ -28,12 +27,11 @@ export function UserCard({ user, className, facilityId }: Props) {
     last_name: user.last_name || "",
   });
 
-  const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
-  );
+  const { patientToken: tokenData } = useAuthContext();
 
   const returnLink = useMemo(() => {
     if (
+      tokenData &&
       Object.keys(tokenData).length > 0 &&
       dayjs(tokenData.createdAt).isAfter(dayjs().subtract(14, "minutes"))
     ) {
diff --git a/src/pages/Patient/index.tsx b/src/pages/Patient/index.tsx
index e773891556a..1886ccc6e4d 100644
--- a/src/pages/Patient/index.tsx
+++ b/src/pages/Patient/index.tsx
@@ -21,7 +21,7 @@ import Loading from "@/components/Common/Loading";
 import { formatAppointmentSlotTime } from "@/components/Schedule/Appointments/utils";
 import { Appointment } from "@/components/Schedule/types";
 
-import { usePatientContext } from "@/hooks/useAuthOrPatientUser";
+import { usePatientContext } from "@/hooks/usePatientUser";
 
 import query from "@/Utils/request/query";
 import { formatName, formatPatientAge } from "@/Utils/utils";

From b924efe393d215492718818f9510c9a0fe6c3eda Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Wed, 8 Jan 2025 09:21:10 +0530
Subject: [PATCH 08/16] Use PatientContext from Router when required

---
 src/Routers/PatientRouter.tsx             | 6 +++++-
 src/components/ui/sidebar/app-sidebar.tsx | 5 +----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/Routers/PatientRouter.tsx b/src/Routers/PatientRouter.tsx
index 99deda2f3a7..2079b213eaa 100644
--- a/src/Routers/PatientRouter.tsx
+++ b/src/Routers/PatientRouter.tsx
@@ -9,6 +9,8 @@ import ErrorPage from "@/components/ErrorPages/DefaultErrorPage";
 import { patientTabs } from "@/components/Patient/PatientDetailsTab";
 import { PatientHome } from "@/components/Patient/PatientHome";
 
+import { usePatientContext } from "@/hooks/usePatientUser";
+
 import PatientUserProvider from "@/Providers/PatientUserProvider";
 import { PatientRegistration } from "@/pages/Appoinments/PatientRegistration";
 import PatientSelect from "@/pages/Appoinments/PatientSelect";
@@ -68,6 +70,8 @@ export default function PatientRouter() {
 
   const appointmentPages = useRoutes(AppointmentRoutes);
 
+  const patientUserContext = usePatientContext();
+
   if (!pages) {
     if (appointmentPages) {
       return <PatientUserProvider>{appointmentPages}</PatientUserProvider>;
@@ -78,7 +82,7 @@ export default function PatientRouter() {
   return (
     <PatientUserProvider>
       <SidebarProvider>
-        <AppSidebar facilitySidebar={false} />
+        <AppSidebar patientUserContext={patientUserContext} />
         <main
           id="pages"
           className="flex-1 overflow-y-auto bg-gray-100 focus:outline-none md:pb-2 md:pr-2"
diff --git a/src/components/ui/sidebar/app-sidebar.tsx b/src/components/ui/sidebar/app-sidebar.tsx
index ed29d5db37d..26f00dc7acd 100644
--- a/src/components/ui/sidebar/app-sidebar.tsx
+++ b/src/components/ui/sidebar/app-sidebar.tsx
@@ -24,8 +24,6 @@ import { OrganizationSwitcher } from "@/components/ui/sidebar/organization-switc
 
 import { UserFacilityModel, UserModel } from "@/components/Users/models";
 
-import { usePatientContext } from "@/hooks/usePatientUser";
-
 import { PatientUserContextType } from "@/Providers/PatientUserProvider";
 import { AppointmentPatient } from "@/pages/Patient/Utils";
 import { Organization } from "@/types/organization/organization";
@@ -129,6 +127,7 @@ function generatePatientLinks(
 
 export function AppSidebar({
   user,
+  patientUserContext,
   facilitySidebar = true,
   ...props
 }: AppSidebarProps) {
@@ -143,8 +142,6 @@ export function AppSidebar({
   const [selectedFacility, setSelectedFacility] =
     React.useState<UserFacilityModel | null>(null);
 
-  const patientUserContext = usePatientContext();
-
   const { t } = useTranslation();
 
   const selectedOrganization = React.useMemo(() => {

From 2f66f46bea59115a4ee78c7a7831513833bdfc70 Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Wed, 8 Jan 2025 10:44:20 +0530
Subject: [PATCH 09/16] Cleanup Navbars

---
 src/Routers/PatientRouter.tsx              |   8 +-
 src/components/ui/sidebar/app-sidebar.tsx  | 137 +++------------------
 src/components/ui/sidebar/facility-nav.tsx |  63 ++++++++++
 src/components/ui/sidebar/nav-user.tsx     |  15 +--
 src/components/ui/sidebar/org-nav.tsx      |  26 ++++
 src/components/ui/sidebar/patient-nav.tsx  |  59 +++++++++
 6 files changed, 171 insertions(+), 137 deletions(-)
 create mode 100644 src/components/ui/sidebar/facility-nav.tsx
 create mode 100644 src/components/ui/sidebar/org-nav.tsx
 create mode 100644 src/components/ui/sidebar/patient-nav.tsx

diff --git a/src/Routers/PatientRouter.tsx b/src/Routers/PatientRouter.tsx
index 2079b213eaa..bf16c8c3e30 100644
--- a/src/Routers/PatientRouter.tsx
+++ b/src/Routers/PatientRouter.tsx
@@ -2,15 +2,13 @@ import careConfig from "@careConfig";
 import { useRoutes } from "raviger";
 
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/ui/sidebar/app-sidebar";
+import { AppSidebar, SidebarFor } from "@/components/ui/sidebar/app-sidebar";
 
 import ErrorBoundary from "@/components/Common/ErrorBoundary";
 import ErrorPage from "@/components/ErrorPages/DefaultErrorPage";
 import { patientTabs } from "@/components/Patient/PatientDetailsTab";
 import { PatientHome } from "@/components/Patient/PatientHome";
 
-import { usePatientContext } from "@/hooks/usePatientUser";
-
 import PatientUserProvider from "@/Providers/PatientUserProvider";
 import { PatientRegistration } from "@/pages/Appoinments/PatientRegistration";
 import PatientSelect from "@/pages/Appoinments/PatientSelect";
@@ -70,8 +68,6 @@ export default function PatientRouter() {
 
   const appointmentPages = useRoutes(AppointmentRoutes);
 
-  const patientUserContext = usePatientContext();
-
   if (!pages) {
     if (appointmentPages) {
       return <PatientUserProvider>{appointmentPages}</PatientUserProvider>;
@@ -82,7 +78,7 @@ export default function PatientRouter() {
   return (
     <PatientUserProvider>
       <SidebarProvider>
-        <AppSidebar patientUserContext={patientUserContext} />
+        <AppSidebar sidebarFor={SidebarFor.PATIENT} />
         <main
           id="pages"
           className="flex-1 overflow-y-auto bg-gray-100 focus:outline-none md:pb-2 md:pr-2"
diff --git a/src/components/ui/sidebar/app-sidebar.tsx b/src/components/ui/sidebar/app-sidebar.tsx
index 26f00dc7acd..f88eb77e771 100644
--- a/src/components/ui/sidebar/app-sidebar.tsx
+++ b/src/components/ui/sidebar/app-sidebar.tsx
@@ -1,8 +1,6 @@
 import { DashboardIcon } from "@radix-ui/react-icons";
-import { TFunction } from "i18next";
 import { Link, usePathParams } from "raviger";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 
 import {
   Sidebar,
@@ -14,121 +12,32 @@ import {
   SidebarMenuItem,
   SidebarRail,
 } from "@/components/ui/sidebar";
+import { FacilityNav } from "@/components/ui/sidebar/facility-nav";
 import { FacilitySwitcher } from "@/components/ui/sidebar/facility-switcher";
-import { NavMain } from "@/components/ui/sidebar/nav-main";
 import {
   FacilityNavUser,
   PatientNavUser,
 } from "@/components/ui/sidebar/nav-user";
+import { OrgNav } from "@/components/ui/sidebar/org-nav";
 import { OrganizationSwitcher } from "@/components/ui/sidebar/organization-switcher";
+import { PatientNav } from "@/components/ui/sidebar/patient-nav";
 
 import { UserFacilityModel, UserModel } from "@/components/Users/models";
 
-import { PatientUserContextType } from "@/Providers/PatientUserProvider";
-import { AppointmentPatient } from "@/pages/Patient/Utils";
-import { Organization } from "@/types/organization/organization";
-
-import { PatientSwitcher } from "./patient-switcher";
-
-interface NavigationLink {
-  name: string;
-  url: string;
-  icon?: string;
-}
-
 interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
   user?: UserModel;
   facilitySidebar?: boolean;
-  patientUserContext?: PatientUserContextType;
+  sidebarFor?: SidebarFor;
 }
 
-function generateFacilityLinks(
-  selectedFacility: UserFacilityModel | null,
-  t: TFunction,
-  // TODO: switch to UserBase once getcurrentuser serializer is updated
-  user?: UserModel,
-) {
-  if (!selectedFacility) return [];
-
-  const baseUrl = `/facility/${selectedFacility.id}`;
-  const links: NavigationLink[] = [
-    { name: t("facility"), url: baseUrl, icon: "d-hospital" },
-    {
-      name: t("appointments"),
-      url: `${baseUrl}/appointments`,
-      icon: "d-calendar",
-    },
-    {
-      name: t("search_patients"),
-      url: `${baseUrl}/patients`,
-      icon: "d-patient",
-    },
-    { name: t("encounters"), url: `${baseUrl}/encounters`, icon: "d-patient" },
-    // { name: t("assets"), url: `${baseUrl}/assets`, icon: "d-folder" },
-    { name: t("resource"), url: "/resource", icon: "d-book-open" },
-    { name: t("users"), url: `${baseUrl}/users`, icon: "d-people" },
-    {
-      name: t("organization"),
-      url: `${baseUrl}/organization`,
-      icon: "d-book-open",
-    },
-  ];
-
-  if (user) {
-    links.push({
-      name: t("schedules"),
-      url: `${baseUrl}/users/${user.username}/availability`,
-      icon: "d-calendar",
-    });
-  }
-
-  return links;
-}
-
-function generateOrganizationLinks(
-  organizations: Organization[],
-): NavigationLink[] {
-  return organizations.map((org) => ({
-    name: org.name,
-    url: `/organization/${org.id}`,
-  }));
-}
-
-function generatePatientLinks(
-  selectedUser: AppointmentPatient | null,
-  t: TFunction,
-): NavigationLink[] {
-  if (!selectedUser) return [];
-
-  const { geo_organization } = selectedUser;
-  let parentOrganization = geo_organization?.parent;
-  while (parentOrganization?.parent) {
-    if (parentOrganization.level_cache === 1) {
-      break;
-    }
-    parentOrganization = parentOrganization.parent;
-  }
-
-  const queryParams = new URLSearchParams();
-
-  if (parentOrganization) {
-    queryParams.set("organization", String(parentOrganization?.id));
-  }
-
-  return [
-    { name: t("appointments"), url: "/patient/home", icon: "d-patient" },
-    {
-      name: t("nearby_facilities"),
-      url: `/nearby_facilities/?${queryParams.toString()}`,
-      icon: "d-patient",
-    },
-  ];
+export enum SidebarFor {
+  FACILITY = "facility",
+  PATIENT = "patient",
 }
 
 export function AppSidebar({
   user,
-  patientUserContext,
-  facilitySidebar = true,
+  sidebarFor = SidebarFor.FACILITY,
   ...props
 }: AppSidebarProps) {
   const exactMatch = usePathParams("/facility/:facilityId");
@@ -139,11 +48,12 @@ export function AppSidebar({
   const orgSubpathMatch = usePathParams("/organization/:id/*");
   const organizationId = orgMatch?.id || orgSubpathMatch?.id;
 
+  const facilitySidebar = sidebarFor === SidebarFor.FACILITY;
+  const patientSidebar = sidebarFor === SidebarFor.PATIENT;
+
   const [selectedFacility, setSelectedFacility] =
     React.useState<UserFacilityModel | null>(null);
 
-  const { t } = useTranslation();
-
   const selectedOrganization = React.useMemo(() => {
     if (!user?.organizations || !organizationId) return undefined;
     return user.organizations.find((org) => org.id === organizationId);
@@ -207,34 +117,17 @@ export function AppSidebar({
 
       <SidebarContent>
         {facilitySidebar && !selectedOrganization && (
-          <NavMain links={generateFacilityLinks(selectedFacility, t, user)} />
+          <FacilityNav selectedFacility={selectedFacility} user={user} />
         )}
         {selectedOrganization && (
-          <NavMain
-            links={generateOrganizationLinks(user?.organizations || [])}
-          />
-        )}
-        {patientUserContext && (
-          <>
-            <PatientSwitcher />
-            <NavMain
-              links={generatePatientLinks(
-                patientUserContext.selectedPatient,
-                t,
-              )}
-            />
-          </>
+          <OrgNav organizations={user?.organizations || []} />
         )}
+        {patientSidebar && <PatientNav />}
       </SidebarContent>
 
       <SidebarFooter>
         {(facilitySidebar || selectedOrganization) && <FacilityNavUser />}
-        {patientUserContext && (
-          <PatientNavUser
-            patient={patientUserContext.selectedPatient}
-            phoneNumber={patientUserContext.tokenData.phoneNumber}
-          />
-        )}
+        {patientSidebar && <PatientNavUser />}
       </SidebarFooter>
 
       <SidebarRail />
diff --git a/src/components/ui/sidebar/facility-nav.tsx b/src/components/ui/sidebar/facility-nav.tsx
new file mode 100644
index 00000000000..75c6957919f
--- /dev/null
+++ b/src/components/ui/sidebar/facility-nav.tsx
@@ -0,0 +1,63 @@
+import { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+
+import { NavMain } from "@/components/ui/sidebar/nav-main";
+
+import { UserFacilityModel, UserModel } from "@/components/Users/models";
+
+interface NavigationLink {
+  name: string;
+  url: string;
+  icon?: string;
+}
+
+interface FacilityNavProps {
+  selectedFacility: UserFacilityModel | null;
+  user?: UserModel;
+}
+
+function generateFacilityLinks(
+  selectedFacility: UserFacilityModel | null,
+  t: TFunction,
+  user?: UserModel,
+) {
+  if (!selectedFacility) return [];
+
+  const baseUrl = `/facility/${selectedFacility.id}`;
+  const links: NavigationLink[] = [
+    { name: t("facility"), url: baseUrl, icon: "d-hospital" },
+    {
+      name: t("appointments"),
+      url: `${baseUrl}/appointments`,
+      icon: "d-calendar",
+    },
+    {
+      name: t("search_patients"),
+      url: `${baseUrl}/patients`,
+      icon: "d-patient",
+    },
+    { name: t("encounters"), url: `${baseUrl}/encounters`, icon: "d-patient" },
+    { name: t("resource"), url: "/resource", icon: "d-book-open" },
+    { name: t("users"), url: `${baseUrl}/users`, icon: "d-people" },
+    {
+      name: t("organization"),
+      url: `${baseUrl}/organization`,
+      icon: "d-book-open",
+    },
+  ];
+
+  if (user) {
+    links.push({
+      name: t("schedules"),
+      url: `${baseUrl}/users/${user.username}/availability`,
+      icon: "d-calendar",
+    });
+  }
+
+  return links;
+}
+
+export function FacilityNav({ selectedFacility, user }: FacilityNavProps) {
+  const { t } = useTranslation();
+  return <NavMain links={generateFacilityLinks(selectedFacility, t, user)} />;
+}
diff --git a/src/components/ui/sidebar/nav-user.tsx b/src/components/ui/sidebar/nav-user.tsx
index 56857862ad4..9a36b79a8ae 100644
--- a/src/components/ui/sidebar/nav-user.tsx
+++ b/src/components/ui/sidebar/nav-user.tsx
@@ -25,8 +25,7 @@ import { Avatar } from "@/components/Common/Avatar";
 
 import useAuthUser, { useAuthContext } from "@/hooks/useAuthUser";
 import { usePatientSignOut } from "@/hooks/usePatientSignOut";
-
-import { AppointmentPatient } from "@/pages/Patient/Utils";
+import { usePatientContext } from "@/hooks/usePatientUser";
 
 export function FacilityNavUser() {
   const { t } = useTranslation();
@@ -117,16 +116,14 @@ export function FacilityNavUser() {
   );
 }
 
-export function PatientNavUser({
-  patient,
-  phoneNumber,
-}: {
-  patient: AppointmentPatient | null;
-  phoneNumber: string;
-}) {
+export function PatientNavUser() {
   const { t } = useTranslation();
   const { isMobile, open } = useSidebar();
   const signOut = usePatientSignOut();
+  const patientUserContext = usePatientContext();
+
+  const patient = patientUserContext?.selectedPatient;
+  const phoneNumber = patientUserContext?.tokenData.phoneNumber;
 
   return (
     <SidebarMenu>
diff --git a/src/components/ui/sidebar/org-nav.tsx b/src/components/ui/sidebar/org-nav.tsx
new file mode 100644
index 00000000000..cb4e3990554
--- /dev/null
+++ b/src/components/ui/sidebar/org-nav.tsx
@@ -0,0 +1,26 @@
+import { NavMain } from "@/components/ui/sidebar/nav-main";
+
+import { Organization } from "@/types/organization/organization";
+
+interface NavigationLink {
+  name: string;
+  url: string;
+  icon?: string;
+}
+
+interface OrgNavProps {
+  organizations: Organization[];
+}
+
+function generateOrganizationLinks(
+  organizations: Organization[],
+): NavigationLink[] {
+  return organizations.map((org) => ({
+    name: org.name,
+    url: `/organization/${org.id}`,
+  }));
+}
+
+export function OrgNav({ organizations }: OrgNavProps) {
+  return <NavMain links={generateOrganizationLinks(organizations)} />;
+}
diff --git a/src/components/ui/sidebar/patient-nav.tsx b/src/components/ui/sidebar/patient-nav.tsx
new file mode 100644
index 00000000000..b52cb5b4481
--- /dev/null
+++ b/src/components/ui/sidebar/patient-nav.tsx
@@ -0,0 +1,59 @@
+import { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+
+import { NavMain } from "@/components/ui/sidebar/nav-main";
+import { PatientSwitcher } from "@/components/ui/sidebar/patient-switcher";
+
+import { usePatientContext } from "@/hooks/usePatientUser";
+
+import { AppointmentPatient } from "@/pages/Patient/Utils";
+
+interface NavigationLink {
+  name: string;
+  url: string;
+  icon?: string;
+}
+
+function generatePatientLinks(
+  selectedUser: AppointmentPatient | null,
+  t: TFunction,
+): NavigationLink[] {
+  if (!selectedUser) return [];
+
+  const { geo_organization } = selectedUser;
+  let parentOrganization = geo_organization?.parent;
+  while (parentOrganization?.parent) {
+    if (parentOrganization.level_cache === 1) {
+      break;
+    }
+    parentOrganization = parentOrganization.parent;
+  }
+
+  const queryParams = new URLSearchParams();
+
+  if (parentOrganization) {
+    queryParams.set("organization", String(parentOrganization?.id));
+  }
+
+  return [
+    { name: t("appointments"), url: "/patient/home", icon: "d-patient" },
+    {
+      name: t("nearby_facilities"),
+      url: `/nearby_facilities/?${queryParams.toString()}`,
+      icon: "d-patient",
+    },
+  ];
+}
+
+export function PatientNav() {
+  const { t } = useTranslation();
+  const patientUserContext = usePatientContext();
+  const selectedPatient = patientUserContext?.selectedPatient;
+
+  return (
+    <>
+      <PatientSwitcher />
+      <NavMain links={generatePatientLinks(selectedPatient, t)} />
+    </>
+  );
+}

From f27b67b764e76826c15c761530202693a40d9018 Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Wed, 8 Jan 2025 12:24:55 +0530
Subject: [PATCH 10/16] AllergyList: Add i18n; map key

---
 src/components/Patient/allergy/list.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Patient/allergy/list.tsx b/src/components/Patient/allergy/list.tsx
index 284b7885a70..456f61c759e 100644
--- a/src/components/Patient/allergy/list.tsx
+++ b/src/components/Patient/allergy/list.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { t } from "i18next";
 
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -85,22 +86,22 @@ export function AllergyList({ patientId, encounterId }: AllergyListProps) {
   return (
     <Card className="p-0">
       <CardHeader className="px-4 py-0 pt-4">
-        <CardTitle>Allergies</CardTitle>
+        <CardTitle>{t("allergies")}</CardTitle>
       </CardHeader>
       <CardContent className="p-2">
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Allergen</TableHead>
-              <TableHead>Category</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Criticality</TableHead>
-              <TableHead>Created By</TableHead>
+              <TableHead>{t("allergen")}</TableHead>
+              <TableHead>{t("category")}</TableHead>
+              <TableHead>{t("status")}</TableHead>
+              <TableHead>{t("criticality")}</TableHead>
+              <TableHead>{t("created_by")}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {allergies.results.map((allergy: AllergyIntolerance) => (
-              <TableRow>
+              <TableRow key={allergy.id}>
                 <TableCell className="font-medium">
                   {allergy.code.display}
                 </TableCell>

From 58b9789105c18f802c2bf0b748fb453aea855266 Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Wed, 8 Jan 2025 12:38:11 +0530
Subject: [PATCH 11/16] Add Actions in Encounter

---
 public/locale/en.json                      |  5 ++
 src/Routers/routes/ConsultationRoutes.tsx  | 48 +++++------
 src/components/Patient/PatientInfoCard.tsx | 95 ++++++++++++++++++++--
 3 files changed, 116 insertions(+), 32 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 32cdc9c221c..5008b13f928 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -359,6 +359,7 @@
   "all_changes_have_been_saved": "All changes have been saved",
   "all_details": "All Details",
   "all_patients": "All Patients",
+  "allergen": "Allergen",
   "allergies": "Allergies",
   "allow_transfer": "Allow Transfer",
   "allowed_formats_are": "Allowed formats are",
@@ -650,6 +651,7 @@
   "created_by": "Created By",
   "created_date": "Created Date",
   "created_on": "Created On",
+  "criticality": "Criticality",
   "csv_file_in_the_specified_format": "Select a CSV file in the specified format",
   "current_address": "Current Address",
   "current_password": "Current Password",
@@ -829,6 +831,7 @@
   "encounter_discharge_disposition__snf": "Skilled nursing facility",
   "encounter_duration_confirmation": "The duration of this encounter would be",
   "encounter_id": "Encounter ID",
+  "encounter_marked_as_complete": "Encounter Completed",
   "encounter_notes__all_discussions": "All Discussions",
   "encounter_notes__be_first_to_send": "Be the first to send a message",
   "encounter_notes__choose_template": "Choose a template or enter a custom title",
@@ -899,6 +902,7 @@
   "error_deleting_shifting": "Error while deleting Shifting record",
   "error_fetching_slots_data": "Error while fetching slots data",
   "error_sending_otp": "Error while sending OTP, Please try again later",
+  "error_updating_encounter": "Error to Updating Encounter",
   "error_verifying_otp": "Error while verifying OTP, Please request a new OTP",
   "error_while_deleting_record": "Error while deleting record",
   "escape": "Escape",
@@ -1163,6 +1167,7 @@
   "manufacturer": "Manufacturer",
   "map_acronym": "M.A.P.",
   "mark_all_as_read": "Mark all as Read",
+  "mark_as_complete": "Mark as Complete",
   "mark_as_fulfilled": "Mark as Fullfilled",
   "mark_as_noshow": "Mark as no-show",
   "mark_as_read": "Mark as Read",
diff --git a/src/Routers/routes/ConsultationRoutes.tsx b/src/Routers/routes/ConsultationRoutes.tsx
index a55b00b3513..96812b5ea40 100644
--- a/src/Routers/routes/ConsultationRoutes.tsx
+++ b/src/Routers/routes/ConsultationRoutes.tsx
@@ -42,26 +42,6 @@ const consultationRoutes: AppRoutes = {
         patientId={patientId}
       />
     ),
-  "/facility/:facilityId/patient/:patientId/consultation/:id/consent-records":
-    ({ facilityId, patientId, id }) => (
-      <PatientConsentRecords
-        facilityId={facilityId}
-        patientId={patientId}
-        consultationId={id}
-      />
-    ),
-  "/facility/:facilityId/patient/:patientId/encounterId/:id/files/": ({
-    facilityId,
-    patientId,
-    id,
-  }) => (
-    <FileUploadPage
-      facilityId={facilityId}
-      patientId={patientId}
-      encounterId={id}
-      type="encounter"
-    />
-  ),
   "/facility/:facilityId/patient/:patientId/questionnaire": ({
     facilityId,
     patientId,
@@ -80,10 +60,6 @@ const consultationRoutes: AppRoutes = {
         patientId={patientId}
       />
     ),
-  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire_response/:id":
-    ({ patientId, id }) => (
-      <QuestionnaireResponseView responseId={id} patientId={patientId} />
-    ),
   "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire/:slug":
     ({ facilityId, encounterId, slug, patientId }) => (
       <EncounterQuestionnaire
@@ -93,6 +69,30 @@ const consultationRoutes: AppRoutes = {
         patientId={patientId}
       />
     ),
+  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire_response/:id":
+    ({ patientId, id }) => (
+      <QuestionnaireResponseView responseId={id} patientId={patientId} />
+    ),
+  "/facility/:facilityId/patient/:patientId/consultation/:id/consent-records":
+    ({ facilityId, patientId, id }) => (
+      <PatientConsentRecords
+        facilityId={facilityId}
+        patientId={patientId}
+        consultationId={id}
+      />
+    ),
+  "/facility/:facilityId/patient/:patientId/encounterId/:id/files/": ({
+    facilityId,
+    patientId,
+    id,
+  }) => (
+    <FileUploadPage
+      facilityId={facilityId}
+      patientId={patientId}
+      encounterId={id}
+      type="encounter"
+    />
+  ),
 };
 
 export default consultationRoutes;
diff --git a/src/components/Patient/PatientInfoCard.tsx b/src/components/Patient/PatientInfoCard.tsx
index 8c0c8d29014..a943dca1882 100644
--- a/src/components/Patient/PatientInfoCard.tsx
+++ b/src/components/Patient/PatientInfoCard.tsx
@@ -1,3 +1,4 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   BedSingle,
   Building,
@@ -9,8 +10,18 @@ import {
 } from "lucide-react";
 import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Popover,
   PopoverContent,
@@ -19,13 +30,33 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 
+import routes from "@/Utils/request/api";
+import mutate from "@/Utils/request/mutate";
 import { formatDateTime, formatPatientAge } from "@/Utils/utils";
 import { Encounter, completedEncounterStatus } from "@/types/emr/encounter";
 import { Patient } from "@/types/emr/newPatient";
 
-import { Button } from "../ui/button";
 import ManageEncounterOrganizations from "./ManageEncounterOrganizations";
 
+const QUESTIONNAIRE_OPTIONS = [
+  {
+    slug: "encounter",
+    title: "Update Encounter",
+  },
+  {
+    slug: "community-nurse",
+    title: "Community Nurse Form",
+  },
+  {
+    slug: "nursing_care_given",
+    title: "Nursing Care Given",
+  },
+  {
+    slug: "recommend_discharge_v2",
+    title: "Recommend Discharge",
+  },
+] as const;
+
 export interface PatientInfoCardProps {
   patient: Patient;
   encounter: Encounter;
@@ -35,6 +66,36 @@ export interface PatientInfoCardProps {
 export default function PatientInfoCard(props: PatientInfoCardProps) {
   const { patient, encounter } = props;
   const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  const { mutate: updateEncounter } = useMutation({
+    mutationFn: mutate(routes.encounter.update, {
+      pathParams: { id: encounter.id },
+    }),
+    onSuccess: () => {
+      toast.success(t("encounter_marked_as_complete"));
+      queryClient.invalidateQueries({ queryKey: ["encounter", encounter.id] });
+    },
+    onError: () => {
+      toast.error(t("error_updating_encounter"));
+    },
+  });
+
+  const handleMarkAsComplete = () => {
+    updateEncounter({
+      ...encounter,
+      status: "completed",
+      organizations: encounter.organizations.map((org) => org.id),
+      patient: encounter.patient.id,
+      encounter_class: encounter.encounter_class,
+      period: encounter.period,
+      hospitalization: encounter.hospitalization,
+      priority: encounter.priority,
+      external_identifier: encounter.external_identifier,
+      facility: encounter.facility.id,
+    });
+  };
+
   return (
     <>
       <section className="flex flex-col lg:flex-row">
@@ -262,13 +323,31 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
         >
           {!completedEncounterStatus.includes(encounter.status) && (
             <div className="flex w-full flex-col gap-3 lg:w-auto 2xl:flex-row">
-              <Button asChild variant="primary">
-                <Link
-                  href={`/facility/${encounter.facility.id}/patient/${patient.id}/encounter/${encounter.id}/edit_encounter`}
-                >
-                  Update Encounter
-                </Link>
-              </Button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="primary">
+                    {t("update")}
+                    <ChevronDown className="ml-2 h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {QUESTIONNAIRE_OPTIONS.map((option) => (
+                    <DropdownMenuItem key={option.slug} asChild>
+                      <Link
+                        href={`/facility/${encounter.facility.id}/patient/${patient.id}/encounter/${encounter.id}/questionnaire/${option.slug}`}
+                        className="cursor-pointer text-gray-800"
+                      >
+                        {t(option.title)}
+                      </Link>
+                    </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuLabel>{t("actions")}</DropdownMenuLabel>
+                  <DropdownMenuItem onClick={handleMarkAsComplete}>
+                    {t("mark_as_complete")}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </div>
           )}
         </div>

From 4d7412bbef37e007cbf7e77af47dbc85bc820112 Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Wed, 8 Jan 2025 12:46:34 +0530
Subject: [PATCH 12/16] Remove Shortcut for Nursing Care

---
 src/components/Patient/PatientInfoCard.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Patient/PatientInfoCard.tsx b/src/components/Patient/PatientInfoCard.tsx
index a943dca1882..2c716095400 100644
--- a/src/components/Patient/PatientInfoCard.tsx
+++ b/src/components/Patient/PatientInfoCard.tsx
@@ -47,10 +47,6 @@ const QUESTIONNAIRE_OPTIONS = [
     slug: "community-nurse",
     title: "Community Nurse Form",
   },
-  {
-    slug: "nursing_care_given",
-    title: "Nursing Care Given",
-  },
   {
     slug: "recommend_discharge_v2",
     title: "Recommend Discharge",

From bfb46edd8ffe25a2e1d4d022fcca2ff4ee07769f Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Wed, 8 Jan 2025 13:03:11 +0530
Subject: [PATCH 13/16] Update Crowdin configuration file

---
 crowdin.yml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/crowdin.yml b/crowdin.yml
index fdcb6bcd32d..237597dd875 100644
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -1,6 +1,5 @@
 files:
-  - source: /public/locale/{{lang}}.json
+  - source: '/public/locale/{{lang}}.json'
     translation: /public/locale/%two_letters_code%/%original_file_name%
 bundles:
   - 2
-

From 6c78dd6e4ec6dff88f1e4c48b464f0af21ba6750 Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Wed, 8 Jan 2025 14:27:16 +0530
Subject: [PATCH 14/16] Update Crowdin configuration file

---
 crowdin.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/crowdin.yml b/crowdin.yml
index 237597dd875..04cbe1a8d50 100644
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -1,5 +1,5 @@
 files:
-  - source: '/public/locale/{{lang}}.json'
-    translation: /public/locale/%two_letters_code%/%original_file_name%
+  - source: public/locale/en.json
+    translation: /public/locale/%two_letters_code%.json
 bundles:
   - 2

From 97f255140ab57df20129d1fbef3025d876545471 Mon Sep 17 00:00:00 2001
From: Aditya Jindal <adityajindal2305@gmail.com>
Date: Wed, 8 Jan 2025 20:09:15 +0530
Subject: [PATCH 15/16] =?UTF-8?q?Fix:=20Replace=20InputWithError=20and=20I?=
 =?UTF-8?q?nputErrors=20components=20with=20ShadCN=E2=80=99s=20components?=
 =?UTF-8?q?=20directly.=20(#9847)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locale/en.json                         |   1 +
 .../Patient/PatientRegistration.tsx           | 549 ++++++++++--------
 src/components/ui/errors.tsx                  |  11 -
 src/components/ui/input-with-error.tsx        |  24 -
 .../FacilityOrganizationSelector.tsx          |  12 +-
 .../components/OrganizationSelector.tsx       |  69 ++-
 6 files changed, 358 insertions(+), 308 deletions(-)
 delete mode 100644 src/components/ui/errors.tsx
 delete mode 100644 src/components/ui/input-with-error.tsx

diff --git a/public/locale/en.json b/public/locale/en.json
index 5008b13f928..3fbcfc3de72 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1632,6 +1632,7 @@
   "select": "Select",
   "select_all": "Select All",
   "select_date": "Select date",
+  "select_department": "Select Department",
   "select_eligible_policy": "Select an Eligible Insurance Policy",
   "select_facility_for_discharged_patients_warning": "Facility needs to be selected to view discharged patients.",
   "select_for_administration": "Select for Administration",
diff --git a/src/components/Patient/PatientRegistration.tsx b/src/components/Patient/PatientRegistration.tsx
index 1dc236f5fb3..94289124403 100644
--- a/src/components/Patient/PatientRegistration.tsx
+++ b/src/components/Patient/PatientRegistration.tsx
@@ -8,7 +8,6 @@ import SectionNavigator from "@/CAREUI/misc/SectionNavigator";
 
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import { InputErrors } from "@/components/ui/errors";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
@@ -49,7 +48,6 @@ import OrganizationSelector from "@/pages/Organization/components/OrganizationSe
 import { PatientModel, validatePatient } from "@/types/emr/patient";
 
 import Autocomplete from "../ui/autocomplete";
-import InputWithError from "../ui/input-with-error";
 
 interface PatientRegistrationPageProps {
   facilityId: string;
@@ -316,71 +314,93 @@ export default function PatientRegistration(
             </h2>
             <div className="text-sm">{t("general_info_detail")}</div>
             <br />
-            <InputWithError label={t("name")} required errors={errors["name"]}>
-              <Input
-                {...fieldProps("name")}
-                placeholder={t("type_patient_name")}
-              />
-            </InputWithError>
+            <Label className="mb-2">
+              {t("name")}
+              <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              {...fieldProps("name")}
+              placeholder={t("type_patient_name")}
+            />
+            <div className="mt-1" data-input-error>
+              {errors["name"] &&
+                errors["name"].map((error, i) => (
+                  <div key={i} className="text-red-500 text-xs">
+                    {error}
+                  </div>
+                ))}
+            </div>
             <br />
-            <InputWithError
-              label={t("phone_number")}
-              required
-              errors={errors["phone_number"]}
-            >
-              <Input
-                {...fieldProps("phone_number")}
-                onChange={(e) => {
-                  if (e.target.value.length > 13) return;
-                  setForm((f) => ({
-                    ...f,
-                    phone_number: e.target.value,
-                    emergency_phone_number: samePhoneNumber
-                      ? e.target.value
-                      : f.emergency_phone_number,
-                  }));
+            <Label className="mb-2">
+              {t("phone_number")}
+              <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              {...fieldProps("phone_number")}
+              onChange={(e) => {
+                if (e.target.value.length > 13) return;
+                setForm((f) => ({
+                  ...f,
+                  phone_number: e.target.value,
+                  emergency_phone_number: samePhoneNumber
+                    ? e.target.value
+                    : f.emergency_phone_number,
+                }));
+              }}
+            />
+            <div className="mt-1" data-input-error>
+              {errors["phone_number"] &&
+                errors["phone_number"]?.map((error, i) => (
+                  <div key={i} className="text-red-500 text-xs">
+                    {error}
+                  </div>
+                ))}
+            </div>
+
+            <div className="mt-1 flex gap-1 items-center">
+              <Checkbox
+                checked={samePhoneNumber}
+                onCheckedChange={() => {
+                  const newValue = !samePhoneNumber;
+                  setSamePhoneNumber(newValue);
+                  if (newValue) {
+                    setForm((f) => ({
+                      ...f,
+                      emergency_phone_number: f.phone_number,
+                    }));
+                  }
                 }}
+                id="same-phone-number"
               />
-            </InputWithError>
-            <div className="mt-1 flex gap-1 items-center">
-              <InputWithError>
-                <Checkbox
-                  checked={samePhoneNumber}
-                  onCheckedChange={() => {
-                    const newValue = !samePhoneNumber;
-                    setSamePhoneNumber(newValue);
-                    if (newValue) {
-                      setForm((f) => ({
-                        ...f,
-                        emergency_phone_number: f.phone_number,
-                      }));
-                    }
-                  }}
-                  id="same-phone-number"
-                />
-                <Label htmlFor="same-phone-number">
-                  {t("use_phone_number_for_emergency")}
-                </Label>
-              </InputWithError>
+              <Label htmlFor="same-phone-number">
+                {t("use_phone_number_for_emergency")}
+              </Label>
             </div>
             <br />
-            <InputWithError
-              label={t("emergency_phone_number")}
-              required
-              errors={errors["emergency_phone_number"]}
-            >
-              <Input
-                {...fieldProps("emergency_phone_number")}
-                onChange={(e) => {
-                  if (e.target.value.length > 13) return;
-                  setForm((f) => ({
-                    ...f,
-                    emergency_phone_number: e.target.value,
-                  }));
-                }}
-                disabled={samePhoneNumber}
-              />
-            </InputWithError>
+
+            <Label className="mb-2">
+              {t("emergency_phone_number")}
+              <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              {...fieldProps("emergency_phone_number")}
+              onChange={(e) => {
+                if (e.target.value.length > 13) return;
+                setForm((f) => ({
+                  ...f,
+                  emergency_phone_number: e.target.value,
+                }));
+              }}
+              disabled={samePhoneNumber}
+            />
+            <div className="mt-1" data-input-error>
+              {errors["emergency_phone_number"] &&
+                errors["emergency_phone_number"]?.map((error, i) => (
+                  <div key={i} className="text-red-500 text-xs">
+                    {error}
+                  </div>
+                ))}
+            </div>
             {/* <br />
             <Input
               // This field does not exist in the backend, but is present in the design
@@ -389,46 +409,66 @@ export default function PatientRegistration(
               placeholder={t("emergency_contact_person_name")}
             /> */}
             <br />
-            <InputWithError label={t("sex")} required errors={errors["gender"]}>
-              <RadioGroup
-                value={form.gender?.toString()}
-                onValueChange={(value) =>
-                  setForm((f) => ({ ...f, gender: value }))
-                }
-                className="flex items-center gap-4"
-              >
-                {GENDER_TYPES.map((g) => (
-                  <Fragment key={g.id}>
-                    <RadioGroupItem
-                      value={g.id.toString()}
-                      id={"gender_" + g.id}
-                    />
-                    <Label htmlFor={"gender_" + g.id}>
-                      {t(`GENDER__${g.id}`)}
-                    </Label>
-                  </Fragment>
+
+            <Label className="mb-2">
+              {t("sex")}
+              <span className="text-red-500">*</span>
+            </Label>
+            <RadioGroup
+              value={form.gender?.toString()}
+              onValueChange={(value) =>
+                setForm((f) => ({ ...f, gender: value }))
+              }
+              className="flex items-center gap-4"
+            >
+              {GENDER_TYPES.map((g) => (
+                <Fragment key={g.id}>
+                  <RadioGroupItem
+                    value={g.id.toString()}
+                    id={"gender_" + g.id}
+                  />
+                  <Label htmlFor={"gender_" + g.id}>
+                    {t(`GENDER__${g.id}`)}
+                  </Label>
+                </Fragment>
+              ))}
+            </RadioGroup>
+            <div className="mt-1" data-input-error>
+              {errors["gender"] &&
+                errors["gender"]?.map((error, i) => (
+                  <div key={i} className="text-red-500 text-xs">
+                    {error}
+                  </div>
                 ))}
-              </RadioGroup>
-            </InputWithError>
+            </div>
+
             <br />
-            <InputWithError
-              label={t("blood_group")}
-              required
-              errors={errors["blood_group"]}
-            >
-              <Select {...selectProps("blood_group")}>
-                <SelectTrigger className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {BLOOD_GROUP_CHOICES.map((bg) => (
-                    <SelectItem key={bg.id} value={bg.id}>
-                      {bg.text}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </InputWithError>
+
+            <Label className="mb-2">
+              {t("blood_group")}
+              <span className="text-red-500">*</span>
+            </Label>
+            <Select {...selectProps("blood_group")}>
+              <SelectTrigger className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {BLOOD_GROUP_CHOICES.map((bg) => (
+                  <SelectItem key={bg.id} value={bg.id}>
+                    {bg.text}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <div className="mt-1" data-input-error>
+              {errors["blood_group"] &&
+                errors["blood_group"]?.map((error, i) => (
+                  <div key={i} className="text-red-500 text-xs">
+                    {error}
+                  </div>
+                ))}
+            </div>
+
             <br />
             <Tabs
               value={ageDob}
@@ -447,62 +487,74 @@ export default function PatientRegistration(
               <TabsContent value="dob">
                 <div className="flex items-center gap-2">
                   <div className="flex-1">
-                    <InputWithError label={t("day")} required>
-                      <Input
-                        placeholder="DD"
-                        type="number"
-                        value={form.date_of_birth?.split("-")[2] || ""}
-                        maxLength={2}
-                        max={31}
-                        min={1}
-                        onChange={(e) =>
-                          setForm((f) => ({
-                            ...f,
-                            date_of_birth: `${form.date_of_birth?.split("-")[0] || ""}-${form.date_of_birth?.split("-")[1] || ""}-${e.target.value}`,
-                          }))
-                        }
-                      />
-                    </InputWithError>
+                    <Label className="mb-2">
+                      {t("day")}
+                      <span className="text-red-500">*</span>
+                    </Label>
+                    <Input
+                      placeholder="DD"
+                      type="number"
+                      value={form.date_of_birth?.split("-")[2] || ""}
+                      maxLength={2}
+                      max={31}
+                      min={1}
+                      onChange={(e) =>
+                        setForm((f) => ({
+                          ...f,
+                          date_of_birth: `${form.date_of_birth?.split("-")[0] || ""}-${form.date_of_birth?.split("-")[1] || ""}-${e.target.value}`,
+                        }))
+                      }
+                    />
                   </div>
                   <div className="flex-1">
-                    <InputWithError label={t("month")} required>
-                      <Input
-                        placeholder="MM"
-                        type="number"
-                        value={form.date_of_birth?.split("-")[1] || ""}
-                        maxLength={2}
-                        max={12}
-                        min={1}
-                        onChange={(e) =>
-                          setForm((f) => ({
-                            ...f,
-                            date_of_birth: `${form.date_of_birth?.split("-")[0] || ""}-${e.target.value}-${form.date_of_birth?.split("-")[2] || ""}`,
-                          }))
-                        }
-                      />
-                    </InputWithError>
+                    <Label className="mb-2">
+                      {t("month")}
+                      <span className="text-red-500">*</span>
+                    </Label>
+                    <Input
+                      placeholder="MM"
+                      type="number"
+                      value={form.date_of_birth?.split("-")[1] || ""}
+                      maxLength={2}
+                      max={12}
+                      min={1}
+                      onChange={(e) =>
+                        setForm((f) => ({
+                          ...f,
+                          date_of_birth: `${form.date_of_birth?.split("-")[0] || ""}-${e.target.value}-${form.date_of_birth?.split("-")[2] || ""}`,
+                        }))
+                      }
+                    />
                   </div>
                   <div className="flex-1">
-                    <InputWithError label={t("year")} required>
-                      <Input
-                        type="number"
-                        placeholder="YYYY"
-                        value={form.date_of_birth?.split("-")[0] || ""}
-                        maxLength={4}
-                        max={new Date().getFullYear()}
-                        min={1900}
-                        onChange={(e) =>
-                          setForm((f) => ({
-                            ...f,
-                            date_of_birth: `${e.target.value}-${form.date_of_birth?.split("-")[1] || ""}-${form.date_of_birth?.split("-")[2] || ""}`,
-                          }))
-                        }
-                      />
-                    </InputWithError>
+                    <Label className="mb-2">
+                      {t("year")}
+                      <span className="text-red-500">*</span>
+                    </Label>
+                    <Input
+                      type="number"
+                      placeholder="YYYY"
+                      value={form.date_of_birth?.split("-")[0] || ""}
+                      maxLength={4}
+                      max={new Date().getFullYear()}
+                      min={1900}
+                      onChange={(e) =>
+                        setForm((f) => ({
+                          ...f,
+                          date_of_birth: `${e.target.value}-${form.date_of_birth?.split("-")[1] || ""}-${form.date_of_birth?.split("-")[2] || ""}`,
+                        }))
+                      }
+                    />
                   </div>
                 </div>
                 {errors["date_of_birth"] && (
-                  <InputErrors errors={errors["date_of_birth"]} />
+                  <div className="mt-1" data-input-error>
+                    {errors["date_of_birth"].map((error, i) => (
+                      <div key={i} className="text-red-500 text-xs">
+                        {error}
+                      </div>
+                    ))}
+                  </div>
                 )}
               </TabsContent>
               <TabsContent value="age">
@@ -512,25 +564,32 @@ export default function PatientRegistration(
                   <b>{t("age_input_warning_bold")}</b>
                 </div>
                 <div className="relative">
-                  <InputWithError
-                    label={t("age")}
-                    required
-                    errors={errors["year_of_birth"]}
-                  >
-                    <Input
-                      value={form.age ? form.age : undefined}
-                      onChange={(e) =>
-                        setForm((f) => ({
-                          ...f,
-                          age: e.target.value,
-                          year_of_birth: e.target.value
-                            ? new Date().getFullYear() - Number(e.target.value)
-                            : undefined,
-                        }))
-                      }
-                      type="number"
-                    />
-                  </InputWithError>
+                  <Label className="mb-2">
+                    {t("age")}
+                    <span className="text-red-500">*</span>
+                  </Label>
+                  <Input
+                    value={form.age ? form.age : undefined}
+                    onChange={(e) =>
+                      setForm((f) => ({
+                        ...f,
+                        age: e.target.value,
+                        year_of_birth: e.target.value
+                          ? new Date().getFullYear() - Number(e.target.value)
+                          : undefined,
+                      }))
+                    }
+                    type="number"
+                  />
+                  <div className="mt-1" data-input-error>
+                    {errors["year_of_birth"] &&
+                      errors["year_of_birth"]?.map((error, i) => (
+                        <div key={i} className="text-red-500 text-xs">
+                          {error}
+                        </div>
+                      ))}
+                  </div>
+
                   {form.year_of_birth && (
                     <div className="text-xs absolute right-6 top-[22px] bottom-0 flex items-center justify-center p-2 pointer-events-none">
                       {t("year_of_birth")} : {form.year_of_birth}
@@ -540,68 +599,84 @@ export default function PatientRegistration(
               </TabsContent>
             </Tabs>
             <br />
-            <InputWithError
-              label={t("current_address")}
-              required
-              errors={errors["address"]}
-            >
-              <Textarea
-                {...fieldProps("address")}
-                onChange={(e) =>
+
+            <Label className="mb-2">
+              {t("current_address")}
+              <span className="text-red-500">*</span>
+            </Label>
+            <Textarea
+              {...fieldProps("address")}
+              onChange={(e) =>
+                setForm((f) => ({
+                  ...f,
+                  address: e.target.value,
+                  permanent_address: sameAddress
+                    ? e.target.value
+                    : f.permanent_address,
+                }))
+              }
+            />
+            <div className="mt-1" data-input-error>
+              {errors["address"] &&
+                errors["address"]?.map((error, i) => (
+                  <div key={i} className="text-red-500 text-xs">
+                    {error}
+                  </div>
+                ))}
+            </div>
+
+            <div className="mt-1 flex gap-1 items-center">
+              <Checkbox
+                checked={sameAddress}
+                onCheckedChange={() => {
+                  setSameAddress(!sameAddress);
                   setForm((f) => ({
                     ...f,
-                    address: e.target.value,
-                    permanent_address: sameAddress
-                      ? e.target.value
+                    permanent_address: !sameAddress
+                      ? f.address
                       : f.permanent_address,
-                  }))
-                }
+                  }));
+                }}
+                id="same-address"
               />
-            </InputWithError>
-            <div className="mt-1 flex gap-1 items-center">
-              <InputWithError>
-                <Checkbox
-                  checked={sameAddress}
-                  onCheckedChange={() => {
-                    setSameAddress(!sameAddress);
-                    setForm((f) => ({
-                      ...f,
-                      permanent_address: !sameAddress
-                        ? f.address
-                        : f.permanent_address,
-                    }));
-                  }}
-                  id="same-address"
-                />
-                <Label htmlFor="same-address">
-                  {t("use_address_as_permanent")}
-                </Label>
-              </InputWithError>
+              <Label htmlFor="same-address">
+                {t("use_address_as_permanent")}
+              </Label>
             </div>
             <br />
-            <InputWithError label={t("permanent_address")} required>
-              <Textarea
-                {...fieldProps("permanent_address")}
-                value={form.permanent_address}
-                onChange={(e) =>
-                  setForm((f) => ({ ...f, permanent_address: e.target.value }))
-                }
-                disabled={sameAddress}
-              />
-            </InputWithError>
+
+            <Label className="mb-2">
+              {t("permanent_address")}
+              <span className="text-red-500">*</span>
+            </Label>
+            <Textarea
+              {...fieldProps("permanent_address")}
+              value={form.permanent_address}
+              onChange={(e) =>
+                setForm((f) => ({ ...f, permanent_address: e.target.value }))
+              }
+              disabled={sameAddress}
+            />
             {/* <br />
             <Input
               // This field does not exist in the backend, but is present in the design
               label={t("landmark")}
             /> */}
             <br />
-            <InputWithError
-              label={t("pincode")}
-              required
-              errors={errors["pincode"]}
-            >
-              <Input {...fieldProps("pincode")} type="number" />
-            </InputWithError>
+            <Label className="mb-2">
+              {t("pincode")}
+              <span className="text-red-500">*</span>
+            </Label>
+            <Input {...fieldProps("pincode")} type="number" />
+            <div className="mt-1" data-input-error>
+              {errors["pincode"] &&
+                errors["pincode"]?.map((error, i) => (
+                  <div key={i} className="text-red-500 text-xs">
+                    {error}
+                  </div>
+                ))}
+            </div>
+
             {/* {showAutoFilledPincode && (
               <div>
                 <CareIcon
@@ -616,22 +691,28 @@ export default function PatientRegistration(
             <br />
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <InputWithError
-                  label={t("nationality")}
-                  errors={errors["nationality"]}
-                  required
-                >
-                  <Autocomplete
-                    options={countryList.map((c) => ({ label: c, value: c }))}
-                    value={form.nationality || ""}
-                    onChange={(value) => {
-                      setForm((f) => ({
-                        ...f,
-                        nationality: value,
-                      }));
-                    }}
-                  />
-                </InputWithError>
+                <Label className="mb-2">
+                  {t("nationality")}
+                  <span className="text-red-500">*</span>
+                </Label>
+                <Autocomplete
+                  options={countryList.map((c) => ({ label: c, value: c }))}
+                  value={form.nationality || ""}
+                  onChange={(value) => {
+                    setForm((f) => ({
+                      ...f,
+                      nationality: value,
+                    }));
+                  }}
+                />
+                <div className="mt-1" data-input-error>
+                  {errors["nationality"] &&
+                    errors["nationality"]?.map((error, i) => (
+                      <div key={i} className="text-red-500 text-xs">
+                        {error}
+                      </div>
+                    ))}
+                </div>
               </div>
               {form.nationality === "India" && (
                 <>
diff --git a/src/components/ui/errors.tsx b/src/components/ui/errors.tsx
deleted file mode 100644
index debe66d7308..00000000000
--- a/src/components/ui/errors.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export function InputErrors({ errors }: { errors?: string[] }) {
-  return errors && !!errors.length ? (
-    <div className="mt-1" data-input-error>
-      {errors?.map((error, i) => (
-        <div key={i} className="text-red-500 text-xs">
-          {error}
-        </div>
-      ))}
-    </div>
-  ) : null;
-}
diff --git a/src/components/ui/input-with-error.tsx b/src/components/ui/input-with-error.tsx
deleted file mode 100644
index 01e27d92775..00000000000
--- a/src/components/ui/input-with-error.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { InputErrors } from "./errors";
-import { Label } from "./label";
-
-export default function InputWithError(props: {
-  label?: string;
-  required?: boolean;
-  errors?: string[];
-  children: React.ReactNode;
-}) {
-  const { label, errors, children, required } = props;
-
-  return (
-    <>
-      {label && (
-        <Label className="mb-2">
-          {label}
-          {required && <span className="text-red-500">*</span>}
-        </Label>
-      )}
-      {children}
-      <InputErrors errors={errors} />
-    </>
-  );
-}
diff --git a/src/pages/FacilityOrganization/components/FacilityOrganizationSelector.tsx b/src/pages/FacilityOrganization/components/FacilityOrganizationSelector.tsx
index 92b0778d184..b9c32974a82 100644
--- a/src/pages/FacilityOrganization/components/FacilityOrganizationSelector.tsx
+++ b/src/pages/FacilityOrganization/components/FacilityOrganizationSelector.tsx
@@ -1,12 +1,13 @@
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import Autocomplete from "@/components/ui/autocomplete";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import InputWithError from "@/components/ui/input-with-error";
+import { Label } from "@/components/ui/label";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
@@ -31,6 +32,7 @@ interface AutoCompleteOption {
 export default function FacilityOrganizationSelector(
   props: FacilityOrganizationSelectorProps,
 ) {
+  const { t } = useTranslation();
   const { onChange, required, facilityId } = props;
   const [selectedLevels, setSelectedLevels] = useState<FacilityOrganization[]>(
     [],
@@ -106,7 +108,11 @@ export default function FacilityOrganizationSelector(
   };
 
   return (
-    <InputWithError label="Select Department" required={required}>
+    <>
+      <Label className="mb-2">
+        {t("select_department")}
+        {required && <span className="text-red-500">*</span>}
+      </Label>
       <div className="space-y-4">
         {/* Selected Organization Display */}
         {selectedOrganization && (
@@ -185,6 +191,6 @@ export default function FacilityOrganizationSelector(
           </div>
         )}
       </div>
-    </InputWithError>
+    </>
   );
 }
diff --git a/src/pages/Organization/components/OrganizationSelector.tsx b/src/pages/Organization/components/OrganizationSelector.tsx
index a5880f30872..4f4be545bb2 100644
--- a/src/pages/Organization/components/OrganizationSelector.tsx
+++ b/src/pages/Organization/components/OrganizationSelector.tsx
@@ -6,7 +6,7 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import Autocomplete from "@/components/ui/autocomplete";
 import { Button } from "@/components/ui/button";
-import InputWithError from "@/components/ui/input-with-error";
+import { Label } from "@/components/ui/label";
 
 import useDebouncedState from "@/hooks/useDebouncedState";
 
@@ -111,27 +111,25 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
       {/* Selected Levels */}
       {selectedLevels.map((level, index) => (
         <div>
-          <InputWithError
-            key={level.id}
-            label={t(`SYSTEM__govt_org_type__${level.metadata?.govt_org_type}`)}
-            required={required}
-          >
-            <div className="flex">
-              <div className="flex items-center h-9 w-full rounded-md border border-gray-200 bg-white px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-gray-950 placeholder:text-gray-500 focus-visible:border-primary-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-gray-800 dark:file:text-gray-50 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300">
-                <div className="w-full text-nowrap overflow-x-auto">
-                  {level.name}
-                </div>
+          <Label className="mb-2">
+            {t(`SYSTEM__govt_org_type__${level.metadata?.govt_org_type}`)}
+            {required && <span className="text-red-500">*</span>}
+          </Label>
+          <div className="flex">
+            <div className="flex items-center h-9 w-full rounded-md border border-gray-200 bg-white px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-gray-950 placeholder:text-gray-500 focus-visible:border-primary-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-gray-800 dark:file:text-gray-50 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300">
+              <div className="w-full text-nowrap overflow-x-auto">
+                {level.name}
               </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => handleEdit(index)}
-                type="button"
-              >
-                <CareIcon icon="l-trash" className="h-4 w-4" />
-              </Button>
             </div>
-          </InputWithError>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => handleEdit(index)}
+              type="button"
+            >
+              <CareIcon icon="l-trash" className="h-4 w-4" />
+            </Button>
+          </div>
         </div>
       ))}
 
@@ -139,26 +137,25 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
       {(!selectedLevels.length ||
         selectedLevels[selectedLevels.length - 1]?.has_children) && (
         <div>
-          <InputWithError
-            label={t(
+          <Label className="mb-2">
+            {t(
               lastLevel
                 ? `SYSTEM__govt_org_type__${lastLevel.metadata?.govt_org_children_type || "default"}`
                 : "SYSTEM__govt_org_type__default",
             )}
-          >
-            <Autocomplete
-              value=""
-              options={getOrganizationOptions(
-                selectedLevels.length === 0
-                  ? getAllOrganizations?.results
-                  : currentLevelOrganizations?.results,
-              )}
-              onChange={(value: string) =>
-                handleLevelChange(value, selectedLevels.length)
-              }
-              onSearch={setSearchQuery}
-            />
-          </InputWithError>
+          </Label>
+          <Autocomplete
+            value=""
+            options={getOrganizationOptions(
+              selectedLevels.length === 0
+                ? getAllOrganizations?.results
+                : currentLevelOrganizations?.results,
+            )}
+            onChange={(value: string) =>
+              handleLevelChange(value, selectedLevels.length)
+            }
+            onSearch={setSearchQuery}
+          />
         </div>
       )}
     </>

From fc303d0acf20a22789d8a8b7843868b87cca5261 Mon Sep 17 00:00:00 2001
From: arhamathar <arhamathar789@gmail.com>
Date: Wed, 8 Jan 2025 20:46:17 +0530
Subject: [PATCH 16/16] move diet preference values to constants as snake case

---
 src/common/constants.tsx                         | 16 ++++++++++++++++
 .../QuestionTypes/EncounterQuestion.tsx          | 15 +++++++--------
 src/types/emr/encounter.ts                       |  6 +++---
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/common/constants.tsx b/src/common/constants.tsx
index 64af8d373ac..2083be70f40 100644
--- a/src/common/constants.tsx
+++ b/src/common/constants.tsx
@@ -1757,3 +1757,19 @@ export const HEADER_CONTENT_TYPES = {
 } as const;
 
 export const ADMIN_USER_TYPES = ["DistrictAdmin", "StateAdmin"] as const;
+
+/**
+ * @deprecated use `LocalStorageKeys.patientTokenKey` instead
+ */
+export const CarePatientTokenKey = LocalStorageKeys.patientTokenKey;
+
+export const DIET_PREFERENCE_OPTIONS = [
+  { label: "Vegetarian", value: "vegetarian" },
+  { label: "Dairy Free", value: "diary_free" },
+  { label: "Nut Free", value: "nut_free" },
+  { label: "Gluten Free", value: "gluten_free" },
+  { label: "Vegan", value: "vegan" },
+  { label: "Halal", value: "halal" },
+  { label: "Kosher", value: "kosher" },
+  { label: "None", value: "none" },
+] as const;
diff --git a/src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx b/src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx
index 82341545d43..583ed9f3786 100644
--- a/src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx
@@ -11,6 +11,8 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 
+import { DIET_PREFERENCE_OPTIONS } from "@/common/constants";
+
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import {
@@ -391,14 +393,11 @@ export function EncounterQuestion({
                   <SelectValue placeholder="Select diet preference" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="vegetarian">Vegetarian</SelectItem>
-                  <SelectItem value="diary-free">Dairy Free</SelectItem>
-                  <SelectItem value="nut-free">Nut Free</SelectItem>
-                  <SelectItem value="gluten-free">Gluten Free</SelectItem>
-                  <SelectItem value="vegan">Vegan</SelectItem>
-                  <SelectItem value="halal">Halal</SelectItem>
-                  <SelectItem value="kosher">Kosher</SelectItem>
-                  <SelectItem value="none">None</SelectItem>
+                  {DIET_PREFERENCE_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
diff --git a/src/types/emr/encounter.ts b/src/types/emr/encounter.ts
index afb13b6ffcc..7b6fdb5bed6 100644
--- a/src/types/emr/encounter.ts
+++ b/src/types/emr/encounter.ts
@@ -43,9 +43,9 @@ export type EncounterDischargeDisposition =
 
 export type EncounterDietPreference =
   | "vegetarian"
-  | "diary-free"
-  | "nut-free"
-  | "gluten-free"
+  | "diary_free"
+  | "nut_free"
+  | "gluten_free"
   | "vegan"
   | "halal"
   | "kosher"