From 6ad89e4f4f73ae70a865cb7b61654e68bb0df994 Mon Sep 17 00:00:00 2001
From: Thanush19 <110150744+Thanush19@users.noreply.github.com>
Date: Fri, 8 Mar 2024 20:13:06 +0530
Subject: [PATCH 1/6] fix ui layout of comment-box in shift page

---
 src/Components/Shifting/CommentsSection.tsx | 98 ++++++++++++---------
 src/Components/Shifting/ShiftDetails.tsx    | 32 +++++--
 2 files changed, 82 insertions(+), 48 deletions(-)

diff --git a/src/Components/Shifting/CommentsSection.tsx b/src/Components/Shifting/CommentsSection.tsx
index 767ab402265..0da9793f0b2 100644
--- a/src/Components/Shifting/CommentsSection.tsx
+++ b/src/Components/Shifting/CommentsSection.tsx
@@ -9,10 +9,63 @@ import { IComment } from "../Resource/models";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
 import request from "../../Utils/request/request";
 
-interface CommentSectionProps {
+interface CommentProps {
   id: string;
+  comment: string;
+  created_by_object: any;
+  modified_date: string;
 }
-const CommentSection = (props: CommentSectionProps) => {
+
+const Comment = ({
+  id,
+  comment,
+  created_by_object,
+  modified_date,
+}: CommentProps) => {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+
+  const toggleExpanded = () => {
+    setExpanded(!expanded);
+  };
+
+  const truncatedComment = comment.split(" ").slice(0, 20).join(" ");
+  const remainingComment = comment.split(" ").slice(20).join(" ");
+
+  return (
+    <div
+      key={id}
+      className="mt-4 flex  flex-col rounded-lg border border-gray-500 bg-white p-4 text-gray-800"
+    >
+      <div className="flex  w-full ">
+        <p className="text-justify">
+          {expanded ? comment : truncatedComment}
+          {!expanded && remainingComment && (
+            <button onClick={toggleExpanded} className="ml-2 text-blue-500">
+              Read more
+            </button>
+          )}
+        </p>
+      </div>
+      <div className="mt-3">
+        <span className="text-xs text-gray-500">
+          {modified_date ? formatDateTime(modified_date) : "-"}
+        </span>
+      </div>
+      <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
+          {created_by_object?.first_name?.charAt(0) || t("unknown")}
+        </div>
+        <span className="pl-2 text-sm text-gray-700">
+          {created_by_object?.first_name || t("unknown")}{" "}
+          {created_by_object?.last_name}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+const CommentSection = ({ id }: { id: string }) => {
   const [commentBox, setCommentBox] = useState("");
   const { t } = useTranslation();
 
@@ -27,21 +80,17 @@ const CommentSection = (props: CommentSectionProps) => {
       return;
     }
     const { res } = await request(routes.addShiftComments, {
-      pathParams: { id: props.id },
+      pathParams: { id: id },
       body: payload,
     });
     if (res?.ok) {
       Notification.Success({ msg: t("comment_added_successfully") });
-
       setCommentBox("");
     }
   };
 
   return (
-    <PaginatedList
-      route={routes.getShiftComments}
-      pathParams={{ id: props.id }}
-    >
+    <PaginatedList route={routes.getShiftComments} pathParams={{ id: id }}>
       {(_, query) => (
         <div className="flex w-full flex-col">
           <textarea
@@ -81,36 +130,3 @@ const CommentSection = (props: CommentSectionProps) => {
 };
 
 export default CommentSection;
-
-export const Comment = ({
-  id,
-  comment,
-  created_by_object,
-  modified_date,
-}: IComment) => {
-  const { t } = useTranslation();
-  return (
-    <div
-      key={id}
-      className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800"
-    >
-      <div className="flex  w-full ">
-        <p className="text-justify">{comment}</p>
-      </div>
-      <div className="mt-3">
-        <span className="text-xs text-gray-500">
-          {modified_date ? formatDateTime(modified_date) : "-"}
-        </span>
-      </div>
-      <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
-        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
-          {created_by_object?.first_name?.charAt(0) || t("unknown")}
-        </div>
-        <span className="pl-2 text-sm text-gray-700">
-          {created_by_object?.first_name || t("unknown")}{" "}
-          {created_by_object?.last_name}
-        </span>
-      </div>
-    </div>
-  );
-};
diff --git a/src/Components/Shifting/ShiftDetails.tsx b/src/Components/Shifting/ShiftDetails.tsx
index acc3565487a..981d96d6fd3 100644
--- a/src/Components/Shifting/ShiftDetails.tsx
+++ b/src/Components/Shifting/ShiftDetails.tsx
@@ -281,7 +281,7 @@ export default function ShiftDetails(props: { id: string }) {
 
   const showFacilityCard = (facilityData: any) => {
     return (
-      <div className="mt-2 h-full rounded-lg border bg-white p-4 text-black shadow">
+      <div className="mt-2 rounded-lg border bg-white p-4 text-black shadow lg:h-[25vh] lg:w-[30vw]">
         <div>
           <span className="mr-1 font-semibold leading-relaxed">
             {t("name")}:{" "}
@@ -796,10 +796,6 @@ export default function ShiftDetails(props: { id: string }) {
                 </h4>
                 {showPatientCard(data?.patient_object)}
               </div>
-              <div className="mb-10 mr-3 md:mr-8">
-                <h4 className="mt-8">{t("comments")}</h4>
-                <CommentSection id={props.id} />
-              </div>
             </div>
 
             <div className="col-span-2">
@@ -838,12 +834,12 @@ export default function ShiftDetails(props: { id: string }) {
 
                 {showFacilityCard(data?.origin_facility_object)}
               </div>
-              {!data?.assigned_facility_external && (
+              {/* {!data?.assigned_facility_external && (
                 <div>
                   <h4 className="mt-8">{t("details_of_assigned_facility")}</h4>
                   {showFacilityCard(data?.assigned_facility_object)}
                 </div>
-              )}
+              )} */}
               {wartime_shifting && (
                 <div>
                   <h4 className="mt-8">
@@ -853,6 +849,28 @@ export default function ShiftDetails(props: { id: string }) {
                 </div>
               )}
             </div>
+            <div
+              className="Details of assigned facility flex w-full flex-col lg:flex-row
+
+"
+            >
+              <div className="Details of assigned facility">
+                {!data?.assigned_facility_external && (
+                  <div className=" w-full lg:w-[50vw]">
+                    <h4 className="mt-8">
+                      {t("details_of_assigned_facility")}
+                    </h4>
+                    {showFacilityCard(data?.assigned_facility_object)}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="">
+            <div className="mb-10 mr-3 md:mr-8">
+              <h4 className="mt-8">{t("comments")}</h4>
+              <CommentSection id={props.id} />
+            </div>
           </div>
         </Page>
       )}

From 507c26ff6f66ae6768187e82526f1eaaaf761ec8 Mon Sep 17 00:00:00 2001
From: Thanush19 <110150744+Thanush19@users.noreply.github.com>
Date: Fri, 8 Mar 2024 20:21:28 +0530
Subject: [PATCH 2/6] fix ui layout of comment-box in shift page

---
 src/Components/Shifting/CommentsSection.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Components/Shifting/CommentsSection.tsx b/src/Components/Shifting/CommentsSection.tsx
index 0da9793f0b2..c57229899d6 100644
--- a/src/Components/Shifting/CommentsSection.tsx
+++ b/src/Components/Shifting/CommentsSection.tsx
@@ -41,8 +41,13 @@ const Comment = ({
         <p className="text-justify">
           {expanded ? comment : truncatedComment}
           {!expanded && remainingComment && (
-            <button onClick={toggleExpanded} className="ml-2 text-blue-500">
-              Read more
+            <button onClick={toggleExpanded} className="ml-2 text-green-600">
+              ..... Read more
+            </button>
+          )}
+          {expanded && remainingComment && (
+            <button onClick={toggleExpanded} className="ml-2 text-green-600">
+              Read less
             </button>
           )}
         </p>

From c56ac797d81263a238e12fc5f25761a58f6fd464 Mon Sep 17 00:00:00 2001
From: Thanush19 <110150744+Thanush19@users.noreply.github.com>
Date: Mon, 11 Mar 2024 11:02:24 +0530
Subject: [PATCH 3/6] few changes in COmmentsSection.tsx

---
 src/Components/Shifting/CommentsSection.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Components/Shifting/CommentsSection.tsx b/src/Components/Shifting/CommentsSection.tsx
index c57229899d6..2b3a4a39837 100644
--- a/src/Components/Shifting/CommentsSection.tsx
+++ b/src/Components/Shifting/CommentsSection.tsx
@@ -28,7 +28,6 @@ const Comment = ({
   const toggleExpanded = () => {
     setExpanded(!expanded);
   };
-
   const truncatedComment = comment.split(" ").slice(0, 20).join(" ");
   const remainingComment = comment.split(" ").slice(20).join(" ");
 

From 48ce65759592b708b169f2995dae4a23b526d869 Mon Sep 17 00:00:00 2001
From: Thanush19 <110150744+Thanush19@users.noreply.github.com>
Date: Mon, 11 Mar 2024 14:34:27 +0530
Subject: [PATCH 4/6] staged changes

---
 src/Components/Shifting/CommentsSection.tsx | 1 +
 src/Components/Users/models.tsx             | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Shifting/CommentsSection.tsx b/src/Components/Shifting/CommentsSection.tsx
index 2b3a4a39837..9b40b446f27 100644
--- a/src/Components/Shifting/CommentsSection.tsx
+++ b/src/Components/Shifting/CommentsSection.tsx
@@ -28,6 +28,7 @@ const Comment = ({
   const toggleExpanded = () => {
     setExpanded(!expanded);
   };
+  //refrained layout of
   const truncatedComment = comment.split(" ").slice(0, 20).join(" ");
   const remainingComment = comment.split(" ").slice(20).join(" ");
 
diff --git a/src/Components/Users/models.tsx b/src/Components/Users/models.tsx
index c31901b74ad..6908671edbe 100644
--- a/src/Components/Users/models.tsx
+++ b/src/Components/Users/models.tsx
@@ -45,7 +45,6 @@ export type UserModel = UserBareMinimum & {
   doctor_medical_council_registration?: string;
   weekly_working_hours?: string | null;
 };
-
 export interface SkillObjectModel {
   id: string;
   name: string;

From a96a86be09f0381018bfdd843a72a93a2fa5ae92 Mon Sep 17 00:00:00 2001
From: Thanush19 <110150744+Thanush19@users.noreply.github.com>
Date: Wed, 13 Mar 2024 11:49:01 +0530
Subject: [PATCH 5/6] Fix: Resolved stretching issue in the comment section on
 shifting detail page

---
 src/Components/Shifting/CommentsSection.tsx | 122 ++++++++++----------
 src/Locale/en/Shifting.json                 |   4 +-
 src/Locale/kn/Shifting.json                 |   4 +
 src/Locale/kn/index.js                      |   2 +
 src/Locale/ml/Shifing.json                  |   4 +
 src/Locale/ml/index.js                      |   2 +
 src/Locale/mr/Shifting.json                 |   4 +
 src/Locale/mr/index.js                      |   2 +
 src/Locale/ta/Shifting.json                 |   4 +
 src/Locale/ta/index.js                      |   2 +
 10 files changed, 87 insertions(+), 63 deletions(-)
 create mode 100644 src/Locale/kn/Shifting.json
 create mode 100644 src/Locale/ml/Shifing.json
 create mode 100644 src/Locale/mr/Shifting.json
 create mode 100644 src/Locale/ta/Shifting.json

diff --git a/src/Components/Shifting/CommentsSection.tsx b/src/Components/Shifting/CommentsSection.tsx
index 9b40b446f27..47731be5bce 100644
--- a/src/Components/Shifting/CommentsSection.tsx
+++ b/src/Components/Shifting/CommentsSection.tsx
@@ -9,68 +9,10 @@ import { IComment } from "../Resource/models";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
 import request from "../../Utils/request/request";
 
-interface CommentProps {
+interface CommentSectionProps {
   id: string;
-  comment: string;
-  created_by_object: any;
-  modified_date: string;
 }
-
-const Comment = ({
-  id,
-  comment,
-  created_by_object,
-  modified_date,
-}: CommentProps) => {
-  const { t } = useTranslation();
-  const [expanded, setExpanded] = useState(false);
-
-  const toggleExpanded = () => {
-    setExpanded(!expanded);
-  };
-  //refrained layout of
-  const truncatedComment = comment.split(" ").slice(0, 20).join(" ");
-  const remainingComment = comment.split(" ").slice(20).join(" ");
-
-  return (
-    <div
-      key={id}
-      className="mt-4 flex  flex-col rounded-lg border border-gray-500 bg-white p-4 text-gray-800"
-    >
-      <div className="flex  w-full ">
-        <p className="text-justify">
-          {expanded ? comment : truncatedComment}
-          {!expanded && remainingComment && (
-            <button onClick={toggleExpanded} className="ml-2 text-green-600">
-              ..... Read more
-            </button>
-          )}
-          {expanded && remainingComment && (
-            <button onClick={toggleExpanded} className="ml-2 text-green-600">
-              Read less
-            </button>
-          )}
-        </p>
-      </div>
-      <div className="mt-3">
-        <span className="text-xs text-gray-500">
-          {modified_date ? formatDateTime(modified_date) : "-"}
-        </span>
-      </div>
-      <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
-        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
-          {created_by_object?.first_name?.charAt(0) || t("unknown")}
-        </div>
-        <span className="pl-2 text-sm text-gray-700">
-          {created_by_object?.first_name || t("unknown")}{" "}
-          {created_by_object?.last_name}
-        </span>
-      </div>
-    </div>
-  );
-};
-
-const CommentSection = ({ id }: { id: string }) => {
+const CommentSection = (props: CommentSectionProps) => {
   const [commentBox, setCommentBox] = useState("");
   const { t } = useTranslation();
 
@@ -85,17 +27,21 @@ const CommentSection = ({ id }: { id: string }) => {
       return;
     }
     const { res } = await request(routes.addShiftComments, {
-      pathParams: { id: id },
+      pathParams: { id: props.id },
       body: payload,
     });
     if (res?.ok) {
       Notification.Success({ msg: t("comment_added_successfully") });
+
       setCommentBox("");
     }
   };
 
   return (
-    <PaginatedList route={routes.getShiftComments} pathParams={{ id: id }}>
+    <PaginatedList
+      route={routes.getShiftComments}
+      pathParams={{ id: props.id }}
+    >
       {(_, query) => (
         <div className="flex w-full flex-col">
           <textarea
@@ -135,3 +81,55 @@ const CommentSection = ({ id }: { id: string }) => {
 };
 
 export default CommentSection;
+
+export const Comment = ({
+  id,
+  comment,
+  created_by_object,
+  modified_date,
+}: IComment) => {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+  const toggleExpanded = () => {
+    setExpanded(!expanded);
+  };
+  const truncatedComment = comment.split(" ").slice(0, 20).join(" ");
+  const remainingComment = comment.split(" ").slice(20).join(" ");
+
+  return (
+    <div
+      key={id}
+      className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800"
+    >
+      <div className="flex  w-full ">
+        <p className="text-justify">
+          {expanded ? comment : truncatedComment}
+          {!expanded && remainingComment && (
+            <button onClick={toggleExpanded} className="ml-2 text-green-600">
+              {t("read_more")}
+            </button>
+          )}
+          {expanded && remainingComment && (
+            <button onClick={toggleExpanded} className="ml-2 text-green-600">
+              {t("read_less")}
+            </button>
+          )}
+        </p>
+      </div>
+      <div className="mt-3">
+        <span className="text-xs text-gray-500">
+          {modified_date ? formatDateTime(modified_date) : "-"}
+        </span>
+      </div>
+      <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
+          {created_by_object?.first_name?.charAt(0) || t("unknown")}
+        </div>
+        <span className="pl-2 text-sm text-gray-700">
+          {created_by_object?.first_name || t("unknown")}{" "}
+          {created_by_object?.last_name}
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/Locale/en/Shifting.json b/src/Locale/en/Shifting.json
index 0fc177281d5..e8204f9e5f3 100644
--- a/src/Locale/en/Shifting.json
+++ b/src/Locale/en/Shifting.json
@@ -82,5 +82,7 @@
   "transfer_in_progress": "TRANSFER IN PROGRESS",
   "patient_state": "Patient State",
   "yet_to_be_decided": "Yet to be decided",
-  "awaiting_destination_approval": "AWAITING DESTINATION APPROVAL"
+  "awaiting_destination_approval": "AWAITING DESTINATION APPROVAL",
+  "read_more": "Read More",
+  "read_less": "Read Less"
 }
diff --git a/src/Locale/kn/Shifting.json b/src/Locale/kn/Shifting.json
new file mode 100644
index 00000000000..c64b6c8d48b
--- /dev/null
+++ b/src/Locale/kn/Shifting.json
@@ -0,0 +1,4 @@
+{
+  "read_more": "ಇನ್ನಷ್ಟು ಓದಿ",
+  "read_less": "ಇನ್ನಷ್ಟು ಓದಬೇಕಿಲ್ಲ"
+}
diff --git a/src/Locale/kn/index.js b/src/Locale/kn/index.js
index cbf1d10c3b9..33233506284 100644
--- a/src/Locale/kn/index.js
+++ b/src/Locale/kn/index.js
@@ -2,10 +2,12 @@ import Auth from "./Auth.json";
 import Common from "./Common.json";
 import Entities from "./Entities.json";
 import Facility from "./Facility.json";
+import Shifting from "./Shifting.json";
 
 export default {
   ...Auth,
   ...Common,
   ...Entities,
   ...Facility,
+  ...Shifting,
 };
diff --git a/src/Locale/ml/Shifing.json b/src/Locale/ml/Shifing.json
new file mode 100644
index 00000000000..4783b471e62
--- /dev/null
+++ b/src/Locale/ml/Shifing.json
@@ -0,0 +1,4 @@
+{
+  "read_more": "കൂടുതൽ വായിക്കുക",
+  "read_less": "കുറഞ്ഞത് വായിക്കുക"
+}
diff --git a/src/Locale/ml/index.js b/src/Locale/ml/index.js
index cbf1d10c3b9..44103bab5fa 100644
--- a/src/Locale/ml/index.js
+++ b/src/Locale/ml/index.js
@@ -2,10 +2,12 @@ import Auth from "./Auth.json";
 import Common from "./Common.json";
 import Entities from "./Entities.json";
 import Facility from "./Facility.json";
+import Shifting from "./Shifing.json";
 
 export default {
   ...Auth,
   ...Common,
   ...Entities,
   ...Facility,
+  ...Shifting,
 };
diff --git a/src/Locale/mr/Shifting.json b/src/Locale/mr/Shifting.json
new file mode 100644
index 00000000000..ef9054de254
--- /dev/null
+++ b/src/Locale/mr/Shifting.json
@@ -0,0 +1,4 @@
+{
+  "read_more": "अधिक वाचा",
+  "read_less": "कमी वाचा"
+}
diff --git a/src/Locale/mr/index.js b/src/Locale/mr/index.js
index cbf1d10c3b9..33233506284 100644
--- a/src/Locale/mr/index.js
+++ b/src/Locale/mr/index.js
@@ -2,10 +2,12 @@ import Auth from "./Auth.json";
 import Common from "./Common.json";
 import Entities from "./Entities.json";
 import Facility from "./Facility.json";
+import Shifting from "./Shifting.json";
 
 export default {
   ...Auth,
   ...Common,
   ...Entities,
   ...Facility,
+  ...Shifting,
 };
diff --git a/src/Locale/ta/Shifting.json b/src/Locale/ta/Shifting.json
new file mode 100644
index 00000000000..90a80c8705d
--- /dev/null
+++ b/src/Locale/ta/Shifting.json
@@ -0,0 +1,4 @@
+{
+  "read_more": "மேலும் படிக்க",
+  "read_less": "குறைந்தது படிக்க"
+}
diff --git a/src/Locale/ta/index.js b/src/Locale/ta/index.js
index cbf1d10c3b9..33233506284 100644
--- a/src/Locale/ta/index.js
+++ b/src/Locale/ta/index.js
@@ -2,10 +2,12 @@ import Auth from "./Auth.json";
 import Common from "./Common.json";
 import Entities from "./Entities.json";
 import Facility from "./Facility.json";
+import Shifting from "./Shifting.json";
 
 export default {
   ...Auth,
   ...Common,
   ...Entities,
   ...Facility,
+  ...Shifting,
 };

From 524397435ab16d940a0c033357cc01348eec9510 Mon Sep 17 00:00:00 2001
From: Thanush19 <110150744+Thanush19@users.noreply.github.com>
Date: Wed, 13 Mar 2024 13:10:57 +0530
Subject: [PATCH 6/6] changes btn color to primary from green

---
 src/Components/Shifting/CommentsSection.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Components/Shifting/CommentsSection.tsx b/src/Components/Shifting/CommentsSection.tsx
index 47731be5bce..1fb3976a0a7 100644
--- a/src/Components/Shifting/CommentsSection.tsx
+++ b/src/Components/Shifting/CommentsSection.tsx
@@ -105,12 +105,15 @@ export const Comment = ({
         <p className="text-justify">
           {expanded ? comment : truncatedComment}
           {!expanded && remainingComment && (
-            <button onClick={toggleExpanded} className="ml-2 text-green-600">
+            <button
+              onClick={toggleExpanded}
+              className="ml-2  text-primary-600 "
+            >
               {t("read_more")}
             </button>
           )}
           {expanded && remainingComment && (
-            <button onClick={toggleExpanded} className="ml-2 text-green-600">
+            <button onClick={toggleExpanded} className="ml-2 text-primary-600">
               {t("read_less")}
             </button>
           )}