1 files changed, 40 insertions, 10 deletions
diff --git a/packages/demobank-ui/src/pages/ProfileNavigation.tsx b/packages/demobank-ui/src/pages/ProfileNavigation.tsx
index ba02d07b9..8b7a8205f 100644
--- a/packages/demobank-ui/src/pages/ProfileNavigation.tsx
+++ b/packages/demobank-ui/src/pages/ProfileNavigation.tsx
@@ -13,13 +13,13 @@
  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 { assertUnreachable } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { VNode, h } from "preact";
+import { Fragment, VNode, h } from "preact";
 import { useBankCoreApiContext } from "../context/config.js";
-import { useBackendState } from "../hooks/backend.js";
-import { assertUnreachable } from "@gnu-taler/taler-util";
 import { useNavigationContext } from "../context/navigation.js";
-import { EmptyObject, RouteDefinition } from "../route.js";
+import { useBackendState } from "../hooks/backend.js";
+import { RouteDefinition } from "../route.js";
 
 export function ProfileNavigation({
   current,
@@ -27,20 +27,24 @@ export function ProfileNavigation({
   routeMyAccountDelete,
   routeMyAccountDetails,
   routeMyAccountPassword,
+  routeConversionConfig
 }: {
-  current: "details" | "delete" | "credentials" | "cashouts",
+  current: "details" | "delete" | "credentials" | "cashouts" | "conversion",
   routeMyAccountDetails: RouteDefinition;
   routeMyAccountDelete: RouteDefinition;
   routeMyAccountPassword: RouteDefinition;
   routeMyAccountCashout: RouteDefinition;
+  routeConversionConfig: RouteDefinition;
 }): VNode {
   const { i18n } = useTranslationContext();
   const { config } = useBankCoreApiContext();
   const { state: credentials } = useBackendState();
-  const nonAdminUser =
+  const isAdminUser =
     credentials.status !== "loggedIn"
       ? false
-      : !credentials.isUserAdministrator;
+      : credentials.isUserAdministrator;
+  const nonAdminUser = !isAdminUser;
+
   const { navigateTo } = useNavigationContext();
   return (
     <div>
@@ -71,6 +75,10 @@ export function ProfileNavigation({
                 navigateTo(routeMyAccountCashout.url({}));
                 return;
               }
+              case "conversion": {
+                navigateTo(routeConversionConfig.url({}));
+                return;
+              }
               default:
                 assertUnreachable(op);
             }
@@ -88,9 +96,14 @@ export function ProfileNavigation({
             <i18n.Translate>Credentials</i18n.Translate>
           </option>
           {config.allow_conversion ? (
-            <option value="cashouts" selected={current == "cashouts"}>
-              <i18n.Translate>Cashouts</i18n.Translate>
-            </option>
+            <Fragment>
+              <option value="cashouts" selected={current == "cashouts"}>
+                <i18n.Translate>Cashouts</i18n.Translate>
+              </option>
+              <option value="conversion" selected={current == "cashouts"}>
+                <i18n.Translate>Conversion</i18n.Translate>
+              </option>
+            </Fragment>
           ) : undefined}
         </select>
       </div>
@@ -165,6 +178,23 @@ export function ProfileNavigation({
               ></span>
             </a>
           ) : undefined}
+          {config.allow_conversion && isAdminUser ? (
+            <a
+              name="conversion config"
+              href={routeConversionConfig.url({})}
+              data-selected={current == "conversion"}
+              class="rounded-r-lg text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10"
+            >
+              <span>
+                <i18n.Translate>Conversion</i18n.Translate>
+              </span>
+              <span
+                aria-hidden="true"
+                data-selected={current == "conversion"}
+                class="bg-transparent data-[selected=true]:bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"
+              ></span>
+            </a>
+          ) : undefined}
         </nav>
       </div>
     </div>