@asaleh37/ui-base 25.6.2-0.3 → 25.6.2

package/src/components/templates/workflow/WorkflowDocumentPanel.tsx

@@ -1,606 +1,606 @@
-import { useEffect, useState } from "react";
-import { useAxios, useSession, useWindow } from "../../../hooks";
-import {
-  Avatar,
-  Box,
-  Button,
-  Divider,
-  Grid2,
-  IconButton,
-  Paper,
-} from "@mui/material";
-import TemplateTextField from "../DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
-import ComboBox from "../DataEntryTemplates/TemplateDataForm/FormFields/ComboBox";
-import { useSelector } from "react-redux";
-import { useTranslation } from "react-i18next";
-import WorkflowDocumentTimeLine from "./WorkflowDocumentTimeLine";
-import { toast } from "react-toastify";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import ReportViewer from "../report/ReportViewer";
-import AttachmentImageViewer from "../attachment/AttachmentImageViewer";
-import { useNavigate } from "react-router-dom";
-
-export type WorkflowDocumentPanelProps = {
-  workFlowDocumentCode: string;
-  refDocumentId: any;
-  postActionCallBk?: () => void;
-  cancelActionCallBk?: () => void;
-};
-
-export type workflowDocumentAction = {
-  id: number;
-  document_action_code: string;
-  document_action_ar_name: string;
-  document_action_en_name: string;
-  post_action_endpoint?: string;
-  pre_action_endpoint?: string;
-  next_document_status_id?: number;
-  next_action_takers?: Array<person>;
-  require_comment: any;
-};
-
-export type person = {
-  id: number;
-  email: string;
-  employeeArName: string;
-  employeeEnName: string;
-  mobileNumber: string;
-  username: string;
-};
-
-export type workflowDocumentActionHistory = {
-  id: number;
-  actionTime: string;
-  actionMethod: string;
-  actionComment: string;
-  documentActionArName: string;
-  documentActionEnName: string;
-  employeeArName: string;
-  employeeEnName: string;
-  personId: number;
-};
-
-type WorkflowDocumentInfo = {
-  workflowDocument: any;
-  referencedDocument: any;
-  workflowDocumentReport: any;
-  workflowDocumentStatus: any;
-  actionsHistory: Array<workflowDocumentActionHistory>;
-  nextActions: Array<workflowDocumentAction>;
-  nextActionTakers: any;
-};
-
-const WorkflowDocumentPanel: React.FC<WorkflowDocumentPanelProps> = (props) => {
-  const navigate = useNavigate();
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const { isUserAuthorized, UserInfo } = useSession();
-  const { handleGetRequest, handlePostRequest } = useAxios();
-  const [action, setAction] = useState<workflowDocumentAction>(null);
-  const [authorizedActions, setAuthorizedActions] = useState<
-    Array<workflowDocumentAction>
-  >([]);
-  const { t } = useTranslation();
-  const [actionComment, setActionComment] = useState(null);
-  const [workflowDocumentInfo, setWorkflowDocumentInfo] =
-    useState<WorkflowDocumentInfo>({
-      referencedDocument: null,
-      workflowDocumentReport: null,
-      workflowDocument: null,
-      workflowDocumentStatus: null,
-      actionsHistory: [],
-      nextActionTakers: null,
-      nextActions: [],
-    });
-  const { Window: ReporTViewWindow, setWindowState: setReportViewWindowState } =
-    useWindow({
-      windowTitle:
-        AppLayout.appDirection === "ltr"
-          ? workflowDocumentInfo?.workflowDocument &&
-            workflowDocumentInfo?.referencedDocument
-            ? `${workflowDocumentInfo?.workflowDocument?.documentEnName} # ${
-                workflowDocumentInfo?.referencedDocument[
-                  workflowDocumentInfo?.workflowDocument?.documentNumberField
-                ]
-              }`
-            : "Document"
-          : workflowDocumentInfo?.workflowDocument &&
-            workflowDocumentInfo?.referencedDocument
-          ? `${workflowDocumentInfo?.workflowDocument?.documentArName} # ${
-              workflowDocumentInfo?.referencedDocument[
-                workflowDocumentInfo?.workflowDocument?.documentNumberField
-              ]
-            }`
-          : "وثيقة",
-      windowIcon: "eye",
-      width: "80%",
-    });
-  const loadWorkFlowDocumentInfo = async () => {
-    await handleGetRequest({
-      endPointURI: "api/v1/public/workflow/doc/info",
-      showMask: true,
-      parameters: {
-        workflowDocumentCode: props.workFlowDocumentCode,
-        refDocumentId: props.refDocumentId,
-      },
-      successCallBkFn: (response: any) => {
-        setWorkflowDocumentInfo(response.data);
-      },
-      failureCallBkFn: () => {
-        setWorkflowDocumentInfo({
-          referencedDocument: null,
-          workflowDocumentReport: null,
-          workflowDocument: null,
-          workflowDocumentStatus: null,
-          actionsHistory: [],
-          nextActions: [],
-          nextActionTakers: null,
-        });
-      },
-    });
-  };
-
-  const validateBeforeProcessWorkflowDocumentAction = async () => {
-    if (
-      action === undefined ||
-      action === null ||
-      action?.id === undefined ||
-      action?.id === null
-    ) {
-      toast.error("You must select action to process");
-      return;
-    }
-    if (
-      (action.require_comment === true ||
-        action.require_comment === 1 ||
-        action.require_comment === "true") &&
-      (actionComment === null || actionComment === "")
-    ) {
-      toast.error("You must enter comment for the action to be processed");
-      return;
-    }
-    if (action?.pre_action_endpoint) {
-      await handlePostRequest({
-        endPointURI: action.pre_action_endpoint,
-        showMask: true,
-        loadingMessage: "Processing pre action validation ... please wait",
-        parameters: {
-          refDocumentId: props.refDocumentId,
-          actionId: action.id,
-        },
-        successCallBkFn: () => {
-          processWorkflowDocumentAction();
-        },
-      });
-      return;
-    }
-    processWorkflowDocumentAction();
-  };
-  const processWorkflowDocumentAction = async () => {
-    await handlePostRequest({
-      endPointURI: "api/v1/public/workflow/doc/action",
-      showMask: true,
-      data: {
-        workflowDocumentId: workflowDocumentInfo?.workflowDocument?.id,
-        refDocumentId: props.refDocumentId,
-        actionId: action.id,
-        refDocumentStatus:
-          workflowDocumentInfo?.workflowDocumentStatus?.documentStatusCode,
-        actionComment: actionComment,
-      },
-      successCallBkFn: async (response) => {
-        if (action?.post_action_endpoint) {
-          await handlePostRequest({
-            endPointURI: action.post_action_endpoint,
-            showMask: true,
-            loadingMessage: "Processing post action process ... please wait",
-            parameters: {
-              refDocumentId: props.refDocumentId,
-              actionId: action.id,
-            },
-            successCallBkFn: () => {
-              loadWorkFlowDocumentInfo();
-              if (props?.postActionCallBk) {
-                props.postActionCallBk();
-              }
-            },
-          });
-          return;
-        }
-        loadWorkFlowDocumentInfo();
-      },
-    });
-  };
-
-  const adjustAuthorizedActions = () => {
-    if (workflowDocumentInfo?.nextActions?.length > 0) {
-      setAuthorizedActions(
-        workflowDocumentInfo.nextActions.filter((action) => {
-          if (
-            !(
-              workflowDocumentInfo?.workflowDocumentStatus
-                ?.nextActionTakersAuthority ||
-              workflowDocumentInfo?.nextActionTakers
-            )
-          ) {
-            return true;
-          }
-          if (
-            workflowDocumentInfo?.workflowDocumentStatus
-              ?.nextActionTakersAuthority
-          ) {
-            if (
-              isUserAuthorized(
-                workflowDocumentInfo.workflowDocumentStatus
-                  .nextActionTakersAuthority
-              )
-            ) {
-              return true;
-            }
-          }
-          if (workflowDocumentInfo?.nextActionTakers) {
-            for (const actionTaker of workflowDocumentInfo.nextActionTakers) {
-              if (
-                UserInfo?.username === actionTaker?.username ||
-                UserInfo?.username === actionTaker?.USERNAME
-              ) {
-                return true;
-              }
-            }
-          }
-          return false;
-        })
-      );
-    } else {
-      setAuthorizedActions([]);
-    }
-  };
-
-  useEffect(() => {
-    if (props.refDocumentId && props.workFlowDocumentCode) {
-      loadWorkFlowDocumentInfo();
-    }
-  }, [props.refDocumentId, props.workFlowDocumentCode]);
-
-  useEffect(() => {
-    if (workflowDocumentInfo?.nextActions) {
-      adjustAuthorizedActions();
-    } else {
-      setAuthorizedActions([]);
-    }
-  }, [workflowDocumentInfo.nextActions, workflowDocumentInfo.nextActionTakers]);
-  return (
-    <>
-      {workflowDocumentInfo?.workflowDocumentReport?.id ? (
-        <ReporTViewWindow>
-          <ReportViewer
-            reportCode={
-              workflowDocumentInfo?.workflowDocumentReport?.reportCode
-            }
-            resultMode="App"
-            byPassParameterEntry={true}
-            reportParametersValues={{ doc_id: props.refDocumentId + "" }}
-          />
-        </ReporTViewWindow>
-      ) : (
-        <></>
-      )}
-
-      {workflowDocumentInfo?.workflowDocument ? (
-        <Box
-          sx={{
-            width: "100%",
-            textAlign: "center",
-            fontSize: 20,
-            fontWeight: "bold",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <IconButton
-            onClick={() => {
-              navigate(-1, { replace: true });
-            }}
-          >
-            <FontAwesomeIcon icon="arrow-left" />
-          </IconButton>
-          <Box sx={{ flex: 1 }}></Box>
-          <FontAwesomeIcon
-            icon="file"
-            style={{ marginRight: 10, marginLeft: 10 }}
-          />
-          {AppLayout.appDirection === "ltr"
-            ? `${workflowDocumentInfo?.workflowDocument?.documentEnName} # ${
-                workflowDocumentInfo?.referencedDocument[
-                  workflowDocumentInfo?.workflowDocument?.documentNumberField
-                ]
-              }`
-            : `${workflowDocumentInfo?.workflowDocument?.documentArName} # ${
-                workflowDocumentInfo?.referencedDocument[
-                  workflowDocumentInfo?.workflowDocument?.documentNumberField
-                ]
-              }`}
-          {workflowDocumentInfo?.workflowDocumentStatus
-            ? AppLayout.appDirection === "ltr"
-              ? ` ( ${workflowDocumentInfo?.workflowDocumentStatus?.documentStatusEnName} )`
-              : ` ( ${workflowDocumentInfo?.workflowDocumentStatus?.documentStatusArName} )`
-            : ""}
-          <Box sx={{ flex: 1 }}></Box>
-          {workflowDocumentInfo?.workflowDocumentReport?.id ? (
-            <Button
-              onClick={() => {
-                setReportViewWindowState(true);
-              }}
-              variant="outlined"
-              startIcon={<FontAwesomeIcon icon="eye" />}
-            >
-              {t("VIEW_LABEL")}
-            </Button>
-          ) : (
-            <></>
-          )}
-        </Box>
-      ) : (
-        <></>
-      )}
-
-      <Box
-        sx={{
-          flex: 1,
-          width: "100%",
-          overflow: "hidden",
-          display: "flex",
-          // flexDirection: "column",
-        }}
-      >
-        {authorizedActions?.length > 0 ? (
-          <Paper
-            sx={{
-              padding: 2,
-              display: "flex",
-              flex: 1,
-              margin: 1,
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "flex-start",
-              overflow: "hidden",
-            }}
-          >
-            <ComboBox
-              sx={{ marginBottom: 2, width: 400 }}
-              label={t("WE_AVAILABLE_ACTIONS_LABEL")}
-              displayField={
-                AppLayout.appDirection === "ltr"
-                  ? "document_action_en_name"
-                  : "document_action_ar_name"
-              }
-              valueField={"id"}
-              value={action?.id}
-              options={authorizedActions}
-              onChangeCallBack={(v, selectedRecord) => {
-                setAction(selectedRecord);
-              }}
-            />
-            {/* <ComboBox
-          sx={{ marginBottom: 2, width: 400 }}
-          label={t("WE_NEXT_APPROVER_LABEL")}
-          displayField={
-            AppLayout.appDirection === "ltr"
-              ? "employeeEnName"
-              : "employeeArName"
-          }
-          valueField={"id"}
-          value={nextActionTaker?.id}
-          options={action?.nextActionTakers || []}
-          onChangeCallBack={(v, selectedRecord) => {
-            setNextActionTaker(selectedRecord);
-          }}
-        /> */}
-            <TemplateTextField
-              sx={{ width: 400 }}
-              rows={3}
-              value={actionComment}
-              onChange={(event) => {
-                setActionComment(event.target.value);
-              }}
-              multiline={true}
-              label={t("WF_COMMENT_LABEL")}
-            />
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <Button
-                color="success"
-                variant="contained"
-                sx={{ width: 200, m: 1 }}
-                onClick={validateBeforeProcessWorkflowDocumentAction}
-              >
-                {t("WF_TAKE_ACTION_BTN_LABEL")}
-              </Button>
-              {props?.cancelActionCallBk ? (
-                <Button
-                  variant="contained"
-                  sx={{ width: 200, m: 1 }}
-                  color="error"
-                  onClick={() => {
-                    if (props?.cancelActionCallBk) {
-                      props.cancelActionCallBk();
-                    }
-                  }}
-                >
-                  {t("WF_CANCEL_BTN_LABEL")}
-                </Button>
-              ) : (
-                <></>
-              )}
-            </Box>
-            {workflowDocumentInfo?.nextActionTakers &&
-            workflowDocumentInfo.nextActionTakers.length > 0 ? (
-              <>
-                <Divider
-                  variant="fullWidth"
-                  flexItem
-                  sx={{ marginTop: 1, marginBottom: 1 }}
-                >
-                  <Box
-                    sx={{
-                      width: "100%",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontSize: 18,
-                      fontWeight: "bold",
-                    }}
-                  >
-                    <FontAwesomeIcon
-                      icon="users"
-                      style={{ marginRight: 10, marginLeft: 10 }}
-                    />{" "}
-                    {t("WF_WAITING_FOR_LABEL")}
-                  </Box>
-                </Divider>
-
-                <Box
-                  sx={{
-                    flex: 1,
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    overflow: "auto",
-                    padding: 1,
-                    width: "100%",
-                  }}
-                >
-                  {workflowDocumentInfo.nextActionTakers.map(
-                    (nextActionTaker: any) => {
-                      return (
-                        <Box
-                          sx={{
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            border: "1px dotted black",
-                            width: 400,
-                            marginBottom: 2,
-                            padding: 2,
-                          }}
-                        >
-                          <AttachmentImageViewer
-                            showAsAvatar={true}
-                            attachmentCode="EMPLOYEE_PHOTOS"
-                            refKey={nextActionTaker?.id || "0"}
-                            style={{
-                              marginRight: 2,
-                              marginLeft: 2,
-                              width: 60,
-                              height: 60,
-                            }}
-                          />
-                          <Box
-                            sx={{
-                              flex: 2,
-                              display: "flex",
-                              flexDirection: "column",
-                              alignItems: "flex-start",
-                              justifyContent: "center",
-                            }}
-                          >
-                            <div>
-                              {AppLayout.appDirection === "ltr"
-                                ? nextActionTaker?.employee_en_name
-                                : nextActionTaker?.employee_ar_name}
-                            </div>
-                            <div>
-                              {nextActionTaker?.email ? (
-                                <>
-                                  <FontAwesomeIcon
-                                    icon="envelope"
-                                    style={{ marginRight: 10, marginLeft: 10 }}
-                                  />
-                                  {nextActionTaker?.email}
-                                </>
-                              ) : (
-                                <></>
-                              )}
-                            </div>
-                            <div>
-                              {nextActionTaker?.mobile_number ? (
-                                <>
-                                  <FontAwesomeIcon
-                                    icon="mobile"
-                                    style={{ marginRight: 10, marginLeft: 10 }}
-                                  />
-                                  {nextActionTaker?.mobile_number}
-                                </>
-                              ) : (
-                                <></>
-                              )}
-                            </div>
-                          </Box>
-                        </Box>
-                      );
-                    }
-                  )}
-                </Box>
-              </>
-            ) : (
-              <></>
-            )}
-          </Paper>
-        ) : (
-          <></>
-        )}
-        {workflowDocumentInfo?.actionsHistory.length > 0 ? (
-          <WorkflowDocumentTimeLine
-            actionHistory={workflowDocumentInfo.actionsHistory}
-          />
-        ) : (
-          <Paper
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              flexGrow: 1,
-              padding: 2,
-              margin: 1,
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <Box
-              sx={{
-                width: "100%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: 18,
-                fontWeight: "bold",
-              }}
-            >
-              <FontAwesomeIcon
-                icon="history"
-                style={{ marginRight: 10, marginLeft: 10 }}
-              />
-              {t("WF_ACTION_HISTORY_LABEL")}
-            </Box>
-            <Box
-              sx={{
-                flex: 1,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              No Action Log available
-            </Box>
-          </Paper>
-        )}
-      </Box>
-    </>
-  );
-};
-
-export default WorkflowDocumentPanel;
+import { useEffect, useState } from "react";
+import { useAxios, useSession, useWindow } from "../../../hooks";
+import {
+  Avatar,
+  Box,
+  Button,
+  Divider,
+  Grid2,
+  IconButton,
+  Paper,
+} from "@mui/material";
+import TemplateTextField from "../DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
+import ComboBox from "../DataEntryTemplates/TemplateDataForm/FormFields/ComboBox";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import WorkflowDocumentTimeLine from "./WorkflowDocumentTimeLine";
+import { toast } from "react-toastify";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ReportViewer from "../report/ReportViewer";
+import AttachmentImageViewer from "../attachment/AttachmentImageViewer";
+import { useNavigate } from "react-router-dom";
+
+export type WorkflowDocumentPanelProps = {
+  workFlowDocumentCode: string;
+  refDocumentId: any;
+  postActionCallBk?: () => void;
+  cancelActionCallBk?: () => void;
+};
+
+export type workflowDocumentAction = {
+  id: number;
+  document_action_code: string;
+  document_action_ar_name: string;
+  document_action_en_name: string;
+  post_action_endpoint?: string;
+  pre_action_endpoint?: string;
+  next_document_status_id?: number;
+  next_action_takers?: Array<person>;
+  require_comment: any;
+};
+
+export type person = {
+  id: number;
+  email: string;
+  employeeArName: string;
+  employeeEnName: string;
+  mobileNumber: string;
+  username: string;
+};
+
+export type workflowDocumentActionHistory = {
+  id: number;
+  actionTime: string;
+  actionMethod: string;
+  actionComment: string;
+  documentActionArName: string;
+  documentActionEnName: string;
+  employeeArName: string;
+  employeeEnName: string;
+  personId: number;
+};
+
+type WorkflowDocumentInfo = {
+  workflowDocument: any;
+  referencedDocument: any;
+  workflowDocumentReport: any;
+  workflowDocumentStatus: any;
+  actionsHistory: Array<workflowDocumentActionHistory>;
+  nextActions: Array<workflowDocumentAction>;
+  nextActionTakers: any;
+};
+
+const WorkflowDocumentPanel: React.FC<WorkflowDocumentPanelProps> = (props) => {
+  const navigate = useNavigate();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const { isUserAuthorized, UserInfo } = useSession();
+  const { handleGetRequest, handlePostRequest } = useAxios();
+  const [action, setAction] = useState<workflowDocumentAction>(null);
+  const [authorizedActions, setAuthorizedActions] = useState<
+    Array<workflowDocumentAction>
+  >([]);
+  const { t } = useTranslation();
+  const [actionComment, setActionComment] = useState(null);
+  const [workflowDocumentInfo, setWorkflowDocumentInfo] =
+    useState<WorkflowDocumentInfo>({
+      referencedDocument: null,
+      workflowDocumentReport: null,
+      workflowDocument: null,
+      workflowDocumentStatus: null,
+      actionsHistory: [],
+      nextActionTakers: null,
+      nextActions: [],
+    });
+  const { Window: ReporTViewWindow, setWindowState: setReportViewWindowState } =
+    useWindow({
+      windowTitle:
+        AppLayout.appDirection === "ltr"
+          ? workflowDocumentInfo?.workflowDocument &&
+            workflowDocumentInfo?.referencedDocument
+            ? `${workflowDocumentInfo?.workflowDocument?.documentEnName} # ${
+                workflowDocumentInfo?.referencedDocument[
+                  workflowDocumentInfo?.workflowDocument?.documentNumberField
+                ]
+              }`
+            : "Document"
+          : workflowDocumentInfo?.workflowDocument &&
+            workflowDocumentInfo?.referencedDocument
+          ? `${workflowDocumentInfo?.workflowDocument?.documentArName} # ${
+              workflowDocumentInfo?.referencedDocument[
+                workflowDocumentInfo?.workflowDocument?.documentNumberField
+              ]
+            }`
+          : "وثيقة",
+      windowIcon: "eye",
+      width: "80%",
+    });
+  const loadWorkFlowDocumentInfo = async () => {
+    await handleGetRequest({
+      endPointURI: "api/v1/public/workflow/doc/info",
+      showMask: true,
+      parameters: {
+        workflowDocumentCode: props.workFlowDocumentCode,
+        refDocumentId: props.refDocumentId,
+      },
+      successCallBkFn: (response: any) => {
+        setWorkflowDocumentInfo(response.data);
+      },
+      failureCallBkFn: () => {
+        setWorkflowDocumentInfo({
+          referencedDocument: null,
+          workflowDocumentReport: null,
+          workflowDocument: null,
+          workflowDocumentStatus: null,
+          actionsHistory: [],
+          nextActions: [],
+          nextActionTakers: null,
+        });
+      },
+    });
+  };
+
+  const validateBeforeProcessWorkflowDocumentAction = async () => {
+    if (
+      action === undefined ||
+      action === null ||
+      action?.id === undefined ||
+      action?.id === null
+    ) {
+      toast.error("You must select action to process");
+      return;
+    }
+    if (
+      (action.require_comment === true ||
+        action.require_comment === 1 ||
+        action.require_comment === "true") &&
+      (actionComment === null || actionComment === "")
+    ) {
+      toast.error("You must enter comment for the action to be processed");
+      return;
+    }
+    if (action?.pre_action_endpoint) {
+      await handlePostRequest({
+        endPointURI: action.pre_action_endpoint,
+        showMask: true,
+        loadingMessage: "Processing pre action validation ... please wait",
+        parameters: {
+          refDocumentId: props.refDocumentId,
+          actionId: action.id,
+        },
+        successCallBkFn: () => {
+          processWorkflowDocumentAction();
+        },
+      });
+      return;
+    }
+    processWorkflowDocumentAction();
+  };
+  const processWorkflowDocumentAction = async () => {
+    await handlePostRequest({
+      endPointURI: "api/v1/public/workflow/doc/action",
+      showMask: true,
+      data: {
+        workflowDocumentId: workflowDocumentInfo?.workflowDocument?.id,
+        refDocumentId: props.refDocumentId,
+        actionId: action.id,
+        refDocumentStatus:
+          workflowDocumentInfo?.workflowDocumentStatus?.documentStatusCode,
+        actionComment: actionComment,
+      },
+      successCallBkFn: async (response) => {
+        if (action?.post_action_endpoint) {
+          await handlePostRequest({
+            endPointURI: action.post_action_endpoint,
+            showMask: true,
+            loadingMessage: "Processing post action process ... please wait",
+            parameters: {
+              refDocumentId: props.refDocumentId,
+              actionId: action.id,
+            },
+            successCallBkFn: () => {
+              loadWorkFlowDocumentInfo();
+              if (props?.postActionCallBk) {
+                props.postActionCallBk();
+              }
+            },
+          });
+          return;
+        }
+        loadWorkFlowDocumentInfo();
+      },
+    });
+  };
+
+  const adjustAuthorizedActions = () => {
+    if (workflowDocumentInfo?.nextActions?.length > 0) {
+      setAuthorizedActions(
+        workflowDocumentInfo.nextActions.filter((action) => {
+          if (
+            !(
+              workflowDocumentInfo?.workflowDocumentStatus
+                ?.nextActionTakersAuthority ||
+              workflowDocumentInfo?.nextActionTakers
+            )
+          ) {
+            return true;
+          }
+          if (
+            workflowDocumentInfo?.workflowDocumentStatus
+              ?.nextActionTakersAuthority
+          ) {
+            if (
+              isUserAuthorized(
+                workflowDocumentInfo.workflowDocumentStatus
+                  .nextActionTakersAuthority
+              )
+            ) {
+              return true;
+            }
+          }
+          if (workflowDocumentInfo?.nextActionTakers) {
+            for (const actionTaker of workflowDocumentInfo.nextActionTakers) {
+              if (
+                UserInfo?.username === actionTaker?.username ||
+                UserInfo?.username === actionTaker?.USERNAME
+              ) {
+                return true;
+              }
+            }
+          }
+          return false;
+        })
+      );
+    } else {
+      setAuthorizedActions([]);
+    }
+  };
+
+  useEffect(() => {
+    if (props.refDocumentId && props.workFlowDocumentCode) {
+      loadWorkFlowDocumentInfo();
+    }
+  }, [props.refDocumentId, props.workFlowDocumentCode]);
+
+  useEffect(() => {
+    if (workflowDocumentInfo?.nextActions) {
+      adjustAuthorizedActions();
+    } else {
+      setAuthorizedActions([]);
+    }
+  }, [workflowDocumentInfo.nextActions, workflowDocumentInfo.nextActionTakers]);
+  return (
+    <>
+      {workflowDocumentInfo?.workflowDocumentReport?.id ? (
+        <ReporTViewWindow>
+          <ReportViewer
+            reportCode={
+              workflowDocumentInfo?.workflowDocumentReport?.reportCode
+            }
+            resultMode="App"
+            byPassParameterEntry={true}
+            reportParametersValues={{ doc_id: props.refDocumentId + "" }}
+          />
+        </ReporTViewWindow>
+      ) : (
+        <></>
+      )}
+
+      {workflowDocumentInfo?.workflowDocument ? (
+        <Box
+          sx={{
+            width: "100%",
+            textAlign: "center",
+            fontSize: 20,
+            fontWeight: "bold",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <IconButton
+            onClick={() => {
+              navigate(-1, { replace: true });
+            }}
+          >
+            <FontAwesomeIcon icon="arrow-left" />
+          </IconButton>
+          <Box sx={{ flex: 1 }}></Box>
+          <FontAwesomeIcon
+            icon="file"
+            style={{ marginRight: 10, marginLeft: 10 }}
+          />
+          {AppLayout.appDirection === "ltr"
+            ? `${workflowDocumentInfo?.workflowDocument?.documentEnName} # ${
+                workflowDocumentInfo?.referencedDocument[
+                  workflowDocumentInfo?.workflowDocument?.documentNumberField
+                ]
+              }`
+            : `${workflowDocumentInfo?.workflowDocument?.documentArName} # ${
+                workflowDocumentInfo?.referencedDocument[
+                  workflowDocumentInfo?.workflowDocument?.documentNumberField
+                ]
+              }`}
+          {workflowDocumentInfo?.workflowDocumentStatus
+            ? AppLayout.appDirection === "ltr"
+              ? ` ( ${workflowDocumentInfo?.workflowDocumentStatus?.documentStatusEnName} )`
+              : ` ( ${workflowDocumentInfo?.workflowDocumentStatus?.documentStatusArName} )`
+            : ""}
+          <Box sx={{ flex: 1 }}></Box>
+          {workflowDocumentInfo?.workflowDocumentReport?.id ? (
+            <Button
+              onClick={() => {
+                setReportViewWindowState(true);
+              }}
+              variant="outlined"
+              startIcon={<FontAwesomeIcon icon="eye" />}
+            >
+              {t("VIEW_LABEL")}
+            </Button>
+          ) : (
+            <></>
+          )}
+        </Box>
+      ) : (
+        <></>
+      )}
+
+      <Box
+        sx={{
+          flex: 1,
+          width: "100%",
+          overflow: "hidden",
+          display: "flex",
+          // flexDirection: "column",
+        }}
+      >
+        {authorizedActions?.length > 0 ? (
+          <Paper
+            sx={{
+              padding: 2,
+              display: "flex",
+              flex: 1,
+              margin: 1,
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              overflow: "hidden",
+            }}
+          >
+            <ComboBox
+              sx={{ marginBottom: 2, width: 400 }}
+              label={t("WE_AVAILABLE_ACTIONS_LABEL")}
+              displayField={
+                AppLayout.appDirection === "ltr"
+                  ? "document_action_en_name"
+                  : "document_action_ar_name"
+              }
+              valueField={"id"}
+              value={action?.id}
+              options={authorizedActions}
+              onChangeCallBack={(v, selectedRecord) => {
+                setAction(selectedRecord);
+              }}
+            />
+            {/* <ComboBox
+          sx={{ marginBottom: 2, width: 400 }}
+          label={t("WE_NEXT_APPROVER_LABEL")}
+          displayField={
+            AppLayout.appDirection === "ltr"
+              ? "employeeEnName"
+              : "employeeArName"
+          }
+          valueField={"id"}
+          value={nextActionTaker?.id}
+          options={action?.nextActionTakers || []}
+          onChangeCallBack={(v, selectedRecord) => {
+            setNextActionTaker(selectedRecord);
+          }}
+        /> */}
+            <TemplateTextField
+              sx={{ width: 400 }}
+              rows={3}
+              value={actionComment}
+              onChange={(event) => {
+                setActionComment(event.target.value);
+              }}
+              multiline={true}
+              label={t("WF_COMMENT_LABEL")}
+            />
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <Button
+                color="success"
+                variant="contained"
+                sx={{ width: 200, m: 1 }}
+                onClick={validateBeforeProcessWorkflowDocumentAction}
+              >
+                {t("WF_TAKE_ACTION_BTN_LABEL")}
+              </Button>
+              {props?.cancelActionCallBk ? (
+                <Button
+                  variant="contained"
+                  sx={{ width: 200, m: 1 }}
+                  color="error"
+                  onClick={() => {
+                    if (props?.cancelActionCallBk) {
+                      props.cancelActionCallBk();
+                    }
+                  }}
+                >
+                  {t("WF_CANCEL_BTN_LABEL")}
+                </Button>
+              ) : (
+                <></>
+              )}
+            </Box>
+            {workflowDocumentInfo?.nextActionTakers &&
+            workflowDocumentInfo.nextActionTakers.length > 0 ? (
+              <>
+                <Divider
+                  variant="fullWidth"
+                  flexItem
+                  sx={{ marginTop: 1, marginBottom: 1 }}
+                >
+                  <Box
+                    sx={{
+                      width: "100%",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: 18,
+                      fontWeight: "bold",
+                    }}
+                  >
+                    <FontAwesomeIcon
+                      icon="users"
+                      style={{ marginRight: 10, marginLeft: 10 }}
+                    />{" "}
+                    {t("WF_WAITING_FOR_LABEL")}
+                  </Box>
+                </Divider>
+
+                <Box
+                  sx={{
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    overflow: "auto",
+                    padding: 1,
+                    width: "100%",
+                  }}
+                >
+                  {workflowDocumentInfo.nextActionTakers.map(
+                    (nextActionTaker: any) => {
+                      return (
+                        <Box
+                          sx={{
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            border: "1px dotted black",
+                            width: 400,
+                            marginBottom: 2,
+                            padding: 2,
+                          }}
+                        >
+                          <AttachmentImageViewer
+                            showAsAvatar={true}
+                            attachmentCode="EMPLOYEE_PHOTOS"
+                            refKey={nextActionTaker?.id || "0"}
+                            style={{
+                              marginRight: 2,
+                              marginLeft: 2,
+                              width: 60,
+                              height: 60,
+                            }}
+                          />
+                          <Box
+                            sx={{
+                              flex: 2,
+                              display: "flex",
+                              flexDirection: "column",
+                              alignItems: "flex-start",
+                              justifyContent: "center",
+                            }}
+                          >
+                            <div>
+                              {AppLayout.appDirection === "ltr"
+                                ? nextActionTaker?.employee_en_name
+                                : nextActionTaker?.employee_ar_name}
+                            </div>
+                            <div>
+                              {nextActionTaker?.email ? (
+                                <>
+                                  <FontAwesomeIcon
+                                    icon="envelope"
+                                    style={{ marginRight: 10, marginLeft: 10 }}
+                                  />
+                                  {nextActionTaker?.email}
+                                </>
+                              ) : (
+                                <></>
+                              )}
+                            </div>
+                            <div>
+                              {nextActionTaker?.mobile_number ? (
+                                <>
+                                  <FontAwesomeIcon
+                                    icon="mobile"
+                                    style={{ marginRight: 10, marginLeft: 10 }}
+                                  />
+                                  {nextActionTaker?.mobile_number}
+                                </>
+                              ) : (
+                                <></>
+                              )}
+                            </div>
+                          </Box>
+                        </Box>
+                      );
+                    }
+                  )}
+                </Box>
+              </>
+            ) : (
+              <></>
+            )}
+          </Paper>
+        ) : (
+          <></>
+        )}
+        {workflowDocumentInfo?.actionsHistory.length > 0 ? (
+          <WorkflowDocumentTimeLine
+            actionHistory={workflowDocumentInfo.actionsHistory}
+          />
+        ) : (
+          <Paper
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              flexGrow: 1,
+              padding: 2,
+              margin: 1,
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Box
+              sx={{
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 18,
+                fontWeight: "bold",
+              }}
+            >
+              <FontAwesomeIcon
+                icon="history"
+                style={{ marginRight: 10, marginLeft: 10 }}
+              />
+              {t("WF_ACTION_HISTORY_LABEL")}
+            </Box>
+            <Box
+              sx={{
+                flex: 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              No Action Log available
+            </Box>
+          </Paper>
+        )}
+      </Box>
+    </>
+  );
+};
+
+export default WorkflowDocumentPanel;