JSFiddle - React, Tailwind, and code Playground

by schantanu

HTML

<p>Test!</p>
<!-- 
user_guide.html

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap" rel="stylesheet">
    <style>
      body {
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 13.3px;
      }
      ol {
        padding-left: 15px;
        list-style-position: inside;
      }
    </style>
  </head>
  <body>
    <h3><u>Forecast Accuracy Items</u></h3>
    <p>
      Forecast Accuracy Items GSheet is a process implemented by the NSC RAN Planning team for the 
      Forecast Accuracy Tableau Dashboard. Using this GSheet, the Demand Planners can customize the 
      Forecast Months for which specific Common IDs should be reported on the Forecast Accuracy 
      Tableau Dashboard. 
      <br><br>

      There are two distinct values in the `Input` tab's Month columns,
      <br><br><b>1. <u>Exclude</u></b><br>
      These values have been preset by the logic using the `Planned Start Date` and `Planned End Date` 
      columns, which are managed by the Tracked Items table process. These values <b>cannot be edited</b>
      via this GSheet. To edit these values, you will need to edit the Planning dates accordingly via 
      the <b>Tracked Items process</b> managed by Terrence Belmonti.

      <br><br><b>2. <u>Manual Constraint</u></b><br>
      These values have been manually edited and managed by the Demand Planners for their respective 
      items via this GSheet. To edit these values, you can utilize the following two scripts available 
      under the <b>Editor menu</b>,

      <ol type="a">
        <li><b><u>Add Constraint Items</u></b><br>
          Use this option to add the `Manual Constraint` values to the specific Common IDs and Months. You can
          add single or multiple items and months. You can only add constraint items to current and future months.
          <br><br>
        </li>
        <li><b><u>Remove Constraint Items</u></b><br>
          Use...

JavaScript

/* constants.gs
// Constants
//
// -------------------------------------------------- Data --------------------------------------------------
//
// Misc
const dataSheetName = 'Data';
const dataHeaderRow = 1;
const dataStartRow = 1;
const dataStartCol = 1;

// Array columns (Array columns start at 0)
const dataArrColCommonId = 6;
const dataArrColMonth = 12;
const dataArrColValue = 13;

// Sheet columns
const dataColValidityDate       = 1;
const dataColForecastType       = 2;
const dataColFamily             = 3;
const dataColGroupFunction      = 4;
const dataColVendor             = 5;
const dataColShortName          = 6;
const dataColCommonID           = 7;
const dataColCommonDesc         = 8;
const dataColMaterialGroup      = 9;
const dataColPlannedStartDate   = 10;
const dataColPlannedEndDate     = 11;
const dataColIsCurrentlyActive  = 12;
const dataColMonth              = 13;
const dataColValue              = 14;
const dataColAction             = 15;
const dataColNotes              = 16;
const dataColUserEmail          = 17;
const dataColLastUpdated        = 18;
//
// -------------------------------------------------- Input -------------------------------------------------
//
// Misc
const inputSheetName = 'Input';
const inputHeaderRow = 2;
const inputColPivotDateStart = 11;

// Sheet columns
const inputColFamily             = 1;
const inputColGroupFunction      = 2;
const inputColVendor             = 3;
const inputColShortName          = 4;
const inputColCommonID           = 5;
const inputColCommonDesc         = 6;
const inputColMaterialGroup      = 7;
const inputColPlannedStartDate   = 8;
const inputColPlannedEndDate     = 9;
const inputColIsCurrentlyActive  = 10;
//
// -------------------------------------------------- Admin -------------------------------------------------
//
// Misc
const adminSheetName = 'Admin';
const adminDataRowStart = 3;
const adminUserColsTotal = 2;
const adminColAdmins = 1;
const adminColUsers = 2;
const adminAddConstraintsMonth =...