import { Dialog, Menu, Transition } from "@headlessui/react"; import { ChevronDownIcon, MagnifyingGlassIcon, UserIcon, XCircleIcon, } from "@heroicons/react/20/solid"; import { Bars3Icon, BellIcon, CheckCircleIcon, Cog6ToothIcon, XMarkIcon, } from "@heroicons/react/24/outline"; import { ComponentChildren, Fragment, VNode, h } from "preact"; import { ForwardedRef, forwardRef } from "preact/compat"; import { useEffect, useRef, useState } from "preact/hooks"; import { Pages } from "./pages.js"; import { Router, useCurrentLocation } from "./route.js"; import { InformationCircleIcon } from "@heroicons/react/24/solid"; import { useLocalStorage, useMemoryStorage, useNotifications, } from "@gnu-taler/web-util/browser"; /** * 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 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 */ const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined; const versionText = VERSION ? GIT_HASH ? `v${VERSION} (${GIT_HASH.substring(0, 8)})` : VERSION : ""; /** * 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 * * 5.- date field should have the calendar icon clickable so the user can select date without * writing text with the correct format */ function LeftMenu() { const currentLocation = useCurrentLocation(pageList); return ( ); } export function Dashboard({ children, }: { children?: ComponentChildren; }): VNode { const [sidebarOpen, setSidebarOpen] = useState(false); const logRef = useRef(null); function showFormOnSidebar(v: any) { if (!logRef.current) return; logRef.current.innerHTML = JSON.stringify(v, undefined, 1); } return (
Taler 

          

          

        

      
      

         {
            setSidebarOpen(true);
          }}
        />
        
        

          

             {
                return 
not found
;
              }}
            />
          

        

      

    
  );
}

const pageList = Object.values(Pages);

function NavigationBar({
  isOpen,
  setOpen,
  children,
}: {
  isOpen: boolean;
  setOpen: (v: boolean) => void;
  children: ComponentChildren;
}) {
  return (
    
      
        
          
            

          

          

            
              
                
                  

                    
                  

                
                {children}
              
            
          

        

      

      
    
  );
}

function TopBar({ onOpenSidebar }: { onOpenSidebar: () => void }) {
  const password = useMemoryStorage("password");
  const officer = useLocalStorage("officer");

  return (
    

      

      {/* Separator */}