Update Dashboard UI

.env.development

@@ -1,5 +1,4 @@
 VITE_API_BASE_URL="http://localhost:4242"
-VITE_API_MOCKING_ENABLED=false
 
 VITE_KEYCLOAK_URL="http://localhost:8080/"
 VITE_KEYCLOAK_REALM="dev"

.env.production

@@ -1,2 +1 @@
 VITE_API_BASE_URL=http://127.0.0.1:3338
-VITE_API_MOCKING_ENABLED=false

src/components/AppSidebar.tsx

@@ -1,9 +1,8 @@
-import { Bitcoin, Home, Inbox, Settings, InfoIcon, LifeBuoy, Send, TrendingUpIcon } from "lucide-react"
+import { Bitcoin, Home, Inbox } from "lucide-react"
 import { Sidebar, SidebarContent, SidebarFooter, SidebarRail } from "@/components/ui/sidebar"
 import { NavUser } from "./nav/NavUser"
-import { randomAvatar } from "@/utils/dev"
 import { NavMain } from "./nav/NavMain"
-import { NavSecondary } from "./nav/NavSecondary"
+import { useKeycloak } from "../lib/keycloak-user"
 
 const data = {
   navMain: [
@@ -17,11 +16,6 @@
       url: "/balances",
       icon: Bitcoin,
     },
-    {
-      title: "Earnings",
-      url: "/earnings",
-      icon: TrendingUpIcon,
-    },
     {
       title: "Quotes",
       url: "/quotes",
@@ -47,60 +41,20 @@
           title: "Rejected",
           url: "/quotes/rejected",
         },
-        /*{
-          title: "Expired",
-          url: "/quotes/expired",
-        },*/
       ],
     },
-    {
-      title: "Settings",
-      url: "/settings",
-      icon: Settings,
-      items: [
-        {
-          title: "General",
-          url: "/settings",
-        },
-      ],
-    },
-    {
-      title: "Info",
-      url: "/info",
-      icon: InfoIcon,
-    },
-  ],
-
-  navSecondary: [
-    {
-      title: "Support",
-      url: "/#",
-      icon: LifeBuoy,
-    },
-    {
-      title: "Feedback",
-      url: "/#",
-      icon: Send,
-    },
   ],
 }
 
 export function AppSidebar() {
+  const { user, isLoading } = useKeycloak()
+
   return (
     <Sidebar collapsible="icon">
       <SidebarContent>
         <NavMain items={data.navMain} />
-        <NavSecondary items={data.navSecondary} className="mt-auto" />
       </SidebarContent>
-      <SidebarFooter>
-        <NavUser
-          user={{
-            name: "Account",
-            email: "",
-            avatar: randomAvatar("women", "0283bf290884eed3a7ca2663fc0260de2e2064d6b355ea13f98dec004b7a7ead99"),
-          }}
-        />
-      </SidebarFooter>
+      <SidebarFooter>{!isLoading && user && <NavUser user={user} />}</SidebarFooter>
       <SidebarRail />
     </Sidebar>
   )

src/components/nav/NavUser.tsx

@@ -23,6 +23,8 @@
 }) {
   const { isMobile } = useSidebar()
 
+  const initials = user.name.length > 0 ? user.name[0].toUpperCase() : "U"
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>
@@ -31,14 +33,16 @@
             <SidebarMenuButton
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-              tooltip={user.name}
+              tooltip={user.name || "Unknown User"}
             >
               <Avatar className="h-8 w-8 rounded-lg">
-                <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback className="rounded-lg">{user.name}</AvatarFallback>
+                <div className="w-full h-full flex items-center justify-center text-white font-semibold text-sm bg-[#f59e0b]">
+                  {initials}
+                </div>
               </Avatar>
+
               <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">{user.name}</span>
+                <span className="truncate font-semibold">{user.name || "Unknown User"}</span>
                 <span className="truncate text-xs">{user.email}</span>
               </div>
               <ChevronsUpDown className="ml-auto size-4" />
@@ -57,7 +61,7 @@
                   <AvatarFallback className="rounded-lg">CN</AvatarFallback>
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-semibold">{user.name}</span>
+                  <span className="truncate font-semibold">{user.name || "Unknown User"}</span>
                   <span className="truncate text-xs">{user.email}</span>
                 </div>
               </div>

src/generated/client/@tanstack/react-query.gen.ts

@@ -1,8 +1,8 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-import { type Options, listQuotes, listPendingQuotes, adminLookupQuote, adminUpdateQuote, resolveOffer, enquireQuote, lookupQuote } from '../sdk.gen';
+import { type Options, listQuotes, listPendingQuotes, adminLookupQuote, adminUpdateQuote, resolveOffer, enquireQuote, lookupQuote, debitBalance, creditBalance } from '../sdk.gen';
 import { queryOptions, type UseMutationOptions, type DefaultError } from '@tanstack/react-query';
-import type { ListQuotesData, ListPendingQuotesData, AdminLookupQuoteData, AdminUpdateQuoteData, AdminUpdateQuoteResponse, ResolveOfferData, EnquireQuoteData, EnquireQuoteResponse, LookupQuoteData } from '../types.gen';
+import type { ListQuotesData, ListPendingQuotesData, AdminLookupQuoteData, AdminUpdateQuoteData, AdminUpdateQuoteResponse, ResolveOfferData, EnquireQuoteData, EnquireQuoteResponse, LookupQuoteData, DebitData} from '../types.gen';
 import { client as _heyApiClient } from '../client.gen';
 
 export type QueryKey<TOptions extends Options> = [
@@ -195,4 +195,38 @@
         },
         queryKey: lookupQuoteQueryKey(options)
     });
-};
+};
+
+export const debitBalanceQueryKey = (options?: Options<DebitData>) => createQueryKey('debitBalance', options);
+
+export const debitBalanceOptions = (options?: Options<DebitData>) => {
+    return queryOptions({
+        queryFn: async ({ queryKey, signal }) => {
+            const { data } = await debitBalance({
+                ...options,
+                ...queryKey[0],
+                signal,
+                throwOnError: true
+            });
+            return data;
+        },
+        queryKey: debitBalanceQueryKey(options)
+    });
+};
+
+export const creditBalanceQueryKey = (options?: Options<DebitData>) => createQueryKey('creditBalance', options);
+
+export const creditBalanceOptions = (options?: Options<DebitData>) => {
+    return queryOptions({
+        queryFn: async ({ queryKey, signal }) => {
+            const { data } = await creditBalance({
+                ...options,
+                ...queryKey[0],
+                signal,
+                throwOnError: true
+            });
+            return data;
+        },
+        queryKey: creditBalanceQueryKey(options)
+    });
+};

src/generated/client/sdk.gen.ts

@@ -1,7 +1,7 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
 import type { Options as ClientOptions, TDataShape, Client } from '@hey-api/client-fetch';
-import type { ListQuotesData, ListQuotesResponse, ListPendingQuotesData, ListPendingQuotesResponse, AdminLookupQuoteData, AdminLookupQuoteResponse, AdminUpdateQuoteData, AdminUpdateQuoteResponse, ResolveOfferData, EnquireQuoteData, EnquireQuoteResponse, LookupQuoteData, LookupQuoteResponse, ActivateKeysetData, ActivateKeysetResponse } from './types.gen';
+import type { ListQuotesData, ListQuotesResponse, ListPendingQuotesData, ListPendingQuotesResponse, AdminLookupQuoteData, AdminLookupQuoteResponse, AdminUpdateQuoteData, AdminUpdateQuoteResponse, ResolveOfferData, EnquireQuoteData, EnquireQuoteResponse, LookupQuoteData, LookupQuoteResponse, ActivateKeysetData, ActivateKeysetResponse, DebitData, CreditData, ECashBalance, OnChainBalanceData, OnChainData} from './types.gen';
 import { client as _heyApiClient } from './client.gen';
 
 export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = ClientOptions<TData, ThrowOnError> & {
@@ -98,4 +98,30 @@
             ...options?.headers
         }
     });
-};
+};
+
+
+/**
+  * --------------------------- Balance Check
+*/
+
+export const debitBalance = <ThrowOnError extends boolean = false>(options: Options<DebitData, ThrowOnError>) => {
+    return (options.client ?? _heyApiClient).get<ECashBalance, unknown, ThrowOnError>({
+        url: '/v1/admin/balance/debit',
+        ...options
+    });
+};
+
+export const creditBalance = <ThrowOnError extends boolean = false>(options: Options<CreditData, ThrowOnError>) => {
+    return (options.client ?? _heyApiClient).get<ECashBalance, unknown, ThrowOnError>({
+        url: '/v1/admin/balance/credit',
+        ...options
+    });
+};
+
+export const onchainBalance = <ThrowOnError extends boolean = false>(options: Options<OnChainData, ThrowOnError>) => {
+    return (options.client ?? _heyApiClient).get<OnChainBalanceData, unknown, ThrowOnError>({
+        url: '/v1/admin/onchain/balance',
+        ...options
+    });
+};

src/generated/client/types.gen.ts

@@ -27,6 +27,14 @@ export type ListReplyLight = {
  */
 export type Amount = number;
 
+
+export type PayeePublicData = {
+    Ident: IdentityPublicData;
+} | {
+    Anon: AnonPublicData;
+};
+
+
 /**
  * --------------------------- Enquire mint quote
  */
@@ -36,7 +44,7 @@ export type BillInfo = {
     endorsees: Array<IdentityPublicData>;
     id: string;
     maturity_date: string;
-    payee: IdentityPublicData;
+    payee: PayeePublicData;
     sum: number;
 };
 
@@ -109,6 +117,12 @@ export type IdentityPublicData = PostalAddress & {
     type: ContactType;
 };
 
+export type AnonPublicData = {
+  node_id: string;
+  email?: string | null;
+  nostr_relays: Array<string>;
+}
+
 /**
  * --------------------------- Quote info request
  */
@@ -405,4 +419,46 @@ export type ActivateKeysetResponses = {
     200: unknown;
 };
 
-export type ActivateKeysetResponse = ActivateKeysetResponses[keyof ActivateKeysetResponses];
+export type ActivateKeysetResponse = ActivateKeysetResponses[keyof ActivateKeysetResponses];
+
+/**
+ * Currency unit used for ECash
+ */
+export type CurrencyUnit = string;
+
+/**
+ * ECash balance information
+ */
+export type ECashBalance = {
+    amount: Amount;
+    unit: CurrencyUnit;
+};
+
+export type DebitData = {
+    body?: never;
+    path?: never;
+    query?: never;
+    url: '/v1/admin/balance/debit';
+};
+
+export type CreditData = {
+    body?: never;
+    path?: never;
+    query?: never;
+    url: '/v1/admin/balance/credit';
+};
+
+export type OnChainBalanceData = {
+  immature: number;
+  trusted_pending: number;
+  untrusted_pending: number;
+  confirmed: number;
+};
+
+
+export type OnChainData = {
+  body?: never;
+  path?: never;
+  query?: never;
+  url: '/v1/admin/onchain/balance';
+};

src/lib/api-client.ts

@@ -23,5 +23,17 @@
   return request
 })
 
+const originalFetch = window.fetch
+window.fetch = async function (...args) {
+  try {
+    console.log("Refreshing token...")
+    await keycloak.updateToken(30)
+  } catch (error) {
+    console.error("Failed to refresh token:", error)
+  }
+
+  return originalFetch.apply(this, args)
+}
+
 export const client = heyApiClient
 export { sdk }