feat: complete in-game commands, GUIs, admin panel fixes, and launcher enhancements

launcher/src/lib/types.ts

@@ -156,6 +156,7 @@ export interface UserLevelInfo {
   next_level_xp: number;
   progress_pct: number;
   title: string | null;
+  rank?: number | null;
   badges: string[];
   rewards: LevelReward[];
 }
@@ -316,3 +317,44 @@ export interface UserProfileView {
   created_at: string;
 }
 
+export interface MemberProfile {
+  uuid: string;
+  username: string;
+  role: string;
+  status: string;
+  skin_url: string | null;
+  global_level: number;
+  title: string | null;
+  playtime_secs: number;
+  last_seen: string | null;
+  online: boolean;
+  is_friend: boolean;
+}
+
+export interface ServerEconomyBalance {
+  server_id: number;
+  server_name: string;
+  balance: number;
+  currency_symbol: string;
+  last_updated: string;
+}
+
+export interface EconomyTransaction {
+  id: number;
+  server_id: number;
+  server_name?: string;
+  sender_uuid: string;
+  recipient_uuid: string;
+  amount: number;
+  tx_type: string;
+  description: string;
+  created_at: string;
+}
+
+export interface BaltopEntry {
+  rank: number;
+  uuid: string;
+  username: string;
+  balance: number;
+}
+

launcher/src/pages/Quests.svelte

@@ -51,7 +51,8 @@
       levelInfo = updatedLevel;
       // Mark as claimed locally
       userQuests = userQuests.map((uq) => {
-        if (uq.quest.id === questId) {
+        const id = uq.quest?.id || (uq as any).id;
+        if (id === questId) {
           return { ...uq, claimed: true };
         }
         return uq;
@@ -66,18 +67,29 @@
 
   const filteredQuests = $derived(
     userQuests.filter((uq) => {
-      if (uq.quest.quest_type !== activeTab) return false;
-      if (selectedCategory !== 'all' && uq.quest.category !== selectedCategory) return false;
+      const q = uq.quest || uq;
+      const qType = q.quest_type || (q as any).period || 'daily';
+      if (qType !== activeTab) return false;
+      const cat = q.category || 'mining';
+      if (selectedCategory !== 'all' && cat !== selectedCategory) return false;
       return true;
     })
   );
 
   const completedCount = $derived(
-    userQuests.filter((uq) => uq.quest.quest_type === activeTab && uq.completed).length
+    userQuests.filter((uq) => {
+      const q = uq.quest || uq;
+      const qType = q.quest_type || (q as any).period || 'daily';
+      return qType === activeTab && uq.completed;
+    }).length
   );
 
   const totalTabQuests = $derived(
-    userQuests.filter((uq) => uq.quest.quest_type === activeTab).length
+    userQuests.filter((uq) => {
+      const q = uq.quest || uq;
+      const qType = q.quest_type || (q as any).period || 'daily';
+      return qType === activeTab;
+    }).length
   );
 
   const unlockedAchievementsCount = $derived(
@@ -128,11 +140,19 @@
           <span class="lvl-label">LVL</span>
           <span class="lvl-number">{levelInfo.level}</span>
         </div>
+        {#if levelInfo.rank}
+          <div class="rank-badge-pill">
+            <Trophy size={11} /> #{levelInfo.rank}
+          </div>
+        {/if}
       </div>
       <div class="level-details">
         <div class="level-title-row">
           <div class="title-meta">
-            <span class="level-name">SCOPENET Global Level</span>
+            <span class="level-name">SCOPENET Progression</span>
+            {#if levelInfo.rank}
+              <span class="badge rank-title-badge"><Trophy size={12} /> Global Rank #{levelInfo.rank}</span>
+            {/if}
             {#if levelInfo.title}
               <span class="badge title-badge"><Award size={12} /> {levelInfo.title}</span>
             {/if}
@@ -146,7 +166,11 @@
         </div>
         <div class="level-footer">
           <span class="muted tiny">
-            Playing on any SCOPENET server earns Global XP. Unlocks exclusive titles, badges, and cosmetic items.
+            {#if levelInfo.rank}
+              You are currently ranked #{levelInfo.rank} globally! Earn XP across all servers to climb the leaderboard.
+            {:else}
+              Playing on any SCOPENET server earns Global XP. Unlocks exclusive titles, badges, and cosmetic items.
+            {/if}
           </span>
           {#if levelInfo.badges && levelInfo.badges.length > 0}
             <div class="badges-row">
@@ -242,9 +266,13 @@
         </div>
       {:else}
         <div class="quests-grid">
-          {#each filteredQuests as uq (uq.quest.id)}
-            {@const pct = Math.min(100, Math.round((uq.current_count / Math.max(1, uq.quest.target_count)) * 100))}
-            {@const IconComponent = categoryIcons[uq.quest.category] || Target}
+          {#each filteredQuests as uq ((uq.quest?.id || (uq as any).id))}
+            {@const q = uq.quest || uq}
+            {@const currentCount = uq.current_count ?? (uq as any).progress ?? 0}
+            {@const targetCount = q.target_count || (q as any).target_count || 1}
+            {@const pct = Math.min(100, Math.round((currentCount / Math.max(1, targetCount)) * 100))}
+            {@const IconComponent = categoryIcons[q.category] || Target}
+            {@const qId = q.id || (uq as any).id}
 
             <div class="quest-card glass" class:completed={uq.completed} class:claimed={uq.claimed}>
               <div class="quest-top">
@@ -253,19 +281,19 @@
                 </div>
                 <div class="quest-meta">
                   <div class="quest-title-row">
-                    <span class="quest-title">{uq.quest.title}</span>
-                    <span class="badge cat-badge">{uq.quest.category}</span>
+                    <span class="quest-title">{q.title}</span>
+                    <span class="badge cat-badge">{q.category}</span>
                   </div>
-                  <p class="quest-desc">{uq.quest.description}</p>
+                  <p class="quest-desc">{q.description}</p>
                 </div>
               </div>
 
               <div class="quest-progress-wrap">
                 <div class="progress-labels">
                   <span class="progress-ratio">
-                    <strong>{uq.current_count}</strong> / {uq.quest.target_count} ({pct}%)
+                    <strong>{currentCount}</strong> / {targetCount} ({pct}%)
                   </span>
-                  <span class="xp-badge">+{uq.quest.xp_reward} XP</span>
+                  <span class="xp-badge">+{q.xp_reward} XP</span>
                 </div>
                 <div class="progress-bar-bg">
                   <div class="progress-fill" style:width="{pct}%"></div>
@@ -278,15 +306,15 @@
                 {:else if uq.completed}
                   <button
                     class="primary claim-btn"
-                    onclick={() => handleClaimQuest(uq.quest.id)}
-                    disabled={claimingQuestId === uq.quest.id}
+                    onclick={() => handleClaimQuest(qId)}
+                    disabled={claimingQuestId === qId}
                   >
-                    {#if claimingQuestId === uq.quest.id}
+                    {#if claimingQuestId === qId}
                       <LoaderCircle size={14} class="spin" />
                     {:else}
                       <Gift size={14} />
                     {/if}
-                    Claim +{uq.quest.xp_reward} XP
+                    Claim +{q.xp_reward} XP
                   </button>
                 {:else}
                   <span class="badge in-progress-badge">In Progress</span>
@@ -369,6 +397,26 @@
     line-height: 1;
     color: var(--text);
   }
+  .rank-badge-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    background: color-mix(in srgb, #f59e0b 25%, transparent);
+    color: #f59e0b;
+    border: 1px solid color-mix(in srgb, #f59e0b 50%, transparent);
+    border-radius: 99rem;
+    padding: 2px 7px;
+    font-size: 0.72rem;
+    font-weight: 700;
+    margin-top: -6px;
+    z-index: 2;
+  }
+  .rank-title-badge {
+    background: color-mix(in srgb, #f59e0b 20%, transparent);
+    color: #f59e0b;
+    border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
+    font-weight: 700;
+  }
   .level-details {
     flex: 1;
     display: flex;

launcher/src/pages/Social.svelte

@@ -2,15 +2,16 @@
   import { onMount } from 'svelte';
   import {
     Users, UserPlus, MessageSquare, Gamepad2, Send, Check, X, Trash2,
-    Clock, ExternalLink, LoaderCircle, RefreshCw, Circle, UserX, Sparkles
+    Clock, ExternalLink, LoaderCircle, RefreshCw, Circle, UserX, Sparkles,
+    Search, Trophy, Shield
   } from '@lucide/svelte';
   import Avatar from '../components/Avatar.svelte';
   import Modal from '../components/Modal.svelte';
   import { activeAccount, app, instances, toast } from '../lib/store.svelte';
   import { invoke } from '../lib/tauri';
-  import type { FriendInfo, DirectMessage, GameInvite } from '../lib/types';
+  import type { FriendInfo, DirectMessage, GameInvite, MemberProfile } from '../lib/types';
 
-  let activeSection = $state<'friends' | 'messages' | 'invites'>('friends');
+  let activeSection = $state<'friends' | 'members' | 'messages' | 'invites'>('friends');
   let friendsFilter = $state<'all' | 'online' | 'pending'>('all');
   let loading = $state(false);
 
@@ -25,6 +26,12 @@
   let addFriendUsername = $state('');
   let sendingFriendReq = $state(false);
 
+  // Members Directory / Search
+  let memberSearchQuery = $state('');
+  let membersList = $state<MemberProfile[]>([]);
+  let loadingMembers = $state(false);
+  let addingFriendUuid = $state<string | null>(null);
+
   // Send Game Invite Modal
   let inviteModalOpen = $state(false);
   let inviteTargetFriend = $state<FriendInfo | null>(null);
@@ -47,14 +54,43 @@
     }
   }
 
+  async function searchMembers() {
+    loadingMembers = true;
+    try {
+      membersList = await invoke<MemberProfile[]>('search_members', { query: memberSearchQuery.trim() });
+    } catch (e: any) {
+      toast(e?.message ?? 'Failed to search members', 'error');
+    } finally {
+      loadingMembers = false;
+    }
+  }
+
+  async function handleAddMemberAsFriend(username: string, uuid: string) {
+    addingFriendUuid = uuid;
+    try {
+      await invoke('send_friend_request', { username, friendUsername: username });
+      toast(`Friend request sent to ${username}!`, 'ok');
+      await searchMembers();
+      await loadData();
+    } catch (e: any) {
+      toast(e?.message ?? 'Failed to send friend request', 'error');
+    } finally {
+      addingFriendUuid = null;
+    }
+  }
+
   async function handleSendFriendRequest() {
     if (!addFriendUsername.trim()) return;
     sendingFriendReq = true;
+    const target = addFriendUsername.trim();
     try {
-      await invoke('send_friend_request', { friendUsername: addFriendUsername.trim() });
-      toast(`Friend request sent to ${addFriendUsername.trim()}!`, 'ok');
+      await invoke('send_friend_request', { username: target, friendUsername: target });
+      toast(`Friend request sent to ${target}!`, 'ok');
       addFriendUsername = '';
       await loadData();
+      if (activeSection === 'members') {
+        await searchMembers();
+      }
     } catch (e: any) {
       toast(e?.message ?? 'Failed to send friend request', 'error');
     } finally {
@@ -64,7 +100,7 @@
 
   async function handleRespondRequest(friendUuid: string, accept: boolean) {
     try {
-      await invoke('respond_friend_request', { friendUuid, accept });
+      await invoke('respond_friend_request', { targetUuid: friendUuid, friendUuid, accept });
       toast(accept ? 'Friend request accepted!' : 'Request declined.', 'ok');
       await loadData();
     } catch (e: any) {
@@ -74,7 +110,7 @@
 
   async function handleRemoveFriend(friendUuid: string) {
     try {
-      await invoke('remove_friend', { friendUuid });
+      await invoke('remove_friend', { targetUuid: friendUuid, friendUuid });
       friends = friends.filter((f) => f.uuid !== friendUuid);
       if (activeChatFriend?.uuid === friendUuid) {
         activeChatFriend = null;
@@ -191,6 +227,9 @@
       <button class:active={activeSection === 'friends'} onclick={() => (activeSection = 'friends')}>
         <Users size={15} /> Friends ({acceptedFriends.length})
       </button>
+      <button class:active={activeSection === 'members'} onclick={() => { activeSection = 'members'; if (!membersList.length) searchMembers(); }}>
+        <Sparkles size={15} /> Find Players
+      </button>
       <button class:active={activeSection === 'messages'} onclick={() => (activeSection = 'messages')}>
         <MessageSquare size={15} /> Direct Messages
       </button>
@@ -346,6 +385,100 @@
         </div>
       {/if}
     </div>
+  {:else if activeSection === 'members'}
+    <!-- Members Directory Section -->
+    <div class="members-layout">
+      <div class="members-search-bar glass">
+        <Search size={18} class="muted" />
+        <input
+          type="text"
+          placeholder="Search all SCOPENET network players by username..."
+          bind:value={memberSearchQuery}
+          onkeydown={(e) => e.key === 'Enter' && searchMembers()}
+          class="members-search-input"
+        />
+        <button
+          class="primary sm"
+          onclick={searchMembers}
+          disabled={loadingMembers}
+        >
+          {#if loadingMembers}<LoaderCircle size={14} class="spin" />{:else}<Search size={14} /> Search{/if}
+        </button>
+      </div>
+
+      {#if loadingMembers && !membersList.length}
+        <div class="center-state"><LoaderCircle class="spin" size={32} /></div>
+      {:else if membersList.length === 0}
+        <div class="empty-state glass">
+          <Users size={36} class="muted" />
+          <p class="muted">No players found matching "{memberSearchQuery}". Try another username!</p>
+        </div>
+      {:else}
+        <div class="members-grid">
+          {#each membersList as member (member.uuid)}
+            {@const isMe = member.uuid === activeAccount()?.uuid}
+            <div class="member-card glass" class:is-me={isMe}>
+              <div class="member-card-top">
+                <div class="avatar-wrap" role="button" tabindex="0" onclick={() => (app.viewProfileUuid = member.uuid)} onkeydown={(e) => e.key === 'Enter' && (app.viewProfileUuid = member.uuid)}>
+                  <Avatar uuid={member.uuid} name={member.username} size={2.8} />
+                  <span class="status-dot" class:online={member.online}></span>
+                </div>
+                <div class="member-meta">
+                  <div class="name-row">
+                    <strong class="member-name" onclick={() => (app.viewProfileUuid = member.uuid)}>{member.username}</strong>
+                    {#if isMe}
+                      <span class="badge me-tag">You</span>
+                    {/if}
+                  </div>
+                  <div class="member-sub-info">
+                    <span class="badge level-pill">Lvl {member.global_level}</span>
+                    {#if member.title}
+                      <span class="badge title-pill">{member.title}</span>
+                    {/if}
+                  </div>
+                  <span class="online-status tiny muted">
+                    {member.online ? 'Online on Network' : member.last_seen ? `Active ${new Date(member.last_seen).toLocaleDateString()}` : 'Offline'}
+                  </span>
+                </div>
+              </div>
+
+              <div class="member-card-actions">
+                {#if isMe}
+                  <button class="ghost sm w-full" onclick={() => (app.viewProfileUuid = member.uuid)}>
+                    View My Profile
+                  </button>
+                {:else if member.is_friend}
+                  <button class="secondary sm" onclick={() => {
+                    const friend = friends.find(f => f.uuid === member.uuid) || { uuid: member.uuid, username: member.username, status: 'accepted', is_online: member.online, playing_on: null };
+                    selectChatFriend(friend as FriendInfo);
+                  }}>
+                    <MessageSquare size={13} /> Message
+                  </button>
+                  <button class="ghost sm icon" onclick={() => (app.viewProfileUuid = member.uuid)} title="View Profile">
+                    <ExternalLink size={13} />
+                  </button>
+                {:else}
+                  <button
+                    class="primary sm"
+                    onclick={() => handleAddMemberAsFriend(member.username, member.uuid)}
+                    disabled={addingFriendUuid === member.uuid}
+                  >
+                    {#if addingFriendUuid === member.uuid}
+                      <LoaderCircle size={13} class="spin" />
+                    {:else}
+                      <UserPlus size={13} /> Add Friend
+                    {/if}
+                  </button>
+                  <button class="ghost sm icon" onclick={() => (app.viewProfileUuid = member.uuid)} title="View Profile">
+                    <ExternalLink size={13} />
+                  </button>
+                {/if}
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
   {:else if activeSection === 'messages'}
     <!-- Direct Messages Split View -->
     <div class="messages-split glass">
@@ -910,4 +1043,102 @@
     text-align: center;
     border-radius: var(--radius);
   }
+  .members-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .members-search-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 1rem;
+    border-radius: var(--radius);
+  }
+  .members-search-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--text);
+    font-size: 0.95rem;
+  }
+  .members-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1rem;
+  }
+  .member-card {
+    padding: 1.1rem;
+    border-radius: var(--radius);
+    display: flex;
+    flex-direction: column;
+    gap: 0.9rem;
+    transition: transform 0.15s, border-color 0.15s;
+  }
+  .member-card:hover {
+    transform: translateY(-2px);
+    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+  }
+  .member-card-top {
+    display: flex;
+    align-items: center;
+    gap: 0.85rem;
+  }
+  .avatar-wrap {
+    position: relative;
+    cursor: pointer;
+  }
+  .member-meta {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .name-row {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  .member-name {
+    font-size: 1rem;
+    font-weight: 700;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .member-name:hover {
+    color: var(--accent);
+  }
+  .member-sub-info {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    flex-wrap: wrap;
+  }
+  .level-pill {
+    background: color-mix(in srgb, var(--accent) 20%, transparent);
+    color: var(--accent);
+    font-weight: 700;
+  }
+  .title-pill {
+    background: color-mix(in srgb, #f59e0b 20%, transparent);
+    color: #f59e0b;
+  }
+  .me-tag {
+    background: color-mix(in srgb, var(--line) 40%, transparent);
+    color: var(--muted);
+  }
+  .member-card-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    border-top: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
+    padding-top: 0.75rem;
+  }
+  .w-full {
+    width: 100%;
+  }
 </style>

launcher/src/pages/Stats.svelte

@@ -2,14 +2,23 @@
   import {
     Trophy, Swords, Skull, Pickaxe, Clock, Box, MessageSquare, LogIn,
     RefreshCw, LoaderCircle, Users, Server, Flame, Sparkles, ChevronDown, Check,
+    Coins, DollarSign, Wallet, ArrowUpRight, ArrowDownLeft, TrendingUp, History,
   } from '@lucide/svelte';
   import Avatar from '../components/Avatar.svelte';
   import { activeAccount, app, toast } from '../lib/store.svelte';
   import { invoke } from '../lib/tauri';
+  import type { ServerEconomyBalance, BaltopEntry, EconomyTransaction } from '../lib/types';
 
-  let activeTab = $state<'personal' | 'leaderboard'>('personal');
+  let activeTab = $state<'personal' | 'economy' | 'leaderboard'>('personal');
   let loadingPersonal = $state(false);
   let loadingLeaderboard = $state(false);
+  let loadingEconomy = $state(false);
+
+  // Economy state
+  let economyBalances = $state<ServerEconomyBalance[]>([]);
+  let selectedEconomyServerId = $state<number | null>(null);
+  let baltopData = $state<BaltopEntry[]>([]);
+  let transactions = $state<EconomyTransaction[]>([]);
 
   // Personal stats data
   let personalData = $state<{
@@ -142,11 +151,47 @@
     }
   }
 
+  async function loadEconomy() {
+    loadingEconomy = true;
+    try {
+      const [balances, txs] = await Promise.all([
+        invoke<ServerEconomyBalance[]>('get_economy_balances').catch(() => []),
+        invoke<EconomyTransaction[]>('get_transactions').catch(() => []),
+      ]);
+      economyBalances = balances;
+      transactions = txs;
+      if (!selectedEconomyServerId && balances.length > 0) {
+        selectedEconomyServerId = balances[0].server_id;
+      }
+      if (selectedEconomyServerId) {
+        await loadBaltop(selectedEconomyServerId);
+      }
+    } catch (e: any) {
+      toast(e?.message ?? 'Failed to load economy data', 'error');
+    } finally {
+      loadingEconomy = false;
+    }
+  }
+
+  async function loadBaltop(serverId: number) {
+    try {
+      baltopData = await invoke<BaltopEntry[]>('get_server_baltop', { serverId });
+    } catch (e) {
+      baltopData = [];
+    }
+  }
+
+  function handleEconomyServerChange(serverId: number) {
+    selectedEconomyServerId = serverId;
+    loadBaltop(serverId);
+  }
+
   $effect(() => {
     if (app.view === 'stats') {
       loadPersonalStats();
       loadServers();
       loadLeaderboard();
+      loadEconomy();
     }
   });
 
@@ -178,6 +223,9 @@
       <button class:active={activeTab === 'personal'} onclick={() => (activeTab = 'personal')}>
         My Stats
       </button>
+      <button class:active={activeTab === 'economy'} onclick={() => { activeTab = 'economy'; loadEconomy(); }}>
+        <Coins size={14} /> Server Economy
+      </button>
       <button class:active={activeTab === 'leaderboard'} onclick={() => (activeTab = 'leaderboard')}>
         Leaderboards
       </button>
@@ -333,6 +381,149 @@
           </div>
         {/if}
       {/if}
+    {:else if activeTab === 'economy'}
+      <!-- Economy & Balances Tab -->
+      <div class="economy-view">
+        {#if loadingEconomy && !economyBalances.length}
+          <div class="center-state"><LoaderCircle size={28} class="spin" /></div>
+        {:else if !me || me.kind === 'offline'}
+          <div class="card glass empty-state">
+            <Coins size={36} class="muted" />
+            <h3>Server account required</h3>
+            <p class="muted small">In-game economy balances and transactions are synced to your SCOPENET server account.</p>
+            <button class="sm primary" onclick={() => (app.addAccount = true)}>Sign in with Server Account</button>
+          </div>
+        {:else}
+          <!-- Balances Section -->
+          <div class="section-card card glass">
+            <div class="row justify-between align-center">
+              <div>
+                <strong class="section-title">My Server Balances</strong>
+                <p class="muted tiny">Synced in real-time from SCOPENET economy plugins and mods.</p>
+              </div>
+              <button class="ghost sm icon" onclick={loadEconomy} title="Refresh balances">
+                <RefreshCw size={14} class={loadingEconomy ? 'spin' : ''} />
+              </button>
+            </div>
+
+            {#if economyBalances.length === 0}
+              <div class="empty-inline muted tiny">
+                No active currency balances found yet. Join a SCOPENET server to start earning money!
+              </div>
+            {:else}
+              <div class="econ-balances-grid">
+                {#each economyBalances as bal (bal.server_id)}
+                  <div
+                    class="econ-balance-card glass"
+                    class:selected={selectedEconomyServerId === bal.server_id}
+                    onclick={() => handleEconomyServerChange(bal.server_id)}
+                  >
+                    <div class="econ-card-top row justify-between align-center">
+                      <span class="server-badge">{bal.server_name}</span>
+                      <Wallet size={16} class="icon-accent" />
+                    </div>
+                    <div class="econ-balance-val">
+                      <span class="currency-sym">{bal.currency_symbol || '$'}</span>
+                      <span>{bal.balance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
+                    </div>
+                    <div class="econ-card-footer tiny muted">
+                      Updated {formatDate(bal.last_updated)}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
+
+          <!-- Server Baltop Leaderboard Section -->
+          <div class="section-card card glass">
+            <div class="row justify-between align-center">
+              <div>
+                <strong class="section-title">Server Rich List (Baltop)</strong>
+                <p class="muted tiny">Top richest players on the selected game server.</p>
+              </div>
+
+              {#if servers.length > 0}
+                <div class="row align-center gap-xs">
+                  <span class="tiny muted">Server:</span>
+                  <select
+                    class="filter-select"
+                    value={selectedEconomyServerId}
+                    onchange={(e) => handleEconomyServerChange(Number(e.currentTarget.value))}
+                  >
+                    {#each servers as s (s.id)}
+                      <option value={s.id}>{s.name}</option>
+                    {/each}
+                  </select>
+                </div>
+              {/if}
+            </div>
+
+            {#if baltopData.length === 0}
+              <div class="empty-inline muted tiny">
+                No baltop entries recorded for this server yet.
+              </div>
+            {:else}
+              <div class="baltop-list">
+                {#each baltopData as row}
+                  {@const isMe = row.uuid === me?.uuid}
+                  <div class="baltop-row" class:is-me={isMe}>
+                    <div class="row align-center gap-sm">
+                      <span class="baltop-rank" class:gold={row.rank === 1} class:silver={row.rank === 2} class:bronze={row.rank === 3}>
+                        #{row.rank}
+                      </span>
+                      <Avatar uuid={row.uuid} name={row.username} size={2.2} />
+                      <strong class="baltop-name">{row.username}</strong>
+                      {#if isMe}<span class="badge you">You</span>{/if}
+                    </div>
+                    <span class="baltop-val highlight">
+                      ${row.balance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                    </span>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
+
+          <!-- Transaction History Section -->
+          <div class="section-card card glass">
+            <div class="row justify-between align-center">
+              <div>
+                <strong class="section-title">Recent Transactions</strong>
+                <p class="muted tiny">Payments, player trades, market listings, and server shop logs.</p>
+              </div>
+            </div>
+
+            {#if transactions.length === 0}
+              <div class="empty-inline muted tiny">
+                No recorded economy transactions yet.
+              </div>
+            {:else}
+              <div class="tx-table-wrap">
+                <div class="tx-header">
+                  <span>Type</span>
+                  <span>Description</span>
+                  <span>Date</span>
+                  <span class="text-right">Amount</span>
+                </div>
+                {#each transactions.slice(0, 15) as tx (tx.id)}
+                  {@const isSender = tx.sender_uuid === me?.uuid}
+                  <div class="tx-row">
+                    <span class="tx-type-pill badge" class:send={isSender} class:receive={!isSender}>
+                      {#if isSender}<ArrowUpRight size={12} /> Sent{:else}<ArrowDownLeft size={12} /> Received{/if}
+                    </span>
+                    <span class="tx-desc" title={tx.description}>{tx.description || tx.tx_type}</span>
+                    <span class="tx-date tiny muted">{new Date(tx.created_at).toLocaleString()}</span>
+                    <span class="tx-amount text-right" class:negative={isSender} class:positive={!isSender}>
+                      {isSender ? '-' : '+'}${Math.abs(tx.amount).toFixed(2)}
+                    </span>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
     {:else}
       <!-- Leaderboards Tab -->
       <div class="filters-bar card glass row justify-between align-center">
@@ -500,4 +691,32 @@
     .table-header, .table-row { grid-template-columns: 2.5rem 1fr 7rem; }
     .col-extra { display: none; }
   }
+  .economy-view { display: flex; flex-direction: column; gap: 1.2rem; }
+  .section-title { font-size: 1.05rem; font-weight: 700; }
+  .empty-inline { padding: 1.2rem 0; }
+  .econ-balances-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; margin-top: 0.5rem; }
+  .econ-balance-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
+  .econ-balance-card:hover { transform: translateY(-2px); }
+  .econ-balance-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
+  .server-badge { font-size: 0.82rem; font-weight: 700; color: var(--accent); }
+  .econ-balance-val { font-size: 1.6rem; font-weight: 800; display: flex; align-items: baseline; gap: 0.2rem; font-variant-numeric: tabular-nums; }
+  .currency-sym { font-size: 1.1rem; color: var(--muted); }
+  .baltop-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
+  .baltop-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 50%, transparent); border: 1px solid var(--line); }
+  .baltop-row.is-me { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
+  .baltop-rank { font-weight: 800; font-size: 0.95rem; min-width: 2rem; font-variant-numeric: tabular-nums; }
+  .baltop-rank.gold { color: #f59e0b; }
+  .baltop-rank.silver { color: #94a3b8; }
+  .baltop-rank.bronze { color: #d97706; }
+  .baltop-name { font-size: 0.95rem; }
+  .baltop-val { font-size: 1.05rem; }
+  .tx-table-wrap { display: flex; flex-direction: column; margin-top: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
+  .tx-header { display: grid; grid-template-columns: 7rem 1fr 12rem 8rem; padding: 0.65rem 1rem; font-size: 0.78rem; text-transform: uppercase; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
+  .tx-row { display: grid; grid-template-columns: 7rem 1fr 12rem 8rem; align-items: center; padding: 0.7rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 40%, transparent); font-size: 0.85rem; }
+  .tx-type-pill.send { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
+  .tx-type-pill.receive { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
+  .tx-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .tx-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
+  .tx-amount.negative { color: var(--danger); }
+  .tx-amount.positive { color: var(--success); }
 </style>