- nuke visible from the face of the earth with fire.

Signed-off-by: Dave Richer <dave@imexsystems.ca>
2024-01-12 17:25:25 -05:00
parent 7d6e61043e
commit ba32a71786
58 changed files with 227 additions and 229 deletions
--- a/client/src/components/bill-detail-edit/bill-detail-edit-component.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit-component.jsx
@@ -48,7 +48,7 @@ export function BillDetailEditcontainer({setPartsOrderContext, insertAuditTrail,

    const {t} = useTranslation();
    const [form] = Form.useForm();
-    const [visible, setVisible] = useState(false);
+    const [open, setOpen] = useState(false);
    const [updateLoading, setUpdateLoading] = useState(false);
    const [update_bill] = useMutation(UPDATE_BILL);
    const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
@@ -71,7 +71,7 @@ export function BillDetailEditcontainer({setPartsOrderContext, insertAuditTrail,
            form.getFieldValue("billlines").filter((b) => b.deductedfromlbr).length >
            0
        )
-            setVisible(true);
+            setOpen(true);
        else {
            form.submit();
        }
@@ -154,7 +154,7 @@ export function BillDetailEditcontainer({setPartsOrderContext, insertAuditTrail,
        await refetch();
        form.setFieldsValue(transformData(data));
        form.resetFields();
-        setVisible(false);
+        setOpen(false);
        setUpdateLoading(false);
    };

@@ -178,9 +178,9 @@ export function BillDetailEditcontainer({setPartsOrderContext, insertAuditTrail,
                <BillDetailEditReturn data={data} />
                <BillPrintButton billid={search.billid} />
                <Popconfirm
-                  open={visible}
+                  open={open}
                  onConfirm={() => form.submit()}
-                  onCancel={() => setVisible(false)}
+                  onCancel={() => setOpen(false)}
                  okButtonProps={{ loading: updateLoading }}
                  title={t("bills.labels.editadjwarning")}
                >
--- a/client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx
@@ -36,7 +36,7 @@ export function BillDetailEditReturn({
  const history = useNavigate();
  const { t } = useTranslation();
  const [form] = Form.useForm();
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);

  const handleFinish = ({ billlines }) => {
    const selectedLines = billlines.filter((l) => l.selected).map((l) => l.id);
@@ -68,17 +68,17 @@ export function BillDetailEditReturn({
    delete search.billid;

    history({ search: queryString.stringify(search) });
-    setVisible(false);
+    setOpen(false);
  };
  useEffect(() => {
-    if (visible === false) form.resetFields();
-  }, [visible, form]);
+    if (open === false) form.resetFields();
+  }, [open, form]);

  return (
    <>
      <Modal
-        open={visible}
-        onCancel={() => setVisible(false)}
+        open={open}
+        onCancel={() => setOpen(false)}
        destroyOnClose
        title={t("bills.actions.return")}
        onOk={() => form.submit()}
@@ -175,7 +175,7 @@ export function BillDetailEditReturn({
      <Button
        disabled={data.bills_by_pk.is_credit_memo || disabled}
        onClick={() => {
-          setVisible(true);
+          setOpen(true);
        }}
      >
        {t("bills.actions.return")}
--- a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
+++ b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
@@ -346,18 +346,18 @@ function BillEnterModalContainer({
  }, [enterAgain, form]);

  useEffect(() => {
-    if (billEnterModal.visible) {
+    if (billEnterModal.open) {
      form.setFieldsValue(formValues);
    } else {
      form.resetFields();
    }
-  }, [billEnterModal.visible, form, formValues]);
+  }, [billEnterModal.open, form, formValues]);

  return (
    <Modal
      title={t("bills.labels.new")}
      width={"98%"}
-      open={billEnterModal.visible}
+      open={billEnterModal.open}
      okText={t("general.actions.save")}
      keyboard="false"
      onOk={() => form.submit()}
--- a/client/src/components/ca-bc-etf-table-modal/ca-bc-etf-table-modal.container.jsx
+++ b/client/src/components/ca-bc-etf-table-modal/ca-bc-etf-table-modal.container.jsx
@@ -25,7 +25,7 @@ export function ContractsFindModalContainer({
 }) {
  const { t } = useTranslation();

-  const { visible } = caBcEtfTableModal;
+  const { open } = caBcEtfTableModal;
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const EtfTemplate = TemplateList("special").ca_bc_etf_table;
@@ -63,14 +63,14 @@ export function ContractsFindModalContainer({
  };

  useEffect(() => {
-    if (visible) {
+    if (open) {
      form.resetFields();
    }
-  }, [visible, form]);
+  }, [open, form]);

  return (
    <Modal
-      open={visible}
+      open={open}
      width="70%"
      title={t("payments.labels.findermodal")}
      onCancel={() => toggleModalVisible()}
--- a/client/src/components/card-payment-modal/card-payment-modal.container..jsx
+++ b/client/src/components/card-payment-modal/card-payment-modal.container..jsx
@@ -22,7 +22,7 @@ function CardPaymentModalContainer({
  toggleModalVisible,
  bodyshop,
 }) {
-  const { visible } = cardPaymentModal;
+  const { open } = cardPaymentModal;
  const { t } = useTranslation();

  const handleCancel = () => {
@@ -35,7 +35,7 @@ function CardPaymentModalContainer({

  return (
    <Modal
-      open={visible}
+      open={open}
      onOk={handleOK}
      onCancel={handleCancel}
      footer={[
--- a/client/src/components/chat-media-selector/chat-media-selector.component.jsx
+++ b/client/src/components/chat-media-selector/chat-media-selector.component.jsx
@@ -27,7 +27,7 @@ export function ChatMediaSelector({
  conversation,
 }) {
  const { t } = useTranslation();
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);

  const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
    fetchPolicy: "network-only",
@@ -39,13 +39,13 @@ export function ChatMediaSelector({
    },

    skip:
-      !visible ||
+      !open ||
      !conversation.job_conversations ||
      conversation.job_conversations.length === 0,
  });

-  const handleVisibleChange = (visible) => {
-    setVisible(visible);
+  const handleVisibleChange = (change) => {
+    setOpen(change);
  };

  useEffect(() => {
@@ -65,7 +65,7 @@ export function ChatMediaSelector({
          externalMediaState={[selectedMedia, setSelectedMedia]}
        />
      )}
-      {bodyshop.uselocalmediaserver && visible && (
+      {bodyshop.uselocalmediaserver && open && (
        <JobDocumentsLocalGalleryExternal
          externalMediaState={[selectedMedia, setSelectedMedia]}
          jobId={
@@ -88,7 +88,7 @@ export function ChatMediaSelector({
      }
      title={t("messaging.labels.selectmedia")}
      trigger="click"
-      open={visible}
+      open={open}
      onOpenChange={handleVisibleChange}
    >
      <Badge count={selectedMedia.filter((s) => s.isSelected).length}>
--- a/client/src/components/chat-tag-ro/chat-tag-ro.component.jsx
+++ b/client/src/components/chat-tag-ro/chat-tag-ro.component.jsx
@@ -9,7 +9,7 @@ export default function ChatTagRoComponent({
  loading,
  handleSearch,
  handleInsertTag,
-  setVisible,
+  setOpen,
 }) {
  const { t } = useTranslation();

@@ -38,7 +38,7 @@ export default function ChatTagRoComponent({
      {loading ? (
        <LoadingOutlined />
      ) : (
-        <CloseCircleOutlined onClick={() => setVisible(false)} />
+        <CloseCircleOutlined onClick={() => setOpen(false)} />
      )}
    </Space>
  );
--- a/client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
+++ b/client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
@@ -11,7 +11,7 @@ import ChatTagRo from "./chat-tag-ro.component";

 export default function ChatTagRoContainer({ conversation }) {
  const { t } = useTranslation();
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);

  const [loadRo, { loading, data }] = useLazyQuery(SEARCH_FOR_JOBS);

@@ -33,7 +33,7 @@ export default function ChatTagRoContainer({ conversation }) {
  const handleInsertTag = (value, option) => {
    logImEXEvent("messaging_add_job_tag");
    insertTag({ variables: { jobId: option.key } });
-    setVisible(false);
+    setOpen(false);
  };

  const existingJobTags =
@@ -47,16 +47,16 @@ export default function ChatTagRoContainer({ conversation }) {

  return (
    <div>
-      {visible ? (
+      {open ? (
        <ChatTagRo
          loading={loading}
          roOptions={roOptions}
          handleSearch={handleSearch}
          handleInsertTag={handleInsertTag}
-          setVisible={setVisible}
+          setOpen={setOpen}
        />
      ) : (
-        <Tag onClick={() => setVisible(true)}>
+        <Tag onClick={() => setOpen(true)}>
          <PlusOutlined />
          {t("messaging.actions.link")}
        </Tag>
--- a/client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx
+++ b/client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx
@@ -38,7 +38,7 @@ export function ContractConvertToRo({
  disabled,
 }) {
  const { t } = useTranslation();
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [insertJob] = useMutation(INSERT_NEW_JOB);
  const history = useNavigate();
@@ -306,7 +306,7 @@ export function ContractConvertToRo({
      });
    }

-    setVisible(false);
+    setOpen(false);
    setLoading(false);
  };

@@ -380,7 +380,7 @@ export function ContractConvertToRo({
          <Button type="primary" htmlType="submit" loading={loading}>
            {t("contracts.actions.convertoro")}
          </Button>
-          <Button onClick={() => setVisible(false)}>
+          <Button onClick={() => setOpen(false)}>
            {t("general.actions.close")}
          </Button>
        </Space>
@@ -390,9 +390,9 @@ export function ContractConvertToRo({

  return (
    <div>
-      <Popover content={popContent} open={visible}>
+      <Popover content={popContent} open={open}>
        <Button
-          onClick={() => setVisible(true)}
+          onClick={() => setOpen(true)}
          loading={loading}
          disabled={!contract.dailyrate || !contract.actualreturn || disabled}
        >
--- a/client/src/components/contracts-find-modal/contracts-find-modal.container.jsx
+++ b/client/src/components/contracts-find-modal/contracts-find-modal.container.jsx
@@ -31,7 +31,7 @@ export function ContractsFindModalContainer({
 }) {
  const { t } = useTranslation();

-  const { visible } = contractFinderModal;
+  const { open } = contractFinderModal;

  const [form] = Form.useForm();

@@ -52,14 +52,14 @@ export function ContractsFindModalContainer({
  };

  useEffect(() => {
-    if (visible) {
+    if (open) {
      form.resetFields();
    }
-  }, [visible, form]);
+  }, [open, form]);

  return (
    <Modal
-      open={visible}
+      open={open}
      width="70%"
      title={t("contracts.labels.findermodal")}
      onCancel={() => toggleModalVisible()}
--- a/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx
+++ b/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx
@@ -26,7 +26,7 @@ export function CCReturnModalContainer({
  bodyshop,
 }) {
  const [loading, setLoading] = useState(false);
-  const { visible, context, actions } = courtesyCarReturnModal;
+  const { open, context, actions } = courtesyCarReturnModal;
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const [updateContract] = useMutation(RETURN_CONTRACT);
@@ -64,7 +64,7 @@ export function CCReturnModalContainer({
  return (
    <Modal
      title={t("courtesycars.labels.return")}
-      open={visible}
+      open={open}
      onCancel={() => toggleModalVisible()}
      width={"90%"}
      okText={t("general.actions.save")}
--- a/client/src/components/data-label/data-label.component.jsx
+++ b/client/src/components/data-label/data-label.component.jsx
@@ -6,13 +6,13 @@ export default function DataLabel({
  hideIfNull,
  children,
  vertical,
-  visible = true,
+  open = true,
  valueStyle = {},
  valueClassName,
  onValueClick,
  ...props
 }) {
-  if (!visible || (hideIfNull && !!!children)) return null;
+  if (!open || (hideIfNull && !!!children)) return null;

  return (
    <div {...props} style={{ display: "flex" }}>
--- a/client/src/components/dms-cdk-makes/dms-cdk-makes.component.jsx
+++ b/client/src/components/dms-cdk-makes/dms-cdk-makes.component.jsx
@@ -18,7 +18,7 @@ const mapDispatchToProps = (dispatch) => ({
 export default connect(mapStateToProps, mapDispatchToProps)(DmsCdkVehicles);

 export function DmsCdkVehicles({ bodyshop, form, socket, job }) {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [selectedModel, setSelectedModel] = useState(null);
  const { t } = useTranslation();

@@ -51,14 +51,14 @@ export function DmsCdkVehicles({ bodyshop, form, socket, job }) {
    <>
      <Modal
        width={"90%"}
-        open={visible}
-        onCancel={() => setVisible(false)}
+        open={open}
+        onCancel={() => setOpen(false)}
        onOk={() => {
          form.setFieldsValue({
            dms_make: selectedModel.makecode,
            dms_model: selectedModel.modelcode,
          });
-          setVisible(false);
+          setOpen(false);
        }}
      >
        {error && <AlertComponent error={error.message} />}
@@ -90,7 +90,7 @@ export function DmsCdkVehicles({ bodyshop, form, socket, job }) {
      </Modal>
      <Button
        onClick={() => {
-          setVisible(true);
+          setOpen(true);
          callSearch({
            variables: {
              search: job && job.v_model_desc && job.v_model_desc.substr(0, 3),
--- a/client/src/components/dms-customer-selector/dms-customer-selector.component.jsx
+++ b/client/src/components/dms-customer-selector/dms-customer-selector.component.jsx
@@ -21,29 +21,29 @@ export default connect(
 export function DmsCustomerSelector({ bodyshop }) {
  const { t } = useTranslation();
  const [customerList, setcustomerList] = useState([]);
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [selectedCustomer, setSelectedCustomer] = useState(null);
  const [dmsType, setDmsType] = useState("cdk");

  socket.on("cdk-select-customer", (customerList, callback) => {
-    setVisible(true);
+    setOpen(true);
    setDmsType("cdk");
    setcustomerList(customerList);
  });
  socket.on("pbs-select-customer", (customerList, callback) => {
-    setVisible(true);
+    setOpen(true);
    setDmsType("pbs");
    setcustomerList(customerList);
  });

  const onUseSelected = () => {
-    setVisible(false);
+    setOpen(false);
    socket.emit(`${dmsType}-selected-customer`, selectedCustomer);
    setSelectedCustomer(null);
  };

  const onUseGeneric = () => {
-    setVisible(false);
+    setOpen(false);
    socket.emit(
      `${dmsType}-selected-customer`,
      bodyshop.cdk_configuration.generic_customer_number
@@ -52,7 +52,7 @@ export function DmsCustomerSelector({ bodyshop }) {
  };

  const onCreateNew = () => {
-    setVisible(false);
+    setOpen(false);
    socket.emit(`${dmsType}-selected-customer`, null);
    setSelectedCustomer(null);
  };
@@ -114,7 +114,7 @@ export function DmsCustomerSelector({ bodyshop }) {
    },
  ];

-  if (!visible) return null;
+  if (!open) return null;
  return (
    <Col span={24}>
      <Table
--- a/client/src/components/inventory-upsert-modal/inventory-upsert-modal.container.jsx
+++ b/client/src/components/inventory-upsert-modal/inventory-upsert-modal.container.jsx
@@ -36,7 +36,7 @@ export function InventoryUpsertModalContainer({
  const [insertInventory] = useMutation(INSERT_INVENTORY_LINE);
  const [updateInventoryLine] = useMutation(UPDATE_INVENTORY_LINE);

-  const { visible, context, actions } = inventoryUpsertModal;
+  const { open, context, actions } = inventoryUpsertModal;
  const { existingInventory } = context;
  const { refetch } = actions;

@@ -44,12 +44,12 @@ export function InventoryUpsertModalContainer({

  useEffect(() => {
    //Required to prevent infinite looping.
-    if (existingInventory && visible) {
+    if (existingInventory && open) {
      form.setFieldsValue(existingInventory);
-    } else if (!existingInventory && visible) {
+    } else if (!existingInventory && open) {
      form.resetFields();
    }
-  }, [existingInventory, form, visible]);
+  }, [existingInventory, form, open]);

  const handleFinish = async (formValues) => {
    const values = formValues;
@@ -103,7 +103,7 @@ export function InventoryUpsertModalContainer({
          ? t("inventory.actions.edit")
          : t("inventory.actions.new")
      }
-      open={visible}
+      open={open}
      okText={t("general.actions.save")}
      onOk={() => {
        form.submit();
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -57,7 +57,7 @@ export function ScheduleEventComponent({
  setScheduleContext,
 }) {
  const { t } = useTranslation();
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const history = useNavigate();
  const searchParams = queryString.parse(useLocation().search);
  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
@@ -223,7 +223,7 @@ export function ScheduleEventComponent({
                                        time: dayjs(event.start).format("HH:mm a"),
                                    })
                                );
-                                setVisible(false);
+                                setOpen(false);
                            } else {
                                notification["error"]({
                                    message: t("messaging.error.invalidphone"),
@@ -290,7 +290,7 @@ export function ScheduleEventComponent({
          <Button
            disabled={event.arrived}
            onClick={() => {
-              setVisible(false);
+              setOpen(false);
              setScheduleContext({
                actions: { refetch: refetch },
                context: {
@@ -366,8 +366,8 @@ export function ScheduleEventComponent({

  return (
    <Popover
-      open={visible}
-      onOpenChange={(vis) => !event.vacation && setVisible(vis)}
+      open={open}
+      onOpenChange={(vis) => !event.vacation && setOpen(vis)}
      trigger="click"
      content={event.block ? blockContent : popoverContent}
      style={{
--- a/client/src/components/job-costing-modal/job-costing-modal.container.jsx
+++ b/client/src/components/job-costing-modal/job-costing-modal.container.jsx
@@ -23,23 +23,23 @@ export function JobCostingModalContainer({
 }) {
  const { t } = useTranslation();
  const [costingData, setCostingData] = useState(null);
-  const { visible, context } = jobCostingModal;
+  const { open, context } = jobCostingModal;
  const { jobId } = context;

  useEffect(() => {
    async function getData() {
-      if (jobId && visible) {
+      if (jobId && open) {
        const { data } = await axios.post("/job/costing", { jobid: jobId });

        setCostingData(data);
      }
    }
    getData();
-  }, [jobId, visible]);
+  }, [jobId, open]);

  return (
    <Modal
-      open={visible}
+      open={open}
      title={t("jobs.labels.jobcosting")}
      onOk={() => {
        toggleModalVisible();
--- a/client/src/components/job-detail-cards/job-detail-cards.insurance.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.insurance.component.jsx
@@ -17,7 +17,7 @@ export default function JobDetailCardsInsuranceComponent({ loading, data }) {
          </DataLabel>
          <DataLabel
            label={t("jobs.labels.cards.filehandler")}
-            visible={data.ins_ct_fn && data.ins_ct_ln}>
+            open={data.ins_ct_fn && data.ins_ct_ln}>
            {data.ins_ea ? (
              <a href={`mailto:${data.ins_ea}`}>
                <div>{`${data.ins_ct_fn || ""} ${data.ins_ct_ln || ""}`}</div>
@@ -28,7 +28,7 @@ export default function JobDetailCardsInsuranceComponent({ loading, data }) {
          </DataLabel>
          <DataLabel
            label={t("jobs.labels.cards.estimator")}
-            visible={data.est_ct_fn && data.est_ct_ln}>
+            open={data.est_ct_fn && data.est_ct_ln}>
            {data.ins_ea ? (
              <a href={`mailto:${data.est_ea}`}>
                <div>{`${data.est_ct_fn || ""} ${data.est_ct_ln || ""}`}</div>
--- a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx
+++ b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx
@@ -22,7 +22,7 @@ export default connect(

 export function JobLinesUpsertModalComponent({
  bodyshop,
-  visible,
+  open,
  jobLine,
  handleCancel,
  handleFinish,
@@ -33,7 +33,7 @@ export function JobLinesUpsertModalComponent({

  useEffect(() => {
    form.resetFields();
-  }, [visible, form]);
+  }, [open, form]);


  const { treatments: {Allow_Negative_Jobline_Price, Autohouse_Detail_line} } = useSplitTreatments({
@@ -50,7 +50,7 @@ export function JobLinesUpsertModalComponent({
          : t("joblines.labels.new")
      }
      forceRender
-      open={visible}
+      open={open}
      width="60%"
      okText={t("general.actions.save")}
      onOk={() => form.submit()}
--- a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx
+++ b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx
@@ -133,7 +133,7 @@ function JobLinesUpsertModalContainer({

  return (
    <JobLinesUpdsertModal
-      visible={jobLineEditModal.visible}
+      open={jobLineEditModal.open}
      jobLine={jobLineEditModal.context}
      handleFinish={handleFinish}
      handleCancel={handleCancel}
--- a/client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx
+++ b/client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx
@@ -24,12 +24,12 @@ function JobReconciliationModalContainer({
  toggleModalVisible,
 }) {
  const { t } = useTranslation();
-  const { context, visible } = reconciliationModal;
+  const { context, open } = reconciliationModal;
  const { job } = context;

  const { loading, error, data } = useQuery(GET_JOB_RECONCILIATION_BY_PK, {
    variables: { id: job && job.id },
-    skip: !(job && job.id) || !visible,
+    skip: !(job && job.id) || !open,
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
  });
@@ -42,7 +42,7 @@ function JobReconciliationModalContainer({
    <Modal
      title={t("jobs.labels.reconciliationheader")}
      width={"95%"}
-      open={visible}
+      open={open}
      okText={t("general.actions.close")}
      onOk={handleCancel}
      onCancel={handleCancel}
--- a/client/src/components/jobs-available-table/jobs-available-table.container.jsx
+++ b/client/src/components/jobs-available-table/jobs-available-table.container.jsx
@@ -379,7 +379,7 @@ export function JobsAvailableContainer({bodyshop, currentUser, insertAuditTrail,
        setPartsQueueToggle={setPartsQueueToggle}
        selectedOwner={selectedOwner}
        setSelectedOwner={setSelectedOwner}
-        visible={ownerModalVisible}
+        open={ownerModalVisible}
        onOk={onOwnerFindModalOk}
        onCancel={onOwnerModalCancel}

@@ -390,7 +390,7 @@ export function JobsAvailableContainer({bodyshop, currentUser, insertAuditTrail,
        selectedJob={selectedJob}
        setSelectedJob={setSelectedJob}
        importOptionsState={importOptionsState}
-        visible={jobModalVisible}
+        open={jobModalVisible}
        onOk={onJobFindModalOk}
        onCancel={onJobModalCancel}
        modalSearchState={modalSearchState}
--- a/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
+++ b/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
@@ -37,7 +37,7 @@ export function JobsConvertButton({
  insertAuditTrail,
  parentFormIsFieldsTouched,
 }) {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [mutationConvertJob] = useMutation(CONVERT_JOB_TO_RO);
  const { t } = useTranslation();
@@ -80,7 +80,7 @@ export function JobsConvertButton({
        ),
      });

-      setVisible(false);
+      setOpen(false);
    }
    setLoading(false);
  };
@@ -246,7 +246,7 @@ export function JobsConvertButton({
          <Button type="primary" danger onClick={() => form.submit()} loading={loading}>
            {t("jobs.actions.convert")}
          </Button>
-          <Button onClick={() => setVisible(false)}>
+          <Button onClick={() => setOpen(false)}>
            {t("general.actions.close")}
          </Button>
        </Space>
@@ -257,7 +257,7 @@ export function JobsConvertButton({
  if (job.converted) return <></>;

  return (
-    <Popover open={visible} content={popMenu}>
+    <Popover open={open} content={popMenu}>
      <Button
        key="convert"
        type="primary"
@@ -266,7 +266,7 @@ export function JobsConvertButton({
        disabled={job.converted || jobRO}
        loading={loading}
        onClick={() => {
-          setVisible(true);
+          setOpen(true);
          form.setFieldsValue({
            driveable: true,
            towin: false,
--- a/client/src/components/jobs-documents-gallery/jobs-document-gallery.reassign.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-document-gallery.reassign.component.jsx
@@ -35,7 +35,7 @@ export function JobsDocumentsGalleryReassign({
    ];
  }, [galleryImages]);
  const client = useApolloClient();
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  // const updateImage = async (i, jobid) => {
@@ -126,7 +126,7 @@ export function JobsDocumentsGalleryReassign({
        message: t("documents.successes.updated"),
      });
    }
-    setVisible(false);
+    setOpen(false);
    setLoading(false);
  };

@@ -151,7 +151,7 @@ export function JobsDocumentsGalleryReassign({
        <Button type="primary" onClick={() => form.submit()}>
          {t("general.actions.submit")}
        </Button>
-        <Button onClick={() => setVisible(false)}>
+        <Button onClick={() => setOpen(false)}>
          {t("general.actions.cancel")}
        </Button>
      </Space>
@@ -159,10 +159,10 @@ export function JobsDocumentsGalleryReassign({
  );

  return (
-    <Popover content={popContent} open={visible}>
+    <Popover content={popContent} open={open}>
      <Button
        disabled={selectedImages.length < 1}
-        onClick={() => setVisible(true)}
+        onClick={() => setOpen(true)}
        loading={loading}
      >
        {t("documents.actions.reassign")}
--- a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.reassign.component.jsx
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.reassign.component.jsx
@@ -32,7 +32,7 @@ export function JobsDocumentsLocalGalleryReassign({
  const { t } = useTranslation();
  const [form] = Form.useForm();

-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleFinish = async ({ jobid: newJobid }) => {
@@ -50,7 +50,7 @@ export function JobsDocumentsLocalGalleryReassign({
    );

    getJobMedia(jobid);
-    setVisible(false);
+    setOpen(false);
    setLoading(false);
  };

@@ -75,7 +75,7 @@ export function JobsDocumentsLocalGalleryReassign({
        <Button type="primary" onClick={() => form.submit()}>
          {t("general.actions.submit")}
        </Button>
-        <Button onClick={() => setVisible(false)}>
+        <Button onClick={() => setOpen(false)}>
          {t("general.actions.cancel")}
        </Button>
      </Space>
@@ -83,10 +83,10 @@ export function JobsDocumentsLocalGalleryReassign({
  );

  return (
-    <Popover content={popContent} open={visible}>
+    <Popover content={popContent} open={open}>
      <Button
        //disabled={selectedImages.length < 1}
-        onClick={() => setVisible(true)}
+        onClick={() => setOpen(true)}
        loading={loading}
      >
        {t("documents.actions.reassign")}
--- a/client/src/components/jobs-find-modal/jobs-find-modal.container.jsx
+++ b/client/src/components/jobs-find-modal/jobs-find-modal.container.jsx
@@ -34,7 +34,7 @@ export default connect(
    variables: {
      statuses: bodyshop.md_ro_statuses.active_statuses || ["Open"],
    },
-    skip: !modalProps.visible,
+    skip: !modalProps.open,
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
  });
--- a/client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.jsx
+++ b/client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.jsx
@@ -37,7 +37,7 @@ export function LaborAllocationsAdjustmentEdit({
  refetchQueryNames,
 }) {
  const [loading, setLoading] = useState(false);
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [updateAdjustments] = useMutation(UPDATE_JOB);
  const [form] = Form.useForm();

@@ -79,7 +79,7 @@ export function LaborAllocationsAdjustmentEdit({
      });
    }
    setLoading(false);
-    setVisible(false);
+    setOpen(false);
  };

  const overlay = (
@@ -171,8 +171,8 @@ export function LaborAllocationsAdjustmentEdit({

  return (
    <Popover
-      open={visible}
-      onOpenChange={(vis) => setVisible(vis)}
+      open={open}
+      onOpenChange={(vis) => setOpen(vis)}
      content={overlay}
      trigger="click"
    >
--- a/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
+++ b/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
@@ -33,7 +33,7 @@ export function NoteUpsertModalContainer({
  const [insertNote] = useMutation(INSERT_NEW_NOTE);
  const [updateNote] = useMutation(UPDATE_NOTE);

-  const { visible, context, actions } = noteUpsertModal;
+  const { open, context, actions } = noteUpsertModal;
  const { jobId, existingNote, text } = context;
  const { refetch } = actions;

@@ -41,16 +41,16 @@ export function NoteUpsertModalContainer({

  useEffect(() => {
    //Required to prevent infinite looping.
-    if (existingNote && visible) {
+    if (existingNote && open) {
      form.setFieldsValue(existingNote);
-    } else if (!existingNote && visible) {
+    } else if (!existingNote && open) {
      form.resetFields();

      if (text) {
        form.setFieldValue("text", text);
      }
    }
-  }, [existingNote, form, visible, text]);
+  }, [existingNote, form, open, text]);

  const handleFinish = async (formValues) => {
    const { relatedros, ...values } = formValues;
@@ -122,7 +122,7 @@ export function NoteUpsertModalContainer({
  return (
    <Modal
      title={existingNote ? t("notes.actions.edit") : t("notes.actions.new")}
-      open={visible}
+      open={open}
      okText={t("general.actions.save")}
      onOk={() => {
        form.submit();
--- a/client/src/components/parts-order-modal/parts-order-modal.container.jsx
+++ b/client/src/components/parts-order-modal/parts-order-modal.container.jsx
@@ -50,7 +50,7 @@ export function PartsOrderModalContainer({partsOrderModal,toggleModalVisible,cur
        splitKey: bodyshop.imexshopid,
    });

-    const {visible, context, actions} = partsOrderModal;
+    const {open, context, actions} = partsOrderModal;
    const {
        jobId,
        linesToOrder,
@@ -68,7 +68,7 @@ export function PartsOrderModalContainer({partsOrderModal,toggleModalVisible,cur
    const sendType = sendTypeState[0];

    const {loading, error, data} = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
-        skip: !visible,
+        skip: !open,
        variables: {jobId: jobId},
        fetchPolicy: "network-only",
        nextFetchPolicy: "network-only",
@@ -328,14 +328,14 @@ export function PartsOrderModalContainer({partsOrderModal,toggleModalVisible,cur
    };

    useEffect(() => {
-        if (visible && !!linesToOrder) {
+        if (open && !!linesToOrder) {
            form.resetFields();
        }
-    }, [visible, linesToOrder, form]);
+    }, [open, linesToOrder, form]);

    return (
        <Modal
-            open={visible}
+            open={open}
            title={
                isReturn
                    ? `${t("parts_orders.labels.returnpartsorder")} ${invoiceNumber}`
--- a/client/src/components/parts-receive-modal/parts-receive-modal.container.jsx
+++ b/client/src/components/parts-receive-modal/parts-receive-modal.container.jsx
@@ -32,7 +32,7 @@ export function PartsReceiveModalContainer({
 }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
-  const { visible, context, actions } = partsReceiveModal;
+  const { open, context, actions } = partsReceiveModal;
  const { partsorderlines } = context;

  const { refetch } = actions;
@@ -85,14 +85,14 @@ export function PartsReceiveModalContainer({
  };

  useEffect(() => {
-    if (visible && !!partsorderlines) {
+    if (open && !!partsorderlines) {
      form.resetFields();
    }
-  }, [visible, partsorderlines, form]);
+  }, [open, partsorderlines, form]);

  return (
    <Modal
-      open={visible}
+      open={open}
      title={t("parts_orders.labels.receive")}
      onCancel={() => toggleModalVisible()}
      onOk={() => form.submit()}
--- a/client/src/components/payable-mark-selected-exported/payable-mark-selected-exported.component.jsx
+++ b/client/src/components/payable-mark-selected-exported/payable-mark-selected-exported.component.jsx
@@ -34,7 +34,7 @@ export function BillMarkSelectedExported({
 }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
  const [updateBill] = useMutation(gql`
    mutation UPDATE_BILL($billIds: [uuid!]!) {
@@ -85,21 +85,21 @@ export function BillMarkSelectedExported({
    completedCallback && completedCallback([]);
    setLoading(false);
    refetch && refetch();
-    setVisible(false);
+    setOpen(false);
  };

  return (
    <Popconfirm
-      open={visible}
+      open={open}
      title={t("general.labels.areyousure")}
-      onCancel={() => setVisible(false)}
+      onCancel={() => setOpen(false)}
      onConfirm={handleUpdate}
      disabled={disabled}
    >
      <Button
        loading={loading}
        disabled={disabled}
-        onClick={() => setVisible(true)}
+        onClick={() => setOpen(true)}
      >
        {t("bills.labels.markexported")}
      </Button>
--- a/client/src/components/payment-mark-selected-exported/payment-mark-selected-exported.component.jsx
+++ b/client/src/components/payment-mark-selected-exported/payment-mark-selected-exported.component.jsx
@@ -34,7 +34,7 @@ export function PaymentMarkSelectedExported({
 }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);

  const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
  const [updatePayments] = useMutation(gql`
@@ -88,21 +88,21 @@ export function PaymentMarkSelectedExported({
    completedCallback && completedCallback([]);
    setLoading(false);
    refetch && refetch();
-    setVisible(false);
+    setOpen(false);
  };

  return (
    <Popconfirm
-      open={visible}
+      open={open}
      title={t("general.labels.areyousure")}
-      onCancel={() => setVisible(false)}
+      onCancel={() => setOpen(false)}
      onConfirm={handleUpdate}
      disabled={disabled}
    >
      <Button
        loading={loading}
        disabled={disabled}
-        onClick={() => setVisible(true)}
+        onClick={() => setOpen(true)}
      >
        {t("bills.labels.markexported")}
      </Button>
--- a/client/src/components/payment-modal/payment-modal.container.jsx
+++ b/client/src/components/payment-modal/payment-modal.container.jsx
@@ -46,7 +46,7 @@ function PaymentModalContainer({
  const [updatePayment] = useMutation(UPDATE_PAYMENT);

  const { t } = useTranslation();
-  const { context, actions, visible } = paymentModal;
+  const { context, actions, open } = paymentModal;

  const [loading, setLoading] = useState(false);

@@ -130,12 +130,12 @@ function PaymentModalContainer({
  };

  useEffect(() => {
-    if (visible) {
+    if (open) {
      form.resetFields();
      form.resetFields();
      form.setFieldsValue(context);
    }
-  }, [visible, form, context]);
+  }, [open, form, context]);

  useEffect(() => {
    if (enterAgain) form.submit();
@@ -148,7 +148,7 @@ function PaymentModalContainer({
          ? t("payments.labels.new")
          : t("payments.labels.edit")
      }
-      open={visible}
+      open={open}
      destroyOnClose
      okText={t("general.actions.save")}
      onOk={() => form.submit()}
--- a/client/src/components/payments-generate-link/payments-generate-link.component.jsx
+++ b/client/src/components/payments-generate-link/payments-generate-link.component.jsx
@@ -36,7 +36,7 @@ export function PaymentsGenerateLink({
  const { t } = useTranslation();
  const [form] = Form.useForm();

-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [paymentLink, setPaymentLink] = useState(null);

@@ -69,7 +69,7 @@ export function PaymentsGenerateLink({
    //Add in confirmation & errors.
    if (callback) callback();

-    // setVisible(false);
+    // setOpen(false);
    setLoading(false);
  };

@@ -137,7 +137,7 @@ export function PaymentsGenerateLink({
          onClick={() => {
            form.resetFields();
            setPaymentLink(null);
-            setVisible(false);
+            setOpen(false);
          }}
        >
          {t("general.actions.cancel")}
@@ -147,8 +147,8 @@ export function PaymentsGenerateLink({
  );

  return (
-    <Popover content={popContent} open={visible}>
-      <Button onClick={() => setVisible(true)} loading={loading}>
+    <Popover content={popContent} open={open}>
+      <Button onClick={() => setOpen(true)} loading={loading}>
        {t("payments.actions.generatepaymentlink")}
      </Button>
    </Popover>
--- a/client/src/components/print-center-modal/print-center-modal.container.jsx
+++ b/client/src/components/print-center-modal/print-center-modal.container.jsx
@@ -22,13 +22,13 @@ export function PrintCenterModalContainer({
 }) {
  const { t } = useTranslation();

-  const { visible, context } = printCenterModal;
+  const { open, context } = printCenterModal;
  //const { type } = context;
  // const { refetch } = actions;

  return (
    <Modal
-      open={visible}
+      open={open}
      onOk={() => toggleModalVisible()}
      onCancel={() => toggleModalVisible()}
      cancelButtonProps={{ style: { display: "none" } }}
--- a/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx
@@ -17,7 +17,7 @@ export default function ProductionBoardKanbanCardSettings({
  associationSettings,
 }) {
  const [form] = Form.useForm();
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);

@@ -25,7 +25,7 @@ export default function ProductionBoardKanbanCardSettings({
    form.setFieldsValue(
      associationSettings && associationSettings.kanban_settings
    );
-  }, [form, associationSettings, visible]);
+  }, [form, associationSettings, open]);

  const { t } = useTranslation();

@@ -45,7 +45,7 @@ export default function ProductionBoardKanbanCardSettings({
        }),
      });
    }
-    setVisible(false);
+    setOpen(false);
    setLoading(false);
  };

@@ -173,8 +173,8 @@ export default function ProductionBoardKanbanCardSettings({
    </div>
  );
  return (
-    <Popover content={overlay} open={visible} placement="topRight">
-      <Button loading={loading} onClick={() => setVisible(true)}>
+    <Popover content={overlay} open={open} placement="topRight">
+      <Button loading={loading} onClick={() => setOpen(true)}>
        {t("production.labels.cardsettings")}
      </Button>
    </Popover>
--- a/client/src/components/production-list-columns/production-list-columns.comment.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.comment.component.jsx
@@ -10,13 +10,13 @@ export default function ProductionListColumnComment({ record }) {

  const [note, setNote] = useState(record.comment || "");

-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);

  const [updateAlert] = useMutation(UPDATE_JOB);

  const handleSaveNote = (e) => {
    e.stopPropagation();
-    setVisible(false);
+    setOpen(false);
    updateAlert({
      variables: {
        jobId: record.id,
@@ -34,15 +34,15 @@ export default function ProductionListColumnComment({ record }) {
    setNote(e.target.value);
  };

-  const handleVisibleChange = (flag) => {
-    setVisible(flag);
+  const handleOpenChange = (flag) => {
+    setOpen(flag);
    if (flag) setNote(record.comment || "");
  };

  return (
    <Popover
-      onOpenChange={handleVisibleChange}
-      open={visible}
+      onOpenChange={handleOpenChange}
+      open={open}
      content={
        <div style={{ width: "30em" }}>
          <Input.TextArea
--- a/client/src/components/production-list-columns/production-list-columns.date.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.date.component.jsx
@@ -15,7 +15,7 @@ export default function ProductionListDate({
  pastIndicator,
 }) {
  const [updateAlert] = useMutation(UPDATE_JOB);
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const { t } = useTranslation();

  const handleChange = (date) => {
@@ -41,7 +41,7 @@ export default function ProductionListDate({
    }).then(() => {
      if (record.refetch) record.refetch();
      if (!time) {
-        setVisible(false);
+        setOpen(false);
      }
    });
  };
@@ -59,8 +59,8 @@ export default function ProductionListDate({
  return (
    <Dropdown
      trigger={["click"]}
-      onOpenChange={(v) => setVisible(v)}
-      open={visible}
+      onOpenChange={(v) => setOpen(v)}
+      open={open}
      style={{
        height: "19px",
      }}
@@ -82,14 +82,14 @@ export default function ProductionListDate({
              format="hh:mm a"
            />
          )}
-          <Button onClick={() => setVisible(false)}>
+          <Button onClick={() => setOpen(false)}>
            {t("general.actions.close")}
          </Button>
        </Card>
      }
    >
      <div
-        onClick={() => setVisible(true)}
+        onClick={() => setOpen(true)}
        style={{
          height: "19px",
        }}
--- a/client/src/components/production-list-columns/production-list-columns.lastcontacted.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.lastcontacted.component.jsx
@@ -26,7 +26,7 @@ export default connect(
 export function ProductionLastContacted({ currentUser, record }) {
  const [updateAlert] = useMutation(UPDATE_JOB);
  const [insertNote] = useMutation(INSERT_NEW_NOTE);
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const handleFinish = async ({
@@ -76,25 +76,25 @@ export function ProductionLastContacted({ currentUser, record }) {
    }
    if (record.refetch) record.refetch();

-    setVisible(false);
+    setOpen(false);
  };

  useEffect(() => {
-    if (visible) {
+    if (open) {
      form.setFieldsValue({
        note: null,
        date_last_contacted:
          record.date_last_contacted && dayjs(record.date_last_contacted),
      });
    }
-  }, [visible, form, record.date_last_contacted]);
+  }, [open, form, record.date_last_contacted]);

  // TODO - Client Update - Why is this a card?
  return (
    <div>
      <Dropdown
        //trigger={["click"]}
-        open={visible}
+        open={open}
        style={{
          height: "19px",
        }}
@@ -123,7 +123,7 @@ export function ProductionLastContacted({ currentUser, record }) {
                <Button type="primary" htmlType="submit">
                  {t("general.actions.save")}
                </Button>
-                <Button onClick={() => setVisible(false)}>
+                <Button onClick={() => setOpen(false)}>
                  {t("general.actions.close")}
                </Button>
              </Space>
@@ -132,7 +132,7 @@ export function ProductionLastContacted({ currentUser, record }) {
        }
      >
        <div
-          onClick={() => setVisible(true)}
+          onClick={() => setOpen(true)}
          style={{
            height: "19px",
          }}
--- a/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
@@ -24,14 +24,14 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
    (record.production_vars && record.production_vars.note) || ""
  );

-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);

  const [updateAlert] = useMutation(UPDATE_JOB);

  const handleSaveNote = (e) => {
    logImEXEvent("production_add_note");
    e.stopPropagation();
-    setVisible(false);
+    setOpen(false);
    updateAlert({
      variables: {
        jobId: record.id,
@@ -52,16 +52,16 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
    setNote(e.target.value);
  };

-  const handleVisibleChange = (flag) => {
-    setVisible(flag);
+  const handleOpenChange = (flag) => {
+    setOpen(flag);
    if (flag)
      setNote((record.production_vars && record.production_vars.note) || "");
  };

  return (
    <Popover
-      onOpenChange={handleVisibleChange}
-      open={visible}
+      onOpenChange={handleOpenChange}
+      open={open}
      content={
        <div style={{ width: "30em" }}>
          <Input.TextArea
@@ -79,7 +79,7 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
            </Button>
            <Button
              onClick={() => {
-                setVisible(false);
+                setOpen(false);
                setNoteUpsertContext({
                  context: {
                    jobId: record.id,
--- a/client/src/components/production-list-save-config-button/production-list-save-config-button.component.jsx
+++ b/client/src/components/production-list-save-config-button/production-list-save-config-button.component.jsx
@@ -23,7 +23,7 @@ export function ProductionListSaveConfigButton({
 }) {
  const [updateShop] = useMutation(UPDATE_SHOP);
  const [loading, setLoading] = useState(false);
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [form] = Form.useForm();

  const { t } = useTranslation();
@@ -61,7 +61,7 @@ export function ProductionListSaveConfigButton({
      });
    }
    form.resetFields();
-    setVisible(false);
+    setOpen(false);
    setLoading(false);
  };
  const popMenu = (
@@ -79,7 +79,7 @@ export function ProductionListSaveConfigButton({
          <Button type="primary" danger onClick={() => form.submit()} loading={loading}>
            {t("general.actions.save")}
          </Button>
-          <Button onClick={() => setVisible(false)}>
+          <Button onClick={() => setOpen(false)}>
            {t("general.actions.close")}
          </Button>
        </Space>
@@ -88,8 +88,8 @@ export function ProductionListSaveConfigButton({
  );

  return (
-    <Popover open={visible} content={popMenu}>
-      <Button loading={loading} onClick={() => setVisible(true)}>
+    <Popover open={open} content={popMenu}>
+      <Button loading={loading} onClick={() => setOpen(true)}>
        {t("production.actions.saveconfig")}
      </Button>
    </Popover>
--- a/client/src/components/report-center-modal/report-center-modal.component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.component.jsx
@@ -46,12 +46,12 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
  const ReportsList = Object.keys(Templates).map((key) => {
    return Templates[key];
  });
-  const { visible } = reportCenterModal;
+  const { open } = reportCenterModal;

  const [callVendorQuery, { data: vendorData, called: vendorCalled }] =
    useLazyQuery(QUERY_ALL_VENDORS, {
      skip: !(
-        visible &&
+        open &&
        Templates[form.getFieldValue("key")] &&
        Templates[form.getFieldValue("key")].idtype
      ),
@@ -60,7 +60,7 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
  const [callEmployeeQuery, { data: employeeData, called: employeeCalled }] =
    useLazyQuery(QUERY_ACTIVE_EMPLOYEES, {
      skip: !(
-        visible &&
+        open &&
        Templates[form.getFieldValue("key")] &&
        Templates[form.getFieldValue("key")].idtype
      ),
--- a/client/src/components/report-center-modal/report-center-modal.container.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.container.jsx
@@ -22,11 +22,11 @@ export function ReportCenterModalContainer({
 }) {
  const { t } = useTranslation();

-  const { visible } = reportCenterModal;
+  const { open } = reportCenterModal;

  return (
    <Modal
-      open={visible}
+      open={open}
      title={t("printcenter.labels.reportcentermodal")}
      onOk={() => toggleModalVisible()}
      onCancel={() => toggleModalVisible()}
--- a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
@@ -45,7 +45,7 @@ export function ScheduleJobModalContainer({
  currentUser,
  insertAuditTrail,
 }) {
-  const { visible, context, actions } = scheduleModal;
+  const { open, context, actions } = scheduleModal;
  const { jobId, job, previousEvent } = context;

  const { refetch } = actions;
@@ -73,7 +73,7 @@ export function ScheduleJobModalContainer({
    variables: { jobid: jobId },
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
-    skip: !visible || !!!jobId,
+    skip: !open || !!!jobId,
  });

  useEffect(() => {
@@ -206,7 +206,7 @@ export function ScheduleJobModalContainer({

  return (
    <Modal
-      open={visible}
+      open={open}
      onCancel={() => toggleModalVisible()}
      onOk={() => form.submit()}
      width={"90%"}
--- a/client/src/components/scoreboard-entry-edit/scoreboard-entry-edit.component.jsx
+++ b/client/src/components/scoreboard-entry-edit/scoreboard-entry-edit.component.jsx
@@ -6,7 +6,7 @@ import { UPDATE_SCOREBOARD_ENTRY } from "../../graphql/scoreboard.queries";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";

 export default function ScoreboardEntryEdit({ entry }) {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const { t } = useTranslation();
  const [updateScoreboardentry] = useMutation(UPDATE_SCOREBOARD_ENTRY);
@@ -28,7 +28,7 @@ export default function ScoreboardEntryEdit({ entry }) {
      notification["success"]({
        message: t("scoreboard.successes.updated"),
      });
-      setVisible(false);
+      setOpen(false);
    }
    setLoading(false);
  };
@@ -81,7 +81,7 @@ export default function ScoreboardEntryEdit({ entry }) {
        <Button type="primary" loading={loading} htmlType="submit">
          {t("general.actions.save")}
        </Button>
-        <Button onClick={() => setVisible(false)}>
+        <Button onClick={() => setOpen(false)}>
          {t("general.actions.cancel")}
        </Button>
      </Form>
@@ -92,11 +92,11 @@ export default function ScoreboardEntryEdit({ entry }) {

  return (
    <div>
-      <Dropdown open={visible} overlay={popContent}>
+      <Dropdown open={open} overlay={popContent}>
        <Button
          onClick={(e) => {
            e.stopPropagation();
-            setVisible(true);
+            setOpen(true);
          }}
        >
          {t("scoreboard.actions.edit")}
--- a/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
+++ b/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
@@ -14,7 +14,7 @@ import {pageLimit} from "../../utils/config";
 export default function ScoreboardJobsList({ scoreBoardlist }) {
  const { t } = useTranslation();
  const [state, setState] = useState({
-    visible: false,
+    open: false,
    search: "",
    current: 1,
    pageSize: pageLimit,
@@ -25,7 +25,7 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
    {
      fetchPolicy: "network-only",
      nextFetchPolicy: "network-only",
-      skip: !state.visible,
+      skip: !state.open,
      variables: {
        search: state.search !== "" ? `%${state.search}%` : null,
        offset: state.current ? (state.current - 1) * state.pageSize : 0,
@@ -101,14 +101,14 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
  return (
    <>
      <Modal
-        open={state.visible}
+        open={state.open}
        destroyOnClose
        width="80%"
        cancelButtonProps={{ style: { display: "none" } }}
        onCancel={() =>
          setState((state) => ({
            ...state,
-            visible: false,
+            open: false,
            current: 1,
            search: "",
          }))
@@ -157,7 +157,7 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
        </Card>
      </Modal>
      <Button
-        onClick={() => setState((state) => ({ ...state, visible: true }))}
+        onClick={() => setState((state) => ({ ...state, open: true }))}
      >
        {t("scoreboard.labels.entries")}
      </Button>
--- a/client/src/components/shop-templates-list/shop-templates-list.container.jsx
+++ b/client/src/components/shop-templates-list/shop-templates-list.container.jsx
@@ -11,8 +11,8 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import ShopTemplateAdd from "../shop-template-add/shop-template-add.component";
 import ShopTemplateDeleteComponent from "../shop-template-delete/shop-template-delete.component";

-export default function ShopTemplatesListContainer({ visibleState }) {
-  const [visible, setVisible] = visibleState;
+export default function ShopTemplatesListContainer({ openState }) {
+  const [open, setOpen] = openState;
  const { loading, error, data, refetch } = useQuery(QUERY_CUSTOM_TEMPLATES, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
@@ -38,8 +38,8 @@ export default function ShopTemplatesListContainer({ visibleState }) {
    (<Drawer
      placement="left"
      width="25%"
-      open={visible}
-      onClose={() => setVisible(false)}
+      open={open}
+      onClose={() => setOpen(false)}
    >
      <div>
        <div>{t("bodyshop.labels.customtemplates")}</div>
--- a/client/src/components/shop-users-auth-edit/shop-users-auth-edit.component.jsx
+++ b/client/src/components/shop-users-auth-edit/shop-users-auth-edit.component.jsx
@@ -7,11 +7,11 @@ import { UPDATE_ASSOCIATION } from "../../graphql/user.queries";
 export default function ShopUsersAuthEdit({ association }) {
  const { t } = useTranslation();
  const [updateAssociation] = useMutation(UPDATE_ASSOCIATION);
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(association.authlevel);

  const handleSave = async () => {
-    setVisible(false);
+    setOpen(false);
    const result = await updateAssociation({
      variables: {
        assocId: association.id,
@@ -30,7 +30,7 @@ export default function ShopUsersAuthEdit({ association }) {

  return (
    <div>
-      {visible && (
+      {open && (
        <div>
          <InputNumber
            min={0}
@@ -41,10 +41,8 @@ export default function ShopUsersAuthEdit({ association }) {
          />
        </div>
      )}
-      {!visible && (
-        <div
-          style={{ cursor: "pointer" }} //onClick={() => setVisible(true)}
-        >
+      {!open && (
+        <div style={{ cursor: "pointer" }}>
          {association.authlevel || t("general.labels.na")}
        </div>
      )}
--- a/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
@@ -37,7 +37,7 @@ export function TimeTicketModalContainer({
  const [updateTicket] = useMutation(UPDATE_TIME_TICKET);

  const { data: EmployeeAutoCompleteData } = useQuery(QUERY_ACTIVE_EMPLOYEES, {
-    skip: !timeTicketModal.visible,
+    skip: !timeTicketModal.open,
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
  });
@@ -127,8 +127,8 @@ export function TimeTicketModalContainer({
  }, [enterAgain, form]);

  useEffect(() => {
-    if (timeTicketModal.visible) form.resetFields();
-  }, [timeTicketModal.visible, form]);
+    if (timeTicketModal.open) form.resetFields();
+  }, [timeTicketModal.open, form]);

  const handleFieldsChange = (changedFields, allFields) => {
    if (!!changedFields.employeeid && !!EmployeeAutoCompleteData) {
@@ -169,7 +169,7 @@ export function TimeTicketModalContainer({
          : t("timetickets.labels.new")
      }
      width={"90%"}
-      open={timeTicketModal.visible}
+      open={timeTicketModal.open}
      forceRender
      onCancel={handleCancel}
      afterClose={() => form.resetFields()}
--- a/client/src/pages/shop-templates/shop-templates.container.js
+++ b/client/src/pages/shop-templates/shop-templates.container.js
@@ -42,7 +42,7 @@
 //   return (
 //     <RbacWrapper action="shop:templates">
 //       <div>
-//         <ShopTemplatesListContainer visibleState={drawerVisibility} />
+//         <ShopTemplatesListContainer openState={drawerVisibility} />
 //         <Button onClick={() => drawerVisibility[1](true)}>Show List</Button>
 //         <ShopTemplateEditor />
 //       </div>
--- a/client/src/redux/email/email.reducer.js
+++ b/client/src/redux/email/email.reducer.js
@@ -10,7 +10,7 @@ const INITIAL_STATE = {
    template: { name: null, variables: {} },
  },

-  visible: false,
+  open: false,
  error: null,
 };

@@ -19,13 +19,13 @@ const emailReducer = (state = INITIAL_STATE, action) => {
    case EmailActionTypes.TOGGLE_EMAIL_OVERLAY_VISIBLE:
      return {
        ...state,
-        visible: !state.visible,
+        open: !state.open,
      };
    case EmailActionTypes.SET_EMAIL_OPTIONS:
      return {
        ...state,
        emailConfig: { ...action.payload },
-        visible: true,
+        open: true,
      };
    default:
      return state;
--- a/client/src/redux/email/email.selectors.js
+++ b/client/src/redux/email/email.selectors.js
@@ -4,7 +4,7 @@ const selectEmail = (state) => state.email;

 export const selectEmailVisible = createSelector(
  [selectEmail],
-  (email) => email.visible
+  (email) => email.open
 );

 export const selectEmailConfig = createSelector(
--- a/client/src/redux/messaging/messaging.reducer.js
+++ b/client/src/redux/messaging/messaging.reducer.js
@@ -1,7 +1,7 @@
 import MessagingActionTypes from "./messaging.types";

 const INITIAL_STATE = {
-  visible: false,
+  open: false,
  selectedConversationId: null,
  isSending: false,
  error: null,
@@ -16,7 +16,7 @@ const messagingReducer = (state = INITIAL_STATE, action) => {
    case MessagingActionTypes.TOGGLE_CHAT_VISIBLE:
      return {
        ...state,
-        visible: !state.visible,
+        open: !state.open,
      };
    case MessagingActionTypes.OPEN_CHAT_BY_PHONE:
      return {
@@ -26,7 +26,7 @@ const messagingReducer = (state = INITIAL_STATE, action) => {
    case MessagingActionTypes.SET_SELECTED_CONVERSATION:
      return {
        ...state,
-        visible: true,
+        open: true,
        searchingForConversation: false,
        selectedConversationId: action.payload,
      };
--- a/client/src/redux/messaging/messaging.selectors.js
+++ b/client/src/redux/messaging/messaging.selectors.js
@@ -4,7 +4,7 @@ const selectMessaging = (state) => state.messaging;

 export const selectChatVisible = createSelector(
  [selectMessaging],
-  (messaging) => messaging.visible
+  (messaging) => messaging.open
 );

 export const selectIsSending = createSelector(
--- a/client/src/redux/modals/modals.reducer.js
+++ b/client/src/redux/modals/modals.reducer.js
@@ -1,7 +1,7 @@
 import ModalsActionTypes from "./modals.types";

 const baseModal = {
-  visible: false,
+  open: false,
  context: {},
  actions: {
    refetch: null,
@@ -35,7 +35,7 @@ const modalsReducer = (state = INITIAL_STATE, action) => {
        ...state,
        [action.payload]: {
          ...state[action.payload],
-          visible: !state[action.payload].visible,
+          open: !state[action.payload].open,
        },
      };
    case ModalsActionTypes.SET_MODAL_CONTEXT:
@@ -44,7 +44,7 @@ const modalsReducer = (state = INITIAL_STATE, action) => {
        [action.payload.modal]: {
          ...state[action.payload.modal],
          ...action.payload.context,
-          visible: true,
+          open: true,
        },
      };
    default: