diff options
Diffstat (limited to 'packages/demobank-ui')
-rw-r--r-- | packages/demobank-ui/src/components/Transactions/views.tsx | 59 | ||||
-rw-r--r-- | packages/demobank-ui/src/pages/PaymentOptions.tsx | 2 | ||||
-rw-r--r-- | packages/demobank-ui/src/pages/admin/Home.tsx | 5 |
3 files changed, 42 insertions, 24 deletions
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx index 6303037a1..b11888320 100644 --- a/packages/demobank-ui/src/components/Transactions/views.tsx +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -14,10 +14,10 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { h, VNode } from "preact"; +import { Fragment, h, VNode } from "preact"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { State } from "./index.js"; -import { format } from "date-fns"; +import { format, isToday } from "date-fns"; import { Amounts } from "@gnu-taler/taler-util"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { @@ -32,6 +32,16 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode { export function ReadyView({ transactions }: State.Ready): VNode { const { i18n } = useTranslationContext(); + const txByDate = transactions.reduce((prev, cur) => { + const d = cur.when.t_ms === "never" + ? "" + : format(cur.when.t_ms, "dd/MM/yyyy") + if (!prev[d]) { + prev[d] = [] + } + prev[d].push(cur) + return prev + }, {} as Record<string, typeof transactions>) return ( <div class="px-4 mt-4"> <div class="sm:flex sm:items-center"> @@ -50,25 +60,34 @@ export function ReadyView({ transactions }: State.Ready): VNode { </tr> </thead> <tbody> - {transactions.map((item, idx) => { - return ( - <tr key={idx}> - <td class="relative py-2 pl-2 pr-2 text-sm "> - <div class="font-medium text-gray-900">{item.when.t_ms === "never" - ? "" - : format(item.when.t_ms, "dd/MM/yyyy HH:mm:ss")}</div> - </td> - <td class="px-3 py-3.5 text-sm text-gray-500">{item.negative ? "-" : ""} - {item.amount ? ( - `${Amounts.stringifyValue(item.amount)} ${item.amount.currency - }` - ) : ( - <span style={{ color: "grey" }}><{i18n.str`invalid value`}></span> - )}</td> - <td class="px-3 py-3.5 text-sm text-gray-500">{item.counterpart}</td> - <td class="px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td> + {Object.entries(txByDate).map(([date, txs], idx) => { + return <Fragment> + <tr class="border-t border-gray-200"> + <th colSpan={4} scope="colgroup" class="bg-gray-50 py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-3"> + {date} + </th> </tr> - ); + {txs.map(item => { + return (<tr key={idx}> + <td class="relative py-2 pl-2 pr-2 text-sm "> + <div class="font-medium text-gray-900">{item.when.t_ms === "never" + ? "" + : format(item.when.t_ms, "HH:mm:ss")}</div> + </td> + <td data-negative={item.negative ? "true" : "false"} + class="px-3 py-3.5 text-sm text-gray-500 data-[negative=false]:text-green-600 data-[negative=true]:text-red-600"> + {item.negative ? "-" : ""} + {item.amount ? ( + `${Amounts.stringifyValue(item.amount)} ${item.amount.currency + }` + ) : ( + <span style={{ color: "grey" }}><{i18n.str`invalid value`}></span> + )}</td> + <td class="px-3 py-3.5 text-sm text-gray-500">{item.counterpart}</td> + <td class="px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td> + </tr>) + })} + </Fragment> })} </tbody> </table> diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index 5cb09a5d4..1728074a3 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -46,6 +46,7 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode { setTab("charge-wallet") }} /> <span class="flex flex-1"> + <div class="text-lg mr-2">💵</div> <span class="flex flex-col"> <span id="project-type-0-label" class="block text-sm font-medium text-gray-900"> <i18n.Translate>a <b>Taler</b> wallet</i18n.Translate> @@ -66,6 +67,7 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode { setTab("wire-transfer") }} /> <span class="flex flex-1"> + <div class="text-lg mr-2">↔</div> <span class="flex flex-col"> <span id="project-type-1-label" class="block text-sm font-medium text-gray-900"> <i18n.Translate>another bank account</i18n.Translate> diff --git a/packages/demobank-ui/src/pages/admin/Home.tsx b/packages/demobank-ui/src/pages/admin/Home.tsx index f7d4e426e..625a49d45 100644 --- a/packages/demobank-ui/src/pages/admin/Home.tsx +++ b/packages/demobank-ui/src/pages/admin/Home.tsx @@ -27,10 +27,7 @@ export function AdminHome({ onRegister }: Props): VNode { const [action, setAction] = useState<{ type: AccountAction, account: string - } | undefined>({ - type:"remove-account", - account:"gnunet-at-sandbox" - }) + } | undefined>() const [createAccount, setCreateAccount] = useState(false); |