diff options
author | Sebastian <sebasjm@gmail.com> | 2023-06-05 10:04:09 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-06-05 10:04:09 -0300 |
commit | c680f5aa71b08e978444df07f93c381f9d47ab82 (patch) | |
tree | 81903fac003bb1e202cf69551e06ba41a6e960a5 /packages/aml-backoffice-ui/src/pages/Cases.tsx | |
parent | df53866e6b148ea5fd2ab57e906a4aa36b535ed3 (diff) | |
download | wallet-core-c680f5aa71b08e978444df07f93c381f9d47ab82.tar.xz |
rename aml
Diffstat (limited to 'packages/aml-backoffice-ui/src/pages/Cases.tsx')
-rw-r--r-- | packages/aml-backoffice-ui/src/pages/Cases.tsx | 288 |
1 files changed, 288 insertions, 0 deletions
diff --git a/packages/aml-backoffice-ui/src/pages/Cases.tsx b/packages/aml-backoffice-ui/src/pages/Cases.tsx new file mode 100644 index 000000000..28b9d2a88 --- /dev/null +++ b/packages/aml-backoffice-ui/src/pages/Cases.tsx @@ -0,0 +1,288 @@ +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> + ); +} |