incomplete changes to be more like merchant backenddev/nic/real-time-auditor

19 files changed, 2531 insertions, 49 deletions

diff --git a/packages/auditor-backoffice-ui/src/Application.tsx b/packages/auditor-backoffice-ui/src/Application.tsx
index 36059fe1a..e3ea17703 100644
--- a/packages/auditor-backoffice-ui/src/Application.tsx
+++ b/packages/auditor-backoffice-ui/src/Application.tsx
@@ -16,7 +16,26 @@
 
 import {Fragment, VNode, h, render} from "preact";
 import "./scss/main.scss";
-import { AuditorBackend } from "./declaration.js"
+import {AuditorBackend} from "./declaration.js"
+import {
+    ErrorType,
+    TranslationProvider,
+    useTranslationContext
+} from "@gnu-taler/web-util/browser";
+import {strings} from "./i18n/strings.js";
+import {useMemo} from "preact/hooks";
+import {HttpStatusCode, LibtoolVersion} from "@gnu-taler/taler-util";
+import {
+    NotConnectedAppMenu,
+    NotificationCard
+} from "./components/menu/index.js";
+import {
+    BackendContextProvider
+} from "./context/backend.js";
+import {ConfigContextProvider} from "./context/config.js";
+import {Loading} from "./components/exception/loading.js";
+import {ApplicationReadyRoutes} from "./ApplicationReadyRoutes.js";
+import {useBackendConfig} from "./hooks/backend.js";
 
 /**
  * @author Nic Eigel
@@ -25,11 +44,150 @@ import { AuditorBackend } from "./declaration.js"
 
 export function Application(): VNode {
     return (
-        <MyComponent/>
+        <BackendContextProvider>
+            <TranslationProvider source={strings}>
+                <ApplicationStatusRoutes/>
+            </TranslationProvider>
+        </BackendContextProvider>
+    );
+}
+
+
+/**
+ * Check connection testing against /config
+ *
+ * @returns
+ */
+function ApplicationStatusRoutes(): VNode {
+    const result = useBackendConfig();
+    const {i18n} = useTranslationContext();
+
+    const configData = result.ok && result.data
+        ? result.data
+        : undefined;
+    const ctx = useMemo(() => (configData), [configData]);
+
+    if (!result.ok) {
+        if (result.loading) return <Loading/>;
+        if (
+            result.type === ErrorType.CLIENT &&
+            result.status === HttpStatusCode.Unauthorized
+        ) {
+            return (
+                <Fragment>
+                    <NotConnectedAppMenu title="Login"/>
+                    <NotificationCard
+                        notification={{
+                            message: i18n.str`Checking the /config endpoint got authorization error`,
+                            type: "ERROR",
+                            description: `The /config endpoint of the backend server should be accessible`,
+                        }}
+                    />
+                </Fragment>
+            );
+        }
+        if (
+            result.type === ErrorType.CLIENT &&
+            result.status === HttpStatusCode.NotFound
+        ) {
+            return (
+                <Fragment>
+                    <NotConnectedAppMenu title="Error"/>
+                    <NotificationCard
+                        notification={{
+                            message: i18n.str`Could not find /config endpoint on this URL`,
+                            type: "ERROR",
+                            description: `Check the URL or contact the system administrator.`,
+                        }}
+                    />
+                </Fragment>
+            );
+        }
+        if (result.type === ErrorType.SERVER) {
+            <Fragment>
+                <NotConnectedAppMenu title="Error"/>
+                <NotificationCard
+                    notification={{
+                        message: i18n.str`Server response with an error code`,
+                        type: "ERROR",
+                        description: i18n.str`Got message "${result.message}" from ${result.info?.url}`,
+                    }}
+                />
+            </Fragment>;
+        }
+        if (result.type === ErrorType.UNREADABLE) {
+            <Fragment>
+                <NotConnectedAppMenu title="Error"/>
+                <NotificationCard
+                    notification={{
+                        message: i18n.str`Response from server is unreadable, http status: ${result.status}`,
+                        type: "ERROR",
+                        description: i18n.str`Got message "${result.message}" from ${result.info?.url}`,
+                    }}
+                />
+            </Fragment>;
+        }
+        return (
+            <Fragment>
+                <NotConnectedAppMenu title="Error"/>
+                <NotificationCard
+                    notification={{
+                        message: i18n.str`Unexpected Error`,
+                        type: "ERROR",
+                        description: i18n.str`Got message "${result.message}" from ${result.info?.url}`,
+                    }}
+                />
+            </Fragment>
+        );
+    }
+
+    const SUPPORTED_VERSION = "1:0:1"
+    if (result.data && !LibtoolVersion.compare(
+        SUPPORTED_VERSION,
+        result.data.version,
+    )?.compatible) {
+        return <Fragment>
+            <NotConnectedAppMenu title="Error"/>
+            <NotificationCard
+                notification={{
+                    message: i18n.str`Incompatible version`,
+                    type: "ERROR",
+                    description: i18n.str`Auditor backend server version ${result.data.version} is not compatible with the supported version ${SUPPORTED_VERSION}`,
+                }}
+            />
+        </Fragment>
+    }
+
+    return (
+        <div class="has-navbar-fixed-top">
+            <ConfigContextProvider value={ctx!}>
+                <ApplicationReadyRoutes/>
+            </ConfigContextProvider>
+        </div>
     );
 }
 
 
+/*
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 export class Configer {
     name?: string
     version?: string
@@ -91,8 +249,8 @@ api<Configer>('http://localhost:8083/config')
         teste()
     })
     .catch(error => {
-        /* show error message */
-    })
+        /* show error message *//*
+})
 
 
 function MyComponent() {
@@ -271,4 +429,6 @@ export function NavigationBar({title}: Props): VNode {
             </div>
         </nav>
     );
-}
\ No newline at end of file
+}
+
+*/
\ No newline at end of file
diff --git a/packages/auditor-backoffice-ui/src/ApplicationReadyRoutes.tsx b/packages/auditor-backoffice-ui/src/ApplicationReadyRoutes.tsx
new file mode 100644
index 000000000..2837e8d27
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/ApplicationReadyRoutes.tsx
@@ -0,0 +1,155 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2024 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Nic Eigel
+ */
+import { HttpStatusCode, TranslatedString } from "@gnu-taler/taler-util";
+import { ErrorType, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { createHashHistory } from "history";
+import { Fragment, VNode, h } from "preact";
+import { Route, Router, route } from "preact-router";
+import { useEffect, useErrorBoundary, useState } from "preact/hooks";
+import { InstanceRoutes } from "./InstanceRoutes.js";
+import {
+    NotConnectedAppMenu,
+    NotificationCard,
+} from "./components/menu/index.js";
+import { useBackendContext } from "./context/backend.js";
+import { INSTANCE_ID_LOOKUP } from "./utils/constants.js";
+
+/**
+ * Check if admin against /management/instances
+ * @returns
+ */
+export function ApplicationReadyRoutes(): VNode {
+    const { i18n } = useTranslationContext();
+    const [unauthorized, setUnauthorized] = useState(false)
+    const {
+        url: backendURL,
+        /*updateToken,
+        alreadyTriedLogin,*/
+    } = useBackendContext();
+
+    /*function updateLoginStatus(token: LoginToken | undefined) {
+        updateToken(token)
+        setUnauthorized(false)
+    }
+    const result = useBackendInstancesTestForAdmin();
+
+    const clearTokenAndGoToRoot = () => {
+        route("/");
+    };*/
+    const [showSettings, setShowSettings] = useState(false)
+   /* const unauthorizedAdmin = !result.loading
+        && !result.ok
+        && result.type === ErrorType.CLIENT
+        && result.status === HttpStatusCode.Unauthorized;
+
+    if (!alreadyTriedLogin && !result.ok) {
+        return (
+            <Fragment>
+                <NotConnectedAppMenu title="Welcome!" />
+                <LoginPage onConfirm={updateToken} />
+            </Fragment>
+        );
+    }
+
+    if (showSettings) {
+        return <Fragment>
+            <NotYetReadyAppMenu onShowSettings={() => setShowSettings(true)} title="UI Settings" onLogout={clearTokenAndGoToRoot} isPasswordOk={false} />
+            <Settings onClose={() => setShowSettings(false)} />
+        </Fragment>
+    }
+
+    if (result.loading) {
+        return <NotYetReadyAppMenu onShowSettings={() => setShowSettings(true)} title="Loading..." isPasswordOk={false} />;
+    }
+
+    let admin = result.ok || unauthorizedAdmin;
+    let instanceNameByBackendURL: string | undefined;
+*/
+//    if (!admin) {
+//        // * the testing against admin endpoint failed and it's not
+//        // an authorization problem
+//        // * merchant backend will return this SPA under the main
+//        // endpoint or /instance/<id> endpoint
+//        // => trying to infer the instance id
+//        const path = new URL(backendURL).pathname;
+//        const match = INSTANCE_ID_LOOKUP.exec(path);
+//        if (!match || !match[1]) {
+//            // this should be rare because
+//            // query to /config is ok but the URL
+//            // does not match our pattern
+//            return (
+//                <Fragment>
+//                    <NotYetReadyAppMenu onShowSettings={() => setShowSettings(true)} title="Error" onLogout={clearTokenAndGoToRoot} isPasswordOk={false} />
+//                    <NotificationCard
+//                        notification={{
+//                            message: i18n.str`Couldn't access the server.`,
+//                            description: i18n.str`Could not infer instance id from url ${backendURL}`,
+//                            type: "ERROR",
+//                        }}
+//                    />
+//                    {/* <ConnectionPage onConfirm={changeBackend} /> */}
+//                </Fragment>
+//            );
+//        }
+//
+//        instanceNameByBackendURL = match[1];
+//    }
+//
+//    if (unauthorized || unauthorizedAdmin) {
+//        return <Fragment>
+//            <NotYetReadyAppMenu onShowSettings={() => setShowSettings(true)} title="Login" onLogout={clearTokenAndGoToRoot} isPasswordOk={false} />
+//            <NotificationCard
+//                notification={{
+//                    message: i18n.str`Access denied`,
+//                    description: i18n.str`Check your token is valid`,
+//                    type: "ERROR",
+//                }}
+//            />
+//            <LoginPage onConfirm={updateLoginStatus} />
+//        </Fragment>
+//    }
+//
+    const history = createHashHistory();
+    return (
+        <Router history={history}>
+            <Route
+                default
+                component={DefaultMainRoute}
+            />
+        </Router>
+    );
+}
+
+function DefaultMainRoute({
+                              instance,
+                              url, //from preact-router
+                          }: any): VNode {
+    const [instanceName, setInstanceName] = useState(
+        "default",
+    );
+
+    return (
+        <InstanceRoutes
+            id={instanceName}
+            path={url}
+        />
+    );
+}
diff --git a/packages/auditor-backoffice-ui/src/InstanceRoutes.tsx b/packages/auditor-backoffice-ui/src/InstanceRoutes.tsx
new file mode 100644
index 000000000..e6ea1569a
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/InstanceRoutes.tsx
@@ -0,0 +1,121 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import {
+    ErrorType,
+    HttpError,
+    useTranslationContext
+} from "@gnu-taler/web-util/browser";
+import { format } from "date-fns";
+import { Fragment, FunctionComponent, VNode, h } from "preact";
+import { Route, Router, route } from "preact-router";
+import { useEffect, useErrorBoundary, useMemo, useState } from "preact/hooks";
+import { Loading } from "./components/exception/loading.js";
+import { Menu, NotificationCard } from "./components/menu/index.js";
+import { AuditorBackend } from "./declaration.js";
+import {
+    useSimpleLocalStorage,
+} from "./hooks/index.js";
+import DepositConfirmationList from "./paths/deposit_confirmations/list/index.js";
+import { Notification } from "./utils/types.js";
+import { InstanceContextProvider } from "./context/instance.js";
+
+export enum InstancePaths {
+    error = "/error",
+
+    deposit_confirmation_list = "/deposit-confirmation",
+    deposit_confirmation_update = "/deposit-confirmation/:rowid/update",
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => { };
+
+export interface Props {
+    id: string;
+    path: string;
+}
+
+export function InstanceRoutes({
+    id,
+                                   path,
+                               }: Props): VNode {
+    const { i18n } = useTranslationContext();
+
+    type GlobalNotifState = (Notification & { to: string | undefined }) | undefined;
+    const [globalNotification, setGlobalNotification] =
+        useState<GlobalNotifState>(undefined);
+
+    const [error] = useErrorBoundary();
+    const value = useMemo(
+        () => ({ id }),
+        [id],
+    );
+
+    return (
+        <InstanceContextProvider value={value}>
+            <Menu
+                instance={id}
+                path={path}
+            />
+            <NotificationCard notification={globalNotification} />
+            {error &&
+                <NotificationCard notification={{
+                    message: "Internal error, please repot",
+                    type: "ERROR",
+                    description: <pre>
+            {(error instanceof Error ? error.stack : String(error)) as TranslatedString}
+          </pre>
+                }} />
+            }
+
+            <Router
+                onChange={(e) => {
+                    const movingOutFromNotification =
+                        globalNotification && e.url !== globalNotification.to;
+                    if (movingOutFromNotification) {
+                        setGlobalNotification(undefined);
+                    }
+                }}
+            >
+                <Route path="/" component={Redirect} to={InstancePaths.deposit_confirmation_list} />
+                {/**
+                 * Deposit confirmation pages
+                 */}
+                <Route
+                    path={InstancePaths.deposit_confirmation_list}
+                    component={DepositConfirmationList}
+                />
+                {/**
+                 * Example pages
+                 */}
+                <Route path="/loading" component={Loading} />
+            </Router>
+        </InstanceContextProvider>
+    );
+}
+
+export function Redirect({ to }: { to: string }): null {
+    useEffect(() => {
+        route(to, true);
+    });
+    return null;
+}
\ No newline at end of file
diff --git a/packages/auditor-backoffice-ui/src/components/exception/loading.tsx b/packages/auditor-backoffice-ui/src/components/exception/loading.tsx
new file mode 100644
index 000000000..11b62c124
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/components/exception/loading.tsx
@@ -0,0 +1,48 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2024 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from "preact";
+
+export function Loading(): VNode {
+    return (
+        <div
+            class="columns is-centered is-vcentered"
+            style={{
+                height: "calc(100% - 3rem)",
+                position: "absolute",
+                width: "100%",
+            }}
+        >
+            <Spinner />
+        </div>
+    );
+}
+
+export function Spinner(): VNode {
+    return (
+        <div class="lds-ring">
+            <div />
+            <div />
+            <div />
+            <div />
+        </div>
+    );
+}
diff --git a/packages/auditor-backoffice-ui/src/components/menu/NavigationBar.tsx b/packages/auditor-backoffice-ui/src/components/menu/NavigationBar.tsx
new file mode 100644
index 000000000..21561087e
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/components/menu/NavigationBar.tsx
@@ -0,0 +1,73 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode } from "preact";
+// @ts-ignore
+import logo from "../../assets/logo-2021.svg";
+
+interface Props {
+  onMobileMenu: () => void;
+  title: string;
+}
+
+export function NavigationBar({ onMobileMenu, title }: Props): VNode {
+  return (
+    <nav
+      class="navbar is-fixed-top"
+      role="navigation"
+      aria-label="main navigation"
+    >
+      <div class="navbar-brand">
+        <span class="navbar-item" style={{ fontSize: 24, fontWeight: 900 }}>
+          {title}
+        </span>
+
+        <a
+          role="button"
+          class="navbar-burger"
+          aria-label="menu"
+          aria-expanded="false"
+          onClick={(e) => {
+            onMobileMenu();
+            e.stopPropagation();
+          }}
+        >
+          <span aria-hidden="true" />
+          <span aria-hidden="true" />
+          <span aria-hidden="true" />
+        </a>
+      </div>
+
+      <div class="navbar-menu ">
+        <a
+          class="navbar-start is-justify-content-center is-flex-grow-1"
+          href="https://taler.net"
+        >
+          <img src={logo} style={{ height: 35, margin: 10 }} />
+        </a>
+        <div class="navbar-end">
+          <div class="navbar-item" style={{ paddingTop: 4, paddingBottom: 4 }}>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/packages/auditor-backoffice-ui/src/components/menu/index.tsx b/packages/auditor-backoffice-ui/src/components/menu/index.tsx
index 4c02797ab..717e22894 100644
--- a/packages/auditor-backoffice-ui/src/components/menu/index.tsx
+++ b/packages/auditor-backoffice-ui/src/components/menu/index.tsx
@@ -16,13 +16,88 @@ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 
 */
 
+import {ComponentChildren, Fragment, h, VNode} from "preact";
+import {Notification} from "../../utils/types.js";
+import {useEffect, useState} from "preact/hooks";
+import {NavigationBar} from "./NavigationBar.js";
+import {InstancePaths} from "../../InstanceRoutes.js";
+
 /**
  * @author Nic Eigel
  *
  */
-/*
-import {ComponentChildren, Fragment, h, VNode} from "preact";
-import {useEffect} from "preact/hooks";
+
+function getInstanceTitle(path: string, id: string): string {
+    switch (path) {
+        case InstancePaths.deposit_confirmation_list:
+            return `${id}: Deposit confirmations`;
+        case InstancePaths.deposit_confirmation_update:
+            return `${id}: Update deposit confirmation`;
+        default:
+            return "";
+    }
+}
+
+interface NotifProps {
+    notification?: Notification;
+}
+
+export function NotificationCard({notification: n}: NotifProps): VNode | null {
+    if (!n) return null;
+    return (
+        <div class="notification">
+            <div class="columns is-vcentered">
+                <div class="column is-12">
+                    <article
+                        class={
+                            n.type === "ERROR"
+                                ? "message is-danger"
+                                : n.type === "WARN"
+                                    ? "message is-warning"
+                                    : "message is-info"
+                        }
+                    >
+                        <div class="message-header">
+                            <p>{n.message}</p>
+                        </div>
+                        {n.description && (
+                            <div class="message-body">
+                                <div>{n.description}</div>
+                                {n.details && <pre>{n.details}</pre>}
+                            </div>
+                        )}
+                    </article>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+interface NotConnectedAppMenuProps {
+    title: string;
+}
+
+export function NotConnectedAppMenu({
+                                        title,
+                                    }: NotConnectedAppMenuProps): VNode {
+    const [mobileOpen, setMobileOpen] = useState(false);
+
+    useEffect(() => {
+        document.title = `Taler Backoffice: ${title}`;
+    }, [title]);
+
+    return (
+        <div
+            class={mobileOpen ? "has-aside-mobile-expanded" : ""}
+            onClick={() => setMobileOpen(false)}
+        >
+            <NavigationBar
+                onMobileMenu={() => setMobileOpen(!mobileOpen)}
+                title={title}
+            />
+        </div>
+    );
+}
 
 function WithTitle({
                        title,
@@ -37,25 +112,19 @@ function WithTitle({
     return <Fragment>{children}</Fragment>;
 }
 
+interface MenuProps {
+    title?: string;
+    path: string;
+    instance: string;
+}
+
 export function Menu({
-                         onLogout,
-                         onShowSettings,
                          title,
                          instance,
                          path,
-                         admin,
-                         setInstanceName,
-                         isPasswordOk
                      }: MenuProps): VNode {
     const [mobileOpen, setMobileOpen] = useState(false);
-
-    const titleWithSubtitle = title
-        ? title
-        : !admin
-            ? getInstanceTitle(path, instance)
-            : getAdminTitle(path, instance);
-    const adminInstance = instance === "default";
-    const mimic = admin && !adminInstance;
+    const titleWithSubtitle = getInstanceTitle(path, instance);
     return (
         <WithTitle title={titleWithSubtitle}>
             <div
@@ -67,19 +136,8 @@ export function Menu({
                     title={titleWithSubtitle}
                 />
 
-                {onLogout && (
-                    <Sidebar
-                        onShowSettings={onShowSettings}
-                        onLogout={onLogout}
-                        admin={admin}
-                        mimic={mimic}
-                        instance={instance}
-                        mobile={mobileOpen}
-                        isPasswordOk={isPasswordOk}
-                    />
-                )}
-
-                {mimic && (
+
+                {/*mimic && (
                     <nav class="level" style={{
                         zIndex: 100,
                         position: "fixed",
@@ -88,11 +146,10 @@ export function Menu({
                     }}>
                         <div class="level-item has-text-centered has-background-warning">
                             <p class="is-size-5">
-                                You are viewing the instance <b>&quot;{instance}&quot;</b>.{" "}
+                                You are viewing the instance <b>something</b>.{" "}
                                 <a
                                     href="#/instances"
                                     onClick={(e) => {
-                                        setInstanceName("default");
                                     }}
                                 >
                                     go back
@@ -100,8 +157,8 @@ export function Menu({
                             </p>
                         </div>
                     </nav>
-                )}
+                )*/}
             </div>
         </WithTitle>
     );
-}*/
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/packages/auditor-backoffice-ui/src/context/backend.ts b/packages/auditor-backoffice-ui/src/context/backend.ts
new file mode 100644
index 000000000..1f95dc9ba
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/context/backend.ts
@@ -0,0 +1,68 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2024 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { createContext, h, VNode } from "preact";
+import { useContext } from "preact/hooks";
+import { useBackendURL } from "../hooks/index.js";
+
+//TODO: add token
+interface BackendContextType {
+    url: string,
+    /*alreadyTriedLogin: boolean;
+    token?: LoginToken;
+    updateToken: (token: LoginToken | undefined) => void;*/
+}
+
+function useBackendContextState(
+    defaultUrl?: string,
+): BackendContextType {
+    const [url] = useBackendURL(defaultUrl);
+    //const [token, updateToken] = useBackendDefaultToken();
+
+    return {
+        url,
+       /* token,
+        alreadyTriedLogin: token !== undefined,
+        updateToken,*/
+    };
+}
+
+export const BackendContextProvider = ({
+                                           children,
+                                           defaultUrl,
+                                       }: {
+    children: any;
+    defaultUrl?: string;
+}): VNode => {
+    const value = useBackendContextState(defaultUrl);
+
+    return h(BackendContext.Provider, { value, children });
+};
+
+const BackendContext = createContext<BackendContextType>({
+    url: "",
+    /*alreadyTriedLogin: false,
+    token: undefined,
+    updateToken: () => null,*/
+});
+
+export const useBackendContext = (): BackendContextType =>
+    useContext(BackendContext);
\ No newline at end of file
diff --git a/packages/auditor-backoffice-ui/src/context/config.ts b/packages/auditor-backoffice-ui/src/context/config.ts
new file mode 100644
index 000000000..58ee5a594
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/context/config.ts
@@ -0,0 +1,29 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+import { AuditorBackend } from "../declaration.js";
+
+const Context = createContext<AuditorBackend.VersionResponse>(null!);
+
+export const ConfigContextProvider = Context.Provider;
+export const useConfigContext = (): AuditorBackend.VersionResponse => useContext(Context);
diff --git a/packages/auditor-backoffice-ui/src/context/instance.ts b/packages/auditor-backoffice-ui/src/context/instance.ts
new file mode 100644
index 000000000..55bf4dd8c
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/context/instance.ts
@@ -0,0 +1,28 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+interface Type {
+    id: string;
+}
+
+const Context = createContext<Type>({} as any);
+
+export const InstanceContextProvider = Context.Provider;
+export const useInstanceContext = (): Type => useContext(Context);
diff --git a/packages/auditor-backoffice-ui/src/declaration.d.ts b/packages/auditor-backoffice-ui/src/declaration.d.ts
index d5301c115..c4fbc4474 100644
--- a/packages/auditor-backoffice-ui/src/declaration.d.ts
+++ b/packages/auditor-backoffice-ui/src/declaration.d.ts
@@ -16,24 +16,96 @@
 
 /**
  *
+ * @author Sebastian Javier Marchano (sebasjm)
  * @author Nic Eigel
  */
 
+type HashCode = string;
+type EddsaPublicKey = string;
+type EddsaSignature = string;
+type WireTransferIdentifierRawP = string;
+type RelativeTime = TalerProtocolDuration;
+type ImageDataUrl = string;
+type AuditorUserType = "business" | "individual";
+
+
+export interface WithId {
+    id: string;
+}
+
+interface Timestamp {
+    // Milliseconds since epoch, or the special
+    // value "forever" to represent an event that will
+    // never happen.
+    t_s: number | "never";
+}
+interface TalerProtocolDuration {
+    d_us: number | "forever";
+}
+interface Duration {
+    d_ms: number | "forever";
+}
+
+interface WithId {
+    id: string;
+}
+
+type Amount = string;
+type UUID = string;
+type Integer = number;
+
 export namespace AuditorBackend {
     interface DepositConfirmation {
         // identifier
-        serial_id: number;
+        deposit_confirmation_serial_id: number;
+
+        //TODO Comment
+        h_contract_terms: string;
+
+        //TODO Comment
+        h_policy: string;
+
+        //TODO Comment
+        h_wire: string;
+
+        //TODO Comment
+        exchange_timestamp: string;
+
+        //TODO Comment
+        refund_deadline: string;
+
+        //TODO Comment
+        wire_deadline: string;
+
+        //TODO Comment
+        total_without_fee: string;
+
+        //TODO Comment
+        coin_pubs: string;
 
-        // amount of deposit confirmation
-        amount: string;
+        //TODO Comment
+        coin_sigs: string;
 
-        // timestamp of deposit confirmation
-        timestamp: string;
+        //TODO Comment
+        merchant_pub: string;
 
-        // account
-        account: string;
+        //TODO Comment
+        merchant_sig: string;
+
+        //TODO Comment
+        exchange_pub: string;
+
+        //TODO Comment
+        exchange_sig: string;
+
+        //TODO Comment
+        suppressed: string;
+
+        //TODO Comment
+        ancient: string;
     }
 
+    //TODO rename
     interface Config {
         name: string;
         version: string;
@@ -42,4 +114,126 @@ export namespace AuditorBackend {
         auditor_public_key: string;
         exchange_master_public_key: string;
     }
+
+    interface ErrorDetail {
+        // Numeric error code unique to the condition.
+        // The other arguments are specific to the error value reported here.
+        code: number;
+
+        // Human-readable description of the error, i.e. "missing parameter", "commitment violation", ...
+        // Should give a human-readable hint about the error's nature. Optional, may change without notice!
+        hint?: string;
+
+        // Optional detail about the specific input value that failed. May change without notice!
+        detail?: string;
+
+        // Name of the parameter that was bogus (if applicable).
+        parameter?: string;
+
+        // Path to the argument that was bogus (if applicable).
+        path?: string;
+
+        // Offset of the argument that was bogus (if applicable).
+        offset?: string;
+
+        // Index of the argument that was bogus (if applicable).
+        index?: string;
+
+        // Name of the object that was bogus (if applicable).
+        object?: string;
+
+        // Name of the currency than was problematic (if applicable).
+        currency?: string;
+
+        // Expected type (if applicable).
+        type_expected?: string;
+
+        // Type that was provided instead (if applicable).
+        type_actual?: string;
+    }
+
+    interface VersionResponse {
+        // libtool-style representation of the Merchant protocol version, see
+        // https://www.gnu.org/software/libtool/manual/html_node/Versioning.html#Versioning
+        // The format is "current:revision:age".
+        version: string;
+
+        // Name of the protocol.
+        name: "taler-merchant";
+
+        // Default (!) currency supported by this backend.
+        // This is the currency that the backend should
+        // suggest by default to the user when entering
+        // amounts. See currencies for a list of
+        // supported currencies and how to render them.
+        currency: string;
+
+        // How services should render currencies supported
+        // by this backend.  Maps
+        // currency codes (e.g. "EUR" or "KUDOS") to
+        // the respective currency specification.
+        // All currencies in this map are supported by
+        // the backend.  Note that the actual currency
+        // specifications are a *hint* for applications
+        // that would like *advice* on how to render amounts.
+        // Applications *may* ignore the currency specification
+        // if they know how to render currencies that they are
+        // used with.
+        currencies: { currency: CurrencySpecification };
+
+        // Array of exchanges trusted by the merchant.
+        // Since protocol v6.
+        exchanges: ExchangeConfigInfo[];
+    }
+}
+
+namespace DepositConfirmations {
+    interface DepositConfirmationDetail {
+        deposit_confirmation_serial_id: number;
+
+        //TODO Comment
+        h_contract_terms: string;
+
+        //TODO Comment
+        h_policy: string;
+
+        //TODO Comment
+        h_wire: string;
+
+        //TODO Comment
+        exchange_timestamp: string;
+
+        //TODO Comment
+        refund_deadline: string;
+
+        //TODO Comment
+        wire_deadline: string;
+
+        //TODO Comment
+        total_without_fee: string;
+
+        //TODO Comment
+        coin_pubs: string;
+
+        //TODO Comment
+        coin_sigs: string;
+
+        //TODO Comment
+        merchant_pub: string;
+
+        //TODO Comment
+        merchant_sig: string;
+
+        //TODO Comment
+        exchange_pub: string;
+
+        //TODO Comment
+        exchange_sig: string;
+
+        //TODO Comment
+        suppressed: string;
+
+        //TODO Comment
+        ancient: string;
+    }
 }
\ No newline at end of file
diff --git a/packages/auditor-backoffice-ui/src/hooks/backend.ts b/packages/auditor-backoffice-ui/src/hooks/backend.ts
index 7f293162f..d60446ab3 100644
--- a/packages/auditor-backoffice-ui/src/hooks/backend.ts
+++ b/packages/auditor-backoffice-ui/src/hooks/backend.ts
@@ -1,7 +1,41 @@
-//import { HttpResponse, RequestError } from "@gnu-taler/web-util/lib/utils/request.js";
-import { AuditorBackend } from "../declaration.js";
-import Config = AuditorBackend.Config;
+/*
+ This file is part of GNU Taler
+ (C) 2021-2024 Taler Systems S.A.
 
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ * @author Nic Eigel
+ */
+
+import { AbsoluteTime, HttpStatusCode } from "@gnu-taler/taler-util";
+import {
+    ErrorType,
+    HttpError,
+    HttpResponse,
+    HttpResponseOk,
+    RequestError,
+    RequestOptions,
+    useApiContext,
+} from "@gnu-taler/web-util/browser";
+import { useCallback, useEffect, useState } from "preact/hooks";
+import { useSWRConfig } from "swr";
+import { useBackendContext } from "../context/backend.js";
+import { useInstanceContext } from "../context/instance.js";
+import { AuditorBackend, Timestamp } from "../declaration.js";
+/*
 export function tryConfig(): Promise<Config> {
   // const request: RequestInfo = new Request('./Config.json', {
   //   method: 'GET',
@@ -17,5 +51,232 @@ export function tryConfig(): Promise<Config> {
       return res as Config;
     });
 
+}*/
+
+
+export function useMatchMutate(): (
+    re?: RegExp,
+    value?: unknown,
+) => Promise<any> {
+    const { cache, mutate } = useSWRConfig();
+
+    if (!(cache instanceof Map)) {
+        throw new Error(
+            "matchMutate requires the cache provider to be a Map instance",
+        );
+    }
+
+    return function matchRegexMutate(re?: RegExp) {
+        return mutate((key) => {
+            // evict if no key or regex === all
+            if (!key || !re) return true
+            // match string
+            if (typeof key === 'string' && re.test(key)) return true
+            // record or object have the path at [0]
+            if (typeof key === 'object' && re.test(key[0])) return true
+            //key didn't match regex
+            return false
+        }, undefined, {
+            revalidate: true,
+        });
+    };
 }
 
+
+
+
+
+
+
+
+
+
+
+type YesOrNo = "yes" | "no";
+
+interface useBackendInstanceRequestType {
+    request: <T>(
+        endpoint: string,
+        options?: RequestOptions,
+    ) => Promise<HttpResponseOk<T>>;
+    depositConfirmationFetcher: <T>(
+        params: [endpoint: string,
+            paid?: YesOrNo,
+            refunded?: YesOrNo,
+            wired?: YesOrNo,
+            searchDate?: Date,
+            delta?: number,]
+    ) => Promise<HttpResponseOk<T>>;
+}
+interface useBackendBaseRequestType {
+    request: <T>(
+        endpoint: string,
+        options?: RequestOptions,
+    ) => Promise<HttpResponseOk<T>>;
+}
+
+/**
+ *
+ * @param root the request is intended to the base URL and no the instance URL
+ * @returns request handler to
+ */
+//TODO: Add token
+export function useBackendBaseRequest(): useBackendBaseRequestType {
+    const { url: backend} = useBackendContext();
+    const { request: requestHandler } = useApiContext();
+
+    const request = useCallback(
+        function requestImpl<T>(
+            endpoint: string,
+            options: RequestOptions = {},
+        ): Promise<HttpResponseOk<T>> {
+            return requestHandler<T>(backend, endpoint, { ...options }).then(res => {
+                return res
+            }).catch(err => {
+                throw err
+            });
+        },
+        [backend],
+    );
+
+    return { request };
+}
+
+const CHECK_CONFIG_INTERVAL_OK = 5 * 60 * 1000;
+const CHECK_CONFIG_INTERVAL_FAIL = 2 * 1000;
+
+export function useBackendConfig(): HttpResponse<
+    AuditorBackend.VersionResponse | undefined,
+    RequestError<AuditorBackend.ErrorDetail>
+> {
+    const { request } = useBackendBaseRequest();
+
+    type Type = AuditorBackend.VersionResponse;
+    type State = { data: HttpResponse<Type, RequestError<AuditorBackend.ErrorDetail>>, timer: number }
+    const [result, setResult] = useState<State>({ data: { loading: true }, timer: 0 });
+
+    useEffect(() => {
+        if (result.timer) {
+            clearTimeout(result.timer)
+        }
+        function tryConfig(): void {
+            //TODO change back to /config
+            request<Type>(`http://localhost:8083/config'`)
+                .then((data) => {
+                    const timer: any = setTimeout(() => {
+                        tryConfig()
+                    }, CHECK_CONFIG_INTERVAL_OK)
+                    setResult({ data, timer })
+                })
+                .catch((error) => {
+                    const timer: any = setTimeout(() => {
+                        tryConfig()
+                    }, CHECK_CONFIG_INTERVAL_FAIL)
+                    const data = error.cause
+                    setResult({ data, timer })
+                });
+        }
+        tryConfig()
+    }, [request]);
+
+    return result.data;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export function useBackendInstanceRequest(): useBackendInstanceRequestType {
+    const { url: rootBackendUrl} = useBackendContext();
+    const { id } = useInstanceContext();
+    const { request: requestHandler } = useApiContext();
+
+  const baseUrl = rootBackendUrl;
+
+
+    const request = useCallback(
+        function requestImpl<T>(
+            endpoint: string,
+            options: RequestOptions = {},
+        ): Promise<HttpResponseOk<T>> {
+            return requestHandler<T>(baseUrl, endpoint, { ...options });
+        },
+        [baseUrl],
+    );
+
+    const multiFetcher = useCallback(
+        function multiFetcherImpl<T>(
+            args: [endpoints: string[]],
+        ): Promise<HttpResponseOk<T>[]> {
+            const [endpoints] = args
+            return Promise.all(
+                endpoints.map((endpoint) =>
+                    requestHandler<T>(baseUrl, endpoint, ),
+                ),
+            );
+        },
+        [baseUrl],
+    );
+
+    const fetcher = useCallback(
+        function fetcherImpl<T>(endpoint: string): Promise<HttpResponseOk<T>> {
+            return requestHandler<T>(baseUrl, endpoint );
+        },
+        [baseUrl],
+    );
+
+    const depositConfirmationFetcher = useCallback(
+        function orderFetcherImpl<T>(
+            args: [endpoint: string,
+                paid?: YesOrNo,
+                refunded?: YesOrNo,
+                wired?: YesOrNo,
+                searchDate?: Date,
+                delta?: number,]
+        ): Promise<HttpResponseOk<T>> {
+            const [endpoint, paid, refunded, wired, searchDate, delta] = args
+            const date_s =
+                delta && delta < 0 && searchDate
+                    ? Math.floor(searchDate.getTime() / 1000) + 1
+                    : searchDate !== undefined ? Math.floor(searchDate.getTime() / 1000) : undefined;
+            const params: any = {};
+            if (paid !== undefined) params.paid = paid;
+            if (delta !== undefined) params.delta = delta;
+            if (refunded !== undefined) params.refunded = refunded;
+            if (wired !== undefined) params.wired = wired;
+            if (date_s !== undefined) params.date_s = date_s;
+            if (delta === 0) {
+                //in this case we can already assume the response
+                //and avoid network
+                return Promise.resolve({
+                    ok: true,
+                    data: { orders: [] } as T,
+                })
+            }
+            return requestHandler<T>(baseUrl, endpoint, { params });
+        },
+        [baseUrl],
+    );
+
+
+
+    return {
+        request,
+        depositConfirmationFetcher,
+    };}
\ No newline at end of file
diff --git a/packages/auditor-backoffice-ui/src/hooks/config.ts b/packages/auditor-backoffice-ui/src/hooks/config.ts
new file mode 100644
index 000000000..a57fa15d5
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/hooks/config.ts
@@ -0,0 +1,24 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2024 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+import { AuditorBackend } from "../declaration.js";
+
+const Context = createContext<AuditorBackend.VersionResponse>(null!);
+
+export const ConfigContextProvider = Context.Provider;
+export const useConfigContext = (): AuditorBackend.VersionResponse => useContext(Context);
diff --git a/packages/auditor-backoffice-ui/src/hooks/deposit-confirmation.ts b/packages/auditor-backoffice-ui/src/hooks/deposit-confirmation.ts
new file mode 100644
index 000000000..e45150d0b
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/hooks/deposit-confirmation.ts
@@ -0,0 +1,211 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import {
+    HttpResponse,
+    HttpResponseOk,
+    HttpResponsePaginated,
+    RequestError,
+} from "@gnu-taler/web-util/browser";
+import { useEffect, useState } from "preact/hooks";
+import { AuditorBackend } from "../declaration.js";
+import { MAX_RESULT_SIZE, PAGE_SIZE } from "../utils/constants.js";
+import { useBackendInstanceRequest, useMatchMutate } from "./backend.js";
+
+// FIX default import https://github.com/microsoft/TypeScript/issues/49189
+import _useSWR, { SWRHook } from "swr";
+const useSWR = _useSWR as unknown as SWRHook;
+
+export interface DepositConfirmationAPI {
+    deleteDepositConfirmation: (id: string) => Promise<HttpResponseOk<void>>;
+}
+
+type YesOrNo = "yes" | "no";
+
+export function useDepositConfirmationAPI(): DepositConfirmationAPI {
+    const mutateAll = useMatchMutate();
+    const { request } = useBackendInstanceRequest();
+
+    const deleteDepositConfirmation = async (
+        depositConfirmationSerialId: string,
+    ): Promise<HttpResponseOk<void>> => {
+        mutateAll(/@"\/deposit-confirmation"@/);
+        const res = request<void>(`/deposit-confirmation/${depositConfirmationSerialId}`, {
+            method: "DELETE",
+        });
+        await mutateAll(/.*deposit-confirmation.*/);
+        return res;
+    };
+
+
+    return { deleteDepositConfirmation };
+}
+
+/*export function useOrderDetails(
+    oderId: string,
+): HttpResponse<
+    MerchantBackend.Orders.MerchantOrderStatusResponse,
+    AuditorBackend.ErrorDetail
+> {
+    const { fetcher } = useBackendInstanceRequest();
+
+    const { data, error, isValidating } = useSWR<
+        HttpResponseOk<MerchantBackend.Orders.MerchantOrderStatusResponse>,
+        RequestError<MerchantAuBackend.ErrorDetail>
+    >([`/private/orders/${oderId}`], fetcher, {
+        refreshInterval: 0,
+        refreshWhenHidden: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        refreshWhenOffline: false,
+    });
+
+    if (isValidating) return { loading: true, data: data?.data };
+    if (data) return data;
+    if (error) return error.cause;
+    return { loading: true };
+}
+*/
+export interface InstanceOrderFilter {
+    suppressed?: YesOrNo;
+    suppressDate?: Date;
+}
+/*
+export function useInstanceOrders(
+    args?: InstanceOrderFilter,
+    updateFilter?: (d: Date) => void,
+): HttpResponsePaginated<
+    MerchantBackend.Orders.OrderHistory,
+    MerchantBackend.ErrorDetail
+> {
+    const { orderFetcher } = useBackendInstanceRequest();
+
+    const [pageBefore, setPageBefore] = useState(1);
+    const [pageAfter, setPageAfter] = useState(1);
+
+    const totalAfter = pageAfter * PAGE_SIZE;
+    const totalBefore = args?.date ? pageBefore * PAGE_SIZE : 0;
+
+    /**
+     * FIXME: this can be cleaned up a little
+     *
+     * the logic of double query should be inside the orderFetch so from the hook perspective and cache
+     * is just one query and one error status
+     *//*
+    const {
+        data: beforeData,
+        error: beforeError,
+        isValidating: loadingBefore,
+    } = useSWR<
+        HttpResponseOk<MerchantBackend.Orders.OrderHistory>,
+        RequestError<MerchantBackend.ErrorDetail>
+    >(
+        [
+            `/private/orders`,
+            args?.paid,
+            args?.refunded,
+            args?.wired,
+            args?.date,
+            totalBefore,
+        ],
+        orderFetcher,
+    );
+    const {
+        data: afterData,
+        error: afterError,
+        isValidating: loadingAfter,
+    } = useSWR<
+        HttpResponseOk<MerchantBackend.Orders.OrderHistory>,
+        RequestError<MerchantBackend.ErrorDetail>
+    >(
+        [
+            `/private/orders`,
+            args?.paid,
+            args?.refunded,
+            args?.wired,
+            args?.date,
+            -totalAfter,
+        ],
+        orderFetcher,
+    );
+
+    //this will save last result
+    const [lastBefore, setLastBefore] = useState<
+        HttpResponse<
+            MerchantBackend.Orders.OrderHistory,
+            MerchantBackend.ErrorDetail
+        >
+    >({ loading: true });
+    const [lastAfter, setLastAfter] = useState<
+        HttpResponse<
+            MerchantBackend.Orders.OrderHistory,
+            MerchantBackend.ErrorDetail
+        >
+    >({ loading: true });
+    useEffect(() => {
+        if (afterData) setLastAfter(afterData);
+        if (beforeData) setLastBefore(beforeData);
+    }, [afterData, beforeData]);
+
+    if (beforeError) return beforeError.cause;
+    if (afterError) return afterError.cause;
+
+    // if the query returns less that we ask, then we have reach the end or beginning
+    const isReachingEnd = afterData && afterData.data.orders.length < totalAfter;
+    const isReachingStart =
+        args?.date === undefined ||
+        (beforeData && beforeData.data.orders.length < totalBefore);
+
+    const pagination = {
+        isReachingEnd,
+        isReachingStart,
+        loadMore: () => {
+            if (!afterData || isReachingEnd) return;
+            if (afterData.data.orders.length < MAX_RESULT_SIZE) {
+                setPageAfter(pageAfter + 1);
+            } else {
+                const from =
+                    afterData.data.orders[afterData.data.orders.length - 1].timestamp.t_s;
+                if (from && from !== "never" && updateFilter)
+                    updateFilter(new Date(from * 1000));
+            }
+        },
+        loadMorePrev: () => {
+            if (!beforeData || isReachingStart) return;
+            if (beforeData.data.orders.length < MAX_RESULT_SIZE) {
+                setPageBefore(pageBefore + 1);
+            } else if (beforeData) {
+                const from =
+                    beforeData.data.orders[beforeData.data.orders.length - 1].timestamp
+                        .t_s;
+                if (from && from !== "never" && updateFilter)
+                    updateFilter(new Date(from * 1000));
+            }
+        },
+    };
+
+    const orders =
+        !beforeData || !afterData
+            ? []
+            : (beforeData || lastBefore).data.orders
+                .slice()
+                .reverse()
+                .concat((afterData || lastAfter).data.orders);
+    if (loadingAfter || loadingBefore) return { loading: true, data: { orders } };
+    if (beforeData && afterData) {
+        return { ok: true, data: { orders }, ...pagination };
+    }
+    return { loading: true };
+}*/
diff --git a/packages/auditor-backoffice-ui/src/hooks/index.ts b/packages/auditor-backoffice-ui/src/hooks/index.ts
new file mode 100644
index 000000000..cf1c57771
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/hooks/index.ts
@@ -0,0 +1,79 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2024 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import {StateUpdater, useState} from "preact/hooks";
+import { ValueOrFunction } from "../utils/types.js";
+
+export function useBackendURL(
+    url?: string,
+): [string, StateUpdater<string>] {
+    const [value, setter] = useSimpleLocalStorage(
+        "auditor-base-url",
+        url || calculateRootPath(),
+    );
+
+    const checkedSetter = (v: ValueOrFunction<string>) => {
+        return setter((p) => (v instanceof Function ? v(p ?? "") : v).replace(/\/$/, ""));
+    };
+
+    return [value!, checkedSetter];
+}
+
+const calculateRootPath = () => {
+    const rootPath =
+        typeof window !== undefined
+            ? window.location.origin + window.location.pathname
+            : "/";
+
+    /**
+     * By default, auditor backend serves the html content
+     * from the /webui root. This should cover most of the
+     * cases and the rootPath will be the auditor backend
+     * URL where the instances are
+     */
+    return rootPath.replace("/webui/", "");
+};
+
+export function useSimpleLocalStorage(
+    key: string,
+    initialValue?: string,
+): [string | undefined, StateUpdater<string | undefined>] {
+    const [storedValue, setStoredValue] = useState<string | undefined>(
+        (): string | undefined => {
+            return typeof window !== "undefined"
+                ? window.localStorage.getItem(key) || initialValue
+                : initialValue;
+        },
+    );
+
+    const setValue = (
+        value?: string | ((val?: string) => string | undefined),
+    ) => {
+        setStoredValue((p) => {
+            const toStore = value instanceof Function ? value(p) : value;
+            if (typeof window !== "undefined") {
+                if (!toStore) {
+                    window.localStorage.removeItem(key);
+                } else {
+                    window.localStorage.setItem(key, toStore);
+                }
+            }
+            return toStore;
+        });
+    };
+
+    return [storedValue, setValue];
+}
\ No newline at end of file
diff --git a/packages/auditor-backoffice-ui/src/paths/deposit_confirmations/list/List.stories.tsx b/packages/auditor-backoffice-ui/src/paths/deposit_confirmations/list/List.stories.tsx
new file mode 100644
index 000000000..156c577f4
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/paths/deposit_confirmations/list/List.stories.tsx
@@ -0,0 +1,107 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { h, VNode, FunctionalComponent } from "preact";
+import { ListPage as TestedComponent } from "./ListPage.js";
+
+export default {
+  title: "Pages/Order/List",
+  component: TestedComponent,
+  argTypes: {
+    onShowAll: { action: "onShowAll" },
+    onShowPaid: { action: "onShowPaid" },
+    onShowRefunded: { action: "onShowRefunded" },
+    onShowNotWired: { action: "onShowNotWired" },
+    onCopyURL: { action: "onCopyURL" },
+    onSelectDate: { action: "onSelectDate" },
+    onLoadMoreBefore: { action: "onLoadMoreBefore" },
+    onLoadMoreAfter: { action: "onLoadMoreAfter" },
+    onSelectOrder: { action: "onSelectOrder" },
+    onRefundOrder: { action: "onRefundOrder" },
+    onSearchOrderById: { action: "onSearchOrderById" },
+    onCreate: { action: "onCreate" },
+  },
+};
+
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>,
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
+}
+
+export const Example = createExample(TestedComponent, {
+  orders: [
+    {
+      id: "123",
+      amount: "TESTKUDOS:10",
+      paid: false,
+      refundable: true,
+      row_id: 1,
+      summary: "summary",
+      timestamp: {
+        t_s: new Date().getTime() / 1000,
+      },
+      order_id: "123",
+    },
+    {
+      id: "234",
+      amount: "TESTKUDOS:12",
+      paid: true,
+      refundable: true,
+      row_id: 2,
+      summary:
+        "summary with long text, very very long text that someone want to add as a description of the order",
+      timestamp: {
+        t_s: new Date().getTime() / 1000,
+      },
+      order_id: "234",
+    },
+    {
+      id: "456",
+      amount: "TESTKUDOS:1",
+      paid: false,
+      refundable: false,
+      row_id: 3,
+      summary:
+        "summary with long text, very very long text that someone want to add as a description of the order",
+      timestamp: {
+        t_s: new Date().getTime() / 1000,
+      },
+      order_id: "456",
+    },
+    {
+      id: "234",
+      amount: "TESTKUDOS:12",
+      paid: false,
+      refundable: false,
+      row_id: 4,
+      summary:
+        "summary with long text, very very long text that someone want to add as a description of the order",
+      timestamp: {
+        t_s: new Date().getTime() / 1000,
+      },
+      order_id: "234",
+    },
+  ],
+});
diff --git a/packages/auditor-backoffice-ui/src/paths/deposit_confirmations/list/ListPage.tsx b/packages/auditor-backoffice-ui/src/paths/deposit_confirmations/list/ListPage.tsx
new file mode 100644
index 000000000..9f80719a1
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/paths/deposit_confirmations/list/ListPage.tsx
@@ -0,0 +1,226 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { format } from "date-fns";
+import { h, VNode, Fragment } from "preact";
+import { useState } from "preact/hooks";
+import { DatePicker } from "../../../../components/picker/DatePicker.js";
+import { MerchantBackend, WithId } from "../../../../declaration.js";
+import { CardTable } from "./Table.js";
+import { dateFormatForSettings, useSettings } from "../../../../hooks/useSettings.js";
+
+export interface ListPageProps {
+  onShowAll: () => void;
+  onShowNotPaid: () => void;
+  onShowPaid: () => void;
+  onShowRefunded: () => void;
+  onShowNotWired: () => void;
+  onShowWired: () => void;
+  onCopyURL: (id: string) => void;
+  isAllActive: string;
+  isPaidActive: string;
+  isNotPaidActive: string;
+  isRefundedActive: string;
+  isNotWiredActive: string;
+  isWiredActive: string;
+
+  jumpToDate?: Date;
+  onSelectDate: (date?: Date) => void;
+
+  orders: (MerchantBackend.Orders.OrderHistoryEntry & WithId)[];
+  onLoadMoreBefore?: () => void;
+  hasMoreBefore?: boolean;
+  hasMoreAfter?: boolean;
+  onLoadMoreAfter?: () => void;
+
+  onSelectOrder: (o: MerchantBackend.Orders.OrderHistoryEntry & WithId) => void;
+  onRefundOrder: (o: MerchantBackend.Orders.OrderHistoryEntry & WithId) => void;
+  onCreate: () => void;
+}
+
+export function ListPage({
+  hasMoreAfter,
+  hasMoreBefore,
+  onLoadMoreAfter,
+  onLoadMoreBefore,
+  orders,
+  isAllActive,
+  onSelectOrder,
+  onRefundOrder,
+  jumpToDate,
+  onCopyURL,
+  onShowAll,
+  onShowPaid,
+  onShowNotPaid,
+  onShowRefunded,
+  onShowNotWired,
+  onShowWired,
+  onSelectDate,
+  isPaidActive,
+  isRefundedActive,
+  isNotWiredActive,
+  onCreate,
+  isNotPaidActive,
+  isWiredActive,
+}: ListPageProps): VNode {
+  const { i18n } = useTranslationContext();
+  const dateTooltip = i18n.str`select date to show nearby orders`;
+  const [pickDate, setPickDate] = useState(false);
+  const [settings] = useSettings();
+
+  return (
+    <Fragment>
+      <div class="columns">
+        <div class="column is-two-thirds">
+          <div class="tabs" style={{ overflow: "inherit" }}>
+            <ul>
+              <li class={isNotPaidActive}>
+                <div
+                  class="has-tooltip-right"
+                  data-tooltip={i18n.str`only show paid orders`}
+                >
+                  <a onClick={onShowNotPaid}>
+                    <i18n.Translate>New</i18n.Translate>
+                  </a>
+                </div>
+              </li>
+              <li class={isPaidActive}>
+                <div
+                  class="has-tooltip-right"
+                  data-tooltip={i18n.str`only show paid orders`}
+                >
+                  <a onClick={onShowPaid}>
+                    <i18n.Translate>Paid</i18n.Translate>
+                  </a>
+                </div>
+              </li>
+              <li class={isRefundedActive}>
+                <div
+                  class="has-tooltip-right"
+                  data-tooltip={i18n.str`only show orders with refunds`}
+                >
+                  <a onClick={onShowRefunded}>
+                    <i18n.Translate>Refunded</i18n.Translate>
+                  </a>
+                </div>
+              </li>
+              <li class={isNotWiredActive}>
+                <div
+                  class="has-tooltip-left"
+                  data-tooltip={i18n.str`only show orders where customers paid, but wire payments from payment provider are still pending`}
+                >
+                  <a onClick={onShowNotWired}>
+                    <i18n.Translate>Not wired</i18n.Translate>
+                  </a>
+                </div>
+              </li>
+              <li class={isWiredActive}>
+                <div
+                  class="has-tooltip-left"
+                  data-tooltip={i18n.str`only show orders where customers paid, but wire payments from payment provider are still pending`}
+                >
+                  <a onClick={onShowWired}>
+                    <i18n.Translate>Completed</i18n.Translate>
+                  </a>
+                </div>
+              </li>
+              <li class={isAllActive}>
+                <div
+                  class="has-tooltip-right"
+                  data-tooltip={i18n.str`remove all filters`}
+                >
+                  <a onClick={onShowAll}>
+                    <i18n.Translate>All</i18n.Translate>
+                  </a>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="column ">
+          <div class="buttons is-right">
+            <div class="field has-addons">
+              {jumpToDate && (
+                <div class="control">
+                  <a class="button is-fullwidth" onClick={() => onSelectDate(undefined)}>
+                    <span
+                      class="icon"
+                      data-tooltip={i18n.str`clear date filter`}
+                    >
+                      <i class="mdi mdi-close" />
+                    </span>
+                  </a>
+                </div>
+              )}
+              <div class="control">
+                <span class="has-tooltip-top" data-tooltip={dateTooltip}>
+                  <input
+                    class="input"
+                    type="text"
+                    readonly
+                    value={!jumpToDate ? "" : format(jumpToDate, dateFormatForSettings(settings))}
+                    placeholder={i18n.str`date (${dateFormatForSettings(settings)})`}
+                    onClick={() => {
+                      setPickDate(true);
+                    }}
+                  />
+                </span>
+              </div>
+              <div class="control">
+                <span class="has-tooltip-left" data-tooltip={dateTooltip}>
+                  <a
+                    class="button  is-fullwidth"
+                    onClick={() => {
+                      setPickDate(true);
+                    }}
+                  >
+                    <span class="icon">
+                      <i class="mdi mdi-calendar" />
+                    </span>
+                  </a>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <DatePicker
+        opened={pickDate}
+        closeFunction={() => setPickDate(false)}
+        dateReceiver={onSelectDate}
+      />
+
+      <CardTable
+        orders={orders}
+        onCreate={onCreate}
+        onCopyURL={onCopyURL}
+        onSelect={onSelectOrder}
+        onRefund={onRefundOrder}
+        hasMoreAfter={hasMoreAfter}
+        hasMoreBefore={hasMoreBefore}
+        onLoadMoreAfter={onLoadMoreAfter}
+        onLoadMoreBefore={onLoadMoreBefore}
+      />
+    </Fragment>
+  );
+}
diff --git a/packages/auditor-backoffice-ui/src/paths/deposit_confirmations/list/Table.tsx b/packages/auditor-backoffice-ui/src/paths/deposit_confirmations/list/Table.tsx
new file mode 100644
index 000000000..b2806bb79
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/paths/deposit_confirmations/list/Table.tsx
@@ -0,0 +1,417 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { Amounts } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { format } from "date-fns";
+import { h, VNode } from "preact";
+import { StateUpdater, useState } from "preact/hooks";
+import {
+  FormErrors,
+  FormProvider,
+} from "../../../../components/form/FormProvider.js";
+import { Input } from "../../../../components/form/Input.js";
+import { InputCurrency } from "../../../../components/form/InputCurrency.js";
+import { InputGroup } from "../../../../components/form/InputGroup.js";
+import { InputSelector } from "../../../../components/form/InputSelector.js";
+import { ConfirmModal } from "../../../../components/modal/index.js";
+import { useConfigContext } from "../../../../context/config.js";
+import { MerchantBackend, WithId } from "../../../../declaration.js";
+import { mergeRefunds } from "../../../../utils/amount.js";
+import { datetimeFormatForSettings, useSettings } from "../../../../hooks/useSettings.js";
+
+type Entity = MerchantBackend.Orders.OrderHistoryEntry & WithId;
+interface Props {
+  orders: Entity[];
+  onRefund: (value: Entity) => void;
+  onCopyURL: (id: string) => void;
+  onCreate: () => void;
+  onSelect: (order: Entity) => void;
+  onLoadMoreBefore?: () => void;
+  hasMoreBefore?: boolean;
+  hasMoreAfter?: boolean;
+  onLoadMoreAfter?: () => void;
+}
+
+export function CardTable({
+  orders,
+  onCreate,
+  onRefund,
+  onCopyURL,
+  onSelect,
+  onLoadMoreAfter,
+  onLoadMoreBefore,
+  hasMoreAfter,
+  hasMoreBefore,
+}: Props): VNode {
+  const [rowSelection, rowSelectionHandler] = useState<string[]>([]);
+
+  const { i18n } = useTranslationContext();
+
+  return (
+    <div class="card has-table">
+      <header class="card-header">
+        <p class="card-header-title">
+          <span class="icon">
+            <i class="mdi mdi-cash-register" />
+          </span>
+          <i18n.Translate>Orders</i18n.Translate>
+        </p>
+
+        <div class="card-header-icon" aria-label="more options" />
+
+        <div class="card-header-icon" aria-label="more options">
+          <span class="has-tooltip-left" data-tooltip={i18n.str`create order`}>
+            <button class="button is-info" type="button" onClick={onCreate}>
+              <span class="icon is-small">
+                <i class="mdi mdi-plus mdi-36px" />
+              </span>
+            </button>
+          </span>
+        </div>
+      </header>
+      <div class="card-content">
+        <div class="b-table has-pagination">
+          <div class="table-wrapper has-mobile-cards">
+            {orders.length > 0 ? (
+              <Table
+                instances={orders}
+                onSelect={onSelect}
+                onRefund={onRefund}
+                onCopyURL={(o) => onCopyURL(o.id)}
+                rowSelection={rowSelection}
+                rowSelectionHandler={rowSelectionHandler}
+                onLoadMoreAfter={onLoadMoreAfter}
+                onLoadMoreBefore={onLoadMoreBefore}
+                hasMoreAfter={hasMoreAfter}
+                hasMoreBefore={hasMoreBefore}
+              />
+            ) : (
+              <EmptyTable />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+interface TableProps {
+  rowSelection: string[];
+  instances: Entity[];
+  onRefund: (id: Entity) => void;
+  onCopyURL: (id: Entity) => void;
+  onSelect: (id: Entity) => void;
+  rowSelectionHandler: StateUpdater<string[]>;
+  onLoadMoreBefore?: () => void;
+  hasMoreBefore?: boolean;
+  hasMoreAfter?: boolean;
+  onLoadMoreAfter?: () => void;
+}
+
+function Table({
+  instances,
+  onSelect,
+  onRefund,
+  onCopyURL,
+  onLoadMoreAfter,
+  onLoadMoreBefore,
+  hasMoreAfter,
+  hasMoreBefore,
+}: TableProps): VNode {
+  const { i18n } = useTranslationContext();
+  const [settings] = useSettings();
+  return (
+    <div class="table-container">
+      {hasMoreBefore && (
+        <button
+          class="button is-fullwidth"
+          onClick={onLoadMoreBefore}
+        >
+          <i18n.Translate>load newer orders</i18n.Translate>
+        </button>
+      )}
+      <table class="table is-striped is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th style={{ minWidth: 100 }}>
+              <i18n.Translate>Date</i18n.Translate>
+            </th>
+            <th style={{ minWidth: 100 }}>
+              <i18n.Translate>Amount</i18n.Translate>
+            </th>
+            <th style={{ minWidth: 400 }}>
+              <i18n.Translate>Summary</i18n.Translate>
+            </th>
+            <th style={{ minWidth: 50 }} />
+          </tr>
+        </thead>
+        <tbody>
+          {instances.map((i) => {
+            return (
+              <tr key={i.id}>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.timestamp.t_s === "never"
+                    ? "never"
+                    : format(
+                      new Date(i.timestamp.t_s * 1000),
+                      datetimeFormatForSettings(settings),
+                    )}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.amount}
+                </td>
+                <td
+                  onClick={(): void => onSelect(i)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {i.summary}
+                </td>
+                <td class="is-actions-cell right-sticky">
+                  <div class="buttons is-right">
+                    {i.refundable && (
+                      <button
+                        class="button is-small is-danger jb-modal"
+                        type="button"
+                        onClick={(): void => onRefund(i)}
+                      >
+                        <i18n.Translate>Refund</i18n.Translate>
+                      </button>
+                    )}
+                    {!i.paid && (
+                      <button
+                        class="button is-small is-info jb-modal"
+                        type="button"
+                        onClick={(): void => onCopyURL(i)}
+                      >
+                        <i18n.Translate>copy url</i18n.Translate>
+                      </button>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      {hasMoreAfter && (
+        <button
+          class="button is-fullwidth"
+          onClick={onLoadMoreAfter}
+        >
+          <i18n.Translate>load older orders</i18n.Translate>
+        </button>
+      )}
+    </div>
+  );
+}
+
+function EmptyTable(): VNode {
+  const { i18n } = useTranslationContext();
+  return (
+    <div class="content has-text-grey has-text-centered">
+      <p>
+        <span class="icon is-large">
+          <i class="mdi mdi-emoticon-sad mdi-48px" />
+        </span>
+      </p>
+      <p>
+        <i18n.Translate>
+          No orders have been found matching your query!
+        </i18n.Translate>
+      </p>
+    </div>
+  );
+}
+
+interface RefundModalProps {
+  onCancel: () => void;
+  onConfirm: (value: MerchantBackend.Orders.RefundRequest) => void;
+  order: MerchantBackend.Orders.MerchantOrderStatusResponse;
+}
+
+export function RefundModal({
+  order,
+  onCancel,
+  onConfirm,
+}: RefundModalProps): VNode {
+  type State = { mainReason?: string; description?: string; refund?: string };
+  const [form, setValue] = useState<State>({});
+  const [settings] = useSettings();
+  const { i18n } = useTranslationContext();
+  // const [errors, setErrors] = useState<FormErrors<State>>({});
+
+  const refunds = (
+    order.order_status === "paid" ? order.refund_details : []
+  ).reduce(mergeRefunds, []);
+
+  const config = useConfigContext();
+  const totalRefunded = refunds
+    .map((r) => r.amount)
+    .reduce(
+      (p, c) => Amounts.add(p, Amounts.parseOrThrow(c)).amount,
+      Amounts.zeroOfCurrency(config.currency),
+    );
+  const orderPrice =
+    order.order_status === "paid"
+      ? Amounts.parseOrThrow(order.contract_terms.amount)
+      : undefined;
+  const totalRefundable = !orderPrice
+    ? Amounts.zeroOfCurrency(totalRefunded.currency)
+    : refunds.length
+      ? Amounts.sub(orderPrice, totalRefunded).amount
+      : orderPrice;
+
+  const isRefundable = Amounts.isNonZero(totalRefundable);
+  const duplicatedText = i18n.str`duplicated`;
+
+  const errors: FormErrors<State> = {
+    mainReason: !form.mainReason ? i18n.str`required` : undefined,
+    description:
+      !form.description && form.mainReason !== duplicatedText
+        ? i18n.str`required`
+        : undefined,
+    refund: !form.refund
+      ? i18n.str`required`
+      : !Amounts.parse(form.refund)
+        ? i18n.str`invalid format`
+        : Amounts.cmp(totalRefundable, Amounts.parse(form.refund)!) === -1
+          ? i18n.str`this value exceed the refundable amount`
+          : undefined,
+  };
+  const hasErrors = Object.keys(errors).some(
+    (k) => (errors as any)[k] !== undefined,
+  );
+
+  const validateAndConfirm = () => {
+    try {
+      if (!form.refund) return;
+      onConfirm({
+        refund: Amounts.stringify(
+          Amounts.add(Amounts.parse(form.refund)!, totalRefunded).amount,
+        ),
+        reason:
+          form.description === undefined
+            ? form.mainReason || ""
+            : `${form.mainReason}: ${form.description}`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //FIXME: parameters in the translation
+  return (
+    <ConfirmModal
+      description="refund"
+      danger
+      active
+      disabled={!isRefundable || hasErrors}
+      onCancel={onCancel}
+      onConfirm={validateAndConfirm}
+    >
+      {refunds.length > 0 && (
+        <div class="columns">
+          <div class="column is-12">
+            <InputGroup
+              name="asd"
+              label={`${Amounts.stringify(totalRefunded)} was already refunded`}
+            >
+              <table class="table is-fullwidth">
+                <thead>
+                  <tr>
+                    <th>
+                      <i18n.Translate>date</i18n.Translate>
+                    </th>
+                    <th>
+                      <i18n.Translate>amount</i18n.Translate>
+                    </th>
+                    <th>
+                      <i18n.Translate>reason</i18n.Translate>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {refunds.map((r) => {
+                    return (
+                      <tr key={r.timestamp.t_s}>
+                        <td>
+                          {r.timestamp.t_s === "never"
+                            ? "never"
+                            : format(
+                              new Date(r.timestamp.t_s * 1000),
+                              datetimeFormatForSettings(settings),
+                            )}
+                        </td>
+                        <td>{r.amount}</td>
+                        <td>{r.reason}</td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </InputGroup>
+          </div>
+        </div>
+      )}
+
+      {isRefundable && (
+        <FormProvider<State>
+          errors={errors}
+          object={form}
+          valueHandler={(d) => setValue(d as any)}
+        >
+          <InputCurrency<State>
+            name="refund"
+            label={i18n.str`Refund`}
+            tooltip={i18n.str`amount to be refunded`}
+          >
+            <i18n.Translate>Max refundable:</i18n.Translate>{" "}
+            {Amounts.stringify(totalRefundable)}
+          </InputCurrency>
+          <InputSelector
+            name="mainReason"
+            label={i18n.str`Reason`}
+            values={[
+              i18n.str`Choose one...`,
+              duplicatedText,
+              i18n.str`requested by the customer`,
+              i18n.str`other`,
+            ]}
+            tooltip={i18n.str`why this order is being refunded`}
+          />
+          {form.mainReason && form.mainReason !== duplicatedText ? (
+            <Input<State>
+              label={i18n.str`Description`}
+              name="description"
+              tooltip={i18n.str`more information to give context`}
+            />
+          ) : undefined}
+        </FormProvider>
+      )}
+    </ConfirmModal>
+  );
+}
diff --git a/packages/auditor-backoffice-ui/src/paths/deposit_confirmations/list/index.tsx b/packages/auditor-backoffice-ui/src/paths/deposit_confirmations/list/index.tsx
new file mode 100644
index 000000000..1bec26e28
--- /dev/null
+++ b/packages/auditor-backoffice-ui/src/paths/deposit_confirmations/list/index.tsx
@@ -0,0 +1,224 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import {
+  ErrorType,
+  HttpError,
+  useTranslationContext,
+} from "@gnu-taler/web-util/browser";
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { Loading } from "../../../components/exception/loading.js";
+import { NotificationCard } from "../../../components/menu/index.js";
+import { AuditorBackend } from "../../../declaration.js";
+import { Notification } from "../../../utils/types.js";
+import { ListPage } from "./ListPage.js";
+import { RefundModal } from "./Table.js";
+import { HttpStatusCode } from "@gnu-taler/taler-util";
+
+interface Props {
+  onUnauthorized: () => VNode;
+  onLoadError: (error: HttpError<AuditorBackend.ErrorDetail>) => VNode;
+  onNotFound: () => VNode;
+  onSelect: (id: string) => void;
+  onCreate: () => void;
+}
+
+export default function DepositConfirmationList({
+  onUnauthorized,
+  onLoadError,
+  onCreate,
+  onSelect,
+  onNotFound,
+}: Props): VNode {
+  const [filter, setFilter] = useState<InstanceOrderFilter>({ paid: "no" });
+  const [orderToBeRefunded, setOrderToBeRefunded] = useState<
+    MerchantBackend.Orders.OrderHistoryEntry | undefined
+  >(undefined);
+
+  const setNewDate = (date?: Date): void =>
+    setFilter((prev) => ({ ...prev, date }));
+
+  const result = useInstanceOrders(filter, setNewDate);
+  const { refundOrder, getPaymentURL } = useOrderAPI();
+
+  const [notif, setNotif] = useState<Notification | undefined>(undefined);
+
+  const { i18n } = useTranslationContext();
+
+  if (result.loading) return <Loading />;
+  if (!result.ok) {
+    if (
+      result.type === ErrorType.CLIENT &&
+      result.status === HttpStatusCode.Unauthorized
+    )
+      return onUnauthorized();
+    if (
+      result.type === ErrorType.CLIENT &&
+      result.status === HttpStatusCode.NotFound
+    )
+      return onNotFound();
+    return onLoadError(result);
+  }
+
+  const isNotPaidActive = filter.paid === "no" ? "is-active" : "";
+  const isPaidActive = filter.paid === "yes" && filter.wired === undefined ? "is-active" : "";
+  const isRefundedActive = filter.refunded === "yes" ? "is-active" : "";
+  const isNotWiredActive = filter.wired === "no" && filter.paid === "yes" ? "is-active" : "";
+  const isWiredActive = filter.wired === "yes" ? "is-active" : "";
+  const isAllActive =
+    filter.paid === undefined &&
+      filter.refunded === undefined &&
+      filter.wired === undefined
+      ? "is-active"
+      : "";
+
+  return (
+    <section class="section is-main-section">
+      <NotificationCard notification={notif} />
+
+      <JumpToElementById
+        testIfExist={getPaymentURL} 
+        onSelect={onSelect}
+        description={i18n.str`jump to order with the given product ID`}
+        placeholder={i18n.str`order id`}
+      />
+
+      <ListPage
+        orders={result.data.orders.map((o) => ({ ...o, id: o.order_id }))}
+        onLoadMoreBefore={result.loadMorePrev}
+        hasMoreBefore={!result.isReachingStart}
+        onLoadMoreAfter={result.loadMore}
+        hasMoreAfter={!result.isReachingEnd}
+        onSelectOrder={(order) => onSelect(order.id)}
+        onRefundOrder={(value) => setOrderToBeRefunded(value)}
+        isAllActive={isAllActive}
+        isNotWiredActive={isNotWiredActive}
+        isWiredActive={isWiredActive}
+        isPaidActive={isPaidActive}
+        isNotPaidActive={isNotPaidActive}
+        isRefundedActive={isRefundedActive}
+        jumpToDate={filter.date}
+        onCopyURL={(id) =>
+          getPaymentURL(id).then((resp) => copyToClipboard(resp.data))
+        }
+        onCreate={onCreate}
+        onSelectDate={setNewDate}
+        onShowAll={() => setFilter({})}
+        onShowNotPaid={() => setFilter({ paid: "no" })}
+        onShowPaid={() => setFilter({ paid: "yes" })}
+        onShowRefunded={() => setFilter({ refunded: "yes" })}
+        onShowNotWired={() => setFilter({ wired: "no", paid: "yes" })}
+        onShowWired={() => setFilter({ wired: "yes" })}
+      />
+
+      {orderToBeRefunded && (
+        <RefundModalForTable
+          id={orderToBeRefunded.order_id}
+          onCancel={() => setOrderToBeRefunded(undefined)}
+          onConfirm={(value) =>
+            refundOrder(orderToBeRefunded.order_id, value)
+              .then(() =>
+                setNotif({
+                  message: i18n.str`refund created successfully`,
+                  type: "SUCCESS",
+                }),
+              )
+              .catch((error) =>
+                setNotif({
+                  message: i18n.str`could not create the refund`,
+                  type: "ERROR",
+                  description: error.message,
+                }),
+              )
+              .then(() => setOrderToBeRefunded(undefined))
+          }
+          onLoadError={(error) => {
+            setNotif({
+              message: i18n.str`could not create the refund`,
+              type: "ERROR",
+              description: error.message,
+            });
+            setOrderToBeRefunded(undefined);
+            return <div />;
+          }}
+          onUnauthorized={onUnauthorized}
+          onNotFound={() => {
+            setNotif({
+              message: i18n.str`could not get the order to refund`,
+              type: "ERROR",
+              // description: error.message
+            });
+            setOrderToBeRefunded(undefined);
+            return <div />;
+          }}
+        />
+      )}
+    </section>
+  );
+}
+
+interface RefundProps {
+  id: string;
+  onUnauthorized: () => VNode;
+  onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode;
+  onNotFound: () => VNode;
+  onCancel: () => void;
+  onConfirm: (m: MerchantBackend.Orders.RefundRequest) => void;
+}
+
+function RefundModalForTable({
+  id,
+  onUnauthorized,
+  onLoadError,
+  onNotFound,
+  onConfirm,
+  onCancel,
+}: RefundProps): VNode {
+  const result = useOrderDetails(id);
+
+  if (result.loading) return <Loading />;
+  if (!result.ok) {
+    if (
+      result.type === ErrorType.CLIENT &&
+      result.status === HttpStatusCode.Unauthorized
+    )
+      return onUnauthorized();
+    if (
+      result.type === ErrorType.CLIENT &&
+      result.status === HttpStatusCode.NotFound
+    )
+      return onNotFound();
+    return onLoadError(result);
+  }
+
+  return (
+    <RefundModal
+      order={result.data}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+    />
+  );
+}
+
+async function copyToClipboard(text: string): Promise<void> {
+  return navigator.clipboard.writeText(text);
+}
diff --git a/packages/merchant-backoffice-ui/src/Application.tsx b/packages/merchant-backoffice-ui/src/Application.tsx
index cf46a34d5..f1b8526b3 100644
--- a/packages/merchant-backoffice-ui/src/Application.tsx
+++ b/packages/merchant-backoffice-ui/src/Application.tsx
@@ -42,7 +42,7 @@ import { strings } from "./i18n/strings.js";
 
 export function Application(): VNode {
   return (
-    <BackendContextProvider>
+      <BackendContextProvider>
       <TranslationProvider source={strings}>
         <ApplicationStatusRoutes />
       </TranslationProvider>