diff options
Diffstat (limited to 'packages/exchange-backoffice-ui/src/Dashboard.tsx')
| -rw-r--r-- | packages/exchange-backoffice-ui/src/Dashboard.tsx | 344 |
1 files changed, 190 insertions, 154 deletions
diff --git a/packages/exchange-backoffice-ui/src/Dashboard.tsx b/packages/exchange-backoffice-ui/src/Dashboard.tsx index 9be86c533..9f4a43513 100644 --- a/packages/exchange-backoffice-ui/src/Dashboard.tsx +++ b/packages/exchange-backoffice-ui/src/Dashboard.tsx @@ -23,39 +23,14 @@ import { 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: "#" }, -]; +import { + AbsoluteTime, + Codec, + buildCodecForObject, + codecForAbsoluteTime, + codecForString, +} from "@gnu-taler/taler-util"; +import logo from "./assets/logo-2021.svg"; function classNames(...classes: string[]) { return classes.filter(Boolean).join(" "); @@ -153,7 +128,7 @@ function LeftMenu() { )} aria-hidden="true" /> - Info + Cases </a> </li> <li> @@ -175,7 +150,7 @@ function LeftMenu() { )} aria-hidden="true" /> - Officer + Account </a> </li> </ul> @@ -203,7 +178,7 @@ function LeftMenu() { </li> </ul> </li> */} - <li class="mt-auto"> + {/* <li class="mt-auto"> <a href={Pages.settings.url} class={classNames( @@ -224,7 +199,7 @@ function LeftMenu() { /> Settings </a> - </li> + </li> */} </ul> </nav> ); @@ -237,26 +212,18 @@ export function Dashboard({ }): VNode { const [sidebarOpen, setSidebarOpen] = useState(false); - const logRef = useRef<HTMLPreElement>(null); - function showFormOnSidebar(v: any) { - if (!logRef.current) return; - logRef.current.innerHTML = JSON.stringify(v, undefined, 1); - } return ( <Fragment> <NavigationBar isOpen={sidebarOpen} setOpen={setSidebarOpen}> <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="Taler" - /> + <header class="flex items-center justify-between border-b border-white/5 "> + <h1 class="text-base font-semibold leading-7 text-white"> + Exchange AML Backoffice + </h1> + </header> </div> <LeftMenu /> - <div class="text-white text-sm"> - <pre ref={logRef}></pre> - </div> <Footer /> </div> </NavigationBar> @@ -362,123 +329,193 @@ function NavigationBar({ ); } +export interface Officer { + salt: string; + when: AbsoluteTime; + key: string; +} + +export const codecForOfficer = (): Codec<Officer> => + buildCodecForObject<Officer>() + .property("salt", codecForString()) // FIXME + .property("when", codecForAbsoluteTime) // FIXME + .property("key", codecForString()) + .build("Officer"); + function TopBar({ onOpenSidebar }: { onOpenSidebar: () => void }) { const password = useMemoryStorage("password"); - const officer = useLocalStorage("officer"); + const officer = useLocalStorage("officer", { + codec: codecForOfficer(), + }); 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> - - {/* 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"> - <div class="relative flex flex-1" /> - {/* <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" + <div class="relative flex h-16 justify-between"> + <div class="relative z-10 flex p-2 lg:hidden"> + <button + type="button" + onClick={() => { + onOpenSidebar(); + }} + class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-900" + aria-controls="mobile-menu" + aria-expanded="false" + > + <span class="sr-only">Open menu</span> + <svg + class="block h-6 w-6" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" 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" + <path + stroke-linecap="round" + stroke-linejoin="round" + d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" + /> + </svg> + <svg + class="hidden h-6 w-6" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" aria-hidden="true" + > + <path + stroke-linecap="round" + stroke-linejoin="round" + d="M6 18L18 6M6 6l12 12" + /> + </svg> + </button> + </div> + <div class="relative z-0 flex flex-1 items-center justify-center px-2 sm:absolute sm:inset-0"> + <div class="w-full sm:max-w-xs flex flex-1 items-center justify-center"> + <img + class="h-8 w-auto" + src={logo} + alt="Taler" + style={{ height: 35, margin: 10 }} /> - - {officer.value === undefined ? ( - <div /> - ) : ( - <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" - > - {/* Tom Cook */} - {officer.value?.substring(0, 6)} - </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-48 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"> - <Menu.Item> - {({ active }: { active: boolean }) => ( - <a - // href={item.href} - onClick={() => { - officer.reset(); - password.reset(); - }} - class={classNames( - active ? "bg-gray-50" : "", - "block px-3 py-1 text-sm leading-6 text-gray-900", - )} - > - Forget account - </a> - )} - </Menu.Item> - </Menu.Items> - </Transition> - </Menu> - )} </div> </div> + {/* <div class="relative z-10 flex items-center lg:hidden">dd</div> */} </div> ); } +// 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> + +// {/* 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"> +// <div class="relative flex flex-1" /> +// {/* <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" +// /> + +// {/* {officerName === undefined ? ( +// <div /> +// ) : ( +// <Menu +// as="div" +// 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" +// > +// {officerName} +// </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-48 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"> +// <Menu.Item> +// {({ active }: { active: boolean }) => ( +// <a +// onClick={() => { +// officer.reset(); +// password.reset(); +// }} +// class={classNames( +// active ? "bg-gray-50" : "", +// "block px-3 py-1 text-sm leading-6 text-gray-900", +// )} +// > +// Forget account +// </a> +// )} +// </Menu.Item> +// </Menu.Items> +// </Transition> +// </Menu> +// )} */} +// </div> +// </div> +// </div> +// ); +// } + function Footer() { return ( <footer class="absolute bottom-4"> @@ -502,7 +539,6 @@ function Notifications() { { /* <!-- Global notification live region, render this permanently at the end of the document --> */ } - console.log("render", ns.length); return ( <div aria-live="assertive" |