@opengeoweb/taf 2.2.0 → 2.4.0

package/index.esm.js

@@ -1,14 +1,19 @@
 import * as React from 'react';
 import React__default from 'react';
-import { Grid, TextField, IconButton, Tooltip, Chip, SvgIcon, Typography, Button, Dialog, DialogTitle, DialogContent, Card, Accordion, AccordionSummary, AccordionDetails, Skeleton, Backdrop, CircularProgress } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
-import moment from 'moment';
-import { useIsMounted, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, StatusTag, AlertBanner, ConfirmationServiceProvider, usePoller, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
-import { Add, Delete, DragIndicator, Close, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@mui/icons-material';
-import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
+import { TextField, SvgIcon, Grid, Box, Button, IconButton, Typography, Tooltip, Chip, useTheme, Card, Tabs, Tab, Dialog, MenuList, MenuItem, Backdrop, CircularProgress } from '@mui/material';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
 import { ReactSortable, Sortable } from 'react-sortablejs';
+import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
+import { useIsMounted, ToggleMenu, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, ToolButton, ToolHeader, AlertBanner, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
+import moment from 'moment';
+import { isEqual } from 'lodash';
+import makeStyles from '@mui/styles/makeStyles';
+import { DragIndicator, Schedule, CheckCircle } from '@mui/icons-material';
+import ReactDOM from 'react-dom';
+import LinearProgress from '@mui/material/LinearProgress';
+import DoDisturbIcon from '@mui/icons-material/DoDisturb';
+import Box$1 from '@mui/material/Box';
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -117,119 +122,6 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _createForOfIteratorHelper(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-
-      var F = function () {};
-
-      return {
-        s: F,
-        n: function () {
-          if (i >= o.length) return {
-            done: true
-          };
-          return {
-            done: false,
-            value: o[i++]
-          };
-        },
-        e: function (e) {
-          throw e;
-        },
-        f: F
-      };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  var normalCompletion = true,
-      didErr = false,
-      err;
-  return {
-    s: function () {
-      it = o[Symbol.iterator]();
-    },
-    n: function () {
-      var step = it.next();
-      normalCompletion = step.done;
-      return step;
-    },
-    e: function (e) {
-      didErr = true;
-      err = e;
-    },
-    f: function () {
-      try {
-        if (!normalCompletion && it.return != null) it.return();
-      } finally {
-        if (didErr) throw err;
-      }
-    }
-  };
-}
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var useTafSettings = function useTafSettings( // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types
-tafConfig) {
-  var locations = tafConfig.locations;
-  return {
-    locations: locations
-  };
-};
-
-var location_indicator_mwo = "EHDB";
-var locations = {
-	EHAM: {
-		validity_duration: 30,
-		activity_period: 6
-	},
-	EHRD: {
-		validity_duration: 30,
-		activity_period: 6
-	},
-	EHGG: {
-		validity_duration: 30,
-		activity_period: 6
-	},
-	EHBK: {
-		validity_duration: 30,
-		activity_period: 6
-	},
-	EHLE: {
-		validity_duration: 30,
-		activity_period: 6
-	},
-	TNCB: {
-		validity_duration: 30,
-		activity_period: 6
-	}
-};
-var tafConfig = {
-	location_indicator_mwo: location_indicator_mwo,
-	locations: locations
-};
-
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -2500,11 +2392,26 @@ var getConfirmationDialogTitle = function getConfirmationDialogTitle(action) {
   if (action === 'PUBLISH') return 'Publish';
   if (action === 'AMEND') return 'This TAF is an amendment';
   if (action === 'CORRECT') return 'This TAF is a correction';
+  if (action === 'CANCEL') return 'Cancel TAF';
   return 'Cancel TAF';
-};
-var getConfirmationDialogContent = function getConfirmationDialogContent(action) {
-  var isFormDirty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+}; // Check if the amended/corrected TAF has been changed. Only compare the fields users are able to fill in
+// (i.e. exclude baseforecast valid time as that gets updated when doing an amendment automatically outside of the users influence)
+
+var isTafAmendedCorrectedChanged = function isTafAmendedCorrectedChanged(isFormDirty, originalTaf, currentTaf) {
+  var originalBaseF = originalTaf.baseForecast,
+      originalChG = originalTaf.changeGroups;
+  var currentBaseF = currentTaf.baseForecast,
+      currentChG = currentTaf.changeGroups;
 
+  originalBaseF.valid;
+      var originalNoValid = __rest(originalBaseF, ["valid"]);
+
+  currentBaseF.valid;
+      var currentNoValid = __rest(currentBaseF, ["valid"]);
+
+  return isFormDirty && (!isEqual(originalNoValid, currentNoValid) || !isEqual(originalChG, currentChG));
+};
+var getConfirmationDialogContent = function getConfirmationDialogContent(action, isFormDirty) {
   switch (action) {
     case 'DISCARD':
       return 'Are you sure you would like to discard this TAF? Any changes made will be lost';
@@ -2514,7 +2421,7 @@ var getConfirmationDialogContent = function getConfirmationDialogContent(action)
 
     case 'AMEND':
     case 'CORRECT':
-      return isFormDirty ? 'Do you want to publish it?' : 'Are you sure you want to publish the TAF? You did not make any changes!';
+      return isFormDirty() ? 'Do you want to publish it?' : 'Are you sure you want to publish the TAF? You did not make any changes!';
 
     default:
       return 'Are you sure you want to cancel this TAF?';
@@ -2527,89 +2434,147 @@ var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel
         return 'Discard';
       }
 
+    case 'CANCEL':
+      return 'Cancel';
+
     default:
       {
         return 'Publish';
       }
   }
 };
+var emptyChangegroup = {
+  valid: '',
+  wind: '',
+  visibility: '',
+  weather: {
+    weather1: null,
+    weather2: null,
+    weather3: null
+  },
+  cloud: {
+    cloud1: null,
+    cloud2: null,
+    cloud3: null,
+    cloud4: null
+  },
+  change: null,
+  probability: null
+};
+var getTafStatusLabel = function getTafStatusLabel(status) {
+  switch (status) {
+    case 'DRAFT_AMENDED':
+      return 'draft amended';
+
+    case 'DRAFT_CORRECTED':
+      return 'draft corrected';
+
+    default:
+      return status.toLocaleLowerCase();
+  }
+};
+var getMessageType = function getMessageType(taf, tafAction) {
+  if (tafAction === 'CORRECT') {
+    return 'COR';
+  }
+
+  if (tafAction === 'AMEND') {
+    return 'AMD';
+  }
+
+  return taf.messageType;
+}; // For corrections and amendment we need to add the previousValidStart and End for the TAC converter
+
+var getAmendedCorrectedTafTimes = function getAmendedCorrectedTafTimes(taf, tafAction) {
+  var previousValidDateStart = taf.previousValidDateStart && tafAction !== 'AMEND' ? taf.previousValidDateStart : taf.validDateStart;
+  var previousValidDateEnd = taf.previousValidDateEnd && tafAction !== 'AMEND' ? taf.previousValidDateEnd : taf.validDateEnd; // For amendment change valid start time to current time
+  // only do this if we're already within the validity period
+
+  if ((tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND') && moment.utc() >= moment.utc(taf.validDateStart)) {
+    var now = moment.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+    var validObj = {
+      start: now,
+      end: taf.baseForecast.valid.end
+    };
+    return Object.assign(Object.assign({}, taf), {
+      previousValidDateStart: previousValidDateStart,
+      previousValidDateEnd: previousValidDateEnd,
+      validDateStart: now,
+      baseForecast: Object.assign(Object.assign({}, taf.baseForecast), {
+        valid: validObj
+      })
+    });
+  }
+
+  return Object.assign(Object.assign({}, taf), {
+    previousValidDateStart: previousValidDateStart,
+    previousValidDateEnd: previousValidDateEnd
+  });
+};
+var prepareTafValues = function prepareTafValues(_taf, tafAction) {
+  var addEmptyChangeGroup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  // If action is AMEND/CORRECT/DRAFT_AMEND/DRAFT_CORRECTION - add previous valid start and end
+  // If action is AMEND/DRAFT_AMEND - update validity start time to current time
+  var taf = tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND' || tafAction === 'CORRECT' || tafAction === 'DRAFT_CORRECT' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
+  return Object.assign(Object.assign(Object.assign(Object.assign({}, taf), {
+    messageType: getMessageType(taf, tafAction),
+    baseForecast: formatFormValues(taf.baseForecast)
+  }), taf.changeGroups && {
+    changeGroups: taf.changeGroups.map(formatFormValues)
+  }), addEmptyChangeGroup && {
+    changeGroups: [emptyChangegroup]
+  });
+};
 
-var useStyles$9 = makeStyles(function (theme) {
+var textFieldStyle = function textFieldStyle(theme) {
   return {
-    textFieldGridItem: {
-      marginRight: 4
-    },
-    textFieldRoot: {
-      '&.Mui-disabled::before': {
-        borderBottom: 'none'
+    // input
+    marginRight: '2px',
+    marginBottom: '4px',
+    width: 56,
+    height: 46,
+    input: {
+      textAlign: 'center',
+      fontSize: 10,
+      fontWeight: 500,
+      paddingLeft: 0,
+      paddingRight: 0,
+      '&.Mui-disabled': {
+        color: 'geowebColors.typographyAndIcons.text',
+        WebkitTextFillColor: theme.palette.geowebColors.typographyAndIcons.text
       },
-      '&:after': {
-        borderBottomColor: '#3f51b5'
+      // TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1995 disables the default autofill styling, should be a better fix
+      '&:-webkit-autofill': {
+        WebkitTransitionDelay: '86400s' // 1 day delay
+
       }
     },
-    textFieldInput: {
-      fontSize: '14px',
-      paddingLeft: 1,
-      paddingRight: 1,
-      color: '#051039',
-      WebkitTextFillColor: '#051039',
+    label: {
+      transformOrigin: 'center top',
+      right: 0,
+      textAlign: 'center',
+      fontSize: '10px',
       '&.Mui-disabled': {
-        backgroundColor: 'white'
-      }
-    },
-    textFieldLabel: {
-      fontSize: '14px'
-    },
-    textFieldLabelShrink: {
-      transform: 'translate(2px, 10px) scale(0.75) !important'
-    },
-    formRow: {
-      marginTop: 8,
-      backgroundColor: theme.palette.common.white,
-      position: 'relative',
-      '&.sortable-chosen': {
-        boxShadow: theme.shadows[1]
+        color: 'geowebColors.captions.captionStatus.rgba'
       },
-      '&.sortable-ghost': {
-        opacity: 0.5
-      }
-    },
-    tacTitle: {
-      fontSize: '20px',
-      fontWeight: 500
-    },
-    tacText: {
-      fontSize: '14px',
-      color: '#000000'
+      whiteSpace: 'nowrap',
+      maxWidth: '100%',
+      transform: 'translate(0px, 16px) scale(1)'
     },
-    tacLine: {
-      margin: '0',
-      padding: '.1em .1em .1em 0.8em',
-      textIndent: '-0.7em',
-      borderRadius: '3px'
+    // shrink
+    ' .MuiInputLabel-shrink': {
+      transform: 'translate(2px, 10px) scale(0.75) !important',
+      letterSpacing: '0.33px',
+      textAlign: 'left'
     },
-    addButton: {
-      marginRight: '48px'
-    },
-    lifecycleButtons: {
-      marginTop: '40px',
-      marginBottom: '16px'
-    },
-    actionButton: {
-      marginRight: '16px'
-    },
-    lastButton: {
-      marginRight: '90px'
-    },
-    backdrop: {
-      zIndex: 1500,
-      color: '#fff'
-    },
-    emptyButtonContainer: {
-      minWidth: 96
+    // root
+    '&': {
+      '.Mui-disabled:before': {
+        borderColor: 'transparent'
+      }
     }
   };
-});
+};
 
 var getTafErrors = function getTafErrors(name, errors) {
   var nameAsArray = name.split('.');
@@ -2632,25 +2597,13 @@ var getDisplayValue = function getDisplayValue(value, disabled) {
   return disabled && !value ? '-' : value;
 };
 var BaseTextField = /*#__PURE__*/React__default.memo(function (props) {
-  var classes = useStyles$9();
   return /*#__PURE__*/React__default.createElement(TextField, Object.assign({
     type: "text",
     variant: "filled",
-    InputProps: {
-      classes: {
-        input: classes.textFieldInput,
-        root: classes.textFieldRoot
-      }
-    },
-    InputLabelProps: {
-      classes: {
-        root: classes.textFieldLabel,
-        shrink: classes.textFieldLabelShrink
-      }
-    }
+    sx: textFieldStyle
   }, props));
 }, function (prevProps, nextProps) {
-  return prevProps.value === nextProps.value && prevProps.error === nextProps.error && prevProps.name === nextProps.name;
+  return prevProps.value === nextProps.value && prevProps.error === nextProps.error && prevProps.name === nextProps.name && prevProps.disabled === nextProps.disabled;
 });
 
 var TafFormTextField = function TafFormTextField(_ref) {
@@ -2672,7 +2625,6 @@ var TafFormTextField = function TafFormTextField(_ref) {
       autoComplete = _ref$autoComplete === void 0 ? [] : _ref$autoComplete,
       _ref$autoFocus = _ref.autoFocus,
       autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
-  var classes = useStyles$9();
 
   var _useFormContext = useFormContext(),
       control = _useFormContext.control,
@@ -2729,11 +2681,7 @@ var TafFormTextField = function TafFormTextField(_ref) {
     inputRef.current.disabled = false;
     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
   }, []);
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: true,
-    className: classes.textFieldGridItem
-  }, /*#__PURE__*/React__default.createElement(Controller, {
+  return /*#__PURE__*/React__default.createElement(Controller, {
     render: function render(_props) {
       var displayValue = formatter ? formatter(_props.value) : getDisplayValue(_props.value, disabled);
       return /*#__PURE__*/React__default.createElement(BaseTextField, {
@@ -2761,7 +2709,7 @@ var TafFormTextField = function TafFormTextField(_ref) {
     defaultValue: defaultValue,
     rules: rules,
     onFocus: onFocusField
-  }));
+  });
 };
 
 /* *
@@ -2825,6 +2773,71 @@ var validateProbabilityField = function validateProbabilityField(value) {
   return isValid ? true : invalidProbabilityMessage;
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var AddIcon = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("path", {
+  d: "M10.647 10.647h6.82a1.276 1.276 0 1 0 0-2.552h-6.82v-6.82a1.276 1.276 0 1 0-2.552 0v6.82h-6.82a1.276 1.276 0 1 0 0 2.552h6.82v6.82a1.274 1.274 0 0 0 1.276 1.275c.705 0 1.276-.571 1.276-1.276v-6.82z"
+}));
+var DeleteIcon = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("path", {
+  d: "M17.504 8.228c.588 0 1.027.48.973 1.066l-.876 9.64A1.197 1.197 0 0 1 16.434 20H8.41c-.59 0-1.115-.48-1.167-1.066l-.877-9.64a.962.962 0 0 1 .973-1.066zm-2.115 1.228a.82.82 0 0 0-.819.82v7.674a.818.818 0 0 0 1.638 0v-7.675a.819.819 0 0 0-.819-.819zm-2.968 0a.819.819 0 0 0-.819.82v7.674a.818.818 0 1 0 1.638 0v-7.675a.82.82 0 0 0-.82-.819zm-2.968 0a.819.819 0 0 0-.818.82v7.674a.818.818 0 1 0 1.637 0v-7.675a.82.82 0 0 0-.82-.819zM13.432 4c.21 0 .404.168.436.376l.107.758 3.256-.01a1.606 1.606 0 0 1 1.61 1.6l.001.535-12.841.038L6 6.76a1.605 1.605 0 0 1 1.6-1.61l3.262-.008.103-.758a.454.454 0 0 1 .434-.38z"
+}));
+var CrossIcon = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("path", {
+  d: "m13.805 12 4.821-4.822a1.276 1.276 0 1 0-1.804-1.804L12 10.195 7.178 5.374a1.276 1.276 0 1 0-1.804 1.804L10.196 12l-4.822 4.822a1.276 1.276 0 1 0 1.804 1.805L12 13.805l4.822 4.822a1.274 1.274 0 0 0 1.804 0c.499-.5.499-1.306 0-1.805L13.805 12z"
+}));
+
+var TafFormOptionsButton = function TafFormOptionsButton(_ref) {
+  var isChangeGroup = _ref.isChangeGroup,
+      addChangeGroupBelow = _ref.addChangeGroupBelow,
+      addChangeGroupAbove = _ref.addChangeGroupAbove,
+      removeChangeGroup = _ref.removeChangeGroup,
+      clearRow = _ref.clearRow,
+      index = _ref.index;
+  var insertAbove = {
+    text: 'Insert 1 row above',
+    icon: AddIcon,
+    action: addChangeGroupAbove
+  };
+  var insertBelow = {
+    text: 'Insert 1 row below',
+    icon: AddIcon,
+    action: addChangeGroupBelow
+  };
+  var deleteRow = {
+    text: 'Delete row',
+    icon: DeleteIcon,
+    action: removeChangeGroup
+  };
+  var clear = {
+    text: 'Clear row',
+    icon: CrossIcon,
+    action: clearRow
+  };
+  var menuItemsBaseForecast = [insertBelow, clear];
+  var menuItemsChangeGroup = [insertAbove, insertBelow, deleteRow, clear];
+  return /*#__PURE__*/React.createElement(ToggleMenu, {
+    buttonTestId: "tafFormOptions[".concat(index, "]"),
+    buttonSx: {
+      marginTop: '10px',
+      marginLeft: '4px'
+    },
+    menuItems: isChangeGroup ? menuItemsChangeGroup : menuItemsBaseForecast
+  });
+};
+
 var getDefaultValue = function getDefaultValue(fieldName, data) {
   if (!data) {
     return '';
@@ -2845,17 +2858,16 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       disabled = _a$disabled === void 0 ? false : _a$disabled,
       _a$index = _a.index,
       index = _a$index === void 0 ? -1 : _a$index,
-      _a$lastRow = _a.lastRow,
-      lastRow = _a$lastRow === void 0 ? false : _a$lastRow,
       onRemoveChangeGroup = _a.onRemoveChangeGroup,
       _a$field = _a.field,
       field = _a$field === void 0 ? null : _a$field,
       _a$dragHandle = _a.dragHandle,
       dragHandle = _a$dragHandle === void 0 ? null : _a$dragHandle,
-      onAddChangeGroup = _a.onAddChangeGroup,
-      props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroup"]);
+      onAddChangeGroupBelow = _a.onAddChangeGroupBelow,
+      onAddChangeGroupAbove = _a.onAddChangeGroupAbove,
+      onClearRow = _a.onClearRow,
+      props = __rest(_a, ["isChangeGroup", "disabled", "index", "onRemoveChangeGroup", "field", "dragHandle", "onAddChangeGroupBelow", "onAddChangeGroupAbove", "onClearRow"]);
 
-  var classes = useStyles$9();
   var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[".concat(index, "]");
   var fieldNames = getFieldNames(isChangeGroup, index);
 
@@ -2971,14 +2983,39 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     return validFields;
   };
 
-  var addChangeGroup = React__default.useCallback(function () {
-    onAddChangeGroup(index);
-  }, [onAddChangeGroup, index]);
+  var addChangeGroupBelow = React__default.useCallback(function () {
+    onAddChangeGroupBelow(index);
+  }, [onAddChangeGroupBelow, index]);
+  var addChangeGroupAbove = React__default.useCallback(function () {
+    onAddChangeGroupAbove(index);
+  }, [onAddChangeGroupAbove, index]);
+  var clearRow = React__default.useCallback(function () {
+    onClearRow(index);
+  }, [onClearRow, index]);
   return /*#__PURE__*/React__default.createElement(Grid, Object.assign({
+    sx: {
+      marginTop: '8px',
+      backgroundColor: 'geowebColors.cards.cardContainer',
+      position: 'relative',
+      '&.sortable-chosen': {
+        boxShadow: 1
+      },
+      '&.sortable-ghost': {
+        opacity: 0.5
+      }
+    },
+    justifyContent: "flex-start",
     "data-testid": "row-".concat(namePrefix),
     container: true,
-    ref: ref
-  }, props), !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
+    ref: ref,
+    columns: 24
+  }, props), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    container: true,
+    justifyContent: "flex-end",
+    xs: 24,
+    sm: 23
+  }, !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Type",
     name: fieldNames.messageType,
     disabled: true
@@ -2991,13 +3028,12 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     label: "Issue time",
     name: "issueDate",
     disabled: true
-  })), isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: true,
-    style: {
-      display: 'flex'
+  })), isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      width: 56,
+      marginRight: '2px'
     }
-  }, dragHandle), /*#__PURE__*/React__default.createElement(TafFormTextField, {
+  }, !disabled && dragHandle), /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Prob",
     name: fieldNames.probability,
     disabled: disabled,
@@ -3235,33 +3271,26 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
         }
       }
     }
-  }), (!isChangeGroup || disabled) && /*#__PURE__*/React__default.createElement(Grid, {
-    className: classes.emptyButtonContainer,
+  })), !disabled && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: true
-  }, !disabled && /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": "add",
-    "data-testid": "add-changeGroup",
-    onClick: addChangeGroup,
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Add, null))), isChangeGroup && !disabled && /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": "add",
-    "data-testid": "add-changeGroup",
-    onClick: addChangeGroup,
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Add, null)), /*#__PURE__*/React__default.createElement(IconButton, Object.assign({
-    "aria-label": "delete",
-    "data-testid": "remove-changeGroup",
-    onClick: function onClick() {
-      return onRemoveChangeGroup(index);
+    container: true,
+    justifyContent: "flex-end",
+    alignItems: "flex-end",
+    xs: 24,
+    sm: 1,
+    sx: {
+      marginBottom: '16px'
     }
-  }, lastRow ? {
-    tabIndex: -1
-  } : {}, {
-    size: "large"
-  }), /*#__PURE__*/React__default.createElement(Delete, null))));
+  }, /*#__PURE__*/React__default.createElement(TafFormOptionsButton, {
+    isChangeGroup: isChangeGroup,
+    addChangeGroupBelow: addChangeGroupBelow,
+    addChangeGroupAbove: addChangeGroupAbove,
+    removeChangeGroup: function removeChangeGroup() {
+      return onRemoveChangeGroup(index);
+    },
+    clearRow: clearRow,
+    index: index
+  })));
 });
 
 /* *
@@ -3280,55 +3309,184 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-
-var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
-  switch (sumOfErrors) {
-    case 0:
-      return '0 issues';
-
-    case 1:
-      return '1 issue';
-
-    default:
-      return "".concat(sumOfErrors, " issues");
+var buttonsStyle = {
+  button: {
+    minWidth: {
+      xs: '56px',
+      sm: '64px'
+    },
+    width: {
+      xs: '56px',
+      sm: '64px'
+    },
+    marginLeft: {
+      xs: 0.5,
+      sm: 1
+    },
+    marginTop: 3,
+    marginBottom: 3
   }
 };
 
-var buttonColors = {
-  green: '#72bb23',
-  red: '#c00000'
-};
-
-var buttonStyle = function buttonStyle(color) {
-  var buttonColor = buttonColors[color];
-  return {
-    width: '74px',
-    color: '#ffffff',
-    backgroundColor: buttonColor,
-    '&:hover': {
-      backgroundColor: buttonColor
-    },
-    '&:focus': {
-      backgroundColor: buttonColor
+var ViewModeButtons = function ViewModeButtons(_ref) {
+  var canBe = _ref.canBe,
+      onTafViewModeButtonPress = _ref.onTafViewModeButtonPress;
+  return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, canBe.includes('CANCELLED') && /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "canceltaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      return onTafViewModeButtonPress('CANCEL');
     }
-  };
-};
+  }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "correctaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      return onTafViewModeButtonPress('CORRECT');
+    }
+  }, "Correct"), canBe.includes('AMENDED') && /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "amendtaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      return onTafViewModeButtonPress('AMEND');
+    }
+  }, "Amend"));
+};
 
-var IssuesButton = function IssuesButton(_ref) {
-  var togglePane = _ref.togglePane,
-      sumOfErrors = _ref.sumOfErrors;
-  var color = sumOfErrors > 0 ? 'red' : 'green';
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: "View details"
-  }, /*#__PURE__*/React.createElement(Chip, {
-    "data-testid": "issuesButton",
-    size: "small",
-    label: getIssuesLabel(sumOfErrors),
-    style: Object.assign({}, buttonStyle(color)),
-    onClick: togglePane
+var TafFormButtons = function TafFormButtons(_ref2) {
+  var _ref2$isFormDisabled = _ref2.isFormDisabled,
+      isFormDisabled = _ref2$isFormDisabled === void 0 ? false : _ref2$isFormDisabled,
+      tafAction = _ref2.tafAction,
+      _ref2$canBe = _ref2.canBe,
+      canBe = _ref2$canBe === void 0 ? [] : _ref2$canBe,
+      onTafEditModeButtonPress = _ref2.onTafEditModeButtonPress,
+      onTafViewModeButtonPress = _ref2.onTafViewModeButtonPress;
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    justifyContent: "flex-end",
+    sx: buttonsStyle,
+    columns: 24
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    container: true,
+    justifyContent: "flex-end",
+    xs: 24,
+    sm: 23
+  }, isFormDisabled ? /*#__PURE__*/React__default.createElement(ViewModeButtons, {
+    canBe: canBe,
+    onTafViewModeButtonPress: onTafViewModeButtonPress
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "discardtaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      // Simply discard the changes and close the dialog.
+      onTafEditModeButtonPress('DISCARD');
+    }
+  }, "Discard"), /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "savedrafttaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      /* Save the TAF as draft:
+      if action NEW or DRAFT - new status will be DRAFT -- default
+      if action AMEND - new status will be DRAFT_AMENDED
+      if action CORRECT - new status will be DRAFT_CORRECTED
+      if action DRAFT_AMEND - new status will be DRAFT_AMENDED
+      if action DRAFT_CORRECT - new status will be DRAFT_CORRECTED
+      */
+      switch (tafAction) {
+        case 'AMEND':
+        case 'DRAFT_AMEND':
+          onTafEditModeButtonPress('DRAFT_AMEND');
+          break;
+
+        case 'CORRECT':
+        case 'DRAFT_CORRECT':
+          onTafEditModeButtonPress('DRAFT_CORRECT');
+          break;
+
+        default:
+          onTafEditModeButtonPress('DRAFT');
+          break;
+      }
+    }
+  }, "Save"), /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "publishtaf",
+    variant: "tertiary",
+    onClick: function onClick() {
+      /* Publish the TAF:
+      if action NEW or DRAFT - new status will be PUBLISHED -- default
+      if action AMEND - new status will be AMENDED
+      if action CORRECT - new status will be CORRECTED
+      if action DRAFT_AMEND - new status will be AMENDED
+      if action DRAFT_CORRECT - new status will be CORRECTED
+      */
+      switch (tafAction) {
+        case 'AMEND':
+        case 'DRAFT_AMEND':
+          onTafEditModeButtonPress('AMEND');
+          break;
+
+        case 'CORRECT':
+        case 'DRAFT_CORRECT':
+          onTafEditModeButtonPress('CORRECT');
+          break;
+
+        default:
+          onTafEditModeButtonPress('PUBLISH');
+          break;
+      }
+    }
+  }, "Publish"))), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    sm: 1
   }));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var useStyles = makeStyles(function () {
+  return {
+    dragHandle: {
+      backgroundColor: 'transparent',
+      '&:hover': {
+        backgroundColor: 'transparent'
+      },
+      cursor: function cursor(isSorting) {
+        return isSorting ? 'grabbing' : 'grab';
+      }
+    }
+  };
+});
+
+var DragHandle = function DragHandle(_ref) {
+  var _ref$isSorting = _ref.isSorting,
+      isSorting = _ref$isSorting === void 0 ? false : _ref$isSorting,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      index = _ref.index;
+  var classes = useStyles(isSorting);
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "".concat(classes.dragHandle, " handle"),
+    "data-testid": "dragHandle-".concat(index),
+    disableRipple: true,
+    disabled: isDisabled,
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(DragIndicator, null));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3366,32 +3524,6 @@ var ThumbsUp = function ThumbsUp(props) {
   })));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var useStyles$8 = makeStyles({
-  paneContent: {
-    marginTop: '16px',
-    marginLeft: '24px'
-  },
-  image: {
-    fontSize: '4rem'
-  }
-});
-
 var getPaneTitle = function getPaneTitle(sumOfErrors) {
   switch (sumOfErrors) {
     case 0:
@@ -3430,7 +3562,7 @@ var humanizeErrorMessage = function humanizeErrorMessage(nameAsString) {
   var nameWithoutBrackets = nameAsString.replace(/[[\]']+/g, '');
   var nameLowerCase = nameWithoutBrackets.toLowerCase();
 
-  var _nameLowerCase$split$ = nameLowerCase.split(/([0-9]+)/) // split numbers from field and build array
+  var _nameLowerCase$split$ = nameLowerCase.split(/([0-9]+)/) // split num bers from field and build array
   .filter(function (s) {
     return s.length;
   }),
@@ -3458,33 +3590,43 @@ var getErrorMessage = function getErrorMessage(error, index) {
   var fieldErrorTitle = humanizeErrorMessage(firstNamePart);
   return "".concat(index + 1, ". ").concat(fieldErrorTitle, ": ").concat(getErrorDefaultMessage(error));
 };
+var MODAL_DIALOG_ELEMENT = 'modal-dialog';
 
 var IssuesPane = function IssuesPane(_ref3) {
   var isOpen = _ref3.isOpen,
       handleClose = _ref3.handleClose,
       _ref3$errorList = _ref3.errorList,
-      errorList = _ref3$errorList === void 0 ? [] : _ref3$errorList;
-  var classes = useStyles$8();
-  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+      errorList = _ref3$errorList === void 0 ? [] : _ref3$errorList,
+      _ref3$startPosition = _ref3.startPosition,
+      startPosition = _ref3$startPosition === void 0 ? {
+    left: 20,
+    top: 50
+  } : _ref3$startPosition;
+  var rootElement = document.getElementById(MODAL_DIALOG_ELEMENT) || document.body;
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     startSize: {
       width: '577px',
       height: '200px'
     },
-    startPosition: {
-      left: 370,
-      top: 570
-    },
+    startPosition: startPosition,
     minWidth: 300,
     onClose: handleClose,
     title: getPaneTitle(errorList.length),
     headerSize: "xs",
     isOpen: isOpen,
     "data-testid": "moveable-issues-pane",
-    bounds: "body"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.paneContent
-  }, errorList.length === 0 && /*#__PURE__*/React.createElement("div", {
-    className: classes.image,
+    bounds: "parent"
+  }, /*#__PURE__*/React.createElement(Box, {
+    component: "div",
+    sx: {
+      marginTop: '16px',
+      marginLeft: '24px'
+    }
+  }, errorList.length === 0 && /*#__PURE__*/React.createElement(Box, {
+    component: "div",
+    sx: {
+      fontSize: '4rem'
+    },
     "data-testid": "zeroIssuesImage"
   }, /*#__PURE__*/React.createElement(ThumbsUp, null)), errorList.length > 0 && errorList.map(function (error, index) {
     return /*#__PURE__*/React.createElement(Typography // eslint-disable-next-line react/no-array-index-key
@@ -3494,7 +3636,7 @@ var IssuesPane = function IssuesPane(_ref3) {
       variant: "body1",
       "data-testid": "errorMessage"
     }, getErrorMessage(error, index));
-  })));
+  }))), rootElement);
 };
 
 var getCustomError = function getCustomError(error) {
@@ -3508,6 +3650,19 @@ var getCustomError = function getCustomError(error) {
   });
 };
 
+var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
+  switch (sumOfErrors) {
+    case 0:
+      return '0 issues';
+
+    case 1:
+      return '1 issue';
+
+    default:
+      return "".concat(sumOfErrors, " issues");
+  }
+};
+
 var getErrorValues = function getErrorValues(fieldErrors) {
   if (!fieldErrors) return [];
   return Object.keys(fieldErrors).reduce(function (list, key) {
@@ -3521,22 +3676,6 @@ var getErrorValues = function getErrorValues(fieldErrors) {
   }, []);
 };
 
-var getErrors = function getErrors(errors) {
-  var errorList = Object.keys(errors).reduce(function (list, key) {
-    var errorValue = errors[key];
-
-    if (Array.isArray(errorValue)) {
-      var errorValues = errorValue.reduce(function (l, i) {
-        return l.concat(getErrorValues(i));
-      }, []);
-      return list.concat.apply(list, _toConsumableArray(errorValues));
-    }
-
-    return list.concat(getErrorValues(errorValue));
-  }, []);
-  return errorList;
-};
-
 var filterDuplicateErrors = function filterDuplicateErrors(errors) {
   return errors.reduce(function (list, error) {
     // check on type validateRequiredSub and validateRequiredMainOptional since these are giving 'duplicates'
@@ -3559,17 +3698,31 @@ var filterDuplicateErrors = function filterDuplicateErrors(errors) {
   }, []);
 };
 
-var TafFormButtons = function TafFormButtons(_ref) {
-  var tafAction = _ref.tafAction,
-      onTafFormButtonPress = _ref.onTafFormButtonPress;
-  var classes = useStyles$9();
+var getErrors = function getErrors(errors) {
+  var errorList = Object.keys(errors).reduce(function (list, key) {
+    var errorValue = errors[key];
 
-  var _useFormContext = useFormContext(),
-      errors = _useFormContext.errors;
+    if (Array.isArray(errorValue)) {
+      var errorValues = errorValue.reduce(function (l, i) {
+        return l.concat(getErrorValues(i));
+      }, []);
+      return list.concat.apply(list, _toConsumableArray(errorValues));
+    }
+
+    return list.concat(getErrorValues(errorValue));
+  }, []);
+  return errorList;
+};
 
+var IssuesButton = function IssuesButton(_ref) {
+  var _ref$errors = _ref.errors,
+      errors = _ref$errors === void 0 ? {} : _ref$errors;
   var errorList = filterDuplicateErrors(getErrors(errors));
+  var totalErrors = errorList.length;
+  var errorStatus = totalErrors > 0 ? 'error' : 'success';
+  var buttonColor = "geowebColors.functional.".concat(errorStatus);
 
-  var _React$useState = React__default.useState(false),
+  var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isIssuesPaneOpen = _React$useState2[0],
       setIsIssuesPaneOpen = _React$useState2[1];
@@ -3578,172 +3731,85 @@ var TafFormButtons = function TafFormButtons(_ref) {
     return setIsIssuesPaneOpen(!isIssuesPaneOpen);
   };
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "space-between",
-    alignItems: "center",
-    className: classes.lifecycleButtons
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(IssuesButton, {
-    sumOfErrors: errorList.length,
-    togglePane: toggleIssuesPane
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "discardtaf",
-    variant: "outlined",
-    color: "secondary",
-    type: "button",
-    className: classes.actionButton,
-    onClick: function onClick() {
-      // Simply discard the changes and close the dialog.
-      onTafFormButtonPress('DISCARD');
-    }
-  }, "Discard"), /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "savedrafttaf",
-    variant: "outlined",
-    color: "secondary",
-    type: "button",
-    className: classes.actionButton,
-    onClick: function onClick() {
-      /* Save the TAF as draft:
-      if action NEW or DRAFT - new status will be DRAFT -- default
-      if action AMEND - new status will be DRAFT_AMENDED
-      if action CORRECT - new status will be DRAFT_CORRECTED
-      if action DRAFT_AMEND - new status will be DRAFT_AMENDED
-      if action DRAFT_CORRECT - new status will be DRAFT_CORRECTED
-      */
-      switch (tafAction) {
-        case 'AMEND':
-        case 'DRAFT_AMEND':
-          onTafFormButtonPress('DRAFT_AMEND');
-          break;
-
-        case 'CORRECT':
-        case 'DRAFT_CORRECT':
-          onTafFormButtonPress('DRAFT_CORRECT');
-          break;
+  var _React$useState3 = React.useState({
+    left: 0,
+    top: 0
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      startPosition = _React$useState4[0],
+      setStartPosition = _React$useState4[1];
 
-        default:
-          onTafFormButtonPress('DRAFT');
-          break;
-      }
-    }
-  }, "Save"), /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "publishtaf",
-    variant: "outlined",
-    color: "secondary",
-    type: "button",
-    className: classes.lastButton,
-    onClick: function onClick() {
-      /* Publish the TAF:
-      if action NEW or DRAFT - new status will be PUBLISHED -- default
-      if action AMEND - new status will be AMENDED
-      if action CORRECT - new status will be CORRECTED
-      if action DRAFT_AMEND - new status will be AMENDED
-      if action DRAFT_CORRECT - new status will be CORRECTED
-      */
-      switch (tafAction) {
-        case 'AMEND':
-        case 'DRAFT_AMEND':
-          onTafFormButtonPress('AMEND');
-          break;
+  var onClickButton = function onClickButton(event) {
+    var _a;
 
-        case 'CORRECT':
-        case 'DRAFT_CORRECT':
-          onTafFormButtonPress('CORRECT');
-          break;
+    var _event$currentTarget$ = event.currentTarget.getBoundingClientRect(),
+        left = _event$currentTarget$.left,
+        top = _event$currentTarget$.top;
 
-        default:
-          onTafFormButtonPress('PUBLISH');
-          break;
-      }
-    }
-  }, "Publish"))), /*#__PURE__*/React__default.createElement(IssuesPane, {
-    errorList: errorList,
-    handleClose: toggleIssuesPane,
-    isOpen: isIssuesPaneOpen
-  }));
-};
+    var parentOffset = ((_a = document.getElementById('tafmodule')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
+      top: 0,
+      left: 0
+    };
+    var newPosition = {
+      left: left - parentOffset.left + 100,
+      top: top - parentOffset.top
+    };
+    setStartPosition(newPosition);
+    toggleIssuesPane();
+  };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var useStyles$7 = makeStyles(function () {
-  return {
-    dragHandle: {
-      backgroundColor: 'transparent',
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "View details"
+  }, /*#__PURE__*/React.createElement(Chip, {
+    "data-testid": "issuesButton",
+    className: "status-".concat(errorStatus),
+    size: "small",
+    label: getIssuesLabel(totalErrors),
+    onClick: onClickButton,
+    sx: {
+      width: '74px',
+      color: '#ffffff',
+      backgroundColor: buttonColor,
       '&:hover': {
-        backgroundColor: 'transparent'
+        backgroundColor: buttonColor
       },
-      cursor: function cursor(isSorting) {
-        return isSorting ? 'grabbing' : 'grab';
-      }
+      '&:focus': {
+        backgroundColor: buttonColor
+      },
+      fontSize: 12
     }
-  };
-});
-
-var DragHandle = function DragHandle(_ref) {
-  var _ref$isSorting = _ref.isSorting,
-      isSorting = _ref$isSorting === void 0 ? false : _ref$isSorting,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      index = _ref.index;
-  var classes = useStyles$7(isSorting);
-  return /*#__PURE__*/React__default.createElement(IconButton, {
-    className: "".concat(classes.dragHandle, " handle"),
-    "data-testid": "dragHandle-".concat(index),
-    disableRipple: true,
-    disabled: isDisabled,
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(DragIndicator, null));
+  })), /*#__PURE__*/React.createElement(IssuesPane, {
+    errorList: errorList,
+    handleClose: toggleIssuesPane,
+    isOpen: isIssuesPaneOpen,
+    startPosition: startPosition
+  }));
 };
 
 var noop = function noop() {};
 
-var emptyChangegroup = {
-  valid: '',
-  wind: '',
-  visibility: '',
-  weather: {
-    weather1: null,
-    weather2: null,
-    weather3: null
-  },
-  cloud: {
-    cloud1: null,
-    cloud2: null,
-    cloud3: null,
-    cloud4: null
-  },
-  change: null,
-  probability: null
-};
-
 var TafForm = function TafForm(_ref) {
-  var isDisabled = _ref.isDisabled,
-      tafAction = _ref.tafAction,
+  var defaultTafAction = _ref.tafAction,
+      isDefaultDisabled = _ref.isDisabled,
       _ref$staticTAC = _ref.staticTAC,
       staticTAC = _ref$staticTAC === void 0 ? '' : _ref$staticTAC,
+      tafFromBackend = _ref.tafFromBackend,
       _ref$onFormAction = _ref.onFormAction,
       onFormAction = _ref$onFormAction === void 0 ? function () {
     return null;
   } : _ref$onFormAction;
-  var classes = useStyles$9();
+  var originalTaf = tafFromBackend.taf;
+
+  var _React$useState = React__default.useState(defaultTafAction),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      tafAction = _React$useState2[0],
+      setTafAction = _React$useState2[1];
+
+  var _React$useState3 = React__default.useState(isDefaultDisabled),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isDisabled = _React$useState4[0],
+      setIsDisabled = _React$useState4[1];
+
   var confirmDialog = useConfirmationDialog();
 
   var _useDraftFormHelpers = useDraftFormHelpers(),
@@ -3762,17 +3828,19 @@ var TafForm = function TafForm(_ref) {
       watch = _useFormContext.watch,
       trigger = _useFormContext.trigger,
       formState = _useFormContext.formState,
-      getValues = _useFormContext.getValues;
+      getValues = _useFormContext.getValues,
+      setValue = _useFormContext.setValue,
+      reset = _useFormContext.reset;
 
   var isFormDirty = formState.isDirty,
       errors = formState.errors;
   usePreventBrowserClose(isFormDirty && !isDisabled);
   var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
-  var _React$useState = React__default.useState(watch()),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      delayedFormValues = _React$useState2[0],
-      setDelayedFormValues = _React$useState2[1];
+  var _React$useState5 = React__default.useState(watch()),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      delayedFormValues = _React$useState6[0],
+      setDelayedFormValues = _React$useState6[1];
 
   var _useTACGenerator = useTACGenerator(convertTafValuesToObject(delayedFormValues), api.getTAC, staticTAC),
       _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
@@ -3808,12 +3876,30 @@ var TafForm = function TafForm(_ref) {
   var showConfirmDialog = function showConfirmDialog(action) {
     return confirmDialog({
       title: getConfirmationDialogTitle(action),
-      description: getConfirmationDialogContent(action, isFormDirty),
+      description: getConfirmationDialogContent(action, function () {
+        return isTafAmendedCorrectedChanged(isFormDirty, originalTaf, convertTafValuesToObject(getValues()));
+      }),
       confirmLabel: getConfirmationDialogButtonLabel(action)
     });
   };
 
-  var onTafButtonPress = function onTafButtonPress(action) {
+  var resetFormValues = function resetFormValues() {
+    var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+    var shouldAddEmptyChangGroup = arguments.length > 1 ? arguments[1] : undefined;
+    var newTaf = prepareTafValues(tafFromBackend.taf, action, shouldAddEmptyChangGroup);
+    reset(newTaf);
+  };
+
+  var resetForm = function resetForm() {
+    var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+    var resetDisabled = arguments.length > 1 ? arguments[1] : undefined;
+    var shouldAddEmptyChangGroup = !(tafFromBackend.taf && tafFromBackend.taf.changeGroups) && !resetDisabled;
+    resetFormValues(action, shouldAddEmptyChangGroup);
+    setIsDisabled(resetDisabled);
+    setTafAction(action);
+  };
+
+  var onTafEditModeButtonPress = function onTafEditModeButtonPress(action) {
     switch (action) {
       case 'DRAFT':
       case 'DRAFT_AMEND':
@@ -3827,10 +3913,10 @@ var TafForm = function TafForm(_ref) {
       case 'DISCARD':
         if (isFormDirty) {
           showConfirmDialog(action).then(function () {
-            onFormAction(action);
+            resetForm(undefined, isDefaultDisabled);
           });
         } else {
-          onFormAction(action);
+          resetForm(undefined, isDefaultDisabled);
         }
 
         break;
@@ -3840,9 +3926,35 @@ var TafForm = function TafForm(_ref) {
       case 'PUBLISH':
         toggleIsDraft(false);
         handleSubmit(function (data) {
-          showConfirmDialog(action).then(function () {
-            onFormAction(action, convertTafValuesToObject(data));
-          });
+          return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+            var didSucceed;
+            return regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.next = 2;
+                    return showConfirmDialog(action);
+
+                  case 2:
+                    _context.next = 4;
+                    return onFormAction(action, convertTafValuesToObject(data));
+
+                  case 4:
+                    didSucceed = _context.sent;
+
+                    if (didSucceed) {
+                      setIsDisabled(true);
+                      reset(prepareTafValues(convertTafValuesToObject(data), action, false));
+                      setTafAction(null);
+                    }
+
+                  case 6:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
         })();
         break;
 
@@ -3852,6 +3964,20 @@ var TafForm = function TafForm(_ref) {
     }
   };
 
+  var onTafViewModeButtonPress = function onTafViewModeButtonPress(action) {
+    switch (action) {
+      case 'CANCEL':
+        showConfirmDialog(action).then(function () {
+          onFormAction(action, tafFromBackend.taf);
+        });
+        break;
+
+      default:
+        resetForm(action, false);
+        break;
+    }
+  };
+
   var _useFieldArray = useFieldArray({
     control: control,
     name: 'changeGroups'
@@ -3881,22 +4007,56 @@ var TafForm = function TafForm(_ref) {
 
 
   var focusFirstInput = function focusFirstInput(rowIndex) {
-    var nextRowFirstInput = document.querySelector("[name=\"changeGroups[".concat(rowIndex, "].probability\"]"));
+    var selector = rowIndex === -1 ? "[name=\"baseForecast.wind\"]" : "[name=\"changeGroups[".concat(rowIndex, "].probability\"]");
+    var nextRowFirstInput = document.querySelector(selector);
 
     if (nextRowFirstInput) {
       nextRowFirstInput.focus();
     }
+  }; // adding rows and validation don't work well combined, with always skipping validation of fields of rows above the one the inserted row. A setTimeout prevents this issue
+
+
+  var setFocusAndValidate = function setFocusAndValidate(rowIndex) {
+    return setTimeout(function () {
+      focusFirstInput(rowIndex);
+      trigger(); // trigger all fields validation
+    }, 0);
   };
 
   var onAddRow = function onAddRow() {
     var rowIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-    var newRowIndex = rowIndex + 1;
-    insert(newRowIndex, emptyChangegroup, false); // adding rows and validation don't work well combined, with always skipping validation of fields of rows above the one the inserted row. A setTimeout prevents this issue
+    var above = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var newRowIndex = above ? rowIndex : rowIndex + 1;
+    insert(newRowIndex, emptyChangegroup, false);
+    setFocusAndValidate(newRowIndex);
+  };
 
-    setTimeout(function () {
-      focusFirstInput(newRowIndex);
-      trigger(); // trigger all fields validation
-    }, 0);
+  var _onClearRow = function onClearRow() {
+    var rowIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+    var isChangeGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    confirmDialog({
+      title: 'Clear row',
+      description: 'Are you sure you want to clear this row?',
+      confirmLabel: 'Yes'
+    }).then(function () {
+      if (isChangeGroup) {
+        remove(rowIndex);
+        insert(rowIndex, emptyChangegroup, false);
+      } else {
+        var baseForecastFields = getFieldNames(false, -1);
+        setValue(baseForecastFields.wind, '');
+        setValue(baseForecastFields.visibility, '');
+        setValue(baseForecastFields.weather1, '');
+        setValue(baseForecastFields.weather2, '');
+        setValue(baseForecastFields.weather3, '');
+        setValue(baseForecastFields.cloud1, '');
+        setValue(baseForecastFields.cloud2, '');
+        setValue(baseForecastFields.cloud3, '');
+        setValue(baseForecastFields.cloud4, '');
+      }
+
+      setFocusAndValidate(rowIndex);
+    });
   };
 
   React__default.useEffect(function () {
@@ -3910,22 +4070,36 @@ var TafForm = function TafForm(_ref) {
 
   }, []);
   return /*#__PURE__*/React__default.createElement("form", {
+    "data-testid": "taf-form",
     onSubmit: handleSubmit(onSubmit),
     onBlur: onFormBlur
   }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: classes.tacTitle
+    sx: {
+      fontSize: '20px',
+      fontWeight: 500,
+      height: '24px'
+    }
   }, "TAC"), /*#__PURE__*/React__default.createElement(Typography, {
-    "data-testid": "form-tac-message",
-    className: classes.tacText
+    sx: {
+      fontSize: '14px',
+      margin: '8px 0px'
+    },
+    "data-testid": "form-tac-message"
   }, TAC.split('\n').map(function (line) {
-    return /*#__PURE__*/React__default.createElement("span", {
+    return /*#__PURE__*/React__default.createElement(Box, {
+      component: "span",
       key: line,
-      className: classes.tacLine,
-      "data-testid": "tafform-tac-message-line"
+      "data-testid": "tafform-tac-message-line",
+      sx: {
+        textIndent: '-0.7em',
+        borderRadius: '3px',
+        paddingRight: '0.7em'
+      }
     }, line);
   })), /*#__PURE__*/React__default.createElement(TafFormRow, {
     disabled: isDisabled,
-    onAddChangeGroup: onAddRow
+    onAddChangeGroupBelow: onAddRow,
+    onClearRow: _onClearRow
   }), /*#__PURE__*/React__default.createElement(ReactSortable, {
     tag: "div",
     list: fields,
@@ -3943,13 +4117,17 @@ var TafForm = function TafForm(_ref) {
   }, fields.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(TafFormRow, {
       field: item,
-      className: classes.formRow,
       key: item.id,
       index: index,
-      lastRow: fields.length === index + 1,
       disabled: isDisabled,
       onRemoveChangeGroup: onRemoverow,
-      onAddChangeGroup: onAddRow,
+      onAddChangeGroupBelow: onAddRow,
+      onAddChangeGroupAbove: function onAddChangeGroupAbove() {
+        return onAddRow(index, true);
+      },
+      onClearRow: function onClearRow() {
+        return _onClearRow(index, true);
+      },
       isChangeGroup: true,
       dragHandle: /*#__PURE__*/React__default.createElement(DragHandle, {
         isDisabled: fields.length === 1 || isDisabled,
@@ -3957,9 +4135,24 @@ var TafForm = function TafForm(_ref) {
         index: index
       })
     });
-  })), !isDisabled && /*#__PURE__*/React__default.createElement(TafFormButtons, {
+  })), !isDisabled && /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    justifyContent: "space-between",
+    alignItems: "center",
+    sx: {
+      marginLeft: 1.5,
+      marginTop: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true
+  }, /*#__PURE__*/React__default.createElement(IssuesButton, {
+    errors: errors
+  }))), /*#__PURE__*/React__default.createElement(TafFormButtons, {
+    isFormDisabled: isDisabled,
     tafAction: tafAction,
-    onTafFormButtonPress: onTafButtonPress
+    canBe: tafFromBackend.canbe,
+    onTafEditModeButtonPress: onTafEditModeButtonPress,
+    onTafViewModeButtonPress: onTafViewModeButtonPress
   }), hiddenInputFields.map(function (field) {
     return /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
       name: field,
@@ -3984,69 +4177,17 @@ var TafForm = function TafForm(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var getMessageType = function getMessageType(taf, tafAction) {
-  if (tafAction === 'CORRECT') {
-    return 'COR';
-  }
-
-  if (tafAction === 'AMEND') {
-    return 'AMD';
-  }
-
-  return taf.messageType;
-}; // For corrections and amendment we need to add the previousValidStart and End for the TAC converter
-
-var getAmendedCorrectedTafTimes = function getAmendedCorrectedTafTimes(taf, tafAction) {
-  var previousValidDateStart = taf.previousValidDateStart && tafAction !== 'AMEND' ? taf.previousValidDateStart : taf.validDateStart;
-  var previousValidDateEnd = taf.previousValidDateEnd && tafAction !== 'AMEND' ? taf.previousValidDateEnd : taf.validDateEnd; // For amendment change valid start time to current time
-  // only do this if we're already within the validity period
-
-  if ((tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND') && moment.utc() >= moment.utc(taf.validDateStart)) {
-    var now = moment.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-    var validObj = {
-      start: now,
-      end: taf.baseForecast.valid.end
-    };
-    return Object.assign(Object.assign({}, taf), {
-      previousValidDateStart: previousValidDateStart,
-      previousValidDateEnd: previousValidDateEnd,
-      validDateStart: now,
-      baseForecast: Object.assign(Object.assign({}, taf.baseForecast), {
-        valid: validObj
-      })
-    });
-  }
-
-  return Object.assign(Object.assign({}, taf), {
-    previousValidDateStart: previousValidDateStart,
-    previousValidDateEnd: previousValidDateEnd
-  });
-};
-var prepareTafValues = function prepareTafValues(_taf, tafAction) {
-  var addEmptyChangeGroup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  // If action is AMEND/CORRECT/DRAFT_AMEND/DRAFT_CORRECTION - add previous valid start and end
-  // If action is AMEND/DRAFT_AMEND - update validity start time to current time
-  var taf = tafAction === 'AMEND' || tafAction === 'DRAFT_AMEND' || tafAction === 'CORRECT' || tafAction === 'DRAFT_CORRECT' ? getAmendedCorrectedTafTimes(_taf, tafAction) : _taf;
-  return Object.assign(Object.assign(Object.assign(Object.assign({}, taf), {
-    messageType: getMessageType(taf, tafAction),
-    baseForecast: formatFormValues(taf.baseForecast)
-  }), taf.changeGroups && {
-    changeGroups: taf.changeGroups.map(formatFormValues)
-  }), addEmptyChangeGroup && {
-    changeGroups: [emptyChangegroup]
-  });
-};
 
 var TafFormWrapper = function TafFormWrapper(_ref) {
   var tafFromBackend = _ref.tafFromBackend,
       mode = _ref.mode,
-      tafAction = _ref.tafAction,
       _ref$TAC = _ref.TAC,
       TAC = _ref$TAC === void 0 ? '' : _ref$TAC,
-      onFormAction = _ref.onFormAction;
+      onFormAction = _ref.onFormAction,
+      tafAction = _ref.tafAction;
   var taf = tafFromBackend.taf;
   var isDisabled = mode === 'view';
-  var defaultValues = prepareTafValues(taf, tafAction, !isDisabled && !taf.changeGroups);
+  var defaultValues = prepareTafValues(taf, undefined, !isDisabled && !taf.changeGroups);
   var options = {
     defaultValues: defaultValues,
     mode: 'onTouched',
@@ -4057,81 +4198,43 @@ var TafFormWrapper = function TafFormWrapper(_ref) {
     options: options
   }, /*#__PURE__*/React__default.createElement(TafForm, {
     isDisabled: isDisabled,
-    tafAction: tafAction,
     staticTAC: TAC,
-    onFormAction: onFormAction
+    onFormAction: onFormAction,
+    tafFromBackend: tafFromBackend,
+    tafAction: tafAction
   }));
 };
 
-var useStyles$6 = makeStyles({
-  dialogHeader: {
-    borderRadius: '3px',
-    border: 'solid 1px #f6f5f5',
-    zIndex: 1,
-    padding: '16px 20px'
-  },
-  dialogTitle: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  dialogCloseButton: {
-    display: 'flex',
-    justifyContent: 'flex-end'
-  },
-  dialogChildren: {
-    display: 'flex',
-    padding: 20,
-    minHeight: 200,
-    minWidth: 400,
-    height: '100%'
-  }
-});
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
 
-var ContentDialog = function ContentDialog(_a) {
-  var open = _a.open;
-      _a.toggleDialogStatus;
-      var titleComponent = _a.titleComponent,
-      children = _a.children;
-      _a.onClose;
-      var _a$alertBanner = _a.alertBanner,
-      alertBanner = _a$alertBanner === void 0 ? null : _a$alertBanner,
-      onFormAction = _a.onFormAction,
-      other = __rest(_a, ["open", "toggleDialogStatus", "titleComponent", "children", "onClose", "alertBanner", "onFormAction"]);
-
-  var classes = useStyles$6();
-  return /*#__PURE__*/React.createElement(Dialog, Object.assign({
-    "data-testid": "contentDialog",
-    open: open,
-    onClose: function onClose() {
-      return onFormAction('CLOSE');
-    },
-    maxWidth: other.maxWidth ? other.maxWidth : 'lg',
-    PaperProps: {
-      style: {
-        position: 'inherit'
-      }
-    }
-  }, other), /*#__PURE__*/React.createElement(DialogTitle, {
-    className: classes.dialogHeader
-  }, /*#__PURE__*/React.createElement(Grid, {
-    container: true
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 11,
-    className: classes.dialogTitle
-  }, titleComponent), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: true,
-    className: classes.dialogCloseButton
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "closeDialog",
-    size: "small",
-    onClick: function onClick() {
-      return onFormAction('CLOSE');
-    }
-  }, /*#__PURE__*/React.createElement(Close, null))))), alertBanner !== null && alertBanner, /*#__PURE__*/React.createElement(DialogContent, {
-    className: classes.dialogChildren
-  }, children));
+var TabPanel = function TabPanel(_a) {
+  var children = _a.children,
+      value = _a.value,
+      index = _a.index,
+      other = __rest(_a, ["children", "value", "index"]);
+
+  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
+    role: "tabpanel",
+    hidden: value !== index,
+    id: "simple-tabpanel-".concat(index),
+    "aria-labelledby": "simple-tab-".concat(index),
+    "data-testid": "tab-panel-".concat(index)
+  }, other), value === index && children);
 };
 
 /* *
@@ -4147,175 +4250,139 @@ var ContentDialog = function ContentDialog(_a) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
-var getActiveStatus = function getActiveStatus(listType, className) {
-  return listType === 'ACTIVE' ? /*#__PURE__*/React__default.createElement(CheckCircle, {
-    "data-testid": "status-active",
-    className: className,
-    fontSize: "small"
-  }) : /*#__PURE__*/React__default.createElement(Schedule, {
-    "data-testid": "status-upcoming",
-    className: className,
-    fontSize: "small"
-  });
+var TafHeader = function TafHeader(_ref) {
+  var title = _ref.title;
+  return /*#__PURE__*/React__default.createElement(Typography, {
+    sx: {
+      textAlign: 'center',
+      fontWeight: 500,
+      paddingTop: '6px',
+      textTransform: 'capitalize'
+    }
+  }, title);
 };
 
-var getStatusTagList = function getStatusTagList(taf) {
-  // do not return anything if status = 'NEW'
-  if (taf.status === 'NEW') return null;
+var location_indicator_mwo = "EHDB";
+var locations = {
+	EHAM: {
+		validity_duration: 30,
+		activity_period: 6,
+		label: "Schiphol"
+	},
+	EHRD: {
+		validity_duration: 30,
+		activity_period: 6,
+		label: "Rotterdam"
+	},
+	EHGG: {
+		validity_duration: 30,
+		activity_period: 6,
+		label: "Eelde"
+	},
+	EHBK: {
+		validity_duration: 30,
+		activity_period: 6,
+		label: "Maastricht"
+	},
+	EHLE: {
+		validity_duration: 30,
+		activity_period: 6,
+		label: "Lelystad"
+	},
+	TNCB: {
+		validity_duration: 30,
+		activity_period: 6,
+		label: "Bonaire"
+	}
+};
+var locationOrder = [
+	"EHAM",
+	"EHRD",
+	"EHLE",
+	"EHGG",
+	"EHBK",
+	"TNCB"
+];
+var tafConfig = {
+	location_indicator_mwo: location_indicator_mwo,
+	locations: locations,
+	locationOrder: locationOrder
+};
 
-  if (taf.status === 'CANCELLED') {
-    return /*#__PURE__*/React__default.createElement(StatusTag, {
-      content: "cancelled",
-      color: "red"
-    });
-  }
+var getTafSettings = function getTafSettings() {
+  return tafConfig;
+};
 
-  return /*#__PURE__*/React__default.createElement(StatusTag, {
-    content: taf.status.toLowerCase(),
-    color: taf.status === 'EXPIRED' ? 'grey' : 'green'
+var tafSettings = getTafSettings();
+var getLocationSetting = function getLocationSetting(location) {
+  var locationSettings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : tafSettings.locations;
+  return locationSettings[location];
+};
+var sortTafsOnLocation = function sortTafsOnLocation(tafList) {
+  var locationOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : tafSettings.locationOrder;
+  if (!tafList) return [];
+  return _toConsumableArray(tafList).sort(function (_ref, _ref2) {
+    var tafA = _ref.taf;
+    var tafB = _ref2.taf;
+    return locationOrder.indexOf(tafA.location) < locationOrder.indexOf(tafB.location) ? -1 : 1;
   });
 };
+var getBaseTime = function getBaseTime(baseTime, location) {
+  var currentBaseTime = moment.utc(baseTime);
+  var activityPeriod = getLocationSetting(location).activity_period;
+  var nextBaseTime = moment.utc(baseTime).add(activityPeriod, 'hours');
+  return {
+    currentBaseTime: currentBaseTime,
+    nextBaseTime: nextBaseTime
+  };
+};
+var getTafTimeSlot = function getTafTimeSlot(baseTime, location, status) {
+  var now = moment.utc();
+
+  var _getBaseTime = getBaseTime(baseTime, location),
+      currentBaseTime = _getBaseTime.currentBaseTime,
+      nextBaseTime = _getBaseTime.nextBaseTime;
 
-var getDraftTitle = function getDraftTitle(status) {
-  if (status === 'DRAFT_AMENDED') {
-    return 'Draft amendment';
+  if (status === 'EXPIRED') {
+    return 'EXPIRED';
   }
 
-  if (status === 'DRAFT_CORRECTED') {
-    return 'Draft correction';
+  if (currentBaseTime < now && nextBaseTime > now) {
+    return 'ACTIVE';
   }
 
-  return 'Draft';
+  return 'UPCOMING';
 };
-var useStyles$5 = makeStyles({
-  cardWrapper: {
-    width: '100%'
-  },
-  cardContent: {
-    width: '100%'
-  },
-  activeStatus: {
-    color: '#72bb23'
-  },
-  font: {
-    fontWeight: 'normal'
-  },
-  alignIcon: {
-    display: 'flex',
-    alignSelf: 'center'
-  }
-});
+var sortTafTimeSlots = function sortTafTimeSlots(tafList) {
+  var sortedListOnLocation = sortTafsOnLocation(tafList);
+  return sortedListOnLocation.reduce(function (sortedTafList, tafFromBackend) {
+    var taf = tafFromBackend.taf;
+    var timeSlot = getTafTimeSlot(taf.baseTime, taf.location, taf.status);
+
+    if (timeSlot === 'EXPIRED') {
+      sortedTafList.expired.push(tafFromBackend);
+    } else if (timeSlot === 'ACTIVE') {
+      sortedTafList.current.push(tafFromBackend);
+    } else {
+      sortedTafList.upcoming.push(tafFromBackend);
+    }
 
-var TafListRow = function TafListRow(_ref) {
-  var taf = _ref.taf,
-      listType = _ref.listType,
-      _ref$TAC = _ref.TAC,
-      TAC = _ref$TAC === void 0 ? '' : _ref$TAC,
-      _ref$showTac = _ref.showTac,
-      showTac = _ref$showTac === void 0 ? false : _ref$showTac;
-  var classes = useStyles$5();
-  var validTimeDate = moment.utc(taf.validDateStart).format('DD MMM');
-  var baseTime = moment.utc(taf.baseTime).format('HH:mm');
-  return /*#__PURE__*/React__default.createElement(Card, {
-    elevation: 0,
-    className: classes.cardWrapper
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    alignItems: "center",
-    spacing: 1
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 3,
-    sm: 2,
-    md: 1
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle2",
-    noWrap: true,
-    className: classes.font
-  }, taf.location)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 3,
-    sm: 3,
-    md: 1,
-    container: true
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 3,
-    sm: 3,
-    md: 3,
-    className: classes.alignIcon
-  }, showTac && /*#__PURE__*/React__default.createElement(Tooltip, {
-    "data-testid": "taflistrow-tactooltip",
-    title: /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        whiteSpace: 'pre-line'
-      }
-    }, TAC),
-    placement: "bottom-start"
-  }, /*#__PURE__*/React__default.createElement(InfoOutlined, {
-    "data-testid": "taflistrow-tacicon",
-    color: "secondary",
-    fontSize: "small"
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 9,
-    sm: 9,
-    md: 9
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle2",
-    className: classes.font,
-    "data-testid": "baseTime"
-  }, baseTime))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 3,
-    sm: 2,
-    md: 1
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle2",
-    className: classes.font,
-    "data-testid": "validTimeDate"
-  }, validTimeDate)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 3,
-    sm: 3,
-    md: 6
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle2",
-    className: classes.font,
-    "data-testid": "validTimeSlot"
-  }, formatValidToString({
-    start: taf.validDateStart,
-    end: taf.validDateEnd
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12,
-    sm: 4,
-    md: 3
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "flex-start",
-    spacing: 2
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justifyContent: "flex-end"
-  }, taf.status === 'DRAFT' || taf.status === 'DRAFT_CORRECTED' || taf.status === 'DRAFT_AMENDED' ? /*#__PURE__*/React__default.createElement(Button, {
-    color: "secondary",
-    size: "small",
-    "data-testid": "tafRow-draft",
-    startIcon: /*#__PURE__*/React__default.createElement(Create, {
-      fontSize: "small",
-      color: "secondary"
-    })
-  }, getDraftTitle(taf.status)) : getStatusTagList(taf)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    className: classes.alignIcon
-  }, taf.status !== 'NEW' && taf.status !== 'DRAFT' && taf.status !== 'DRAFT_CORRECTED' && taf.status !== 'DRAFT_AMENDED' && taf.status !== 'CANCELLED' && listType !== 'EXPIRED' && getActiveStatus(listType, classes.activeStatus))))));
+    return sortedTafList;
+  }, {
+    current: [],
+    upcoming: [],
+    expired: []
+  });
+};
+var muiTabA11yProps = function muiTabA11yProps(index) {
+  return {
+    id: "simple-tab-".concat(index),
+    'aria-controls': "simple-tabpanel-".concat(index)
+  };
 };
 
 /* *
@@ -4331,243 +4398,334 @@ var TafListRow = function TafListRow(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var getListType = function getListType(taf, locationSettings) {
-  if (!taf) return null;
-  var now = moment.utc();
-  var baseTime = moment.utc(taf.baseTime);
-  var activityPeriod = locationSettings[taf.location].activity_period;
-  var nextBaseTime = moment.utc(taf.baseTime).add(activityPeriod, 'hours');
 
-  if (taf.status === 'EXPIRED') {
-    return 'EXPIRED';
+var EditIcon = function EditIcon(props) {
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z",
+    fillRule: "evenodd",
+    fill: "".concat(theme.palette.geowebColors.buttons.tertiary["default"].color)
+  })));
+};
+
+var StatusIcon = function StatusIcon(_ref) {
+  var timeSlot = _ref.timeSlot,
+      status = _ref.status;
+
+  if (status === 'NEW') {
+    return null;
   }
 
-  if (baseTime < now && nextBaseTime > now) {
-    return 'ACTIVE';
+  if (status === 'EXPIRED') {
+    return /*#__PURE__*/React.createElement(Schedule, {
+      "data-testid": "status-expired",
+      fontSize: "small",
+      sx: {
+        transform: 'scaleX(-1)',
+        color: 'geowebColors.buttons.tertiary.disabled.color'
+      }
+    });
   }
 
-  return 'UPCOMING';
-};
+  if (status === 'CANCELLED') {
+    return /*#__PURE__*/React.createElement(DoDisturbIcon, {
+      "data-testid": "status-cancelled",
+      fontSize: "small",
+      sx: {
+        color: 'geowebColors.captions.captionError.rgba'
+      }
+    });
+  }
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
+  if (status === 'DRAFT' || status === 'DRAFT_CORRECTED' || status === 'DRAFT_AMENDED') {
+    return /*#__PURE__*/React.createElement(EditIcon, {
+      "data-testid": "status-draft"
+    });
+  }
 
-var TafFormDialog = function TafFormDialog(_ref) {
-  var open = _ref.open,
-      toggleFormDialog = _ref.toggleFormDialog,
-      tafFromBackend = _ref.tafFromBackend,
-      children = _ref.children,
-      _ref$alertBanner = _ref.alertBanner,
-      alertBanner = _ref$alertBanner === void 0 ? null : _ref$alertBanner,
-      onFormAction = _ref.onFormAction;
-  var taf = tafFromBackend ? tafFromBackend.taf : null;
-
-  var _useTafSettings = useTafSettings(tafConfig),
-      locationSettings = _useTafSettings.locations;
-
-  return /*#__PURE__*/React__default.createElement(ContentDialog, {
-    open: open,
-    toggleDialogStatus: toggleFormDialog,
-    titleComponent: /*#__PURE__*/React__default.createElement(TafListRow, {
-      taf: taf,
-      listType: getListType(taf, locationSettings)
-    }),
-    alertBanner: alertBanner,
-    onFormAction: onFormAction
-  }, children);
+  return timeSlot === 'ACTIVE' ? /*#__PURE__*/React.createElement(CheckCircle, {
+    "data-testid": "status-active",
+    fontSize: "small",
+    sx: {
+      color: 'geowebColors.functional.success'
+    }
+  }) : /*#__PURE__*/React.createElement(Schedule, {
+    "data-testid": "status-upcoming",
+    fontSize: "small",
+    sx: {
+      color: 'geowebColors.functional.success'
+    }
+  });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var useStyles$4 = makeStyles({
-  actionButtons: {
-    paddingRight: '98px',
-    paddingTop: '40px',
-    paddingBottom: '16px'
-  }
-});
+var TacContainer = function TacContainer(_ref) {
+  var taf = _ref.taf,
+      _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive;
 
-var TafListButtons = function TafListButtons(_ref) {
-  var uuid = _ref.uuid,
-      canBe = _ref.canBe,
-      onClickTafActionButton = _ref.onClickTafActionButton;
-  var classes = useStyles$4();
-  return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    alignItems: "center",
-    justifyContent: "flex-end",
-    "data-testid": "taflist-canbebuttons",
-    spacing: 1,
-    className: classes.actionButtons
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, canBe.includes('CANCELLED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "canceltaf",
-    variant: "outlined",
-    color: "secondary",
-    onClick: function onClick() {
-      return onClickTafActionButton(uuid, 'CANCEL');
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
+  var _useTACGenerator = useTACGenerator(taf, api.getTAC),
+      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
+      TAC = _useTACGenerator2[0],
+      retrieveTAC = _useTACGenerator2[1];
+
+  var status = taf.status,
+      location = taf.location,
+      baseTime = taf.baseTime;
+  var locationLabel = getLocationSetting(location).label;
+  var timeSlot = getTafTimeSlot(baseTime, location, status);
+  React__default.useEffect(function () {
+    if (isActive) {
+      retrieveTAC(taf);
     }
-  }, "Cancel")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, canBe.includes('CORRECTED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "correctaf",
-    variant: "outlined",
-    color: "secondary",
-    onClick: function onClick() {
-      return onClickTafActionButton(uuid, 'CORRECT');
+  }, [taf, isActive, retrieveTAC]);
+  return /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      marginBottom: '20px'
+    },
+    "data-location": location,
+    className: isActive ? 'active' : null
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      marginBottom: '2px'
     }
-  }, "Correct")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, canBe.includes('AMENDED') && /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "amendtaf",
-    variant: "outlined",
-    color: "secondary",
-    onClick: function onClick() {
-      return onClickTafActionButton(uuid, 'AMEND');
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      width: 20,
+      height: 20,
+      display: 'flex',
+      marginRight: '6px'
+    }
+  }, /*#__PURE__*/React__default.createElement(StatusIcon, {
+    timeSlot: timeSlot,
+    status: status
+  })), /*#__PURE__*/React__default.createElement(Typography, {
+    sx: Object.assign({
+      lineHeight: 1
+    }, isActive && {
+      backgroundColor: 'geowebColors.functional.warningHighlight.rgba',
+      padding: '0 2px',
+      marginLeft: '-2px'
+    })
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    sx: {
+      fontSize: '12px',
+      color: 'geowebColors.captions.captionInformation.rgba'
+    },
+    "data-testid": "tafLocation",
+    component: "span"
+  }, location), /*#__PURE__*/React__default.createElement(Typography, {
+    sx: {
+      fontSize: '12px',
+      marginLeft: '10px'
+    },
+    "data-testid": "tafLocationLabel",
+    component: "span"
+  }, locationLabel))), /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      fontSize: '12px',
+      letterSpacing: '0.4px',
+      color: 'geowebColors.captions.captionStatus.rgba'
     }
-  }, "Amend")));
+  }, TAC.split('\n').map(function (line) {
+    return /*#__PURE__*/React__default.createElement(Box, {
+      component: "span",
+      key: line,
+      sx: {
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      component: "span",
+      sx: Object.assign({
+        display: 'inline',
+        boxDecorationBreak: 'clone',
+        WebkitBoxDecorationBreak: 'clone'
+      }, isActive && {
+        backgroundColor: 'geowebColors.functional.warningHighlight.rgba'
+      })
+    }, line));
+  })));
 };
 
-var useStyles$3 = makeStyles({
-  accordion: {
-    marginBottom: '5px'
-  },
-  formPadding: {
-    padding: '8px'
-  },
-  expandIcon: {
-    color: '#0075a9'
-  }
-});
+var TacOverview = function TacOverview(_ref) {
+  var _ref$upcomingTafs = _ref.upcomingTafs,
+      upcomingTafs = _ref$upcomingTafs === void 0 ? [] : _ref$upcomingTafs,
+      _ref$currentTafs = _ref.currentTafs,
+      currentTafs = _ref$currentTafs === void 0 ? [] : _ref$currentTafs,
+      _ref$expiredTafs = _ref.expiredTafs,
+      expiredTafs = _ref$expiredTafs === void 0 ? [] : _ref$expiredTafs,
+      _ref$hideTitle = _ref.hideTitle,
+      hideTitle = _ref$hideTitle === void 0 ? false : _ref$hideTitle,
+      _ref$activeTaf = _ref.activeTaf,
+      activeTaf = _ref$activeTaf === void 0 ? null : _ref$activeTaf;
+
+  var _React$useState = React__default.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      activeTab = _React$useState2[0],
+      setActiveTab = _React$useState2[1];
 
-var fromStatusToAction = function fromStatusToAction(tafStatus) {
-  switch (tafStatus) {
-    case 'DRAFT':
-      return 'DRAFT';
+  var scrollRef = React__default.useRef(null);
+  var tabs = [{
+    title: 'Upcoming',
+    tafList: upcomingTafs
+  }, {
+    title: 'Current & Expired',
+    tafList: sortTafsOnLocation([].concat(_toConsumableArray(currentTafs), _toConsumableArray(expiredTafs)))
+  }];
+  var activeLocation = (activeTaf === null || activeTaf === void 0 ? void 0 : activeTaf.taf.location) || null;
 
-    case 'DRAFT_AMENDED':
-      return 'DRAFT_AMEND';
+  var isActiveLocation = function isActiveLocation(location) {
+    return location === activeLocation;
+  };
 
-    case 'DRAFT_CORRECTED':
-      return 'DRAFT_CORRECT';
+  var scrollToPosition = React__default.useCallback(function () {
+    if (!scrollRef.current) return;
+    var containerTop = scrollRef.current.getBoundingClientRect().top;
+    var firstLocation = scrollRef.current.querySelector("[data-location=\"".concat(activeLocation, "\"]"));
+    var paddingTop = parseInt(getComputedStyle(scrollRef.current).paddingTop, 10);
+    var newScrollPosition = (firstLocation === null || firstLocation === void 0 ? void 0 : firstLocation.getBoundingClientRect().top) - containerTop + scrollRef.current.scrollTop - paddingTop;
+    scrollRef.current.scrollTo(newScrollPosition, newScrollPosition);
+  }, [activeLocation]);
+
+  var resetScrollPosition = function resetScrollPosition() {
+    return scrollRef.current.scrollTo(0, 0);
+  };
 
-    default:
-      return 'NEW';
-  }
+  var onChangeTab = function onChangeTab(_event, newValue) {
+    setActiveTab(newValue);
+    resetScrollPosition();
+  };
+
+  React__default.useEffect(function () {
+    if (activeLocation) {
+      scrollToPosition();
+    }
+  }, [activeLocation, scrollToPosition]);
+  React__default.useEffect(function () {
+    var SCROLL_DELAY = 1000;
+    var timer = setTimeout(function () {
+      scrollToPosition();
+    }, SCROLL_DELAY);
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [activeTab, scrollToPosition]);
+  return /*#__PURE__*/React__default.createElement(Card, {
+    variant: "outlined",
+    sx: {
+      maxHeight: '100%',
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      zIndex: 1
+    }
+  }, !hideTitle && /*#__PURE__*/React__default.createElement(TafHeader, {
+    title: "TAC Overview"
+  }), /*#__PURE__*/React__default.createElement(Tabs, {
+    value: activeTab,
+    onChange: onChangeTab,
+    "aria-label": "tabs"
+  }, tabs.map(function (tab, index) {
+    return /*#__PURE__*/React__default.createElement(Tab, Object.assign({
+      key: tab.title,
+      sx: {
+        flexGrow: 1
+      },
+      label: tab.title,
+      "data-testid": "tab-".concat(index)
+    }, muiTabA11yProps(index)));
+  }))), /*#__PURE__*/React__default.createElement(Box, {
+    ref: scrollRef,
+    sx: {
+      padding: '10px',
+      maxHeight: '100%',
+      overflow: 'auto'
+    }
+  }, tabs.map(function (tab, index) {
+    return /*#__PURE__*/React__default.createElement(TabPanel, {
+      key: tab.title,
+      value: activeTab,
+      index: index
+    }, tab.tafList.map(function (_ref2) {
+      var taf = _ref2.taf;
+      return /*#__PURE__*/React__default.createElement(TacContainer, {
+        key: taf.uuid,
+        taf: taf,
+        isActive: isActiveLocation(taf.location)
+      });
+    }));
+  })));
 };
 
-var TafListAccordion = function TafListAccordion(_ref) {
-  var tafListItem = _ref.tafListItem,
-      listType = _ref.listType,
-      _ref$errorCancelTaf = _ref.errorCancelTaf,
-      errorCancelTaf = _ref$errorCancelTaf === void 0 ? [] : _ref$errorCancelTaf,
-      onClickTafActionButton = _ref.onClickTafActionButton;
-  var classes = useStyles$3();
-  var status = tafListItem.taf.status;
+var TacOverviewIcon = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("path", {
+  d: "M3 3h4v4H3V3zm0 7h4v4H3v-4zm0 7h4v4H3v-4zm7-14h11v4H10V3zm0 7h11v4H10v-4zm0 7h11v4H10v-4z"
+}));
 
-  var _useApiContext = useApiContext(),
-      api = _useApiContext.api;
+var TacOverviewMobile = function TacOverviewMobile(_ref) {
+  var upcomingTafs = _ref.upcomingTafs,
+      currentTafs = _ref.currentTafs,
+      expiredTafs = _ref.expiredTafs,
+      activeTaf = _ref.activeTaf,
+      _ref$defaultOpen = _ref.defaultOpen,
+      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen;
 
-  var _useTACGenerator = useTACGenerator(tafListItem.taf, api.getTAC),
-      _useTACGenerator2 = _slicedToArray(_useTACGenerator, 2),
-      TAC = _useTACGenerator2[0],
-      requestTAC = _useTACGenerator2[1];
+  var _React$useState = React.useState(defaultOpen),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      toggleOpen = _React$useState2[1];
 
-  React__default.useEffect(function () {
-    // only re-retrieve TAC if draft state
-    if (tafListItem.taf.status === 'DRAFT' || tafListItem.taf.status === 'DRAFT_AMENDED' || tafListItem.taf.status === 'DRAFT_CORRECTED') {
-      requestTAC(tafListItem.taf);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  var onClose = function onClose() {
+    return toggleOpen(false);
+  };
 
-  }, [tafListItem.taf]);
-  var popOut = status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED';
-  return /*#__PURE__*/React__default.createElement(Accordion, Object.assign({
-    "data-testid": "tafListItem",
-    className: classes.accordion
-  }, popOut ? {
-    expanded: false
-  } : {}, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolButton, {
+    active: isOpen,
     onClick: function onClick() {
-      if (popOut) {
-        onClickTafActionButton(tafListItem.taf.uuid, fromStatusToAction(tafListItem.taf.status));
-      }
+      return toggleOpen(true);
     },
-    TransitionProps: {
-      unmountOnExit: true
+    "data-testid": "tac-overview-mobile-button",
+    sx: {
+      display: {
+        xs: 'inline-flex',
+        sm: 'none'
+      },
+      position: 'absolute',
+      right: '8px',
+      top: '30px'
     }
-  }), /*#__PURE__*/React__default.createElement(AccordionSummary, {
-    "data-testid": "tafListSectionAccordionSummary",
-    expandIcon: popOut ? /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: "Popout to edit",
-      className: classes.expandIcon
-    }, /*#__PURE__*/React__default.createElement(OpenInNew, {
-      "data-testid": "popOutIcon",
-      fontSize: "small"
-    })) : /*#__PURE__*/React__default.createElement(ExpandMore, {
-      className: classes.expandIcon,
-      "data-testid": "expandIcon"
-    })
-  }, /*#__PURE__*/React__default.createElement(TafListRow, {
-    taf: tafListItem.taf,
-    listType: listType,
-    TAC: TAC,
-    showTac: true
-  })), /*#__PURE__*/React__default.createElement(AccordionDetails, null, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    direction: "column"
-  }, errorCancelTaf.length > 0 && errorCancelTaf.find(function (uuid) {
-    return uuid === tafListItem.taf.uuid;
-  }) && /*#__PURE__*/React__default.createElement(AlertBanner, {
-    severity: "error",
-    title: "Cancelling this TAF failed, please try again",
-    dataTestId: "tafList-cancelAlert"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: classes.formPadding
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(TafFormWrapper, {
-    tafFromBackend: tafListItem,
-    mode: "view",
-    TAC: TAC
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(TafListButtons, {
-    canBe: tafListItem.canbe,
-    uuid: tafListItem.taf.uuid,
-    onClickTafActionButton: onClickTafActionButton
-  }))))));
+  }, TacOverviewIcon), /*#__PURE__*/React.createElement(Dialog, {
+    open: isOpen,
+    onClose: onClose,
+    PaperProps: {
+      sx: {
+        margin: 2,
+        width: '100%',
+        height: '100%'
+      }
+    },
+    "data-testid": "tac-overview-mobile"
+  }, /*#__PURE__*/React.createElement(ToolHeader, {
+    title: "TAC Overview",
+    size: "small",
+    isDraggable: false,
+    onClose: onClose
+  }), /*#__PURE__*/React.createElement(TacOverview, {
+    upcomingTafs: upcomingTafs,
+    currentTafs: currentTafs,
+    expiredTafs: expiredTafs,
+    activeTaf: activeTaf,
+    hideTitle: true
+  })));
 };
 
 /* *
@@ -4583,136 +4741,131 @@ var TafListAccordion = function TafListAccordion(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$2 = makeStyles({
-  listHeaders: {
-    color: '#9d9d9d'
-  },
-  formPadding: {
-    padding: '8px'
-  },
-  paperButton: {
-    width: '100%'
-  }
-});
-
-var TafListSection = function TafListSection(_ref) {
-  var tafList = _ref.tafList,
-      title = _ref.title,
-      listType = _ref.listType,
-      _ref$errorCancelTaf = _ref.errorCancelTaf,
-      errorCancelTaf = _ref$errorCancelTaf === void 0 ? [] : _ref$errorCancelTaf,
-      onClickTafActionButton = _ref.onClickTafActionButton;
-  var classes = useStyles$2();
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle2",
-    className: classes.listHeaders
-  }, title), /*#__PURE__*/React__default.createElement("div", {
-    "data-testid": "tafList".concat(listType)
-  }, tafList.map(function (tafListItem) {
-    return /*#__PURE__*/React__default.createElement(TafListAccordion, {
-      key: "".concat(tafListItem.taf.uuid, "-").concat(tafListItem.taf.status),
-      tafListItem: tafListItem,
-      listType: listType,
-      errorCancelTaf: errorCancelTaf,
-      onClickTafActionButton: onClickTafActionButton
-    });
-  })));
+var formatBaseTime = function formatBaseTime(time) {
+  return time.format('HH:mm DD MMM');
 };
 
-var useStyles$1 = makeStyles({
-  accordion: {
-    marginBottom: '5px'
-  },
-  listHeaders: {
-    color: '#9d9d9d'
-  },
-  listBody: {
-    width: '100%',
-    minHeight: '600px'
+var TopTabs = function TopTabs(_ref) {
+  var timeSlot = _ref.timeSlot,
+      _ref$onChangeTimeSlot = _ref.onChangeTimeSlot,
+      onChangeTimeSlot = _ref$onChangeTimeSlot === void 0 ? function () {} : _ref$onChangeTimeSlot,
+      tafFromBackend = _ref.tafFromBackend;
+
+  if (!tafFromBackend) {
+    return null;
   }
-});
 
-var TafList = function TafList(_ref) {
-  var tafList = _ref.tafList,
-      isLoading = _ref.isLoading,
-      error = _ref.error,
-      _ref$errorCancelTaf = _ref.errorCancelTaf,
-      errorCancelTaf = _ref$errorCancelTaf === void 0 ? [] : _ref$errorCancelTaf,
-      onClickTafActionButton = _ref.onClickTafActionButton;
-  var classes = useStyles$1();
+  var activeTab = timeSlot === 'UPCOMING' ? 0 : 1;
 
-  var _useTafSettings = useTafSettings(tafConfig),
-      locationSettings = _useTafSettings.locations;
+  var _getBaseTime = getBaseTime(tafFromBackend.taf.baseTime, tafFromBackend.taf.location),
+      currentBaseTime = _getBaseTime.currentBaseTime,
+      nextBaseTime = _getBaseTime.nextBaseTime;
 
-  var upcomingTafs = [];
-  var currentTafs = [];
-  var expiredTafs = [];
+  var tabs = [{
+    title: "Upcoming ".concat(formatBaseTime(nextBaseTime)),
+    timeSlot: 'UPCOMING'
+  }, {
+    title: "Current ".concat(formatBaseTime(currentBaseTime)),
+    timeSlot: 'ACTIVE'
+  }];
 
-  if (tafList) {
-    var _iterator = _createForOfIteratorHelper(tafList),
-        _step;
+  var onChangeTab = function onChangeTab(_event, newValue) {
+    onChangeTimeSlot(tabs[newValue].timeSlot);
+  };
 
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var taf = _step.value;
-        var now = moment.utc();
-        var baseTime = moment.utc(taf.taf.baseTime);
-        var activityPeriod = locationSettings[taf.taf.location].activity_period;
-        var nextBaseTime = moment.utc(taf.taf.baseTime).add(activityPeriod, 'hours');
-
-        if (taf.taf.status === 'EXPIRED') {
-          expiredTafs.push(taf);
-        } else if (baseTime < now && nextBaseTime > now) {
-          currentTafs.push(taf);
-        } else {
-          upcomingTafs.push(taf);
-        }
+  return /*#__PURE__*/React__default.createElement(Tabs, {
+    value: activeTab,
+    onChange: onChangeTab,
+    "aria-label": "timeslot-tabs",
+    variant: "fullWidth"
+  }, tabs.map(function (tab, index) {
+    return /*#__PURE__*/React__default.createElement(Tab, Object.assign({
+      key: tab.title,
+      label: tab.title,
+      "data-testid": "tab-".concat(index),
+      sx: {
+        fontSize: 16
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-  }
+    }, muiTabA11yProps(index)));
+  }));
+};
 
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    direction: "column",
-    alignItems: "stretch"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    className: classes.listBody
-  }, error && /*#__PURE__*/React__default.createElement(AlertBanner, {
-    severity: "error",
-    title: "An error has occurred while retrieving the list, please try again",
-    info: error.message ? error.message : '',
-    dataTestId: "tafList-alert"
-  }), tafList && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafListSection, {
-    title: "Upcoming",
-    listType: "UPCOMING",
-    tafList: upcomingTafs,
-    errorCancelTaf: errorCancelTaf,
-    onClickTafActionButton: onClickTafActionButton
-  }), /*#__PURE__*/React__default.createElement(TafListSection, {
-    title: "Current time slot",
-    listType: "ACTIVE",
-    tafList: currentTafs,
-    errorCancelTaf: errorCancelTaf,
-    onClickTafActionButton: onClickTafActionButton
-  }), /*#__PURE__*/React__default.createElement(TafListSection, {
-    title: "Expired",
-    listType: "EXPIRED",
-    tafList: expiredTafs,
-    errorCancelTaf: errorCancelTaf,
-    onClickTafActionButton: onClickTafActionButton
-  })), isLoading && /*#__PURE__*/React__default.createElement(Skeleton, {
-    "data-testid": "tafList-skeleton",
-    variant: "rectangular",
-    height: "660px"
-  })));
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var LocationTabs = function LocationTabs(_ref) {
+  var tafList = _ref.tafList,
+      _ref$activeIndex = _ref.activeIndex,
+      activeIndex = _ref$activeIndex === void 0 ? 0 : _ref$activeIndex,
+      _ref$onChangeTab = _ref.onChangeTab,
+      onChangeTab = _ref$onChangeTab === void 0 ? function () {} : _ref$onChangeTab,
+      timeSlot = _ref.timeSlot;
+  return /*#__PURE__*/React.createElement(MenuList, {
+    "data-testid": "location-tabs",
+    sx: {
+      paddingTop: '32px'
+    }
+  }, tafList.map(function (_ref2, index) {
+    var taf = _ref2.taf;
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: taf.uuid,
+      selected: index === activeIndex,
+      sx: {
+        backgroundColor: 'geowebColors.cards.cardContainer',
+        borderColor: 'geowebColors.cards.cardContainerBorder',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        margin: '0 0 4px',
+        height: '56px',
+        justifyContent: 'center',
+        ':after': {
+          background: 'none!important'
+        },
+        '&.Mui-selected': {
+          backgroundColor: 'geowebColors.cards.cardContainer',
+          marginRight: '-17px',
+          borderRight: '0px',
+          zIndex: 1
+        }
+      },
+      onClick: function onClick() {
+        return onChangeTab(index);
+      }
+    }, /*#__PURE__*/React.createElement(Box$1, {
+      component: "span",
+      sx: {
+        fontSize: '12px',
+        fontWeight: '500',
+        letterSpacing: '0.09px',
+        '& + svg': {
+          position: 'absolute',
+          bottom: '1px',
+          width: '20px',
+          height: '20px'
+        }
+      }
+    }, taf.location), /*#__PURE__*/React.createElement(StatusIcon, {
+      timeSlot: timeSlot,
+      status: taf.status
+    }));
+  }));
 };
 
 /* *
@@ -4731,285 +4884,434 @@ var TafList = function TafList(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles = makeStyles({
-  backdrop: {
-    zIndex: 1500,
-    color: '#fff'
-  }
-});
 
-var Spinner = function Spinner() {
-  var classes = useStyles();
-  return /*#__PURE__*/React__default.createElement(Backdrop, {
-    open: true,
-    className: classes.backdrop
-  }, /*#__PURE__*/React__default.createElement(CircularProgress, {
+var Spinner = function Spinner(props) {
+  return /*#__PURE__*/React__default.createElement(Backdrop, Object.assign({
+    open: true
+  }, props), /*#__PURE__*/React__default.createElement(CircularProgress, {
     "data-testid": "spinner",
     color: "inherit"
   }));
 };
 
-var useTimeoutCancelError = function useTimeoutCancelError() {
-  var pollingInterval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10000;
-
-  var _React$useState = React__default.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      errorCancelTaf = _React$useState2[0],
-      setErrorCancelTaf = _React$useState2[1];
-
-  React__default.useEffect(function () {
-    var cancelErrorMessageHandler = errorCancelTaf.length > 0 ? setTimeout(function () {
-      if (errorCancelTaf.length > 0) {
-        setErrorCancelTaf(errorCancelTaf.slice(1));
-      }
-    }, pollingInterval) : null;
-    return function () {
-      if (cancelErrorMessageHandler !== null) {
-        clearTimeout(cancelErrorMessageHandler);
-      }
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [errorCancelTaf]);
-  return [errorCancelTaf, setErrorCancelTaf];
-};
-var getSelectedTaf = function getSelectedTaf(selectedTafId, tafList) {
-  if (tafList === null) return undefined;
-  return tafList.find(function (element) {
-    return element.taf.uuid === selectedTafId;
-  });
-};
-
-var TafWrapper = function TafWrapper() {
-  var _useApiContext = useApiContext(),
-      api = _useApiContext.api;
-
-  var confirmDialog = useConfirmationDialog();
-
-  var _React$useState3 = React__default.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isTafDialogOpen = _React$useState4[0],
-      setTafDialogOpen = _React$useState4[1];
+var fromActionToStatus = function fromActionToStatus(tafAction) {
+  switch (tafAction) {
+    case 'DRAFT':
+      return 'DRAFT';
 
-  var _React$useState5 = React__default.useState(null),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      selectedTafId = _React$useState6[0],
-      setselectedTafId = _React$useState6[1];
+    case 'DRAFT_AMEND':
+      return 'DRAFT_AMENDED';
 
-  var _React$useState7 = React__default.useState(null),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      tafDialogAction = _React$useState8[0],
-      setTafDialogAction = _React$useState8[1];
+    case 'DRAFT_CORRECT':
+      return 'DRAFT_CORRECTED';
 
-  var _React$useState9 = React__default.useState(false),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      errorPostMessage = _React$useState10[0],
-      setErrorPostMessage = _React$useState10[1];
-
-  var _React$useState11 = React__default.useState(''),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      errorPostMessageText = _React$useState12[0],
-      setErrorPostMessageText = _React$useState12[1];
+    case 'PUBLISH':
+      return 'PUBLISHED';
 
-  var _React$useState13 = React__default.useState(false),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      showSpinner = _React$useState14[0],
-      setSpinner = _React$useState14[1]; // clear error message for cancel after 10 seconds
+    case 'AMEND':
+      return 'AMENDED';
 
+    case 'CORRECT':
+      return 'CORRECTED';
 
-  var _useTimeoutCancelErro = useTimeoutCancelError(),
-      _useTimeoutCancelErro2 = _slicedToArray(_useTimeoutCancelErro, 2),
-      errorCancelTaf = _useTimeoutCancelErro2[0],
-      setErrorCancelTaf = _useTimeoutCancelErro2[1]; // Retrieve list of tafs
+    case 'CANCEL':
+      return 'CANCELLED';
 
+    default:
+      return 'NEW';
+  }
+};
 
-  var _useApi = useApi(api.getTafList),
-      errorList = _useApi.error,
-      isLoadingList = _useApi.isLoading,
-      tafList = _useApi.result,
-      fetchNewTafList = _useApi.fetchApiData;
+var TafPanel = function TafPanel(_ref) {
+  var tafFromBackend = _ref.tafFromBackend,
+      activeTafIndex = _ref.activeTafIndex,
+      index = _ref.index,
+      _ref$onPostTaf = _ref.onPostTaf,
+      onPostTaf = _ref$onPostTaf === void 0 ? function () {} : _ref$onPostTaf;
 
-  var getNewTafList = function getNewTafList() {
-    fetchNewTafList({});
-  };
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
 
-  usePoller([tafList, errorList], getNewTafList);
+  var _React$useState = React__default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isLoading = _React$useState2[0],
+      setLoading = _React$useState2[1];
 
-  var toggleTafDialog = function toggleTafDialog() {
-    // Refresh list on closing dialog
-    if (isTafDialogOpen === true) getNewTafList(); // Set error message back to false
+  var _React$useState3 = React__default.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      error = _React$useState4[0],
+      setError = _React$useState4[1]; // removes cancelled error message
 
-    setErrorPostMessage(false);
-    setErrorPostMessageText('');
-    setTafDialogOpen(!isTafDialogOpen);
-  };
 
   React__default.useEffect(function () {
-    if (selectedTafId) {
-      toggleTafDialog();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [selectedTafId]);
-
-  var onClickTafActionButton = function onClickTafActionButton(tafUuid, action) {
-    if (action === 'CANCEL') {
-      confirmDialog({
-        title: 'Cancel TAF',
-        description: 'Are you sure you want to cancel this TAF?',
-        confirmLabel: 'Cancel'
-      }).then(function () {
-        var _getSelectedTaf = getSelectedTaf(tafUuid, tafList),
-            taf = _getSelectedTaf.taf;
-
-        postTaf({
-          taf: taf,
-          changeStatusTo: 'CANCELLED'
-        });
-      });
-    } else if (selectedTafId === tafUuid) {
-      setTafDialogAction(action);
-      toggleTafDialog();
-    } else {
-      setTafDialogAction(action);
-      setselectedTafId(tafUuid);
-    }
-  };
+    var cancelErrorTimeout = error && error.type === 'CANCELLED' ? setTimeout(function () {
+      setError(null);
+    }, 10000) : null;
+    return function () {
+      if (cancelErrorTimeout !== null) {
+        clearTimeout(cancelErrorTimeout);
+      }
+    };
+  }, [error]);
 
   var postTaf = function postTaf(data) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var newError;
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              setSpinner(true);
-              _context.prev = 1;
+              _context.prev = 0;
+              setLoading(true);
               _context.next = 4;
               return api.postTaf(data);
 
             case 4:
-              if (isTafDialogOpen) toggleTafDialog();
-              setSpinner(false); // fetch new taflist
+              setLoading(false);
+              setError(null); // callback
 
-              getNewTafList(); // If a post has succeeded remove error message
+              onPostTaf();
+              _context.next = 15;
+              break;
 
-              setErrorCancelTaf([]);
-              _context.next = 14;
+            case 9:
+              _context.prev = 9;
+              _context.t0 = _context["catch"](0);
+              newError = data.changeStatusTo === 'CANCELLED' ? {
+                type: 'CANCELLED',
+                title: 'Cancelling this TAF failed, please try again'
+              } : {
+                type: 'SERVER',
+                title: 'An error has occurred while saving, please try again',
+                message: getAxiosErrorMessage(_context.t0)
+              };
+              setError(newError);
+              setLoading(false);
+              throw _context.t0;
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 9]]);
+    }));
+  };
+
+  var getViewMode = function getViewMode(status) {
+    return status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED' ? 'edit' : 'view';
+  };
+
+  var onTafAction = function onTafAction(action, taf) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.t0 = action;
+              _context2.next = _context2.t0 === 'DRAFT' ? 4 : _context2.t0 === 'DRAFT_AMEND' ? 4 : _context2.t0 === 'DRAFT_CORRECT' ? 4 : _context2.t0 === 'PUBLISH' ? 4 : _context2.t0 === 'AMEND' ? 4 : _context2.t0 === 'CANCEL' ? 4 : _context2.t0 === 'CORRECT' ? 4 : 7;
               break;
 
-            case 10:
-              _context.prev = 10;
-              _context.t0 = _context["catch"](1);
+            case 4:
+              _context2.next = 6;
+              return postTaf({
+                taf: taf,
+                changeStatusTo: fromActionToStatus(action)
+              });
 
-              if (data.changeStatusTo === 'CANCELLED') {
-                setErrorCancelTaf([].concat(_toConsumableArray(errorCancelTaf), [data.taf.uuid]));
-              } else {
-                setErrorPostMessage(true);
+            case 6:
+              return _context2.abrupt("return", true);
 
-                if (isAxiosError(_context.t0)) {
-                  setErrorPostMessageText(getAxiosErrorMessage(_context.t0));
-                }
-              }
+            case 7:
+              return _context2.abrupt("return", false);
 
-              setSpinner(false);
+            case 8:
+              _context2.next = 13;
+              break;
+
+            case 10:
+              _context2.prev = 10;
+              _context2.t1 = _context2["catch"](0);
+              return _context2.abrupt("return", false);
 
-            case 14:
+            case 13:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee, null, [[1, 10]]);
+      }, _callee2, null, [[0, 10]]);
     }));
   };
 
-  var fromActionToStatus = function fromActionToStatus(tafAction) {
-    switch (tafAction) {
-      case 'DRAFT':
-        return 'DRAFT';
+  return /*#__PURE__*/React__default.createElement(TabPanel, {
+    value: activeTafIndex,
+    index: index,
+    "data-testid": "taf-panel".concat(activeTafIndex === index ? '-active' : '')
+  }, /*#__PURE__*/React__default.createElement(TafHeader, {
+    title: getTafStatusLabel(tafFromBackend.taf.status)
+  }), isLoading && /*#__PURE__*/React__default.createElement(Spinner, {
+    "data-testid": "taf-loading",
+    sx: {
+      position: 'absolute',
+      zIndex: 1,
+      color: 'geowebColors.backdrops.white.fill'
+    }
+  }), error && /*#__PURE__*/React__default.createElement(AlertBanner, {
+    severity: "error",
+    title: error.title,
+    info: error.message,
+    dataTestId: "taf-error"
+  }), /*#__PURE__*/React__default.createElement(TafFormWrapper, {
+    mode: getViewMode(tafFromBackend.taf.status),
+    tafFromBackend: tafFromBackend,
+    onFormAction: onTafAction
+  }));
+};
 
-      case 'DRAFT_AMEND':
-        return 'DRAFT_AMENDED';
+var TafLayout = function TafLayout(_ref) {
+  var _ref$tafList = _ref.tafList,
+      tafList = _ref$tafList === void 0 ? [] : _ref$tafList,
+      _ref$onPostTaf = _ref.onPostTaf,
+      onPostTaf = _ref$onPostTaf === void 0 ? function () {} : _ref$onPostTaf;
 
-      case 'DRAFT_CORRECT':
-        return 'DRAFT_CORRECTED';
+  var _React$useState = React__default.useState(sortTafTimeSlots(tafList)),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      _React$useState2$ = _React$useState2[0],
+      upcoming = _React$useState2$.upcoming,
+      current = _React$useState2$.current,
+      expired = _React$useState2$.expired,
+      updateSortedTafs = _React$useState2[1];
 
-      case 'PUBLISH':
-        return 'PUBLISHED';
+  var _upcoming$slice = upcoming.slice(-1),
+      _upcoming$slice2 = _slicedToArray(_upcoming$slice, 1),
+      lastUpcomingTaf = _upcoming$slice2[0];
 
-      case 'AMEND':
-        return 'AMENDED';
+  var _React$useState3 = React__default.useState('UPCOMING'),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      timeSlot = _React$useState4[0],
+      setTimeSlot = _React$useState4[1];
 
-      case 'CORRECT':
-        return 'CORRECTED';
+  var _React$useState5 = React__default.useState(upcoming),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      locations = _React$useState6[0],
+      setLocations = _React$useState6[1];
 
-      default:
-        return 'NEW';
-    }
+  var _React$useState7 = React__default.useState(0),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      activeTafIndex = _React$useState8[0],
+      setActiveTafIndex = _React$useState8[1];
+
+  var onChangeTimeSlot = function onChangeTimeSlot(newTimeSlot) {
+    setTimeSlot(newTimeSlot);
+    setLocations(newTimeSlot === 'ACTIVE' ? current : upcoming);
+    setActiveTafIndex(0);
   };
 
-  var onFormAction = function onFormAction(action, taf) {
-    // Add right actions and their follow up calls to the BE
-    switch (action) {
-      case 'CLOSE':
-        confirmDialog({
-          title: 'Closing TAF',
-          description: 'Are you sure you want to close this TAF?  Any changes made will be lost.',
-          confirmLabel: 'Close'
-        }).then(function () {
-          toggleTafDialog();
-        });
-        break;
+  React__default.useEffect(function () {
+    var newSortedTafs = sortTafTimeSlots(tafList);
+    var updatedLocations = timeSlot === 'ACTIVE' ? newSortedTafs.current : newSortedTafs.upcoming;
+    updateSortedTafs(sortTafTimeSlots(tafList));
+    setLocations(updatedLocations); // update active index
 
-      case 'DRAFT':
-      case 'DRAFT_AMEND':
-      case 'DRAFT_CORRECT':
-      case 'PUBLISH':
-      case 'AMEND':
-      case 'CORRECT':
-        postTaf({
-          taf: taf,
-          changeStatusTo: fromActionToStatus(action)
-        });
-        break;
+    var newActiveIndex = updatedLocations.findIndex(function (location) {
+      return location.taf.previousId === locations[activeTafIndex].taf.uuid;
+    });
+    var newIndex = newActiveIndex !== -1 ? newActiveIndex : activeTafIndex;
+    setActiveTafIndex(newIndex); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tafList, setLocations]);
 
-      default:
-        toggleTafDialog();
-        break;
+  if (!tafList) {
+    return null;
+  }
+
+  var activeTaf = locations[activeTafIndex];
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+    id: MODAL_DIALOG_ELEMENT,
+    component: "div",
+    sx: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      overflow: 'hidden',
+      pointerEvents: 'none'
+    }
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      height: '100%',
+      maxHeight: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      minWidth: 320,
+      maxWidth: 1272,
+      margin: 'auto',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    spacing: 2,
+    sx: {
+      paddingLeft: 1,
+      paddingRight: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 9
+  }, /*#__PURE__*/React__default.createElement(TopTabs, {
+    tafFromBackend: lastUpcomingTaf,
+    timeSlot: timeSlot,
+    onChangeTimeSlot: onChangeTimeSlot
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    flexGrow: 1,
+    overflow: "hidden"
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    spacing: 2,
+    sx: {
+      height: '100%',
+      paddingLeft: 1,
+      paddingRight: 1,
+      paddingTop: 2,
+      overflow: 'auto'
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 3,
+    sm: 1
+  }, /*#__PURE__*/React__default.createElement(LocationTabs, {
+    tafList: locations,
+    activeIndex: activeTafIndex,
+    onChangeTab: setActiveTafIndex,
+    timeSlot: timeSlot
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: true
+  }, /*#__PURE__*/React__default.createElement(Card, {
+    variant: "outlined",
+    sx: {
+      padding: 1,
+      paddingTop: 0,
+      marginBottom: '12px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React__default.createElement(TacOverviewMobile, {
+    upcomingTafs: upcoming,
+    currentTafs: current,
+    expiredTafs: expired,
+    activeTaf: activeTaf
+  }), locations.map(function (tafFromBackend, index) {
+    return /*#__PURE__*/React__default.createElement(TafPanel, {
+      key: tafFromBackend.taf.uuid,
+      activeTafIndex: activeTafIndex,
+      index: index,
+      tafFromBackend: tafFromBackend,
+      onPostTaf: onPostTaf
+    });
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 3,
+    sx: {
+      height: '100%'
+    },
+    display: {
+      xs: 'none',
+      sm: 'block'
     }
+  }, /*#__PURE__*/React__default.createElement(TacOverview, {
+    upcomingTafs: upcoming,
+    currentTafs: current,
+    expiredTafs: expired,
+    activeTaf: activeTaf
+  })))))));
+};
+
+var TafModule = function TafModule() {
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isLoading = _React$useState2[0],
+      setLoading = _React$useState2[1];
+
+  var _useApi = useApi(api.getTafList),
+      getTafListError = _useApi.error,
+      isFetchingInitial = _useApi.isLoading,
+      tafList = _useApi.result,
+      fetchNewTafList = _useApi.fetchApiData;
+
+  usePoller([tafList, getTafListError], function () {
+    return fetchNewTafList({});
+  });
+
+  var reFetchNewTafList = function reFetchNewTafList() {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoading(true);
+              _context.next = 4;
+              return fetchNewTafList({});
+
+            case 4:
+              setLoading(false);
+              _context.next = 10;
+              break;
+
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              setLoading(false);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
   };
 
-  var selectedTaf = getSelectedTaf(selectedTafId, tafList);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafList, {
+  var hasTafListError = getTafListError !== null;
+
+  if (isFetchingInitial) {
+    return /*#__PURE__*/React.createElement(LinearProgress, {
+      color: "secondary",
+      "data-testid": "loading-bar"
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(Box, {
+    component: "div",
+    id: "tafmodule",
+    sx: {
+      height: '100%'
+    }
+  }, isLoading && /*#__PURE__*/React.createElement(LinearProgress, {
+    "data-testid": "loading-bar",
+    color: "secondary",
+    sx: {
+      marginBottom: '-4px'
+    }
+  }), hasTafListError && /*#__PURE__*/React.createElement(AlertBanner, {
+    severity: "error",
+    title: "An error has occurred while retrieving the list",
+    info: getTafListError.message
+  }), /*#__PURE__*/React.createElement(TafLayout, {
     tafList: tafList,
-    isLoading: isLoadingList,
-    error: errorList,
-    onClickTafActionButton: onClickTafActionButton,
-    errorCancelTaf: errorCancelTaf
-  }), showSpinner && /*#__PURE__*/React__default.createElement(Spinner, null), selectedTaf !== undefined && /*#__PURE__*/React__default.createElement(TafFormDialog, {
-    open: isTafDialogOpen,
-    toggleFormDialog: toggleTafDialog,
-    tafFromBackend: selectedTaf,
-    alertBanner: errorPostMessage ? /*#__PURE__*/React__default.createElement(AlertBanner, {
-      severity: "error",
-      title: "An error has occurred while saving, please try again",
-      info: errorPostMessageText
-    }) : null,
-    onFormAction: onFormAction
-  }, /*#__PURE__*/React__default.createElement(TafFormWrapper, {
-    mode: "edit",
-    tafFromBackend: selectedTaf,
-    tafAction: tafDialogAction,
-    onFormAction: onFormAction
-  }), showSpinner && /*#__PURE__*/React__default.createElement(Spinner, null)));
+    onPostTaf: reFetchNewTafList
+  }));
 };
-/**
- * Shows the list of Tafs and allows to create, edit and view Tafs.
- * Needs to be wrapped in the ApiProvider.
- *
- * @example
- * ```<ApiProvider baseURL="http://test.com"  appURL="http://app.com" auth={auth} onSetAuth={onSetAuth} createApi={createApi}>  authTokenUrl="url/tokenrefresh"<TafWrapper /> </ApiProvider>```
- */
-
 
-var ConfirmationWrapper = function ConfirmationWrapper() {
-  return /*#__PURE__*/React__default.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React__default.createElement(TafWrapper, null));
+var Wrapper = function Wrapper() {
+  return /*#__PURE__*/React.createElement(ConfirmationServiceProvider, null, /*#__PURE__*/React.createElement(TafModule, null));
 };
 
 /* *
@@ -5044,4 +5346,4 @@ var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, aut
   };
 };
 
-export { ContentDialog, TafFormDialog, TafFormWrapper, TafList, TafListRow, TafListSection, ConfirmationWrapper as TafWrapper, createApi };
+export { TafFormWrapper, Wrapper as TafModule, createApi };