Integrated Excalidraw for drawing Files

package.json

@@ -50,6 +50,7 @@
     "sort-locales": "node ./scripts/sort-locales.js"
   },
   "dependencies": {
+    "@excalidraw/excalidraw": "^0.17.6",
     "@fontsource/figtree": "^5.1.1",
     "@headlessui/react": "^2.2.0",
     "@hookform/resolvers": "^4.0.0",
@@ -115,7 +116,7 @@
     "react-phone-number-input": "^3.4.11",
     "react-webcam": "^7.2.0",
     "recharts": "^2.15.0",
-    "sonner": "^1.7.2",
+    "sonner": "^1.7.4",
     "tailwind-merge": "^3.0.0",
     "tailwindcss-animate": "^1.0.7",
     "use-keyboard-shortcut": "^1.1.6",

public/locale/en.json

@@ -293,6 +293,7 @@
   "add_consultation_update": "Add Consultation Update",
   "add_department_team": "Add Department/Team",
   "add_details_of_patient": "Add Details of Patient",
+  "add_drawings": "Add Drawings",
   "add_exception": "Add Exception",
   "add_facility": "Add Facility",
   "add_files": "Add Files",
@@ -982,8 +983,10 @@
   "error_fetching_user_details": "Error while fetching user details: ",
   "error_fetching_users_data": "Failed to load user data. Please try again later.",
   "error_generating_discharge_summary": "Error generating discharge summary",
+  "error_in_createUpload": "Error in createUpload",
   "error_loading_questionnaire_response": "Error loading questionnaire response",
   "error_updating_encounter": "Error to Updating Encounter",
+  "error_uploading_file": "Error uploading file",
   "error_verifying_otp": "Error while verifying OTP, Please request a new OTP",
   "error_while_deleting_record": "Error while deleting record",
   "escape": "Escape",
@@ -1068,6 +1071,7 @@
   "file_name_changed_successfully": "File name changed successfully",
   "file_preview": "File Preview",
   "file_preview_not_supported": "Can't preview this file. Try downloading it.",
+  "file_success__upload_complete": "File upload complete",
   "file_type": "File Type",
   "file_upload_error": "Error uploading file",
   "file_upload_success": "File uploaded successfully",
@@ -1663,6 +1667,7 @@
   "please_check_your_messages": "Please check your messages",
   "please_confirm_password": "Please confirm your new password.",
   "please_enter_a_name": "Please enter a name!",
+  "please_enter_a_name_for_the_drawing.": "Please enter a name for the drawing.",
   "please_enter_a_reason_for_the_shift": "Please enter a reason for the shift.",
   "please_enter_a_valid_reason": "Please enter a valid reason!",
   "please_enter_confirm_password": "Please confirm your new password",

src/Routers/routes/ConsultationRoutes.tsx

@@ -1,3 +1,6 @@
+import { Suspense, lazy } from "react";
+
+import Loading from "@/components/Common/Loading";
 import QuestionnaireResponseView from "@/components/Facility/ConsultationDetails/QuestionnaireResponseView";
 import EncounterQuestionnaire from "@/components/Patient/EncounterQuestionnaire";
 import TreatmentSummary from "@/components/Patient/TreatmentSummary";
@@ -6,6 +9,11 @@ import { AppRoutes } from "@/Routers/AppRouter";
 import { EncounterShow } from "@/pages/Encounters/EncounterShow";
 import { PrintPrescription } from "@/pages/Encounters/PrintPrescription";
 
+const ExcalidrawEditor = lazy(
+  () => import("@/components/Files/ExcalidrawEditor"),
+);
+const ExcalidrawView = lazy(() => import("@/components/Files/ExcalidrawView"));
+
 const consultationRoutes: AppRoutes = {
   "/facility/:facilityId/patient/:patientId/encounter/:encounterId/prescriptions/print":
     ({ facilityId, encounterId, patientId }) => (
@@ -27,6 +35,20 @@ const consultationRoutes: AppRoutes = {
         patientId={patientId}
       />
     ),
+  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/drawings": ({
+    encounterId,
+  }) => (
+    <Suspense fallback={<Loading />}>
+      <ExcalidrawEditor associatingId={encounterId} fileType="encounter" />
+    </Suspense>
+  ),
+  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/drawings/:drawingId":
+    ({ drawingId }) => (
+      <Suspense fallback={<Loading />}>
+        <ExcalidrawView drawingId={drawingId} />
+      </Suspense>
+    ),
+
   "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire/:slug":
     ({ facilityId, encounterId, slug, patientId }) => (
       <EncounterQuestionnaire

src/Routers/routes/PatientRoutes.tsx

@@ -1,3 +1,6 @@
+import { Suspense, lazy } from "react";
+
+import Loading from "@/components/Common/Loading";
 import {
   facilityPatientTabs,
   patientTabs,
@@ -10,6 +13,11 @@ import { AppRoutes } from "@/Routers/AppRouter";
 import { EncounterList } from "@/pages/Encounters/EncounterList";
 import VerifyPatient from "@/pages/Patients/VerifyPatient";
 
+const ExcalidrawEditor = lazy(
+  () => import("@/components/Files/ExcalidrawEditor"),
+);
+const ExcalidrawView = lazy(() => import("@/components/Files/ExcalidrawView"));
+
 const PatientRoutes: AppRoutes = {
   "/facility/:facilityId/patients": ({ facilityId }) => (
     <PatientIndex facilityId={facilityId} />
@@ -44,6 +52,23 @@ const PatientRoutes: AppRoutes = {
   "/facility/:facilityId/patient/:id/update": ({ facilityId, id }) => (
     <PatientRegistration facilityId={facilityId} patientId={id} />
   ),
+  "/facility/:facilityId/patient/:id/drawings": ({ id }) => {
+    return (
+      <Suspense fallback={<Loading />}>
+        <ExcalidrawEditor associatingId={id} fileType="patient" />
+      </Suspense>
+    );
+  },
+
+  "/facility/:facilityId/patient/:patientId/drawings/:drawingId": ({
+    drawingId,
+  }) => {
+    return (
+      <Suspense fallback={<Loading />}>
+        <ExcalidrawView drawingId={drawingId} />
+      </Suspense>
+    );
+  },
 };
 
 export default PatientRoutes;

src/components/Files/ExcalidrawEditor.tsx

@@ -0,0 +1,159 @@
+import { Excalidraw } from "@excalidraw/excalidraw";
+import { type ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
+import { useMutation } from "@tanstack/react-query";
+import { t } from "i18next";
+import { navigate } from "raviger";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import { debounce } from "@/lib/utils";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+import Loading from "@/components/Common/Loading";
+import { CreateFileResponse } from "@/components/Patient/models";
+
+import routes from "@/Utils/request/api";
+import mutate from "@/Utils/request/mutate";
+
+type Props = {
+  associatingId: string;
+  fileType: string;
+};
+
+export default function ExcalidrawEditor({ associatingId, fileType }: Props) {
+  const [elements, setElements] = useState<readonly ExcalidrawElement[] | null>(
+    [],
+  );
+  const [name, setName] = useState("");
+  const [id, setId] = useState("");
+  const [isDirty, setIsDirty] = useState(false);
+
+  useEffect(() => {
+    setIsDirty(!!elements?.length);
+  }, [elements?.length]);
+
+  const { mutateAsync: markUploadComplete, error: markUploadCompleteError } =
+    useMutation({
+      mutationFn: mutate(routes.markUploadCompleted, {
+        pathParams: { id: id || "" },
+      }),
+    });
+
+  const { mutateAsync: createUpload } = useMutation({
+    mutationFn: mutate(routes.createUpload),
+    onSuccess: (response: CreateFileResponse) => {
+      setId(response.id);
+    },
+  });
+
+  const handleSave = async () => {
+    if (!name.trim()) {
+      toast.error(t("please_enter_a_name_for_the_drawing"));
+      return;
+    }
+
+    const obj = {
+      type: "excalidraw",
+      version: "2",
+      source: window.location.origin,
+      elements: elements,
+      appState: {},
+      files: {},
+    };
+
+    try {
+      const file = new File([JSON.stringify(obj)], `${name}.excalidraw`, {
+        type: "application/vnd.excalidraw",
+      });
+      let signedUrl = "";
+      let response: CreateFileResponse | null = null;
+      if (!id) {
+        response = await createUpload({
+          original_name: `${name}.excalidraw`,
+          name: name,
+          file_type: fileType,
+          file_category: "unspecified",
+          associating_id: associatingId,
+          mime_type: "text/plain",
+        });
+        signedUrl = response.signed_url;
+      }
+
+      const formData = new FormData();
+      formData.append("file", file);
+
+      const upload = await fetch(signedUrl, {
+        method: "PUT",
+        body: file,
+      });
+
+      if (!upload.ok) {
+        toast.error(t("error_uploading_file"));
+
+        return;
+      }
+      await markUploadComplete({ id: response?.id });
+      if (markUploadCompleteError) {
+        toast.error(t("file_error__mark_complete_failed"));
+
+        return;
+      } else {
+        toast.success(t("file_success__upload_complete"));
+        navigate(`drawings/${response!.id}`);
+      }
+    } catch {
+      toast.error(t("error_in_createUpload"));
+    }
+  };
+
+  if (elements === null) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-4rem)]">
+      <div className="flex flex-row justify-between items-center p-2">
+        <div className="flex flex-row items-center">
+          <div className="rounded-full bg-primary-100 px-5 py-4">
+            <CareIcon icon="l-pen" className="text-lg text-primary-500" />
+          </div>
+          <div className="m-4">
+            <Input
+              type="text"
+              value={name}
+              placeholder={t("enter_the_file_name")}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+        </div>
+        {isDirty && (
+          <Button className="ml-auto" onClick={handleSave}>
+            {t("save")}
+          </Button>
+        )}
+      </div>
+
+      <div className="flex-grow h-[calc(100vh-10rem)] -m-2">
+        <Excalidraw
+          UIOptions={{
+            canvasActions: {
+              saveAsImage: true,
+              export: false,
+              loadScene: false,
+            },
+          }}
+          initialData={{
+            appState: { theme: "light" },
+          }}
+          onChange={debounce((elements) => {
+            setElements(elements);
+          }, 100)}
+        />
+      </div>
+    </div>
+  );
+}