import { Dialog, Menu, Transition } from "@headlessui/react"; import { ChevronDownIcon, MagnifyingGlassIcon, } from "@heroicons/react/20/solid"; import { Bars3Icon, BellIcon, Cog6ToothIcon, DocumentDuplicateIcon, XMarkIcon, } from "@heroicons/react/24/outline"; import { ComponentChildren, Fragment, VNode, h } from "preact"; import { useEffect, 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"; 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_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"; /** * 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 = [ { 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, }, { 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: "Information on life insurance policies (902.15e)", icon: DocumentDuplicateIcon, impl: form_902_15e_v1, }, { name: "Declaration of beneficial owner (902.9e)", icon: DocumentDuplicateIcon, impl: form_902_9e_v1, }, { name: "Customer profile (902.5e)", icon: DocumentDuplicateIcon, impl: form_902_5e_v1, }, { name: "Risk profile (902.4e)", icon: DocumentDuplicateIcon, impl: form_902_4e_v1, }, ]; const teams = [ { id: 1, name: "Heroicons", href: "#", initial: "H", current: false }, { id: 2, name: "Tailwind Labs", href: "#", initial: "T", current: false }, { id: 3, name: "Workcation", href: "#", initial: "W", current: false }, ]; const userNavigation = [ { name: "Your profile", href: "#" }, { name: "Sign out", href: "#" }, ]; function classNames(...classes: string[]) { return classes.filter(Boolean).join(" "); } /** * mapping route to view * not found (error page) * nested, index element, relative routes * link interception * form POST interception, call action * fromData => Object.fromEntries * segments in the URL * navigationState: idle, submitting, loading * form GET interception: does a navigateTo * form GET Sync: * 1.- back after submit: useEffect to sync URL to form * 2.- refresh after submit: input default value * useSubmit for form submission onChange, history replace * * post form without redirect * * * @param param0 * @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 * * 4.- tooltip are not placed correctly: the arrow should point the question mark * and the text area should be bigger */ export function Dashboard({ children, }: { children?: ComponentChildren; }): VNode { const [sidebarOpen, setSidebarOpen] = useState(false); const [selectedForm, setSelectedForm] = useState(7); function changeForm(next: number) { setSelectedForm(next); } const logRef = useRef(null); const storedValue = { fullName: "the logged fullName", when: { t_ms: new Date().getTime(), }, originOfAssets: { currency: "usd", }, }; 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]; return ( <>
Your Company
{/* Separator */}
); }