Merge branch 'develop' of https://github.com/ohcnetwork/care_fe into …

…location-view-for-patients

.github/ISSUE_TEMPLATE/bug_report.md

@@ -38,3 +38,22 @@ If applicable, add screenshots to help explain your problem.
 
 **Additional context**
 Add any other context about the problem here.
+
+---
+
+### 🚨 DO NOT EDIT BELOW THIS LINE 🚨
+
+### Instructions for Requesting Assignment:
+
+To request assignment, please clearly outline your solution and timeline by commenting on the issue using the format below:
+
+**Describe your solution clearly:**
+Provide a detailed explanation of your proposed solution, including your approach, key implementation steps, and relevant examples or references. Mention any dependencies, assumptions, or risks you foresee that might affect your timeline or implementation.
+
+**Expected Timeline:**
+- End date: [Expected submission date of a completed Pull Request]
+
+**Additional Context:**
+Include any other relevant context, links, screenshots, or resources that support your proposed solution.
+
+> 🚨 Your assignment may be unassigned if there is no activity or progress within the stated timeline unless communicated clearly and agreed upon.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -17,3 +17,21 @@ A clear and concise description of any alternative solutions or features you've
 
 **Additional context**
 Add any other context or screenshots about the feature request here.
+
+---
+### 🚨 DO NOT EDIT BELOW THIS LINE 🚨
+
+### Instructions for Requesting Assignment:
+
+To request assignment, please clearly outline your solution and timeline by commenting on the issue using the format below:
+
+**Describe your solution clearly:**
+Provide a detailed explanation of your proposed solution, including your approach, key implementation steps, and relevant examples or references. Mention any dependencies, assumptions, or risks you foresee that might affect your timeline or implementation.
+
+**Expected Timeline:**
+- End date: [Expected submission date of a completed Pull Request]
+
+**Additional Context:**
+Include any other relevant context, links, screenshots, or resources that support your proposed solution.
+
+> 🚨 Your assignment may be unassigned if there is no activity or progress within the stated timeline unless communicated clearly and agreed upon.

public/locale/en.json

@@ -429,7 +429,10 @@
   "associate": "Associate",
   "associate_location": "Associate Location",
   "associate_location_description": "Select a location to associate with this device",
+  "associated_by": "Associated by",
   "associating": "Associating...",
+  "association_end_date": "Association end date",
+  "association_start_date": "Association start date",
   "at_least_one_department_is_required": "At least one department is required",
   "at_time": "at <strong>{{time}}</strong>",
   "atypical_presentation_details": "Atypical presentation details",

src/Routers/AppRouter.tsx

@@ -15,18 +15,18 @@ import { usePluginRoutes } from "@/hooks/useCareApps";
 
 import ConsultationRoutes from "@/Routers/routes/ConsultationRoutes";
 import FacilityRoutes from "@/Routers/routes/FacilityRoutes";
+import OrganizationRoutes from "@/Routers/routes/OrganizationRoutes";
 import PatientRoutes from "@/Routers/routes/PatientRoutes";
 import ResourceRoutes from "@/Routers/routes/ResourceRoutes";
 import ScheduleRoutes from "@/Routers/routes/ScheduleRoutes";
 import UserRoutes from "@/Routers/routes/UserRoutes";
+import AdminRoutes from "@/Routers/routes/adminRoutes";
 import { PermissionProvider } from "@/context/PermissionContext";
 import { PlugConfigEdit } from "@/pages/Apps/PlugConfigEdit";
 import { PlugConfigList } from "@/pages/Apps/PlugConfigList";
 import UserDashboard from "@/pages/UserDashboard";
 
 import LocationRoutes from "./routes/LocationRoutes";
-import OrganizationRoutes from "./routes/OrganizationRoutes";
-import AdminRoutes from "./routes/adminRoutes";
 
 // List of paths where the sidebar should be hidden
 const PATHS_WITHOUT_SIDEBAR = ["/", "/session-expired"];

src/components/Medicine/MedicationRequestTable/index.tsx

@@ -194,7 +194,7 @@ export default function MedicationRequestTable({
               ) : searchQuery && !displayedMedications.length ? (
                 <EmptyState searching searchQuery={searchQuery} />
               ) : (
-                <ScrollArea className="h-[calc(100vh-16rem)]">
+                <ScrollArea className="h-fit">
                   <div className="min-w-[800px]">
                     <div className="p-2">
                       <MedicationsTable medications={displayedMedications} />

src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx

@@ -144,6 +144,7 @@ export const QuestionGroup = memo(function QuestionGroup({
       >
         {question.questions?.map((subQuestion) => (
           <QuestionGroup
+            encounterId={encounterId}
             facilityId={facilityId}
             key={subQuestion.id}
             question={subQuestion}

src/components/Questionnaire/QuestionnaireList.tsx

@@ -10,24 +10,220 @@ import {
 } from "lucide-react";
 import { useNavigate } from "raviger";
 
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 import useFilters from "@/hooks/useFilters";
 
 import query from "@/Utils/request/query";
 import { QuestionnaireDetail } from "@/types/questionnaire/questionnaire";
 import questionnaireApi from "@/types/questionnaire/questionnaireApi";
 
+const RenderCard = ({
+  questionnaireList,
+}: {
+  questionnaireList: QuestionnaireDetail[];
+}) => {
+  const navigate = useNavigate();
+  return (
+    <div className="xl:hidden space-y-4">
+      {questionnaireList?.length > 0 ? (
+        questionnaireList.map((questionnaire: QuestionnaireDetail) => (
+          <Card
+            key={questionnaire.id}
+            className="overflow-hidden bg-white rounded-lg cursor-pointer transition-shadow transform hover:shadow-lg"
+            onClick={() =>
+              navigate(`/admin/questionnaire/${questionnaire.slug}/edit`)
+            }
+          >
+            <CardContent className="p-6 relative flex flex-col">
+              <div className="absolute top-4 right-4">
+                <Badge
+                  className={
+                    {
+                      active: "bg-green-100 text-green-800 hover:bg-green-200",
+                      draft:
+                        "bg-yellow-100 text-yellow-800 hover:bg-yellow-200",
+                      retired: "bg-red-100 text-red-800 hover:bg-red-200",
+                    }[questionnaire.status]
+                  }
+                >
+                  {t(questionnaire.status)}
+                </Badge>
+              </div>
+
+              <div className="mb-4 border-b pb-2">
+                <h3 className="text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                  {t("title")}
+                </h3>
+                {questionnaire.title && questionnaire.title.length > 20 ? (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger className="truncate">
+                        <p className="mt-2 text-xl text-left font-bold text-gray-900 truncate">
+                          {questionnaire.title}
+                        </p>
+                      </TooltipTrigger>
+                      <TooltipContent className="bg-black text-white z-40">
+                        {questionnaire.title}
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                ) : (
+                  <p className="mt-2 text-xl text-left font-bold text-gray-900 truncate">
+                    {questionnaire.title}
+                  </p>
+                )}
+              </div>
+
+              <div className="mb-4">
+                <h3 className="text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                  {t("slug")}
+                </h3>
+                <p className="text-sm text-gray-900 truncate">
+                  {questionnaire.slug}
+                </p>
+              </div>
+
+              <div className="mb-4 flex-1">
+                <h3 className="text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+                  {t("description")}
+                </h3>
+                <p className="text-sm text-gray-900 line-clamp-2">
+                  {questionnaire.description}
+                </p>
+              </div>
+
+              <div className="mt-4 flex justify-end">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    navigate(`/admin/questionnaire/${questionnaire.slug}/edit`);
+                  }}
+                  className="font-semibold shadow-gray-300 text-gray-950 border-gray-400"
+                >
+                  <EyeIcon className="w-4 h-4 mr-1" />
+                  {t("View")}
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))
+      ) : (
+        <div className="py-6 text-center text-gray-500">
+          {t("no_questionnaires_found")}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const RenderTable = ({
+  questionnaireList,
+}: {
+  questionnaireList: QuestionnaireDetail[];
+}) => {
+  const navigate = useNavigate();
+  return (
+    <div className="hidden xl:block overflow-hidden rounded-lg bg-white shadow overflow-x-auto">
+      <Table className="min-w-full divide-y divide-gray-200">
+        <TableHeader className="bg-gray-100 text-gray-700">
+          <TableRow>
+            <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
+              {t("title")}
+            </TableHead>
+            <TableHead className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
+              {t("description")}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody className="divide-y divide-gray-200 bg-white">
+          {questionnaireList?.length > 0 ? (
+            questionnaireList.map((questionnaire: QuestionnaireDetail) => (
+              <TableRow
+                key={questionnaire.id}
+                className="cursor-pointer hover:bg-gray-50"
+                onClick={() =>
+                  navigate(`/admin/questionnaire/${questionnaire.slug}/edit`)
+                }
+              >
+                <TableCell className="px-6 py-2">
+                  {questionnaire.title && questionnaire.title.length > 20 ? (
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <span className="text-sm text-left font-semibold text-gray-950 truncate">
+                            {questionnaire.title}
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent className="bg-black text-white z-40">
+                          {questionnaire.title}
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  ) : (
+                    <span className="text-sm text-left font-semibold text-gray-950 truncate">
+                      {questionnaire.title}
+                    </span>
+                  )}
+                </TableCell>
+                <TableCell className="px-6 py-2">
+                  <div className="flex items-center justify-between space-x-4">
+                    <div className="truncate text-sm text-gray-900 break-words whitespace-normal">
+                      {questionnaire.description}
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="font-semibold shadow-gray-300 text-gray-950 border-gray-400"
+                    >
+                      <EyeIcon className="w-4 h-4 mr-0" />
+                      {t("View")}
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={3} className="text-center py-4">
+                {t("no_questionnaires_found")}
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
 export function QuestionnaireList() {
+  const navigate = useNavigate();
+
   const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
     limit: 15,
     disableCache: true,
   });
 
-  const navigate = useNavigate();
-
   const { data: response } = useQuery({
     queryKey: ["questionnaires", qParams],
     queryFn: query(questionnaireApi.list, {
@@ -44,7 +240,7 @@ export function QuestionnaireList() {
 
   return (
     <div className="container mx-auto px-4 py-6">
-      <div className="mb-4 ">
+      <div className="mb-4">
         <div className="mb-2">
           <h1 className="text-2xl font-bold">{t("questionnaire_other")}</h1>
           <p className="text-gray-600">{t("manage_and_view_questionnaires")}</p>
@@ -93,52 +289,8 @@ export function QuestionnaireList() {
         </div>
       </div>
 
-      <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 ">
-                {t("title")}
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium tracking-wider ">
-                {t("description")}
-              </th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-gray-200 bg-white">
-            {questionnaireList.map((questionnaire: QuestionnaireDetail) => (
-              <tr
-                key={questionnaire.id}
-                onClick={() =>
-                  navigate(`/admin/questionnaire/${questionnaire.slug}/edit`)
-                }
-                className="cursor-pointer hover:bg-gray-50"
-              >
-                <td className="px-6 py-2">
-                  <div className="text-sm font-semibold text-gray-950">
-                    {questionnaire.title}
-                  </div>
-                </td>
-                <td className="px-6 py-2">
-                  <div className="flex items-center justify-between space-x-4">
-                    <div className="w-full text-sm text-gray-950">
-                      {questionnaire.description}
-                    </div>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="font-semibold shadow-gray-300 text-gray-950 border-gray-400"
-                    >
-                      <EyeIcon className="w-4 h-4 mr-0" />
-                      {t("View")}
-                    </Button>
-                  </div>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+      <RenderTable questionnaireList={questionnaireList} />
+      <RenderCard questionnaireList={questionnaireList} />
       <Pagination totalCount={response?.count ?? 0} />
     </div>
   );