600 lines
22 KiB
TypeScript
600 lines
22 KiB
TypeScript
import { useNotifications } from "@gnu-taler/web-util/browser";
|
|
import { Dialog, Transition } from "@headlessui/react";
|
|
import { UserIcon, XCircleIcon } from "@heroicons/react/20/solid";
|
|
import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
|
import { InformationCircleIcon } from "@heroicons/react/24/solid";
|
|
import { ComponentChildren, Fragment, VNode, h } from "preact";
|
|
import { useState } from "preact/hooks";
|
|
import logo from "./assets/logo-2021.svg";
|
|
import { Pages } from "./pages.js";
|
|
import { Router, useCurrentLocation } from "./route.js";
|
|
|
|
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 (
|
|
<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"
|
|
/>
|
|
Cases
|
|
</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"
|
|
/>
|
|
Account
|
|
</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,
|
|
}: {
|
|
children?: ComponentChildren;
|
|
}): VNode {
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
|
|
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">
|
|
<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 />
|
|
<Footer />
|
|
</div>
|
|
</NavigationBar>
|
|
<div class="lg:pl-72">
|
|
<TopBar
|
|
onOpenSidebar={() => {
|
|
setSidebarOpen(true);
|
|
}}
|
|
/>
|
|
<Notifications />
|
|
<main class="py-10 px-4 sm:px-6 lg:px-8">
|
|
<div class="mx-auto max-w-3xl">
|
|
<Router
|
|
pageList={pageList}
|
|
onNotFound={() => {
|
|
return <div>not found</div>;
|
|
}}
|
|
/>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
const pageList = Object.values(Pages);
|
|
|
|
function NavigationBar({
|
|
isOpen,
|
|
setOpen,
|
|
children,
|
|
}: {
|
|
isOpen: boolean;
|
|
setOpen: (v: boolean) => void;
|
|
children: ComponentChildren;
|
|
}) {
|
|
return (
|
|
<Fragment>
|
|
<Transition.Root show={isOpen} as={Fragment}>
|
|
<Dialog
|
|
as="div"
|
|
/* @ts-ignore */
|
|
class="relative z-50 lg:hidden"
|
|
onClose={setOpen}
|
|
>
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="transition-opacity ease-linear duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="transition-opacity ease-linear duration-300"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<div class="fixed inset-0 bg-gray-900/80" />
|
|
</Transition.Child>
|
|
|
|
<div class="fixed inset-0 flex">
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="transition ease-in-out duration-300 transform"
|
|
enterFrom="-translate-x-full"
|
|
enterTo="translate-x-0"
|
|
leave="transition ease-in-out duration-300 transform"
|
|
leaveFrom="translate-x-0"
|
|
leaveTo="-translate-x-full"
|
|
>
|
|
<Dialog.Panel class="relative mr-16 flex w-full max-w-xs flex-1">
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-in-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-in-out duration-300"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<div class="absolute left-full top-0 flex w-16 justify-center pt-5">
|
|
<button
|
|
type="button"
|
|
class="-m-2.5 p-2.5"
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
<span class="sr-only">Close sidebar</span>
|
|
<XMarkIcon
|
|
class="h-6 w-6 text-white"
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</Transition.Child>
|
|
{children}
|
|
</Dialog.Panel>
|
|
</Transition.Child>
|
|
</div>
|
|
</Dialog>
|
|
</Transition.Root>
|
|
|
|
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
|
|
{children}
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
function TopBar({ onOpenSidebar }: { onOpenSidebar: () => void }) {
|
|
return (
|
|
<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"
|
|
>
|
|
<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 }}
|
|
/>
|
|
</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">
|
|
<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>
|
|
);
|
|
}
|
|
|
|
function Notifications() {
|
|
const ns = useNotifications();
|
|
|
|
// useEffect(() => {
|
|
// if (ns.length) {
|
|
// // remove notifications after some timeout
|
|
// }
|
|
// }, []);
|
|
{
|
|
/* <!-- Global notification live region, render this permanently at the end of the document --> */
|
|
}
|
|
return (
|
|
<div
|
|
aria-live="assertive"
|
|
class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-50"
|
|
>
|
|
<div class="flex w-full flex-col items-center space-y-4 sm:items-end ">
|
|
{/* <!--
|
|
Notification panel, dynamically insert this into the live region when it needs to be displayed
|
|
|
|
Entering: "transform ease-out duration-300 transition"
|
|
From: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
|
|
To: "translate-y-0 opacity-100 sm:translate-x-0"
|
|
Leaving: "transition ease-in duration-100"
|
|
From: "opacity-100"
|
|
To: "opacity-0"
|
|
--> */}
|
|
{ns.map(({ message, remove }) => {
|
|
switch (message.type) {
|
|
case "error": {
|
|
return (
|
|
<div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 ">
|
|
<div class="p-4 ">
|
|
<div class="flex items-start ">
|
|
<div class="flex-shrink-0">
|
|
<XCircleIcon class="h-6 w-6 text-red-400" />
|
|
</div>
|
|
<div class="ml-3 w-0 flex-1 pt-0.5">
|
|
<p class="text-sm font-medium text-gray-900">
|
|
{message.title}
|
|
</p>
|
|
{message.description && (
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
{message.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div class="ml-4 flex flex-shrink-0">
|
|
<button
|
|
type="button"
|
|
onClick={remove}
|
|
class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
|
>
|
|
<span class="sr-only">Close</span>
|
|
<svg
|
|
class="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
case "info": {
|
|
return (
|
|
<div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 ">
|
|
<div class="p-4 ">
|
|
<div class="flex items-start ">
|
|
<div class="flex-shrink-0">
|
|
<CheckCircleIcon class="h-6 w-6 text-green-400" />
|
|
</div>
|
|
<div class="ml-3 w-0 flex-1 pt-0.5">
|
|
<p class="text-sm font-medium text-gray-900">
|
|
{message.title}
|
|
</p>
|
|
</div>
|
|
<div class="ml-4 flex flex-shrink-0">
|
|
<button
|
|
type="button"
|
|
onClick={remove}
|
|
class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
|
>
|
|
<span class="sr-only">Close</span>
|
|
<svg
|
|
class="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|