return (
    <>
      <h2>Automations - Rules</h2>

      <div style={{ marginBottom: 10 }}>
        <FwButton color="secondary" onFwClick={handleFilterApiClick}>
          Filter API (Based on Duplicates (High to Low))
        </FwButton>
      </div>

      {showSearchHint && (
        <p style={{ color: "red", marginTop: "4px", fontSize: "0.9em" }}>
          Please enter a search term before searching.
        </p>
      )}

      {loadingBannerVisible && !isRulesDBReady && (
        <div style={{ display: "flex", alignItems: "center", margin: "20px 0" }}>
          <FwSpinner size="medium" color="green" />
          <span style={{ marginLeft: "8px" }}>Waiting for rules to be ready...</span>
        </div>
      )}

      {isRulesDBReady && tabsInitialized && (
        <div style={{ width: "60%", marginLeft: 10, marginRight: "auto" }}>
          <div
            style={{
              display: "flex",
              justifyContent: "flex-end",
              marginTop: 5,
              marginBottom: 15,
            }}
          >
            <FwButton color="secondary" onFwClick={fetchData} disabled={!isRulesDBReady}>
              {fetchFromApi ? "Get Entity Data" : "Get Recent Data"}
            </FwButton>
          </div>

          <FwTabs activeTab={activeTab}>
            <FwTab slot="tab" panel="ticketcreate" onClick={() => setActiveTab("ticketcreate")}>
              Ticket Creation
            </FwTab>
            <FwTab slot="tab" panel="ticketupdate" onClick={() => setActiveTab("ticketupdate")}>
              Ticket Updates
            </FwTab>
            <FwTab slot="tab" panel="hourly" onClick={() => setActiveTab("hourly")}>
              Hourly Triggers
            </FwTab>

            <FwTabPanel name="ticketcreate">
              {searchInputs}

              {renderRulesOrGroups()}

              {showPagination && getPaginatedItemCount() > 0 && (
                <div style={{ marginTop: 10 }}>
                  <div style={{ display: "flex", justifyContent: "center" }}>
                    <FwPagination
                      per-page={rulesPerPage}
                      total={getCurrentTotalCount()}
                      page={currentPage.ticketcreate}
                      onFwChange={handlePageChange("ticketcreate")}
                    />
                  </div>
                </div>
              )}
            </FwTabPanel>

            <FwTabPanel name="ticketupdate">
              {searchInputs}

              {renderRulesOrGroups()}

              {showPagination && getPaginatedItemCount() > 0 && (
                <div style={{ marginTop: 10 }}>
                  <div style={{ display: "flex", justifyContent: "center" }}>
                    <FwPagination
                      per-page={rulesPerPage}
                      total={getCurrentTotalCount()}
                      page={currentPage.ticketupdate}
                      onFwChange={handlePageChange("ticketupdate")}
                    />
                  </div>
                </div>
              )}
            </FwTabPanel>

            <FwTabPanel name="hourly">
              {searchInputs}

              {renderRulesOrGroups()}

              {showPagination && getPaginatedItemCount() > 0 && (
                <div style={{ marginTop: 10 }}>
                  <div style={{ display: "flex", justifyContent: "center" }}>
                    <FwPagination
                      per-page={rulesPerPage}
                      total={getCurrentTotalCount()}
                      page={currentPage.hourly}
                      onFwChange={handlePageChange("hourly")}
                    />
                  </div>
                </div>
              )}
            </FwTabPanel>
          </FwTabs>
        </div>
      )}

      <FwToast />
    </>
  );


in this, add a space before fw tab showing