fix: pre release screen fixes

new-lamassu-admin/src/components/editableTable/Header.js

@@ -1,10 +1,35 @@
+import * as R from 'ramda'
 import React, { useContext } from 'react'
 
-import { Td, THead } from 'src/components/fake-table/Table'
+import {
+  Td,
+  THead,
+  TDoubleLevelHead,
+  ThDoubleLevel
+} from 'src/components/fake-table/Table'
 import { startCase } from 'src/utils/string'
 
 import TableCtx from './Context'
 
+const groupSecondHeader = elements => {
+  const [toSHeader, noSHeader] = R.partition(R.has('doubleHeader'))(elements)
+
+  if (!toSHeader.length) {
+    return [elements, THead]
+  }
+
+  const index = R.indexOf(toSHeader[0], elements)
+  const width = R.compose(R.sum, R.map(R.path(['width'])))(toSHeader)
+
+  const innerElements = R.insert(
+    index,
+    { width, elements: toSHeader, name: toSHeader[0].doubleHeader },
+    noSHeader
+  )
+
+  return [innerElements, TDoubleLevelHead]
+}
+
 const Header = () => {
   const {
     elements,
@@ -16,15 +41,35 @@ const Header = () => {
     toggleWidth,
     DEFAULT_COL_SIZE
   } = useContext(TableCtx)
+
+  const mapElement2 = (it, idx) => {
+    const { width, elements, name } = it
+
+    if (elements && elements.length) {
+      return (
+        <ThDoubleLevel key={idx} width={width} title={name}>
+          {elements.map(mapElement)}
+        </ThDoubleLevel>
+      )
+    }
+
+    return mapElement(it, idx)
+  }
+
+  const mapElement = (
+    { name, width = DEFAULT_COL_SIZE, header, textAlign },
+    idx
+  ) => (
+    <Td header key={idx} width={width} textAlign={textAlign}>
+      {header || startCase(name)}
+    </Td>
+  )
+
+  const [innerElements, HeaderElement] = groupSecondHeader(elements)
+
   return (
-    <THead>
-      {elements.map(
-        ({ name, width = DEFAULT_COL_SIZE, header, textAlign }, idx) => (
-          <Td header key={idx} width={width} textAlign={textAlign}>
-            {header || startCase(name)}
-          </Td>
-        )
-      )}
+    <HeaderElement>
+      {innerElements.map(mapElement2)}
       {enableEdit && (
         <Td header width={editWidth} textAlign="center">
           Edit
@@ -40,7 +85,7 @@ const Header = () => {
           Enable
         </Td>
       )}
-    </THead>
+    </HeaderElement>
   )
 }