From 8dd086c83e82fec901d61c619513ab1c442a5f72 Mon Sep 17 00:00:00 2001
From: Konstantinos Markopoulos <konst.markopoulos@gmail.com>
Date: Tue, 21 Jan 2025 13:35:09 +0200
Subject: [PATCH 1/3] Fix Reef check issues (#1083)

---
 .../__snapshots__/index.test.tsx.snap         | 2043 +----------------
 .../ReefCheckSurveyCard/index.test.tsx        |    7 +-
 .../Surveys/ReefCheckSurveyCard/index.tsx     |    9 +-
 .../__snapshots__/index.test.tsx.snap         | 1330 +----------
 .../ReefCheckSurveyDetails.tsx                |    7 +-
 .../Form/__snapshots__/index.test.tsx.snap    |  642 +-----
 .../routes/Surveys/View/ObservationBox.tsx    |   10 +
 packages/website/src/setupTests.ts            |    7 +
 yarn.lock                                     |   33 +-
 9 files changed, 105 insertions(+), 3983 deletions(-)

diff --git a/packages/website/src/common/Chart/MultipleSensorsCharts/__snapshots__/index.test.tsx.snap b/packages/website/src/common/Chart/MultipleSensorsCharts/__snapshots__/index.test.tsx.snap
index da26dfe21..ccc4c26f9 100644
--- a/packages/website/src/common/Chart/MultipleSensorsCharts/__snapshots__/index.test.tsx.snap
+++ b/packages/website/src/common/Chart/MultipleSensorsCharts/__snapshots__/index.test.tsx.snap
@@ -141,9 +141,6 @@ exports[`MultipleSensorsCharts should render with given state from Redux store 1
               type="button"
             >
               Download
-              <span
-                class="MuiTouchRipple-root css-r3djoj-MuiTouchRipple-root"
-              />
             </button>
           </mock-dialogactions>
         </mock-dialog>
@@ -364,1022 +361,15 @@ exports[`MultipleSensorsCharts should render with given state from Redux store 1
                   <div
                     class="DatePicker-datePicker-20"
                   >
-                    <div
-                      class="MuiFormControl-root MuiTextField-root DatePicker-textField-21 DatePicker-textField-21 css-1b1fjlj-MuiFormControl-root-MuiTextField-root"
-                    >
-                      <div
-                        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd Mui-readOnly MuiInputBase-readOnly css-5h82ro-MuiInputBase-root-MuiInput-root"
-                      >
-                        <input
-                          aria-invalid="false"
-                          aria-label="Choose date, selected date is May 28, 2022"
-                          autocomplete="off"
-                          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd Mui-readOnly MuiInputBase-readOnly css-1yrc8ca-MuiInputBase-input-MuiInput-input"
-                          id=":r0:"
-                          inputmode="text"
-                          placeholder="MM/DD/YYYY"
-                          readonly=""
-                          type="text"
-                          value="05/28/2022"
-                        />
-                      </div>
-                    </div>
-                    <mock-dialog
-                      classname="css-viza91"
-                      open="false"
-                    >
-                      <mock-dialogcontent
-                        classname="css-154ra1s"
-                      >
-                        <div
-                          class="MuiPickersLayout-root css-1y6l765-MuiPickersLayout-root"
-                        >
-                          <div
-                            class="MuiPickersLayout-contentWrapper css-18jb465-MuiPickersLayout-contentWrapper"
-                          >
-                            <div
-                              class="MuiDateCalendar-root css-5wchs2-MuiDateCalendar-root"
-                            >
-                              <div
-                                class="MuiPickersCalendarHeader-root css-1nxbkmn-MuiPickersCalendarHeader-root"
-                              >
-                                <div
-                                  aria-live="polite"
-                                  class="MuiPickersCalendarHeader-labelContainer css-cyfsxc-MuiPickersCalendarHeader-labelContainer"
-                                  role="presentation"
-                                >
-                                  <div
-                                    class="MuiPickersFadeTransitionGroup-root css-1etsrfk-MuiPickersFadeTransitionGroup-root"
-                                  >
-                                    <div
-                                      class="MuiPickersCalendarHeader-label css-1chuxo2-MuiPickersCalendarHeader-label"
-                                      id=":r2:-grid-label"
-                                      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                                    >
-                                      May 2022
-                                    </div>
-                                    <div
-                                      class="MuiPickersCalendarHeader-label css-1chuxo2-MuiPickersCalendarHeader-label"
-                                      id=":r2:-grid-label"
-                                      style="opacity: 0; webkit-transition: opacity 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                                    >
-                                      June 2023
-                                    </div>
-                                  </div>
-                                  <mock-iconbutton
-                                    aria-label="calendar view is open, switch to year view"
-                                    classname="MuiPickersCalendarHeader-switchViewButton css-v6xlml-MuiPickersCalendarHeader-switchViewButton"
-                                    size="small"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiPickersCalendarHeader-switchViewIcon css-14yom7c-MuiSvgIcon-root-MuiPickersCalendarHeader-switchViewIcon"
-                                      data-testid="ArrowDropDownIcon"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <path
-                                        d="M7 10l5 5 5-5z"
-                                      />
-                                    </svg>
-                                  </mock-iconbutton>
-                                </div>
-                                <div
-                                  class="MuiPickersArrowSwitcher-root css-15umtxl-MuiPickersArrowSwitcher-root"
-                                  style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                                >
-                                  <mock-iconbutton
-                                    aria-label="Previous month"
-                                    classname="MuiPickersArrowSwitcher-button MuiPickersArrowSwitcher-previousIconButton css-1n00uti-MuiPickersArrowSwitcher-button"
-                                    disabled="false"
-                                    edge="end"
-                                    size="medium"
-                                    title="Previous month"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit MuiPickersArrowSwitcher-leftArrowIcon css-1ckov0h-MuiSvgIcon-root"
-                                      data-testid="ArrowLeftIcon"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <path
-                                        d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
-                                      />
-                                    </svg>
-                                  </mock-iconbutton>
-                                  <div
-                                    class="MuiPickersArrowSwitcher-spacer css-xb7uwb-MuiPickersArrowSwitcher-spacer"
-                                  />
-                                  <mock-iconbutton
-                                    aria-label="Next month"
-                                    classname="MuiPickersArrowSwitcher-button MuiPickersArrowSwitcher-nextIconButton css-1n00uti-MuiPickersArrowSwitcher-button"
-                                    disabled="false"
-                                    edge="start"
-                                    size="medium"
-                                    title="Next month"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit MuiPickersArrowSwitcher-rightArrowIcon css-1ckov0h-MuiSvgIcon-root"
-                                      data-testid="ArrowRightIcon"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <path
-                                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                                      />
-                                    </svg>
-                                  </mock-iconbutton>
-                                </div>
-                              </div>
-                              <div
-                                class="MuiPickersFadeTransitionGroup-root MuiDateCalendar-viewTransitionContainer css-hwynws-MuiPickersFadeTransitionGroup-root-MuiDateCalendar-viewTransitionContainer"
-                              >
-                                <div
-                                  style="opacity: 1;"
-                                >
-                                  <div
-                                    aria-labelledby=":r2:-grid-label"
-                                    class="MuiDayCalendar-root css-q5we01-MuiDayCalendar-root"
-                                    role="grid"
-                                  >
-                                    <div
-                                      class="MuiDayCalendar-header css-1rl1vrc-MuiDayCalendar-header"
-                                      role="row"
-                                    >
-                                      <mock-typography
-                                        aria-label="Sunday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        S
-                                      </mock-typography>
-                                      <mock-typography
-                                        aria-label="Monday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        M
-                                      </mock-typography>
-                                      <mock-typography
-                                        aria-label="Tuesday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        T
-                                      </mock-typography>
-                                      <mock-typography
-                                        aria-label="Wednesday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        W
-                                      </mock-typography>
-                                      <mock-typography
-                                        aria-label="Thursday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        T
-                                      </mock-typography>
-                                      <mock-typography
-                                        aria-label="Friday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        F
-                                      </mock-typography>
-                                      <mock-typography
-                                        aria-label="Saturday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        S
-                                      </mock-typography>
-                                    </div>
-                                    <div
-                                      class="MuiPickersSlideTransition-root MuiDayCalendar-slideTransition css-1n1xn3x-MuiPickersSlideTransition-root-MuiDayCalendar-slideTransition"
-                                      role="presentation"
-                                    >
-                                      <div
-                                        class="MuiDayCalendar-monthContainer css-4wda5y-MuiDayCalendar-monthContainer MuiPickersSlideTransition-slideEnter-right MuiPickersSlideTransition-slideEnterActive"
-                                        role="rowgroup"
-                                      >
-                                        <div
-                                          aria-rowindex="1"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1651363200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            1
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1651449600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            2
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1651536000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            3
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1651622400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            4
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1651708800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            5
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1651795200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            6
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1651881600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            7
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="2"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1651968000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            8
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1652054400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            9
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1652140800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            10
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1652227200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            11
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1652313600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            12
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1652400000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            13
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1652486400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            14
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="3"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1652572800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            15
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1652659200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            16
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1652745600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            17
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1652832000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            18
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1652918400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            19
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1653004800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            20
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1653091200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            21
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="4"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1653177600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            22
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1653264000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            23
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1653350400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            24
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1653436800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            25
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1653523200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            26
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1653609600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            27
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="true"
-                                            class="MuiButtonBase-root MuiPickersDay-root Mui-selected MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1653696000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            28
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="5"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1653782400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            29
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1653868800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            30
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1653955200000"
-                                            role="gridcell"
-                                            tabindex="0"
-                                            type="button"
-                                          >
-                                            31
-                                          </button>
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                        </div>
-                                      </div>
-                                      <div
-                                        class="MuiDayCalendar-monthContainer css-4wda5y-MuiDayCalendar-monthContainer MuiPickersSlideTransition-slideExit MuiPickersSlideTransition-slideExitActiveLeft-right"
-                                        role="rowgroup"
-                                      >
-                                        <div
-                                          aria-rowindex="1"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1685577600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            1
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1685664000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            2
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1685750400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            3
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="2"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1685836800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            4
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1685923200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            5
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686009600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            6
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686096000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            7
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686182400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            8
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686268800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            9
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686355200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            10
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="3"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686441600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            11
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686528000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            12
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686614400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            13
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686700800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            14
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686787200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            15
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686873600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            16
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686960000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            17
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="4"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687046400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            18
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687132800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            19
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687219200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            20
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687305600000"
-                                            role="gridcell"
-                                            tabindex="0"
-                                            type="button"
-                                          >
-                                            21
-                                            <span
-                                              class="MuiTouchRipple-root css-r3djoj-MuiTouchRipple-root"
-                                            />
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687392000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            22
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687478400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            23
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687564800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            24
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="5"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687651200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            25
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687737600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            26
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687824000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            27
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-current="date"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-today css-qct7wd-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687910400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            28
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root Mui-disabled MuiPickersDay-root Mui-disabled MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687996800000"
-                                            disabled=""
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            29
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root Mui-disabled MuiPickersDay-root Mui-disabled MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1688083200000"
-                                            disabled=""
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            30
-                                          </button>
-                                          <div
-                                            class="MuiPickersDay-root Mui-disabled MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <mock-dialogactions
-                            classname="MuiPickersLayout-actionBar"
-                            ownerstate="[object Object]"
-                          >
-                            <button
-                              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1588512-MuiButtonBase-root-MuiButton-root"
-                              tabindex="0"
-                              type="button"
-                            >
-                              Cancel
-                            </button>
-                            <button
-                              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1588512-MuiButtonBase-root-MuiButton-root"
-                              tabindex="0"
-                              type="button"
-                            >
-                              OK
-                            </button>
-                          </mock-dialogactions>
-                        </div>
-                      </mock-dialogcontent>
-                    </mock-dialog>
+                    <mock-date-picker
+                      classname="DatePicker-textField-21"
+                      closeonselect="false"
+                      format="MM/dd/yyyy"
+                      maxdate="Wed Jun 28 2023 21:00:00 GMT+0000 (Coordinated Universal Time)"
+                      mindate="Thu Jan 01 1970 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                      slotprops="[object Object]"
+                      value="Sat May 28 2022 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                    />
                   </div>
                 </mock-box>
               </div>
@@ -1403,1012 +393,15 @@ exports[`MultipleSensorsCharts should render with given state from Redux store 1
                   <div
                     class="DatePicker-datePicker-20"
                   >
-                    <div
-                      class="MuiFormControl-root MuiTextField-root DatePicker-textField-21 DatePicker-textField-21 css-1b1fjlj-MuiFormControl-root-MuiTextField-root"
-                    >
-                      <div
-                        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd Mui-readOnly MuiInputBase-readOnly css-5h82ro-MuiInputBase-root-MuiInput-root"
-                      >
-                        <input
-                          aria-invalid="false"
-                          aria-label="Choose date, selected date is Jun 28, 2022"
-                          autocomplete="off"
-                          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd Mui-readOnly MuiInputBase-readOnly css-1yrc8ca-MuiInputBase-input-MuiInput-input"
-                          id=":r3:"
-                          inputmode="text"
-                          placeholder="MM/DD/YYYY"
-                          readonly=""
-                          type="text"
-                          value="06/28/2022"
-                        />
-                      </div>
-                    </div>
-                    <mock-dialog
-                      classname="css-viza91"
-                      open="false"
-                    >
-                      <mock-dialogcontent
-                        classname="css-154ra1s"
-                      >
-                        <div
-                          class="MuiPickersLayout-root css-1y6l765-MuiPickersLayout-root"
-                        >
-                          <div
-                            class="MuiPickersLayout-contentWrapper css-18jb465-MuiPickersLayout-contentWrapper"
-                          >
-                            <div
-                              class="MuiDateCalendar-root css-5wchs2-MuiDateCalendar-root"
-                            >
-                              <div
-                                class="MuiPickersCalendarHeader-root css-1nxbkmn-MuiPickersCalendarHeader-root"
-                              >
-                                <div
-                                  aria-live="polite"
-                                  class="MuiPickersCalendarHeader-labelContainer css-cyfsxc-MuiPickersCalendarHeader-labelContainer"
-                                  role="presentation"
-                                >
-                                  <div
-                                    class="MuiPickersFadeTransitionGroup-root css-1etsrfk-MuiPickersFadeTransitionGroup-root"
-                                  >
-                                    <div
-                                      class="MuiPickersCalendarHeader-label css-1chuxo2-MuiPickersCalendarHeader-label"
-                                      id=":r5:-grid-label"
-                                      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                                    >
-                                      June 2022
-                                    </div>
-                                    <div
-                                      class="MuiPickersCalendarHeader-label css-1chuxo2-MuiPickersCalendarHeader-label"
-                                      id=":r5:-grid-label"
-                                      style="opacity: 0; webkit-transition: opacity 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                                    >
-                                      June 2023
-                                    </div>
-                                  </div>
-                                  <mock-iconbutton
-                                    aria-label="calendar view is open, switch to year view"
-                                    classname="MuiPickersCalendarHeader-switchViewButton css-v6xlml-MuiPickersCalendarHeader-switchViewButton"
-                                    size="small"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiPickersCalendarHeader-switchViewIcon css-14yom7c-MuiSvgIcon-root-MuiPickersCalendarHeader-switchViewIcon"
-                                      data-testid="ArrowDropDownIcon"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <path
-                                        d="M7 10l5 5 5-5z"
-                                      />
-                                    </svg>
-                                  </mock-iconbutton>
-                                </div>
-                                <div
-                                  class="MuiPickersArrowSwitcher-root css-15umtxl-MuiPickersArrowSwitcher-root"
-                                  style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                                >
-                                  <mock-iconbutton
-                                    aria-label="Previous month"
-                                    classname="MuiPickersArrowSwitcher-button MuiPickersArrowSwitcher-previousIconButton css-1n00uti-MuiPickersArrowSwitcher-button"
-                                    disabled="false"
-                                    edge="end"
-                                    size="medium"
-                                    title="Previous month"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit MuiPickersArrowSwitcher-leftArrowIcon css-1ckov0h-MuiSvgIcon-root"
-                                      data-testid="ArrowLeftIcon"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <path
-                                        d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
-                                      />
-                                    </svg>
-                                  </mock-iconbutton>
-                                  <div
-                                    class="MuiPickersArrowSwitcher-spacer css-xb7uwb-MuiPickersArrowSwitcher-spacer"
-                                  />
-                                  <mock-iconbutton
-                                    aria-label="Next month"
-                                    classname="MuiPickersArrowSwitcher-button MuiPickersArrowSwitcher-nextIconButton css-1n00uti-MuiPickersArrowSwitcher-button"
-                                    disabled="false"
-                                    edge="start"
-                                    size="medium"
-                                    title="Next month"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit MuiPickersArrowSwitcher-rightArrowIcon css-1ckov0h-MuiSvgIcon-root"
-                                      data-testid="ArrowRightIcon"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <path
-                                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                                      />
-                                    </svg>
-                                  </mock-iconbutton>
-                                </div>
-                              </div>
-                              <div
-                                class="MuiPickersFadeTransitionGroup-root MuiDateCalendar-viewTransitionContainer css-hwynws-MuiPickersFadeTransitionGroup-root-MuiDateCalendar-viewTransitionContainer"
-                              >
-                                <div
-                                  style="opacity: 1;"
-                                >
-                                  <div
-                                    aria-labelledby=":r5:-grid-label"
-                                    class="MuiDayCalendar-root css-q5we01-MuiDayCalendar-root"
-                                    role="grid"
-                                  >
-                                    <div
-                                      class="MuiDayCalendar-header css-1rl1vrc-MuiDayCalendar-header"
-                                      role="row"
-                                    >
-                                      <mock-typography
-                                        aria-label="Sunday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        S
-                                      </mock-typography>
-                                      <mock-typography
-                                        aria-label="Monday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        M
-                                      </mock-typography>
-                                      <mock-typography
-                                        aria-label="Tuesday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        T
-                                      </mock-typography>
-                                      <mock-typography
-                                        aria-label="Wednesday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        W
-                                      </mock-typography>
-                                      <mock-typography
-                                        aria-label="Thursday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        T
-                                      </mock-typography>
-                                      <mock-typography
-                                        aria-label="Friday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        F
-                                      </mock-typography>
-                                      <mock-typography
-                                        aria-label="Saturday"
-                                        classname="MuiDayCalendar-weekDayLabel css-n2rc3-MuiDayCalendar-weekDayLabel"
-                                        role="columnheader"
-                                        variant="caption"
-                                      >
-                                        S
-                                      </mock-typography>
-                                    </div>
-                                    <div
-                                      class="MuiPickersSlideTransition-root MuiDayCalendar-slideTransition css-1n1xn3x-MuiPickersSlideTransition-root-MuiDayCalendar-slideTransition"
-                                      role="presentation"
-                                    >
-                                      <div
-                                        class="MuiDayCalendar-monthContainer css-4wda5y-MuiDayCalendar-monthContainer MuiPickersSlideTransition-slideEnter-right MuiPickersSlideTransition-slideEnterActive"
-                                        role="rowgroup"
-                                      >
-                                        <div
-                                          aria-rowindex="1"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1654041600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            1
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1654128000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            2
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1654214400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            3
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1654300800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            4
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="2"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1654387200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            5
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1654473600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            6
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1654560000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            7
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1654646400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            8
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1654732800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            9
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1654819200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            10
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1654905600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            11
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="3"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1654992000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            12
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1655078400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            13
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1655164800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            14
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1655251200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            15
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1655337600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            16
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1655424000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            17
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1655510400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            18
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="4"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1655596800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            19
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1655683200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            20
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1655769600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            21
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1655856000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            22
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1655942400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            23
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1656028800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            24
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1656115200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            25
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="5"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1656201600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            26
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1656288000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            27
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="true"
-                                            class="MuiButtonBase-root MuiPickersDay-root Mui-selected MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1656374400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            28
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1656460800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            29
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1656547200000"
-                                            role="gridcell"
-                                            tabindex="0"
-                                            type="button"
-                                          >
-                                            30
-                                          </button>
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                        </div>
-                                      </div>
-                                      <div
-                                        class="MuiDayCalendar-monthContainer css-4wda5y-MuiDayCalendar-monthContainer MuiPickersSlideTransition-slideExit MuiPickersSlideTransition-slideExitActiveLeft-right"
-                                        role="rowgroup"
-                                      >
-                                        <div
-                                          aria-rowindex="1"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <div
-                                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1685577600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            1
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1685664000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            2
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1685750400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            3
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="2"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1685836800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            4
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1685923200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            5
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686009600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            6
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686096000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            7
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686182400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            8
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686268800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            9
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686355200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            10
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="3"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686441600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            11
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686528000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            12
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686614400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            13
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686700800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            14
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686787200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            15
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686873600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            16
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1686960000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            17
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="4"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687046400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            18
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687132800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            19
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687219200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            20
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687305600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            21
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687392000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            22
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687478400000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            23
-                                          </button>
-                                          <button
-                                            aria-colindex="7"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687564800000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            24
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-rowindex="5"
-                                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                                          role="row"
-                                        >
-                                          <button
-                                            aria-colindex="1"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687651200000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            25
-                                          </button>
-                                          <button
-                                            aria-colindex="2"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687737600000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            26
-                                          </button>
-                                          <button
-                                            aria-colindex="3"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687824000000"
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            27
-                                          </button>
-                                          <button
-                                            aria-colindex="4"
-                                            aria-current="date"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-today css-qct7wd-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687910400000"
-                                            role="gridcell"
-                                            tabindex="0"
-                                            type="button"
-                                          >
-                                            28
-                                          </button>
-                                          <button
-                                            aria-colindex="5"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root Mui-disabled MuiPickersDay-root Mui-disabled MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1687996800000"
-                                            disabled=""
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            29
-                                          </button>
-                                          <button
-                                            aria-colindex="6"
-                                            aria-selected="false"
-                                            class="MuiButtonBase-root Mui-disabled MuiPickersDay-root Mui-disabled MuiPickersDay-dayWithMargin css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root"
-                                            data-timestamp="1688083200000"
-                                            disabled=""
-                                            role="gridcell"
-                                            tabindex="-1"
-                                            type="button"
-                                          >
-                                            30
-                                          </button>
-                                          <div
-                                            class="MuiPickersDay-root Mui-disabled MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-1ayjnp4-MuiPickersDay-root"
-                                            role="gridcell"
-                                          />
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <mock-dialogactions
-                            classname="MuiPickersLayout-actionBar"
-                            ownerstate="[object Object]"
-                          >
-                            <button
-                              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1588512-MuiButtonBase-root-MuiButton-root"
-                              tabindex="0"
-                              type="button"
-                            >
-                              Cancel
-                            </button>
-                            <button
-                              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1588512-MuiButtonBase-root-MuiButton-root"
-                              tabindex="0"
-                              type="button"
-                            >
-                              OK
-                            </button>
-                          </mock-dialogactions>
-                        </div>
-                      </mock-dialogcontent>
-                    </mock-dialog>
+                    <mock-date-picker
+                      classname="DatePicker-textField-21"
+                      closeonselect="false"
+                      format="MM/dd/yyyy"
+                      maxdate="Wed Jun 28 2023 21:00:00 GMT+0000 (Coordinated Universal Time)"
+                      mindate="Thu Jan 01 1970 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                      slotprops="[object Object]"
+                      value="Tue Jun 28 2022 00:00:00 GMT+0000 (Coordinated Universal Time)"
+                    />
                   </div>
                 </mock-box>
               </div>
diff --git a/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.test.tsx b/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.test.tsx
index 3fa1dc868..f07a83c64 100644
--- a/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.test.tsx
+++ b/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.test.tsx
@@ -20,12 +20,15 @@ describe('ReefCheckSurveyCard', () => {
     );
   }
 
-  it('should render date', () => {
+  it('should render date & depth', () => {
     const { getByText } = renderReefCheckSurveyCard();
 
     expect(
       getByText(`Date: ${new Date(mockReefCheckSurvey.date).toLocaleString()}`),
     ).toBeInTheDocument();
+    expect(
+      getByText(`Depth: ${mockReefCheckSurvey.depth}m`),
+    ).toBeInTheDocument();
   });
 
   it('should render user if submittedBy is present', () => {
@@ -52,7 +55,7 @@ describe('ReefCheckSurveyCard', () => {
         'Count',
         'INVERTEBRATES (2)',
         'Count',
-        'BLEACHING AND CORAL DIDEASES',
+        'BLEACHING AND CORAL DISEASES',
         'YES/NO',
         'IMPACT',
         'YES/NO',
diff --git a/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.tsx b/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.tsx
index 3efcbe769..36d03d3f3 100644
--- a/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.tsx
+++ b/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.tsx
@@ -58,7 +58,12 @@ const ReefCheckSurveyCardComponent = ({
   return (
     <Paper className={classes.paper}>
       <Box display="flex" justifyContent="space-between">
-        <Typography>Date: {new Date(survey.date).toLocaleString()}</Typography>
+        <Box display="flex" gap={2}>
+          <Typography>
+            Date: {new Date(survey.date).toLocaleString()}
+          </Typography>
+          <Typography>Depth: {survey.depth}m</Typography>
+        </Box>
         {survey.submittedBy && (
           <Typography>User: {survey.submittedBy}</Typography>
         )}
@@ -76,7 +81,7 @@ const ReefCheckSurveyCardComponent = ({
               </TableCell>
               <TableCell>Count</TableCell>
               <TableCell className={classes.label}>
-                BLEACHING AND CORAL DIDEASES
+                BLEACHING AND CORAL DISEASES
               </TableCell>
               <TableCell>YES/NO</TableCell>
               <TableCell className={classes.label}>IMPACT</TableCell>
diff --git a/packages/website/src/routes/MonitoringRoutes/SiteMetrics/__snapshots__/index.test.tsx.snap b/packages/website/src/routes/MonitoringRoutes/SiteMetrics/__snapshots__/index.test.tsx.snap
index a0c6b661c..5295af1f5 100644
--- a/packages/website/src/routes/MonitoringRoutes/SiteMetrics/__snapshots__/index.test.tsx.snap
+++ b/packages/website/src/routes/MonitoringRoutes/SiteMetrics/__snapshots__/index.test.tsx.snap
@@ -137,1320 +137,22 @@ exports[`Monitoring SiteMetrics Page should render with given state from Redux s
           </fieldset>
         </div>
       </div>
-      <div
-        class="MuiFormControl-root MuiTextField-root makeStyles-filterItem-4 css-1b1fjlj-MuiFormControl-root-MuiTextField-root"
-      >
-        <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-47g1cz-MuiFormLabel-root-MuiInputLabel-root"
-          data-shrink="true"
-          for=":r2:"
-          id=":r2:-label"
-        >
-          start date
-        </label>
-        <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd Mui-readOnly MuiInputBase-readOnly css-1ritcye-MuiInputBase-root-MuiOutlinedInput-root"
-        >
-          <input
-            aria-invalid="false"
-            aria-label="Choose date, selected date is Jul 20, 2023"
-            autocomplete="off"
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd Mui-readOnly MuiInputBase-readOnly css-169ghzl-MuiInputBase-input-MuiOutlinedInput-input"
-            id=":r2:"
-            inputmode="text"
-            placeholder="MM/DD/YYYY"
-            readonly=""
-            type="text"
-            value="07/20/2023"
-          />
-          <fieldset
-            aria-hidden="true"
-            class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
-          >
-            <legend
-              class="css-w1u3ce"
-            >
-              <span>
-                start date
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-      <mock-dialog
-        classname="css-viza91"
-        open="false"
-      >
-        <mock-dialogcontent
-          classname="css-154ra1s"
-        >
-          <div
-            class="MuiPickersLayout-root css-ch1f3q-MuiPickersLayout-root"
-          >
-            <div
-              class="MuiPickersLayout-contentWrapper css-18jb465-MuiPickersLayout-contentWrapper"
-            >
-              <div
-                class="MuiDateCalendar-root css-hkyxid-MuiDateCalendar-root"
-              >
-                <div
-                  class="MuiPickersCalendarHeader-root css-fgwy5w-MuiPickersCalendarHeader-root"
-                >
-                  <div
-                    aria-live="polite"
-                    class="MuiPickersCalendarHeader-labelContainer css-cyfsxc-MuiPickersCalendarHeader-labelContainer"
-                    role="presentation"
-                  >
-                    <div
-                      class="MuiPickersFadeTransitionGroup-root css-1etsrfk-MuiPickersFadeTransitionGroup-root"
-                    >
-                      <div
-                        class="MuiPickersCalendarHeader-label css-1chuxo2-MuiPickersCalendarHeader-label"
-                        id=":r4:-grid-label"
-                        style="opacity: 1;"
-                      >
-                        July 2023
-                      </div>
-                    </div>
-                    <mock-iconbutton
-                      aria-label="calendar view is open, switch to year view"
-                      classname="MuiPickersCalendarHeader-switchViewButton css-v6xlml-MuiPickersCalendarHeader-switchViewButton"
-                      size="small"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiPickersCalendarHeader-switchViewIcon css-14yom7c-MuiSvgIcon-root-MuiPickersCalendarHeader-switchViewIcon"
-                        data-testid="ArrowDropDownIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </svg>
-                    </mock-iconbutton>
-                  </div>
-                  <div
-                    class="MuiPickersArrowSwitcher-root css-15umtxl-MuiPickersArrowSwitcher-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  >
-                    <mock-iconbutton
-                      aria-label="Previous month"
-                      classname="MuiPickersArrowSwitcher-button MuiPickersArrowSwitcher-previousIconButton css-1n00uti-MuiPickersArrowSwitcher-button"
-                      disabled="false"
-                      edge="end"
-                      size="medium"
-                      title="Previous month"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit MuiPickersArrowSwitcher-leftArrowIcon css-1ckov0h-MuiSvgIcon-root"
-                        data-testid="ArrowLeftIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
-                        />
-                      </svg>
-                    </mock-iconbutton>
-                    <div
-                      class="MuiPickersArrowSwitcher-spacer css-xb7uwb-MuiPickersArrowSwitcher-spacer"
-                    />
-                    <mock-iconbutton
-                      aria-label="Next month"
-                      classname="MuiPickersArrowSwitcher-button MuiPickersArrowSwitcher-nextIconButton css-1n00uti-MuiPickersArrowSwitcher-button"
-                      disabled="false"
-                      edge="start"
-                      size="medium"
-                      title="Next month"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit MuiPickersArrowSwitcher-rightArrowIcon css-1ckov0h-MuiSvgIcon-root"
-                        data-testid="ArrowRightIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                        />
-                      </svg>
-                    </mock-iconbutton>
-                  </div>
-                </div>
-                <div
-                  class="MuiPickersFadeTransitionGroup-root MuiDateCalendar-viewTransitionContainer css-hwynws-MuiPickersFadeTransitionGroup-root-MuiDateCalendar-viewTransitionContainer"
-                >
-                  <div
-                    style="opacity: 1;"
-                  >
-                    <div
-                      aria-labelledby=":r4:-grid-label"
-                      class="MuiDayCalendar-root css-q5we01-MuiDayCalendar-root"
-                      role="grid"
-                    >
-                      <div
-                        class="MuiDayCalendar-header css-1rl1vrc-MuiDayCalendar-header"
-                        role="row"
-                      >
-                        <mock-typography
-                          aria-label="Sunday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          S
-                        </mock-typography>
-                        <mock-typography
-                          aria-label="Monday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          M
-                        </mock-typography>
-                        <mock-typography
-                          aria-label="Tuesday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          T
-                        </mock-typography>
-                        <mock-typography
-                          aria-label="Wednesday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          W
-                        </mock-typography>
-                        <mock-typography
-                          aria-label="Thursday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          T
-                        </mock-typography>
-                        <mock-typography
-                          aria-label="Friday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          F
-                        </mock-typography>
-                        <mock-typography
-                          aria-label="Saturday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          S
-                        </mock-typography>
-                      </div>
-                      <div
-                        class="MuiPickersSlideTransition-root MuiDayCalendar-slideTransition css-1n1xn3x-MuiPickersSlideTransition-root-MuiDayCalendar-slideTransition"
-                        role="presentation"
-                      >
-                        <div
-                          class="MuiDayCalendar-monthContainer css-4wda5y-MuiDayCalendar-monthContainer"
-                          role="rowgroup"
-                        >
-                          <div
-                            aria-rowindex="1"
-                            class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                            role="row"
-                          >
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <button
-                              aria-colindex="7"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1688169600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              1
-                            </button>
-                          </div>
-                          <div
-                            aria-rowindex="2"
-                            class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                            role="row"
-                          >
-                            <button
-                              aria-colindex="1"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1688256000000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              2
-                            </button>
-                            <button
-                              aria-colindex="2"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1688342400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              3
-                            </button>
-                            <button
-                              aria-colindex="3"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1688428800000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              4
-                            </button>
-                            <button
-                              aria-colindex="4"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1688515200000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              5
-                            </button>
-                            <button
-                              aria-colindex="5"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1688601600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              6
-                            </button>
-                            <button
-                              aria-colindex="6"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1688688000000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              7
-                            </button>
-                            <button
-                              aria-colindex="7"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1688774400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              8
-                            </button>
-                          </div>
-                          <div
-                            aria-rowindex="3"
-                            class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                            role="row"
-                          >
-                            <button
-                              aria-colindex="1"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1688860800000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              9
-                            </button>
-                            <button
-                              aria-colindex="2"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1688947200000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              10
-                            </button>
-                            <button
-                              aria-colindex="3"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1689033600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              11
-                            </button>
-                            <button
-                              aria-colindex="4"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1689120000000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              12
-                            </button>
-                            <button
-                              aria-colindex="5"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1689206400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              13
-                            </button>
-                            <button
-                              aria-colindex="6"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1689292800000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              14
-                            </button>
-                            <button
-                              aria-colindex="7"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1689379200000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              15
-                            </button>
-                          </div>
-                          <div
-                            aria-rowindex="4"
-                            class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                            role="row"
-                          >
-                            <button
-                              aria-colindex="1"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1689465600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              16
-                            </button>
-                            <button
-                              aria-colindex="2"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1689552000000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              17
-                            </button>
-                            <button
-                              aria-colindex="3"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1689638400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              18
-                            </button>
-                            <button
-                              aria-colindex="4"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1689724800000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              19
-                            </button>
-                            <button
-                              aria-colindex="5"
-                              aria-selected="true"
-                              class="MuiButtonBase-root MuiPickersDay-root Mui-selected MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1689811200000"
-                              role="gridcell"
-                              tabindex="0"
-                              type="button"
-                            >
-                              20
-                              <span
-                                class="MuiTouchRipple-root css-r3djoj-MuiTouchRipple-root"
-                              />
-                            </button>
-                            <button
-                              aria-colindex="6"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1689897600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              21
-                            </button>
-                            <button
-                              aria-colindex="7"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1689984000000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              22
-                            </button>
-                          </div>
-                          <div
-                            aria-rowindex="5"
-                            class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                            role="row"
-                          >
-                            <button
-                              aria-colindex="1"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1690070400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              23
-                            </button>
-                            <button
-                              aria-colindex="2"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1690156800000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              24
-                            </button>
-                            <button
-                              aria-colindex="3"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1690243200000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              25
-                            </button>
-                            <button
-                              aria-colindex="4"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1690329600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              26
-                            </button>
-                            <button
-                              aria-colindex="5"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1690416000000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              27
-                            </button>
-                            <button
-                              aria-colindex="6"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1690502400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              28
-                            </button>
-                            <button
-                              aria-colindex="7"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1690588800000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              29
-                            </button>
-                          </div>
-                          <div
-                            aria-rowindex="6"
-                            class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                            role="row"
-                          >
-                            <button
-                              aria-colindex="1"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1690675200000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              30
-                            </button>
-                            <button
-                              aria-colindex="2"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1690761600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              31
-                            </button>
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <mock-dialogactions
-              classname="MuiPickersLayout-actionBar"
-              ownerstate="[object Object]"
-            >
-              <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-iorydh-MuiButtonBase-root-MuiButton-root"
-                tabindex="0"
-                type="button"
-              >
-                Cancel
-              </button>
-              <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-iorydh-MuiButtonBase-root-MuiButton-root"
-                tabindex="0"
-                type="button"
-              >
-                OK
-              </button>
-            </mock-dialogactions>
-          </div>
-        </mock-dialogcontent>
-      </mock-dialog>
-      <div
-        class="MuiFormControl-root MuiTextField-root makeStyles-filterItem-4 css-1b1fjlj-MuiFormControl-root-MuiTextField-root"
-      >
-        <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-47g1cz-MuiFormLabel-root-MuiInputLabel-root"
-          data-shrink="true"
-          for=":r5:"
-          id=":r5:-label"
-        >
-          end date
-        </label>
-        <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd Mui-readOnly MuiInputBase-readOnly css-1ritcye-MuiInputBase-root-MuiOutlinedInput-root"
-        >
-          <input
-            aria-invalid="false"
-            aria-label="Choose date, selected date is Oct 20, 2023"
-            autocomplete="off"
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd Mui-readOnly MuiInputBase-readOnly css-169ghzl-MuiInputBase-input-MuiOutlinedInput-input"
-            id=":r5:"
-            inputmode="text"
-            placeholder="MM/DD/YYYY"
-            readonly=""
-            type="text"
-            value="10/20/2023"
-          />
-          <fieldset
-            aria-hidden="true"
-            class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
-          >
-            <legend
-              class="css-w1u3ce"
-            >
-              <span>
-                end date
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-      <mock-dialog
-        classname="css-viza91"
-        open="false"
-      >
-        <mock-dialogcontent
-          classname="css-154ra1s"
-        >
-          <div
-            class="MuiPickersLayout-root css-ch1f3q-MuiPickersLayout-root"
-          >
-            <div
-              class="MuiPickersLayout-contentWrapper css-18jb465-MuiPickersLayout-contentWrapper"
-            >
-              <div
-                class="MuiDateCalendar-root css-hkyxid-MuiDateCalendar-root"
-              >
-                <div
-                  class="MuiPickersCalendarHeader-root css-fgwy5w-MuiPickersCalendarHeader-root"
-                >
-                  <div
-                    aria-live="polite"
-                    class="MuiPickersCalendarHeader-labelContainer css-cyfsxc-MuiPickersCalendarHeader-labelContainer"
-                    role="presentation"
-                  >
-                    <div
-                      class="MuiPickersFadeTransitionGroup-root css-1etsrfk-MuiPickersFadeTransitionGroup-root"
-                    >
-                      <div
-                        class="MuiPickersCalendarHeader-label css-1chuxo2-MuiPickersCalendarHeader-label"
-                        id=":r7:-grid-label"
-                        style="opacity: 1;"
-                      >
-                        October 2023
-                      </div>
-                    </div>
-                    <mock-iconbutton
-                      aria-label="calendar view is open, switch to year view"
-                      classname="MuiPickersCalendarHeader-switchViewButton css-v6xlml-MuiPickersCalendarHeader-switchViewButton"
-                      size="small"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiPickersCalendarHeader-switchViewIcon css-14yom7c-MuiSvgIcon-root-MuiPickersCalendarHeader-switchViewIcon"
-                        data-testid="ArrowDropDownIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </svg>
-                    </mock-iconbutton>
-                  </div>
-                  <div
-                    class="MuiPickersArrowSwitcher-root css-15umtxl-MuiPickersArrowSwitcher-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  >
-                    <mock-iconbutton
-                      aria-label="Previous month"
-                      classname="MuiPickersArrowSwitcher-button MuiPickersArrowSwitcher-previousIconButton css-1n00uti-MuiPickersArrowSwitcher-button"
-                      disabled="false"
-                      edge="end"
-                      size="medium"
-                      title="Previous month"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit MuiPickersArrowSwitcher-leftArrowIcon css-1ckov0h-MuiSvgIcon-root"
-                        data-testid="ArrowLeftIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
-                        />
-                      </svg>
-                    </mock-iconbutton>
-                    <div
-                      class="MuiPickersArrowSwitcher-spacer css-xb7uwb-MuiPickersArrowSwitcher-spacer"
-                    />
-                    <mock-iconbutton
-                      aria-label="Next month"
-                      classname="MuiPickersArrowSwitcher-button MuiPickersArrowSwitcher-nextIconButton css-1n00uti-MuiPickersArrowSwitcher-button"
-                      disabled="false"
-                      edge="start"
-                      size="medium"
-                      title="Next month"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit MuiPickersArrowSwitcher-rightArrowIcon css-1ckov0h-MuiSvgIcon-root"
-                        data-testid="ArrowRightIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                        />
-                      </svg>
-                    </mock-iconbutton>
-                  </div>
-                </div>
-                <div
-                  class="MuiPickersFadeTransitionGroup-root MuiDateCalendar-viewTransitionContainer css-hwynws-MuiPickersFadeTransitionGroup-root-MuiDateCalendar-viewTransitionContainer"
-                >
-                  <div
-                    style="opacity: 1;"
-                  >
-                    <div
-                      aria-labelledby=":r7:-grid-label"
-                      class="MuiDayCalendar-root css-q5we01-MuiDayCalendar-root"
-                      role="grid"
-                    >
-                      <div
-                        class="MuiDayCalendar-header css-1rl1vrc-MuiDayCalendar-header"
-                        role="row"
-                      >
-                        <mock-typography
-                          aria-label="Sunday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          S
-                        </mock-typography>
-                        <mock-typography
-                          aria-label="Monday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          M
-                        </mock-typography>
-                        <mock-typography
-                          aria-label="Tuesday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          T
-                        </mock-typography>
-                        <mock-typography
-                          aria-label="Wednesday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          W
-                        </mock-typography>
-                        <mock-typography
-                          aria-label="Thursday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          T
-                        </mock-typography>
-                        <mock-typography
-                          aria-label="Friday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          F
-                        </mock-typography>
-                        <mock-typography
-                          aria-label="Saturday"
-                          classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                          role="columnheader"
-                          variant="caption"
-                        >
-                          S
-                        </mock-typography>
-                      </div>
-                      <div
-                        class="MuiPickersSlideTransition-root MuiDayCalendar-slideTransition css-1n1xn3x-MuiPickersSlideTransition-root-MuiDayCalendar-slideTransition"
-                        role="presentation"
-                      >
-                        <div
-                          class="MuiDayCalendar-monthContainer css-4wda5y-MuiDayCalendar-monthContainer"
-                          role="rowgroup"
-                        >
-                          <div
-                            aria-rowindex="1"
-                            class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                            role="row"
-                          >
-                            <button
-                              aria-colindex="1"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1696118400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              1
-                            </button>
-                            <button
-                              aria-colindex="2"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1696204800000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              2
-                            </button>
-                            <button
-                              aria-colindex="3"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1696291200000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              3
-                            </button>
-                            <button
-                              aria-colindex="4"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1696377600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              4
-                            </button>
-                            <button
-                              aria-colindex="5"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1696464000000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              5
-                            </button>
-                            <button
-                              aria-colindex="6"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1696550400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              6
-                            </button>
-                            <button
-                              aria-colindex="7"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1696636800000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              7
-                            </button>
-                          </div>
-                          <div
-                            aria-rowindex="2"
-                            class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                            role="row"
-                          >
-                            <button
-                              aria-colindex="1"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1696723200000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              8
-                            </button>
-                            <button
-                              aria-colindex="2"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1696809600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              9
-                            </button>
-                            <button
-                              aria-colindex="3"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1696896000000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              10
-                            </button>
-                            <button
-                              aria-colindex="4"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1696982400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              11
-                            </button>
-                            <button
-                              aria-colindex="5"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1697068800000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              12
-                            </button>
-                            <button
-                              aria-colindex="6"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1697155200000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              13
-                            </button>
-                            <button
-                              aria-colindex="7"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1697241600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              14
-                            </button>
-                          </div>
-                          <div
-                            aria-rowindex="3"
-                            class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                            role="row"
-                          >
-                            <button
-                              aria-colindex="1"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1697328000000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              15
-                            </button>
-                            <button
-                              aria-colindex="2"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1697414400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              16
-                            </button>
-                            <button
-                              aria-colindex="3"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1697500800000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              17
-                            </button>
-                            <button
-                              aria-colindex="4"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1697587200000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              18
-                            </button>
-                            <button
-                              aria-colindex="5"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1697673600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              19
-                            </button>
-                            <button
-                              aria-colindex="6"
-                              aria-current="date"
-                              aria-selected="true"
-                              class="MuiButtonBase-root MuiPickersDay-root Mui-selected MuiPickersDay-dayWithMargin MuiPickersDay-today css-qt9k9u-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1697760000000"
-                              role="gridcell"
-                              tabindex="0"
-                              type="button"
-                            >
-                              20
-                            </button>
-                            <button
-                              aria-colindex="7"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1697846400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              21
-                            </button>
-                          </div>
-                          <div
-                            aria-rowindex="4"
-                            class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                            role="row"
-                          >
-                            <button
-                              aria-colindex="1"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1697932800000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              22
-                            </button>
-                            <button
-                              aria-colindex="2"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1698019200000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              23
-                            </button>
-                            <button
-                              aria-colindex="3"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1698105600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              24
-                            </button>
-                            <button
-                              aria-colindex="4"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1698192000000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              25
-                            </button>
-                            <button
-                              aria-colindex="5"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1698278400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              26
-                            </button>
-                            <button
-                              aria-colindex="6"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1698364800000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              27
-                            </button>
-                            <button
-                              aria-colindex="7"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1698451200000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              28
-                            </button>
-                          </div>
-                          <div
-                            aria-rowindex="5"
-                            class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                            role="row"
-                          >
-                            <button
-                              aria-colindex="1"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1698537600000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              29
-                            </button>
-                            <button
-                              aria-colindex="2"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1698624000000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              30
-                            </button>
-                            <button
-                              aria-colindex="3"
-                              aria-selected="false"
-                              class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                              data-timestamp="1698710400000"
-                              role="gridcell"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              31
-                            </button>
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                            <div
-                              class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                              role="gridcell"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <mock-dialogactions
-              classname="MuiPickersLayout-actionBar"
-              ownerstate="[object Object]"
-            >
-              <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-iorydh-MuiButtonBase-root-MuiButton-root"
-                tabindex="0"
-                type="button"
-              >
-                Cancel
-              </button>
-              <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-iorydh-MuiButtonBase-root-MuiButton-root"
-                tabindex="0"
-                type="button"
-              >
-                OK
-              </button>
-            </mock-dialogactions>
-          </div>
-        </mock-dialogcontent>
-      </mock-dialog>
+      <mock-date-picker
+        classname="makeStyles-filterItem-4"
+        closeonselect="true"
+        format="MM/dd/yyyy"
+        label="start date"
+        slotprops="[object Object]"
+        value="Thu Jul 20 2023 12:00:00 GMT+0000 (Coordinated Universal Time)"
+      />
+      <mock-date-picker
+        classname="makeStyles-filterItem-4"
+        closeonselect="true"
+        format="MM/dd/yyyy"
+        label="end date"
+        slotprops="[object Object]"
+        value="Fri Oct 20 2023 12:00:00 GMT+0000 (Coordinated Universal Time)"
+      />
       <div
         class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1 makeStyles-switchContainer-3 css-174grhv-MuiGrid-root"
       >
diff --git a/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveyDetails.tsx b/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveyDetails.tsx
index ba775dc0e..280c0a916 100644
--- a/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveyDetails.tsx
+++ b/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveyDetails.tsx
@@ -66,6 +66,11 @@ const surveyFields = [
 // eslint-disable-next-line prettier/prettier
 ] satisfies Array<NonNullable<SurveyFields[keyof SurveyFields]>>;
 
+const formatFieldValue = (value: any, formatter?: (v: any) => string) => {
+  if (value != null && formatter) return formatter(value);
+  return value ?? '';
+};
+
 const ReefCheckSurveyDetailsComponent = ({
   classes,
 }: ReefCheckSurveyDetailsProps) => {
@@ -90,7 +95,7 @@ const ReefCheckSurveyDetailsComponent = ({
                   className={classes.skeleton}
                 />
               ) : (
-                formatter?.(survey[field]) ?? survey[field] ?? ''
+                formatFieldValue(survey[field], formatter)
               )}
             </Typography>
           </Grid>
diff --git a/packages/website/src/routes/SiteRoutes/SiteApplication/Form/__snapshots__/index.test.tsx.snap b/packages/website/src/routes/SiteRoutes/SiteApplication/Form/__snapshots__/index.test.tsx.snap
index c4e090959..da93a5000 100644
--- a/packages/website/src/routes/SiteRoutes/SiteApplication/Form/__snapshots__/index.test.tsx.snap
+++ b/packages/website/src/routes/SiteRoutes/SiteApplication/Form/__snapshots__/index.test.tsx.snap
@@ -138,640 +138,12 @@ exports[`renders as expected 1`] = `
     >
       What is the soonest date you could install the Smart Buoy and conduct a survey?
     </mock-typography>
-    <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root Form-formField-3 Form-textField-6 css-xwn1oi-MuiFormControl-root-MuiTextField-root"
-    >
-      <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd Mui-readOnly MuiInputBase-readOnly css-iawdt4-MuiInputBase-root-MuiOutlinedInput-root"
-      >
-        <input
-          aria-invalid="false"
-          aria-label="Choose date"
-          autocomplete="off"
-          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd Mui-readOnly MuiInputBase-readOnly css-169ghzl-MuiInputBase-input-MuiOutlinedInput-input"
-          id=":r3:"
-          inputmode="text"
-          placeholder="MM/DD/YYYY"
-          readonly=""
-          type="text"
-          value=""
-        />
-        <fieldset
-          aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
-        >
-          <legend
-            class="css-w4cd9x"
-          >
-            <span
-              aria-hidden="true"
-              class="notranslate"
-            >
-              ​
-            </span>
-          </legend>
-        </fieldset>
-      </div>
-    </div>
-    <mock-dialog
-      classname="css-viza91"
-      open="false"
-    >
-      <mock-dialogcontent
-        classname="css-154ra1s"
-      >
-        <div
-          class="MuiPickersLayout-root css-ch1f3q-MuiPickersLayout-root"
-        >
-          <div
-            class="MuiPickersLayout-contentWrapper css-18jb465-MuiPickersLayout-contentWrapper"
-          >
-            <div
-              class="MuiDateCalendar-root css-hkyxid-MuiDateCalendar-root"
-            >
-              <div
-                class="MuiPickersCalendarHeader-root css-fgwy5w-MuiPickersCalendarHeader-root"
-              >
-                <div
-                  aria-live="polite"
-                  class="MuiPickersCalendarHeader-labelContainer css-cyfsxc-MuiPickersCalendarHeader-labelContainer"
-                  role="presentation"
-                >
-                  <div
-                    class="MuiPickersFadeTransitionGroup-root css-1etsrfk-MuiPickersFadeTransitionGroup-root"
-                  >
-                    <div
-                      class="MuiPickersCalendarHeader-label css-1chuxo2-MuiPickersCalendarHeader-label"
-                      id=":r5:-grid-label"
-                      style="opacity: 1;"
-                    >
-                      January 2025
-                    </div>
-                  </div>
-                  <mock-iconbutton
-                    aria-label="calendar view is open, switch to year view"
-                    classname="MuiPickersCalendarHeader-switchViewButton css-v6xlml-MuiPickersCalendarHeader-switchViewButton"
-                    size="small"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiPickersCalendarHeader-switchViewIcon css-14yom7c-MuiSvgIcon-root-MuiPickersCalendarHeader-switchViewIcon"
-                      data-testid="ArrowDropDownIcon"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                  </mock-iconbutton>
-                </div>
-                <div
-                  class="MuiPickersArrowSwitcher-root css-15umtxl-MuiPickersArrowSwitcher-root"
-                  style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                >
-                  <mock-iconbutton
-                    aria-label="Previous month"
-                    classname="MuiPickersArrowSwitcher-button MuiPickersArrowSwitcher-previousIconButton css-1n00uti-MuiPickersArrowSwitcher-button"
-                    disabled="false"
-                    edge="end"
-                    size="medium"
-                    title="Previous month"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit MuiPickersArrowSwitcher-leftArrowIcon css-1ckov0h-MuiSvgIcon-root"
-                      data-testid="ArrowLeftIcon"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
-                      />
-                    </svg>
-                  </mock-iconbutton>
-                  <div
-                    class="MuiPickersArrowSwitcher-spacer css-xb7uwb-MuiPickersArrowSwitcher-spacer"
-                  />
-                  <mock-iconbutton
-                    aria-label="Next month"
-                    classname="MuiPickersArrowSwitcher-button MuiPickersArrowSwitcher-nextIconButton css-1n00uti-MuiPickersArrowSwitcher-button"
-                    disabled="false"
-                    edge="start"
-                    size="medium"
-                    title="Next month"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit MuiPickersArrowSwitcher-rightArrowIcon css-1ckov0h-MuiSvgIcon-root"
-                      data-testid="ArrowRightIcon"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </mock-iconbutton>
-                </div>
-              </div>
-              <div
-                class="MuiPickersFadeTransitionGroup-root MuiDateCalendar-viewTransitionContainer css-hwynws-MuiPickersFadeTransitionGroup-root-MuiDateCalendar-viewTransitionContainer"
-              >
-                <div
-                  style="opacity: 1;"
-                >
-                  <div
-                    aria-labelledby=":r5:-grid-label"
-                    class="MuiDayCalendar-root css-q5we01-MuiDayCalendar-root"
-                    role="grid"
-                  >
-                    <div
-                      class="MuiDayCalendar-header css-1rl1vrc-MuiDayCalendar-header"
-                      role="row"
-                    >
-                      <mock-typography
-                        aria-label="Sunday"
-                        classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                        role="columnheader"
-                        variant="caption"
-                      >
-                        S
-                      </mock-typography>
-                      <mock-typography
-                        aria-label="Monday"
-                        classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                        role="columnheader"
-                        variant="caption"
-                      >
-                        M
-                      </mock-typography>
-                      <mock-typography
-                        aria-label="Tuesday"
-                        classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                        role="columnheader"
-                        variant="caption"
-                      >
-                        T
-                      </mock-typography>
-                      <mock-typography
-                        aria-label="Wednesday"
-                        classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                        role="columnheader"
-                        variant="caption"
-                      >
-                        W
-                      </mock-typography>
-                      <mock-typography
-                        aria-label="Thursday"
-                        classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                        role="columnheader"
-                        variant="caption"
-                      >
-                        T
-                      </mock-typography>
-                      <mock-typography
-                        aria-label="Friday"
-                        classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                        role="columnheader"
-                        variant="caption"
-                      >
-                        F
-                      </mock-typography>
-                      <mock-typography
-                        aria-label="Saturday"
-                        classname="MuiDayCalendar-weekDayLabel css-jpmu5p-MuiDayCalendar-weekDayLabel"
-                        role="columnheader"
-                        variant="caption"
-                      >
-                        S
-                      </mock-typography>
-                    </div>
-                    <div
-                      class="MuiPickersSlideTransition-root MuiDayCalendar-slideTransition css-1n1xn3x-MuiPickersSlideTransition-root-MuiDayCalendar-slideTransition"
-                      role="presentation"
-                    >
-                      <div
-                        class="MuiDayCalendar-monthContainer css-4wda5y-MuiDayCalendar-monthContainer"
-                        role="rowgroup"
-                      >
-                        <div
-                          aria-rowindex="1"
-                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                          role="row"
-                        >
-                          <div
-                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                            role="gridcell"
-                          />
-                          <div
-                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                            role="gridcell"
-                          />
-                          <div
-                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                            role="gridcell"
-                          />
-                          <button
-                            aria-colindex="4"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1735689600000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            1
-                          </button>
-                          <button
-                            aria-colindex="5"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1735776000000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            2
-                          </button>
-                          <button
-                            aria-colindex="6"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1735862400000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            3
-                          </button>
-                          <button
-                            aria-colindex="7"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1735948800000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            4
-                          </button>
-                        </div>
-                        <div
-                          aria-rowindex="2"
-                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                          role="row"
-                        >
-                          <button
-                            aria-colindex="1"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1736035200000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            5
-                          </button>
-                          <button
-                            aria-colindex="2"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1736121600000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            6
-                          </button>
-                          <button
-                            aria-colindex="3"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1736208000000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            7
-                          </button>
-                          <button
-                            aria-colindex="4"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1736294400000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            8
-                          </button>
-                          <button
-                            aria-colindex="5"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1736380800000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            9
-                          </button>
-                          <button
-                            aria-colindex="6"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1736467200000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            10
-                          </button>
-                          <button
-                            aria-colindex="7"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1736553600000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            11
-                          </button>
-                        </div>
-                        <div
-                          aria-rowindex="3"
-                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                          role="row"
-                        >
-                          <button
-                            aria-colindex="1"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1736640000000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            12
-                          </button>
-                          <button
-                            aria-colindex="2"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1736726400000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            13
-                          </button>
-                          <button
-                            aria-colindex="3"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1736812800000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            14
-                          </button>
-                          <button
-                            aria-colindex="4"
-                            aria-current="date"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-today css-qt9k9u-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1736899200000"
-                            role="gridcell"
-                            tabindex="0"
-                            type="button"
-                          >
-                            15
-                          </button>
-                          <button
-                            aria-colindex="5"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1736985600000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            16
-                          </button>
-                          <button
-                            aria-colindex="6"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1737072000000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            17
-                          </button>
-                          <button
-                            aria-colindex="7"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1737158400000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            18
-                          </button>
-                        </div>
-                        <div
-                          aria-rowindex="4"
-                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                          role="row"
-                        >
-                          <button
-                            aria-colindex="1"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1737244800000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            19
-                          </button>
-                          <button
-                            aria-colindex="2"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1737331200000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            20
-                          </button>
-                          <button
-                            aria-colindex="3"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1737417600000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            21
-                          </button>
-                          <button
-                            aria-colindex="4"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1737504000000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            22
-                          </button>
-                          <button
-                            aria-colindex="5"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1737590400000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            23
-                          </button>
-                          <button
-                            aria-colindex="6"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1737676800000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            24
-                          </button>
-                          <button
-                            aria-colindex="7"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1737763200000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            25
-                          </button>
-                        </div>
-                        <div
-                          aria-rowindex="5"
-                          class="MuiDayCalendar-weekContainer css-1pv2de5-MuiDayCalendar-weekContainer"
-                          role="row"
-                        >
-                          <button
-                            aria-colindex="1"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1737849600000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            26
-                          </button>
-                          <button
-                            aria-colindex="2"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1737936000000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            27
-                          </button>
-                          <button
-                            aria-colindex="3"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1738022400000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            28
-                          </button>
-                          <button
-                            aria-colindex="4"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1738108800000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            29
-                          </button>
-                          <button
-                            aria-colindex="5"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1738195200000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            30
-                          </button>
-                          <button
-                            aria-colindex="6"
-                            aria-selected="false"
-                            class="MuiButtonBase-root MuiPickersDay-root MuiPickersDay-dayWithMargin css-wbk8ya-MuiButtonBase-root-MuiPickersDay-root"
-                            data-timestamp="1738281600000"
-                            role="gridcell"
-                            tabindex="-1"
-                            type="button"
-                          >
-                            31
-                          </button>
-                          <div
-                            class="MuiPickersDay-root MuiPickersDay-dayWithMargin MuiPickersDay-hiddenDaySpacingFiller MuiPickersDay-hiddenDaySpacingFiller css-ebi9pt-MuiPickersDay-root"
-                            role="gridcell"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <mock-dialogactions
-            classname="MuiPickersLayout-actionBar"
-            ownerstate="[object Object]"
-          >
-            <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-iorydh-MuiButtonBase-root-MuiButton-root"
-              tabindex="0"
-              type="button"
-            >
-              Cancel
-            </button>
-            <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-iorydh-MuiButtonBase-root-MuiButton-root"
-              tabindex="0"
-              type="button"
-            >
-              OK
-            </button>
-          </mock-dialogactions>
-        </div>
-      </mock-dialogcontent>
-    </mock-dialog>
+    <mock-date-picker
+      classname="Form-formField-3"
+      closeonselect="true"
+      format="MM/dd/yyyy"
+      slotprops="[object Object]"
+    />
     <mock-typography>
       Installation, survey and maintenance personnel and equipment
     </mock-typography>
@@ -784,7 +156,7 @@ exports[`renders as expected 1`] = `
         <textarea
           aria-invalid="false"
           class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline Form-textField-6 css-s43td4-MuiInputBase-input-MuiOutlinedInput-input"
-          id=":r6:"
+          id=":r3:"
           name="installationResources"
           placeholder="Please provide a description of the people that will be able to conduct periodic surveys and maintenance of the buoy. Please also include a description of the equipment (e.g. a boat, cameras) that are available."
           style="height: 0px; overflow: hidden;"
diff --git a/packages/website/src/routes/Surveys/View/ObservationBox.tsx b/packages/website/src/routes/Surveys/View/ObservationBox.tsx
index 15ea15db3..4836cf6c3 100644
--- a/packages/website/src/routes/Surveys/View/ObservationBox.tsx
+++ b/packages/website/src/routes/Surveys/View/ObservationBox.tsx
@@ -25,6 +25,16 @@ const ObservationBox = ({
   const { hoboBottom, hoboSurface, spotterBottom, spotterTop } =
     getCardTemperatureValues(bottomTemperature, topTemperature, date);
 
+  const hasSensorData = some([
+    hoboBottom,
+    hoboSurface,
+    spotterBottom,
+    spotterTop,
+  ]);
+
+  if (!loading && !hasSensorData && !satelliteTemperature) {
+    return null;
+  }
   return (
     <div className={classes.outerDiv}>
       {loading ? (
diff --git a/packages/website/src/setupTests.ts b/packages/website/src/setupTests.ts
index 5e9164dd0..cc8c07f11 100644
--- a/packages/website/src/setupTests.ts
+++ b/packages/website/src/setupTests.ts
@@ -149,3 +149,10 @@ stubMuiComponent('TableRow');
 stubMuiComponent('TableCell');
 stubMuiComponent('TablePagination');
 stubMuiComponent('TableSortLabel');
+
+jest.doMock(`@mui/x-date-pickers/DatePicker`, () => ({
+  ...jest.requireActual(`@mui/x-date-pickers/DatePicker`),
+  __esModule: true,
+  default: `mock-date-picker`,
+  DatePicker: `mock-date-picker`,
+}));
diff --git a/yarn.lock b/yarn.lock
index f044e6b2d..b89b6150a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19702,7 +19702,16 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -19797,7 +19806,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -19818,6 +19827,13 @@ strip-ansi@^5.1.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
@@ -20776,7 +20792,7 @@ typeorm-seeding@^1.6.1:
     reflect-metadata "0.1.13"
     yargs "15.3.1"
 
-typeorm@^0.3.18:
+typeorm@^0.3.19:
   version "0.3.20"
   resolved "https://registry.yarnpkg.com/typeorm/-/typeorm-0.3.20.tgz#4b61d737c6fed4e9f63006f88d58a5e54816b7ab"
   integrity sha512-sJ0T08dV5eoZroaq9uPKBoNcGslHBR4E4y+EBHs//SiGbblGe7IeduP/IH4ddCcj0qp3PHwDwGnuvqEAnKlq/Q==
@@ -21702,7 +21718,7 @@ workbox-window@6.5.4:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.5.4"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -21720,6 +21736,15 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 1ae5cfb45d03aea2170cbaf16ba8634eb249971e Mon Sep 17 00:00:00 2001
From: Konstantinos Markopoulos <konst.markopoulos@gmail.com>
Date: Tue, 21 Jan 2025 17:00:23 +0200
Subject: [PATCH 2/3] Improve map performance - use points on canvas (#1069)

Co-authored-by: Eric Boucher <eric.p.boucher@gmail.com>
---
 .../src/helpers/bleachingAlertIntervals.ts    |  5 -
 .../routes/HomeMap/Map/Markers/SiteMarker.tsx | 84 ++++++++++------
 .../src/routes/HomeMap/Map/Markers/index.tsx  | 96 +++----------------
 .../website/src/routes/HomeMap/Map/index.tsx  | 21 +++-
 .../src/store/Homepage/homepageSlice.ts       |  3 +
 5 files changed, 93 insertions(+), 116 deletions(-)

diff --git a/packages/website/src/helpers/bleachingAlertIntervals.ts b/packages/website/src/helpers/bleachingAlertIntervals.ts
index de7c86b82..bf586f370 100644
--- a/packages/website/src/helpers/bleachingAlertIntervals.ts
+++ b/packages/website/src/helpers/bleachingAlertIntervals.ts
@@ -84,11 +84,6 @@ export const findIntervalByLevel = (
   }
 };
 
-export const findMaxLevel = (intervals: Interval[]): number => {
-  const levels = intervals.map((item) => item.level);
-  return Math.max(...levels);
-};
-
 export const getColorByLevel = (level: number): string => {
   return findIntervalByLevel(level).color;
 };
diff --git a/packages/website/src/routes/HomeMap/Map/Markers/SiteMarker.tsx b/packages/website/src/routes/HomeMap/Map/Markers/SiteMarker.tsx
index 0115242f8..fa3e2f752 100644
--- a/packages/website/src/routes/HomeMap/Map/Markers/SiteMarker.tsx
+++ b/packages/website/src/routes/HomeMap/Map/Markers/SiteMarker.tsx
@@ -1,18 +1,18 @@
-import { Marker, useLeaflet } from 'react-leaflet';
+import { CircleMarker, Marker } from 'react-leaflet';
 import { useDispatch, useSelector } from 'react-redux';
 import React from 'react';
 import { Site } from 'store/Sites/types';
 import {
-  siteOnMapSelector,
-  setSiteOnMap,
+  isSelectedOnMapSelector,
   setSearchResult,
+  setSiteOnMap,
 } from 'store/Homepage/homepageSlice';
-import { useMarkerIcon } from 'helpers/map';
-import { hasDeployedSpotter } from 'helpers/siteUtils';
 import {
   alertColorFinder,
   alertIconFinder,
 } from 'helpers/bleachingAlertIntervals';
+import { useMarkerIcon } from 'helpers/map';
+import { hasDeployedSpotter } from 'helpers/siteUtils';
 import Popup from '../Popup';
 
 // To make sure we can see all the sites all the time, and especially
@@ -21,21 +21,52 @@ const LNG_OFFSETS = [-360, 0, 360];
 
 interface SiteMarkerProps {
   site: Site;
-  setCenter: (inputMap: L.Map, latLng: [number, number], zoom: number) => void;
 }
 
 /**
  * All in one site marker with icon, offset duplicates, and popup built in.
  */
-export default function SiteMarker({ site, setCenter }: SiteMarkerProps) {
-  const siteOnMap = useSelector(siteOnMapSelector);
-  const { map } = useLeaflet();
+export const CircleSiteMarker = React.memo(({ site }: SiteMarkerProps) => {
+  const isSelected = useSelector(isSelectedOnMapSelector(site.id));
+  const dispatch = useDispatch();
+  const { tempWeeklyAlert } = site.collectionData || {};
+
+  if (site.polygon.type !== 'Point') return null;
+
+  const [lng, lat] = site.polygon.coordinates;
+
+  return (
+    <>
+      {LNG_OFFSETS.map((offset) => (
+        <CircleMarker
+          onclick={() => {
+            dispatch(setSearchResult());
+            dispatch(setSiteOnMap(site));
+          }}
+          key={`${site.id}-${offset}`}
+          center={[lat, lng + offset]}
+          radius={5}
+          fillColor={alertColorFinder(tempWeeklyAlert)}
+          fillOpacity={1}
+          color="black"
+          weight={1}
+          data-alert={tempWeeklyAlert}
+        >
+          {isSelected && <Popup site={site} autoOpen={offset === 0} />}
+        </CircleMarker>
+      ))}
+    </>
+  );
+});
+
+export const SensorSiteMarker = React.memo(({ site }: SiteMarkerProps) => {
+  const isSelected = useSelector(isSelectedOnMapSelector(site.id));
   const dispatch = useDispatch();
   const { tempWeeklyAlert } = site.collectionData || {};
   const markerIcon = useMarkerIcon(
     hasDeployedSpotter(site),
     site.hasHobo,
-    siteOnMap?.id === site.id,
+    isSelected,
     alertColorFinder(tempWeeklyAlert),
     alertIconFinder(tempWeeklyAlert),
   );
@@ -43,24 +74,23 @@ export default function SiteMarker({ site, setCenter }: SiteMarkerProps) {
   if (site.polygon.type !== 'Point') return null;
 
   const [lng, lat] = site.polygon.coordinates;
+
   return (
     <>
-      {LNG_OFFSETS.map((offset) => {
-        return (
-          <Marker
-            onClick={() => {
-              if (map) setCenter(map, [lat, lng], 6);
-              dispatch(setSearchResult());
-              dispatch(setSiteOnMap(site));
-            }}
-            key={`${site.id}-${offset}`}
-            icon={markerIcon}
-            position={[lat, lng + offset]}
-          >
-            <Popup site={site} autoOpen={offset === 0} />
-          </Marker>
-        );
-      })}
+      {LNG_OFFSETS.map((offset) => (
+        <Marker
+          onClick={() => {
+            dispatch(setSearchResult());
+            dispatch(setSiteOnMap(site));
+          }}
+          key={`${site.id}-${offset}`}
+          icon={markerIcon}
+          position={[lat, lng + offset]}
+          data-alert={tempWeeklyAlert}
+        >
+          {isSelected && <Popup site={site} autoOpen={offset === 0} />}
+        </Marker>
+      ))}
     </>
   );
-}
+});
diff --git a/packages/website/src/routes/HomeMap/Map/Markers/index.tsx b/packages/website/src/routes/HomeMap/Map/Markers/index.tsx
index 4d57ee95a..94763cea6 100644
--- a/packages/website/src/routes/HomeMap/Map/Markers/index.tsx
+++ b/packages/website/src/routes/HomeMap/Map/Markers/index.tsx
@@ -1,36 +1,14 @@
 import { useSelector } from 'react-redux';
-import { LayerGroup, useLeaflet } from 'react-leaflet';
-import MarkerClusterGroup from 'react-leaflet-markercluster';
-import React, { useCallback, useEffect, useState, useMemo } from 'react';
-import L from 'leaflet';
+import React, { useMemo } from 'react';
 import { sitesToDisplayListSelector } from 'store/Sites/sitesListSlice';
 import { Site } from 'store/Sites/types';
-import { siteOnMapSelector } from 'store/Homepage/homepageSlice';
 import 'leaflet/dist/leaflet.css';
 import 'react-leaflet-markercluster/dist/styles.min.css';
 import { CollectionDetails } from 'store/Collection/types';
-import {
-  findIntervalByLevel,
-  findMaxLevel,
-  getColorByLevel,
-  Interval,
-} from 'helpers/bleachingAlertIntervals';
-import SiteMarker from './SiteMarker';
+import { hasDeployedSpotter } from 'helpers/siteUtils';
+import { CircleSiteMarker, SensorSiteMarker } from './SiteMarker';
 
-const clusterIcon = (cluster: any) => {
-  const alerts: Interval[] = cluster.getAllChildMarkers().map((marker: any) => {
-    const { site } = marker?.options?.children?.[0]?.props || {};
-    const { tempWeeklyAlert } = site?.collectionData || {};
-    return findIntervalByLevel(tempWeeklyAlert);
-  });
-  const color = getColorByLevel(findMaxLevel(alerts));
-  const count = cluster.getChildCount();
-  return L.divIcon({
-    html: `<div style="background-color: ${color}"><span>${count}</span></div>`,
-    className: `leaflet-marker-icon marker-cluster custom-cluster-icon marker-cluster-small leaflet-zoom-animated leaflet-interactive`,
-    iconSize: L.point(40, 40, true),
-  });
-};
+const hasSpotter = (site: Site) => site.hasHobo || hasDeployedSpotter(site);
 
 export const SiteMarkers = ({ collection }: SiteMarkersProps) => {
   const storedSites = useSelector(sitesToDisplayListSelector);
@@ -38,65 +16,17 @@ export const SiteMarkers = ({ collection }: SiteMarkersProps) => {
     () => collection?.sites || storedSites || [],
     [collection?.sites, storedSites],
   );
-  const siteOnMap = useSelector(siteOnMapSelector);
-  const { map } = useLeaflet();
-  const [visibleSites, setVisibleSites] = useState(sitesList);
-
-  const setCenter = useCallback(
-    (inputMap: L.Map, latLng: [number, number], zoom: number) => {
-      const maxZoom = Math.max(inputMap.getZoom() || 6, zoom);
-      const pointBounds = L.latLngBounds(latLng, latLng);
-      inputMap.flyToBounds(pointBounds, {
-        duration: 2,
-        maxZoom,
-        paddingTopLeft: L.point(0, 200),
-      });
-    },
-    [],
-  );
-
-  const filterSitesByViewport = useCallback(() => {
-    if (!map) return;
-
-    const bounds = map.getBounds();
-    const filtered = sitesList.filter((site: Site) => {
-      if (!site.polygon || site.polygon.type !== 'Point') return false;
-      const [lng, lat] = site.polygon.coordinates;
-      return bounds.contains([lat, lng]);
-    });
-    setVisibleSites(filtered);
-  }, [map, sitesList]);
-
-  useEffect(() => {
-    if (!map) return undefined;
-
-    filterSitesByViewport();
-    map.on('moveend', filterSitesByViewport);
-
-    return () => {
-      map.off('moveend', filterSitesByViewport);
-      return undefined;
-    };
-  }, [map, filterSitesByViewport]);
-
-  useEffect(() => {
-    if (map && siteOnMap?.polygon.type === 'Point') {
-      const [lng, lat] = siteOnMap.polygon.coordinates;
-      setCenter(map, [lat, lng], 6);
-    }
-  }, [map, siteOnMap, setCenter]);
 
   return (
-    <LayerGroup>
-      <MarkerClusterGroup
-        iconCreateFunction={clusterIcon}
-        disableClusteringAtZoom={1}
-      >
-        {visibleSites.map((site: Site) => (
-          <SiteMarker key={site.id} site={site} setCenter={setCenter} />
-        ))}
-      </MarkerClusterGroup>
-    </LayerGroup>
+    <>
+      {sitesList.map((site: Site) =>
+        sitesList[site.id] && hasSpotter(site) ? (
+          <SensorSiteMarker key={`${site.id}`} site={site} />
+        ) : (
+          <CircleSiteMarker key={`${site.id}`} site={site} />
+        ),
+      )}
+    </>
   );
 };
 
diff --git a/packages/website/src/routes/HomeMap/Map/index.tsx b/packages/website/src/routes/HomeMap/Map/index.tsx
index a392e93f7..91439cff0 100644
--- a/packages/website/src/routes/HomeMap/Map/index.tsx
+++ b/packages/website/src/routes/HomeMap/Map/index.tsx
@@ -17,7 +17,10 @@ import withStyles, {
 } from '@mui/styles/withStyles';
 import MyLocationIcon from '@mui/icons-material/MyLocation';
 import { sitesListLoadingSelector } from 'store/Sites/sitesListSlice';
-import { searchResultSelector } from 'store/Homepage/homepageSlice';
+import {
+  searchResultSelector,
+  siteOnMapSelector,
+} from 'store/Homepage/homepageSlice';
 import { CollectionDetails } from 'store/Collection/types';
 import { MapLayerName } from 'store/Homepage/types';
 import { mapConstants } from 'constants/maps';
@@ -67,6 +70,7 @@ const HomepageMap = ({
     useState<string>();
   const loading = useSelector(sitesListLoadingSelector);
   const searchResult = useSelector(searchResultSelector);
+  const siteOnMap = useSelector(siteOnMapSelector);
   const ref = useRef<Map>(null);
 
   const onLocationSearch = () => {
@@ -115,6 +119,21 @@ const HomepageMap = ({
     }
   }, [searchResult]);
 
+  useEffect(() => {
+    const map = ref.current?.leafletElement;
+    if (map && siteOnMap?.polygon.type === 'Point') {
+      const [lng, lat] = siteOnMap.polygon.coordinates;
+      const latLng = [lat, lng] as [number, number];
+      const pointBounds = L.latLngBounds(latLng, latLng);
+      const maxZoom = Math.max(map.getZoom() || 6);
+      map.flyToBounds(pointBounds, {
+        duration: 2,
+        maxZoom,
+        paddingTopLeft: L.point(0, 200),
+      });
+    }
+  }, [siteOnMap]);
+
   const onBaseLayerChange = ({ name }: LayersControlEvent) => {
     setLegendName(name);
   };
diff --git a/packages/website/src/store/Homepage/homepageSlice.ts b/packages/website/src/store/Homepage/homepageSlice.ts
index d1fd659d7..9cbf47cc6 100644
--- a/packages/website/src/store/Homepage/homepageSlice.ts
+++ b/packages/website/src/store/Homepage/homepageSlice.ts
@@ -38,6 +38,9 @@ const homepageSlice = createSlice({
   },
 });
 
+export const isSelectedOnMapSelector = (id: number) => (state: RootState) =>
+  state.homepage.siteOnMap?.id === id;
+
 export const siteOnMapSelector = (
   state: RootState,
 ): HomePageState['siteOnMap'] => state.homepage.siteOnMap;

From a3cb1efc2f176d04e9109ed763fb60561790ced8 Mon Sep 17 00:00:00 2001
From: Konstantinos Markopoulos <konst.markopoulos@gmail.com>
Date: Tue, 21 Jan 2025 18:23:16 +0200
Subject: [PATCH 3/3] Show Reef Check if survey submitter info is unavailable
 (#1084)

---
 .../SiteDetails/Surveys/ReefCheckSurveyCard/index.test.tsx    | 3 ++-
 .../common/SiteDetails/Surveys/ReefCheckSurveyCard/index.tsx  | 4 +---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.test.tsx b/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.test.tsx
index f07a83c64..7abe03236 100644
--- a/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.test.tsx
+++ b/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.test.tsx
@@ -20,7 +20,7 @@ describe('ReefCheckSurveyCard', () => {
     );
   }
 
-  it('should render date & depth', () => {
+  it('should render correctly', () => {
     const { getByText } = renderReefCheckSurveyCard();
 
     expect(
@@ -29,6 +29,7 @@ describe('ReefCheckSurveyCard', () => {
     expect(
       getByText(`Depth: ${mockReefCheckSurvey.depth}m`),
     ).toBeInTheDocument();
+    expect(getByText('User: Reef Check')).toBeInTheDocument();
   });
 
   it('should render user if submittedBy is present', () => {
diff --git a/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.tsx b/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.tsx
index 36d03d3f3..3fbca3513 100644
--- a/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.tsx
+++ b/packages/website/src/common/SiteDetails/Surveys/ReefCheckSurveyCard/index.tsx
@@ -64,9 +64,7 @@ const ReefCheckSurveyCardComponent = ({
           </Typography>
           <Typography>Depth: {survey.depth}m</Typography>
         </Box>
-        {survey.submittedBy && (
-          <Typography>User: {survey.submittedBy}</Typography>
-        )}
+        <Typography>User: {survey.submittedBy ?? 'Reef Check'}</Typography>
       </Box>
       <TableContainer className={classes.tableRoot}>
         <Table size="small">