1 files changed, 99 insertions, 4 deletions

diff --git a/packages/exchange-backoffice-ui/src/Dashborad.tsx b/packages/exchange-backoffice-ui/src/Dashborad.tsx
index 3ad2b7745..f31160fee 100644
--- a/packages/exchange-backoffice-ui/src/Dashborad.tsx
+++ b/packages/exchange-backoffice-ui/src/Dashborad.tsx
@@ -20,6 +20,40 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import { NiceForm } from "./NiceForm.js";
 import { v1 as form_902_1e_v1 } from "./forms/902_1e.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";
+import { v1 as form_902_13e_v1 } from "./forms/902_13e.js";
+import { v1 as form_902_15e_v1 } from "./forms/902_15e.js";
+import { v1 as form_902_9e_v1 } from "./forms/902_9e.js";
+import { v1 as form_902_5e_v1 } from "./forms/902_5e.js";
+import { v1 as form_902_4e_v1 } from "./forms/902_4e.js";
+
+/**
+ * references between forms
+ *
+ * 902.1e
+ *  --> 902.11 (operational legal entity or partnership)
+ *  --> 902.12 (a foundation)
+ *  --> 902.13 (a trust)
+ *  --> 902.15 (life insurance policy)
+ *  --> 902.9 (all other cases)
+ *  --> 902.5 (cash transaction with no customer profile)
+ *  --> 902.4 (risk profile)
+ *
+ * 902.11
+ *  --> 902.9 (beneficial owner in fiduciary holding assets)
+ *
+ * 902.12
+ *
+ * 902.13
+ *
+ * 902.15
+ *
+ * 902.9
+ *
+ * 902.5
+ *
+ * 902.4
+ */
 
 const navigation = [
   {
@@ -32,6 +66,36 @@ const navigation = [
     icon: DocumentDuplicateIcon,
     impl: form_902_11e_v1,
   },
+  {
+    name: "Foundations (902.12e)",
+    icon: DocumentDuplicateIcon,
+    impl: form_902_12e_v1,
+  },
+  {
+    name: "Declaration for trusts (902.13e)",
+    icon: DocumentDuplicateIcon,
+    impl: form_902_13e_v1,
+  },
+  {
+    name: "WIP (902.15e)",
+    icon: DocumentDuplicateIcon,
+    impl: form_902_15e_v1,
+  },
+  {
+    name: "WIP (902.9e)",
+    icon: DocumentDuplicateIcon,
+    impl: form_902_9e_v1,
+  },
+  {
+    name: "WIP (902.5e)",
+    icon: DocumentDuplicateIcon,
+    impl: form_902_5e_v1,
+  },
+  {
+    name: "WIP (902.4e)",
+    icon: DocumentDuplicateIcon,
+    impl: form_902_4e_v1,
+  },
 ];
 const teams = [
   { id: 1, name: "Heroicons", href: "#", initial: "H", current: false },
@@ -69,15 +133,47 @@ function classNames(...classes: string[]) {
  * @returns
  */
 
+/**
+ * TO BE FIXED:
+ *
+ * 1.- when the form change to other form and both form share the same structure
+ * the same input component may be rendered in the same place,
+ * since input are uncontrolled the are not re-rendered and since they are
+ * uncontrolled it will keep the value of the previous form.
+ * One solutions could be to remove the form when unloading and when the new
+ * form load it will start without previous vdom, preventing the cache
+ * to create this behavior.
+ * Other solutions could be using IDs in the fields that are constructed
+ * with the ID of the form, so two fields of different form will need to re-render
+ * cleaning up the state of the previous form.
+ *
+ * 2.- currently the design prop and the behavior prop of the flexible form
+ * are two side of the same coin. From the design point of view, it is important
+ * to design the form in a list-of-field manner and there may be additional
+ * content that is not directly mapped to the form structure (object)
+ * So maybe we want to change the current shape so the computation of the state
+ * of the form is in a field level, but this computation required the field value and
+ * the whole form values and state (since one field may be disabled/hidden) because
+ * of the value of other field.
+ *
+ * 3.- given the previous requirement, maybe the name of the field of the form could be
+ * a function (P: F -> V) where F is the form (or parent object) and V is the type of the
+ * property. That will help with the typing of the forms props
+ */
+
 export function Dashboard({
   children,
 }: {
   children?: ComponentChildren;
 }): VNode {
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [selectedForm, setSelectedForm] = useState(1);
+  const [selectedForm, setSelectedForm] = useState(3);
+  function changeForm(next: number) {
+    setSelectedForm(next);
+  }
   const logRef = useRef<HTMLPreElement>(null);
   const storedValue = {
+    fullName: "the logged fullName",
     when: {
       t_ms: new Date().getTime(),
     },
@@ -92,7 +188,6 @@ export function Dashboard({
   });
 
   const showingFrom = navigation[selectedForm];
-  console.log(showingFrom);
   return (
     <>
       <div>
@@ -164,7 +259,7 @@ export function Dashboard({
                             {navigation.map((item, idx) => (
                               <li
                                 key={item.name}
-                                onClick={(e) => setSelectedForm(idx)}
+                                onClick={(e) => changeForm(idx)}
                               >
                                 <a
                                   href="#"
@@ -250,7 +345,7 @@ export function Dashboard({
                 <li>
                   <ul role="list" class="-mx-2 space-y-1">
                     {navigation.map((item, idx) => (
-                      <li key={item.name} onClick={(e) => setSelectedForm(idx)}>
+                      <li key={item.name} onClick={(e) => changeForm(idx)}>
                         <a
                           href="#"
                           class={classNames(