navigation

2 files changed, 383 insertions, 478 deletions

diff --git a/packages/exchange-backoffice-ui/src/Dashborad.tsx b/packages/exchange-backoffice-ui/src/Dashborad.tsx
index 4fdb7415a..142e1de16 100644
--- a/packages/exchange-backoffice-ui/src/Dashborad.tsx
+++ b/packages/exchange-backoffice-ui/src/Dashborad.tsx
@@ -11,7 +11,7 @@ import {
   XMarkIcon,
 } from "@heroicons/react/24/outline";
 import { ComponentChildren, Fragment, VNode, h } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useReducer, useRef, useState } from "preact/hooks";
 import { NiceForm } from "./NiceForm.js";
 import { v1 as form_902_11e_v1 } from "./forms/902_11e.js";
 import { v1 as form_902_12e_v1 } from "./forms/902_12e.js";
@@ -21,6 +21,12 @@ import { v1 as form_902_1e_v1 } from "./forms/902_1e.js";
 import { v1 as form_902_4e_v1 } from "./forms/902_4e.js";
 import { v1 as form_902_5e_v1 } from "./forms/902_5e.js";
 import { v1 as form_902_9e_v1 } from "./forms/902_9e.js";
+import { FlexibleForm } from "./forms/index.js";
+import { forwardRef } from "preact/compat";
+import { ForwardedRef } from "preact/compat";
+import { createHashHistory } from "history";
+
+const history = createHashHistory();
 
 /**
  * references between forms
@@ -50,7 +56,7 @@ import { v1 as form_902_9e_v1 } from "./forms/902_9e.js";
  * 902.4
  */
 
-const navigation = [
+const allForms = [
   {
     name: "Identification form (902.1e)",
     icon: DocumentDuplicateIcon,
@@ -128,6 +134,15 @@ function classNames(...classes: string[]) {
  * @returns
  */
 
+const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
+const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
+
+const versionText = VERSION
+  ? GIT_HASH
+    ? `Version ${VERSION} (${GIT_HASH.substring(0, 8)})`
+    : VERSION
+  : "";
+
 /**
  * TO BE FIXED:
  *
@@ -168,135 +183,181 @@ export function Dashboard({
   children?: ComponentChildren;
 }): VNode {
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [selectedForm, setSelectedForm] = useState(0);
-  function changeForm(next: number) {
-    setSelectedForm(next);
-  }
+
   const logRef = useRef<HTMLPreElement>(null);
-  const storedValue = {
-    fullName: "loggedIn_user_fullname",
-    when: {
-      t_ms: new Date().getTime(),
-    },
-  };
   function showFormOnSidebar(v: any) {
     if (!logRef.current) return;
     logRef.current.innerHTML = JSON.stringify(v, undefined, 1);
   }
-  useEffect(() => {
-    // initial render
-    showFormOnSidebar(storedValue);
-  });
 
-  const GIT_HASH =
-    typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
-  const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
+  const Nav = forwardRef(NavigationBar);
+  return (
+    <Fragment>
+      <Nav ref={logRef} isOpen={sidebarOpen} setOpen={setSidebarOpen} />
+      <div class="lg:pl-72">
+        <TopBar
+          onOpenSidebar={() => {
+            setSidebarOpen(true);
+          }}
+        />
+        <main class="py-10 px-4 sm:px-6 lg:px-8">
+          <div class="mx-auto max-w-3xl">
+            <Route
+              onUpdate={(v) => {
+                showFormOnSidebar(v);
+              }}
+            />
+          </div>
+        </main>
 
-  const versionText = VERSION
-    ? GIT_HASH
-      ? `Version ${VERSION} (${GIT_HASH.substring(0, 8)})`
-      : VERSION
-    : "";
+        <Footer />
+      </div>
+    </Fragment>
+  );
+}
+
+function Route({ onUpdate }: { onUpdate: (v: any) => void }) {
+  const [page, setPage] = useState<undefined | number>();
+  function doSync(path: string) {
+    try {
+      if (path.startsWith("/form")) {
+        const formNumber = path.substring("/form".length);
+        const num = Number.parseInt(formNumber, 10);
+        if (!Number.isNaN(num) && num >= 0 && num < allForms.length) {
+          setPage(num);
+        } else {
+          setPage(undefined);
+        }
+      } else {
+        setPage(undefined);
+      }
+    } catch (e) {
+      setPage(undefined);
+    }
+  }
+  useEffect(() => {
+    doSync(history.location.pathname);
+    return history.listen((location, action) => {
+      doSync(location.pathname);
+    });
+  }, []);
+  if (page !== undefined) {
+    return <Content onUpdate={onUpdate} selectedForm={page} />;
+  }
+  return <div>not found</div>;
+}
 
-  const showingFrom = navigation[selectedForm];
+function useCurrentLocation() {
+  const [currentLocation, setCurrentLocation] = useState(
+    history.location.pathname,
+  );
+  useEffect(() => {
+    return history.listen((location) => {
+      setCurrentLocation(location.pathname);
+    });
+  });
+  return currentLocation;
+}
+
+function NavigationBar(
+  { isOpen, setOpen }: { isOpen: boolean; setOpen: (v: boolean) => void },
+  logRef: ForwardedRef<HTMLPreElement>,
+) {
+  const currentLocation = useCurrentLocation();
   return (
-    <>
-      <div>
-        <Transition.Root show={sidebarOpen} as={Fragment}>
-          <Dialog
-            as="div"
-            /* @ts-ignore */
-            class="relative z-50 lg:hidden"
-            onClose={setSidebarOpen}
+    <Fragment>
+      <Transition.Root show={isOpen} as={Fragment}>
+        <Dialog
+          as="div"
+          /* @ts-ignore */
+          class="relative z-50 lg:hidden"
+          onClose={setOpen}
+        >
+          <Transition.Child
+            as={Fragment}
+            enter="transition-opacity ease-linear duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition-opacity ease-linear duration-300"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
           >
+            <div class="fixed inset-0 bg-gray-900/80" />
+          </Transition.Child>
+
+          <div class="fixed inset-0 flex">
             <Transition.Child
               as={Fragment}
-              enter="transition-opacity ease-linear duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="transition-opacity ease-linear duration-300"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
+              enter="transition ease-in-out duration-300 transform"
+              enterFrom="-translate-x-full"
+              enterTo="translate-x-0"
+              leave="transition ease-in-out duration-300 transform"
+              leaveFrom="translate-x-0"
+              leaveTo="-translate-x-full"
             >
-              <div class="fixed inset-0 bg-gray-900/80" />
-            </Transition.Child>
-
-            <div class="fixed inset-0 flex">
-              <Transition.Child
-                as={Fragment}
-                enter="transition ease-in-out duration-300 transform"
-                enterFrom="-translate-x-full"
-                enterTo="translate-x-0"
-                leave="transition ease-in-out duration-300 transform"
-                leaveFrom="translate-x-0"
-                leaveTo="-translate-x-full"
-              >
-                <Dialog.Panel class="relative mr-16 flex w-full max-w-xs flex-1">
-                  <Transition.Child
-                    as={Fragment}
-                    enter="ease-in-out duration-300"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="ease-in-out duration-300"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
-                      <button
-                        type="button"
-                        class="-m-2.5 p-2.5"
-                        onClick={() => setSidebarOpen(false)}
-                      >
-                        <span class="sr-only">Close sidebar</span>
-                        <XMarkIcon
-                          class="h-6 w-6 text-white"
-                          aria-hidden="true"
-                        />
-                      </button>
-                    </div>
-                  </Transition.Child>
-                  <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
-                    <div class="flex h-16 shrink-0 items-center">
-                      <img
-                        class="h-8 w-auto"
-                        src="https://tailwindui.com/img/logos/mark.svg?color=white"
-                        alt="Your Company"
+              <Dialog.Panel class="relative mr-16 flex w-full max-w-xs flex-1">
+                <Transition.Child
+                  as={Fragment}
+                  enter="ease-in-out duration-300"
+                  enterFrom="opacity-0"
+                  enterTo="opacity-100"
+                  leave="ease-in-out duration-300"
+                  leaveFrom="opacity-100"
+                  leaveTo="opacity-0"
+                >
+                  <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
+                    <button
+                      type="button"
+                      class="-m-2.5 p-2.5"
+                      onClick={() => setOpen(false)}
+                    >
+                      <span class="sr-only">Close sidebar</span>
+                      <XMarkIcon
+                        class="h-6 w-6 text-white"
+                        aria-hidden="true"
                       />
-                    </div>
-                    <nav class="flex flex-1 flex-col">
-                      <ul role="list" class="flex flex-1 flex-col gap-y-7">
-                        <li>
-                          <ul role="list" class="-mx-2 space-y-1">
-                            {navigation.map((item, idx) => (
-                              <li
-                                key={item.name}
-                                onClick={(e) => changeForm(idx)}
+                    </button>
+                  </div>
+                </Transition.Child>
+                <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
+                  <div class="flex h-16 shrink-0 items-center">
+                    <img
+                      class="h-8 w-auto"
+                      src="https://tailwindui.com/img/logos/mark.svg?color=white"
+                      alt="Your Company"
+                    />
+                  </div>
+                  <nav class="flex flex-1 flex-col">
+                    <ul role="list" class="flex flex-1 flex-col gap-y-7">
+                      <li>
+                        <ul role="list" class="-mx-2 space-y-1">
+                          {allForms.map((item, idx) => (
+                            <li key={item.name}>
+                              <a
+                                href={`#/form${idx}`}
+                                class={classNames(
+                                  `/${idx}` === currentLocation
+                                    ? "bg-indigo-700 text-white"
+                                    : "text-indigo-200 hover:text-white hover:bg-indigo-700",
+                                  "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold",
+                                )}
                               >
-                                <a
-                                  href="#"
+                                <item.icon
                                   class={classNames(
-                                    idx === selectedForm
-                                      ? "bg-indigo-700 text-white"
-                                      : "text-indigo-200 hover:text-white hover:bg-indigo-700",
-                                    "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold",
+                                    `/${idx}` === currentLocation
+                                      ? "text-white"
+                                      : "text-indigo-200 group-hover:text-white",
+                                    "h-6 w-6 shrink-0",
                                   )}
-                                >
-                                  <item.icon
-                                    class={classNames(
-                                      idx === selectedForm
-                                        ? "text-white"
-                                        : "text-indigo-200 group-hover:text-white",
-                                      "h-6 w-6 shrink-0",
-                                    )}
-                                    aria-hidden="true"
-                                  />
-                                  {item.name}
-                                </a>
-                              </li>
-                            ))}
-                          </ul>
-                        </li>
-                        {/* <li>
+                                  aria-hidden="true"
+                                />
+                                {item.name}
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </li>
+                      {/* <li>
                           <div class="text-xs font-semibold leading-6 text-indigo-200">
                             Your teams
                           </div>
@@ -321,67 +382,67 @@ export function Dashboard({
                             ))}
                           </ul>
                         </li> */}
-                        <li class="mt-auto">
-                          <a
-                            href="#"
-                            class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white"
-                          >
-                            <Cog6ToothIcon
-                              class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white"
-                              aria-hidden="true"
-                            />
-                            Settings
-                          </a>
-                        </li>
-                      </ul>
-                    </nav>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </Dialog>
-        </Transition.Root>
-
-        <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
-          <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
-            <div class="flex h-16 shrink-0 items-center">
-              <img
-                class="h-8 w-auto"
-                src="https://tailwindui.com/img/logos/mark.svg?color=white"
-                alt="Your Company"
-              />
-            </div>
-            <nav class="flex flex-1 flex-col">
-              <ul role="list" class="flex flex-1 flex-col gap-y-7">
-                <li>
-                  <ul role="list" class="-mx-2 space-y-1">
-                    {navigation.map((item, idx) => (
-                      <li key={item.name} onClick={(e) => changeForm(idx)}>
+                      <li class="mt-auto">
                         <a
                           href="#"
-                          class={classNames(
-                            idx === selectedForm
-                              ? "bg-indigo-700 text-white"
-                              : "text-indigo-200 hover:text-white hover:bg-indigo-700",
-                            "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold",
-                          )}
+                          class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white"
                         >
-                          <item.icon
-                            class={classNames(
-                              idx === selectedForm
-                                ? "text-white"
-                                : "text-indigo-200 group-hover:text-white",
-                              "h-6 w-6 shrink-0",
-                            )}
+                          <Cog6ToothIcon
+                            class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white"
                             aria-hidden="true"
                           />
-                          {item.name}
+                          Settings
                         </a>
                       </li>
-                    ))}
-                  </ul>
-                </li>
-                {/* <li>
+                    </ul>
+                  </nav>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+
+      <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
+        <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
+          <div class="flex h-16 shrink-0 items-center">
+            <img
+              class="h-8 w-auto"
+              src="https://tailwindui.com/img/logos/mark.svg?color=white"
+              alt="Your Company"
+            />
+          </div>
+          <nav class="flex flex-1 flex-col">
+            <ul role="list" class="flex flex-1 flex-col gap-y-7">
+              <li>
+                <ul role="list" class="-mx-2 space-y-1">
+                  {allForms.map((item, idx) => (
+                    <li key={item.name}>
+                      <a
+                        href={`#/form${idx}`}
+                        class={classNames(
+                          `/${idx}` === currentLocation
+                            ? "bg-indigo-700 text-white"
+                            : "text-indigo-200 hover:text-white hover:bg-indigo-700",
+                          "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold",
+                        )}
+                      >
+                        <item.icon
+                          class={classNames(
+                            `/${idx}` === currentLocation
+                              ? "text-white"
+                              : "text-indigo-200 group-hover:text-white",
+                            "h-6 w-6 shrink-0",
+                          )}
+                          aria-hidden="true"
+                        />
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </li>
+              {/* <li>
                   <div class="text-xs font-semibold leading-6 text-indigo-200">
                     Your teams
                   </div>
@@ -406,154 +467,172 @@ export function Dashboard({
                     ))}
                   </ul>
                 </li> */}
-                <li class="mt-auto">
-                  <a
-                    href="#"
-                    class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white"
-                  >
-                    <Cog6ToothIcon
-                      class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white"
-                      aria-hidden="true"
-                    />
-                    Settings
-                  </a>
-                </li>
-              </ul>
-            </nav>
-            <div class="text-white text-sm">
-              <pre ref={logRef}></pre>
-            </div>
+              <li class="mt-auto">
+                <a
+                  href="#"
+                  class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white"
+                >
+                  <Cog6ToothIcon
+                    class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white"
+                    aria-hidden="true"
+                  />
+                  Settings
+                </a>
+              </li>
+            </ul>
+          </nav>
+          <div class="text-white text-sm">
+            <pre ref={logRef}></pre>
           </div>
         </div>
+      </div>
+    </Fragment>
+  );
+}
 
-        <div class="lg:pl-72">
-          <div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
-            <button
-              type="button"
-              class="-m-2.5 p-2.5 text-gray-700 lg:hidden"
-              onClick={() => setSidebarOpen(true)}
-            >
-              <span class="sr-only">Open sidebar</span>
-              <Bars3Icon class="h-6 w-6" aria-hidden="true" />
-            </button>
+function Content({
+  onUpdate,
+  selectedForm,
+}: {
+  onUpdate: (v: any) => void;
+  selectedForm: number;
+}) {
+  const showingFrom = allForms[selectedForm].impl;
+  const storedValue = {
+    fullName: "loggedIn_user_fullname",
+    when: {
+      t_ms: new Date().getTime(),
+    },
+  };
+  useEffect(() => {
+    // initial render
+    onUpdate(storedValue);
+  });
+  return (
+    <Fragment>
+      <NiceForm initial={storedValue} form={showingFrom} onUpdate={onUpdate} />
+    </Fragment>
+  );
+}
 
-            {/* Separator */}
-            <div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true" />
+function TopBar({ onOpenSidebar }: { onOpenSidebar: () => void }) {
+  return (
+    <div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
+      <button
+        type="button"
+        class="-m-2.5 p-2.5 text-gray-700 lg:hidden"
+        onClick={onOpenSidebar}
+      >
+        <span class="sr-only">Open sidebar</span>
+        <Bars3Icon class="h-6 w-6" aria-hidden="true" />
+      </button>
 
-            <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
-              <form class="relative flex flex-1" action="#" method="GET">
-                <label htmlFor="search-field" class="sr-only">
-                  Search
-                </label>
-                <MagnifyingGlassIcon
-                  class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
+      {/* Separator */}
+      <div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true" />
+
+      <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+        <form class="relative flex flex-1" action="#" method="GET">
+          <label htmlFor="search-field" class="sr-only">
+            Search
+          </label>
+          <MagnifyingGlassIcon
+            class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
+            aria-hidden="true"
+          />
+          <input
+            id="search-field"
+            class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
+            placeholder="Search..."
+            type="search"
+            name="search"
+          />
+        </form>
+        <div class="flex items-center gap-x-4 lg:gap-x-6">
+          <button
+            type="button"
+            class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500"
+          >
+            <span class="sr-only">View notifications</span>
+            <BellIcon class="h-6 w-6" aria-hidden="true" />
+          </button>
+
+          {/* Separator */}
+          <div
+            class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10"
+            aria-hidden="true"
+          />
+
+          {/* Profile dropdown */}
+          <Menu
+            as="div"
+            /* @ts-ignore */
+            class="relative"
+          >
+            <Menu.Button class="-m-1.5 flex items-center p-1.5">
+              <span class="sr-only">Open user menu</span>
+              <img
+                class="h-8 w-8 rounded-full bg-gray-50"
+                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                alt=""
+              />
+              <span class="hidden lg:flex lg:items-center">
+                <span
+                  class="ml-4 text-sm font-semibold leading-6 text-gray-900"
                   aria-hidden="true"
-                />
-                <input
-                  id="search-field"
-                  class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
-                  placeholder="Search..."
-                  type="search"
-                  name="search"
-                />
-              </form>
-              <div class="flex items-center gap-x-4 lg:gap-x-6">
-                <button
-                  type="button"
-                  class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500"
                 >
-                  <span class="sr-only">View notifications</span>
-                  <BellIcon class="h-6 w-6" aria-hidden="true" />
-                </button>
-
-                {/* Separator */}
-                <div
-                  class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10"
+                  Tom Cook
+                </span>
+                <ChevronDownIcon
+                  class="ml-2 h-5 w-5 text-gray-400"
                   aria-hidden="true"
                 />
-
-                {/* Profile dropdown */}
-                <Menu
-                  as="div"
-                  /* @ts-ignore */
-                  class="relative"
-                >
-                  <Menu.Button class="-m-1.5 flex items-center p-1.5">
-                    <span class="sr-only">Open user menu</span>
-                    <img
-                      class="h-8 w-8 rounded-full bg-gray-50"
-                      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                      alt=""
-                    />
-                    <span class="hidden lg:flex lg:items-center">
-                      <span
-                        class="ml-4 text-sm font-semibold leading-6 text-gray-900"
-                        aria-hidden="true"
+              </span>
+            </Menu.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Menu.Items class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
+                {userNavigation.map((item) => (
+                  <Menu.Item key={item.name}>
+                    {({ active }: { active: boolean }) => (
+                      <a
+                        href={item.href}
+                        class={classNames(
+                          active ? "bg-gray-50" : "",
+                          "block px-3 py-1 text-sm leading-6 text-gray-900",
+                        )}
                       >
-                        Tom Cook
-                      </span>
-                      <ChevronDownIcon
-                        class="ml-2 h-5 w-5 text-gray-400"
-                        aria-hidden="true"
-                      />
-                    </span>
-                  </Menu.Button>
-                  <Transition
-                    as={Fragment}
-                    enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                  >
-                    <Menu.Items class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
-                      {userNavigation.map((item) => (
-                        <Menu.Item key={item.name}>
-                          {({ active }: { active: boolean }) => (
-                            <a
-                              href={item.href}
-                              class={classNames(
-                                active ? "bg-gray-50" : "",
-                                "block px-3 py-1 text-sm leading-6 text-gray-900",
-                              )}
-                            >
-                              {item.name}
-                            </a>
-                          )}
-                        </Menu.Item>
-                      ))}
-                    </Menu.Items>
-                  </Transition>
-                </Menu>
-              </div>
-            </div>
-          </div>
-
-          <main class="py-10">
-            <div class="px-4 sm:px-6 lg:px-8">
-              <div class="mx-auto max-w-3xl">
-                <NiceForm
-                  initial={storedValue}
-                  form={showingFrom.impl as any}
-                  onUpdate={showFormOnSidebar}
-                />
-              </div>
-            </div>
-          </main>
+                        {item.name}
+                      </a>
+                    )}
+                  </Menu.Item>
+                ))}
+              </Menu.Items>
+            </Transition>
+          </Menu>
+        </div>
+      </div>
+    </div>
+  );
+}
 
-          <footer class="bg-white">
-            <div class="mx-auto px-4 py-2 md:flex md:items-center md:justify-between lg:px-8">
-              <div class="mt-8 md:order-1 md:mt-0">
-                <p class="text-center text-xs leading-5 text-gray-500">
-                  Copyright &copy; 2014&mdash;2023 Taler Systems SA.
-                  {versionText}
-                </p>
-              </div>
-            </div>
-          </footer>
+function Footer() {
+  return (
+    <footer class="bg-white">
+      <div class="mx-auto px-4 py-2 md:flex md:items-center md:justify-between lg:px-8">
+        <div class="mt-8 md:order-1 md:mt-0">
+          <p class="text-center text-xs leading-5 text-gray-500">
+            Copyright &copy; 2014&mdash;2023 Taler Systems SA.
+            {versionText}
+          </p>
         </div>
       </div>
-    </>
+    </footer>
   );
 }
diff --git a/packages/exchange-backoffice-ui/src/HeroSections.tsx b/packages/exchange-backoffice-ui/src/HeroSections.tsx
deleted file mode 100644
index bdfaa49d4..000000000
--- a/packages/exchange-backoffice-ui/src/HeroSections.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { Dialog } from "@headlessui/react";
-import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
-import { h } from "preact";
-import { useState } from "preact/hooks";
-
-const navigation = [
-  { name: "Product", href: "#" },
-  { name: "Features", href: "#" },
-  { name: "Marketplace", href: "#" },
-  { name: "Company", href: "#" },
-];
-
-export function HeroSections() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
-  return (
-    <div class="bg-white">
-      <header class="absolute inset-x-0 top-0 z-50">
-        <nav
-          class="flex items-center justify-between p-6 lg:px-8"
-          aria-label="Global"
-        >
-          <div class="flex lg:flex-1">
-            <a href="#" class="-m-1.5 p-1.5">
-              <span class="sr-only">Your Company</span>
-              <img
-                class="h-8 w-auto"
-                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
-                alt=""
-              />
-            </a>
-          </div>
-          <div class="flex lg:hidden">
-            <button
-              type="button"
-              class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
-              onClick={() => setMobileMenuOpen(true)}
-            >
-              <span class="sr-only">Open main menu</span>
-              <Bars3Icon class="h-6 w-6" aria-hidden="true" />
-            </button>
-          </div>
-          <div class="hidden lg:flex lg:gap-x-12">
-            {navigation.map((item) => (
-              <a
-                key={item.name}
-                href={item.href}
-                class="text-sm font-semibold leading-6 text-gray-900"
-              >
-                {item.name}
-              </a>
-            ))}
-          </div>
-          <div class="hidden lg:flex lg:flex-1 lg:justify-end">
-            <a href="#" class="text-sm font-semibold leading-6 text-gray-900">
-              Log in <span aria-hidden="true">&rarr;</span>
-            </a>
-          </div>
-        </nav>
-        <Dialog
-          as="div"
-          /* @ts-ignore */
-          class="lg:hidden"
-          open={mobileMenuOpen}
-          onClose={setMobileMenuOpen}
-        >
-          <div class="fixed inset-0 z-50" />
-          <Dialog.Panel class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
-            <div class="flex items-center justify-between">
-              <a href="#" class="-m-1.5 p-1.5">
-                <span class="sr-only">Your Company</span>
-                <img
-                  class="h-8 w-auto"
-                  src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
-                  alt=""
-                />
-              </a>
-              <button
-                type="button"
-                class="-m-2.5 rounded-md p-2.5 text-gray-700"
-                onClick={() => setMobileMenuOpen(false)}
-              >
-                <span class="sr-only">Close menu</span>
-                <XMarkIcon class="h-6 w-6" aria-hidden="true" />
-              </button>
-            </div>
-            <div class="mt-6 flow-root">
-              <div class="-my-6 divide-y divide-gray-500/10">
-                <div class="space-y-2 py-6">
-                  {navigation.map((item) => (
-                    <a
-                      key={item.name}
-                      href={item.href}
-                      class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
-                    >
-                      {item.name}
-                    </a>
-                  ))}
-                </div>
-                <div class="py-6">
-                  <a
-                    href="#"
-                    class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
-                  >
-                    Log in
-                  </a>
-                </div>
-              </div>
-            </div>
-          </Dialog.Panel>
-        </Dialog>
-      </header>
-
-      <div class="relative isolate px-6 pt-14 lg:px-8">
-        <div
-          class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-          aria-hidden="true"
-        >
-          <div
-            class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-            style={{
-              clipPath:
-                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
-            }}
-          />
-        </div>
-        <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
-          <div class="hidden sm:mb-8 sm:flex sm:justify-center">
-            <div class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
-              Announcing our next round of funding.{" "}
-              <a href="#" class="font-semibold text-indigo-600">
-                <span class="absolute inset-0" aria-hidden="true" />
-                Read more <span aria-hidden="true">&rarr;</span>
-              </a>
-            </div>
-          </div>
-          <div class="text-center">
-            <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
-              Data to enrich your online business
-            </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-600">
-              Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
-              lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
-              fugiat aliqua.
-            </p>
-            <div class="mt-10 flex items-center justify-center gap-x-6">
-              <a
-                href="#"
-                class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-              >
-                Get started
-              </a>
-              <a href="#" class="text-sm font-semibold leading-6 text-gray-900">
-                Learn more <span aria-hidden="true">→</span>
-              </a>
-            </div>
-          </div>
-        </div>
-        <div
-          class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
-          aria-hidden="true"
-        >
-          <div
-            class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
-            style={{
-              clipPath:
-                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}