Rework Shifting Process for "Complete" stage

src/Components/Common/FacilitySelect.tsx

@@ -9,7 +9,9 @@ interface FacilitySelectProps {
   exclude_user?: string;
   errors?: string | undefined;
   className?: string;
+  required?: boolean;
   searchAll?: boolean;
+  disabled?: boolean;
   multiple?: boolean;
   facilityType?: number;
   district?: string;
@@ -25,10 +27,12 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
   const {
     name,
     exclude_user,
+    required,
     multiple,
     selected,
     setSelected,
     searchAll,
+    disabled = false,
     showAll = true,
     showNOptions = 10,
     className = "",
@@ -69,8 +73,10 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
   return (
     <AutoCompleteAsync
       name={name}
+      required={required}
       multiple={multiple}
       selected={selected}
+      disabled={disabled}
       onChange={setSelected}
       fetchData={facilitySearch}
       showNOptions={showNOptions}

src/Components/Facility/DischargeModal.tsx

@@ -40,9 +40,9 @@ interface IProps {
   show: boolean;
   onClose: () => void;
   consultationData: ConsultationModel;
+  referred_to?: FacilityModel | null;
   afterSubmit?: () => void;
   new_discharge_reason?: number | null;
-  discharge_notes?: string;
   discharge_date?: string;
   death_datetime?: string;
 }
@@ -53,7 +53,7 @@ const DischargeModal = ({
   consultationData,
   afterSubmit,
   new_discharge_reason = null,
-  discharge_notes = "",
+  referred_to = null,
   discharge_date = dayjs().format("YYYY-MM-DDTHH:mm"),
   death_datetime = dayjs().format("YYYY-MM-DDTHH:mm"),
 }: IProps) => {
@@ -62,18 +62,40 @@ const DischargeModal = ({
   const [preDischargeForm, setPreDischargeForm] =
     useState<PreDischargeFormInterface>({
       new_discharge_reason,
-      discharge_notes,
+      discharge_notes: referred_to
+        ? "Patient Shifted to another facility."
+        : "",
       discharge_date,
       death_datetime,
       death_confirmed_doctor: undefined,
-      referred_to_external: null,
+      referred_to_external: !referred_to?.id ? referred_to?.name : null,
+      referred_to: referred_to?.id ? referred_to.id : null,
     });
   const [latestClaim, setLatestClaim] = useState<HCXClaimModel>();
   const [isCreateClaimLoading, setIsCreateClaimLoading] = useState(false);
   const [isSendingDischargeApi, setIsSendingDischargeApi] = useState(false);
-  const [facility, setFacility] = useState<FacilityModel>();
+  const [facility, setFacility] = useState<FacilityModel | null>(referred_to);
   const [errors, setErrors] = useState<any>({});
 
+  useEffect(() => {
+    setPreDischargeForm((prev) => ({
+      ...prev,
+      new_discharge_reason,
+      discharge_notes: referred_to
+        ? "Patient Shifted to another facility."
+        : "",
+      discharge_date,
+      death_datetime,
+      referred_to_external: !referred_to?.id ? referred_to?.name : null,
+      referred_to: referred_to?.id ? referred_to.id : null,
+    }));
+
+    setFacility(referred_to);
+  }, [referred_to, new_discharge_reason, discharge_date, death_datetime]);
+
+  const discharge_reason =
+    new_discharge_reason ?? preDischargeForm.new_discharge_reason;
+
   const fetchLatestClaim = useCallback(async () => {
     const res = await dispatch(
       HCXActions.claims.list({
@@ -111,7 +133,7 @@ const DischargeModal = ({
 
   const handlePatientDischarge = async (value: boolean) => {
     setIsSendingDischargeApi(true);
-    if (!preDischargeForm.new_discharge_reason) {
+    if (!new_discharge_reason && !discharge_reason) {
       setErrors({
         ...errors,
         new_discharge_reason: "Please select a reason for discharge",
@@ -121,8 +143,7 @@ const DischargeModal = ({
     }
 
     if (
-      preDischargeForm.new_discharge_reason ==
-      DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
+      discharge_reason == DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
     ) {
       const newErrors: Record<string, FieldError> = {};
 
@@ -143,6 +164,7 @@ const DischargeModal = ({
     const dischargeDetails = {
       ...preDischargeForm,
       discharge: value,
+      referred_to: referred_to?.id ?? preDischargeForm.referred_to,
       discharge_date: dayjs(preDischargeForm.discharge_date).toISOString(),
     };
 
@@ -157,6 +179,7 @@ const DischargeModal = ({
         {
           ...preDischargeForm,
           discharge: value,
+          new_discharge_reason: discharge_reason,
           discharge_date: dayjs(preDischargeForm.discharge_date).toISOString(),
         },
         { id: consultationData.id },
@@ -174,7 +197,7 @@ const DischargeModal = ({
   };
 
   const handleFacilitySelect = (selected?: FacilityModel) => {
-    setFacility(selected);
+    setFacility(selected ?? null);
     setPreDischargeForm((prev) => ({
       ...prev,
       referred_to: selected?.id ?? null,
@@ -203,7 +226,7 @@ const DischargeModal = ({
           label="Reason"
           name="discharge_reason"
           id="discharge_reason"
-          value={preDischargeForm.new_discharge_reason}
+          value={discharge_reason}
           disabled={!!new_discharge_reason}
           options={DISCHARGE_REASONS}
           optionValue={({ id }) => id}
@@ -216,36 +239,35 @@ const DischargeModal = ({
           }
           error={errors?.new_discharge_reason}
         />
-        {preDischargeForm.new_discharge_reason ===
+        {discharge_reason ===
           DISCHARGE_REASONS.find((i) => i.text == "Referred")?.id && (
-          <>
-            <div id="facility-referredto">
-              <FieldLabel>Referred to</FieldLabel>
-              <FacilitySelect
-                name="referred_to"
-                setSelected={(selected) =>
-                  handleFacilitySelect(selected as FacilityModel | undefined)
-                }
-                selected={facility ?? null}
-                showAll
-                freeText
-                multiple={false}
-                errors={errors?.referred_to}
-                className="mb-4"
-              />
-            </div>
-          </>
+          <div id="facility-referredto">
+            <FieldLabel>Referred to</FieldLabel>
+            <FacilitySelect
+              name="referred_to"
+              setSelected={(selected) =>
+                handleFacilitySelect(selected as FacilityModel | undefined)
+              }
+              disabled={!!referred_to}
+              selected={facility ?? null}
+              showAll
+              freeText
+              multiple={false}
+              errors={errors?.referred_to}
+              className="mb-4"
+            />
+          </div>
         )}
         <TextAreaFormField
           required={
-            preDischargeForm.new_discharge_reason ==
+            discharge_reason ==
             DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
           }
           label={
             {
               "3": "Cause of death",
               "1": "Discharged Advice",
-            }[preDischargeForm.new_discharge_reason ?? 0] ?? "Notes"
+            }[discharge_reason ?? 0] ?? "Notes"
           }
           name="discharge_notes"
           value={preDischargeForm.discharge_notes}
@@ -259,21 +281,21 @@ const DischargeModal = ({
         />
         <TextFormField
           name={
-            preDischargeForm.new_discharge_reason ===
+            discharge_reason ===
             DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
               ? "death_datetime"
               : "discharge_date"
           }
           label={
-            preDischargeForm.new_discharge_reason ===
+            discharge_reason ===
             DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
               ? "Date of Death"
               : "Date and Time of Discharge"
           }
           type="datetime-local"
           value={
             preDischargeForm[
-              preDischargeForm.new_discharge_reason ===
+              discharge_reason ===
               DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
                 ? "death_datetime"
                 : "discharge_date"
@@ -293,14 +315,14 @@ const DischargeModal = ({
           )}
           max={dayjs().format("YYYY-MM-DDTHH:mm")}
           error={
-            preDischargeForm.new_discharge_reason ===
+            discharge_reason ===
             DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
               ? errors?.death_datetime
               : errors?.discharge_date
           }
         />
 
-        {preDischargeForm.new_discharge_reason ===
+        {discharge_reason ===
           DISCHARGE_REASONS.find((i) => i.text == "Recovered")?.id && (
           <>
             <div className="mb-4">
@@ -313,7 +335,7 @@ const DischargeModal = ({
             </div>
           </>
         )}
-        {preDischargeForm.new_discharge_reason ===
+        {discharge_reason ===
           DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id && (
           <TextFormField
             name="death_confirmed_by"

src/Components/Form/AutoCompleteAsync.tsx

@@ -8,6 +8,7 @@ import {
   dropdownOptionClassNames,
 } from "./MultiSelectMenuV2";
 import { useTranslation } from "react-i18next";
+import { classNames } from "../../Utils/utils";
 
 interface Props {
   id?: string;
@@ -86,7 +87,10 @@ const AutoCompleteAsync = (props: Props) => {
             <Combobox.Input
               id={id}
               name={name}
-              className="cui-input-base truncate pr-16"
+              className={classNames(
+                "cui-input-base truncate pr-16",
+                error && "border-danger-500",
+              )}
               placeholder={
                 multiple && hasSelection
                   ? `${selected.length} selected`
@@ -183,7 +187,9 @@ const AutoCompleteAsync = (props: Props) => {
             </div>
           )}
           {error && (
-            <div className="mt-1 text-sm font-medium text-red-500">{error}</div>
+            <div className="mt-1 text-xs font-medium text-danger-500">
+              {error}
+            </div>
           )}
         </div>
       </Combobox>