diff options
Diffstat (limited to 'packages/exchange-backoffice-ui/src/pages/Cases.tsx')
-rw-r--r-- | packages/exchange-backoffice-ui/src/pages/Cases.tsx | 288 |
1 files changed, 0 insertions, 288 deletions
diff --git a/packages/exchange-backoffice-ui/src/pages/Cases.tsx b/packages/exchange-backoffice-ui/src/pages/Cases.tsx deleted file mode 100644 index 28b9d2a88..000000000 --- a/packages/exchange-backoffice-ui/src/pages/Cases.tsx +++ /dev/null @@ -1,288 +0,0 @@ -import { VNode, h } from "preact"; -import { Pages } from "../pages.js"; -import { AmlRecords, AmlState } from "../types.js"; -import { InputChoiceHorizontal } from "../handlers/InputChoiceHorizontal.js"; -import { createNewForm } from "../handlers/forms.js"; -import { TranslatedString } from "@gnu-taler/taler-util"; -import { amlStateConverter as amlStateConverter } from "./CaseDetails.js"; -import { useState } from "preact/hooks"; -import { HandleAccountNotReady } from "./HandleAccountNotReady.js"; -import { useOfficer } from "../hooks/useOfficer.js"; - -const response: AmlRecords = { - records: [ - { - current_state: 0, - h_payto: "QWEQWEQWEQWEWQE", - rowid: 1, - threshold: "USD 100", - }, - { - current_state: 1, - h_payto: "ASDASDASD", - rowid: 1, - threshold: "USD 100", - }, - { - current_state: 2, - h_payto: "ZXCZXCZXCXZC", - rowid: 1, - threshold: "USD 1000", - }, - { - current_state: 0, - h_payto: "QWEQWEQWEQWEWQE", - rowid: 1, - threshold: "USD 100", - }, - { - current_state: 1, - h_payto: "ASDASDASD", - rowid: 1, - threshold: "USD 100", - }, - { - current_state: 2, - h_payto: "ZXCZXCZXCXZC", - rowid: 1, - threshold: "USD 1000", - }, - ].map((e, idx) => { - e.rowid = idx; - e.threshold = `${e.threshold}${idx}`; - return e; - }), -}; - -function doFilter( - list: typeof response.records, - filter: AmlState | undefined, -): typeof response.records { - if (filter === undefined) return list; - return list.filter((r) => r.current_state === filter); -} - -export function Cases() { - const officer = useOfficer(); - if (officer.state !== "ready") { - return <HandleAccountNotReady officer={officer} />; - } - const form = createNewForm<{ - state: AmlState; - }>(); - const initial = { state: AmlState.pending }; - const [list, setList] = useState(doFilter(response.records, initial.state)); - return ( - <div> - <div class="px-4 sm:px-6 lg:px-8"> - <div class="sm:flex sm:items-center"> - <div class="sm:flex-auto"> - <h1 class="text-base font-semibold leading-6 text-gray-900"> - Cases - </h1> - <p class="mt-2 text-sm text-gray-700"> - A list of all the account with the status - </p> - </div> - <form.Provider - initialValue={initial} - onUpdate={(v) => { - setList(doFilter(response.records, v.state)); - }} - onSubmit={(v) => {}} - > - <form.InputChoiceHorizontal - name="state" - label={"Filter" as TranslatedString} - converter={amlStateConverter} - choices={[ - { - label: "Pending" as TranslatedString, - value: AmlState.pending, - }, - { - label: "Frozen" as TranslatedString, - value: AmlState.frozen, - }, - { - label: "Normal" as TranslatedString, - value: AmlState.normal, - }, - ]} - /> - </form.Provider> - </div> - <div class="mt-8 flow-root"> - <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> - <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> - <Pagination /> - <table class="min-w-full divide-y divide-gray-300"> - <thead> - <tr> - <th - scope="col" - class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" - > - Account Id - </th> - <th - scope="col" - class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" - > - Status - </th> - <th - scope="col" - class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" - > - Threshold - </th> - </tr> - </thead> - <tbody class="divide-y divide-gray-200 bg-white"> - {list.map((r) => { - return ( - <tr class="hover:bg-gray-100 "> - <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500 "> - <div class="text-gray-900"> - <a - href={Pages.details.url({ account: r.h_payto })} - class="text-indigo-600 hover:text-indigo-900" - > - {r.h_payto} - </a> - </div> - </td> - <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500"> - {((state: AmlState): VNode => { - switch (state) { - case AmlState.normal: { - return ( - <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20"> - Normal - </span> - ); - } - case AmlState.pending: { - return ( - <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-green-600/20"> - Pending - </span> - ); - } - case AmlState.frozen: { - return ( - <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-green-600/20"> - Frozen - </span> - ); - } - } - })(r.current_state)} - </td> - <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-900"> - {r.threshold} - </td> - </tr> - ); - })} - </tbody> - </table> - <Pagination /> - </div> - </div> - </div> - </div> - </div> - ); -} - -function Pagination() { - return ( - <nav class="flex items-center justify-between px-4 sm:px-0"> - <div class="-mt-px flex w-0 flex-1"> - <a - href="#" - class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" - > - <svg - class="mr-3 h-5 w-5 text-gray-400" - viewBox="0 0 20 20" - fill="currentColor" - aria-hidden="true" - > - <path - fill-rule="evenodd" - d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z" - clip-rule="evenodd" - /> - </svg> - Previous - </a> - </div> - <div class="hidden md:-mt-px md:flex"> - <a - href="#" - class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" - > - 1 - </a> - {/* <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" --> */} - <a - href="#" - class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500" - aria-current="page" - > - 2 - </a> - <a - href="#" - class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" - > - 3 - </a> - <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500"> - ... - </span> - <a - href="#" - class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" - > - 8 - </a> - <a - href="#" - class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" - > - 9 - </a> - <a - href="#" - class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" - > - 10 - </a> - </div> - <div class="-mt-px flex w-0 flex-1 justify-end"> - <a - href="#" - class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" - > - Next - <svg - class="ml-3 h-5 w-5 text-gray-400" - viewBox="0 0 20 20" - fill="currentColor" - aria-hidden="true" - > - <path - fill-rule="evenodd" - d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" - clip-rule="evenodd" - /> - </svg> - </a> - </div> - </nav> - ); -} |