JSFiddle - React, Tailwind, and code Playground

by schantanu

HTML

<p>
Hello, World!
</p>

JavaScript

/* SELECT 
  f.COMMON_ID,
  f.FORECASTED_S4_MMID,
  f.FORECASTED_AS_ITEM_ID,
  f.DP_GROUP_MKT as Market,
  m.S4_NWE_MKT_LVL3 as MarketL3,
  f.VALIDITY_DATE,
  f.FORECAST_MONTH,
  f.QUANTITY,
  m.RDC,
  m.PLANTID
FROM [forecast_table] f
LEFT JOIN [market_map_table] m 
  ON f.DP_GROUP_MKT = m.DP_GROUP_MKT

function GetForecasts() {
  const sheet = SpreadsheetApp.getActive().getSheetByName("Input Data - Forecasts");
  const data = sheet.getDataRange().getValues();
  const headers = data[0];
  
  const cols = {
    commonId: headers.indexOf('COMMON_ID'),
    mmid: headers.indexOf('FORECASTED_S4_MMID'),
    itemId: headers.indexOf('FORECASTED_AS_ITEM_ID'),
    market: headers.indexOf('DP_GROUP_MKT'),
    marketL3: headers.indexOf('S4_NWE_MKT_LVL3'),
    validityDate: headers.indexOf('VALIDITY_DATE'),
    forecastMonth: headers.indexOf('FORECAST_MONTH'),
    quantity: headers.indexOf('QUANTITY'),
    rdc: headers.indexOf('RDC'),
    plantId: headers.indexOf('PLANTID')
  };

  const forecasts = [];
  for (let i = 1; i < data.length; i++) {
    const row = data[i];
    forecasts.push({
      CommonID: String(row[cols.commonId]),
      ForecastedS4MMID: String(row[cols.mmid]),
      ForecastedAsItemID: String(row[cols.itemId]),
      Market: row[cols.market],
      MarketL3: row[cols.marketL3],
      ValidityDate: formatDateToString(row[cols.validityDate]),
      ForecastMonthDate: formatDateToString(row[cols.forecastMonth]),
      Quantity: row[cols.quantity],
      InventoryAllocationQuantity: 0,
      RDC: row[cols.rdc],
      PlantID: row[cols.plantId]
    });
  }
  
  return forecasts;
}

function GetInventoryByPlant() {
  const sheet = SpreadsheetApp.getActive().getSheetByName("Input Data - Inventory");
  const data = sheet.getDataRange().getValues();
  const headers = data[0];
  
  const cols = {
    commonId: headers.indexOf('CommonID'),
    plantId: headers.indexOf('PlantID'),
    remainingQty: headers.indexOf('RemainingQtyAvailableToAllocate')
  };

  // Group...