From 7a144e288e64d719757009bc02f0cdf746803cf8 Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Wed, 12 Feb 2025 21:23:10 +0530
Subject: [PATCH 01/12] Valuesets WIP

---
 eslint.config.mjs                             |   4 +-
 public/locale/en.json                         |   4 +
 src/Routers/AppRouter.tsx                     |  21 +-
 src/Routers/routes/adminRoutes.tsx            |  19 +
 src/Routers/routes/questionnaireRoutes.tsx    |  14 -
 src/components/Common/DebugPreview.tsx        |  28 +
 .../Questionnaire/CloneQuestionnaireSheet.tsx |   2 +-
 src/components/Questionnaire/CodingEditor.tsx | 157 +++++
 .../Questionnaire/QuestionnaireEditor.tsx     | 650 +++++++-----------
 .../Questionnaire/QuestionnaireForm.tsx       |  15 +-
 .../{index.tsx => QuestionnaireList.tsx}      |  17 +-
 src/components/Questionnaire/show.tsx         |   9 +-
 src/components/ValueSet/ValueSetEditor.tsx    | 112 +++
 src/components/ValueSet/ValueSetForm.tsx      | 497 +++++++++++++
 src/components/ValueSet/ValueSetList.tsx      | 118 ++++
 src/components/ui/sidebar/admin-nav.tsx       |  33 +
 src/components/ui/sidebar/app-sidebar.tsx     |   4 +
 src/pages/UserDashboard.tsx                   |   8 +-
 src/types/questionnaire/question.ts           |   7 +
 src/types/valueset/valueset.ts                |  70 ++
 src/types/valueset/valuesetApi.ts             |  49 ++
 21 files changed, 1395 insertions(+), 443 deletions(-)
 create mode 100644 src/Routers/routes/adminRoutes.tsx
 delete mode 100644 src/Routers/routes/questionnaireRoutes.tsx
 create mode 100644 src/components/Common/DebugPreview.tsx
 create mode 100644 src/components/Questionnaire/CodingEditor.tsx
 rename src/components/Questionnaire/{index.tsx => QuestionnaireList.tsx} (89%)
 create mode 100644 src/components/ValueSet/ValueSetEditor.tsx
 create mode 100644 src/components/ValueSet/ValueSetForm.tsx
 create mode 100644 src/components/ValueSet/ValueSetList.tsx
 create mode 100644 src/components/ui/sidebar/admin-nav.tsx
 create mode 100644 src/types/valueset/valueset.ts
 create mode 100644 src/types/valueset/valuesetApi.ts

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 35fd03f40b7..a44c623b55d 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -66,7 +66,7 @@ export default [
     rules: {
       ...tseslint.configs.recommended.rules,
       "@typescript-eslint/no-unused-vars": [
-        "error",
+        "warn",
         {
           argsIgnorePattern: "^_",
           varsIgnorePattern: "^_",
@@ -74,7 +74,7 @@ export default [
         },
       ],
       "@typescript-eslint/no-unused-expressions": [
-        "error",
+        "warn",
         { allowShortCircuit: true, allowTernary: true },
       ],
       "@typescript-eslint/no-explicit-any": "warn",
diff --git a/public/locale/en.json b/public/locale/en.json
index 7a455f5a214..a47296d3bb1 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -633,6 +633,7 @@
   "create_consultation": "Create Consultation",
   "create_encounter": "Create Encounter",
   "create_facility": "Create Facility",
+  "create_new": "Create New",
   "create_new_asset": "Create New Asset",
   "create_new_encounter": "Create a new encounter to get started",
   "create_new_facility": "Create a new facility and add it to the organization.",
@@ -2003,6 +2004,7 @@
   "skills": "Skills",
   "slot_configuration": "Slot Configuration",
   "slots_left": "slots left",
+  "slug": "Slug",
   "social_profile": "Social Profile",
   "social_profile_detail": "Include occupation, ration card category, socioeconomic status, and domestic healthcare support for a complete profile.",
   "socioeconomic_status": "Socioeconomic status",
@@ -2059,6 +2061,7 @@
   "symptom": "Symptom",
   "symptoms": "Symptoms",
   "symptoms_empty_message": "No symptoms recorded",
+  "system": "System",
   "systolic": "Systolic",
   "tachycardia": "Tachycardia",
   "tag_name": "Tag Name",
@@ -2247,6 +2250,7 @@
   "valid_otp_found": "Valid OTP found, Navigating to Appointments",
   "valid_to": "Valid Till",
   "valid_year_of_birth": "Please enter a valid year of birth (YYYY)",
+  "valuesets": "Valuesets",
   "vehicle_preference": "Vehicle preference",
   "vendor_name": "Vendor Name",
   "ventilator_interface": "Respiratory Support Type",
diff --git a/src/Routers/AppRouter.tsx b/src/Routers/AppRouter.tsx
index 179cded03e1..5461309083a 100644
--- a/src/Routers/AppRouter.tsx
+++ b/src/Routers/AppRouter.tsx
@@ -4,7 +4,7 @@ import { Redirect, useRedirect, useRoutes } from "raviger";
 import IconIndex from "@/CAREUI/icons/Index";
 
 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";
@@ -25,7 +25,7 @@ import { PlugConfigList } from "@/pages/Apps/PlugConfigList";
 import UserDashboard from "@/pages/UserDashboard";
 
 import OrganizationRoutes from "./routes/OrganizationRoutes";
-import QuestionnaireRoutes from "./routes/questionnaireRoutes";
+import AdminRoutes from "./routes/adminRoutes";
 
 // List of paths where the sidebar should be hidden
 const PATHS_WITHOUT_SIDEBAR = ["/", "/session-expired"];
@@ -55,7 +55,6 @@ const Routes: AppRoutes = {
   ...ScheduleRoutes,
   ...UserRoutes,
   ...OrganizationRoutes,
-  ...QuestionnaireRoutes,
 
   "/session-expired": () => <SessionExpired />,
   "/not-found": () => <ErrorPage />,
@@ -69,6 +68,10 @@ const Routes: AppRoutes = {
   "/login": () => <Redirect to="/" />,
 };
 
+const AdminRouter: AppRoutes = {
+  ...AdminRoutes,
+};
+
 export default function AppRouter() {
   const pluginRoutes = usePluginRoutes();
   let routes = Routes;
@@ -81,7 +84,13 @@ export default function AppRouter() {
     ...routes,
   };
 
-  const pages = useRoutes(routes) || <ErrorPage />;
+  const appPages = useRoutes(routes);
+  const adminPages = useRoutes(AdminRouter);
+
+  const sidebarFor = appPages ? SidebarFor.FACILITY : SidebarFor.ADMIN;
+
+  const pages = appPages || adminPages || <ErrorPage />;
+
   const user = useAuthUser();
   const currentPath = window.location.pathname;
   const shouldShowSidebar = !PATHS_WITHOUT_SIDEBAR.includes(currentPath);
@@ -92,7 +101,9 @@ export default function AppRouter() {
         userPermissions={user?.permissions || []}
         isSuperAdmin={user?.is_superuser || false}
       >
-        {shouldShowSidebar && <AppSidebar user={user} />}
+        {shouldShowSidebar && (
+          <AppSidebar user={user} sidebarFor={sidebarFor} />
+        )}
         <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/Routers/routes/adminRoutes.tsx b/src/Routers/routes/adminRoutes.tsx
new file mode 100644
index 00000000000..abbc7bef952
--- /dev/null
+++ b/src/Routers/routes/adminRoutes.tsx
@@ -0,0 +1,19 @@
+import QuestionnaireEditor from "@/components/Questionnaire/QuestionnaireEditor";
+import { QuestionnaireList } from "@/components/Questionnaire/QuestionnaireList";
+import { QuestionnaireShow } from "@/components/Questionnaire/show";
+import { ValueSetEditor } from "@/components/ValueSet/ValueSetEditor";
+import { ValueSetList } from "@/components/ValueSet/ValueSetList";
+
+import { AppRoutes } from "@/Routers/AppRouter";
+
+const AdminRoutes: AppRoutes = {
+  "/admin/questionnaire": () => <QuestionnaireList />,
+  "/admin/questionnaire/create": () => <QuestionnaireEditor />,
+  "/admin/questionnaire/:id": ({ id }) => <QuestionnaireShow id={id} />,
+  "/admin/questionnaire/:id/edit": ({ id }) => <QuestionnaireEditor id={id} />,
+  "/admin/valuesets": () => <ValueSetList />,
+  "/admin/valuesets/create": () => <ValueSetEditor />,
+  "/admin/valuesets/:slug/edit": ({ slug }) => <ValueSetEditor slug={slug} />,
+};
+
+export default AdminRoutes;
diff --git a/src/Routers/routes/questionnaireRoutes.tsx b/src/Routers/routes/questionnaireRoutes.tsx
deleted file mode 100644
index 670861016a7..00000000000
--- a/src/Routers/routes/questionnaireRoutes.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { QuestionnaireList } from "@/components/Questionnaire";
-import QuestionnaireEditor from "@/components/Questionnaire/QuestionnaireEditor";
-import { QuestionnaireShow } from "@/components/Questionnaire/show";
-
-import { AppRoutes } from "@/Routers/AppRouter";
-
-const QuestionnaireRoutes: AppRoutes = {
-  "/questionnaire": () => <QuestionnaireList />,
-  "/questionnaire/create": () => <QuestionnaireEditor />,
-  "/questionnaire/:id": ({ id }) => <QuestionnaireShow id={id} />,
-  "/questionnaire/:id/edit": ({ id }) => <QuestionnaireEditor id={id} />,
-};
-
-export default QuestionnaireRoutes;
diff --git a/src/components/Common/DebugPreview.tsx b/src/components/Common/DebugPreview.tsx
new file mode 100644
index 00000000000..ef0e794ab4d
--- /dev/null
+++ b/src/components/Common/DebugPreview.tsx
@@ -0,0 +1,28 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface DebugPreviewProps {
+  data: unknown;
+  title?: string;
+  className?: string;
+}
+
+export function DebugPreview({ data, title, className }: DebugPreviewProps) {
+  if (!import.meta.env.DEV) {
+    return null;
+  }
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="text-xl font-semibold">
+          {title || "Debug Preview"}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <pre className="text-sm text-muted-foreground whitespace-pre-wrap overflow-auto max-h-[500px]">
+          {JSON.stringify(data, null, 2)}
+        </pre>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/Questionnaire/CloneQuestionnaireSheet.tsx b/src/components/Questionnaire/CloneQuestionnaireSheet.tsx
index 3a61ce1910a..b3de7c4e7fb 100644
--- a/src/components/Questionnaire/CloneQuestionnaireSheet.tsx
+++ b/src/components/Questionnaire/CloneQuestionnaireSheet.tsx
@@ -64,7 +64,7 @@ export default function CloneQuestionnaireSheet({
       silent: true,
     }),
     onSuccess: async (data: QuestionnaireDetail) => {
-      navigate(`/questionnaire/${data.slug}`);
+      navigate(`/admin/questionnaire/${data.slug}`);
       setOpen(false);
     },
     onError: (error: any) => {
diff --git a/src/components/Questionnaire/CodingEditor.tsx b/src/components/Questionnaire/CodingEditor.tsx
new file mode 100644
index 00000000000..b74ac6ebb61
--- /dev/null
+++ b/src/components/Questionnaire/CodingEditor.tsx
@@ -0,0 +1,157 @@
+import { UpdateIcon } from "@radix-ui/react-icons";
+import { toast } from "sonner";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import mutate from "@/Utils/request/mutate";
+import { Code } from "@/types/questionnaire/code";
+import { TERMINOLOGY_SYSTEMS } from "@/types/valueset/valueset";
+import valuesetApi from "@/types/valueset/valuesetApi";
+
+interface CodingEditorProps {
+  code?: Code;
+  onChange: (code: Code | undefined) => void;
+}
+
+export function CodingEditor({ code, onChange }: CodingEditorProps) {
+  if (!code) {
+    return (
+      <div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            onChange({
+              system: Object.values(TERMINOLOGY_SYSTEMS)[0],
+              code: "",
+              display: "",
+            });
+          }}
+        >
+          <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
+          Add Coding
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <div className="flex items-center w-full justify-between">
+          <Label className="text-base font-medium">Coding Details</Label>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              onChange(undefined);
+            }}
+          >
+            <CareIcon icon="l-trash-alt" className="mr-2 h-4 w-4" />
+            Remove Coding
+          </Button>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <div>
+          <Label>System</Label>
+          <Select
+            value={code.system}
+            onValueChange={(value) => {
+              onChange({
+                ...code,
+                system: value,
+                code: "",
+                display: "",
+              });
+            }}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Select system" />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.entries(TERMINOLOGY_SYSTEMS).map(([key, value]) => (
+                <SelectItem key={key} value={value}>
+                  {key}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="grid grid-cols-[1fr,1fr,auto] gap-4 items-start">
+          <div>
+            <Label>Code</Label>
+            <Input
+              value={code.code}
+              onChange={(e) => {
+                onChange({
+                  ...code,
+                  code: e.target.value,
+                  display: "",
+                });
+              }}
+              placeholder="Enter code"
+            />
+          </div>
+          <div>
+            <Label>Display</Label>
+            <Input
+              value={code.display}
+              placeholder="Unverified"
+              className={!code.display ? "text-muted-foreground" : undefined}
+              readOnly
+            />
+          </div>
+          <div className="pt-6">
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              onClick={async () => {
+                if (!code.system || !code.code) {
+                  toast.error("Please select a system and enter a code first");
+                  return;
+                }
+
+                try {
+                  const response = await mutate<typeof valuesetApi.lookup>(
+                    valuesetApi.lookup,
+                  )({
+                    system: code.system,
+                    code: code.code,
+                  });
+
+                  if (response.metadata) {
+                    onChange({
+                      ...code,
+                      display: response.metadata.display,
+                    });
+                    toast.success("Code verified successfully");
+                  }
+                } catch (error) {
+                  toast.error("Failed to verify code");
+                }
+              }}
+            >
+              <UpdateIcon className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx
index 2637d5c9880..387351be463 100644
--- a/src/components/Questionnaire/QuestionnaireEditor.tsx
+++ b/src/components/Questionnaire/QuestionnaireEditor.tsx
@@ -1,9 +1,13 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { UpdateIcon } from "@radix-ui/react-icons";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { Building, Check, Loader2, X } from "lucide-react";
 import { useNavigate } from "raviger";
 import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import * as z from "zod";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -44,6 +48,7 @@ import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 
+import { DebugPreview } from "@/components/Common/DebugPreview";
 import Loading from "@/components/Common/Loading";
 
 import mutate from "@/Utils/request/mutate";
@@ -52,6 +57,7 @@ import organizationApi from "@/types/organization/organizationApi";
 import {
   AnswerOption,
   EnableWhen,
+  ObservationType,
   Question,
   QuestionType,
   StructuredQuestionType,
@@ -62,7 +68,10 @@ import {
   SubjectType,
 } from "@/types/questionnaire/questionnaire";
 import questionnaireApi from "@/types/questionnaire/questionnaireApi";
+import { TERMINOLOGY_SYSTEMS } from "@/types/valueset/valueset";
+import valuesetApi from "@/types/valueset/valuesetApi";
 
+import { CodingEditor } from "./CodingEditor";
 import ManageQuestionnaireOrganizationsSheet from "./ManageQuestionnaireOrganizationsSheet";
 import { QuestionnaireForm } from "./QuestionnaireForm";
 
@@ -89,6 +98,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
   );
   const [selectedOrgIds, setSelectedOrgIds] = useState<string[]>([]);
   const [orgSearchQuery, setOrgSearchQuery] = useState("");
+  const [observation, setObservation] = useState<ObservationType | undefined>();
 
   const {
     data: initialQuestionnaire,
@@ -117,7 +127,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
     mutationFn: mutate(questionnaireApi.create),
     onSuccess: (data: QuestionnaireDetail) => {
       toast.success("Questionnaire created successfully");
-      navigate(`/questionnaire/${data.slug}`);
+      navigate(`/admin/questionnaire/${data.slug}`);
     },
     onError: (_error) => {
       toast.error("Failed to create questionnaire");
@@ -193,6 +203,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
 
   const handleSave = () => {
     if (id) {
+      console.log("Update Questionnaire", questionnaire);
       updateQuestionnaire(questionnaire);
     } else {
       createQuestionnaire({
@@ -203,7 +214,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
   };
 
   const handleCancel = () => {
-    navigate(id ? `/questionnaire/${id}` : "/questionnaire");
+    navigate(id ? `/admin/questionnaire/${id}` : "/admin/questionnaire");
   };
 
   const toggleQuestionExpanded = (questionId: string) => {
@@ -632,6 +643,11 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
               </Card>
             </div>
           </div>
+          <DebugPreview
+            data={questionnaire}
+            title="Questionnaire"
+            className="mt-4"
+          />
         </TabsContent>
 
         <TabsContent value="preview">
@@ -690,6 +706,7 @@ function QuestionEditor({
     repeats,
     answer_option,
     questions,
+    code,
   } = question;
 
   const [expandedSubQuestions, setExpandedSubQuestions] = useState<Set<string>>(
@@ -824,136 +841,181 @@ function QuestionEditor({
             />
           </div>
 
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <Label>Type</Label>
-              <Select
-                value={type}
-                onValueChange={(val: QuestionType) => {
-                  if (val !== "group") {
-                    updateField("type", val, { questions: [] });
-                  } else {
-                    updateField("type", val);
-                  }
-                }}
-              >
-                <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 className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
               <div>
-                <Label>Structured Type</Label>
+                <Label>Type</Label>
                 <Select
-                  value={structured_type ?? "allergy_intolerance"}
-                  onValueChange={(val: StructuredQuestionType) =>
-                    updateField("structured_type", val)
-                  }
+                  value={type}
+                  onValueChange={(val: QuestionType) => {
+                    if (val !== "group") {
+                      updateField("type", val, { questions: [] });
+                    } else {
+                      updateField("type", val);
+                    }
+                  }}
                 >
                   <SelectTrigger>
-                    <SelectValue placeholder="Select structured type" />
+                    <SelectValue placeholder="Select question type" />
                   </SelectTrigger>
                   <SelectContent>
-                    {STRUCTURED_QUESTION_TYPES.map((type) => (
-                      <SelectItem key={type.value} value={type.value}>
-                        {type.label}
-                      </SelectItem>
-                    ))}
+                    <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>
-            )}
-          </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>
+              {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>
+                      {STRUCTURED_QUESTION_TYPES.map((type) => (
+                        <SelectItem key={type.value} value={type.value}>
+                          {type.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
             </div>
 
-            <div className="flex items-center gap-2">
-              <Switch
-                checked={repeats ?? false}
-                onCheckedChange={(val) => updateField("repeats", val)}
-                id={`repeats-${getQuestionPath()}`}
+            {type !== "structured" && type !== "group" && (
+              <CodingEditor
+                code={code}
+                onChange={(newCode) => updateField("code", newCode)}
               />
-              <Label htmlFor={`repeats-${getQuestionPath()}`}>Repeatable</Label>
-            </div>
+            )}
+          </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="space-y-6">
+            <div className="border rounded-lg bg-gray-100 p-4">
+              <h3 className="text-sm font-medium mb-2">Question Settings</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Configure the basic behavior: mark as required, allow multiple
+                entries, or set as read only.
+              </p>
+              <div className="">
+                <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={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={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_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 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>
             </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="border rounded-lg bg-gray-100 p-4">
+              <h3 className="text-sm font-medium mb-2">
+                Data Collection Details
+              </h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Specify key collection info: time, performer, body site, and
+                method.
+              </p>
+              <div className="">
+                <div className="flex flex-wrap gap-4">
+                  <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.read_only ?? false}
-                onCheckedChange={(val) => updateField("read_only", val)}
-                id={`read_only-${getQuestionPath()}`}
-              />
-              <Label htmlFor={`read_only-${getQuestionPath()}`}>
-                Read Only
-              </Label>
+                  <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>
+              </div>
             </div>
           </div>
 
@@ -988,9 +1050,16 @@ function QuestionEditor({
 
           {type === "choice" && (
             <div className="space-y-4">
-              <div>
-                <Label>Answer Options</Label>
-                <div className="flex items-center gap-2 mb-2">
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <div>
+                    <CardTitle className="text-base font-medium">
+                      Answer Options
+                    </CardTitle>
+                    <p className="text-sm text-muted-foreground">
+                      Define possible answers for this question
+                    </p>
+                  </div>
                   <Select
                     value={question.answer_value_set ?? "custom"}
                     onValueChange={(val: string) =>
@@ -1000,8 +1069,8 @@ function QuestionEditor({
                       )
                     }
                   >
-                    <SelectTrigger className="flex-1">
-                      <SelectValue placeholder="Select a value set (optional)" />
+                    <SelectTrigger className="w-[200px]">
+                      <SelectValue placeholder="Select a value set" />
                     </SelectTrigger>
                     <SelectContent>
                       <SelectItem value="custom">Custom Options</SelectItem>
@@ -1015,302 +1084,87 @@ function QuestionEditor({
                       <SelectItem value="system-duration">Duration</SelectItem>
                     </SelectContent>
                   </Select>
-                </div>
+                </CardHeader>
+
                 {(!question.answer_value_set ||
                   question.answer_value_set === "custom") && (
-                  <div className="space-y-2">
+                  <CardContent className="space-y-4">
                     {(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
+                        key={idx}
+                        className="space-y-4 pb-4 border-b last:border-0 last:pb-0"
+                      >
+                        <div className="grid grid-cols-2 gap-4">
+                          <div>
+                            <Label>Value</Label>
+                            <Input
+                              value={opt.value}
+                              onChange={(e) => {
+                                const newOptions = answer_option
+                                  ? [...answer_option]
+                                  : [];
+                                newOptions[idx] = {
+                                  ...opt,
+                                  value: e.target.value,
+                                };
+                                updateField("answer_option", newOptions);
+                              }}
+                              placeholder="Option value"
+                            />
+                          </div>
+                          <div className="flex gap-2">
+                            <div className="flex-1">
+                              <Label>Display Text</Label>
+                              <Input
+                                value={opt.display || ""}
+                                onChange={(e) => {
+                                  const newOptions = answer_option
+                                    ? [...answer_option]
+                                    : [];
+                                  newOptions[idx] = {
+                                    ...opt,
+                                    display: e.target.value,
+                                  };
+                                  updateField("answer_option", newOptions);
+                                }}
+                                placeholder="Display text (optional)"
+                              />
+                            </div>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="mt-8"
+                              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>
                       </div>
                     ))}
+
                     <Button
                       variant="outline"
                       size="sm"
                       onClick={() => {
-                        const newOption: AnswerOption = { value: "" };
-                        updateField("answer_option", [
-                          ...(answer_option || []),
-                          newOption,
-                        ]);
+                        const newOption = { value: "" };
+                        const newOptions = answer_option
+                          ? [...answer_option, newOption]
+                          : [newOption];
+                        updateField("answer_option", newOptions);
                       }}
                     >
                       <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
                       Add Option
                     </Button>
-                  </div>
+                  </CardContent>
                 )}
-              </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>
+              </Card>
             </div>
           )}
 
diff --git a/src/components/Questionnaire/QuestionnaireForm.tsx b/src/components/Questionnaire/QuestionnaireForm.tsx
index 6c8716058de..a02062c2325 100644
--- a/src/components/Questionnaire/QuestionnaireForm.tsx
+++ b/src/components/Questionnaire/QuestionnaireForm.tsx
@@ -11,6 +11,7 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 
+import { DebugPreview } from "@/components/Common/DebugPreview";
 import Loading from "@/components/Common/Loading";
 
 import { PLUGIN_Component } from "@/PluginEngine";
@@ -527,15 +528,11 @@ export function QuestionnaireForm({
           setFormState={setQuestionnaireForms}
         />
 
-        {/* Add a Preview of the QuestionnaireForm */}
-        {import.meta.env.DEV && (
-          <div className="p-4 space-y-6 max-w-4xl">
-            <h2 className="text-xl font-semibold">QuestionnaireForm</h2>
-            <pre className="text-sm text-gray-500">
-              {JSON.stringify(questionnaireForms, null, 2)}
-            </pre>
-          </div>
-        )}
+        <DebugPreview
+          data={questionnaireForms}
+          title="QuestionnaireForm"
+          className="p-4 space-y-6 max-w-4xl"
+        />
       </div>
     </div>
   );
diff --git a/src/components/Questionnaire/index.tsx b/src/components/Questionnaire/QuestionnaireList.tsx
similarity index 89%
rename from src/components/Questionnaire/index.tsx
rename to src/components/Questionnaire/QuestionnaireList.tsx
index 54353743df9..54d511a1b05 100644
--- a/src/components/Questionnaire/index.tsx
+++ b/src/components/Questionnaire/QuestionnaireList.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { t } from "i18next";
 import { useNavigate } from "raviger";
 
 import { Badge } from "@/components/ui/badge";
@@ -30,8 +31,8 @@ export function QuestionnaireList() {
           <h1 className="text-2xl font-bold">Questionnaires</h1>
           <p className="text-gray-600">Manage and view questionnaires</p>
         </div>
-        <Button onClick={() => navigate("/questionnaire/create")}>
-          Create New
+        <Button onClick={() => navigate("/admin/questionnaire/create")}>
+          {t("create_new")}
         </Button>
       </div>
 
@@ -40,16 +41,16 @@ export function QuestionnaireList() {
           <thead className="bg-gray-50">
             <tr>
               <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                Title
+                {t("title")}
               </th>
               <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                Description
+                {t("description")}
               </th>
               <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                Status
+                {t("status")}
               </th>
               <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                Slug
+                {t("slug")}
               </th>
             </tr>
           </thead>
@@ -57,7 +58,9 @@ export function QuestionnaireList() {
             {questionnaireList.map((questionnaire: QuestionnaireDetail) => (
               <tr
                 key={questionnaire.id}
-                onClick={() => navigate(`/questionnaire/${questionnaire.slug}`)}
+                onClick={() =>
+                  navigate(`/admin/questionnaire/${questionnaire.slug}`)
+                }
                 className="cursor-pointer hover:bg-gray-50"
               >
                 <td className="whitespace-nowrap px-6 py-4">
diff --git a/src/components/Questionnaire/show.tsx b/src/components/Questionnaire/show.tsx
index 4534ce5734b..c655aa6bc94 100644
--- a/src/components/Questionnaire/show.tsx
+++ b/src/components/Questionnaire/show.tsx
@@ -103,7 +103,7 @@ export function QuestionnaireShow({ id }: QuestionnaireShowProps) {
       pathParams: { id },
     }),
     onSuccess: () => {
-      navigate("/questionnaire");
+      navigate("/admin/questionnaire");
     },
   });
 
@@ -147,11 +147,14 @@ export function QuestionnaireShow({ id }: QuestionnaireShowProps) {
           <p className="text-gray-600">{questionnaire.description}</p>
         </div>
         <div className="flex gap-2">
-          <Button variant="outline" onClick={() => navigate("/questionnaire")}>
+          <Button
+            variant="outline"
+            onClick={() => navigate("/admin/questionnaire")}
+          >
             <CareIcon icon="l-arrow-left" className="mr-2 h-4 w-4" />
             Back to List
           </Button>
-          <Button onClick={() => navigate(`/questionnaire/${id}/edit`)}>
+          <Button onClick={() => navigate(`/admin/questionnaire/${id}/edit`)}>
             <CareIcon icon="l-edit" className="mr-2 h-4 w-4" />
             Edit
           </Button>
diff --git a/src/components/ValueSet/ValueSetEditor.tsx b/src/components/ValueSet/ValueSetEditor.tsx
new file mode 100644
index 00000000000..9fbc8ed5f5e
--- /dev/null
+++ b/src/components/ValueSet/ValueSetEditor.tsx
@@ -0,0 +1,112 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useNavigate } from "raviger";
+import { toast } from "sonner";
+
+import { Skeleton } from "@/components/ui/skeleton";
+
+import mutate from "@/Utils/request/mutate";
+import query from "@/Utils/request/query";
+import {
+  CreateValuesetModel,
+  UpdateValuesetModel,
+  ValuesetBase,
+  ValuesetFormType,
+} from "@/types/valueset/valueset";
+import valuesetApi from "@/types/valueset/valuesetApi";
+
+import { ValueSetForm } from "./ValueSetForm";
+
+interface ValueSetEditorProps {
+  slug?: string; // If provided, we're editing an existing valueset
+}
+
+function FormSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-24 w-full" />
+      </div>
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+      <div className="space-y-4">
+        <Skeleton className="h-[200px] w-full" />
+        <Skeleton className="h-[200px] w-full" />
+      </div>
+    </div>
+  );
+}
+
+export function ValueSetEditor({ slug }: ValueSetEditorProps) {
+  const navigate = useNavigate();
+
+  // Fetch existing valueset if we're editing
+  const { data: existingValueset, isLoading } = useQuery({
+    queryKey: ["valueset", slug],
+    queryFn: query(valuesetApi.get, {
+      pathParams: { slug: slug! },
+    }),
+    enabled: !!slug,
+  }) as { data: ValuesetBase | undefined; isLoading: boolean };
+
+  // Create mutation
+  const createMutation = useMutation({
+    mutationFn: mutate<typeof valuesetApi.create>(valuesetApi.create),
+    onSuccess: (data: ValuesetBase) => {
+      toast.success("ValueSet created successfully");
+      navigate(`/valuesets/${data.slug}`);
+    },
+  });
+
+  // Update mutation
+  const updateMutation = useMutation({
+    mutationFn: mutate(valuesetApi.update, {
+      pathParams: { slug: slug! },
+    }),
+    onSuccess: (data: ValuesetBase) => {
+      toast.success("ValueSet updated successfully");
+      navigate(`/admin/valuesets`);
+    },
+  });
+
+  const handleSubmit = (data: ValuesetFormType) => {
+    if (slug && existingValueset) {
+      const updateData: UpdateValuesetModel = {
+        ...data,
+        id: existingValueset.id,
+      };
+      updateMutation.mutate(updateData);
+    } else {
+      const createData: CreateValuesetModel = data;
+      createMutation.mutate(createData);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <h1 className="text-2xl font-bold mb-6">
+        {slug ? "Edit ValueSet" : "Create New ValueSet"}
+      </h1>
+
+      {slug && isLoading ? (
+        <FormSkeleton />
+      ) : (
+        <ValueSetForm
+          initialData={existingValueset}
+          onSubmit={handleSubmit}
+          isSubmitting={createMutation.isPending || updateMutation.isPending}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ValueSet/ValueSetForm.tsx b/src/components/ValueSet/ValueSetForm.tsx
new file mode 100644
index 00000000000..a177c4b9fb1
--- /dev/null
+++ b/src/components/ValueSet/ValueSetForm.tsx
@@ -0,0 +1,497 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon, TrashIcon, UpdateIcon } from "@radix-ui/react-icons";
+import { useMutation } from "@tanstack/react-query";
+import { useFieldArray, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import * as z from "zod";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+import mutate from "@/Utils/request/mutate";
+import {
+  TERMINOLOGY_SYSTEMS,
+  ValuesetFormType,
+} from "@/types/valueset/valueset";
+import valuesetApi from "@/types/valueset/valuesetApi";
+
+// Create a schema for form validation
+const valuesetFormSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  slug: z.string().min(1, "Slug is required"),
+  description: z.string(),
+  status: z.enum(["active", "inactive"]),
+  is_system_defined: z.boolean(),
+  compose: z.object({
+    include: z.array(
+      z.object({
+        system: z.string(),
+        concept: z
+          .array(
+            z.object({
+              code: z.string(),
+              display: z.string(),
+            }),
+          )
+          .optional(),
+        filter: z
+          .array(
+            z.object({
+              property: z.string(),
+              op: z.string(),
+              value: z.string(),
+            }),
+          )
+          .optional(),
+      }),
+    ),
+    exclude: z.array(
+      z.object({
+        system: z.string(),
+        concept: z
+          .array(
+            z.object({
+              code: z.string(),
+              display: z.string(),
+            }),
+          )
+          .optional(),
+        filter: z
+          .array(
+            z.object({
+              property: z.string(),
+              op: z.string(),
+              value: z.string(),
+            }),
+          )
+          .optional(),
+      }),
+    ),
+  }),
+});
+
+interface ValueSetFormProps {
+  initialData?: ValuesetFormType;
+  onSubmit: (data: ValuesetFormType) => void;
+  isSubmitting?: boolean;
+}
+
+interface LookupVariables {
+  system: string;
+  code: string;
+  index: number;
+}
+
+function ConceptFields({
+  nestIndex,
+  type,
+  parentForm,
+}: {
+  nestIndex: number;
+  type: "include" | "exclude";
+  parentForm: ReturnType<typeof useForm<ValuesetFormType>>;
+}) {
+  const { fields, append, remove } = useFieldArray({
+    control: parentForm.control,
+    name: `compose.${type}.${nestIndex}.concept`,
+  });
+
+  const lookupMutation = useMutation({
+    mutationFn: async ({ system, code, index }: LookupVariables) => {
+      const response = await mutate<typeof valuesetApi.lookup>(
+        valuesetApi.lookup,
+      )({
+        system,
+        code,
+      });
+      return { response, index };
+    },
+    onSuccess: ({ response, index }) => {
+      if (response.metadata) {
+        parentForm.setValue(
+          `compose.${type}.${nestIndex}.concept.${index}.display`,
+          response.metadata.display,
+          { shouldValidate: true },
+        );
+        toast.success("Code verified successfully");
+      }
+    },
+    onError: (error, { index }) => {
+      toast.error("Failed to verify code");
+    },
+  });
+
+  const handleVerify = async (index: number) => {
+    const system = parentForm.getValues(`compose.${type}.${nestIndex}.system`);
+    const code = parentForm.getValues(
+      `compose.${type}.${nestIndex}.concept.${index}.code`,
+    );
+
+    if (!system || !code) {
+      toast.error("Please select a system and enter a code first");
+      return;
+    }
+
+    lookupMutation.mutate({
+      system,
+      code,
+      index,
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-medium">Concepts</h4>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => append({ code: "", display: "" })}
+        >
+          <PlusIcon className="h-4 w-4 mr-2" />
+          Add Concept
+        </Button>
+      </div>
+      {fields.map((field, index) => (
+        <div key={field.id} className="flex gap-4 items-start">
+          <FormField
+            control={parentForm.control}
+            name={`compose.${type}.${nestIndex}.concept.${index}.code`}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormControl>
+                  <Input
+                    {...field}
+                    placeholder="Code"
+                    onChange={(e) => {
+                      field.onChange(e);
+                      // Clear display and set isVerified to false when code changes
+                      parentForm.setValue(
+                        `compose.${type}.${nestIndex}.concept.${index}.display`,
+                        "",
+                        { shouldValidate: true },
+                      );
+                    }}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={parentForm.control}
+            name={`compose.${type}.${nestIndex}.concept.${index}.display`}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormControl>
+                  <Input
+                    {...field}
+                    placeholder="Unverified"
+                    className={
+                      !field.value ? "text-muted-foreground" : undefined
+                    }
+                    readOnly
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            onClick={() => handleVerify(index)}
+            disabled={lookupMutation.isPending}
+          >
+            <UpdateIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => remove(index)}
+          >
+            <TrashIcon className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function FilterFields({
+  nestIndex,
+  type,
+}: {
+  nestIndex: number;
+  type: "include" | "exclude";
+}) {
+  const form = useForm();
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: `compose.${type}.${nestIndex}.filter`,
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-medium">Filters</h4>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => append({ property: "", op: "", value: "" })}
+        >
+          <PlusIcon className="h-4 w-4 mr-2" />
+          Add Filter
+        </Button>
+      </div>
+      {fields.map((field, index) => (
+        <div key={field.id} className="flex gap-4 items-start">
+          <FormField
+            control={form.control}
+            name={`compose.${type}.${nestIndex}.filter.${index}.property`}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormControl>
+                  <Input {...field} placeholder="Property" />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name={`compose.${type}.${nestIndex}.filter.${index}.op`}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormControl>
+                  <Input {...field} placeholder="Operator" />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name={`compose.${type}.${nestIndex}.filter.${index}.value`}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormControl>
+                  <Input {...field} placeholder="Value" />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => remove(index)}
+          >
+            <TrashIcon className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function RuleFields({
+  type,
+  form,
+}: {
+  type: "include" | "exclude";
+  form: ReturnType<typeof useForm<ValuesetFormType>>;
+}) {
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: `compose.${type}`,
+  });
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-lg font-medium">
+          {type === "include" ? "Include Rules" : "Exclude Rules"}
+        </CardTitle>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            append({
+              system: Object.values(TERMINOLOGY_SYSTEMS)[0],
+              concept: [],
+              filter: [],
+            })
+          }
+        >
+          <PlusIcon className="h-4 w-4 mr-2" />
+          Add Rule
+        </Button>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {fields.map((field, index) => (
+          <div key={field.id} className="space-y-4">
+            <div className="flex items-center justify-between">
+              <FormField
+                control={form.control}
+                name={`compose.${type}.${index}.system`}
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel>System</FormLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select system" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {Object.entries(TERMINOLOGY_SYSTEMS).map(
+                          ([key, value]) => (
+                            <SelectItem key={key} value={value}>
+                              {key}
+                            </SelectItem>
+                          ),
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </FormItem>
+                )}
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => remove(index)}
+              >
+                <TrashIcon className="h-4 w-4" />
+              </Button>
+            </div>
+            <ConceptFields nestIndex={index} type={type} parentForm={form} />
+            <FilterFields nestIndex={index} type={type} />
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ValueSetForm({
+  initialData,
+  onSubmit,
+  isSubmitting,
+}: ValueSetFormProps) {
+  const form = useForm<ValuesetFormType>({
+    resolver: zodResolver(valuesetFormSchema),
+    defaultValues: {
+      name: initialData?.name || "",
+      slug: initialData?.slug || "",
+      description: initialData?.description || "",
+      status: initialData?.status || "active",
+      is_system_defined: initialData?.is_system_defined || false,
+      compose: {
+        include: initialData?.compose?.include || [],
+        exclude: initialData?.compose?.exclude || [],
+      },
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="slug"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Slug</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="description"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Description</FormLabel>
+              <FormControl>
+                <Textarea {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="status"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Status</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select status" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="active">Active</SelectItem>
+                  <SelectItem value="inactive">Inactive</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="space-y-6">
+          <RuleFields type="include" form={form} />
+          <RuleFields type="exclude" form={form} />
+        </div>
+
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save ValueSet"}
+        </Button>
+      </form>
+    </Form>
+  );
+}
diff --git a/src/components/ValueSet/ValueSetList.tsx b/src/components/ValueSet/ValueSetList.tsx
new file mode 100644
index 00000000000..f2168758e5a
--- /dev/null
+++ b/src/components/ValueSet/ValueSetList.tsx
@@ -0,0 +1,118 @@
+import { useQuery } from "@tanstack/react-query";
+import { PlusIcon } from "lucide-react";
+import { Link, useNavigate } from "raviger";
+import { useTranslation } from "react-i18next";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+import Loading from "@/components/Common/Loading";
+
+import query from "@/Utils/request/query";
+import valuesetApi from "@/types/valueset/valuesetApi";
+
+export function ValueSetList() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { data: response, isLoading } = useQuery({
+    queryKey: ["valuesets"],
+    queryFn: query(valuesetApi.list),
+  });
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  const valuesets = response?.results || [];
+
+  return (
+    <div className="container mx-auto px-4 py-6">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">{t("valuesets")}</h1>
+          <p className="text-gray-600">{t("manage_valuesets")}</p>
+        </div>
+        <Button asChild>
+          <Link href="/admin/valuesets/create">
+            <PlusIcon className="mr-2 size-4" />
+            {t("create_new")}
+          </Link>
+        </Button>
+      </div>
+
+      <div className="overflow-hidden rounded-lg bg-white shadow">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                {t("name")}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                {t("slug")}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                {t("status")}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                {t("description")}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                {t("system")}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                {t("actions")}
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 bg-white">
+            {valuesets.map((valueset) => (
+              <tr key={valueset.id} className="hover:bg-gray-50">
+                <td className="whitespace-nowrap px-6 py-4">
+                  <div className="text-sm font-medium text-gray-900">
+                    {valueset.name}
+                  </div>
+                </td>
+                <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+                  {valueset.slug}
+                </td>
+                <td className="whitespace-nowrap px-6 py-4">
+                  <Badge
+                    className={
+                      valueset.status === "active"
+                        ? "bg-green-100 text-green-800 hover:bg-green-200"
+                        : "bg-red-100 text-red-800 hover:bg-red-200"
+                    }
+                  >
+                    {valueset.status}
+                  </Badge>
+                </td>
+                <td className="px-6 py-4">
+                  <div className="max-w-md truncate text-sm text-gray-900">
+                    {valueset.description}
+                  </div>
+                </td>
+                <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+                  {valueset.is_system_defined ? t("yes") : t("no")}
+                </td>
+                <td className="whitespace-nowrap px-6 py-4 text-sm">
+                  {!valueset.is_system_defined && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() =>
+                        navigate(`/admin/valuesets/${valueset.slug}/edit`)
+                      }
+                      className="hover:bg-primary/5"
+                    >
+                      {t("edit")}
+                    </Button>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/sidebar/admin-nav.tsx b/src/components/ui/sidebar/admin-nav.tsx
new file mode 100644
index 00000000000..e0544ad919b
--- /dev/null
+++ b/src/components/ui/sidebar/admin-nav.tsx
@@ -0,0 +1,33 @@
+import { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+
+import { NavMain } from "@/components/ui/sidebar/nav-main";
+
+interface NavigationLink {
+  name: string;
+  url: string;
+  icon?: string;
+}
+
+function generateAdminLinks(t: TFunction) {
+  const baseUrl = "/admin";
+  const links: NavigationLink[] = [
+    {
+      name: t("questionnaire"),
+      url: `${baseUrl}/questionnaire`,
+      icon: "d-book-open",
+    },
+    {
+      name: "Valuesets",
+      url: `${baseUrl}/valuesets`,
+      icon: "l-list-ol-alt",
+    },
+  ];
+
+  return links;
+}
+
+export function AdminNav() {
+  const { t } = useTranslation();
+  return <NavMain links={generateAdminLinks(t)} />;
+}
diff --git a/src/components/ui/sidebar/app-sidebar.tsx b/src/components/ui/sidebar/app-sidebar.tsx
index b22136ff928..1cdbe1915e3 100644
--- a/src/components/ui/sidebar/app-sidebar.tsx
+++ b/src/components/ui/sidebar/app-sidebar.tsx
@@ -12,6 +12,7 @@ import {
   SidebarMenuItem,
   SidebarRail,
 } from "@/components/ui/sidebar";
+import { AdminNav } from "@/components/ui/sidebar/admin-nav";
 import { FacilityNav } from "@/components/ui/sidebar/facility-nav";
 import { FacilitySwitcher } from "@/components/ui/sidebar/facility-switcher";
 import {
@@ -33,6 +34,7 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 export enum SidebarFor {
   FACILITY = "facility",
   PATIENT = "patient",
+  ADMIN = "admin",
 }
 
 export function AppSidebar({
@@ -50,6 +52,7 @@ export function AppSidebar({
 
   const facilitySidebar = sidebarFor === SidebarFor.FACILITY;
   const patientSidebar = sidebarFor === SidebarFor.PATIENT;
+  const adminSidebar = sidebarFor === SidebarFor.ADMIN;
 
   const [selectedFacility, setSelectedFacility] =
     React.useState<UserFacilityModel | null>(null);
@@ -123,6 +126,7 @@ export function AppSidebar({
           <OrgNav organizations={user?.organizations || []} />
         )}
         {patientSidebar && <PatientNav />}
+        {adminSidebar && <AdminNav />}
       </SidebarContent>
 
       <SidebarFooter>
diff --git a/src/pages/UserDashboard.tsx b/src/pages/UserDashboard.tsx
index ab7e8430033..b60b01fae4d 100644
--- a/src/pages/UserDashboard.tsx
+++ b/src/pages/UserDashboard.tsx
@@ -1,4 +1,4 @@
-import { ChevronRight, ClipboardList, LogOut, Settings } from "lucide-react";
+import { ChevronRight, LogOut, Settings, User2Icon } from "lucide-react";
 import { Link } from "raviger";
 
 import { Button } from "@/components/ui/button";
@@ -62,9 +62,9 @@ export default function UserDashboard() {
               className="w-full sm:w-auto"
               asChild
             >
-              <Link href="/questionnaire" className="gap-2 text-inherit">
-                <ClipboardList className="h-4 w-4" />
-                Questionnaires
+              <Link href="/admin/questionnaire" className="gap-2 text-inherit">
+                <User2Icon className="h-4 w-4" />
+                Admin Dashboard
               </Link>
             </Button>
           )}
diff --git a/src/types/questionnaire/question.ts b/src/types/questionnaire/question.ts
index cc16b086bc7..d81af6972f3 100644
--- a/src/types/questionnaire/question.ts
+++ b/src/types/questionnaire/question.ts
@@ -49,6 +49,13 @@ export interface AnswerOption {
   value: string;
   display?: string;
   initialSelected?: boolean;
+  code?: Code;
+}
+
+export interface ObservationType {
+  system: string;
+  code: string;
+  display: string;
 }
 
 export interface Question {
diff --git a/src/types/valueset/valueset.ts b/src/types/valueset/valueset.ts
new file mode 100644
index 00000000000..01ad2e9f8c1
--- /dev/null
+++ b/src/types/valueset/valueset.ts
@@ -0,0 +1,70 @@
+export interface ValuesetFilter {
+  op: string;
+  value: string;
+  property: string;
+}
+
+export interface ValuesetConcept {
+  code: string;
+  display: string;
+}
+
+export interface ValuesetInclude {
+  filter?: ValuesetFilter[];
+  system: string;
+  concept?: ValuesetConcept[];
+}
+
+interface ValuesetCompose {
+  exclude: ValuesetInclude[];
+  include: ValuesetInclude[];
+}
+
+export interface ValuesetBase {
+  id: string;
+  slug: string;
+  name: string;
+  description: string;
+  compose: ValuesetCompose;
+  status: "active" | "inactive";
+  is_system_defined: boolean;
+  created_by: string | null;
+  updated_by: string | null;
+}
+
+export type CreateValuesetModel = Omit<
+  ValuesetBase,
+  "id" | "created_by" | "updated_by"
+>;
+
+export type UpdateValuesetModel = CreateValuesetModel & {
+  id: string;
+};
+
+export type ValuesetFormType = CreateValuesetModel;
+
+export interface ValuesetCodeMetadata {
+  code: string;
+  display: string;
+  name: string;
+  system: string;
+  version: string;
+  inactive: boolean;
+}
+
+export interface ValuesetLookupResponse {
+  metadata: ValuesetCodeMetadata;
+}
+
+export interface ValuesetLookupRequest {
+  system: string;
+  code: string;
+}
+
+export const TERMINOLOGY_SYSTEMS = {
+  LOINC: "http://loinc.org",
+  SNOMED: "http://snomed.info/sct",
+  UCUM: "http://unitsofmeasure.org",
+} as const;
+
+export type TerminologySystem = keyof typeof TERMINOLOGY_SYSTEMS;
diff --git a/src/types/valueset/valuesetApi.ts b/src/types/valueset/valuesetApi.ts
new file mode 100644
index 00000000000..3398cd18432
--- /dev/null
+++ b/src/types/valueset/valuesetApi.ts
@@ -0,0 +1,49 @@
+import { HttpMethod, Type } from "@/Utils/request/api";
+import { PaginatedResponse } from "@/Utils/request/types";
+
+import {
+  CreateValuesetModel,
+  UpdateValuesetModel,
+  ValuesetBase,
+  ValuesetLookupRequest,
+  ValuesetLookupResponse,
+} from "./valueset";
+
+export default {
+  list: {
+    path: "/api/v1/valueset/",
+    method: HttpMethod.GET,
+    TRes: Type<PaginatedResponse<ValuesetBase>>(),
+  },
+  create: {
+    path: "/api/v1/valueset/",
+    method: HttpMethod.POST,
+    TRes: Type<ValuesetBase>(),
+    TBody: Type<CreateValuesetModel>(),
+  },
+  get: {
+    path: "/api/v1/valueset/{slug}/",
+    method: HttpMethod.GET,
+    TRes: Type<ValuesetBase>(),
+  },
+  update: {
+    path: "/api/v1/valueset/{slug}/",
+    method: HttpMethod.PUT,
+    TRes: Type<ValuesetBase>(),
+    TBody: Type<UpdateValuesetModel>(),
+  },
+  lookup: {
+    path: "/api/v1/valueset/lookup_code/",
+    method: HttpMethod.POST,
+    TRes: Type<ValuesetLookupResponse>(),
+    TBody: Type<ValuesetLookupRequest>(),
+  },
+  expand: {
+    path: "/api/v1/valueset/expand/",
+    method: HttpMethod.POST,
+    TRes: Type<ValuesetBase>(),
+    TBody: Type<{
+      search: string;
+    }>(),
+  },
+} as const;

From 579275a210e49682027421b6e86ecdeff7ade4ad Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Thu, 13 Feb 2025 13:33:05 +0530
Subject: [PATCH 02/12] Value Set options in Answer

---
 public/locale/en.json                         |  3 +
 .../Questionnaire/QuestionnaireEditor.tsx     | 59 ++++++++++++-------
 2 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 017737434e9..54576fc3b67 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -668,6 +668,7 @@
   "current_password": "Current Password",
   "current_role": "Current Role",
   "current_status": "Current Status",
+  "custom_options": "Custom Options",
   "customer_support_email": "Customer Support Email",
   "customer_support_name": "Customer Support Name",
   "customer_support_number": "Customer support number",
@@ -1929,6 +1930,7 @@
   "see_attachments": "See Attachments",
   "see_note": "See Note",
   "select": "Select",
+  "select_a_value_set": "Select a Value Set",
   "select_additional_instructions": "Select additional instructions",
   "select_admit_source": "Select Admit Source",
   "select_all": "Select All",
@@ -2290,6 +2292,7 @@
   "valid_otp_found": "Valid OTP found, Navigating to Appointments",
   "valid_to": "Valid Till",
   "valid_year_of_birth": "Please enter a valid year of birth (YYYY)",
+  "value_set": "Value Set",
   "valuesets": "Valuesets",
   "vehicle_preference": "Vehicle preference",
   "vendor_name": "Vendor Name",
diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx
index 387351be463..c5ec4b356f8 100644
--- a/src/components/Questionnaire/QuestionnaireEditor.tsx
+++ b/src/components/Questionnaire/QuestionnaireEditor.tsx
@@ -1,13 +1,10 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { UpdateIcon } from "@radix-ui/react-icons";
 import { useMutation, useQuery } from "@tanstack/react-query";
+import { t } from "i18next";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { Building, Check, Loader2, X } from "lucide-react";
 import { useNavigate } from "raviger";
 import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import * as z from "zod";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -55,8 +52,6 @@ import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import organizationApi from "@/types/organization/organizationApi";
 import {
-  AnswerOption,
-  EnableWhen,
   ObservationType,
   Question,
   QuestionType,
@@ -68,7 +63,6 @@ import {
   SubjectType,
 } from "@/types/questionnaire/questionnaire";
 import questionnaireApi from "@/types/questionnaire/questionnaireApi";
-import { TERMINOLOGY_SYSTEMS } from "@/types/valueset/valueset";
 import valuesetApi from "@/types/valueset/valuesetApi";
 
 import { CodingEditor } from "./CodingEditor";
@@ -713,6 +707,13 @@ function QuestionEditor({
     new Set(),
   );
 
+  const { data: response } = useQuery({
+    queryKey: ["valuesets"],
+    queryFn: query(valuesetApi.list),
+  });
+
+  const valuesets = response?.results || [];
+
   const updateField = <K extends keyof Question>(
     field: K,
     value: Question[K],
@@ -1061,33 +1062,27 @@ function QuestionEditor({
                     </p>
                   </div>
                   <Select
-                    value={question.answer_value_set ?? "custom"}
+                    value={question.answer_value_set ? "valueset" : "custom"}
                     onValueChange={(val: string) =>
                       updateField(
                         "answer_value_set",
-                        val === "custom" ? undefined : val,
+                        val === "custom" ? undefined : "valueset",
                       )
                     }
                   >
                     <SelectTrigger className="w-[200px]">
-                      <SelectValue placeholder="Select a value set" />
+                      <SelectValue placeholder={t("select_a_value_set")} />
                     </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 value="custom">
+                        {t("custom_options")}
                       </SelectItem>
-                      <SelectItem value="system-duration">Duration</SelectItem>
+                      <SelectItem value="valueset">{t("value_set")}</SelectItem>
                     </SelectContent>
                   </Select>
                 </CardHeader>
 
-                {(!question.answer_value_set ||
-                  question.answer_value_set === "custom") && (
+                {!question.answer_value_set ? (
                   <CardContent className="space-y-4">
                     {(answer_option || []).map((opt, idx) => (
                       <div
@@ -1163,6 +1158,30 @@ function QuestionEditor({
                       Add Option
                     </Button>
                   </CardContent>
+                ) : (
+                  <CardContent className="space-y-4">
+                    <Select
+                      value={
+                        question.answer_value_set === "valueset"
+                          ? undefined
+                          : question.answer_value_set
+                      }
+                      onValueChange={(val: string) =>
+                        updateField("answer_value_set", val)
+                      }
+                    >
+                      <SelectTrigger className="w-[200px]">
+                        <SelectValue placeholder={t("select_a_value_set")} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {valuesets.map((valueset) => (
+                          <SelectItem key={valueset.id} value={valueset.slug}>
+                            {valueset.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </CardContent>
                 )}
               </Card>
             </div>

From b1a573584858db4d51ff2a5a4b58146fc00733ec Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Thu, 13 Feb 2025 15:00:42 +0530
Subject: [PATCH 03/12] Move Question Types to types file

---
 .../Questionnaire/QuestionnaireEditor.tsx     | 19 ++++++-------------
 src/types/questionnaire/question.ts           | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx
index c5ec4b356f8..69757e5b726 100644
--- a/src/components/Questionnaire/QuestionnaireEditor.tsx
+++ b/src/components/Questionnaire/QuestionnaireEditor.tsx
@@ -55,6 +55,7 @@ import {
   ObservationType,
   Question,
   QuestionType,
+  SUPPORTED_QUESTION_TYPES,
   StructuredQuestionType,
 } from "@/types/questionnaire/question";
 import {
@@ -860,19 +861,11 @@ function QuestionEditor({
                     <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>
+                    {SUPPORTED_QUESTION_TYPES.map((type) => (
+                      <SelectItem key={type.value} value={type.value}>
+                        {type.name}
+                      </SelectItem>
+                    ))}
                   </SelectContent>
                 </Select>
               </div>
diff --git a/src/types/questionnaire/question.ts b/src/types/questionnaire/question.ts
index d81af6972f3..f0199d63890 100644
--- a/src/types/questionnaire/question.ts
+++ b/src/types/questionnaire/question.ts
@@ -16,6 +16,23 @@ export type QuestionType =
   | "quantity"
   | "structured";
 
+export const SUPPORTED_QUESTION_TYPES = [
+  { name: "Group", value: "group" },
+  { name: "Display", value: "display" },
+  { name: "Boolean", value: "boolean" },
+  { name: "Decimal", value: "decimal" },
+  { name: "Integer", value: "integer" },
+  { name: "Date", value: "date" },
+  { name: "DateTime", value: "dateTime" },
+  { name: "Time", value: "time" },
+  { name: "String", value: "string" },
+  { name: "Text", value: "text" },
+  { name: "URL", value: "url" },
+  { name: "Choice", value: "choice" },
+  { name: "Quantity", value: "quantity" },
+  { name: "Structured", value: "structured" },
+];
+
 export type StructuredQuestionType =
   | "allergy_intolerance"
   | "medication_request"

From 2fcbe0f64ee10440cfb8ae54efc26fccc503d6f2 Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Tue, 18 Feb 2025 10:55:07 +0530
Subject: [PATCH 04/12] Questionnaire Redesign

---
 public/locale/en.json                         |   9 +
 .../Questionnaire/CloneQuestionnaireSheet.tsx |  16 +-
 .../ManageQuestionnaireTagsSheet.tsx          | 244 +++---
 .../Questionnaire/QuestionRenderer.tsx        |   2 +-
 .../QuestionTypes/AllergyQuestion.tsx         |   1 +
 .../QuestionTypes/DiagnosisQuestion.tsx       |   1 +
 .../MedicationRequestQuestion.tsx             |   1 +
 .../MedicationStatementQuestion.tsx           |   1 +
 .../QuestionTypes/SymptomQuestion.tsx         |   1 +
 .../Questionnaire/QuestionnaireEditor.tsx     | 704 +++++++++++++-----
 .../Questionnaire/QuestionnaireForm.tsx       | 116 +--
 .../Questionnaire/QuestionnaireList.tsx       | 143 +++-
 src/components/Questionnaire/show.tsx         |   5 +-
 src/components/ui/input.tsx                   |   6 +
 14 files changed, 851 insertions(+), 399 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 2529c3931fa..38b0b25447d 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -648,6 +648,7 @@
   "create_position_preset": "Create a new position preset",
   "create_position_preset_description": "Creates a new position preset in Care from the current position of the camera for the given name",
   "create_preset_prerequisite": "To create presets for this bed, you'll need to link the camera to the bed first.",
+  "create_questionnaire": "Create Questionnaire",
   "create_resource_request": "Create Request",
   "create_schedule_template": "Create Schedule Template",
   "create_tag": "Create Tag",
@@ -1360,6 +1361,7 @@
   "name_of_shifting_approving_facility": "Name of shifting approving facility",
   "nationality": "Nationality",
   "nationality_is_required": "Nationality is required",
+  "navigation": "Navigation",
   "nearby_facilities": "Nearby Facilities",
   "network_failure": "Network Failure. Please check your internet connectivity.",
   "never": "never",
@@ -1711,6 +1713,7 @@
   "professional_info_note_view": "View user's professional information",
   "profile": "Profile",
   "profile_picture_deleted": "Profile picture deleted",
+  "properties": "Properties",
   "proposed": "Proposed",
   "provisional": "Provisional",
   "qualification": "Qualification",
@@ -1843,6 +1846,7 @@
   "resume": "Resume",
   "retake": "Retake",
   "retake_recording": "Retake Recording",
+  "retired": "Retired",
   "return_to_care": "Return to CARE",
   "return_to_login": "Return to Login",
   "return_to_password_reset": "Return to Password Reset",
@@ -1921,12 +1925,14 @@
   "search_medicine": "Search Medicine",
   "search_patient_page_text": "Search for existing patients using their phone number or create a new patient record",
   "search_patients": "Search Patients",
+  "search_questionnaires": "Search Questionnaires",
   "search_resource": "Search Resource",
   "search_tags": "Search tags...",
   "search_user": "Search User",
   "search_user_description": "Search for a user and assign a role to add them to the patient.",
   "searching": "Searching...",
   "see_attachments": "See Attachments",
+  "see_details": "See Details",
   "see_note": "See Note",
   "select": "Select",
   "select_a_value_set": "Select a Value Set",
@@ -1974,6 +1980,7 @@
   "select_skills": "Select and add some skills",
   "select_status": "Select Status",
   "select_sub_department": "Select sub-department",
+  "select_subject_type": "Select Subject Type",
   "select_time": "Select time",
   "select_time_slot": "Select time slot",
   "select_user": "Select user",
@@ -2080,6 +2087,7 @@
   "stream_uuid": "Stream UUID",
   "sub_category": "Sub Category",
   "subject": "Subject",
+  "subject_type": "Subject Type",
   "submit": "Submit",
   "submitting": "Submitting",
   "subscribe": "Subscribe",
@@ -2314,6 +2322,7 @@
   "verify_patient_identifier": "Please verify the patient identifier",
   "verify_patient_identity": "Verify Patient Identity",
   "verify_using": "Verify Using",
+  "version": "Version",
   "video_call": "Video Call",
   "video_conference_link": "Video Conference Link",
   "view": "View",
diff --git a/src/components/Questionnaire/CloneQuestionnaireSheet.tsx b/src/components/Questionnaire/CloneQuestionnaireSheet.tsx
index b3de7c4e7fb..3d8df981f99 100644
--- a/src/components/Questionnaire/CloneQuestionnaireSheet.tsx
+++ b/src/components/Questionnaire/CloneQuestionnaireSheet.tsx
@@ -2,6 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { Building, Check, Loader2 } from "lucide-react";
 import { useNavigate } from "raviger";
 import { useState } from "react";
+import { toast } from "sonner";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -67,12 +68,11 @@ export default function CloneQuestionnaireSheet({
       navigate(`/admin/questionnaire/${data.slug}`);
       setOpen(false);
     },
-    onError: (error: any) => {
-      if (error.response?.status === 400) {
-        setError("This slug is already in use. Please choose a different one.");
-      } else {
-        setError("Failed to clone questionnaire. Please try again.");
-      }
+    onError: (error) => {
+      const errorData = error.cause as { errors: { msg: string }[] };
+      errorData.errors.forEach((er) => {
+        toast.error(er.msg);
+      });
     },
   });
 
@@ -212,7 +212,9 @@ export default function CloneQuestionnaireSheet({
             </Button>
             <Button
               onClick={handleClone}
-              disabled={isCloning || !newSlug.trim()}
+              disabled={
+                isCloning || !newSlug.trim() || selectedIds.length === 0
+              }
             >
               {isCloning ? (
                 <>
diff --git a/src/components/Questionnaire/ManageQuestionnaireTagsSheet.tsx b/src/components/Questionnaire/ManageQuestionnaireTagsSheet.tsx
index 0ace0998366..9980b5a5881 100644
--- a/src/components/Questionnaire/ManageQuestionnaireTagsSheet.tsx
+++ b/src/components/Questionnaire/ManageQuestionnaireTagsSheet.tsx
@@ -23,6 +23,7 @@ import {
 } from "@/components/ui/command";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import {
   Sheet,
   SheetContent,
@@ -69,7 +70,7 @@ export default function ManageQuestionnaireTagsSheet({
     }),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ["questionnaire", questionnaire.slug],
+        queryKey: ["questionnaireDetail", questionnaire.slug],
       });
       toast.success("Tags updated successfully");
       setOpen(false);
@@ -150,133 +151,136 @@ export default function ManageQuestionnaireTagsSheet({
           <SheetTitle>{t("manage_tags")}</SheetTitle>
           <SheetDescription>{t("manage_tags_description")}</SheetDescription>
         </SheetHeader>
-
         <div className="space-y-6 py-4">
-          {/* Selected Tags */}
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium">{t("selected_tags")}</h3>
-            <div className="flex flex-wrap gap-2">
-              {selectedTags?.map((tag) => (
-                <Badge
-                  key={tag.slug}
-                  variant="secondary"
-                  className="flex items-center gap-1"
-                >
-                  {tag.name}
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-4 w-4 p-0 hover:bg-transparent"
-                    onClick={() => handleToggleTag(tag.slug)}
-                    disabled={isUpdating}
+          <ScrollArea className="h-[calc(100vh-11rem)]">
+            {/* Selected Tags */}
+            <div className="space-y-4">
+              <h3 className="text-sm font-medium">{t("selected_tags")}</h3>
+              <div className="flex flex-wrap gap-2">
+                {selectedTags?.map((tag) => (
+                  <Badge
+                    key={tag.slug}
+                    variant="secondary"
+                    className="flex items-center gap-1"
                   >
-                    <X className="h-3 w-3" />
-                  </Button>
-                </Badge>
-              ))}
-              {!isLoading && (!selectedTags || selectedTags.length === 0) && (
-                <p className="text-sm text-gray-500">{t("no_tags_selected")}</p>
-              )}
+                    {tag.name}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-4 w-4 p-0 hover:bg-transparent"
+                      onClick={() => handleToggleTag(tag.slug)}
+                      disabled={isUpdating}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </Badge>
+                ))}
+                {!isLoading && (!selectedTags || selectedTags.length === 0) && (
+                  <p className="text-sm text-gray-500">
+                    {t("no_tags_selected")}
+                  </p>
+                )}
+              </div>
             </div>
-          </div>
 
-          {/* Tag Selector */}
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium">{t("add_tags")}</h3>
-            <Command className="rounded-lg border shadow-md">
-              <CommandInput
-                placeholder={t("search_tags")}
-                onValueChange={setSearchQuery}
-              />
-              <CommandList>
-                <CommandEmpty>{t("no_tags_found")}</CommandEmpty>
-                <CommandGroup>
-                  {isLoading ? (
-                    <div className="flex items-center justify-center py-6">
-                      <Loader2 className="h-6 w-6 animate-spin" />
-                    </div>
-                  ) : (
-                    filteredTags?.map((tag) => (
-                      <CommandItem
-                        key={tag.slug}
-                        value={tag.slug}
-                        onSelect={() => handleToggleTag(tag.slug)}
-                      >
-                        <div className="flex flex-1 items-center gap-2">
-                          <Hash className="h-4 w-4" />
-                          <span>{tag.name}</span>
-                        </div>
-                        {selectedSlugs.includes(tag.slug) && (
-                          <Check className="h-4 w-4" />
-                        )}
-                      </CommandItem>
-                    ))
-                  )}
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </div>
+            {/* Tag Selector */}
+            <div className="space-y-4">
+              <h3 className="text-sm font-medium">{t("add_tags")}</h3>
+              <Command className="rounded-lg border shadow-md">
+                <CommandInput
+                  placeholder={t("search_tags")}
+                  onValueChange={setSearchQuery}
+                />
+                <CommandList>
+                  <CommandEmpty>{t("no_tags_found")}</CommandEmpty>
+                  <CommandGroup>
+                    {isLoading ? (
+                      <div className="flex items-center justify-center py-6">
+                        <Loader2 className="h-6 w-6 animate-spin" />
+                      </div>
+                    ) : (
+                      filteredTags?.map((tag) => (
+                        <CommandItem
+                          key={tag.slug}
+                          value={tag.slug}
+                          onSelect={() => handleToggleTag(tag.slug)}
+                        >
+                          <div className="flex flex-1 items-center gap-2">
+                            <Hash className="h-4 w-4" />
+                            <span>{tag.name}</span>
+                          </div>
+                          {selectedSlugs.includes(tag.slug) && (
+                            <Check className="h-4 w-4" />
+                          )}
+                        </CommandItem>
+                      ))
+                    )}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </div>
 
-          {/* Create New Tag */}
-          <Collapsible
-            open={isCreateOpen}
-            onOpenChange={setIsCreateOpen}
-            className="rounded-lg border p-4"
-          >
-            <CollapsibleTrigger asChild>
-              <Button
-                variant="outline"
-                size="sm"
-                className="flex w-full items-center justify-between"
-              >
-                <div className="flex items-center gap-2">
-                  <Plus className="h-4 w-4" />
-                  <span>{t("create_new_tag")}</span>
+            {/* Create New Tag */}
+            <Collapsible
+              open={isCreateOpen}
+              onOpenChange={setIsCreateOpen}
+              className="rounded-lg border p-4"
+            >
+              <CollapsibleTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="flex w-full items-center justify-between"
+                >
+                  <div className="flex items-center gap-2">
+                    <Plus className="h-4 w-4" />
+                    <span>{t("create_new_tag")}</span>
+                  </div>
+                  <CareIcon
+                    icon={isCreateOpen ? "l-angle-up" : "l-angle-down"}
+                    className="h-4 w-4"
+                  />
+                </Button>
+              </CollapsibleTrigger>
+              <CollapsibleContent className="mt-4 space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="tag-name">{t("tag_name")}</Label>
+                  <Input
+                    id="tag-name"
+                    value={newTagName}
+                    onChange={(e) => setNewTagName(e.target.value)}
+                    placeholder={t("enter_tag_name")}
+                  />
                 </div>
-                <CareIcon
-                  icon={isCreateOpen ? "l-angle-up" : "l-angle-down"}
-                  className="h-4 w-4"
-                />
-              </Button>
-            </CollapsibleTrigger>
-            <CollapsibleContent className="mt-4 space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="tag-name">{t("tag_name")}</Label>
-                <Input
-                  id="tag-name"
-                  value={newTagName}
-                  onChange={(e) => setNewTagName(e.target.value)}
-                  placeholder={t("enter_tag_name")}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="tag-slug">{t("tag_slug")}</Label>
-                <Input
-                  id="tag-slug"
-                  value={newTagSlug}
-                  onChange={(e) => setNewTagSlug(e.target.value)}
-                  placeholder={t("enter_tag_slug")}
-                />
-              </div>
-              <Button
-                onClick={handleCreateTag}
-                disabled={isCreating || !newTagName || !newTagSlug}
-                className="w-full"
-              >
-                {isCreating ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    {t("creating")}
-                  </>
-                ) : (
-                  t("create_tag")
-                )}
-              </Button>
-            </CollapsibleContent>
-          </Collapsible>
+                <div className="space-y-2">
+                  <Label htmlFor="tag-slug">{t("tag_slug")}</Label>
+                  <Input
+                    id="tag-slug"
+                    value={newTagSlug}
+                    onChange={(e) => setNewTagSlug(e.target.value)}
+                    placeholder={t("enter_tag_slug")}
+                  />
+                </div>
+                <Button
+                  onClick={handleCreateTag}
+                  disabled={isCreating || !newTagName || !newTagSlug}
+                  className="w-full"
+                >
+                  {isCreating ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      {t("creating")}
+                    </>
+                  ) : (
+                    t("create_tag")
+                  )}
+                </Button>
+              </CollapsibleContent>
+            </Collapsible>
+          </ScrollArea>
         </div>
 
-        <SheetFooter className="absolute bottom-0 left-0 right-0 p-4 border-t bg-background">
+        <SheetFooter className=" bottom-0 left-0 right-0 p-4 border-t bg-background">
           <div className="flex w-full justify-end gap-4">
             <Button
               variant="outline"
diff --git a/src/components/Questionnaire/QuestionRenderer.tsx b/src/components/Questionnaire/QuestionRenderer.tsx
index 284e1cf616f..5b3e5d41afb 100644
--- a/src/components/Questionnaire/QuestionRenderer.tsx
+++ b/src/components/Questionnaire/QuestionRenderer.tsx
@@ -79,7 +79,7 @@ export function QuestionRenderer({
             updateQuestionnaireResponseCB={onResponseChange}
             errors={errors}
             clearError={clearError}
-            disabled={disabled}
+            disabled={disabled || encounterId === "preview"}
             activeGroupId={activeGroupId}
             patientId={patientId}
           />
diff --git a/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx b/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx
index 94ffe3b7626..52a53f25487 100644
--- a/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx
@@ -121,6 +121,7 @@ export function AllergyQuestion({
         limit: 100,
       },
     }),
+    enabled: patientId !== "preview",
   });
 
   useEffect(() => {
diff --git a/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx b/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
index 00379ae671a..d9b507e185e 100644
--- a/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
@@ -102,6 +102,7 @@ export function DiagnosisQuestion({
         limit: 100,
       },
     }),
+    enabled: encounterId !== "preview",
   });
 
   useEffect(() => {
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
index 45ff8ce6801..eda926345ab 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
@@ -100,6 +100,7 @@ export function MedicationRequestQuestion({
         limit: 100,
       },
     }),
+    enabled: encounterId !== "preview",
   });
 
   useEffect(() => {
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
index 17cba6b7790..37b412537aa 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
@@ -115,6 +115,7 @@ export function MedicationStatementQuestion({
         encounter: encounterId,
       },
     }),
+    enabled: encounterId !== "preview",
   });
 
   useEffect(() => {
diff --git a/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx b/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
index 0a175ae9219..1823591da11 100644
--- a/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
@@ -296,6 +296,7 @@ export function SymptomQuestion({
         encounter: encounterId,
       },
     }),
+    enabled: encounterId !== "preview",
   });
 
   useEffect(() => {
diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx
index 69757e5b726..a9abf9fb544 100644
--- a/src/components/Questionnaire/QuestionnaireEditor.tsx
+++ b/src/components/Questionnaire/QuestionnaireEditor.tsx
@@ -1,11 +1,19 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import {
+  ChevronDown,
+  ChevronUp,
+  SquarePenIcon,
+  Tags,
+  ViewIcon,
+} from "lucide-react";
 import { Building, Check, Loader2, X } from "lucide-react";
 import { useNavigate } from "raviger";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
+import { cn } from "@/lib/utils";
+
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -34,6 +42,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -64,10 +73,13 @@ import {
   SubjectType,
 } from "@/types/questionnaire/questionnaire";
 import questionnaireApi from "@/types/questionnaire/questionnaireApi";
+import { QuestionnaireTagModel } from "@/types/questionnaire/tags";
 import valuesetApi from "@/types/valueset/valuesetApi";
 
+import CloneQuestionnaireSheet from "./CloneQuestionnaireSheet";
 import { CodingEditor } from "./CodingEditor";
 import ManageQuestionnaireOrganizationsSheet from "./ManageQuestionnaireOrganizationsSheet";
+import ManageQuestionnaireTagsSheet from "./ManageQuestionnaireTagsSheet";
 import { QuestionnaireForm } from "./QuestionnaireForm";
 
 interface QuestionnaireEditorProps {
@@ -85,6 +97,413 @@ const STRUCTURED_QUESTION_TYPES = [
   { value: "location_association", label: "Location Association" },
 ] as const;
 
+interface Organization {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+interface OrganizationResponse {
+  results: Organization[];
+}
+
+interface TagResponse {
+  results: QuestionnaireTagModel[];
+}
+
+interface QuestionnairePropertiesProps {
+  questionnaire: QuestionnaireDetail;
+  updateQuestionnaireField: <K extends keyof QuestionnaireDetail>(
+    field: K,
+    value: QuestionnaireDetail[K],
+  ) => void;
+  id?: string;
+  organizations?: OrganizationResponse;
+  organizationSelection: {
+    selectedIds: string[];
+    onToggle: (orgId: string) => void;
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    available?: OrganizationResponse;
+    isLoading?: boolean;
+  };
+  tags?: QuestionnaireTagModel[];
+  tagSelection: {
+    selectedIds: string[];
+    onToggle: (tagId: string) => void;
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    available?: TagResponse;
+    isLoading?: boolean;
+  };
+}
+
+function StatusSelector({
+  value,
+  onChange,
+}: {
+  value: QuestionStatus;
+  onChange: (value: QuestionStatus) => void;
+}) {
+  return (
+    <div className="space-y-2">
+      <Label htmlFor="status">{t("status")}</Label>
+      <RadioGroup
+        value={value}
+        onValueChange={onChange}
+        className="flex items-center gap-0 border border-gray-300 divide-x rounded-md bg-white [&>div:has([data-state=checked])]:text-primary-500 [&>div:has([data-state=checked])]:bg-primary-200"
+      >
+        {["active", "draft", "retired"].map((status) => (
+          <div
+            key={status}
+            className={cn(
+              "flex items-center px-2 py-1 space-x-2",
+              status === "active" && "rounded-l-md",
+              status === "retired" && "rounded-r-md",
+            )}
+          >
+            <RadioGroupItem value={status} id={`status-${status}`} />
+            <Label
+              htmlFor={`status-${status}`}
+              className="text-sm font-normal text-gray-950"
+            >
+              {t(status)}
+            </Label>
+          </div>
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}
+
+function SubjectTypeSelector({
+  value,
+  onChange,
+}: {
+  value: SubjectType;
+  onChange: (value: SubjectType) => void;
+}) {
+  return (
+    <div className="space-y-2">
+      <Label htmlFor="subject_type">{t("subject_type")}</Label>
+      <RadioGroup
+        value={value}
+        onValueChange={onChange}
+        className="flex w-fit items-center gap-0 border border-gray-300 divide-x rounded-md bg-white [&>div:has([data-state=checked])]:bg-primary-200"
+      >
+        {[
+          { value: "patient", label: "patient" },
+          { value: "encounter", label: "encounter" },
+        ].map((type) => (
+          <div
+            key={type.value}
+            className={cn(
+              "flex items-center px-2 py-1 space-x-2",
+              type.value === "patient" && "rounded-l-md",
+              type.value === "encounter" && "rounded-r-md",
+            )}
+          >
+            <RadioGroupItem
+              value={type.value}
+              id={`subject-type-${type.value}`}
+            />
+            <Label
+              htmlFor={`subject-type-${type.value}`}
+              className="text-sm font-normal text-gray-950"
+            >
+              {t(type.label)}
+            </Label>
+          </div>
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}
+
+function OrganizationSelector({
+  id,
+  organizations,
+  selection,
+}: {
+  id?: string;
+  organizations?: OrganizationResponse;
+  selection: QuestionnairePropertiesProps["organizationSelection"];
+}) {
+  if (id) {
+    return (
+      <>
+        <div className="flex flex-wrap gap-2 mb-2">
+          {organizations?.results.map((org) => (
+            <Badge
+              key={org.id}
+              variant="secondary"
+              className="flex items-center gap-1"
+            >
+              <Building className="h-3 w-3" />
+              {org.name}
+            </Badge>
+          ))}
+          {(!organizations?.results || organizations.results.length === 0) && (
+            <p className="text-sm text-gray-500">
+              {t("no_organizations_selected")}
+            </p>
+          )}
+        </div>
+        <ManageQuestionnaireOrganizationsSheet
+          questionnaireId={id}
+          trigger={
+            <Button variant="outline" className="w-full justify-start">
+              <Building className="mr-2 h-4 w-4" />
+              {t("manage_organizations")}
+            </Button>
+          }
+        />
+      </>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        {selection.selectedIds.length > 0 ? (
+          selection.available?.results
+            .filter((org) => selection.selectedIds.includes(org.id))
+            .map((org) => (
+              <Badge
+                key={org.id}
+                variant="secondary"
+                className="flex items-center gap-1"
+              >
+                {org.name}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-4 w-4 p-0 hover:bg-transparent"
+                  onClick={() => selection.onToggle(org.id)}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </Badge>
+            ))
+        ) : (
+          <p className="text-sm text-gray-500">
+            {t("no_organizations_selected")}
+          </p>
+        )}
+      </div>
+
+      <Command className="rounded-lg border shadow-md">
+        <CommandInput
+          placeholder={t("search_organizations")}
+          onValueChange={selection.setSearchQuery}
+        />
+        <CommandList>
+          <CommandEmpty>{t("no_organizations_found")}</CommandEmpty>
+          <CommandGroup>
+            {selection.isLoading ? (
+              <div className="flex items-center justify-center py-6">
+                <Loader2 className="h-6 w-6 animate-spin" />
+              </div>
+            ) : (
+              selection.available?.results.map((org) => (
+                <CommandItem
+                  key={org.id}
+                  value={org.id}
+                  onSelect={() => selection.onToggle(org.id)}
+                >
+                  <div className="flex flex-1 items-center gap-2">
+                    <Building className="h-4 w-4" />
+                    <span>{org.name}</span>
+                    {org.description && (
+                      <span className="text-xs text-gray-500">
+                        - {org.description}
+                      </span>
+                    )}
+                  </div>
+                  {selection.selectedIds.includes(org.id) && (
+                    <Check className="h-4 w-4" />
+                  )}
+                </CommandItem>
+              ))
+            )}
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </div>
+  );
+}
+
+function TagSelector({
+  id,
+  selection,
+  questionnaire,
+}: {
+  id?: string;
+  selection: QuestionnairePropertiesProps["tagSelection"];
+  questionnaire: QuestionnaireDetail;
+}) {
+  if (id) {
+    return (
+      <>
+        <div className="flex flex-wrap gap-2 mb-2">
+          {questionnaire.tags.map((tag) => (
+            <Badge
+              key={tag.id}
+              variant="secondary"
+              className="flex items-center gap-1"
+            >
+              <Building className="h-3 w-3" />
+              {tag.name}
+            </Badge>
+          ))}
+          {questionnaire.tags.length === 0 && (
+            <p className="text-sm text-gray-500">{t("no_tags_selected")}</p>
+          )}
+        </div>
+        <ManageQuestionnaireTagsSheet
+          questionnaire={questionnaire}
+          trigger={
+            <Button variant="outline" className="w-full justify-start">
+              <Tags className="mr-2 h-4 w-4" />
+              {t("manage_tags")}
+            </Button>
+          }
+        />
+      </>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        {selection.selectedIds.length > 0 ? (
+          selection.available?.results
+            .filter((tag) => selection.selectedIds.includes(tag.id))
+            .map((tag) => (
+              <Badge
+                key={tag.id}
+                variant="secondary"
+                className="flex items-center gap-1"
+              >
+                {tag.name}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-4 w-4 p-0 hover:bg-transparent"
+                  onClick={() => selection.onToggle(tag.id)}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </Badge>
+            ))
+        ) : (
+          <p className="text-sm text-gray-500">{t("no_tags_selected")}</p>
+        )}
+      </div>
+
+      <Command className="rounded-lg border shadow-md">
+        <CommandInput
+          placeholder={t("search_tags")}
+          onValueChange={selection.setSearchQuery}
+        />
+        <CommandList>
+          <CommandEmpty>{t("no_tags_found")}</CommandEmpty>
+          <CommandGroup>
+            {selection.isLoading ? (
+              <div className="flex items-center justify-center py-6">
+                <Loader2 className="h-6 w-6 animate-spin" />
+              </div>
+            ) : (
+              selection.available?.results.map((tag) => (
+                <CommandItem
+                  key={tag.id}
+                  value={tag.id}
+                  onSelect={() => selection.onToggle(tag.id)}
+                >
+                  <div className="flex flex-1 items-center gap-2">
+                    <Building className="h-4 w-4" />
+                    <span>{tag.name}</span>
+                  </div>
+                  {selection.selectedIds.includes(tag.id) && (
+                    <Check className="h-4 w-4" />
+                  )}
+                </CommandItem>
+              ))
+            )}
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </div>
+  );
+}
+
+function QuestionnaireProperties({
+  questionnaire,
+  updateQuestionnaireField,
+  id,
+  organizations,
+  organizationSelection,
+  tags,
+  tagSelection,
+}: QuestionnairePropertiesProps) {
+  return (
+    <Card className="border-none bg-transparent shadow-none space-y-4 mt-2 ml-2">
+      <CardHeader className="p-0">
+        <CardTitle>{t("properties")}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6 p-0">
+        <StatusSelector
+          value={questionnaire.status}
+          onChange={(val) => updateQuestionnaireField("status", val)}
+        />
+
+        <SubjectTypeSelector
+          value={questionnaire.subject_type}
+          onChange={(val) => updateQuestionnaireField("subject_type", val)}
+        />
+
+        <div className="space-y-2">
+          <Label>{t("organizations")}</Label>
+          <OrganizationSelector
+            id={id}
+            organizations={organizations}
+            selection={organizationSelection}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>{t("tags")}</Label>
+          <TagSelector
+            id={id}
+            selection={tagSelection}
+            questionnaire={questionnaire}
+          />
+        </div>
+        <CloneQuestionnaireSheet
+          questionnaire={questionnaire}
+          trigger={
+            <Button variant="outline" className="w-full justify-start">
+              <CareIcon icon="l-copy" className="mr-2 h-4 w-4" />
+              Clone Questionnaire
+            </Button>
+          }
+        />
+
+        <div className="space-y-2">
+          <Label htmlFor="version">{t("version")}</Label>
+          <Input
+            id="version"
+            value={questionnaire.version || "0.0.1"}
+            disabled={true}
+            onChange={(e) =>
+              updateQuestionnaireField("version", e.target.value)
+            }
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
 export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState<"edit" | "preview">("edit");
@@ -92,7 +511,9 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
     new Set(),
   );
   const [selectedOrgIds, setSelectedOrgIds] = useState<string[]>([]);
+  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
   const [orgSearchQuery, setOrgSearchQuery] = useState("");
+  const [tagSearchQuery, setTagSearchQuery] = useState("");
   const [observation, setObservation] = useState<ObservationType | undefined>();
 
   const {
@@ -107,16 +528,35 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
     enabled: !!id,
   });
 
-  const { data: availableOrganizations, isLoading: isLoadingOrganizations } =
-    useQuery({
-      queryKey: ["organizations", orgSearchQuery],
-      queryFn: query(organizationApi.list, {
-        queryParams: {
-          org_type: "role",
-          name: orgSearchQuery || undefined,
-        },
-      }),
-    });
+  const { data: organizations, isLoading: isLoadingOrganizations } = useQuery({
+    queryKey: ["questionnaire", id, "organizations"],
+    queryFn: query(questionnaireApi.getOrganizations, {
+      pathParams: { id: id! },
+    }),
+    enabled: !!id,
+  });
+
+  const {
+    data: availableOrganizations,
+    isLoading: isLoadingAvailableOrganizations,
+  } = useQuery({
+    queryKey: ["organizations", orgSearchQuery],
+    queryFn: query(organizationApi.list, {
+      queryParams: {
+        org_type: "role",
+        name: orgSearchQuery || undefined,
+      },
+    }),
+  });
+
+  const { data: availableTags, isLoading: isLoadingAvailableTags } = useQuery({
+    queryKey: ["tags", tagSearchQuery],
+    queryFn: query(questionnaireApi.tags.list, {
+      queryParams: {
+        name: tagSearchQuery || undefined,
+      },
+    }),
+  });
 
   const { mutate: createQuestionnaire, isPending: isCreating } = useMutation({
     mutationFn: mutate(questionnaireApi.create),
@@ -232,12 +672,22 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
     );
   };
 
+  const handleToggleTag = (tagId: string) => {
+    setSelectedTagIds((current) =>
+      current.includes(tagId)
+        ? current.filter((id) => id !== tagId)
+        : [...current, tagId],
+    );
+  };
+
   return (
     <div className="container mx-auto px-4 py-6">
       <div className="mb-4 flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">
-            {id ? "Edit Questionnaire" : "Create Questionnaire"}
+            {id
+              ? t("edit") + " " + questionnaire.title
+              : "Create Questionnaire"}
           </h1>
           <p className="text-sm text-gray-500">{questionnaire.description}</p>
         </div>
@@ -258,18 +708,24 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
         onValueChange={(v) => setActiveTab(v as "edit" | "preview")}
       >
         <TabsList className="mb-4">
-          <TabsTrigger value="edit">Edit</TabsTrigger>
-          <TabsTrigger value="preview">Preview</TabsTrigger>
+          <TabsTrigger value="edit">
+            <ViewIcon className="w-4 h-4 mr-2" />
+            Edit form
+          </TabsTrigger>
+          <TabsTrigger value="preview">
+            <SquarePenIcon className="w-4 h-4 mr-2" />
+            Preview form
+          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="edit">
-          <div className="grid gap-6 lg:grid-cols-[300px,1fr]">
-            <div className="space-y-4">
-              <Card>
-                <CardHeader>
-                  <CardTitle>Navigation</CardTitle>
+          <div className="flex flex-col md:flex-row gap-2">
+            <div className="space-y-4 max-w-sm">
+              <Card className="border-none bg-transparent shadow-none space-y-3 mt-2 md:block hidden">
+                <CardHeader className="p-0">
+                  <CardTitle>{t("navigation")}</CardTitle>
                 </CardHeader>
-                <CardContent>
+                <CardContent className="p-0">
                   <nav className="space-y-1">
                     {questionnaire.questions.map((question, index) => {
                       const hasSubQuestions =
@@ -288,7 +744,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
                                 toggleQuestionExpanded(question.id);
                               }
                             }}
-                            className={`w-full text-left px-3 py-2 text-sm rounded-md hover:bg-accent flex items-center gap-2 ${
+                            className={`w-full text-left px-3 py-2 text-sm rounded-md hover:bg-gray-200 flex items-center gap-2 ${
                               expandedQuestions.has(question.id)
                                 ? "bg-accent"
                                 : ""
@@ -300,9 +756,6 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
                             <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">
@@ -329,12 +782,6 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
                                     <span className="flex-1 truncate">
                                       {subQuestion.text || "Untitled Question"}
                                     </span>
-                                    <Badge
-                                      variant="outline"
-                                      className="text-xs"
-                                    >
-                                      {subQuestion.type}
-                                    </Badge>
                                   </button>
                                 ),
                               )}
@@ -346,154 +793,34 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
                   </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>
-
-                  <div>
-                    <Label>Organizations</Label>
-                    {id ? (
-                      <ManageQuestionnaireOrganizationsSheet
-                        questionnaireId={id}
-                        trigger={
-                          <Button
-                            variant="outline"
-                            className="w-full justify-start"
-                          >
-                            <Building className="mr-2 h-4 w-4" />
-                            Manage Organizations
-                          </Button>
-                        }
-                      />
-                    ) : (
-                      <div className="space-y-4">
-                        <div className="flex flex-wrap gap-2">
-                          {selectedOrgIds.length > 0 ? (
-                            availableOrganizations?.results
-                              .filter((org) => selectedOrgIds.includes(org.id))
-                              .map((org) => (
-                                <Badge
-                                  key={org.id}
-                                  variant="secondary"
-                                  className="flex items-center gap-1"
-                                >
-                                  {org.name}
-                                  <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-4 w-4 p-0 hover:bg-transparent"
-                                    onClick={() =>
-                                      handleToggleOrganization(org.id)
-                                    }
-                                  >
-                                    <X className="h-3 w-3" />
-                                  </Button>
-                                </Badge>
-                              ))
-                          ) : (
-                            <p className="text-sm text-gray-500">
-                              No organizations selected
-                            </p>
-                          )}
-                        </div>
-
-                        <Command className="rounded-lg border shadow-md">
-                          <CommandInput
-                            placeholder="Search organizations..."
-                            onValueChange={setOrgSearchQuery}
-                          />
-                          <CommandList>
-                            <CommandEmpty>No organizations found.</CommandEmpty>
-                            <CommandGroup>
-                              {isLoadingOrganizations ? (
-                                <div className="flex items-center justify-center py-6">
-                                  <Loader2 className="h-6 w-6 animate-spin" />
-                                </div>
-                              ) : (
-                                availableOrganizations?.results.map((org) => (
-                                  <CommandItem
-                                    key={org.id}
-                                    value={org.id}
-                                    onSelect={() =>
-                                      handleToggleOrganization(org.id)
-                                    }
-                                  >
-                                    <div className="flex flex-1 items-center gap-2">
-                                      <Building className="h-4 w-4" />
-                                      <span>{org.name}</span>
-                                      {org.description && (
-                                        <span className="text-xs text-gray-500">
-                                          - {org.description}
-                                        </span>
-                                      )}
-                                    </div>
-                                    {selectedOrgIds.includes(org.id) && (
-                                      <Check className="h-4 w-4" />
-                                    )}
-                                  </CommandItem>
-                                ))
-                              )}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </div>
-                    )}
-                  </div>
-                </CardContent>
-              </Card>
+              <div className="space-y-4 max-w-sm lg:hidden">
+                <QuestionnaireProperties
+                  questionnaire={questionnaire}
+                  updateQuestionnaireField={updateQuestionnaireField}
+                  id={id}
+                  organizations={organizations}
+                  organizationSelection={{
+                    selectedIds: selectedOrgIds,
+                    onToggle: handleToggleOrganization,
+                    searchQuery: orgSearchQuery,
+                    setSearchQuery: setOrgSearchQuery,
+                    available: availableOrganizations,
+                    isLoading: isLoadingAvailableOrganizations,
+                  }}
+                  tags={questionnaire.tags}
+                  tagSelection={{
+                    selectedIds: selectedTagIds,
+                    onToggle: handleToggleTag,
+                    searchQuery: tagSearchQuery,
+                    setSearchQuery: setTagSearchQuery,
+                    available: availableTags,
+                    isLoading: isLoadingAvailableTags,
+                  }}
+                />
+              </div>
             </div>
 
-            <div className="space-y-6">
+            <div className="space-y-4 flex-1">
               <Card>
                 <CardHeader>
                   <CardTitle>Basic Information</CardTitle>
@@ -637,6 +964,31 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
                 </CardContent>
               </Card>
             </div>
+            <div className="space-y-4 max-w-sm hidden lg:block">
+              <QuestionnaireProperties
+                questionnaire={questionnaire}
+                updateQuestionnaireField={updateQuestionnaireField}
+                id={id}
+                organizations={organizations}
+                organizationSelection={{
+                  selectedIds: selectedOrgIds,
+                  onToggle: handleToggleOrganization,
+                  searchQuery: orgSearchQuery,
+                  setSearchQuery: setOrgSearchQuery,
+                  available: availableOrganizations,
+                  isLoading: isLoadingAvailableOrganizations,
+                }}
+                tags={questionnaire.tags}
+                tagSelection={{
+                  selectedIds: selectedTagIds,
+                  onToggle: handleToggleTag,
+                  searchQuery: tagSearchQuery,
+                  setSearchQuery: setTagSearchQuery,
+                  available: availableTags,
+                  isLoading: isLoadingAvailableTags,
+                }}
+              />
+            </div>
           </div>
           <DebugPreview
             data={questionnaire}
diff --git a/src/components/Questionnaire/QuestionnaireForm.tsx b/src/components/Questionnaire/QuestionnaireForm.tsx
index a02062c2325..c59c96d07f1 100644
--- a/src/components/Questionnaire/QuestionnaireForm.tsx
+++ b/src/components/Questionnaire/QuestionnaireForm.tsx
@@ -463,63 +463,67 @@ export function QuestionnaireForm({
 
         {/* Search and Add Questionnaire */}
 
-        <div
-          key={`${questionnaireForms.length}`}
-          className="flex gap-4 items-center m-4 max-w-4xl"
-        >
-          <QuestionnaireSearch
-            subjectType={subjectType}
-            onSelect={(selected) => {
-              if (
-                questionnaireForms.some(
-                  (form) => form.questionnaire.id === selected.id,
-                )
-              ) {
-                return;
-              }
-
-              setQuestionnaireForms((prev) => [
-                ...prev,
-                {
-                  questionnaire: selected,
-                  responses: initializeResponses(selected.questions),
-                  errors: [],
-                },
-              ]);
-            }}
-            disabled={isPending}
-          />
-        </div>
-
-        {/* Submit and Cancel Buttons */}
-        {questionnaireForms.length > 0 && (
-          <div className="flex justify-end gap-4 mx-4 mt-4 max-w-4xl">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={onCancel}
-              disabled={isPending}
-            >
-              {t("cancel")}
-            </Button>
-            <Button
-              type="submit"
-              onClick={handleSubmit}
-              disabled={isPending || hasErrors}
-              className="relative"
+        {encounterId !== "preview" && (
+          <>
+            <div
+              key={`${questionnaireForms.length}`}
+              className="flex gap-4 items-center m-4 max-w-4xl"
             >
-              {isPending ? (
-                <>
-                  <span className="opacity-0">{t("submit")}</span>
-                  <div className="absolute inset-0 flex items-center justify-center">
-                    <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-white" />
-                  </div>
-                </>
-              ) : (
-                t("submit")
-              )}
-            </Button>
-          </div>
+              <QuestionnaireSearch
+                subjectType={subjectType}
+                onSelect={(selected) => {
+                  if (
+                    questionnaireForms.some(
+                      (form) => form.questionnaire.id === selected.id,
+                    )
+                  ) {
+                    return;
+                  }
+
+                  setQuestionnaireForms((prev) => [
+                    ...prev,
+                    {
+                      questionnaire: selected,
+                      responses: initializeResponses(selected.questions),
+                      errors: [],
+                    },
+                  ]);
+                }}
+                disabled={isPending}
+              />
+            </div>
+
+            {/* Submit and Cancel Buttons */}
+            {questionnaireForms.length > 0 && (
+              <div className="flex justify-end gap-4 mx-4 mt-4 max-w-4xl">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onCancel}
+                  disabled={isPending}
+                >
+                  {t("cancel")}
+                </Button>
+                <Button
+                  type="submit"
+                  onClick={handleSubmit}
+                  disabled={isPending || hasErrors}
+                  className="relative"
+                >
+                  {isPending ? (
+                    <>
+                      <span className="opacity-0">{t("submit")}</span>
+                      <div className="absolute inset-0 flex items-center justify-center">
+                        <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-white" />
+                      </div>
+                    </>
+                  ) : (
+                    t("submit")
+                  )}
+                </Button>
+              </div>
+            )}
+          </>
         )}
 
         <PLUGIN_Component
diff --git a/src/components/Questionnaire/QuestionnaireList.tsx b/src/components/Questionnaire/QuestionnaireList.tsx
index cb6c29040eb..3deaf8c2c64 100644
--- a/src/components/Questionnaire/QuestionnaireList.tsx
+++ b/src/components/Questionnaire/QuestionnaireList.tsx
@@ -1,65 +1,120 @@
 import { useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
+import {
+  ArchiveIcon,
+  EyeIcon,
+  FileCheckIcon,
+  NotepadTextDashedIcon,
+  PlusIcon,
+  Search,
+} from "lucide-react";
 import { useNavigate } from "raviger";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Loading from "@/components/Common/Loading";
 
 import useFilters from "@/hooks/useFilters";
 
 import query from "@/Utils/request/query";
-import { QuestionnaireDetail } from "@/types/questionnaire/questionnaire";
+import {
+  QuestionStatus,
+  QuestionnaireDetail,
+} from "@/types/questionnaire/questionnaire";
 import questionnaireApi from "@/types/questionnaire/questionnaireApi";
 
 export function QuestionnaireList() {
-  const { qParams, Pagination, resultsPerPage } = useFilters({
+  const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
     limit: 15,
   });
+
   const navigate = useNavigate();
-  const { data: response, isLoading } = useQuery({
+
+  const { data: response } = useQuery({
     queryKey: ["questionnaires", qParams],
     queryFn: query(questionnaireApi.list, {
       queryParams: {
         limit: resultsPerPage,
         offset: ((qParams.page ?? 1) - 1) * resultsPerPage,
+        title: qParams.title || undefined,
+        status: qParams.status || "active",
       },
     }),
   });
 
-  if (isLoading) {
-    return <Loading />;
-  }
-
   const questionnaireList = response?.results || [];
 
   return (
     <div className="container mx-auto px-4 py-6">
-      <div className="mb-6 flex items-center justify-between">
-        <div>
+      <div className="mb-4 ">
+        <div className="mb-2">
           <h1 className="text-2xl font-bold">{t("questionnaires")}</h1>
           <p className="text-gray-600">{t("manage_and_view_questionnaires")}</p>
         </div>
-        <Button onClick={() => navigate("/admin/questionnaire/create")}>
-          {t("create_new")}
-        </Button>
+
+        <div className="flex items-center justify-between mt-8">
+          <div className="flex md:flex-row flex-col items-center gap-4">
+            <Tabs
+              defaultValue="active"
+              value={qParams.status || "active"}
+              onValueChange={(value) => updateQuery({ status: value })}
+              className="w-full"
+            >
+              <TabsList>
+                <TabsTrigger value="active">
+                  <FileCheckIcon className="w-4 h-4 mr-2 " />
+                  {t("active")}
+                </TabsTrigger>
+                <TabsTrigger value="draft">
+                  <NotepadTextDashedIcon className="w-4 h-4 mr-2" />
+                  {t("draft")}
+                </TabsTrigger>
+                <TabsTrigger value="retired">
+                  <ArchiveIcon className="w-4 h-4 mr-2" />
+                  {t("retired")}
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <div className="relative md:min-w-80 w-full">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
+              <Input
+                placeholder={t("search_questionnaires")}
+                className="pl-10"
+                value={qParams.title || ""}
+                onChange={(e) => updateQuery({ title: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center self-start">
+            <Button onClick={() => navigate("/admin/questionnaire/create")}>
+              <PlusIcon className="w-4 h-4" />
+              {t("create_questionnaire")}
+            </Button>
+          </div>
+        </div>
       </div>
 
       <div className="overflow-hidden rounded-lg bg-white shadow">
         <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
+          <thead className="bg-gray-100  text-gray-700">
             <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+              <th className="px-6 py-3 text-left text-xs font-medium tracking-wider ">
                 {t("title")}
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+              <th className="px-6 py-3 text-left text-xs font-medium tracking-wider ">
                 {t("description")}
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                {t("status")}
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+              <th className="px-6 py-3 text-left text-xs font-medium tracking-wider ">
                 {t("slug")}
               </th>
             </tr>
@@ -73,29 +128,43 @@ export function QuestionnaireList() {
                 }
                 className="cursor-pointer hover:bg-gray-50"
               >
-                <td className="whitespace-nowrap px-6 py-4">
-                  <div className="text-sm font-medium text-gray-900">
+                <td className="whitespace-nowrap px-6 py-2">
+                  <div className="text-sm font-semibold text-gray-950">
                     {questionnaire.title}
                   </div>
                 </td>
-                <td className="px-6 py-4">
-                  <div className="max-w-md truncate text-sm text-gray-900">
-                    {questionnaire.description}
+                <td className="px-6 py-2">
+                  <div className="flex items-center justify-between">
+                    <div className="max-w-md truncate text-sm text-gray-950">
+                      {questionnaire.description}
+                    </div>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={(e) => e.stopPropagation()}
+                          className="font-semibold shadow-gray-300 text-gray-950 border-gray-400"
+                        >
+                          <EyeIcon className="w-4 h-4 mr-2" />
+                          {t("see_details")}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-80">
+                        <div className="space-y-2">
+                          <h4 className="font-medium">{questionnaire.title}</h4>
+                          <p className="text-sm text-gray-600">
+                            {questionnaire.description}
+                          </p>
+                        </div>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <Badge
-                    className={
-                      questionnaire.status === "active"
-                        ? "bg-green-100 text-green-800 hover:bg-green-200"
-                        : ""
-                    }
-                  >
-                    {questionnaire.status}
-                  </Badge>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  {questionnaire.slug}
+                <td className="whitespace-nowrap px-2">
+                  <Label className=" text-gray-800 bg-gray-100 rounded-md px-2 py-1.5 w-fit">
+                    {questionnaire.slug}
+                  </Label>
                 </td>
               </tr>
             ))}
diff --git a/src/components/Questionnaire/show.tsx b/src/components/Questionnaire/show.tsx
index f18ca66f1e0..6c3fda69b27 100644
--- a/src/components/Questionnaire/show.tsx
+++ b/src/components/Questionnaire/show.tsx
@@ -1,4 +1,5 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
+import { Tags } from "lucide-react";
 import { useNavigate } from "raviger";
 import { useState } from "react";
 
@@ -94,7 +95,7 @@ export function QuestionnaireShow({ id }: QuestionnaireShowProps) {
     isLoading,
     error,
   } = useQuery({
-    queryKey: ["questionnaire", id],
+    queryKey: ["questionnaireDetail", id],
     queryFn: query(questionnaireApi.detail, {
       pathParams: { id },
     }),
@@ -182,7 +183,7 @@ export function QuestionnaireShow({ id }: QuestionnaireShowProps) {
                 questionnaire={questionnaire}
                 trigger={
                   <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-                    <CareIcon icon="l-tag" className="mr-2 h-4 w-4" />
+                    <Tags className="mr-2 h-4 w-4" />
                     Manage Tags
                   </DropdownMenuItem>
                 }
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index b76d7c5b131..e8eb000c48c 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -13,6 +13,12 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
         )}
         ref={ref}
         {...props}
+        onFocus={(e) => {
+          if (type === "date") {
+            e.target.showPicker();
+          }
+          props.onFocus?.(e);
+        }}
       />
     );
   },

From e68f897be572775887ce0cc5f6fac234ef3d92e8 Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Tue, 18 Feb 2025 18:41:26 +0530
Subject: [PATCH 05/12] Responsiveness

---
 .../Questionnaire/QuestionnaireEditor.tsx     | 314 ++++++++++++------
 .../Questionnaire/QuestionnaireList.tsx       |  10 +-
 2 files changed, 224 insertions(+), 100 deletions(-)

diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx
index a9abf9fb544..26d65405b38 100644
--- a/src/components/Questionnaire/QuestionnaireEditor.tsx
+++ b/src/components/Questionnaire/QuestionnaireEditor.tsx
@@ -3,6 +3,8 @@ import { t } from "i18next";
 import {
   ChevronDown,
   ChevronUp,
+  ChevronsDownUp,
+  ChevronsUpDown,
   SquarePenIcon,
   Tags,
   ViewIcon,
@@ -103,6 +105,11 @@ interface Organization {
   description?: string;
 }
 
+interface StylingMetadata {
+  classes?: string;
+  containerClasses?: string;
+}
+
 interface OrganizationResponse {
   results: Organization[];
 }
@@ -504,6 +511,95 @@ function QuestionnaireProperties({
   );
 }
 
+const LAYOUT_OPTIONS = [
+  {
+    id: "full-width",
+    value: "grid grid-cols-1",
+    label: "Full Width",
+    preview: (
+      <div className="space-y-1 w-full">
+        <div className="h-2 w-full bg-gray-200 rounded" />
+        <div className="h-2 w-full bg-gray-200 rounded" />
+      </div>
+    ),
+  },
+  {
+    id: "equal-split",
+    value: "grid grid-cols-2",
+    label: "Equal Split",
+    preview: (
+      <div className="w-full grid grid-cols-2 gap-1">
+        <div className="h-2 w-full bg-gray-200 rounded" />
+        <div className="h-2 w-full bg-gray-200 rounded" />
+        <div className="h-2 w-full bg-gray-200 rounded" />
+        <div className="h-2 w-full bg-gray-200 rounded" />
+      </div>
+    ),
+  },
+  {
+    id: "wide-start",
+    value: "grid grid-cols-[2fr,1fr]",
+    label: "Wide Start",
+    preview: (
+      <div className="w-full grid grid-cols-[2fr,1fr] gap-1">
+        <div className="h-2 w-full bg-gray-200 rounded" />
+        <div className="h-2 w-full bg-gray-200 rounded" />
+        <div className="h-2 w-full bg-gray-200 rounded" />
+        <div className="h-2 w-full bg-gray-200 rounded" />
+      </div>
+    ),
+  },
+  {
+    id: "wide-end",
+    value: "grid grid-cols-[1fr,2fr]",
+    label: "Wide End",
+    preview: (
+      <div className="w-full grid grid-cols-[1fr,2fr] gap-1">
+        <div className="h-2 w-full bg-gray-200 rounded" />
+        <div className="h-2 w-full bg-gray-200 rounded" />
+        <div className="h-2 w-full bg-gray-200 rounded" />
+        <div className="h-2 w-full bg-gray-200 rounded" />
+      </div>
+    ),
+  },
+] as const;
+
+interface LayoutOptionProps {
+  option: (typeof LAYOUT_OPTIONS)[number];
+  isSelected: boolean;
+  questionId: string;
+}
+
+function LayoutOptionCard({
+  option,
+  isSelected,
+  questionId,
+}: LayoutOptionProps) {
+  const optionId = `${questionId}-${option.id}`;
+  return (
+    <div className="space-y-2">
+      <RadioGroupItem
+        value={option.value}
+        id={optionId}
+        className="peer sr-only"
+      />
+      <Label
+        htmlFor={optionId}
+        className={cn(
+          "flex flex-col items-center justify-between rounded-md border-2 border-muted bg-white p-4 hover:bg-gray-50",
+          "peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary",
+          isSelected && "border-primary",
+        )}
+      >
+        {option.preview}
+        <span className="block w-full text-center text-sm font-medium mt-2">
+          {option.label}
+        </span>
+      </Label>
+    </div>
+  );
+}
+
 export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState<"edit" | "preview">("edit");
@@ -866,14 +962,15 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
                 </CardContent>
               </Card>
 
-              <Card>
-                <CardHeader className="flex flex-row items-center justify-between border-b">
+              <Card className="border-none bg-transparent shadow-none">
+                <CardHeader className="flex flex-row items-center justify-between px-0 py-2">
                   <div>
-                    <CardTitle>Questions</CardTitle>
-                    <p className="text-sm text-gray-500 mt-1">
-                      {questionnaire.questions?.length || 0} question
-                      {questionnaire.questions?.length !== 1 ? "s" : ""}
-                    </p>
+                    <CardTitle>
+                      <p className="text-sm text-gray-700 font-medium mt-1">
+                        {questionnaire.questions?.length || 0} Question
+                        {questionnaire.questions?.length !== 1 ? "s" : ""}
+                      </p>
+                    </CardTitle>
                   </div>
                   <Button
                     variant="outline"
@@ -899,18 +996,17 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
                     Add Question
                   </Button>
                 </CardHeader>
-                <CardContent className="p-6">
+                <CardContent className="p-0">
                   <div className="space-y-6">
                     {questionnaire.questions.map((question, index) => (
                       <div
                         key={question.id}
                         id={`question-${question.id}`}
-                        className="relative"
+                        className="relative bg-white rounded-lg shadow-md"
                       >
-                        <div className="absolute -left-4 top-4 font-medium text-gray-500">
-                          {index + 1}.
-                        </div>
+                        <div className="absolute -left-4 top-4 font-medium text-gray-500"></div>
                         <QuestionEditor
+                          index={index}
                           key={question.id}
                           question={question}
                           onChange={(updatedQuestion) => {
@@ -1019,6 +1115,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
 }
 
 interface QuestionEditorProps {
+  index: number;
   question: Question;
   onChange: (updated: Question) => void;
   onDelete: () => void;
@@ -1044,6 +1141,7 @@ function QuestionEditor({
   onMoveDown,
   isFirst,
   isLast,
+  index,
 }: QuestionEditorProps) {
   const {
     text,
@@ -1065,6 +1163,10 @@ function QuestionEditor({
     queryFn: query(valuesetApi.list),
   });
 
+  useEffect(() => {
+    console.log("styling_metadata", question.styling_metadata);
+  }, [question.styling_metadata]);
+
   const valuesets = response?.results || [];
 
   const updateField = <K extends keyof Question>(
@@ -1095,31 +1197,30 @@ function QuestionEditor({
     <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" : ""
-      }`}
+      className={`rounded-lg p-1 bg-card text-card-foreground`}
     >
-      <div className="flex items-center p-4">
+      <div className={cn("flex items-center p-2", isExpanded && "bg-gray-50")}>
         <CollapsibleTrigger className="flex-1 flex items-center">
           <div className="flex-1">
-            <div className="font-medium text-left">
-              {text || "Untitled Question"}
+            <div className="font-semibold text-left">
+              {index + 1}. {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>}
+              {required && <Badge variant="secondary">Required</Badge>}
+              {repeats && <Badge variant="secondary">Repeatable</Badge>}
               {type === "group" && questions && questions.length > 0 && (
-                <Badge variant="outline">
+                <Badge variant="secondary">
                   {questions.length} sub-questions
                 </Badge>
               )}
             </div>
           </div>
-          <CareIcon
-            icon={isExpanded ? "l-angle-up" : "l-angle-down"}
-            className="h-4 w-4 text-gray-500"
-          />
+          {isExpanded ? (
+            <ChevronsDownUp className="h-4 w-4 text-gray-500" />
+          ) : (
+            <ChevronsUpDown className="h-4 w-4 text-gray-500" />
+          )}
         </CollapsibleTrigger>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -1166,7 +1267,7 @@ function QuestionEditor({
       </div>
 
       <CollapsibleContent>
-        <div className="p-4 pt-0 space-y-4">
+        <div className="p-2 pt-0 space-y-4 mt-2">
           <div className="flex gap-4">
             <div className="flex-1">
               <Label>Question Text</Label>
@@ -1365,34 +1466,45 @@ function QuestionEditor({
             </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"
-              />
+          {type === "group" && (
+            <div className="space-y-4">
+              <div className="border rounded-lg bg-gray-100 p-4">
+                <h3 className="text-sm font-medium mb-2">
+                  Group Layout Options
+                </h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  Choose the layout style that best fits your sub-questions from
+                  the available options.
+                </p>
+                <RadioGroup
+                  value={
+                    question.styling_metadata?.containerClasses ||
+                    LAYOUT_OPTIONS[0].value
+                  }
+                  onValueChange={(val) => {
+                    updateField("styling_metadata", {
+                      ...question.styling_metadata,
+                      containerClasses: val,
+                    });
+                  }}
+                  className="grid grid-cols-4 gap-4"
+                >
+                  {LAYOUT_OPTIONS.map((option) => {
+                    const currentLayout =
+                      question.styling_metadata?.containerClasses;
+                    return (
+                      <LayoutOptionCard
+                        key={option.id}
+                        option={option}
+                        isSelected={currentLayout === option.value}
+                        questionId={getQuestionPath()}
+                      />
+                    );
+                  })}
+                </RadioGroup>
+              </div>
             </div>
-          </div>
+          )}
 
           {type === "choice" && (
             <div className="space-y-4">
@@ -1533,12 +1645,17 @@ function QuestionEditor({
           )}
 
           {type === "group" && (
-            <div>
+            <div className="bg-gray-100 rounded-lg p-1">
               <div className="flex items-center justify-between mb-2">
-                <Label>Sub-Questions</Label>
+                <Label className="text-gray-950 font-semibold">
+                  {question.questions?.length || 0} Sub-Question
+                  {question.questions?.length !== 1 ? "s " : " "}
+                  (for the "{text}" Group)
+                </Label>
                 <Button
-                  variant="outline"
+                  variant="ghost"
                   size="sm"
+                  className="underline text-gray-950 font-semibold"
                   onClick={() => {
                     const newQuestion: Question = {
                       id: crypto.randomUUID(),
@@ -1556,55 +1673,62 @@ function QuestionEditor({
                     );
                   }}
                 >
-                  <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
+                  <CareIcon icon="l-plus" className="h-4 w-4" />
                   Add Sub-Question
                 </Button>
               </div>
               <div className="space-y-4">
                 {(questions || []).map((subQuestion, idx) => (
-                  <QuestionEditor
+                  <div
                     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);
-                    }}
-                    isExpanded={expandedSubQuestions.has(subQuestion.id)}
-                    onToggleExpand={() =>
-                      toggleSubQuestionExpanded(subQuestion.id)
-                    }
-                    depth={depth + 1}
-                    parentId={getQuestionPath()}
-                    onMoveUp={() => {
-                      if (idx > 0) {
+                    id={`question-${subQuestion.id}`}
+                    className="relative bg-white rounded-lg shadow-md"
+                  >
+                    <QuestionEditor
+                      index={idx}
+                      key={subQuestion.id}
+                      question={subQuestion}
+                      onChange={(updated) => {
                         const newQuestions = [...(questions || [])];
-                        [newQuestions[idx - 1], newQuestions[idx]] = [
-                          newQuestions[idx],
-                          newQuestions[idx - 1],
-                        ];
+                        newQuestions[idx] = updated;
                         updateField("questions", newQuestions);
-                      }
-                    }}
-                    onMoveDown={() => {
-                      if (idx < (questions?.length || 0) - 1) {
-                        const newQuestions = [...(questions || [])];
-                        [newQuestions[idx], newQuestions[idx + 1]] = [
-                          newQuestions[idx + 1],
-                          newQuestions[idx],
-                        ];
+                      }}
+                      onDelete={() => {
+                        const newQuestions = questions?.filter(
+                          (_, i) => i !== idx,
+                        );
                         updateField("questions", newQuestions);
+                      }}
+                      isExpanded={expandedSubQuestions.has(subQuestion.id)}
+                      onToggleExpand={() =>
+                        toggleSubQuestionExpanded(subQuestion.id)
                       }
-                    }}
-                    isFirst={idx === 0}
-                    isLast={idx === (questions?.length || 0) - 1}
-                  />
+                      depth={depth + 1}
+                      parentId={getQuestionPath()}
+                      onMoveUp={() => {
+                        if (idx > 0) {
+                          const newQuestions = [...(questions || [])];
+                          [newQuestions[idx - 1], newQuestions[idx]] = [
+                            newQuestions[idx],
+                            newQuestions[idx - 1],
+                          ];
+                          updateField("questions", newQuestions);
+                        }
+                      }}
+                      onMoveDown={() => {
+                        if (idx < (questions?.length || 0) - 1) {
+                          const newQuestions = [...(questions || [])];
+                          [newQuestions[idx], newQuestions[idx + 1]] = [
+                            newQuestions[idx + 1],
+                            newQuestions[idx],
+                          ];
+                          updateField("questions", newQuestions);
+                        }
+                      }}
+                      isFirst={idx === 0}
+                      isLast={idx === (questions?.length || 0) - 1}
+                    />
+                  </div>
                 ))}
               </div>
             </div>
diff --git a/src/components/Questionnaire/QuestionnaireList.tsx b/src/components/Questionnaire/QuestionnaireList.tsx
index 3deaf8c2c64..2b20c4238d7 100644
--- a/src/components/Questionnaire/QuestionnaireList.tsx
+++ b/src/components/Questionnaire/QuestionnaireList.tsx
@@ -61,8 +61,8 @@ export function QuestionnaireList() {
           <p className="text-gray-600">{t("manage_and_view_questionnaires")}</p>
         </div>
 
-        <div className="flex items-center justify-between mt-8">
-          <div className="flex md:flex-row flex-col items-center gap-4">
+        <div className="flex flex-col md:flex-row items-center justify-between mt-8 gap-2">
+          <div className="flex lg:flex-row flex-col items-center gap-4">
             <Tabs
               defaultValue="active"
               value={qParams.status || "active"}
@@ -95,7 +95,7 @@ export function QuestionnaireList() {
             </div>
           </div>
 
-          <div className="flex items-center self-start">
+          <div className="flex items-center md:self-start">
             <Button onClick={() => navigate("/admin/questionnaire/create")}>
               <PlusIcon className="w-4 h-4" />
               {t("create_questionnaire")}
@@ -104,8 +104,8 @@ export function QuestionnaireList() {
         </div>
       </div>
 
-      <div className="overflow-hidden rounded-lg bg-white shadow">
-        <table className="min-w-full divide-y divide-gray-200">
+      <div className="overflow-hidden rounded-lg bg-white shadow overflow-x-auto">
+        <table className="min-w-full divide-y divide-gray-200 ">
           <thead className="bg-gray-100  text-gray-700">
             <tr>
               <th className="px-6 py-3 text-left text-xs font-medium tracking-wider ">

From 2f9d9569235407ac33eca68b076c4bcfd5c1f556 Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Tue, 18 Feb 2025 19:52:53 +0530
Subject: [PATCH 06/12] Fix merge conflicts

---
 .../Questionnaire/QuestionnaireList.tsx       | 147 +++++++++++++-----
 1 file changed, 108 insertions(+), 39 deletions(-)

diff --git a/src/components/Questionnaire/QuestionnaireList.tsx b/src/components/Questionnaire/QuestionnaireList.tsx
index cb6c29040eb..2b20c4238d7 100644
--- a/src/components/Questionnaire/QuestionnaireList.tsx
+++ b/src/components/Questionnaire/QuestionnaireList.tsx
@@ -1,65 +1,120 @@
 import { useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
+import {
+  ArchiveIcon,
+  EyeIcon,
+  FileCheckIcon,
+  NotepadTextDashedIcon,
+  PlusIcon,
+  Search,
+} from "lucide-react";
 import { useNavigate } from "raviger";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Loading from "@/components/Common/Loading";
 
 import useFilters from "@/hooks/useFilters";
 
 import query from "@/Utils/request/query";
-import { QuestionnaireDetail } from "@/types/questionnaire/questionnaire";
+import {
+  QuestionStatus,
+  QuestionnaireDetail,
+} from "@/types/questionnaire/questionnaire";
 import questionnaireApi from "@/types/questionnaire/questionnaireApi";
 
 export function QuestionnaireList() {
-  const { qParams, Pagination, resultsPerPage } = useFilters({
+  const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
     limit: 15,
   });
+
   const navigate = useNavigate();
-  const { data: response, isLoading } = useQuery({
+
+  const { data: response } = useQuery({
     queryKey: ["questionnaires", qParams],
     queryFn: query(questionnaireApi.list, {
       queryParams: {
         limit: resultsPerPage,
         offset: ((qParams.page ?? 1) - 1) * resultsPerPage,
+        title: qParams.title || undefined,
+        status: qParams.status || "active",
       },
     }),
   });
 
-  if (isLoading) {
-    return <Loading />;
-  }
-
   const questionnaireList = response?.results || [];
 
   return (
     <div className="container mx-auto px-4 py-6">
-      <div className="mb-6 flex items-center justify-between">
-        <div>
+      <div className="mb-4 ">
+        <div className="mb-2">
           <h1 className="text-2xl font-bold">{t("questionnaires")}</h1>
           <p className="text-gray-600">{t("manage_and_view_questionnaires")}</p>
         </div>
-        <Button onClick={() => navigate("/admin/questionnaire/create")}>
-          {t("create_new")}
-        </Button>
+
+        <div className="flex flex-col md:flex-row items-center justify-between mt-8 gap-2">
+          <div className="flex lg:flex-row flex-col items-center gap-4">
+            <Tabs
+              defaultValue="active"
+              value={qParams.status || "active"}
+              onValueChange={(value) => updateQuery({ status: value })}
+              className="w-full"
+            >
+              <TabsList>
+                <TabsTrigger value="active">
+                  <FileCheckIcon className="w-4 h-4 mr-2 " />
+                  {t("active")}
+                </TabsTrigger>
+                <TabsTrigger value="draft">
+                  <NotepadTextDashedIcon className="w-4 h-4 mr-2" />
+                  {t("draft")}
+                </TabsTrigger>
+                <TabsTrigger value="retired">
+                  <ArchiveIcon className="w-4 h-4 mr-2" />
+                  {t("retired")}
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <div className="relative md:min-w-80 w-full">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
+              <Input
+                placeholder={t("search_questionnaires")}
+                className="pl-10"
+                value={qParams.title || ""}
+                onChange={(e) => updateQuery({ title: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center md:self-start">
+            <Button onClick={() => navigate("/admin/questionnaire/create")}>
+              <PlusIcon className="w-4 h-4" />
+              {t("create_questionnaire")}
+            </Button>
+          </div>
+        </div>
       </div>
 
-      <div className="overflow-hidden rounded-lg bg-white shadow">
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
+      <div className="overflow-hidden rounded-lg bg-white shadow overflow-x-auto">
+        <table className="min-w-full divide-y divide-gray-200 ">
+          <thead className="bg-gray-100  text-gray-700">
             <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+              <th className="px-6 py-3 text-left text-xs font-medium tracking-wider ">
                 {t("title")}
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+              <th className="px-6 py-3 text-left text-xs font-medium tracking-wider ">
                 {t("description")}
               </th>
-              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
-                {t("status")}
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+              <th className="px-6 py-3 text-left text-xs font-medium tracking-wider ">
                 {t("slug")}
               </th>
             </tr>
@@ -73,29 +128,43 @@ export function QuestionnaireList() {
                 }
                 className="cursor-pointer hover:bg-gray-50"
               >
-                <td className="whitespace-nowrap px-6 py-4">
-                  <div className="text-sm font-medium text-gray-900">
+                <td className="whitespace-nowrap px-6 py-2">
+                  <div className="text-sm font-semibold text-gray-950">
                     {questionnaire.title}
                   </div>
                 </td>
-                <td className="px-6 py-4">
-                  <div className="max-w-md truncate text-sm text-gray-900">
-                    {questionnaire.description}
+                <td className="px-6 py-2">
+                  <div className="flex items-center justify-between">
+                    <div className="max-w-md truncate text-sm text-gray-950">
+                      {questionnaire.description}
+                    </div>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={(e) => e.stopPropagation()}
+                          className="font-semibold shadow-gray-300 text-gray-950 border-gray-400"
+                        >
+                          <EyeIcon className="w-4 h-4 mr-2" />
+                          {t("see_details")}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-80">
+                        <div className="space-y-2">
+                          <h4 className="font-medium">{questionnaire.title}</h4>
+                          <p className="text-sm text-gray-600">
+                            {questionnaire.description}
+                          </p>
+                        </div>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <Badge
-                    className={
-                      questionnaire.status === "active"
-                        ? "bg-green-100 text-green-800 hover:bg-green-200"
-                        : ""
-                    }
-                  >
-                    {questionnaire.status}
-                  </Badge>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  {questionnaire.slug}
+                <td className="whitespace-nowrap px-2">
+                  <Label className=" text-gray-800 bg-gray-100 rounded-md px-2 py-1.5 w-fit">
+                    {questionnaire.slug}
+                  </Label>
                 </td>
               </tr>
             ))}

From b8ee52a8cb4ba6b1a4f4fe6ce94ee9d215701854 Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Tue, 18 Feb 2025 19:53:41 +0530
Subject: [PATCH 07/12] Remove unused imports

---
 src/components/Questionnaire/QuestionnaireList.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/Questionnaire/QuestionnaireList.tsx b/src/components/Questionnaire/QuestionnaireList.tsx
index 2b20c4238d7..942d8149219 100644
--- a/src/components/Questionnaire/QuestionnaireList.tsx
+++ b/src/components/Questionnaire/QuestionnaireList.tsx
@@ -10,7 +10,6 @@ import {
 } from "lucide-react";
 import { useNavigate } from "raviger";
 
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -21,15 +20,10 @@ import {
 } from "@/components/ui/popover";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
-import Loading from "@/components/Common/Loading";
-
 import useFilters from "@/hooks/useFilters";
 
 import query from "@/Utils/request/query";
-import {
-  QuestionStatus,
-  QuestionnaireDetail,
-} from "@/types/questionnaire/questionnaire";
+import { QuestionnaireDetail } from "@/types/questionnaire/questionnaire";
 import questionnaireApi from "@/types/questionnaire/questionnaireApi";
 
 export function QuestionnaireList() {

From 3391699c26cfd5bf57c7a15c79988d76c38956be Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Wed, 19 Feb 2025 17:03:19 +0530
Subject: [PATCH 08/12] Fix width

---
 src/components/Questionnaire/QuestionnaireEditor.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx
index 5c0b5a32030..0ec86bea2e8 100644
--- a/src/components/Questionnaire/QuestionnaireEditor.tsx
+++ b/src/components/Questionnaire/QuestionnaireEditor.tsx
@@ -154,7 +154,7 @@ function StatusSelector({
   onChange: (value: QuestionStatus) => void;
 }) {
   return (
-    <div className="space-y-2">
+    <div className="space-y-2 w-fit">
       <Label htmlFor="status">{t("status")}</Label>
       <RadioGroup
         value={value}
@@ -817,7 +817,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
 
         <TabsContent value="edit">
           <div className="flex flex-col md:flex-row gap-2">
-            <div className="space-y-4 max-w-sm">
+            <div className="space-y-4 md:w-60">
               <Card className="border-none bg-transparent shadow-none space-y-3 mt-2 md:block hidden">
                 <CardHeader className="p-0">
                   <CardTitle>{t("navigation")}</CardTitle>

From 0a50f3c535c903a2c088b0f8d9e7e0be819d556b Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Wed, 19 Feb 2025 17:34:04 +0530
Subject: [PATCH 09/12] Organization required, i18n

---
 public/locale/en.json                                | 1 +
 src/components/Questionnaire/QuestionnaireEditor.tsx | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index b5cf82ddde3..35a31ef6fe2 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1963,6 +1963,7 @@
   "search_medication": "Search Medication",
   "search_medications": "Search Medications",
   "search_medicine": "Search Medicine",
+  "search_organizations": "Search Organizations",
   "search_patient_page_text": "Search for existing patients using their phone number or create a new patient record",
   "search_patients": "Search Patients",
   "search_questionnaires": "Search Questionnaires",
diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx
index 0ec86bea2e8..18706c3ce7c 100644
--- a/src/components/Questionnaire/QuestionnaireEditor.tsx
+++ b/src/components/Questionnaire/QuestionnaireEditor.tsx
@@ -471,7 +471,9 @@ function QuestionnaireProperties({
         />
 
         <div className="space-y-2">
-          <Label>{t("organizations")}</Label>
+          <Label>
+            {t("organizations")} <span className="text-red-500">*</span>
+          </Label>
           <OrganizationSelector
             id={id}
             organizations={organizations}

From e52aa6ccd9a88258044e34f0b19a71c56ff0327d Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Thu, 20 Feb 2025 13:53:55 +0530
Subject: [PATCH 10/12] isPreview

---
 src/components/Questionnaire/QuestionRenderer.tsx              | 3 ++-
 src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx | 3 ++-
 .../Questionnaire/QuestionTypes/DiagnosisQuestion.tsx          | 3 ++-
 .../Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx  | 3 ++-
 .../QuestionTypes/MedicationStatementQuestion.tsx              | 3 ++-
 src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx | 3 ++-
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Questionnaire/QuestionRenderer.tsx b/src/components/Questionnaire/QuestionRenderer.tsx
index 5b3e5d41afb..4b149dfd4b6 100644
--- a/src/components/Questionnaire/QuestionRenderer.tsx
+++ b/src/components/Questionnaire/QuestionRenderer.tsx
@@ -46,6 +46,7 @@ export function QuestionRenderer({
   patientId,
 }: QuestionRendererProps) {
   const questionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
+  const isPreview = encounterId === "preview";
 
   useEffect(() => {
     if (activeGroupId && questionRefs.current[activeGroupId]) {
@@ -79,7 +80,7 @@ export function QuestionRenderer({
             updateQuestionnaireResponseCB={onResponseChange}
             errors={errors}
             clearError={clearError}
-            disabled={disabled || encounterId === "preview"}
+            disabled={disabled || isPreview}
             activeGroupId={activeGroupId}
             patientId={patientId}
           />
diff --git a/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx b/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx
index 52a53f25487..da80c8dfec0 100644
--- a/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx
@@ -109,6 +109,7 @@ export function AllergyQuestion({
   disabled,
   patientId,
 }: AllergyQuestionProps) {
+  const isPreview = patientId === "preview";
   const allergies =
     (questionnaireResponse.values?.[0]?.value as AllergyIntoleranceRequest[]) ||
     [];
@@ -121,7 +122,7 @@ export function AllergyQuestion({
         limit: 100,
       },
     }),
-    enabled: patientId !== "preview",
+    enabled: !isPreview,
   });
 
   useEffect(() => {
diff --git a/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx b/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
index d9b507e185e..8e028c85a7e 100644
--- a/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
@@ -90,6 +90,7 @@ export function DiagnosisQuestion({
   updateQuestionnaireResponseCB,
   disabled,
 }: DiagnosisQuestionProps) {
+  const isPreview = patientId === "preview";
   const diagnoses =
     (questionnaireResponse.values?.[0]?.value as DiagnosisRequest[]) || [];
 
@@ -102,7 +103,7 @@ export function DiagnosisQuestion({
         limit: 100,
       },
     }),
-    enabled: encounterId !== "preview",
+    enabled: !isPreview,
   });
 
   useEffect(() => {
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
index eda926345ab..d2782a44300 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
@@ -88,6 +88,7 @@ export function MedicationRequestQuestion({
   patientId,
   encounterId,
 }: MedicationRequestQuestionProps) {
+  const isPreview = patientId === "preview";
   const medications =
     (questionnaireResponse.values?.[0]?.value as MedicationRequest[]) || [];
 
@@ -100,7 +101,7 @@ export function MedicationRequestQuestion({
         limit: 100,
       },
     }),
-    enabled: encounterId !== "preview",
+    enabled: !isPreview,
   });
 
   useEffect(() => {
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
index 37b412537aa..b48013beee5 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
@@ -94,6 +94,7 @@ export function MedicationStatementQuestion({
   encounterId,
 }: MedicationStatementQuestionProps) {
   const { t } = useTranslation();
+  const isPreview = patientId === "preview";
   const desktopLayout = useBreakpoints({ lg: true, default: false });
   const [expandedMedicationIndex, setExpandedMedicationIndex] = useState<
     number | null
@@ -115,7 +116,7 @@ export function MedicationStatementQuestion({
         encounter: encounterId,
       },
     }),
-    enabled: encounterId !== "preview",
+    enabled: !isPreview,
   });
 
   useEffect(() => {
diff --git a/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx b/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
index 1823591da11..d2a290129c3 100644
--- a/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
@@ -284,6 +284,7 @@ export function SymptomQuestion({
   disabled,
   encounterId,
 }: SymptomQuestionProps) {
+  const isPreview = patientId === "preview";
   const symptoms =
     (questionnaireResponse.values?.[0]?.value as SymptomRequest[]) || [];
 
@@ -296,7 +297,7 @@ export function SymptomQuestion({
         encounter: encounterId,
       },
     }),
-    enabled: encounterId !== "preview",
+    enabled: !isPreview,
   });
 
   useEffect(() => {

From 367a226f278d5b574d14c62b7bbec88bda599785 Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Thu, 20 Feb 2025 16:56:51 +0530
Subject: [PATCH 11/12] Update
 src/components/Questionnaire/QuestionnaireEditor.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/components/Questionnaire/QuestionnaireEditor.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx
index 18706c3ce7c..950ff204b3f 100644
--- a/src/components/Questionnaire/QuestionnaireEditor.tsx
+++ b/src/components/Questionnaire/QuestionnaireEditor.tsx
@@ -737,7 +737,6 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
 
   const handleSave = () => {
     if (id) {
-      console.log("Update Questionnaire", questionnaire);
       updateQuestionnaire(questionnaire);
     } else {
       createQuestionnaire({

From 70a93a2caf97014ba478eb946112157ebda76cb8 Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Fri, 21 Feb 2025 12:13:52 +0530
Subject: [PATCH 12/12] Rmoved bg-background, reverted eslint config

---
 eslint.config.mjs                                      |  4 ++--
 .../Questionnaire/CloneQuestionnaireSheet.tsx          |  2 +-
 .../ManageQuestionnaireOrganizationsSheet.tsx          |  2 +-
 .../Questionnaire/ManageQuestionnaireTagsSheet.tsx     |  6 +++---
 src/components/Questionnaire/QuestionnaireEditor.tsx   | 10 +---------
 src/components/Resource/ResourceForm.tsx               |  2 +-
 src/pages/Encounters/tabs/EncounterNotesTab.tsx        |  6 +++---
 7 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index a44c623b55d..35fd03f40b7 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -66,7 +66,7 @@ export default [
     rules: {
       ...tseslint.configs.recommended.rules,
       "@typescript-eslint/no-unused-vars": [
-        "warn",
+        "error",
         {
           argsIgnorePattern: "^_",
           varsIgnorePattern: "^_",
@@ -74,7 +74,7 @@ export default [
         },
       ],
       "@typescript-eslint/no-unused-expressions": [
-        "warn",
+        "error",
         { allowShortCircuit: true, allowTernary: true },
       ],
       "@typescript-eslint/no-explicit-any": "warn",
diff --git a/src/components/Questionnaire/CloneQuestionnaireSheet.tsx b/src/components/Questionnaire/CloneQuestionnaireSheet.tsx
index 3d8df981f99..2f53e2a9dfb 100644
--- a/src/components/Questionnaire/CloneQuestionnaireSheet.tsx
+++ b/src/components/Questionnaire/CloneQuestionnaireSheet.tsx
@@ -197,7 +197,7 @@ export default function CloneQuestionnaireSheet({
           </div>
         </div>
 
-        <SheetFooter className="absolute bottom-0 left-0 right-0 p-4 border-t bg-background">
+        <SheetFooter className="absolute bottom-0 left-0 right-0 p-4 border-t">
           <div className="flex w-full justify-end gap-4">
             <Button
               variant="outline"
diff --git a/src/components/Questionnaire/ManageQuestionnaireOrganizationsSheet.tsx b/src/components/Questionnaire/ManageQuestionnaireOrganizationsSheet.tsx
index 8d405641b04..d16dff7b547 100644
--- a/src/components/Questionnaire/ManageQuestionnaireOrganizationsSheet.tsx
+++ b/src/components/Questionnaire/ManageQuestionnaireOrganizationsSheet.tsx
@@ -202,7 +202,7 @@ export default function ManageQuestionnaireOrganizationsSheet({
           </div>
         </div>
 
-        <SheetFooter className="absolute bottom-0 left-0 right-0 p-4 border-t bg-background">
+        <SheetFooter className="absolute bottom-0 left-0 right-0 p-4 border-t">
           <div className="flex w-full justify-end gap-4">
             <Button
               variant="outline"
diff --git a/src/components/Questionnaire/ManageQuestionnaireTagsSheet.tsx b/src/components/Questionnaire/ManageQuestionnaireTagsSheet.tsx
index 9980b5a5881..6390464000d 100644
--- a/src/components/Questionnaire/ManageQuestionnaireTagsSheet.tsx
+++ b/src/components/Questionnaire/ManageQuestionnaireTagsSheet.tsx
@@ -23,7 +23,7 @@ import {
 } from "@/components/ui/command";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Sheet,
   SheetContent,
@@ -280,8 +280,8 @@ export default function ManageQuestionnaireTagsSheet({
           </ScrollArea>
         </div>
 
-        <SheetFooter className=" bottom-0 left-0 right-0 p-4 border-t bg-background">
-          <div className="flex w-full justify-end gap-4">
+        <SheetFooter className=" bottom-0 left-0 right-0 p-4 border-t">
+          <div className="flex w-full justify-end gap-4 bg-gray-100">
             <Button
               variant="outline"
               onClick={() => {
diff --git a/src/components/Questionnaire/QuestionnaireEditor.tsx b/src/components/Questionnaire/QuestionnaireEditor.tsx
index 950ff204b3f..2a6421ffb77 100644
--- a/src/components/Questionnaire/QuestionnaireEditor.tsx
+++ b/src/components/Questionnaire/QuestionnaireEditor.tsx
@@ -64,7 +64,6 @@ import query from "@/Utils/request/query";
 import organizationApi from "@/types/organization/organizationApi";
 import {
   EnableWhen,
-  ObservationType,
   Question,
   QuestionType,
   SUPPORTED_QUESTION_TYPES,
@@ -106,11 +105,6 @@ interface Organization {
   description?: string;
 }
 
-interface StylingMetadata {
-  classes?: string;
-  containerClasses?: string;
-}
-
 interface OrganizationResponse {
   results: Organization[];
 }
@@ -451,7 +445,6 @@ function QuestionnaireProperties({
   id,
   organizations,
   organizationSelection,
-  tags,
   tagSelection,
 }: QuestionnairePropertiesProps) {
   return (
@@ -613,7 +606,6 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
   const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
   const [orgSearchQuery, setOrgSearchQuery] = useState("");
   const [tagSearchQuery, setTagSearchQuery] = useState("");
-  const [observation, setObservation] = useState<ObservationType | undefined>();
 
   const {
     data: initialQuestionnaire,
@@ -627,7 +619,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
     enabled: !!id,
   });
 
-  const { data: organizations, isLoading: isLoadingOrganizations } = useQuery({
+  const { data: organizations } = useQuery({
     queryKey: ["questionnaire", id, "organizations"],
     queryFn: query(questionnaireApi.getOrganizations, {
       pathParams: { id: id! },
diff --git a/src/components/Resource/ResourceForm.tsx b/src/components/Resource/ResourceForm.tsx
index fb93e88e316..bc4981b2ab9 100644
--- a/src/components/Resource/ResourceForm.tsx
+++ b/src/components/Resource/ResourceForm.tsx
@@ -543,7 +543,7 @@ export default function ResourceForm({ facilityId, id }: ResourceProps) {
                   </div>
                 </div>
 
-                <div className="sticky bottom-0 flex justify-end gap-4 border-t bg-background pt-4">
+                <div className="sticky bottom-0 flex justify-end gap-4 border-t pt-4">
                   <Button
                     type="button"
                     variant="outline"
diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index 058606392e4..f3825c2cfe0 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -472,7 +472,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
   return (
     <div className="flex h-[calc(100vh-12rem)]">
       {/* Desktop Sidebar */}
-      <div className="hidden lg:flex lg:w-80 lg:flex-col lg:border-r bg-background">
+      <div className="hidden lg:flex lg:w-80 lg:flex-col lg:border-r">
         <div className="p-4 border-b">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
@@ -575,7 +575,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
       <div className="flex-1 min-w-0">
         <div className="flex flex-col h-full pb-[60px] lg:pb-0">
           {/* Header */}
-          <div className="p-4 border-b bg-background sticky top-0 z-10">
+          <div className="p-4 border-b sticky top-0 z-10">
             {selectedThread ? (
               <div className="flex items-center gap-3">
                 <h2 className="text-base font-medium truncate flex-1">
@@ -653,7 +653,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
                     </div>
                   </ScrollArea>
                   {/* Message Input */}
-                  <div className="border-t bg-background p-4 sticky bottom-0">
+                  <div className="border-t p-4 sticky bottom-0">
                     <form onSubmit={handleSendMessage}>
                       <div className="flex gap-2">
                         <Textarea