From 4ee903eb5e639fa0e122a689cc431e8f18ca1197 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 6 Nov 2023 11:54:45 -0300 Subject: aml ui --- packages/aml-backoffice-ui/src/App.tsx | 15 +- packages/aml-backoffice-ui/src/Dashboard.tsx | 564 +++++---------------- packages/aml-backoffice-ui/src/assets/home.svg | 3 + packages/aml-backoffice-ui/src/assets/people.svg | 3 + packages/aml-backoffice-ui/src/hooks/useCases.ts | 11 +- .../aml-backoffice-ui/src/hooks/useSettings.ts | 70 +++ packages/aml-backoffice-ui/src/pages.ts | 52 +- packages/aml-backoffice-ui/src/pages/Cases.tsx | 12 +- .../aml-backoffice-ui/src/pages/CreateAccount.tsx | 36 +- .../src/pages/HandleAccountNotReady.tsx | 3 + packages/aml-backoffice-ui/src/pages/Home.tsx | 5 - packages/aml-backoffice-ui/src/pages/Officer.tsx | 10 +- packages/aml-backoffice-ui/src/pages/Settings.tsx | 5 - .../aml-backoffice-ui/src/pages/UnlockAccount.tsx | 19 +- packages/aml-backoffice-ui/src/pages/Welcome.tsx | 9 - packages/aml-backoffice-ui/src/route.ts | 17 +- packages/aml-backoffice-ui/src/settings.ts | 2 +- packages/aml-backoffice-ui/src/utils/Loading.tsx | 43 -- packages/aml-backoffice-ui/tailwind.config.js | 8 +- 19 files changed, 306 insertions(+), 581 deletions(-) create mode 100644 packages/aml-backoffice-ui/src/assets/home.svg create mode 100644 packages/aml-backoffice-ui/src/assets/people.svg create mode 100644 packages/aml-backoffice-ui/src/hooks/useSettings.ts delete mode 100644 packages/aml-backoffice-ui/src/pages/Home.tsx delete mode 100644 packages/aml-backoffice-ui/src/pages/Settings.tsx delete mode 100644 packages/aml-backoffice-ui/src/pages/Welcome.tsx delete mode 100644 packages/aml-backoffice-ui/src/utils/Loading.tsx (limited to 'packages') diff --git a/packages/aml-backoffice-ui/src/App.tsx b/packages/aml-backoffice-ui/src/App.tsx index 0e29279ff..52c86c273 100644 --- a/packages/aml-backoffice-ui/src/App.tsx +++ b/packages/aml-backoffice-ui/src/App.tsx @@ -1,9 +1,14 @@ import { TranslationProvider } from "@gnu-taler/web-util/browser"; import { h, VNode } from "preact"; -import { ExchangeAmlFrame, Main } from "./Dashboard.js"; +import { ExchangeAmlFrame } from "./Dashboard.js"; import "./scss/main.css"; import { ExchangeApiProvider } from "./context/config.js"; import { getInitialBackendBaseURL } from "./hooks/useBackend.js"; +import { Router } from "./route.js"; +import { Pages } from "./pages.js"; + +const pageList = Object.values(Pages); + export function App(): VNode { const baseUrl = getInitialBackendBaseURL(); @@ -11,7 +16,13 @@ export function App(): VNode { -
+ { + window.location.href = Pages.cases.url + return
not found
; + }} + /> diff --git a/packages/aml-backoffice-ui/src/Dashboard.tsx b/packages/aml-backoffice-ui/src/Dashboard.tsx index bd8a48c45..5d86836d4 100644 --- a/packages/aml-backoffice-ui/src/Dashboard.tsx +++ b/packages/aml-backoffice-ui/src/Dashboard.tsx @@ -1,13 +1,17 @@ -import { useNotifications } from "@gnu-taler/web-util/browser"; +import { Footer, GlobalNotificationsBanner, Header, LangSelector, notifyError, notifyException, useNotifications, useTranslationContext } 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 { useEffect, useErrorBoundary, useState } from "preact/hooks"; import logo from "./assets/logo-2021.svg"; import { Pages } from "./pages.js"; -import { Router, useCurrentLocation } from "./route.js"; +import { PageEntry, Router, useCurrentLocation } from "./route.js"; +import { uiSettings } from "./settings.js"; +import { TranslatedString } from "@gnu-taler/taler-util"; +import { useOfficer } from "./hooks/useOfficer.js"; +import { getAllBooleanSettings, getLabelForSetting, useSettings } from "./hooks/useSettings.js"; function classNames(...classes: string[]) { return classes.filter(Boolean).join(" "); @@ -78,6 +82,7 @@ const versionText = VERSION * writing text with the correct format */ +const pageList = Object.values(Pages); function LeftMenu() { const currentLocation = useCurrentLocation(pageList); @@ -88,9 +93,9 @@ function LeftMenu() { - {/*
  • -
    - Info -
    -     -
    • */} - {/*
  • - - -
    • */} ); } + export function ExchangeAmlFrame({ children, }: { children?: ComponentChildren; }): VNode { - const [sidebarOpen, setSidebarOpen] = useState(false); + const { i18n } = useTranslationContext(); - return ( - - -
    -
    -
    -

    - Exchange AML Backoffice -

    -
    -
    - -
    -
    -     -
    - { - setSidebarOpen(true); - }} - /> - - {children} -
    -     - ); -} + const [error, resetError] = useErrorBoundary(); + + useEffect(() => { + if (error) { + if (error instanceof Error) { + notifyException(i18n.str`Internal error, please report.`, error) + } else { + notifyError(i18n.str`Internal error, please report.`, String(error) as TranslatedString) + } + resetError() + } + }, [error]) -export function Main(): VNode { - return
    -
    - { - return
    not found
    ; + const officer = useOfficer(); + const [settings, updateSettings] = useSettings(); + + return (
    +
    +
    { + officer.lock() }} - /> + sites={[]} + supportedLangs={["en", "es", "de"]} + > +
  • +
    + Preferences +
    +
      + {getAllBooleanSettings().map(set => { + const isOn: boolean = !!settings[set] + return
    • +
      + + + {getLabelForSetting(set, i18n)} + + + +
      +
      • + })} +
    +
    • +
    -
    -} -const pageList = Object.values(Pages); + -function NavigationBar({ - isOpen, - setOpen, - children, -}: { - isOpen: boolean; - setOpen: (v: boolean) => void; - children: ComponentChildren; -}) { - return ( - - - - -
    - +
    + {officer.state !== "ready" ? undefined : + + } +
    +
    + {children} +
    +
    -
    - - - -
    - -
    -     - {children} -     -     -
    -
    -     +
    - - +