salience / Time Sheet Portal

// ==UserScript==
// @name         Time Sheet Portal
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Small fixes to Time Sheet Portal
// @author       salience
// @copyright    2026, salience (https://openuserjs.org/users/salience)
// @license      MIT
// @match        https://servicepoint.mtrltech.com/tcp?id=worker_portal_x0410*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=service-now.com
// @grant        none
// ==/UserScript==

const css = `<style type="text/css">
:root {
  --font-ui: "Alleima Neurial", sans-serif;
  --surface-muted: #f1f1f1;
  --surface-shadow: 0 2px 8px -4px rgb(0 0 0 / 20%);
  --border-muted: #666666;
}

/* Global typography */
*,
:where(.navbar-title.navbar-title.navbar-title *) {
  font-family: var(--font-ui);
}

/* Time Sheet breakdown / top summary */
#cal-container-1 {
  * {
    padding-block: 0 !important;
  }

  .cal-container-4 {
    min-height: 5rem;
  }
}

.time-breakdown + .flex-grow {
  display: flex;
  align-items: center;
}

#chart-area {
  display: none;
}

/* Main table */
#tc-grid-table {
  width: auto;

  .project_time_category {
    display: none;
  }

  .flex-item {
    flex: unset;
    width: 92px;

    &:last-of-type {
      width: 42px;
    }
  }

  .table-headers {
    padding-inline-start: 28px;

    .flex-item {
      height: 28px;
      padding: 4px 0 0;

      &:first-child {
        min-width: 300px;
      }
    }
  }

  .table-body {
    .flex-item:first-child {
      min-width: calc(300px + 28px);
      padding: 0 0 0 4px;
    }

    .tc-desc {
      padding-top: 2px;

      * {
        padding: 0;
      }

      span > div:last-child {
        display: none;
      }
    }
  }
}

/* Time cards */
.cards-panel-container {
  .cards-panel-header {
    display: none;
  }

  /* Kept higher specificity in case vendor styles are aggressive */
  .cards-panel-body.cards-panel-body.cards-panel-body {
    padding: 0.5rem;
  }

  .search-input-group {
    box-shadow: var(--surface-shadow);
  }

  /* Kept higher specificity for the same reason */
  .multi-select.multi-select.multi-select.multi-select {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: #fff;
    border-top: 2px solid var(--surface-muted);
    box-shadow: var(--surface-shadow);

    .counter {
      width: fit-content;
    }

    .btn {
      margin-top: 1rem;
      border: 1px solid var(--border-muted);
      border-radius: 4px;
      background-color: var(--surface-muted);
      color: #000;
    }
  }
}

.card {
  margin-bottom: 0.5rem !important;

  > div:first-child {
    padding: 0.5rem 1rem !important;
  }

  > div:last-child {
    &,
    & * {
      padding: 0 !important;
    }

    & * {
      padding-inline-end: 0.5rem !important;
      opacity: 1 !important;
    }
  }

  .secondary-fields {
    display: flex;
    flex-direction: column;
  }

  :where(.separator, .parent-container) {
    display: none;
  }
}

.highlight {
  color: red !important;
}
</style>`;

(function() {

    // Favicon
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/png';
    link.rel = 'shortcut icon';
    link.href = 'https://i.imgur.com/tEGie2N.png';
    document.getElementsByTagName('head')[0].appendChild(link);

    // CSS
    document.body.insertAdjacentHTML('afterend', css);

    /*
    // Always use comma as a decimal separator
    document.body.addEventListener("keydown", (e) => {
        if (e.target.className.includes('tc-row-input') && e.key === '.') {

            // get old value
            var start = e.target.selectionStart;
            var end = e.target.selectionEnd;
            var oldValue = e.target.value;

            // replace point and change input value
            var newValue = oldValue.slice(0, start) + ',' + oldValue.slice(end)
            e.target.value = newValue;

            // replace cursor
            e.target.selectionStart = e.target.selectionEnd = start + 1;
            e.preventDefault();
        }
    });
    */

})();