diff options
Diffstat (limited to 'packages/exchange-backoffice-ui/src/Dashboard.tsx')
| -rw-r--r-- | packages/exchange-backoffice-ui/src/Dashboard.tsx | 388 |
1 files changed, 144 insertions, 244 deletions
diff --git a/packages/exchange-backoffice-ui/src/Dashboard.tsx b/packages/exchange-backoffice-ui/src/Dashboard.tsx index 80f33954a..9a0ba41d5 100644 --- a/packages/exchange-backoffice-ui/src/Dashboard.tsx +++ b/packages/exchange-backoffice-ui/src/Dashboard.tsx @@ -2,27 +2,20 @@ import { Dialog, Menu, Transition } from "@headlessui/react"; import { ChevronDownIcon, MagnifyingGlassIcon, + UserIcon, } from "@heroicons/react/20/solid"; import { Bars3Icon, BellIcon, Cog6ToothIcon, - DocumentDuplicateIcon, XMarkIcon, } from "@heroicons/react/24/outline"; import { ComponentChildren, Fragment, VNode, h } from "preact"; import { ForwardedRef, forwardRef } from "preact/compat"; import { useRef, useState } from "preact/hooks"; -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"; import { Pages } from "./pages.js"; import { Router, useCurrentLocation } from "./route.js"; +import { InformationCircleIcon } from "@heroicons/react/24/solid"; /** * references between forms @@ -52,53 +45,6 @@ import { Router, useCurrentLocation } from "./route.js"; * 902.4 */ -export const allForms = [ - { - 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: "#" }, @@ -135,7 +81,7 @@ const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined; const versionText = VERSION ? GIT_HASH - ? `Version ${VERSION} (${GIT_HASH.substring(0, 8)})` + ? `v${VERSION} (${GIT_HASH.substring(0, 8)})` : VERSION : ""; @@ -173,6 +119,110 @@ const versionText = VERSION * writing text with the correct format */ +function LeftMenu() { + const currentLocation = useCurrentLocation(pageList); + + return ( + <nav class="flex flex-1 flex-col"> + <ul role="list" class="flex flex-1 flex-col gap-y-7"> + <li> + <ul role="list" class="-mx-2 space-y-1"> + <li> + <a + href={Pages.info.url} + class={classNames( + Pages.info.url === currentLocation?.path + ? "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", + )} + > + <InformationCircleIcon + class={classNames( + Pages.info.url === currentLocation?.path + ? "text-white" + : "text-indigo-200 group-hover:text-white", + "h-6 w-6 shrink-0", + )} + aria-hidden="true" + /> + Info + </a> + </li> + <li> + <a + href={Pages.officer.url} + class={classNames( + Pages.officer.url === currentLocation?.path + ? "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", + )} + > + <UserIcon + class={classNames( + Pages.officer.url === currentLocation?.path + ? "text-white" + : "text-indigo-200 group-hover:text-white", + "h-6 w-6 shrink-0", + )} + aria-hidden="true" + /> + Officer + </a> + </li> + </ul> + </li> + {/* <li> + <div class="text-xs font-semibold leading-6 text-indigo-200"> + Info + </div> + <ul role="list" class="-mx-2 mt-2 space-y-1"> + <li> + <a + href={Pages.info.url} + class={classNames( + Pages.info.url === currentLocation?.path + ? "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", + )} + > + <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white"> + asd + </span> + <span class="truncate">qwe</span> + </a> + </li> + </ul> + </li> */} + <li class="mt-auto"> + <a + href={Pages.settings.url} + class={classNames( + Pages.settings.url === currentLocation?.path + ? "bg-indigo-700 text-white" + : "text-indigo-200 hover:text-white hover:bg-indigo-700", + "group -mx-2 flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold", + )} + > + <Cog6ToothIcon + class={classNames( + Pages.officer.url === currentLocation?.path + ? "text-white" + : "text-indigo-200 group-hover:text-white", + "h-6 w-6 shrink-0", + )} + aria-hidden="true" + /> + Settings + </a> + </li> + </ul> + </nav> + ); +} + export function Dashboard({ children, }: { @@ -185,11 +235,24 @@ export function Dashboard({ if (!logRef.current) return; logRef.current.innerHTML = JSON.stringify(v, undefined, 1); } - - const Nav = forwardRef(NavigationBar); return ( <Fragment> - <Nav ref={logRef} isOpen={sidebarOpen} setOpen={setSidebarOpen} /> + <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" + /> + </div> + <LeftMenu /> + <div class="text-white text-sm"> + <pre ref={logRef}></pre> + </div> + <Footer /> + </div> + </NavigationBar> <div class="lg:pl-72"> <TopBar onOpenSidebar={() => { @@ -206,8 +269,6 @@ export function Dashboard({ /> </div> </main> - - <Footer /> </div> </Fragment> ); @@ -215,11 +276,15 @@ export function Dashboard({ const pageList = Object.values(Pages); -function NavigationBar( - { isOpen, setOpen }: { isOpen: boolean; setOpen: (v: boolean) => void }, - logRef: ForwardedRef<HTMLPreElement>, -) { - const currentLocation = useCurrentLocation(pageList); +function NavigationBar({ + isOpen, + setOpen, + children, +}: { + isOpen: boolean; + setOpen: (v: boolean) => void; + children: ComponentChildren; +}) { return ( <Fragment> <Transition.Root show={isOpen} as={Fragment}> @@ -275,87 +340,7 @@ function NavigationBar( </button> </div> </Transition.Child> - <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="Your Company" - /> - </div> - <nav class="flex flex-1 flex-col"> - <ul role="list" class="flex flex-1 flex-col gap-y-7"> - <li> - <ul role="list" class="-mx-2 space-y-1"> - {allForms.map((item, idx) => { - const url = Pages.form.url({ number: String(idx) }); - return ( - <li key={item.name}> - <a - href={url} - class={classNames( - url === currentLocation?.path - ? "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", - )} - > - <item.icon - class={classNames( - url === currentLocation?.path - ? "text-white" - : "text-indigo-200 group-hover:text-white", - "h-6 w-6 shrink-0", - )} - aria-hidden="true" - /> - {item.name} - </a> - </li> - ); - })} - </ul> - </li> - {/* <li> - <div class="text-xs font-semibold leading-6 text-indigo-200"> - Your teams - </div> - <ul role="list" class="-mx-2 mt-2 space-y-1"> - {teams.map((team) => ( - <li key={team.name}> - <a - href={team.href} - class={classNames( - team.current - ? "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", - )} - > - <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white"> - {team.initial} - </span> - <span class="truncate">{team.name}</span> - </a> - </li> - ))} - </ul> - </li> */} - <li class="mt-auto"> - <a - href={Pages.settings.url} - class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white" - > - <Cog6ToothIcon - class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white" - aria-hidden="true" - /> - Settings - </a> - </li> - </ul> - </nav> - </div> + {children} </Dialog.Panel> </Transition.Child> </div> @@ -363,90 +348,7 @@ function NavigationBar( </Transition.Root> <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col"> - <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="Your Company" - /> - </div> - <nav class="flex flex-1 flex-col"> - <ul role="list" class="flex flex-1 flex-col gap-y-7"> - <li> - <ul role="list" class="-mx-2 space-y-1"> - {allForms.map((item, idx) => { - const url = Pages.form.url({ number: String(idx) }); - return ( - <li key={item.name}> - <a - href={url} - class={classNames( - url === currentLocation?.path - ? "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", - )} - > - <item.icon - class={classNames( - url === currentLocation?.path - ? "text-white" - : "text-indigo-200 group-hover:text-white", - "h-6 w-6 shrink-0", - )} - aria-hidden="true" - /> - {item.name} - </a> - </li> - ); - })} - </ul> - </li> - {/* <li> - <div class="text-xs font-semibold leading-6 text-indigo-200"> - Your teams - </div> - <ul role="list" class="-mx-2 mt-2 space-y-1"> - {teams.map((team) => ( - <li key={team.name}> - <a - href={team.href} - class={classNames( - team.current - ? "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", - )} - > - <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white"> - {team.initial} - </span> - <span class="truncate">{team.name}</span> - </a> - </li> - ))} - </ul> - </li> */} - <li class="mt-auto"> - <a - href={Pages.settings.url} - class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white" - > - <Cog6ToothIcon - class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white" - aria-hidden="true" - /> - Settings - </a> - </li> - </ul> - </nav> - <div class="text-white text-sm"> - <pre ref={logRef}></pre> - </div> - </div> + {children} </div> </Fragment> ); @@ -468,7 +370,8 @@ function TopBar({ onOpenSidebar }: { onOpenSidebar: () => void }) { <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"> - <form class="relative flex flex-1" action="#" method="GET"> + <div class="relative flex flex-1" /> + {/* <form class="relative flex flex-1" action="#" method="GET"> <label htmlFor="search-field" class="sr-only"> Search </label> @@ -483,15 +386,15 @@ function TopBar({ onOpenSidebar }: { onOpenSidebar: () => void }) { type="search" name="search" /> - </form> + </form> */} <div class="flex items-center gap-x-4 lg:gap-x-6"> - <button + {/* <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> + </button> */} {/* Separator */} <div @@ -561,14 +464,11 @@ function TopBar({ onOpenSidebar }: { onOpenSidebar: () => void }) { function Footer() { return ( - <footer class="bg-white"> - <div class="mx-auto px-4 py-2 md:flex md:items-center md:justify-between lg:px-8"> - <div class="mt-8 md:order-1 md:mt-0"> - <p class="text-center text-xs leading-5 text-gray-500"> - Copyright © 2014—2023 Taler Systems SA. - {versionText} - </p> - </div> + <footer class="absolute bottom-4"> + <div class="mt-8 md:order-1 md:mt-0"> + <p class="text-xs leading-5 text-gray-300"> + Taler Systems SA. {versionText} + </p> </div> </footer> ); |