From f4f798b1b4bae3073b669a562fd2b3a7880dffc3 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 15 May 2023 11:45:23 -0300
Subject: second form

---
 packages/exchange-backoffice-ui/src/Dashborad.tsx | 80 +++++++++++++++--------
 1 file changed, 52 insertions(+), 28 deletions(-)

(limited to 'packages/exchange-backoffice-ui/src/Dashborad.tsx')

diff --git a/packages/exchange-backoffice-ui/src/Dashborad.tsx b/packages/exchange-backoffice-ui/src/Dashborad.tsx
index a8bac8ece..3ad2b7745 100644
--- a/packages/exchange-backoffice-ui/src/Dashborad.tsx
+++ b/packages/exchange-backoffice-ui/src/Dashborad.tsx
@@ -16,16 +16,22 @@ import {
   ChevronDownIcon,
   MagnifyingGlassIcon,
 } from "@heroicons/react/20/solid";
-import { useRef, useState } from "preact/hooks";
+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";
 
 const navigation = [
-  { name: "Dashboard", href: "#", icon: HomeIcon, current: true },
-  { name: "Team", href: "#", icon: UsersIcon, current: false },
-  { name: "Projects", href: "#", icon: FolderIcon, current: false },
-  { name: "Calendar", href: "#", icon: CalendarIcon, current: false },
-  { name: "Documents", href: "#", icon: DocumentDuplicateIcon, current: false },
-  { name: "Reports", href: "#", icon: ChartPieIcon, current: false },
+  {
+    name: "Identification form (902.1e)",
+    icon: DocumentDuplicateIcon,
+    impl: form_902_1e_v1,
+  },
+  {
+    name: "Operational legal entity or partnership (902.11e)",
+    icon: DocumentDuplicateIcon,
+    impl: form_902_11e_v1,
+  },
 ];
 const teams = [
   { id: 1, name: "Heroicons", href: "#", initial: "H", current: false },
@@ -69,8 +75,24 @@ export function Dashboard({
   children?: ComponentChildren;
 }): VNode {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [selectedForm, setSelectedForm] = useState(1);
   const logRef = useRef<HTMLPreElement>(null);
+  const storedValue = {
+    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 showingFrom = navigation[selectedForm];
+  console.log(showingFrom);
   return (
     <>
       <div>
@@ -139,12 +161,15 @@ export function Dashboard({
                       <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) => (
-                              <li key={item.name}>
+                            {navigation.map((item, idx) => (
+                              <li
+                                key={item.name}
+                                onClick={(e) => setSelectedForm(idx)}
+                              >
                                 <a
-                                  href={item.href}
+                                  href="#"
                                   class={classNames(
-                                    item.current
+                                    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",
@@ -152,7 +177,7 @@ export function Dashboard({
                                 >
                                   <item.icon
                                     class={classNames(
-                                      item.current
+                                      idx === selectedForm
                                         ? "text-white"
                                         : "text-indigo-200 group-hover:text-white",
                                       "h-6 w-6 shrink-0",
@@ -165,7 +190,7 @@ export function Dashboard({
                             ))}
                           </ul>
                         </li>
-                        <li>
+                        {/* <li>
                           <div class="text-xs font-semibold leading-6 text-indigo-200">
                             Your teams
                           </div>
@@ -189,7 +214,7 @@ export function Dashboard({
                               </li>
                             ))}
                           </ul>
-                        </li>
+                        </li> */}
                         <li class="mt-auto">
                           <a
                             href="#"
@@ -220,19 +245,16 @@ export function Dashboard({
                 alt="Your Company"
               />
             </div>
-            <div class="text-white text-sm">
-              <pre ref={logRef}></pre>
-            </div>
             <nav class="flex flex-1 flex-col">
               <ul role="list" class="flex flex-1 flex-col gap-y-7">
-                {/* <li>
+                <li>
                   <ul role="list" class="-mx-2 space-y-1">
-                    {navigation.map((item) => (
-                      <li key={item.name}>
+                    {navigation.map((item, idx) => (
+                      <li key={item.name} onClick={(e) => setSelectedForm(idx)}>
                         <a
-                          href={item.href}
+                          href="#"
                           class={classNames(
-                            item.current
+                            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",
@@ -240,7 +262,7 @@ export function Dashboard({
                         >
                           <item.icon
                             class={classNames(
-                              item.current
+                              idx === selectedForm
                                 ? "text-white"
                                 : "text-indigo-200 group-hover:text-white",
                               "h-6 w-6 shrink-0",
@@ -252,7 +274,7 @@ export function Dashboard({
                       </li>
                     ))}
                   </ul>
-                </li> */}
+                </li>
                 {/* <li>
                   <div class="text-xs font-semibold leading-6 text-indigo-200">
                     Your teams
@@ -292,6 +314,9 @@ export function Dashboard({
                 </li>
               </ul>
             </nav>
+            <div class="text-white text-sm">
+              <pre ref={logRef}></pre>
+            </div>
           </div>
         </div>
 
@@ -403,10 +428,9 @@ export function Dashboard({
             <div class="px-4 sm:px-6 lg:px-8">
               <div class="mx-auto max-w-3xl">
                 <NiceForm
-                  onUpdate={(v) => {
-                    if (!logRef.current) return;
-                    logRef.current.innerHTML = JSON.stringify(v, undefined, 1);
-                  }}
+                  initial={storedValue}
+                  form={showingFrom.impl as any}
+                  onUpdate={showFormOnSidebar}
                 />
               </div>
             </div>
-- 
cgit v1.2.3