diff --git a/index.html b/index.html
index cf80385c..1a1cfb8c 100644
--- a/index.html
+++ b/index.html
@@ -73,10 +73,10 @@
       background-color: var(--initial-loader-bg, #fff) !important;
       color: var(--initial-text-color, #000) !important;
       transition: none !important;
+      overflow: hidden;
     }
     html {
-      overflow-x: hidden;
-      overflow-y: scroll;
+      overflow: hidden;
       background-color: var(--initial-loader-bg, #fff) !important;
     }
     body, #app {
@@ -88,15 +88,14 @@
       min-height: 100vh;
     }
     #loading-bg {
-      position: absolute;
+      position: fixed;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       background: var(--initial-loader-bg, #fff);
-      block-size: 100%;
+      inset: 0;
       gap: 2rem 0;
-      inline-size: 100%;
     }
     .loading-wrapper {
       position: relative;
@@ -420,6 +419,9 @@
       // Remove loader immediately for specific pages
       const loader = document.getElementById('loading-bg')
       if (loader) loader.remove()
+      // Restore overflow
+      document.documentElement.style.overflow = ''
+      document.body.style.overflow = ''
     } else {
       // Normal loader behavior for other pages
       window.addEventListener('app-ready', () => {
@@ -429,7 +431,12 @@
               const loader = document.getElementById('loading-bg')
               if (loader) {
                 loader.classList.add('fade-out')
-                setTimeout(() => loader.remove(), 800)
+                setTimeout(() => {
+                  loader.remove()
+                  // Restore overflow after loader is removed
+                  document.documentElement.style.overflow = ''
+                  document.body.style.overflow = ''
+                }, 800)
               }
             })
           })
diff --git a/src/layouts/components/UserProfile.vue b/src/layouts/components/UserProfile.vue
index 1aafe7cc..c9065e92 100644
--- a/src/layouts/components/UserProfile.vue
+++ b/src/layouts/components/UserProfile.vue
@@ -125,6 +125,13 @@ async function logout() {
 
 const userProfileList = [
   { type: "divider" },
+  {
+    type: "navItem",
+    icon: "tabler-credit-card",
+    titleKey: "userProfile.billingAndPayments",
+    to: "/billing/payments",
+  },
+  { type: "divider" },
 
   // {
   //   type: "navItem",
@@ -136,16 +143,6 @@ const userProfileList = [
   //   icon: "tabler-settings",
   //   title: "Settings",
   // },
-  // {
-  //   type: "navItem",
-  //   icon: "tabler-file-dollar",
-  //   title: "Billing Plan",
-  //   badgeProps: {
-  //     color: "error",
-  //     content: "4",
-  //   },
-  // },
-  // { type: "divider" },
 
   // {
   //   type: "navItem",
@@ -239,15 +236,18 @@ const userProfileList = [
               <VListItem
                 v-if="item.type === 'navItem'"
                 :to="item.to"
+                color="default"
+                :active="false"
               >
                 <template #prepend>
                   <VIcon
                     :icon="item.icon"
                     size="22"
+                    color="default"
                   />
                 </template>
 
-                <VListItemTitle>{{ item.title }}</VListItemTitle>
+                <VListItemTitle>{{ item.titleKey ? $t(item.titleKey) : item.title }}</VListItemTitle>
 
                 <template
                   v-if="item.badgeProps"
@@ -275,7 +275,7 @@ const userProfileList = [
                 append-icon="tabler-logout"
                 @click="logout"
               >
-                Logout
+                {{ $t('userProfile.logout') }}
               </VBtn>
             </div>
           </PerfectScrollbar>
diff --git a/src/pages/billing/payments.vue b/src/pages/billing/payments.vue
new file mode 100644
index 00000000..031717b7
--- /dev/null
+++ b/src/pages/billing/payments.vue
@@ -0,0 +1,2854 @@
+<route lang="yaml">
+meta:
+  privilege:
+    - user
+    - admin
+    - fluxteam
+</route>
+
+<template>
+  <div>
+    <!-- Loading State -->
+    <LoadingSpinner
+      v-if="loading"
+      icon="tabler-credit-card"
+      :icon-size="56"
+      :rotate-icon="true"
+      :title="$t('pages.billing.loading')"
+      :message="$t('pages.billing.fetchingPaymentHistory')"
+    />
+
+    <!-- Page Header -->
+    <div v-else class="mb-8">
+      <div class="d-flex align-center justify-space-between mb-2">
+        <div>
+          <h1 class="text-h4 font-weight-bold mb-1">
+            {{ $t('pages.billing.title') }}
+          </h1>
+          <p class="text-body-2 text-medium-emphasis">
+            {{ $t('pages.billing.subtitle') }}
+          </p>
+        </div>
+        <VBtn
+          v-if="totalPaid > 0"
+          variant="flat"
+          color="primary"
+          prepend-icon="tabler-download"
+          @click="exportDialogOpen = true"
+        >
+          <template #prepend>
+            <VIcon icon="tabler-download" size="20" />
+          </template>
+          {{ $t('pages.billing.export') }}
+        </VBtn>
+      </div>
+    </div>
+
+    <!-- No Data State -->
+    <VCard v-if="!loading && totalPaid === 0">
+      <VCardText class="text-center py-12">
+        <VIcon
+          icon="tabler-receipt-off"
+          size="64"
+          color="disabled"
+          class="mb-4"
+        />
+        <h2 class="text-h5 mb-2">
+          {{ $t('pages.billing.noPaymentHistory') }}
+        </h2>
+        <p class="text-body-1 text-medium-emphasis">
+          {{ $t('pages.billing.noPaymentsYet') }}
+        </p>
+      </VCardText>
+    </VCard>
+
+    <!-- Billing Data -->
+    <template v-if="!loading && totalPaid > 0">
+      <!-- Payment Summary Stats -->
+      <VRow class="mb-6">
+        <!-- Total Paid Card -->
+        <VCol cols="12" sm="6" lg="3">
+          <VCard elevation="2" border hover class="h-100">
+                <VCardText class="pa-5">
+                  <div class="d-flex align-center justify-space-between mb-3">
+                    <VAvatar size="42" color="success" variant="tonal">
+                      <VIcon icon="tabler-coin" size="24" />
+                    </VAvatar>
+                    <VChip color="success" variant="flat" size="x-small">
+                      <VIcon icon="tabler-trending-up" size="12" start />
+                      100%
+                    </VChip>
+                  </div>
+                  <div class="text-caption text-uppercase text-medium-emphasis mb-1" style="letter-spacing: 0.5px;">
+                    {{ $t('pages.billing.totalPaid') }}
+                  </div>
+                  <div class="d-flex align-baseline mb-1">
+                    <h2 class="text-h4 font-weight-bold">
+                      {{ totalPaid.toFixed(2) }} FLUX
+                    </h2>
+                  </div>
+                  <div class="text-caption text-medium-emphasis mb-3">
+                    {{ registrations }} {{ $t('pages.billing.applications') }}
+                  </div>
+                  <VDivider class="mb-3" />
+                  <div class="mb-2">
+                    <div class="text-caption text-medium-emphasis mb-1" style="font-size: 0.7rem;">
+                      {{ $t('pages.billing.firstTransaction') }}
+                    </div>
+                    <VChip color="success" variant="tonal" size="small" style="font-size: 0.75rem;">
+                      <VIcon icon="tabler-clock-play" size="12" start />
+                      {{ firstTransaction ? formatDate(firstTransaction.timestamp) : '-' }}
+                    </VChip>
+                  </div>
+                  <div>
+                    <div class="text-caption text-medium-emphasis mb-1" style="font-size: 0.7rem;">
+                      {{ $t('pages.billing.lastTransaction') }}
+                    </div>
+                    <VChip color="info" variant="tonal" size="small" style="font-size: 0.75rem;">
+                      <VIcon icon="tabler-clock-stop" size="12" start />
+                      {{ lastTransaction ? formatDate(lastTransaction.timestamp) : '-' }}
+                    </VChip>
+                  </div>
+                </VCardText>
+          </VCard>
+        </VCol>
+
+        <!-- Transactions Card -->
+        <VCol cols="12" sm="6" lg="3">
+          <VCard elevation="2" border hover class="h-100">
+                <VCardText class="pa-5">
+                  <div class="d-flex align-center justify-space-between mb-3">
+                    <VAvatar size="42" color="info" variant="tonal">
+                      <VIcon icon="tabler-receipt" size="24" />
+                    </VAvatar>
+                    <VChip color="info" variant="flat" size="x-small">
+                      <VIcon icon="tabler-list" size="12" start />
+                      Total
+                    </VChip>
+                  </div>
+                  <div class="text-caption text-uppercase text-medium-emphasis mb-1" style="letter-spacing: 0.5px;">
+                    {{ $t('pages.billing.stats.transactions') }}
+                  </div>
+                  <div class="d-flex align-baseline mb-2">
+                    <h2 class="text-h4 font-weight-bold">
+                      {{ totalTransactions }}
+                    </h2>
+                  </div>
+                  <div class="text-caption text-medium-emphasis d-flex justify-space-between mb-3">
+                    <span class="d-flex align-center gap-2">
+                      <VAvatar size="20" color="success" variant="tonal">
+                        <VIcon icon="tabler-plus" size="12" />
+                      </VAvatar>
+                      {{ totalTransactions > 0 ? ((registrations / totalTransactions) * 100).toFixed(1) : 0 }}%
+                    </span>
+                    <span class="d-flex align-center gap-2">
+                      <VAvatar size="20" color="warning" variant="tonal">
+                        <VIcon icon="tabler-refresh" size="12" />
+                      </VAvatar>
+                      {{ totalTransactions > 0 ? ((updates / totalTransactions) * 100).toFixed(1) : 0 }}%
+                    </span>
+                  </div>
+                  <VDivider class="mb-3" />
+                  <div class="d-flex flex-column gap-2">
+                    <div>
+                      <div class="text-caption text-medium-emphasis mb-1" style="font-size: 0.7rem;">
+                        {{ $t('pages.billing.stats.averageCost') }}
+                      </div>
+                      <VChip color="info" variant="tonal" size="small" style="font-size: 0.75rem; width: 100%;">
+                        <VIcon icon="tabler-chart-line" size="12" start />
+                        {{ avgTransactionCost.toFixed(2) }} FLUX
+                      </VChip>
+                    </div>
+                    <div>
+                      <div class="text-caption text-medium-emphasis mb-1" style="font-size: 0.7rem;">
+                        {{ $t('pages.billing.stats.highestPayment') }}
+                      </div>
+                      <VChip color="success" variant="tonal" size="small" style="font-size: 0.75rem; width: 100%;">
+                        <VIcon icon="tabler-arrow-up" size="12" start />
+                        {{ highestTransaction.toFixed(2) }} FLUX
+                      </VChip>
+                    </div>
+                  </div>
+                </VCardText>
+          </VCard>
+        </VCol>
+
+        <!-- Registrations Card -->
+        <VCol cols="12" sm="6" lg="3">
+          <VCard elevation="2" border hover class="h-100">
+                <VCardText class="pa-5">
+                  <div class="d-flex align-center justify-space-between mb-3">
+                    <VAvatar size="42" color="success" variant="tonal">
+                      <VIcon icon="tabler-square-rounded-plus" size="24" />
+                    </VAvatar>
+                    <VChip color="success" variant="flat" size="x-small">
+                      <VIcon icon="tabler-percentage" size="12" start />
+                      {{ ((registrations / totalTransactions) * 100).toFixed(0) }}%
+                    </VChip>
+                  </div>
+                  <div class="text-caption text-uppercase text-medium-emphasis mb-1" style="letter-spacing: 0.5px;">
+                    {{ $t('pages.billing.types.appregister') }}
+                  </div>
+                  <div class="d-flex align-baseline mb-2">
+                    <h2 class="text-h4 font-weight-bold">
+                      {{ registrations }}
+                    </h2>
+                  </div>
+                  <div class="text-caption text-medium-emphasis mb-3">
+                    {{ registrationPaid.toFixed(2) }} FLUX
+                  </div>
+                  <VDivider class="mb-3" />
+                  <div class="d-flex flex-column gap-2">
+                    <div>
+                      <div class="text-caption text-medium-emphasis mb-1" style="font-size: 0.7rem;">
+                        {{ $t('pages.billing.stats.averageCost') }}
+                      </div>
+                      <VChip color="success" variant="tonal" size="small" style="font-size: 0.75rem; width: 100%;">
+                        <VIcon icon="tabler-chart-line" size="12" start />
+                        {{ avgRegistrationCost.toFixed(2) }} FLUX
+                      </VChip>
+                    </div>
+                    <div>
+                      <div class="text-caption text-medium-emphasis mb-1" style="font-size: 0.7rem;">
+                        Share of Total
+                      </div>
+                      <VChip color="success" variant="tonal" size="small" style="font-size: 0.75rem; width: 100%;">
+                        <VIcon icon="tabler-percentage" size="12" start />
+                        {{ ((registrationPaid / totalPaid) * 100).toFixed(1) }}%
+                      </VChip>
+                    </div>
+                  </div>
+                </VCardText>
+          </VCard>
+        </VCol>
+
+        <!-- Updates Card -->
+        <VCol cols="12" sm="6" lg="3">
+          <VCard elevation="2" border hover class="h-100">
+                <VCardText class="pa-5">
+                  <div class="d-flex align-center justify-space-between mb-3">
+                    <VAvatar size="42" color="warning" variant="tonal">
+                      <VIcon icon="tabler-refresh" size="24" />
+                    </VAvatar>
+                    <VChip color="warning" variant="flat" size="x-small">
+                      <VIcon icon="tabler-percentage" size="12" start />
+                      {{ ((updates / totalTransactions) * 100).toFixed(0) }}%
+                    </VChip>
+                  </div>
+                  <div class="text-caption text-uppercase text-medium-emphasis mb-1" style="letter-spacing: 0.5px;">
+                    {{ $t('pages.billing.types.appupdate') }}
+                  </div>
+                  <div class="d-flex align-baseline mb-2">
+                    <h2 class="text-h4 font-weight-bold">
+                      {{ updates }}
+                    </h2>
+                  </div>
+                  <div class="text-caption text-medium-emphasis mb-3">
+                    {{ updatePaid.toFixed(2) }} FLUX
+                  </div>
+                  <VDivider class="mb-3" />
+                  <div class="d-flex flex-column gap-2">
+                    <div>
+                      <div class="text-caption text-medium-emphasis mb-1" style="font-size: 0.7rem;">
+                        {{ $t('pages.billing.stats.averageCost') }}
+                      </div>
+                      <VChip color="warning" variant="tonal" size="small" style="font-size: 0.75rem; width: 100%;">
+                        <VIcon icon="tabler-chart-line" size="12" start />
+                        {{ avgUpdateCost.toFixed(2) }} FLUX
+                      </VChip>
+                    </div>
+                    <div>
+                      <div class="text-caption text-medium-emphasis mb-1" style="font-size: 0.7rem;">
+                        Share of Total
+                      </div>
+                      <VChip color="warning" variant="tonal" size="small" style="font-size: 0.75rem; width: 100%;">
+                        <VIcon icon="tabler-percentage" size="12" start />
+                        {{ ((updatePaid / totalPaid) * 100).toFixed(1) }}%
+                      </VChip>
+                    </div>
+                  </div>
+                </VCardText>
+          </VCard>
+        </VCol>
+      </VRow>
+
+      <!-- Currently Running Apps Section -->
+      <VRow v-if="myApps.length > 0" class="mb-6">
+        <VCol cols="12">
+          <VCard>
+            <VCardTitle class="d-flex align-center pa-5">
+              <VIcon icon="tabler-apps" class="me-2" />
+              {{ $t('pages.billing.currentlyRunningApps') }}
+              <VSpacer />
+              <VChip color="info" variant="tonal" size="small">
+                <VIcon icon="tabler-server" size="16" start />
+                {{ myApps.length }} Active
+              </VChip>
+            </VCardTitle>
+
+            <VDivider />
+
+            <VCardText class="pa-0">
+              <VVirtualScroll
+                :items="myApps"
+                :height="400"
+                item-height="80"
+                class="custom-scroll"
+              >
+                <template v-slot:default="{ item }">
+                  <VListItem class="py-1">
+                    <template v-slot:prepend>
+                      <VAvatar color="info" variant="tonal" size="32">
+                        <VIcon icon="tabler-brand-docker" size="18" />
+                      </VAvatar>
+                    </template>
+
+                    <VListItemTitle class="text-body-2 font-weight-medium d-flex align-center justify-space-between">
+                      <VChip size="small" variant="tonal" color="success">
+                        {{ item.name }}
+                      </VChip>
+                      <VChip size="x-small" variant="tonal" color="secondary">
+                        <VIcon icon="tabler-apps" size="12" start />
+                        {{ item.instances || (item.compose ? item.compose.length : 3) }} {{ $t('pages.billing.instances') }}
+                      </VChip>
+                    </VListItemTitle>
+                  </VListItem>
+                  <VDivider />
+                </template>
+              </VVirtualScroll>
+            </VCardText>
+          </VCard>
+        </VCol>
+      </VRow>
+
+      <!-- Payment Trends Chart -->
+      <VCard elevation="2" class="mb-6 billing-chart-container terminal-border">
+        <VCardText class="pa-6">
+          <!-- Chart Header -->
+          <div class="mb-4">
+            <h2 class="text-h5 font-weight-bold mb-1">
+              {{ $t('pages.billing.chart.title') }}
+            </h2>
+            <p class="text-caption text-medium-emphasis mb-0">
+              {{ selectedMetric === 'cumulative' ? $t('pages.billing.chart.cumulativeTotalPayments') : `${aggregationLabels.value[selectedAggregation]} ${$t('pages.billing.chart.spendingBreakdown')}` }}
+            </p>
+          </div>
+
+          <!-- Chart Controls -->
+          <VRow dense class="mb-4">
+            <VCol cols="12" sm="6" md="3">
+              <VChip size="x-small" variant="tonal" color="info" class="mb-2">
+                <VIcon icon="tabler-apps" size="14" start />
+                {{ $t('pages.billing.chart.appLabel') }}
+              </VChip>
+              <VSelect
+                v-model="chartAppFilter"
+                :items="uniqueApps"
+                density="compact"
+                variant="outlined"
+                hide-details
+                clearable
+                :placeholder="$t('pages.billing.chart.filterByApp')"
+                prepend-inner-icon="tabler-search"
+                :menu-props="{ maxHeight: 300 }"
+                @update:menu="appFilterMenuOpen = $event"
+              >
+                <template #prepend-item>
+                  <div class="pa-2">
+                    <VTextField
+                      v-model="appSearchQuery"
+                      density="compact"
+                      variant="outlined"
+                      :placeholder="$t('pages.billing.chart.searchApps')"
+                      hide-details
+                      clearable
+                      prepend-inner-icon="tabler-search"
+                      class="mb-2"
+                      @click.stop
+                      @keydown.stop
+                      @input.stop
+                      @mousedown.stop
+                    />
+                  </div>
+                </template>
+              </VSelect>
+            </VCol>
+
+            <VCol cols="12" sm="6" md="3">
+              <VChip size="x-small" variant="tonal" color="info" class="mb-2">
+                <VIcon icon="tabler-eye" size="14" start />
+                {{ $t('pages.billing.chart.viewLabel') }}
+              </VChip>
+              <VSelect
+                v-model="selectedAggregation"
+                :items="aggregationItems"
+                density="compact"
+                variant="outlined"
+                hide-details
+              />
+            </VCol>
+
+            <VCol cols="12" sm="6" md="3">
+              <VChip size="x-small" variant="tonal" color="info" class="mb-2">
+                <VIcon icon="tabler-calendar" size="14" start />
+                {{ $t('pages.billing.chart.periodLabel') }}
+              </VChip>
+              <VSelect
+                v-model="selectedTimeRange"
+                :items="timeRangeItems"
+                density="compact"
+                variant="outlined"
+                hide-details
+              />
+            </VCol>
+
+            <VCol cols="12" sm="6" md="3">
+              <VChip size="x-small" variant="tonal" color="info" class="mb-2">
+                <VIcon icon="tabler-chart-line" size="14" start />
+                {{ $t('pages.billing.chart.metricLabel') }}
+              </VChip>
+              <VSelect
+                v-model="selectedMetric"
+                :items="displayModeItems"
+                density="compact"
+                variant="outlined"
+                hide-details
+              />
+            </VCol>
+          </VRow>
+
+          <!-- Category Pills -->
+          <div class="billing-category-pills">
+            <button
+              class="billing-category-pill"
+              :class="{ active: showRegistrations && !showUpdates }"
+              :style="{ '--category-color': 'rgb(40, 199, 111)' }"
+              @click="toggleCategory('registrations')"
+            >
+              <span v-if="!smAndDown" class="billing-category-icon">
+                <VIcon icon="tabler-square-rounded-plus" size="16" />
+              </span>
+              <span class="billing-category-label">{{ $t('pages.billing.types.appregister') }}</span>
+            </button>
+            <button
+              class="billing-category-pill"
+              :class="{ active: showUpdates && !showRegistrations }"
+              :style="{ '--category-color': 'rgb(255, 159, 67)' }"
+              @click="toggleCategory('updates')"
+            >
+              <span v-if="!smAndDown" class="billing-category-icon">
+                <VIcon icon="tabler-refresh" size="16" />
+              </span>
+              <span class="billing-category-label">{{ $t('pages.billing.types.appupdate') }}</span>
+            </button>
+            <button
+              class="billing-category-pill"
+              :class="{ active: showRegistrations && showUpdates }"
+              :style="{ '--category-color': 'rgb(0, 200, 255)' }"
+              @click="toggleCategory('total')"
+            >
+              <span v-if="!smAndDown" class="billing-category-icon">
+                <VIcon icon="tabler-chart-line" size="16" />
+              </span>
+              <span class="billing-category-label">{{ $t('pages.billing.totalPaid') }}</span>
+            </button>
+          </div>
+
+          <!-- Chart Area -->
+          <div class="billing-chart-wrapper">
+            <Line :data="filteredLineChartData" :options="lineChartOptions" />
+          </div>
+        </VCardText>
+      </VCard>
+
+      <!-- Payment History Table -->
+      <VCard elevation="2">
+        <VCardText class="pa-8">
+          <div class="d-flex align-center justify-space-between mb-6 flex-wrap ga-3">
+            <div>
+              <h2 class="text-h5 font-weight-bold mb-1 text-no-wrap">
+                {{ $t('pages.billing.paymentHistory') }}
+              </h2>
+              <p class="text-body-2 text-medium-emphasis mb-0">
+                {{ $t('pages.billing.paymentSummary') }}
+              </p>
+            </div>
+            <div class="d-flex align-center gap-2 flex-wrap">
+              <VChip
+                color="success"
+                variant="tonal"
+                size="small"
+              >
+                <VIcon icon="tabler-apps" size="14" start />
+                {{ filteredAppPayments.length }} {{ searchQuery ? 'Found' : 'Apps' }}
+              </VChip>
+              <VChip
+                v-if="searchQuery && filteredAppPayments.length !== appPayments.length"
+                color="info"
+                variant="tonal"
+                size="small"
+              >
+                of {{ appPayments.length }} total
+              </VChip>
+            </div>
+          </div>
+
+          <div class="d-flex align-center gap-2 mb-4">
+            <VTextField
+              v-model="searchQuery"
+              prepend-inner-icon="tabler-search"
+              :placeholder="$t('pages.billing.searchByName')"
+              variant="outlined"
+              density="comfortable"
+              clearable
+              hide-details
+              class="flex-grow-1"
+            />
+            <VSelect
+              v-model="itemsPerPage"
+              :items="[10, 20, 50, 100, 200]"
+              density="comfortable"
+              variant="outlined"
+              color="grey"
+              bg-color="grey"
+              hide-details
+              style="min-width: 120px; max-width: 120px; flex-shrink: 0;"
+              prepend-inner-icon="tabler-list"
+            />
+          </div>
+
+          <VDataTable
+            :items="filteredAppPayments"
+            :headers="headers"
+            :loading="loading"
+            v-model:page="currentPage"
+            v-model:sort-by="sortBy"
+            :items-per-page="itemsPerPage"
+            density="comfortable"
+            hover
+            class="bordered-table"
+            hide-default-footer
+            must-sort
+            :header-props="{ class: 'text-no-wrap' }"
+          >
+            <template #item.appName="{ item, value, index, internalItem }">
+              <VChip
+                size="small"
+                variant="tonal"
+                color="info"
+                prepend-icon="tabler-brand-docker"
+                class="cursor-pointer"
+                @click="filterChartByApp(item?.raw?.appName || item?.appName || value)"
+              >
+                {{ item?.raw?.appName || item?.appName || value }}
+              </VChip>
+            </template>
+
+            <template #item.totalPaid="{ item }">
+              <VChip
+                size="small"
+                variant="tonal"
+                color="#FF6B35"
+                prepend-icon="tabler-coin"
+              >
+                {{ item.totalPaid.toFixed(4) }} FLUX
+              </VChip>
+            </template>
+
+            <template #item.count="{ item }">
+              <div class="d-flex align-center gap-2">
+                <VIcon icon="tabler-receipt-2" size="16" color="secondary" />
+                <span class="text-secondary font-weight-medium text-body-2">{{ item.count }}</span>
+              </div>
+            </template>
+
+            <template #item.avgPayment="{ item }">
+              <VChip
+                size="small"
+                variant="tonal"
+                color="success"
+                prepend-icon="tabler-chart-line"
+              >
+                {{ item.avgPayment.toFixed(4) }} FLUX
+              </VChip>
+            </template>
+
+            <template #item.lastPayment="{ item }">
+              <VChip
+                size="small"
+                variant="tonal"
+                color="grey"
+                prepend-icon="tabler-clock"
+              >
+                {{ formatDate(item.lastPayment) }}
+              </VChip>
+            </template>
+
+            <template #item.actions="{ item }">
+              <VBtn
+                size="small"
+                variant="tonal"
+                color="grey"
+                prepend-icon="tabler-eye"
+                @click="viewTransactions(item)"
+              >
+                {{ $t('pages.billing.table.details') }}
+              </VBtn>
+            </template>
+
+            <!-- Custom pagination footer -->
+            <template #bottom>
+              <div class="d-flex align-center justify-space-between pa-4 border-t flex-wrap ga-2">
+                <!-- Showing info - left side -->
+                <VChip
+                  color="default"
+                  variant="tonal"
+                  size="small"
+                >
+                  <VIcon icon="tabler-list-numbers" size="14" start />
+                  {{ $t('pages.billing.table.showing', { start: startItem, end: endItem, total: filteredAppPayments.length }) }}
+                </VChip>
+
+                <!-- Pagination controls - right side -->
+                <div class="d-flex align-center gap-1">
+                  <VBtn
+                    icon
+                    variant="tonal"
+                    color="grey"
+                    size="x-small"
+                    :disabled="currentPage === 1"
+                    @click="currentPage = 1"
+                    class="d-none d-sm-inline-flex"
+                  >
+                    <VIcon icon="tabler-chevrons-left" size="18" />
+                  </VBtn>
+                  <VBtn
+                    icon
+                    variant="tonal"
+                    color="grey"
+                    size="x-small"
+                    :disabled="currentPage === 1"
+                    @click="currentPage--"
+                  >
+                    <VIcon icon="tabler-chevron-left" size="18" />
+                  </VBtn>
+
+                  <div class="d-flex align-center gap-1">
+                    <template v-for="page in visiblePages" :key="page">
+                      <VBtn
+                        v-if="page !== '...'"
+                        :variant="currentPage === page ? 'flat' : 'tonal'"
+                        :color="currentPage === page ? 'primary' : 'grey'"
+                        size="x-small"
+                        min-width="32"
+                        @click="currentPage = page"
+                      >
+                        {{ page }}
+                      </VBtn>
+                      <span v-else class="px-1 text-caption">...</span>
+                    </template>
+                  </div>
+
+                  <VBtn
+                    icon
+                    variant="tonal"
+                    color="grey"
+                    size="x-small"
+                    :disabled="currentPage === totalPages"
+                    @click="currentPage++"
+                  >
+                    <VIcon icon="tabler-chevron-right" size="18" />
+                  </VBtn>
+                  <VBtn
+                    icon
+                    variant="tonal"
+                    color="grey"
+                    size="x-small"
+                    :disabled="currentPage === totalPages"
+                    @click="currentPage = totalPages"
+                    class="d-none d-sm-inline-flex"
+                  >
+                    <VIcon icon="tabler-chevrons-right" size="18" />
+                  </VBtn>
+                </div>
+              </div>
+            </template>
+          </VDataTable>
+        </VCardText>
+      </VCard>
+
+      <!-- Transaction Details Dialog -->
+      <VDialog
+        v-model="showTransactionDialog"
+        max-width="1000"
+      >
+        <VCard v-if="selectedApp">
+          <VCardTitle class="d-flex align-center justify-space-between pa-4 bg-primary" style="color: white !important;">
+            <div class="d-flex align-center gap-3">
+              <VIcon icon="tabler-apps" size="28" color="white" />
+              <div>
+                <div class="text-h6 font-weight-bold" style="color: white !important;">
+                  {{ selectedApp.appName }}
+                </div>
+                <div class="text-body-2" style="color: white !important; opacity: 0.9">
+                  {{ $t('pages.billing.paymentSummary') }}
+                </div>
+              </div>
+            </div>
+            <VBtn
+              icon="tabler-x"
+              variant="text"
+              size="small"
+              color="white"
+              @click="showTransactionDialog = false"
+            />
+          </VCardTitle>
+
+          <VDivider />
+
+          <!-- App Summary -->
+          <VCardText class="pa-4">
+            <VRow dense>
+              <VCol cols="6" md="3">
+                <VCard variant="flat" class="pa-3 stat-card stat-card--secondary">
+                  <div class="d-flex align-center gap-3">
+                    <VAvatar size="36" color="secondary" variant="tonal">
+                      <VIcon icon="tabler-coin" size="20" />
+                    </VAvatar>
+                    <div>
+                      <div class="text-caption text-medium-emphasis">{{ $t('pages.billing.totalPaid') }}</div>
+                      <div class="text-body-2 font-weight-bold">{{ selectedApp.totalPaid.toFixed(2) }} FLUX</div>
+                    </div>
+                  </div>
+                </VCard>
+              </VCol>
+              <VCol cols="6" md="3">
+                <VCard variant="flat" class="pa-3 stat-card stat-card--info">
+                  <div class="d-flex align-center gap-3">
+                    <VAvatar size="36" color="info" variant="tonal">
+                      <VIcon icon="tabler-receipt" size="20" />
+                    </VAvatar>
+                    <div>
+                      <div class="text-caption text-medium-emphasis">{{ $t('pages.billing.table.payments') }}</div>
+                      <div class="text-body-2 font-weight-bold">{{ selectedApp.count }}</div>
+                    </div>
+                  </div>
+                </VCard>
+              </VCol>
+              <VCol cols="6" md="3">
+                <VCard variant="flat" class="pa-3 stat-card stat-card--success">
+                  <div class="d-flex align-center gap-3">
+                    <VAvatar size="36" color="success" variant="tonal">
+                      <VIcon icon="tabler-chart-bar" size="20" />
+                    </VAvatar>
+                    <div>
+                      <div class="text-caption text-medium-emphasis">{{ $t('pages.billing.table.avgPayment') }}</div>
+                      <div class="text-body-2 font-weight-bold">{{ selectedApp.avgPayment.toFixed(2) }} FLUX</div>
+                    </div>
+                  </div>
+                </VCard>
+              </VCol>
+              <VCol cols="6" md="3">
+                <VCard variant="flat" class="pa-3 stat-card stat-card--warning">
+                  <div class="d-flex align-center gap-3">
+                    <VAvatar size="36" color="warning" variant="tonal">
+                      <VIcon icon="tabler-calendar" size="20" />
+                    </VAvatar>
+                    <div>
+                      <div class="text-caption text-medium-emphasis">{{ $t('pages.billing.lastTransaction') }}</div>
+                      <div class="text-body-2 font-weight-bold">{{ formatDate(selectedApp.lastPayment).split(',')[0] }}</div>
+                    </div>
+                  </div>
+                </VCard>
+              </VCol>
+            </VRow>
+          </VCardText>
+
+          <VDivider />
+
+          <VCardText class="pa-6">
+            <VDataTable
+              :items="selectedApp.transactions"
+              :headers="transactionHeaders"
+              :items-per-page="dialogItemsPerPage"
+              v-model:page="dialogPage"
+              density="comfortable"
+              class="bordered-table"
+            >
+              <template #item.type="{ item }">
+                <VChip
+                  :color="item.type === 'register' ? 'success' : item.type === 'renewal' ? 'info' : 'warning'"
+                  size="small"
+                  variant="tonal"
+                >
+                  <VIcon
+                    :icon="item.type === 'register' ? 'tabler-square-rounded-plus' : item.type === 'renewal' ? 'tabler-refresh' : 'tabler-edit'"
+                    size="14"
+                    start
+                  />
+                  {{ $t(`pages.billing.transactionTable.types.${item.type}`) }}
+                </VChip>
+              </template>
+
+              <template #item.amount="{ item }">
+                <div class="d-flex align-center gap-2">
+                  <VIcon v-if="item.amount !== 0.02" icon="tabler-coin" size="16" color="success" />
+                  <span v-if="item.amount !== 0.02" class="text-body-2">
+                    {{ parseFloat(item.amount.toFixed(8)) }} FLUX
+                  </span>
+                  <VChip
+                    v-if="item.amount === 0.02"
+                    color="info"
+                    size="small"
+                    variant="tonal"
+                  >
+                    {{ $t('pages.billing.transactionTable.free') }}
+                  </VChip>
+                </div>
+              </template>
+
+              <template #item.timestamp="{ item }">
+                <div class="d-flex align-center gap-2">
+                  <VIcon icon="tabler-clock" size="16" color="default" />
+                  <span class="text-body-2 text-medium-emphasis">
+                    {{ formatDate(item.timestamp) }}
+                  </span>
+                </div>
+              </template>
+
+              <template #item.height="{ item }">
+                <div class="d-flex align-center gap-2">
+                  <VIcon icon="tabler-stack" size="16" color="default" />
+                  <span class="text-body-2 text-medium-emphasis">
+                    {{ item.height }}
+                  </span>
+                </div>
+              </template>
+
+              <template #item.txid="{ item }">
+                <VBtn
+                  :href="`https://explorer.runonflux.io/tx/${item.txid}`"
+                  target="_blank"
+                  variant="text"
+                  size="small"
+                  color="default"
+                  prepend-icon="tabler-external-link"
+                >
+                  {{ item.txid.substring(0, 12) }}...
+                </VBtn>
+              </template>
+
+              <!-- Custom pagination footer -->
+              <template #bottom>
+                <div class="d-flex align-center justify-space-between pa-4 border-t flex-wrap ga-2">
+                  <VChip color="default" variant="tonal" size="small">
+                    <VIcon icon="tabler-list-numbers" size="14" start />
+                    {{ $t('pages.billing.table.showing', { start: dialogStartItem, end: dialogEndItem, total: selectedApp.transactions.length }) }}
+                  </VChip>
+
+                  <div class="d-flex align-center gap-1">
+                    <VBtn
+                      icon variant="tonal" color="grey" size="x-small"
+                      :disabled="dialogPage === 1"
+                      @click="dialogPage = 1"
+                      class="d-none d-sm-inline-flex"
+                    >
+                      <VIcon icon="tabler-chevrons-left" size="18" />
+                    </VBtn>
+                    <VBtn
+                      icon variant="tonal" color="grey" size="x-small"
+                      :disabled="dialogPage === 1"
+                      @click="dialogPage--"
+                    >
+                      <VIcon icon="tabler-chevron-left" size="18" />
+                    </VBtn>
+
+                    <div class="d-flex align-center gap-1">
+                      <template v-for="page in dialogVisiblePages" :key="page">
+                        <VBtn
+                          v-if="page !== '...'"
+                          :variant="dialogPage === page ? 'flat' : 'tonal'"
+                          :color="dialogPage === page ? 'primary' : 'grey'"
+                          size="x-small"
+                          min-width="32"
+                          @click="dialogPage = page"
+                        >
+                          {{ page }}
+                        </VBtn>
+                        <span v-else class="px-1 text-caption">...</span>
+                      </template>
+                    </div>
+
+                    <VBtn
+                      icon variant="tonal" color="grey" size="x-small"
+                      :disabled="dialogPage === dialogTotalPages"
+                      @click="dialogPage++"
+                    >
+                      <VIcon icon="tabler-chevron-right" size="18" />
+                    </VBtn>
+                    <VBtn
+                      icon variant="tonal" color="grey" size="x-small"
+                      :disabled="dialogPage === dialogTotalPages"
+                      @click="dialogPage = dialogTotalPages"
+                      class="d-none d-sm-inline-flex"
+                    >
+                      <VIcon icon="tabler-chevrons-right" size="18" />
+                    </VBtn>
+                  </div>
+                </div>
+              </template>
+            </VDataTable>
+          </VCardText>
+        </VCard>
+      </VDialog>
+    </template>
+
+    <!-- Export Dialog -->
+    <VDialog
+      v-model="exportDialogOpen"
+      max-width="500"
+    >
+      <VCard>
+        <VCardTitle class="d-flex align-center gap-2 pa-3 bg-primary text-white">
+          <VIcon icon="tabler-download" size="22" color="white" />
+          <span>{{ $t('pages.billing.exportDialog.title') }}</span>
+        </VCardTitle>
+
+        <VDivider />
+
+        <VCardText class="pa-5">
+          <p class="text-body-1 text-medium-emphasis mb-4">
+            {{ $t('pages.billing.exportDialog.dateRange') }}
+          </p>
+
+          <div
+            class="pa-4 rounded"
+            style="background-color: rgba(var(--v-theme-on-surface), 0.04); border: 1px solid rgba(var(--v-theme-on-surface), 0.12)"
+          >
+            <VRadioGroup
+              v-model="exportPeriod"
+              color="primary"
+              class="export-radio-group"
+              hide-details
+            >
+              <VRadio
+                value="all"
+                :label="$t('pages.billing.exportDialog.allTime')"
+              />
+              <VRadio
+                value="7d"
+                :label="$t('pages.billing.chart.last7Days')"
+              />
+              <VRadio
+                value="30d"
+                :label="$t('pages.billing.exportDialog.last30Days')"
+              />
+              <VRadio
+                value="90d"
+                :label="$t('pages.billing.exportDialog.last90Days')"
+              />
+              <VRadio
+                value="365d"
+                :label="$t('pages.billing.exportDialog.lastYear')"
+              />
+              <VRadio
+                value="custom"
+                :label="$t('pages.billing.exportDialog.customRange')"
+              />
+            </VRadioGroup>
+          </div>
+
+          <!-- Custom Date Range -->
+          <div
+            v-if="exportPeriod === 'custom'"
+            class="mt-4 pa-4 rounded"
+            style="background-color: rgba(var(--v-theme-on-surface), 0.04); border: 1px solid rgba(var(--v-theme-on-surface), 0.12)"
+          >
+            <VRow>
+              <VCol cols="12" sm="6">
+                <label class="text-caption text-medium-emphasis mb-2 d-block">{{ $t('pages.billing.exportDialog.startDate') }}</label>
+                <flat-pickr
+                  v-model="exportCustomStartDate"
+                  :config="flatpickrConfig"
+                  class="flatpickr-input"
+                  :placeholder="$t('pages.billing.exportDialog.startDate')"
+                />
+              </VCol>
+              <VCol cols="12" sm="6">
+                <label class="text-caption text-medium-emphasis mb-2 d-block">{{ $t('pages.billing.exportDialog.endDate') }}</label>
+                <flat-pickr
+                  v-model="exportCustomEndDate"
+                  :config="flatpickrConfig"
+                  class="flatpickr-input"
+                  :placeholder="$t('pages.billing.exportDialog.endDate')"
+                />
+              </VCol>
+            </VRow>
+
+            <!-- Validation Error Alert -->
+            <VAlert
+              v-if="exportValidationError"
+              type="error"
+              variant="tonal"
+              density="compact"
+              class="mt-3"
+            >
+              {{ exportValidationError }}
+            </VAlert>
+          </div>
+        </VCardText>
+
+        <VDivider />
+
+        <VCardActions class="pa-4">
+          <VSpacer />
+          <VBtn
+            variant="text"
+            color="error"
+            size="small"
+            @click="exportDialogOpen = false"
+          >
+            {{ $t('pages.billing.exportDialog.cancel') }}
+          </VBtn>
+          <VBtn
+            variant="flat"
+            color="primary"
+            size="small"
+            prepend-icon="tabler-download"
+            @click="exportCSV"
+          >
+            {{ $t('pages.billing.exportDialog.export') }}
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useFluxStore } from '@/stores/flux'
+import { storeToRefs } from 'pinia'
+import { useSEO } from '@/composables/useSEO'
+import { useI18n } from 'vue-i18n'
+import BillingService from '@/services/BillingService'
+import { Doughnut, Line } from 'vue-chartjs'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, Filler } from 'chart.js'
+import { useTheme, useDisplay } from 'vuetify'
+import LoadingSpinner from '@/components/Marketplace/LoadingSpinner.vue'
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
+
+ChartJS.register(ArcElement, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, Filler)
+
+const router = useRouter()
+const fluxStore = useFluxStore()
+const { zelid } = storeToRefs(fluxStore)
+const theme = useTheme()
+const { t } = useI18n()
+const { smAndDown } = useDisplay()
+
+// SEO configuration - exclude from search engines and robots
+useSEO({
+  title: 'Billing & Payments',
+  description: 'Private billing and payment history page',
+  robots: 'noindex, nofollow',
+})
+
+// Dynamically load flatpickr theme based on current theme
+const loadFlatpickrTheme = () => {
+  // Remove existing flatpickr theme styles
+  const existingStyles = document.querySelectorAll('style[data-flatpickr-theme]')
+  existingStyles.forEach(style => style.remove())
+
+  // Dynamically import theme CSS
+  if (theme.global.current.value.dark) {
+    import('flatpickr/dist/themes/dark.css')
+  } else {
+    import('flatpickr/dist/themes/light.css')
+  }
+}
+
+// Watch for theme changes
+watch(() => theme.global.current.value.dark, () => {
+  loadFlatpickrTheme()
+}, { immediate: true })
+
+const loading = ref(false)
+const transactions = ref([])
+const myApps = ref([])
+const showTransactionDialog = ref(false)
+const selectedApp = ref(null)
+const searchQuery = ref('')
+const appSearchQuery = ref('')
+
+// Pagination state
+const itemsPerPage = ref(10)
+const currentPage = ref(1)
+const sortBy = ref([{ key: 'totalPaid', order: 'desc' }])
+
+// Chart controls
+const selectedMetric = ref('cumulative')  // 'monthly' or 'cumulative'
+const selectedAggregation = ref('monthly')  // 'daily', 'weekly', 'monthly'
+const selectedTimeRange = ref('all')
+const chartAppFilter = ref(null)  // Filter chart by app name (null = all apps)
+const appFilterMenuOpen = ref(false)  // Track if app filter dropdown is open
+const showRegistrations = ref(true)
+const showUpdates = ref(true)
+
+// Export dialog
+const exportDialogOpen = ref(false)
+const exportPeriod = ref('all')
+const exportCustomStartDate = ref('')
+const exportCustomEndDate = ref('')
+const exportValidationError = ref('')
+
+// Reset export dialog to defaults when closed
+watch(exportDialogOpen, (isOpen) => {
+  if (!isOpen) {
+    // Reset to defaults when dialog closes
+    exportPeriod.value = 'all'
+    exportCustomStartDate.value = ''
+    exportCustomEndDate.value = ''
+    exportValidationError.value = ''
+  }
+})
+
+// Clear validation error when export period or dates change
+watch(exportPeriod, () => {
+  exportValidationError.value = ''
+})
+
+watch([exportCustomStartDate, exportCustomEndDate], () => {
+  exportValidationError.value = ''
+})
+
+// Flatpickr configuration
+const flatpickrConfig = {
+  dateFormat: 'Y-m-d',
+  allowInput: true,
+}
+
+const aggregationLabels = computed(() => ({
+  daily: t('pages.billing.chart.aggregation.daily'),
+  weekly: t('pages.billing.chart.aggregation.weekly'),
+  monthly: t('pages.billing.chart.aggregation.monthly'),
+}))
+
+const aggregationItems = computed(() => [
+  { value: 'daily', title: t('pages.billing.chart.aggregation.daily') },
+  { value: 'weekly', title: t('pages.billing.chart.aggregation.weekly') },
+  { value: 'monthly', title: t('pages.billing.chart.aggregation.monthly') },
+])
+
+const timeRangeItems = computed(() => [
+  { value: '7d', title: t('pages.billing.chart.timeRanges.7d') },
+  { value: '30d', title: t('pages.billing.chart.timeRanges.30d') },
+  { value: '90d', title: t('pages.billing.chart.timeRanges.90d') },
+  { value: '1y', title: t('pages.billing.chart.timeRanges.1y') },
+  { value: 'all', title: t('pages.billing.chart.timeRanges.all') },
+])
+
+const displayModeItems = computed(() => [
+  { value: 'monthly', title: t('pages.billing.chart.displayModes.periodTotal') },
+  { value: 'cumulative', title: t('pages.billing.chart.displayModes.cumulative') },
+])
+
+// Toggle category pills
+function toggleCategory(category) {
+  if (category === 'registrations') {
+    showRegistrations.value = true
+    showUpdates.value = false
+  } else if (category === 'updates') {
+    showRegistrations.value = false
+    showUpdates.value = true
+  } else if (category === 'total') {
+    showRegistrations.value = true
+    showUpdates.value = true
+  }
+}
+
+// Get unique app names from transactions
+const uniqueApps = computed(() => {
+  const apps = new Set()
+  transactions.value.forEach(tx => {
+    const appName = tx.appSpecifications?.name || 'Unknown'
+    apps.add(appName)
+  })
+
+  const allApps = Array.from(apps).sort()
+
+  // Filter by search query if present
+  if (appSearchQuery.value) {
+    const query = appSearchQuery.value.toLowerCase()
+    return allApps
+      .filter(app => app.toLowerCase().includes(query))
+      .map(app => ({ value: app, title: app }))
+  }
+
+  return allApps.map(app => ({ value: app, title: app }))
+})
+
+
+// Table headers
+const headers = computed(() => [
+  { title: t('pages.billing.table.appName'), key: 'appName', sortable: true },
+  { title: t('pages.billing.table.totalPaid'), key: 'totalPaid', sortable: true },
+  { title: t('pages.billing.table.payments'), key: 'count', sortable: true },
+  { title: t('pages.billing.table.avgPayment'), key: 'avgPayment', sortable: true },
+  { title: t('pages.billing.lastTransaction'), key: 'lastPayment', sortable: true },
+  { title: t('pages.billing.table.actions'), key: 'actions', sortable: false },
+])
+
+const transactionHeaders = computed(() => [
+  { title: t('pages.billing.transactionTable.type'), key: 'type', sortable: true },
+  { title: t('pages.billing.transactionTable.amount'), key: 'amount', sortable: true },
+  { title: t('pages.billing.transactionTable.date'), key: 'timestamp', sortable: true },
+  { title: t('pages.billing.transactionTable.blockHeight'), key: 'height', sortable: true },
+  { title: t('pages.billing.transactionTable.txid'), key: 'txid', sortable: false },
+])
+
+// Helper function to check if transaction is a free update (0.02 FLUX)
+const isFreeUpdate = (tx) => {
+  const amountFlux = (tx.valueSat || 0) / 100000000
+  return amountFlux === 0.02
+}
+
+// Computed analytics (excluding free updates from calculations)
+const totalPaid = computed(() => {
+  return transactions.value.reduce((sum, tx) => {
+    if (isFreeUpdate(tx)) return sum
+    return sum + (tx.valueSat || 0) / 100000000
+  }, 0)
+})
+
+const totalTransactions = computed(() => transactions.value.length)
+
+const registrations = computed(() => {
+  return transactions.value.filter(tx =>
+    tx.type === 'zelappregister' || tx.type === 'fluxappregister',
+  ).length
+})
+
+const registrationPaid = computed(() => {
+  return transactions.value
+    .filter(tx => tx.type === 'zelappregister' || tx.type === 'fluxappregister')
+    .reduce((sum, tx) => {
+      if (isFreeUpdate(tx)) return sum
+      return sum + (tx.valueSat || 0) / 100000000
+    }, 0)
+})
+
+const updates = computed(() => {
+  return transactions.value.filter(tx =>
+    tx.type === 'zelappupdate' || tx.type === 'fluxappupdate',
+  ).length
+})
+
+const updatePaid = computed(() => {
+  return transactions.value
+    .filter(tx => tx.type === 'zelappupdate' || tx.type === 'fluxappupdate')
+    .reduce((sum, tx) => {
+      if (isFreeUpdate(tx)) return sum
+      return sum + (tx.valueSat || 0) / 100000000
+    }, 0)
+})
+
+const firstTransaction = computed(() => {
+  if (transactions.value.length === 0) return null
+  const sorted = [...transactions.value].sort((a, b) => {
+    const aMs = a.timestamp > 10000000000000 ? a.timestamp / 1000 : a.timestamp
+    const bMs = b.timestamp > 10000000000000 ? b.timestamp / 1000 : b.timestamp
+    return aMs - bMs
+  })
+  return sorted[0]
+})
+
+const lastTransaction = computed(() => {
+  if (transactions.value.length === 0) return null
+  const sorted = [...transactions.value].sort((a, b) => {
+    const aMs = a.timestamp > 10000000000000 ? a.timestamp / 1000 : a.timestamp
+    const bMs = b.timestamp > 10000000000000 ? b.timestamp / 1000 : b.timestamp
+    return bMs - aMs
+  })
+  return sorted[0]
+})
+
+const appPayments = computed(() => {
+  const byApp = {}
+
+  transactions.value.forEach(tx => {
+    const appName = tx.appSpecifications?.name || 'Unknown'
+    const amountFlux = (tx.valueSat || 0) / 100000000
+    const isRegister = tx.type === 'zelappregister' || tx.type === 'fluxappregister'
+    const type = isRegister ? 'register' : 'update'
+
+    if (!byApp[appName]) {
+      byApp[appName] = {
+        appName,
+        count: 0,
+        totalPaid: 0,
+        firstPayment: tx.timestamp,
+        lastPayment: tx.timestamp,
+      }
+    }
+
+    byApp[appName].count++
+    // Exclude free updates from totalPaid calculation
+    if (!isFreeUpdate(tx)) {
+      byApp[appName].totalPaid += amountFlux
+    }
+    byApp[appName].lastPayment = Math.max(byApp[appName].lastPayment, tx.timestamp)
+  })
+
+  return Object.values(byApp).map(app => ({
+    ...app,
+    avgPayment: app.totalPaid / app.count,
+  }))
+})
+
+const filteredAppPayments = computed(() => {
+  let result
+  if (!searchQuery.value) {
+    result = [...appPayments.value]
+  } else {
+    const query = searchQuery.value.toLowerCase()
+    result = appPayments.value.filter(app =>
+      app.appName.toLowerCase().includes(query)
+    )
+  }
+
+  // Manual sorting - VDataTable sorting doesn't work properly with custom pagination
+  if (sortBy.value && sortBy.value.length > 0) {
+    const { key, order } = sortBy.value[0]
+    result.sort((a, b) => {
+      let aVal = a[key]
+      let bVal = b[key]
+
+      // Special handling for appName - use natural sort for numeric strings
+      if (key === 'appName') {
+        aVal = String(aVal)
+        bVal = String(bVal)
+        const comparison = aVal.localeCompare(bVal, undefined, { numeric: true, sensitivity: 'base' })
+        return order === 'desc' ? -comparison : comparison
+      }
+
+      // Numeric comparison for other fields
+      if (aVal < bVal) return order === 'desc' ? 1 : -1
+      if (aVal > bVal) return order === 'desc' ? -1 : 1
+      return 0
+    })
+  }
+
+  return result
+})
+
+// Pagination computeds
+const totalPages = computed(() => {
+  return Math.ceil(filteredAppPayments.value.length / itemsPerPage.value)
+})
+
+const startItem = computed(() => {
+  return (currentPage.value - 1) * itemsPerPage.value + 1
+})
+
+const endItem = computed(() => {
+  return Math.min(currentPage.value * itemsPerPage.value, filteredAppPayments.value.length)
+})
+
+const visiblePages = computed(() => {
+  const pages = []
+  const total = totalPages.value
+  const current = currentPage.value
+
+  if (total <= 7) {
+    // Show all pages if 7 or less
+    for (let i = 1; i <= total; i++) {
+      pages.push(i)
+    }
+  } else {
+    // Always show first page
+    pages.push(1)
+
+    if (current > 3) {
+      pages.push('...')
+    }
+
+    // Show pages around current
+    const start = Math.max(2, current - 1)
+    const end = Math.min(total - 1, current + 1)
+
+    for (let i = start; i <= end; i++) {
+      pages.push(i)
+    }
+
+    if (current < total - 2) {
+      pages.push('...')
+    }
+
+    // Always show last page
+    pages.push(total)
+  }
+
+  return pages
+})
+
+// Dialog transaction table pagination
+const dialogPage = ref(1)
+const dialogItemsPerPage = 10
+
+const dialogTotalPages = computed(() => {
+  return Math.ceil((selectedApp.value?.transactions?.length || 0) / dialogItemsPerPage)
+})
+
+const dialogStartItem = computed(() => {
+  return (dialogPage.value - 1) * dialogItemsPerPage + 1
+})
+
+const dialogEndItem = computed(() => {
+  return Math.min(dialogPage.value * dialogItemsPerPage, selectedApp.value?.transactions?.length || 0)
+})
+
+const dialogVisiblePages = computed(() => {
+  const pages = []
+  const total = dialogTotalPages.value
+  const current = dialogPage.value
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) pages.push(i)
+  } else {
+    pages.push(1)
+    if (current > 3) pages.push('...')
+    const start = Math.max(2, current - 1)
+    const end = Math.min(total - 1, current + 1)
+    for (let i = start; i <= end; i++) pages.push(i)
+    if (current < total - 2) pages.push('...')
+    pages.push(total)
+  }
+
+  return pages
+})
+
+// Reset dialog page when opening a new app
+watch(() => selectedApp.value?.appName, () => {
+  dialogPage.value = 1
+})
+
+const topApps = computed(() => {
+  return appPayments.value
+    .sort((a, b) => b.totalPaid - a.totalPaid)
+    .slice(0, 5)
+})
+
+// Additional statistics
+const avgTransactionCost = computed(() => {
+  return totalTransactions.value > 0 ? totalPaid.value / totalTransactions.value : 0
+})
+
+const avgRegistrationCost = computed(() => {
+  return registrations.value > 0 ? registrationPaid.value / registrations.value : 0
+})
+
+const avgUpdateCost = computed(() => {
+  return updates.value > 0 ? updatePaid.value / updates.value : 0
+})
+
+const avgUpdatesPerApp = computed(() => {
+  return registrations.value > 0 ? updates.value / registrations.value : 0
+})
+
+const highestTransaction = computed(() => {
+  if (transactions.value.length === 0) return 0
+  const highest = transactions.value.reduce((max, tx) => {
+    const amount = (tx.valueSat || 0) / 100000000
+    return amount > max ? amount : max
+  }, 0)
+  return highest
+})
+
+const lowestTransaction = computed(() => {
+  if (transactions.value.length === 0) return 0
+  const lowest = transactions.value.reduce((min, tx) => {
+    const amount = (tx.valueSat || 0) / 100000000
+    return min === 0 || (amount > 0 && amount < min) ? amount : min
+  }, 0)
+  return lowest
+})
+
+// Methods
+async function fetchPaymentHistory() {
+  loading.value = true
+  try {
+    const zelidauth = localStorage.getItem('zelidauth')
+
+    // Check if user is authenticated (zelidauth contains zelid)
+    if (!zelidauth) {
+        await router.push('/')
+      return
+    }
+
+    // Extract zelid from zelidauth (format: zelid=...&signature=...&loginPhrase=...)
+    const params = new URLSearchParams(zelidauth)
+    const extractedZelid = params.get('zelid')
+
+    // Validate zelid exists and is not empty
+    if (!extractedZelid || !extractedZelid.trim()) {
+        await router.push('/')
+      return
+    }
+
+    const response = await BillingService.getMyPaymentHistory(zelidauth, extractedZelid)
+    transactions.value = response.data.data || []
+
+    // Fetch currently running apps
+    const appsResponse = await BillingService.getMyApps(zelidauth, extractedZelid)
+    myApps.value = appsResponse.data.data || []
+  }
+  catch (error) {
+    console.error('Failed to fetch payment history:', error)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function formatDate(timestamp) {
+  // Convert microseconds to milliseconds if needed
+  const ms = timestamp > 10000000000000 ? timestamp / 1000 : timestamp
+  return new Date(ms).toLocaleString()
+}
+
+function formatDateShort(timestamp) {
+  // Convert microseconds to milliseconds if needed
+  const ms = timestamp > 10000000000000 ? timestamp / 1000 : timestamp
+  const date = new Date(ms)
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = date.getFullYear()
+  return `${day}.${month}.${year}`
+}
+
+function getTierName(tierlevel) {
+  const tierMap = { 0: 'STRATUS', 1: 'NIMBUS', 2: 'CUMULUS' }
+  return tierMap[tierlevel] || 'UNKNOWN'
+}
+
+function getTierColor(tierlevel) {
+  const colorMap = { 0: 'error', 1: 'warning', 2: 'info' }
+  return colorMap[tierlevel] || 'default'
+}
+
+// Reset page when search or items per page changes
+watch([searchQuery, itemsPerPage], () => {
+  currentPage.value = 1
+})
+
+// Clear app search when dropdown closes
+watch(appFilterMenuOpen, (isOpen) => {
+  if (!isOpen) {
+    appSearchQuery.value = ''
+  }
+})
+
+function viewTransactions(app) {
+  // Dynamically build transactions array for this specific app
+  const rawTxs = transactions.value
+    .filter(tx => (tx.appSpecifications?.name || 'Unknown') === app.appName)
+    .sort((a, b) => a.timestamp - b.timestamp)
+
+  const appTransactions = rawTxs.map((tx, i) => {
+    const amountFlux = (tx.valueSat || 0) / 100000000
+    const isRegister = tx.type === 'zelappregister' || tx.type === 'fluxappregister'
+
+    let type = 'update'
+    if (isRegister) {
+      type = 'register'
+    } else {
+      const currSpec = tx.appSpecifications || {}
+      const specVersion = currSpec.version || 0
+
+      // Spec version < 6 had no expire field — every update was a renewal
+      if (specVersion < 6) {
+        type = 'renewal'
+      } else {
+        // Spec version >= 6 has expire field — compare with previous tx
+        const prevTx = rawTxs[i - 1]
+        if (prevTx) {
+          const prevSpec = prevTx.appSpecifications || {}
+          const expireChanged = prevSpec.expire !== currSpec.expire
+          const onlyExpireOrNoChange = Object.keys(currSpec).every(k =>
+            k === 'expire' || JSON.stringify(prevSpec[k]) === JSON.stringify(currSpec[k])
+          )
+          if (expireChanged || onlyExpireOrNoChange) {
+            type = 'renewal'
+          }
+        }
+      }
+    }
+
+    return {
+      txid: tx.txid,
+      amount: amountFlux,
+      height: tx.height,
+      timestamp: tx.timestamp,
+      type: type,
+    }
+  })
+
+  selectedApp.value = {
+    ...app,
+    transactions: appTransactions,
+  }
+  showTransactionDialog.value = true
+}
+
+function filterChartByApp(appName) {
+  chartAppFilter.value = appName
+  // Scroll to chart section
+  const chartElement = document.querySelector('.billing-chart-container')
+  if (chartElement) {
+    chartElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }
+}
+
+// Chart.js configuration
+const chartData = computed(() => ({
+  labels: ['Registrations', 'Updates'],
+  datasets: [{
+    data: [registrationPaid.value, updatePaid.value],
+    backgroundColor: [
+      'rgba(40, 199, 111, 0.3)',  // success color
+      'rgba(255, 159, 67, 0.3)',   // warning color
+    ],
+    borderColor: [
+      'rgb(40, 199, 111)',
+      'rgb(255, 159, 67)',
+    ],
+    borderWidth: 2,
+  }],
+}))
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: true,
+  plugins: {
+    legend: {
+      display: false,
+    },
+    tooltip: {
+      enabled: true,
+      backgroundColor: 'rgba(0, 0, 0, 0.85)',
+      titleColor: '#fff',
+      bodyColor: '#fff',
+      padding: 10,
+      displayColors: true,
+      titleFont: {
+        size: 11,
+        weight: 'bold',
+      },
+      bodyFont: {
+        size: 10,
+      },
+      boxWidth: 8,
+      boxHeight: 8,
+      callbacks: {
+        title: function(context) {
+          return context[0].label || ''
+        },
+        label: function(context) {
+          const value = context.parsed || 0
+          const percentage = ((value / totalPaid.value) * 100).toFixed(1)
+          return `${value.toFixed(0)} FLUX (${percentage}%)`
+        },
+      },
+    },
+  },
+  cutout: '70%',
+  hover: {
+    mode: 'nearest',
+    intersect: true,
+  },
+}
+
+// Line chart data - Monthly spending trends
+const lineChartData = computed(() => {
+  // Group transactions by month
+  const monthlyData = {}
+
+  transactions.value.forEach(tx => {
+    const ms = tx.timestamp > 10000000000000 ? tx.timestamp / 1000 : tx.timestamp
+    const date = new Date(ms)
+    const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
+
+    if (!monthlyData[monthKey]) {
+      monthlyData[monthKey] = {
+        registrations: 0,
+        updates: 0,
+      }
+    }
+
+    const amount = (tx.valueSat || 0) / 100000000
+    const isRegister = tx.type === 'zelappregister' || tx.type === 'fluxappregister'
+
+    if (isRegister) {
+      monthlyData[monthKey].registrations += amount
+    } else {
+      monthlyData[monthKey].updates += amount
+    }
+  })
+
+  // Sort by month and get labels
+  const sortedMonths = Object.keys(monthlyData).sort()
+  const labels = sortedMonths.map(month => {
+    const [year, monthNum] = month.split('-')
+    const date = new Date(year, monthNum - 1)
+    return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
+  })
+
+  const registrationData = sortedMonths.map(month => monthlyData[month].registrations)
+  const updateData = sortedMonths.map(month => monthlyData[month].updates)
+
+  return {
+    labels,
+    datasets: [
+      {
+        label: 'Registrations',
+        data: registrationData,
+        borderColor: 'rgb(40, 199, 111)',
+        backgroundColor: 'rgba(40, 199, 111, 0.1)',
+        tension: 0.4,
+        fill: true,
+        borderWidth: 2,
+        pointRadius: 4,
+        pointHoverRadius: 6,
+        pointBackgroundColor: 'rgb(40, 199, 111)',
+        pointBorderColor: '#fff',
+        pointBorderWidth: 2,
+      },
+      {
+        label: 'Updates',
+        data: updateData,
+        borderColor: 'rgb(255, 159, 67)',
+        backgroundColor: 'rgba(255, 159, 67, 0.1)',
+        tension: 0.4,
+        fill: true,
+        borderWidth: 2,
+        pointRadius: 4,
+        pointHoverRadius: 6,
+        pointBackgroundColor: 'rgb(255, 159, 67)',
+        pointBorderColor: '#fff',
+        pointBorderWidth: 2,
+      },
+    ],
+  }
+})
+
+// Filtered chart data based on selected time range, aggregation, and metric type
+const filteredLineChartData = computed(() => {
+  const now = new Date()
+  let cutoffDate
+
+  switch (selectedTimeRange.value) {
+    case '7d':
+      cutoffDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
+      break
+    case '30d':
+      cutoffDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000)
+      break
+    case '90d':
+      cutoffDate = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000)
+      break
+    case '1y':
+      cutoffDate = new Date(now.getTime() - 365 * 24 * 60 * 60 * 1000)
+      break
+    case 'all':
+      cutoffDate = null
+      break
+  }
+
+  // Group transactions based on aggregation type
+  const aggregatedData = {}
+
+  transactions.value.forEach(tx => {
+    const ms = tx.timestamp > 10000000000000 ? tx.timestamp / 1000 : tx.timestamp
+    const date = new Date(ms)
+
+    if (cutoffDate && date < cutoffDate) return
+
+    // Filter by app if selected
+    const appName = tx.appSpecifications?.name || 'Unknown'
+    if (chartAppFilter.value && appName !== chartAppFilter.value) return
+
+    let key
+    if (selectedAggregation.value === 'daily') {
+      key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+    } else if (selectedAggregation.value === 'weekly') {
+      // Get Monday of the week
+      const dayOfWeek = date.getDay()
+      const diff = date.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)
+      const monday = new Date(date.setDate(diff))
+      key = `${monday.getFullYear()}-${String(monday.getMonth() + 1).padStart(2, '0')}-${String(monday.getDate()).padStart(2, '0')}`
+    } else {
+      // Monthly
+      key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
+    }
+
+    if (!aggregatedData[key]) {
+      aggregatedData[key] = {
+        registrations: 0,
+        updates: 0,
+        total: 0,
+      }
+    }
+
+    const amount = (tx.valueSat || 0) / 100000000
+    const isRegister = tx.type === 'zelappregister' || tx.type === 'fluxappregister'
+
+    if (isRegister) {
+      aggregatedData[key].registrations += amount
+    } else {
+      aggregatedData[key].updates += amount
+    }
+    aggregatedData[key].total += amount
+  })
+
+  // Sort and create labels
+  const sortedKeys = Object.keys(aggregatedData).sort()
+
+  // Create full date labels for tooltip (with year)
+  const fullDateLabels = sortedKeys.map(key => {
+    if (selectedAggregation.value === 'daily') {
+      const [year, month, day] = key.split('-')
+      const date = new Date(year, month - 1, day)
+      return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    } else if (selectedAggregation.value === 'weekly') {
+      const [year, month, day] = key.split('-')
+      const date = new Date(year, month - 1, day)
+      return `Week of ${date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`
+    } else {
+      const [year, month] = key.split('-')
+      const date = new Date(year, month - 1)
+      return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
+    }
+  })
+
+  // Create display labels for chart (shorter version for x-axis)
+  const labels = sortedKeys.map(key => {
+    if (selectedAggregation.value === 'daily') {
+      const [year, month, day] = key.split('-')
+      const date = new Date(year, month - 1, day)
+      return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+    } else if (selectedAggregation.value === 'weekly') {
+      const [year, month, day] = key.split('-')
+      const date = new Date(year, month - 1, day)
+      return `Week of ${date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}`
+    } else {
+      const [year, month] = key.split('-')
+      const date = new Date(year, month - 1)
+      return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
+    }
+  })
+
+  // Calculate data based on metric type (period total or cumulative)
+  let totalData, registrationData, updateData
+
+  if (selectedMetric.value === 'cumulative') {
+    // Cumulative: running total
+    let cumulativeTotal = 0
+    let cumulativeRegistrations = 0
+    let cumulativeUpdates = 0
+
+    totalData = sortedKeys.map(key => {
+      cumulativeTotal += aggregatedData[key].total
+      return cumulativeTotal
+    })
+
+    registrationData = sortedKeys.map(key => {
+      cumulativeRegistrations += aggregatedData[key].registrations
+      return cumulativeRegistrations
+    })
+
+    updateData = sortedKeys.map(key => {
+      cumulativeUpdates += aggregatedData[key].updates
+      return cumulativeUpdates
+    })
+  } else {
+    // Period total: individual period totals
+    totalData = sortedKeys.map(key => aggregatedData[key].total)
+    registrationData = sortedKeys.map(key => aggregatedData[key].registrations)
+    updateData = sortedKeys.map(key => aggregatedData[key].updates)
+  }
+
+  // Build datasets based on category pills
+  const datasets = []
+
+  // If both are enabled or both are disabled, show total
+  if ((showRegistrations.value && showUpdates.value) || (!showRegistrations.value && !showUpdates.value)) {
+    datasets.push({
+      label: 'Total Payments',
+      data: totalData,
+      fullDateLabels,  // Store full dates for tooltip
+      borderColor: 'rgb(0, 200, 255)',
+      backgroundColor: 'rgba(0, 200, 255, 0.1)',
+      tension: 0.4,
+      fill: true,
+      borderWidth: 2,
+      pointRadius: 4,
+      pointHoverRadius: 6,
+      pointBackgroundColor: 'rgb(0, 200, 255)',
+      pointBorderColor: '#fff',
+      pointBorderWidth: 2,
+    })
+  } else {
+    // Show only the selected category
+    if (showRegistrations.value) {
+      datasets.push({
+        label: 'Registrations',
+        data: registrationData,
+        fullDateLabels,  // Store full dates for tooltip
+        borderColor: 'rgb(40, 199, 111)',
+        backgroundColor: 'rgba(40, 199, 111, 0.1)',
+        tension: 0.4,
+        fill: true,
+        borderWidth: 2,
+        pointRadius: 4,
+        pointHoverRadius: 6,
+        pointBackgroundColor: 'rgb(40, 199, 111)',
+        pointBorderColor: '#fff',
+        pointBorderWidth: 2,
+      })
+    }
+
+    if (showUpdates.value) {
+      datasets.push({
+        label: 'Updates',
+        data: updateData,
+        fullDateLabels,  // Store full dates for tooltip
+        borderColor: 'rgb(255, 159, 67)',
+        backgroundColor: 'rgba(255, 159, 67, 0.1)',
+        tension: 0.4,
+        fill: true,
+        borderWidth: 2,
+        pointRadius: 4,
+        pointHoverRadius: 6,
+        pointBackgroundColor: 'rgb(255, 159, 67)',
+        pointBorderColor: '#fff',
+        pointBorderWidth: 2,
+      })
+    }
+  }
+
+  return {
+    labels,
+    datasets,
+  }
+})
+
+// Custom HTML Tooltip Handler
+const getOrCreateTooltip = (chart) => {
+  let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip')
+
+  if (!tooltipEl) {
+    tooltipEl = document.createElement('div')
+    tooltipEl.classList.add('chartjs-tooltip')
+    tooltipEl.style.opacity = '0'
+    tooltipEl.style.pointerEvents = 'none'
+    tooltipEl.style.position = 'absolute'
+    tooltipEl.style.transition = 'all 0.1s ease'
+    tooltipEl.style.zIndex = '1000'
+
+    chart.canvas.parentNode.appendChild(tooltipEl)
+  }
+
+  return tooltipEl
+}
+
+const externalTooltipHandler = (context) => {
+  const { chart, tooltip } = context
+  const tooltipEl = getOrCreateTooltip(chart)
+
+  if (tooltip.opacity === 0) {
+    tooltipEl.style.opacity = '0'
+    return
+  }
+
+  if (tooltip.body) {
+    const index = tooltip.dataPoints[0].dataIndex
+    const datasetIndex = tooltip.dataPoints[0].datasetIndex
+    const dataset = chart.data.datasets[datasetIndex]
+    const value = dataset.data[index]
+
+    // Use full date label with year from dataset metadata
+    const fullDateLabel = dataset.fullDateLabels ? dataset.fullDateLabels[index] : tooltip.title[0]
+
+    let tooltipContent = ''
+
+    // Title with full date (including year)
+    tooltipContent += `<div style="color: rgb(0, 200, 255); font-weight: bold; margin-bottom: 4px;">${fullDateLabel}</div>`
+
+    // Main value
+    tooltipContent += `<div style="color: #ffffff; line-height: 1.4;">${value.toFixed(2)} FLUX</div>`
+
+    // Change indicator (for cumulative or if index > 0)
+    if (index > 0 && dataset.data[index - 1] !== undefined) {
+      const prevValue = dataset.data[index - 1]
+      const diff = value - prevValue
+      const percentChange = prevValue > 0 ? ((diff / prevValue) * 100) : 0
+      const isPositive = diff > 0
+      const isNegative = diff < 0
+      const color = isPositive ? '#00ff00' : isNegative ? '#ff0000' : '#ffffff'
+      const sign = isPositive ? '+' : ''
+      tooltipContent += `<div style="color: ${color}; line-height: 1.4;">${sign}${diff.toFixed(2)} FLUX (${sign}${percentChange.toFixed(2)}%)</div>`
+    }
+
+    tooltipEl.innerHTML = tooltipContent
+  }
+
+  // Apply tooltip styles
+  tooltipEl.style.background = 'rgba(10, 14, 23, 0.95)'
+  tooltipEl.style.borderRadius = '3px'
+  tooltipEl.style.padding = '12px'
+  tooltipEl.style.border = '1px solid rgb(0, 200, 255)'
+  tooltipEl.style.fontFamily = "'Courier New', monospace"
+  tooltipEl.style.fontSize = '12px'
+  tooltipEl.style.whiteSpace = 'nowrap'
+
+  const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas
+
+  // Smart positioning: check if tooltip would overflow on right side
+  const chartWidth = chart.width
+  const tooltipWidth = tooltipEl.offsetWidth || 200 // fallback width
+  const caretX = tooltip.caretX
+
+  let transformX = '-50%' // default: center
+  let leftPosition = positionX + caretX
+
+  // If tooltip would overflow right side, align to right edge
+  if (caretX + tooltipWidth / 2 > chartWidth) {
+    transformX = '-100%' // align right
+    leftPosition = positionX + caretX
+  }
+  // If tooltip would overflow left side, align to left edge
+  else if (caretX - tooltipWidth / 2 < 0) {
+    transformX = '0%' // align left
+    leftPosition = positionX + caretX
+  }
+
+  tooltipEl.style.opacity = '1'
+  tooltipEl.style.left = leftPosition + 'px'
+  tooltipEl.style.top = positionY + tooltip.caretY + 'px'
+  tooltipEl.style.transform = `translate(${transformX}, 0)`
+}
+
+const lineChartOptions = computed(() => {
+  // Get current theme from Vuetify
+  const isDark = theme.global.current.value.dark
+  const axisColor = isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)'
+  const gridColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: {
+      mode: 'index',
+      intersect: false,
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        enabled: false,
+        external: externalTooltipHandler,
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          color: gridColor,
+          drawBorder: false,
+        },
+        ticks: {
+          color: axisColor,
+          font: {
+            family: "'Courier New', monospace",
+            size: 10,
+          },
+          maxRotation: 45,
+          minRotation: 45,
+        },
+      },
+      y: {
+        beginAtZero: true,
+        grid: {
+          color: gridColor,
+          drawBorder: false,
+        },
+        ticks: {
+          color: axisColor,
+          font: {
+            family: "'Courier New', monospace",
+            size: 11,
+          },
+          callback: function(value) {
+            return value.toFixed(0)
+          },
+        },
+      },
+    },
+  }
+})
+
+function exportCSV() {
+  // Clear previous validation errors
+  exportValidationError.value = ''
+
+  // Validate zelid exists
+  const zelidauth = localStorage.getItem('zelidauth')
+  if (!zelidauth) {
+    exportValidationError.value = 'Authentication not found'
+    return
+  }
+
+  const params = new URLSearchParams(zelidauth)
+  const extractedZelid = params.get('zelid')
+
+  if (!extractedZelid || !extractedZelid.trim()) {
+    exportValidationError.value = 'Invalid authentication data'
+    return
+  }
+
+  const headers = ['Date', 'App Name', 'Type', 'Amount (FLUX)', 'Transaction ID', 'Block Height']
+  const rows = [headers.join(',')]
+
+  // Filter transactions based on selected period
+  const now = new Date()
+  let cutoffDate
+  let endDate
+
+  if (exportPeriod.value === 'custom') {
+    // Custom date range
+    if (!exportCustomStartDate.value || !exportCustomEndDate.value) {
+      exportValidationError.value = 'Please select both start and end dates'
+      return
+    }
+    cutoffDate = new Date(exportCustomStartDate.value)
+    endDate = new Date(exportCustomEndDate.value)
+
+    // Validate that start date is before end date
+    if (cutoffDate > endDate) {
+      exportValidationError.value = 'Start date must be before end date'
+      return
+    }
+
+    endDate.setHours(23, 59, 59, 999) // Include full end date
+  } else {
+    switch (exportPeriod.value) {
+      case '7d':
+        cutoffDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
+        break
+      case '30d':
+        cutoffDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000)
+        break
+      case '90d':
+        cutoffDate = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000)
+        break
+      case '365d':
+        cutoffDate = new Date(now.getTime() - 365 * 24 * 60 * 60 * 1000)
+        break
+      case 'all':
+      default:
+        cutoffDate = null
+        break
+    }
+  }
+
+  // Export directly from transactions array (excluding free updates)
+  transactions.value.forEach(tx => {
+    const txDate = new Date(tx.timestamp)
+
+    // Skip if transaction is outside the selected period
+    if (cutoffDate && txDate < cutoffDate) {
+      return
+    }
+
+    // For custom range, also check end date
+    if (endDate && txDate > endDate) {
+      return
+    }
+
+    // Skip free updates from export
+    if (isFreeUpdate(tx)) {
+      return
+    }
+
+    const appName = tx.appSpecifications?.name || 'Unknown'
+    const amountFlux = (tx.valueSat || 0) / 100000000
+
+    rows.push([
+      `"${formatDate(tx.timestamp)}"`,
+      `"${appName}"`,
+      tx.type,
+      amountFlux.toFixed(8),
+      tx.txid,
+      tx.height,
+    ].join(','))
+  })
+
+  // Check if there are any transactions to export (only headers means no data)
+  if (rows.length === 1) {
+    exportValidationError.value = t('pages.billing.noTransactionsFound')
+    return
+  }
+
+  const csv = rows.join('\n')
+  const blob = new Blob([csv], { type: 'text/csv' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  const periodLabel = exportPeriod.value === 'custom'
+    ? `${exportCustomStartDate.value}_${exportCustomEndDate.value}`
+    : exportPeriod.value
+  a.download = `billing-export-${extractedZelid}-${periodLabel}-${Date.now()}.csv`
+  a.click()
+  URL.revokeObjectURL(url)
+
+  // Close dialog
+  exportDialogOpen.value = false
+}
+
+onMounted(() => {
+  fetchPaymentHistory()
+})
+
+useSEO({
+  title: 'App Payments & Billing - FluxCloud',
+  description: 'Track your Flux app payments and billing history',
+  url: 'https://cloud.runonflux.com/billing/payments',
+})
+</script>
+
+<style scoped>
+/* Card hover effects - Cyberpunk style */
+.v-card.v-card--hover {
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.v-card.v-card--hover:hover {
+  transform: translateY(-4px);
+  transition: all 0.3s ease;
+  box-shadow:
+    0 0 20px rgba(0, 255, 255, 0.3),
+    0 0 40px rgba(0, 255, 255, 0.2),
+    0 8px 24px rgba(0, 0, 0, 0.3) !important;
+  border-color: rgb(0, 255, 255) !important;
+  border-width: 2px !important;
+}
+
+/* Table header backgrounds */
+:deep(.v-data-table thead th) {
+  background: linear-gradient(135deg, rgba(100, 100, 100, 0.08) 0%, rgba(80, 80, 80, 0.12) 100%) !important;
+  backdrop-filter: blur(10px);
+}
+
+/* Chart hover effects */
+.donut-chart {
+  transition: transform 0.3s ease;
+  cursor: pointer;
+}
+
+.chart-container:hover .donut-chart {
+  transform: scale(1.05);
+}
+
+.chart-segment {
+  transition: opacity 0.3s ease, stroke-width 0.3s ease;
+  cursor: pointer;
+}
+
+.chart-segment:hover {
+  opacity: 0.6 !important;
+  stroke-width: 22;
+}
+
+.chart-segment-reg:hover ~ circle {
+  opacity: 0.15 !important;
+}
+
+.chart-segment-upd:hover {
+  opacity: 0.6 !important;
+  stroke-width: 22;
+}
+
+/* Border top utility */
+.border-t {
+  border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+/* Table borders */
+.bordered-table {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+}
+
+:deep(.bordered-table .v-table__wrapper) {
+  border-radius: 4px;
+  overflow-x: auto;
+  /* Custom scrollbar styling - Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--v-theme-on-surface), 0.5) rgba(var(--v-theme-on-surface), 0.1);
+}
+
+/* Webkit scrollbar styling */
+:deep(.bordered-table .v-table__wrapper::-webkit-scrollbar) {
+  height: 10px;
+}
+
+:deep(.bordered-table .v-table__wrapper::-webkit-scrollbar-track) {
+  background: rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 5px;
+  margin: 0 8px;
+}
+
+:deep(.bordered-table .v-table__wrapper::-webkit-scrollbar-thumb) {
+  background: rgba(var(--v-theme-on-surface), 0.5) !important;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: default;
+}
+
+:deep(.bordered-table .v-table__wrapper::-webkit-scrollbar-thumb:hover) {
+  background: rgba(var(--v-theme-on-surface), 0.5) !important;
+  border-radius: 5px !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+  cursor: default !important;
+}
+
+:deep(.bordered-table th),
+:deep(.bordered-table td) {
+  border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+:deep(.bordered-table th:last-child),
+:deep(.bordered-table td:last-child) {
+  border-right: none;
+}
+
+/* Billing Chart Styles - Terminal FluxTracker theme */
+.billing-chart-container.terminal-border {
+  background: var(--v-theme-surface);
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.billing-chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.billing-chart-title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.billing-chart-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--v-theme-on-surface);
+}
+
+.billing-chart-subtitle {
+  font-size: 0.875rem;
+  opacity: 0.7;
+  margin: 0;
+  font-family: 'Courier New', monospace;
+  color: var(--v-theme-on-surface);
+}
+
+.billing-chart-controls {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.billing-control-group {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.billing-control-label {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+  opacity: 0.7;
+  font-weight: 500;
+}
+
+/* Terminal-style VSelect */
+.billing-chart-select.terminal-select :deep(.v-field) {
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  font-size: 0.75rem;
+  font-family: 'Courier New', monospace;
+  transition: all 0.2s ease;
+}
+
+.billing-chart-select.terminal-select :deep(.v-field__input) {
+  font-family: 'Courier New', monospace;
+  font-size: 0.75rem;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  min-height: 28px;
+}
+
+.billing-chart-select.terminal-select :deep(.v-field:hover) {
+  border-color: rgb(var(--v-theme-primary));
+}
+
+.billing-chart-select.terminal-select :deep(.v-field--focused) {
+  border-color: rgb(var(--v-theme-primary)) !important;
+  box-shadow: 0 0 10px rgba(var(--v-theme-primary), 0.2);
+}
+
+/* App filter select - wider for app names */
+.billing-chart-select.app-filter-select {
+  min-width: 200px;
+}
+
+.billing-chart-select.app-filter-select :deep(.v-field__clearable) {
+  display: flex !important;
+  opacity: 1 !important;
+}
+
+/* Smaller font in dropdown list */
+.billing-chart-select.app-filter-select :deep(.v-list-item-title) {
+  font-size: 0.75rem !important;
+}
+
+.billing-chart-select.app-filter-select :deep(.v-list-item) {
+  min-height: 32px !important;
+  padding-block: 4px !important;
+}
+
+/* Target the overlay menu directly */
+.v-overlay :has(.app-filter-select) .v-list-item-title {
+  font-size: 0.75rem !important;
+}
+
+.v-overlay :has(.app-filter-select) .v-list-item {
+  min-height: 32px !important;
+  padding-block: 4px !important;
+}
+
+/* Remove autocomplete highlight and suggestion */
+.billing-chart-select.app-filter-select :deep(.v-autocomplete__selection-text) {
+  display: none !important;
+}
+
+.billing-chart-select.app-filter-select :deep(.v-autocomplete__selection) {
+  opacity: 0 !important;
+  display: none !important;
+}
+
+/* Remove text highlighting in dropdown */
+.billing-chart-select.app-filter-select :deep(.v-list-item__content mark) {
+  background-color: transparent !important;
+  color: inherit !important;
+  font-weight: normal !important;
+}
+
+/* Hide autocomplete suggestion overlay */
+.billing-chart-select.app-filter-select :deep(.v-field__overlay) {
+  display: none !important;
+}
+
+.billing-chart-select.app-filter-select :deep(.v-autocomplete__content) {
+  display: none !important;
+}
+
+.billing-chart-select.app-filter-select :deep(.v-field__input::placeholder) {
+  opacity: 0.7;
+}
+
+/* Category Pills - FluxTracker style */
+.billing-category-pills {
+  display: flex;
+  column-gap: 0.5rem;
+  row-gap: 0.25rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 599px) {
+  .billing-category-pills {
+    flex-wrap: nowrap;
+  }
+
+  .billing-category-pill {
+    flex: 1 1 0;
+    min-width: 0;
+    justify-content: center;
+    padding: 0.25rem 0.25rem;
+  }
+
+  .billing-category-label {
+    font-size: 0.6rem !important;
+    letter-spacing: 0 !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+}
+
+.billing-category-pill {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  color: var(--v-theme-on-surface);
+  padding: 0.375rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-family: 'Courier New', monospace;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.billing-category-pill:hover {
+  border-color: var(--category-color);
+  background: color-mix(in srgb, var(--category-color) 10%, transparent);
+}
+
+.billing-category-pill.active {
+  border-color: var(--category-color);
+  background: color-mix(in srgb, var(--category-color) 20%, transparent);
+  box-shadow: 0 0 10px var(--category-color);
+}
+
+.billing-category-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.billing-category-pill:hover .billing-category-icon {
+  transform: scale(1.05);
+}
+
+.billing-category-pill.active .billing-category-icon {
+  filter: drop-shadow(0 0 5px var(--category-color));
+}
+
+.billing-category-label {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.billing-chart-wrapper {
+  height: 400px;
+  position: relative;
+  overflow: visible !important;
+}
+
+/* Ensure VCard allows overflow for tooltips */
+.billing-chart-container :deep(.v-card-text) {
+  overflow: visible !important;
+}
+
+.billing-chart-container {
+  overflow: visible !important;
+}
+
+/* Custom Tooltip Styles */
+:deep(.chartjs-tooltip) {
+  font-family: 'Courier New', monospace !important;
+  font-size: 12px !important;
+  z-index: 9999 !important;
+  pointer-events: none !important;
+}
+
+:deep(.chartjs-tooltip div) {
+  line-height: 1.4 !important;
+}
+
+@media (max-width: 599px) {
+  :deep(.bordered-table .v-data-table-footer__items-per-page > span) {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .billing-chart-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .billing-chart-controls {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .billing-control-group {
+    flex: 1;
+    min-width: 120px;
+  }
+
+  .billing-chart-select {
+    width: 100%;
+  }
+
+  .billing-chart-wrapper {
+    height: 300px;
+  }
+}
+
+/* Sticky table header */
+:deep(.bordered-table .v-data-table-footer__items-per-page) {
+  order: -1;
+  margin-right: auto;
+  margin-left: 1rem;
+}
+
+:deep(.bordered-table thead) {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+:deep(.bordered-table thead th) {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background-color: rgb(var(--v-theme-surface));
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Flatpickr custom styling */
+.flatpickr-input {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.2);
+  border-radius: 4px;
+  background-color: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface)) !important;
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+/* Ensure selected date text is grey */
+.flatpickr-input:not(:placeholder-shown) {
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+
+.flatpickr-input.active {
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+
+.flatpickr-input::placeholder {
+  color: rgba(var(--v-theme-on-surface), 0.5) !important;
+  font-weight: 400;
+}
+
+.flatpickr-input:hover {
+  border-color: rgba(var(--v-theme-primary), 0.5);
+}
+
+.flatpickr-input:focus {
+  outline: none;
+  border-color: rgb(var(--v-theme-primary));
+  box-shadow: 0 0 0 2px rgba(var(--v-theme-primary), 0.1);
+}
+
+/* Stat cards in transaction dialog */
+.stat-card {
+  border-radius: 8px;
+  border: 1px solid;
+}
+
+.stat-card--secondary {
+  background-color: rgba(var(--v-theme-secondary), 0.06);
+  border-color: rgba(var(--v-theme-secondary), 0.2);
+}
+
+.stat-card--info {
+  background-color: rgba(var(--v-theme-info), 0.06);
+  border-color: rgba(var(--v-theme-info), 0.2);
+}
+
+.stat-card--success {
+  background-color: rgba(var(--v-theme-success), 0.06);
+  border-color: rgba(var(--v-theme-success), 0.2);
+}
+
+.stat-card--warning {
+  background-color: rgba(var(--v-theme-warning), 0.06);
+  border-color: rgba(var(--v-theme-warning), 0.2);
+}
+
+/* Export dialog radio button styling */
+.export-radio-group :deep(.v-label) {
+  font-size: 0.8125rem !important;
+}
+</style>
+
+<style>
+/* App filter dropdown - scoped via :has() to avoid affecting other menus */
+.v-overlay:has(.app-filter-select) .v-list-item-title {
+  font-size: 0.75rem !important;
+}
+
+.v-overlay:has(.app-filter-select) .v-list-item {
+  min-height: 32px !important;
+  padding-block: 4px !important;
+}
+
+/* Flatpickr calendar popup theming - Force theme awareness */
+.flatpickr-calendar,
+.flatpickr-calendar.open,
+.flatpickr-calendar.inline {
+  background: rgb(var(--v-theme-surface)) !important;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.12) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+  font-size: 13px !important;
+}
+
+.flatpickr-months,
+.flatpickr-months .flatpickr-month {
+  background: rgba(var(--v-theme-primary), 0.1) !important;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months,
+.flatpickr-current-month input.cur-year,
+.flatpickr-current-month .numInputWrapper input {
+  color: rgb(var(--v-theme-on-surface)) !important;
+  font-size: 13px !important;
+  background: transparent !important;
+}
+
+.flatpickr-weekday {
+  color: rgb(var(--v-theme-on-surface)) !important;
+  opacity: 0.7;
+  font-size: 12px !important;
+}
+
+.flatpickr-day {
+  color: rgb(var(--v-theme-on-surface)) !important;
+  font-size: 13px !important;
+  line-height: 32px !important;
+  height: 32px !important;
+}
+
+.flatpickr-day:hover,
+.flatpickr-day:focus {
+  background: rgba(var(--v-theme-primary), 0.1) !important;
+  border-color: rgba(var(--v-theme-primary), 0.3) !important;
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.selected:hover {
+  background: rgb(var(--v-theme-primary)) !important;
+  border-color: rgb(var(--v-theme-primary)) !important;
+  color: white !important;
+}
+
+.flatpickr-day.today {
+  border-color: rgb(var(--v-theme-primary)) !important;
+}
+
+.flatpickr-day.today:hover {
+  background: rgba(var(--v-theme-primary), 0.2) !important;
+}
+
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+  fill: rgb(var(--v-theme-on-surface)) !important;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  fill: rgb(var(--v-theme-primary)) !important;
+}
+
+/* Additional overrides for disabled and other states */
+.flatpickr-day.disabled,
+.flatpickr-day.disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay {
+  color: rgba(var(--v-theme-on-surface), 0.3) !important;
+}
+
+.flatpickr-day.inRange {
+  background: rgba(var(--v-theme-primary), 0.1) !important;
+  border-color: rgba(var(--v-theme-primary), 0.1) !important;
+  box-shadow: none !important;
+}
+
+.flatpickr-day.startRange,
+.flatpickr-day.endRange {
+  background: rgb(var(--v-theme-primary)) !important;
+  border-color: rgb(var(--v-theme-primary)) !important;
+  color: white !important;
+}
+
+.flatpickr-time {
+  background: rgb(var(--v-theme-surface)) !important;
+  border-top: 1px solid rgba(var(--v-theme-on-surface), 0.12) !important;
+}
+
+.flatpickr-time input {
+  color: rgb(var(--v-theme-on-surface)) !important;
+  background: transparent !important;
+}
+
+/* Custom scrollbar styling for apps list */
+.custom-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--v-theme-on-surface), 0.5) rgba(var(--v-theme-on-surface), 0.1);
+}
+
+.custom-scroll::-webkit-scrollbar {
+  width: 10px;
+}
+
+.custom-scroll::-webkit-scrollbar-track {
+  background: rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 5px;
+  margin: 0 8px;
+}
+
+.custom-scroll::-webkit-scrollbar-thumb {
+  background: rgba(var(--v-theme-on-surface), 0.5) !important;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: default;
+}
+
+.custom-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--v-theme-on-surface), 0.5) !important;
+  border-radius: 5px !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+  cursor: default !important;
+}
+</style>
diff --git a/src/plugins/1.router/guards.js b/src/plugins/1.router/guards.js
index 2fa5dab6..b5b7a972 100644
--- a/src/plugins/1.router/guards.js
+++ b/src/plugins/1.router/guards.js
@@ -45,6 +45,13 @@ export const setupGuards = router => {
       }
     }
 
+    // ✅ Billing page requires zelid authentication
+    if (to.path.startsWith('/billing/')) {
+      if (!auth || !auth.zelid) {
+        return next('/')
+      }
+    }
+
     // ✅ Additional app-level restriction for /apps/manage/:appName
     if (to.path.startsWith('/apps/manage/') && to.params.appName ) {
       const userPrivilege = fluxStore.privilege
diff --git a/src/plugins/i18n/locales/ar.json b/src/plugins/i18n/locales/ar.json
index 6f9c1ee0..1388d720 100644
--- a/src/plugins/i18n/locales/ar.json
+++ b/src/plugins/i18n/locales/ar.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "الفواتير والمدفوعات",
+      "subtitle": "تتبع سجل مدفوعات تطبيق Flux الخاص بك",
+      "loading": "جارٍ تحميل بيانات الفواتير...",
+      "fetchingPaymentHistory": "جارٍ جلب سجل مدفوعاتك",
+      "noPaymentHistory": "لا يوجد سجل مدفوعات",
+      "noPaymentsYet": "ليس لديك أي مدفوعات للتطبيق حتى الآن. قم بتسجيل تطبيق لبدء تتبع المدفوعات.",
+      "export": "تصدير",
+      "currentlyRunningApps": "التطبيقات قيد التشغيل حاليًا",
+      "loadingApps": "جارٍ تحميل تطبيقاتك قيد التشغيل...",
+      "noAppsRunning": "لا توجد تطبيقات قيد التشغيل حاليًا",
+      "instance": "نسخة",
+      "instances": "نسخ",
+      "paymentSummary": "ملخص المدفوعات",
+      "totalPaid": "إجمالي المدفوع",
+      "applications": "التطبيقات",
+      "firstTransaction": "أول معاملة",
+      "lastTransaction": "آخر معاملة",
+      "paymentHistory": "سجل المدفوعات",
+      "filterByType": "تصفية حسب النوع",
+      "allTypes": "جميع الأنواع",
+      "searchByName": "بحث...",
+      "noTransactionsFound": "لم يتم العثور على معاملات",
+      "noTransactionsMatch": "لا توجد معاملات تطابق معايير البحث",
+      "exportDialog": {
+        "title": "تصدير سجل المدفوعات",
+        "format": "تنسيق التصدير",
+        "selectFormat": "اختر تنسيق التصدير",
+        "dateRange": "نطاق التاريخ",
+        "allTime": "كل الوقت",
+        "last30Days": "آخر 30 يومًا",
+        "last90Days": "آخر 90 يومًا",
+        "lastYear": "آخر سنة",
+        "customRange": "نطاق مخصص",
+        "startDate": "تاريخ البدء",
+        "endDate": "تاريخ الانتهاء",
+        "export": "تصدير",
+        "cancel": "إلغاء"
+      },
+      "table": {
+        "appName": "اسم التطبيق",
+        "totalPaid": "إجمالي المدفوع",
+        "payments": "المدفوعات",
+        "avgPayment": "متوسط الدفع",
+        "actions": "الإجراءات",
+        "details": "التفاصيل",
+        "showing": "{start} إلى {end} من {total}"
+      },
+      "transactionTable": {
+        "type": "النوع",
+        "amount": "المبلغ",
+        "date": "التاريخ",
+        "blockHeight": "ارتفاع الكتلة",
+        "txid": "معرف المعاملة",
+        "free": "مجاني",
+        "types": {
+          "register": "تسجيل",
+          "update": "تحديث",
+          "renewal": "تجديد"
+        }
+      },
+      "types": {
+        "appregister": "تسجيل",
+        "appupdate": "تحديث"
+      },
+      "stats": {
+        "transactions": "المعاملات",
+        "registered": "مسجل",
+        "updated": "محدّث",
+        "averageCost": "متوسط التكلفة",
+        "highestPayment": "أعلى دفعة"
+      },
+      "chart": {
+        "title": "اتجاهات المدفوعات",
+        "transactions": "المعاملات",
+        "last7Days": "آخر 7 أيام",
+        "cumulativeTotalPayments": "إجمالي المدفوعات التراكمية",
+        "spendingBreakdown": "تفصيل الإنفاق",
+        "appLabel": "التطبيق",
+        "viewLabel": "عرض",
+        "periodLabel": "الفترة",
+        "metricLabel": "المقياس",
+        "filterByApp": "بحث...",
+        "searchApps": "البحث عن التطبيقات...",
+        "timeRanges": {
+          "7d": "7 أيام",
+          "30d": "30 يومًا",
+          "90d": "90 يومًا",
+          "1y": "سنة",
+          "all": "كل الوقت"
+        },
+        "displayModes": {
+          "periodTotal": "إجمالي الفترة",
+          "cumulative": "تراكمي"
+        },
+        "aggregation": {
+          "daily": "يومي",
+          "weekly": "أسبوعي",
+          "monthly": "شهري"
+        }
+      }
+    },
     "costCalculator": {
       "title": "حاسبة تكلفة استضافة التطبيقات",
       "subtitle": "استضافة لامركزية بأسعار معقولة تبدأ من 0.99 دولارًا أمريكيًا شهريًا - احسب تكاليفك الدقيقة",
@@ -5265,5 +5367,9 @@
         "category": "نظام إدارة المحتوى"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "الفواتير والمدفوعات",
+    "logout": "تسجيل الخروج"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/bn.json b/src/plugins/i18n/locales/bn.json
index 3376e87b..d8f76fde 100644
--- a/src/plugins/i18n/locales/bn.json
+++ b/src/plugins/i18n/locales/bn.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "বিলিং ও পেমেন্ট",
+      "subtitle": "আপনার Flux অ্যাপের পেমেন্ট ইতিহাস ট্র্যাক করুন",
+      "loading": "বিলিং ডেটা লোড হচ্ছে...",
+      "fetchingPaymentHistory": "আপনার পেমেন্ট ইতিহাস সংগ্রহ করা হচ্ছে",
+      "noPaymentHistory": "কোনো পেমেন্ট ইতিহাস নেই",
+      "noPaymentsYet": "এখনো কোনো অ্যাপ পেমেন্ট নেই। পেমেন্ট ট্র্যাক শুরু করতে একটি অ্যাপ নিবন্ধন করুন।",
+      "export": "রপ্তানি করুন",
+      "currentlyRunningApps": "বর্তমানে চলমান অ্যাপ",
+      "loadingApps": "আপনার চলমান অ্যাপ লোড হচ্ছে...",
+      "noAppsRunning": "বর্তমানে কোনো অ্যাপ চলছে না",
+      "instance": "ইনস্ট্যান্স",
+      "instances": "ইনস্ট্যান্স",
+      "paymentSummary": "পেমেন্ট সারসংক্ষেপ",
+      "totalPaid": "মোট পরিশোধিত",
+      "applications": "অ্যাপ্লিকেশন",
+      "firstTransaction": "প্রথম লেনদেন",
+      "lastTransaction": "শেষ লেনদেন",
+      "paymentHistory": "পেমেন্ট ইতিহাস",
+      "filterByType": "ধরন অনুযায়ী ফিল্টার করুন",
+      "allTypes": "সব ধরন",
+      "searchByName": "অনুসন্ধান করুন...",
+      "noTransactionsFound": "কোনো লেনদেন পাওয়া যায়নি",
+      "noTransactionsMatch": "আপনার অনুসন্ধানের সাথে কোনো লেনদেন মিলছে না",
+      "exportDialog": {
+        "title": "পেমেন্ট ইতিহাস রপ্তানি করুন",
+        "format": "রপ্তানি বিন্যাস",
+        "selectFormat": "রপ্তানি বিন্যাস নির্বাচন করুন",
+        "dateRange": "তারিখ পরিসর",
+        "allTime": "সব সময়",
+        "last30Days": "শেষ ৩০ দিন",
+        "last90Days": "শেষ ৯০ দিন",
+        "lastYear": "গত বছর",
+        "customRange": "কাস্টম পরিসর",
+        "startDate": "শুরুর তারিখ",
+        "endDate": "শেষ তারিখ",
+        "export": "রপ্তানি করুন",
+        "cancel": "বাতিল করুন"
+      },
+      "table": {
+        "appName": "অ্যাপের নাম",
+        "totalPaid": "মোট পরিশোধিত",
+        "payments": "পেমেন্ট",
+        "avgPayment": "গড় পেমেন্ট",
+        "actions": "কার্যক্রম",
+        "details": "বিবরণ",
+        "showing": "{total} এর মধ্যে {start} থেকে {end}"
+      },
+      "transactionTable": {
+        "type": "ধরন",
+        "amount": "পরিমাণ",
+        "date": "তারিখ",
+        "blockHeight": "ব্লক উচ্চতা",
+        "txid": "লেনদেন ID",
+        "free": "বিনামূল্যে",
+        "types": {
+          "register": "নিবন্ধন",
+          "update": "আপডেট",
+          "renewal": "নবায়ন"
+        }
+      },
+      "types": {
+        "appregister": "নিবন্ধন",
+        "appupdate": "আপডেট"
+      },
+      "stats": {
+        "transactions": "লেনদেন",
+        "registered": "নিবন্ধিত",
+        "updated": "আপডেট হয়েছে",
+        "averageCost": "গড় খরচ",
+        "highestPayment": "সর্বোচ্চ পেমেন্ট"
+      },
+      "chart": {
+        "title": "পেমেন্ট প্রবণতা",
+        "transactions": "লেনদেন",
+        "last7Days": "শেষ ৭ দিন",
+        "cumulativeTotalPayments": "সঞ্চিত মোট পেমেন্ট",
+        "spendingBreakdown": "ব্যয়ের বিবরণ",
+        "appLabel": "অ্যাপ",
+        "viewLabel": "দৃশ্য",
+        "periodLabel": "সময়কাল",
+        "metricLabel": "মেট্রিক",
+        "filterByApp": "অনুসন্ধান করুন...",
+        "searchApps": "অ্যাপ অনুসন্ধান করুন...",
+        "timeRanges": {
+          "7d": "৭ দিন",
+          "30d": "৩০ দিন",
+          "90d": "৯০ দিন",
+          "1y": "১ বছর",
+          "all": "সব সময়"
+        },
+        "displayModes": {
+          "periodTotal": "সময়কালের মোট",
+          "cumulative": "সঞ্চিত"
+        },
+        "aggregation": {
+          "daily": "দৈনিক",
+          "weekly": "সাপ্তাহিক",
+          "monthly": "মাসিক"
+        }
+      }
+    },
     "costCalculator": {
       "title": "অ্যাপ হোস্টিং খরচ ক্যালকুলেটর",
       "subtitle": "সাশ্রয়ী মূল্যের বিকেন্দ্রীভূত হোস্টিং $0.99/মাস থেকে শুরু - আপনার সঠিক খরচ গণনা করুন",
@@ -5265,5 +5367,9 @@
         "category": "সিএমএস"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "বিলিং ও পেমেন্ট",
+    "logout": "লগ আউট"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/de.json b/src/plugins/i18n/locales/de.json
index 93586d69..5395d151 100644
--- a/src/plugins/i18n/locales/de.json
+++ b/src/plugins/i18n/locales/de.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "Abrechnung & Zahlungen",
+      "subtitle": "Verfolgen Sie Ihren Flux-App-Zahlungsverlauf",
+      "loading": "Abrechnungsdaten werden geladen...",
+      "fetchingPaymentHistory": "Ihr Zahlungsverlauf wird abgerufen",
+      "noPaymentHistory": "Kein Zahlungsverlauf",
+      "noPaymentsYet": "Sie haben noch keine App-Zahlungen. Registrieren Sie eine App, um Zahlungen zu verfolgen.",
+      "export": "Exportieren",
+      "currentlyRunningApps": "Derzeit laufende Apps",
+      "loadingApps": "Ihre laufenden Apps werden geladen...",
+      "noAppsRunning": "Derzeit laufen keine Apps",
+      "instance": "Instanz",
+      "instances": "Instanzen",
+      "paymentSummary": "Zahlungsübersicht",
+      "totalPaid": "Gesamt bezahlt",
+      "applications": "Anwendungen",
+      "firstTransaction": "Erste Transaktion",
+      "lastTransaction": "Letzte Transaktion",
+      "paymentHistory": "Zahlungsverlauf",
+      "filterByType": "Nach Typ filtern",
+      "allTypes": "Alle Typen",
+      "searchByName": "Suchen...",
+      "noTransactionsFound": "Keine Transaktionen gefunden",
+      "noTransactionsMatch": "Keine Transaktionen entsprechen Ihren Suchkriterien",
+      "exportDialog": {
+        "title": "Zahlungsverlauf exportieren",
+        "format": "Exportformat",
+        "selectFormat": "Exportformat auswählen",
+        "dateRange": "Datumsbereich",
+        "allTime": "Gesamte Zeit",
+        "last30Days": "Letzte 30 Tage",
+        "last90Days": "Letzte 90 Tage",
+        "lastYear": "Letztes Jahr",
+        "customRange": "Benutzerdefinierter Bereich",
+        "startDate": "Startdatum",
+        "endDate": "Enddatum",
+        "export": "Exportieren",
+        "cancel": "Abbrechen"
+      },
+      "table": {
+        "appName": "App-Name",
+        "totalPaid": "Gesamt bezahlt",
+        "payments": "Zahlungen",
+        "avgPayment": "Ø Zahlung",
+        "actions": "Aktionen",
+        "details": "Details",
+        "showing": "{start} bis {end} von {total}"
+      },
+      "transactionTable": {
+        "type": "Typ",
+        "amount": "Betrag",
+        "date": "Datum",
+        "blockHeight": "Blockhöhe",
+        "txid": "Transaktions-ID",
+        "free": "KOSTENLOS",
+        "types": {
+          "register": "Registrierung",
+          "update": "Aktualisierung",
+          "renewal": "Verlängerung"
+        }
+      },
+      "types": {
+        "appregister": "Registrierung",
+        "appupdate": "Aktualisierung"
+      },
+      "stats": {
+        "transactions": "Transaktionen",
+        "registered": "Registriert",
+        "updated": "Aktualisiert",
+        "averageCost": "Durchschnittskosten",
+        "highestPayment": "Höchste Zahlung"
+      },
+      "chart": {
+        "title": "ZAHLUNGSTRENDS",
+        "transactions": "Transaktionen",
+        "last7Days": "Letzte 7 Tage",
+        "cumulativeTotalPayments": "Kumulierte Gesamtzahlungen",
+        "spendingBreakdown": "Ausgabenübersicht",
+        "appLabel": "APP",
+        "viewLabel": "ANSICHT",
+        "periodLabel": "ZEITRAUM",
+        "metricLabel": "METRIK",
+        "filterByApp": "Suchen...",
+        "searchApps": "Apps suchen...",
+        "timeRanges": {
+          "7d": "7 Tage",
+          "30d": "30 Tage",
+          "90d": "90 Tage",
+          "1y": "1 Jahr",
+          "all": "Gesamte Zeit"
+        },
+        "displayModes": {
+          "periodTotal": "Periodensumme",
+          "cumulative": "Kumulativ"
+        },
+        "aggregation": {
+          "daily": "Täglich",
+          "weekly": "Wöchentlich",
+          "monthly": "Monatlich"
+        }
+      }
+    },
     "costCalculator": {
       "title": "App-Hosting-Kostenrechner",
       "subtitle": "Erschwingliches dezentrales Hosting ab 0,99 $/Monat – Berechnen Sie Ihre genauen Kosten",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "Abrechnung & Zahlungen",
+    "logout": "Abmelden"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/en.json b/src/plugins/i18n/locales/en.json
index 4f92c899..523742e4 100644
--- a/src/plugins/i18n/locales/en.json
+++ b/src/plugins/i18n/locales/en.json
@@ -2113,6 +2113,10 @@
       }
     }
   },
+  "userProfile": {
+    "billingAndPayments": "Billing & Payments",
+    "logout": "Logout"
+  },
   "pages": {
     "administration": {
       "systemInfo": {
@@ -3430,6 +3434,108 @@
         }
       }
     },
+    "billing": {
+      "title": "Billing & Payments",
+      "subtitle": "Track your Flux app payment history",
+      "loading": "Loading Billing Data...",
+      "fetchingPaymentHistory": "Fetching your payment history",
+      "noPaymentHistory": "No Payment History",
+      "noPaymentsYet": "You don't have any app payments yet. Register an app to start tracking payments.",
+      "export": "Export",
+      "currentlyRunningApps": "Currently Running Apps",
+      "loadingApps": "Loading your running apps...",
+      "noAppsRunning": "No apps are currently running",
+      "instance": "Instance",
+      "instances": "Instances",
+      "paymentSummary": "Payment Summary",
+      "totalPaid": "Total Paid",
+      "applications": "Applications",
+      "firstTransaction": "First Transaction",
+      "lastTransaction": "Last Transaction",
+      "paymentHistory": "Payment History",
+      "filterByType": "Filter by Type",
+      "allTypes": "All Types",
+      "searchByName": "Search...",
+      "noTransactionsFound": "No transactions found",
+      "noTransactionsMatch": "No transactions match your search criteria",
+      "exportDialog": {
+        "title": "Export Payment History",
+        "format": "Export Format",
+        "selectFormat": "Select export format",
+        "dateRange": "Date Range",
+        "allTime": "All Time",
+        "last30Days": "Last 30 Days",
+        "last90Days": "Last 90 Days",
+        "lastYear": "Last Year",
+        "customRange": "Custom Range",
+        "startDate": "Start Date",
+        "endDate": "End Date",
+        "export": "Export",
+        "cancel": "Cancel"
+      },
+      "table": {
+        "appName": "App Name",
+        "totalPaid": "Total Paid",
+        "payments": "Payments",
+        "avgPayment": "Avg Payment",
+        "actions": "Actions",
+        "details": "Details",
+        "showing": "{start} to {end} of {total}"
+      },
+      "transactionTable": {
+        "type": "Type",
+        "amount": "Amount",
+        "date": "Date",
+        "blockHeight": "Block Height",
+        "txid": "Transaction ID",
+        "free": "FREE",
+        "types": {
+          "register": "Registration",
+          "update": "Update",
+          "renewal": "Renewal"
+        }
+      },
+      "types": {
+        "appregister": "Registration",
+        "appupdate": "Update"
+      },
+      "stats": {
+        "transactions": "Transactions",
+        "registered": "Registered",
+        "updated": "Updated",
+        "averageCost": "Average Cost",
+        "highestPayment": "Highest Payment"
+      },
+      "chart": {
+        "title": "PAYMENT TRENDS",
+        "transactions": "Transactions",
+        "last7Days": "Last 7 Days",
+        "cumulativeTotalPayments": "Cumulative total payments",
+        "spendingBreakdown": "spending breakdown",
+        "appLabel": "APP",
+        "viewLabel": "VIEW",
+        "periodLabel": "PERIOD",
+        "metricLabel": "METRIC",
+        "filterByApp": "Search...",
+        "searchApps": "Search apps...",
+        "timeRanges": {
+          "7d": "7 Days",
+          "30d": "30 Days",
+          "90d": "90 Days",
+          "1y": "1 Year",
+          "all": "All Time"
+        },
+        "displayModes": {
+          "periodTotal": "Period Total",
+          "cumulative": "Cumulative"
+        },
+        "aggregation": {
+          "daily": "Daily",
+          "weekly": "Weekly",
+          "monthly": "Monthly"
+        }
+      }
+    },
     "costCalculator": {
       "title": "App Hosting Cost Calculator",
       "subtitle": "Affordable decentralized hosting starting at $0.99/month - Calculate your exact costs",
diff --git a/src/plugins/i18n/locales/es.json b/src/plugins/i18n/locales/es.json
index 1c091b94..3b0c5871 100644
--- a/src/plugins/i18n/locales/es.json
+++ b/src/plugins/i18n/locales/es.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "Facturación y Pagos",
+      "subtitle": "Rastrea el historial de pagos de tu app Flux",
+      "loading": "Cargando datos de facturación...",
+      "fetchingPaymentHistory": "Obteniendo tu historial de pagos",
+      "noPaymentHistory": "Sin historial de pagos",
+      "noPaymentsYet": "Aún no tienes pagos de apps. Registra una app para comenzar a rastrear pagos.",
+      "export": "Exportar",
+      "currentlyRunningApps": "Apps en ejecución",
+      "loadingApps": "Cargando tus apps en ejecución...",
+      "noAppsRunning": "No hay apps en ejecución actualmente",
+      "instance": "Instancia",
+      "instances": "Instancias",
+      "paymentSummary": "Resumen de pagos",
+      "totalPaid": "Total pagado",
+      "applications": "Aplicaciones",
+      "firstTransaction": "Primera transacción",
+      "lastTransaction": "Última transacción",
+      "paymentHistory": "Historial de pagos",
+      "filterByType": "Filtrar por tipo",
+      "allTypes": "Todos los tipos",
+      "searchByName": "Buscar...",
+      "noTransactionsFound": "No se encontraron transacciones",
+      "noTransactionsMatch": "Ninguna transacción coincide con tus criterios de búsqueda",
+      "exportDialog": {
+        "title": "Exportar historial de pagos",
+        "format": "Formato de exportación",
+        "selectFormat": "Seleccionar formato de exportación",
+        "dateRange": "Rango de fechas",
+        "allTime": "Todo el tiempo",
+        "last30Days": "Últimos 30 días",
+        "last90Days": "Últimos 90 días",
+        "lastYear": "Último año",
+        "customRange": "Rango personalizado",
+        "startDate": "Fecha de inicio",
+        "endDate": "Fecha de fin",
+        "export": "Exportar",
+        "cancel": "Cancelar"
+      },
+      "table": {
+        "appName": "Nombre de app",
+        "totalPaid": "Total pagado",
+        "payments": "Pagos",
+        "avgPayment": "Pago promedio",
+        "actions": "Acciones",
+        "details": "Detalles",
+        "showing": "{start} a {end} de {total}"
+      },
+      "transactionTable": {
+        "type": "Tipo",
+        "amount": "Monto",
+        "date": "Fecha",
+        "blockHeight": "Altura de bloque",
+        "txid": "ID de transacción",
+        "free": "GRATIS",
+        "types": {
+          "register": "Registro",
+          "update": "Actualización",
+          "renewal": "Renovación"
+        }
+      },
+      "types": {
+        "appregister": "Registro",
+        "appupdate": "Actualización"
+      },
+      "stats": {
+        "transactions": "Transacciones",
+        "registered": "Registradas",
+        "updated": "Actualizadas",
+        "averageCost": "Costo promedio",
+        "highestPayment": "Pago más alto"
+      },
+      "chart": {
+        "title": "TENDENCIAS DE PAGO",
+        "transactions": "Transacciones",
+        "last7Days": "Últimos 7 días",
+        "cumulativeTotalPayments": "Pagos totales acumulados",
+        "spendingBreakdown": "desglose de gastos",
+        "appLabel": "APP",
+        "viewLabel": "VISTA",
+        "periodLabel": "PERÍODO",
+        "metricLabel": "MÉTRICA",
+        "filterByApp": "Buscar...",
+        "searchApps": "Buscar apps...",
+        "timeRanges": {
+          "7d": "7 días",
+          "30d": "30 días",
+          "90d": "90 días",
+          "1y": "1 año",
+          "all": "Todo el tiempo"
+        },
+        "displayModes": {
+          "periodTotal": "Total del período",
+          "cumulative": "Acumulativo"
+        },
+        "aggregation": {
+          "daily": "Diario",
+          "weekly": "Semanal",
+          "monthly": "Mensual"
+        }
+      }
+    },
     "costCalculator": {
       "title": "Calculadora de costos de alojamiento de aplicaciones",
       "subtitle": "Alojamiento descentralizado asequible desde $0,99/mes: Calcule sus costos exactos",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "Facturación y Pagos",
+    "logout": "Cerrar sesión"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/fr.json b/src/plugins/i18n/locales/fr.json
index 3b70e522..d4611cf4 100644
--- a/src/plugins/i18n/locales/fr.json
+++ b/src/plugins/i18n/locales/fr.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "Facturation et Paiements",
+      "subtitle": "Suivez l'historique des paiements de votre app Flux",
+      "loading": "Chargement des données de facturation...",
+      "fetchingPaymentHistory": "Récupération de votre historique de paiements",
+      "noPaymentHistory": "Aucun historique de paiements",
+      "noPaymentsYet": "Vous n'avez pas encore de paiements d'apps. Enregistrez une app pour commencer à suivre les paiements.",
+      "export": "Exporter",
+      "currentlyRunningApps": "Apps en cours d'exécution",
+      "loadingApps": "Chargement de vos apps en cours d'exécution...",
+      "noAppsRunning": "Aucune app en cours d'exécution",
+      "instance": "Instance",
+      "instances": "Instances",
+      "paymentSummary": "Résumé des paiements",
+      "totalPaid": "Total payé",
+      "applications": "Applications",
+      "firstTransaction": "Première transaction",
+      "lastTransaction": "Dernière transaction",
+      "paymentHistory": "Historique des paiements",
+      "filterByType": "Filtrer par type",
+      "allTypes": "Tous les types",
+      "searchByName": "Rechercher...",
+      "noTransactionsFound": "Aucune transaction trouvée",
+      "noTransactionsMatch": "Aucune transaction ne correspond à vos critères de recherche",
+      "exportDialog": {
+        "title": "Exporter l'historique des paiements",
+        "format": "Format d'export",
+        "selectFormat": "Sélectionner le format d'export",
+        "dateRange": "Plage de dates",
+        "allTime": "Tout le temps",
+        "last30Days": "30 derniers jours",
+        "last90Days": "90 derniers jours",
+        "lastYear": "Dernière année",
+        "customRange": "Plage personnalisée",
+        "startDate": "Date de début",
+        "endDate": "Date de fin",
+        "export": "Exporter",
+        "cancel": "Annuler"
+      },
+      "table": {
+        "appName": "Nom de l'app",
+        "totalPaid": "Total payé",
+        "payments": "Paiements",
+        "avgPayment": "Paiement moyen",
+        "actions": "Actions",
+        "details": "Détails",
+        "showing": "{start} à {end} sur {total}"
+      },
+      "transactionTable": {
+        "type": "Type",
+        "amount": "Montant",
+        "date": "Date",
+        "blockHeight": "Hauteur de bloc",
+        "txid": "ID de transaction",
+        "free": "GRATUIT",
+        "types": {
+          "register": "Inscription",
+          "update": "Mise à jour",
+          "renewal": "Renouvellement"
+        }
+      },
+      "types": {
+        "appregister": "Inscription",
+        "appupdate": "Mise à jour"
+      },
+      "stats": {
+        "transactions": "Transactions",
+        "registered": "Enregistrées",
+        "updated": "Mises à jour",
+        "averageCost": "Coût moyen",
+        "highestPayment": "Paiement le plus élevé"
+      },
+      "chart": {
+        "title": "TENDANCES DE PAIEMENT",
+        "transactions": "Transactions",
+        "last7Days": "7 derniers jours",
+        "cumulativeTotalPayments": "Total des paiements cumulés",
+        "spendingBreakdown": "répartition des dépenses",
+        "appLabel": "APP",
+        "viewLabel": "VUE",
+        "periodLabel": "PÉRIODE",
+        "metricLabel": "MÉTRIQUE",
+        "filterByApp": "Rechercher...",
+        "searchApps": "Rechercher des apps...",
+        "timeRanges": {
+          "7d": "7 jours",
+          "30d": "30 jours",
+          "90d": "90 jours",
+          "1y": "1 an",
+          "all": "Tout le temps"
+        },
+        "displayModes": {
+          "periodTotal": "Total de la période",
+          "cumulative": "Cumulatif"
+        },
+        "aggregation": {
+          "daily": "Quotidien",
+          "weekly": "Hebdomadaire",
+          "monthly": "Mensuel"
+        }
+      }
+    },
     "costCalculator": {
       "title": "Calculateur de coût d'hébergement d'applications",
       "subtitle": "Hébergement décentralisé abordable à partir de 0,99 $/mois - Calculez vos coûts exacts",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "Facturation et Paiements",
+    "logout": "Déconnexion"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/hi.json b/src/plugins/i18n/locales/hi.json
index 2df1c014..0a4f2c0a 100644
--- a/src/plugins/i18n/locales/hi.json
+++ b/src/plugins/i18n/locales/hi.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "बिलिंग और भुगतान",
+      "subtitle": "अपने Flux ऐप के भुगतान इतिहास को ट्रैक करें",
+      "loading": "बिलिंग डेटा लोड हो रहा है...",
+      "fetchingPaymentHistory": "आपका भुगतान इतिहास प्राप्त किया जा रहा है",
+      "noPaymentHistory": "कोई भुगतान इतिहास नहीं",
+      "noPaymentsYet": "अभी तक कोई ऐप भुगतान नहीं है। भुगतान ट्रैक करना शुरू करने के लिए एक ऐप पंजीकृत करें।",
+      "export": "निर्यात करें",
+      "currentlyRunningApps": "वर्तमान में चल रहे ऐप्स",
+      "loadingApps": "आपके चल रहे ऐप्स लोड हो रहे हैं...",
+      "noAppsRunning": "वर्तमान में कोई ऐप नहीं चल रहा",
+      "instance": "इंस्टेंस",
+      "instances": "इंस्टेंस",
+      "paymentSummary": "भुगतान सारांश",
+      "totalPaid": "कुल भुगतान",
+      "applications": "एप्लिकेशन",
+      "firstTransaction": "पहला लेनदेन",
+      "lastTransaction": "अंतिम लेनदेन",
+      "paymentHistory": "भुगतान इतिहास",
+      "filterByType": "प्रकार के अनुसार फ़िल्टर करें",
+      "allTypes": "सभी प्रकार",
+      "searchByName": "खोजें...",
+      "noTransactionsFound": "कोई लेनदेन नहीं मिला",
+      "noTransactionsMatch": "कोई भी लेनदेन आपके खोज मानदंड से मेल नहीं खाता",
+      "exportDialog": {
+        "title": "भुगतान इतिहास निर्यात करें",
+        "format": "निर्यात प्रारूप",
+        "selectFormat": "निर्यात प्रारूप चुनें",
+        "dateRange": "दिनांक सीमा",
+        "allTime": "सब समय",
+        "last30Days": "पिछले 30 दिन",
+        "last90Days": "पिछले 90 दिन",
+        "lastYear": "पिछला साल",
+        "customRange": "कस्टम सीमा",
+        "startDate": "प्रारंभ तिथि",
+        "endDate": "समाप्ति तिथि",
+        "export": "निर्यात करें",
+        "cancel": "रद्द करें"
+      },
+      "table": {
+        "appName": "ऐप नाम",
+        "totalPaid": "कुल भुगतान",
+        "payments": "भुगतान",
+        "avgPayment": "औसत भुगतान",
+        "actions": "कार्रवाइयाँ",
+        "details": "विवरण",
+        "showing": "{total} में से {start} से {end}"
+      },
+      "transactionTable": {
+        "type": "प्रकार",
+        "amount": "राशि",
+        "date": "तिथि",
+        "blockHeight": "ब्लॉक ऊँचाई",
+        "txid": "लेनदेन ID",
+        "free": "मुफ़्त",
+        "types": {
+          "register": "पंजीकरण",
+          "update": "अपडेट",
+          "renewal": "नवीनीकरण"
+        }
+      },
+      "types": {
+        "appregister": "पंजीकरण",
+        "appupdate": "अपडेट"
+      },
+      "stats": {
+        "transactions": "लेनदेन",
+        "registered": "पंजीकृत",
+        "updated": "अपडेट",
+        "averageCost": "औसत लागत",
+        "highestPayment": "सबसे अधिक भुगतान"
+      },
+      "chart": {
+        "title": "भुगतान रुझान",
+        "transactions": "लेनदेन",
+        "last7Days": "पिछले 7 दिन",
+        "cumulativeTotalPayments": "संचित कुल भुगतान",
+        "spendingBreakdown": "खर्च का विवरण",
+        "appLabel": "ऐप",
+        "viewLabel": "दृश्य",
+        "periodLabel": "अवधि",
+        "metricLabel": "मेट्रिक",
+        "filterByApp": "खोजें...",
+        "searchApps": "ऐप्स खोजें...",
+        "timeRanges": {
+          "7d": "7 दिन",
+          "30d": "30 दिन",
+          "90d": "90 दिन",
+          "1y": "1 साल",
+          "all": "सब समय"
+        },
+        "displayModes": {
+          "periodTotal": "अवधि कुल",
+          "cumulative": "संचित"
+        },
+        "aggregation": {
+          "daily": "दैनिक",
+          "weekly": "साप्ताहिक",
+          "monthly": "मासिक"
+        }
+      }
+    },
     "costCalculator": {
       "title": "ऐप होस्टिंग लागत कैलकुलेटर",
       "subtitle": "$0.99/माह से शुरू होने वाली किफायती विकेन्द्रीकृत होस्टिंग - अपनी सटीक लागतों की गणना करें",
@@ -5265,5 +5367,9 @@
         "category": "मुख्यमंत्रियों"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "बिलिंग और भुगतान",
+    "logout": "लॉग आउट"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/id.json b/src/plugins/i18n/locales/id.json
index a69e2802..aafff5f6 100644
--- a/src/plugins/i18n/locales/id.json
+++ b/src/plugins/i18n/locales/id.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "Tagihan & Pembayaran",
+      "subtitle": "Lacak riwayat pembayaran aplikasi Flux Anda",
+      "loading": "Memuat data tagihan...",
+      "fetchingPaymentHistory": "Mengambil riwayat pembayaran Anda",
+      "noPaymentHistory": "Tidak ada riwayat pembayaran",
+      "noPaymentsYet": "Anda belum memiliki pembayaran aplikasi. Daftarkan aplikasi untuk mulai melacak pembayaran.",
+      "export": "Ekspor",
+      "currentlyRunningApps": "Aplikasi yang sedang berjalan",
+      "loadingApps": "Memuat aplikasi yang sedang berjalan...",
+      "noAppsRunning": "Tidak ada aplikasi yang sedang berjalan",
+      "instance": "Instansi",
+      "instances": "Instansi",
+      "paymentSummary": "Ringkasan pembayaran",
+      "totalPaid": "Total dibayar",
+      "applications": "Aplikasi",
+      "firstTransaction": "Transaksi pertama",
+      "lastTransaction": "Transaksi terakhir",
+      "paymentHistory": "Riwayat pembayaran",
+      "filterByType": "Filter berdasarkan jenis",
+      "allTypes": "Semua jenis",
+      "searchByName": "Cari...",
+      "noTransactionsFound": "Tidak ada transaksi ditemukan",
+      "noTransactionsMatch": "Tidak ada transaksi yang cocok dengan kriteria pencarian Anda",
+      "exportDialog": {
+        "title": "Ekspor riwayat pembayaran",
+        "format": "Format ekspor",
+        "selectFormat": "Pilih format ekspor",
+        "dateRange": "Rentang tanggal",
+        "allTime": "Sepanjang waktu",
+        "last30Days": "30 hari terakhir",
+        "last90Days": "90 hari terakhir",
+        "lastYear": "Tahun lalu",
+        "customRange": "Rentang khusus",
+        "startDate": "Tanggal mulai",
+        "endDate": "Tanggal akhir",
+        "export": "Ekspor",
+        "cancel": "Batal"
+      },
+      "table": {
+        "appName": "Nama aplikasi",
+        "totalPaid": "Total dibayar",
+        "payments": "Pembayaran",
+        "avgPayment": "Rata-rata pembayaran",
+        "actions": "Tindakan",
+        "details": "Detail",
+        "showing": "{start} hingga {end} dari {total}"
+      },
+      "transactionTable": {
+        "type": "Jenis",
+        "amount": "Jumlah",
+        "date": "Tanggal",
+        "blockHeight": "Tinggi blok",
+        "txid": "ID transaksi",
+        "free": "GRATIS",
+        "types": {
+          "register": "Pendaftaran",
+          "update": "Pembaruan",
+          "renewal": "Pembaruan"
+        }
+      },
+      "types": {
+        "appregister": "Pendaftaran",
+        "appupdate": "Pembaruan"
+      },
+      "stats": {
+        "transactions": "Transaksi",
+        "registered": "Terdaftar",
+        "updated": "Diperbarui",
+        "averageCost": "Biaya rata-rata",
+        "highestPayment": "Pembayaran tertinggi"
+      },
+      "chart": {
+        "title": "TREN PEMBAYARAN",
+        "transactions": "Transaksi",
+        "last7Days": "7 hari terakhir",
+        "cumulativeTotalPayments": "Total pembayaran kumulatif",
+        "spendingBreakdown": "rincian pengeluaran",
+        "appLabel": "APP",
+        "viewLabel": "TAMPILAN",
+        "periodLabel": "PERIODE",
+        "metricLabel": "METRIK",
+        "filterByApp": "Cari...",
+        "searchApps": "Cari aplikasi...",
+        "timeRanges": {
+          "7d": "7 hari",
+          "30d": "30 hari",
+          "90d": "90 hari",
+          "1y": "1 tahun",
+          "all": "Sepanjang waktu"
+        },
+        "displayModes": {
+          "periodTotal": "Total periode",
+          "cumulative": "Kumulatif"
+        },
+        "aggregation": {
+          "daily": "Harian",
+          "weekly": "Mingguan",
+          "monthly": "Bulanan"
+        }
+      }
+    },
     "costCalculator": {
       "title": "Kalkulator Biaya Hosting Aplikasi",
       "subtitle": "Hosting terdesentralisasi yang terjangkau mulai dari $0,99/bulan - Hitung biaya pasti Anda",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "Tagihan & Pembayaran",
+    "logout": "Keluar"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/it.json b/src/plugins/i18n/locales/it.json
index a43c6a96..93ebbc28 100644
--- a/src/plugins/i18n/locales/it.json
+++ b/src/plugins/i18n/locales/it.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "Fatturazione e Pagamenti",
+      "subtitle": "Tieni traccia della cronologia dei pagamenti della tua app Flux",
+      "loading": "Caricamento dati di fatturazione...",
+      "fetchingPaymentHistory": "Recupero della cronologia dei pagamenti",
+      "noPaymentHistory": "Nessuna cronologia dei pagamenti",
+      "noPaymentsYet": "Non hai ancora pagamenti per app. Registra un'app per iniziare a tracciare i pagamenti.",
+      "export": "Esporta",
+      "currentlyRunningApps": "App in esecuzione",
+      "loadingApps": "Caricamento app in esecuzione...",
+      "noAppsRunning": "Nessuna app in esecuzione",
+      "instance": "Istanza",
+      "instances": "Istanze",
+      "paymentSummary": "Riepilogo pagamenti",
+      "totalPaid": "Totale pagato",
+      "applications": "Applicazioni",
+      "firstTransaction": "Prima transazione",
+      "lastTransaction": "Ultima transazione",
+      "paymentHistory": "Cronologia pagamenti",
+      "filterByType": "Filtra per tipo",
+      "allTypes": "Tutti i tipi",
+      "searchByName": "Cerca...",
+      "noTransactionsFound": "Nessuna transazione trovata",
+      "noTransactionsMatch": "Nessuna transazione corrisponde ai criteri di ricerca",
+      "exportDialog": {
+        "title": "Esporta cronologia pagamenti",
+        "format": "Formato di esportazione",
+        "selectFormat": "Seleziona il formato di esportazione",
+        "dateRange": "Intervallo di date",
+        "allTime": "Tutto il tempo",
+        "last30Days": "Ultimi 30 giorni",
+        "last90Days": "Ultimi 90 giorni",
+        "lastYear": "Ultimo anno",
+        "customRange": "Intervallo personalizzato",
+        "startDate": "Data di inizio",
+        "endDate": "Data di fine",
+        "export": "Esporta",
+        "cancel": "Annulla"
+      },
+      "table": {
+        "appName": "Nome app",
+        "totalPaid": "Totale pagato",
+        "payments": "Pagamenti",
+        "avgPayment": "Pagamento medio",
+        "actions": "Azioni",
+        "details": "Dettagli",
+        "showing": "{start} a {end} di {total}"
+      },
+      "transactionTable": {
+        "type": "Tipo",
+        "amount": "Importo",
+        "date": "Data",
+        "blockHeight": "Altezza blocco",
+        "txid": "ID transazione",
+        "free": "GRATIS",
+        "types": {
+          "register": "Registrazione",
+          "update": "Aggiornamento",
+          "renewal": "Rinnovo"
+        }
+      },
+      "types": {
+        "appregister": "Registrazione",
+        "appupdate": "Aggiornamento"
+      },
+      "stats": {
+        "transactions": "Transazioni",
+        "registered": "Registrate",
+        "updated": "Aggiornate",
+        "averageCost": "Costo medio",
+        "highestPayment": "Pagamento più alto"
+      },
+      "chart": {
+        "title": "TENDENZE DI PAGAMENTO",
+        "transactions": "Transazioni",
+        "last7Days": "Ultimi 7 giorni",
+        "cumulativeTotalPayments": "Totale pagamenti cumulativi",
+        "spendingBreakdown": "ripartizione delle spese",
+        "appLabel": "APP",
+        "viewLabel": "VISUALIZZAZIONE",
+        "periodLabel": "PERIODO",
+        "metricLabel": "METRICA",
+        "filterByApp": "Cerca...",
+        "searchApps": "Cerca app...",
+        "timeRanges": {
+          "7d": "7 giorni",
+          "30d": "30 giorni",
+          "90d": "90 giorni",
+          "1y": "1 anno",
+          "all": "Tutto il tempo"
+        },
+        "displayModes": {
+          "periodTotal": "Totale del periodo",
+          "cumulative": "Cumulativo"
+        },
+        "aggregation": {
+          "daily": "Giornaliero",
+          "weekly": "Settimanale",
+          "monthly": "Mensile"
+        }
+      }
+    },
     "costCalculator": {
       "title": "Calcolatore dei costi di hosting delle app",
       "subtitle": "Hosting decentralizzato conveniente a partire da $ 0,99 al mese: calcola i costi esatti",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "Fatturazione e Pagamenti",
+    "logout": "Esci"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/ja.json b/src/plugins/i18n/locales/ja.json
index 3962de3e..5173ed01 100644
--- a/src/plugins/i18n/locales/ja.json
+++ b/src/plugins/i18n/locales/ja.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "請求と支払い",
+      "subtitle": "Fluxアプリの支払い履歴を追跡する",
+      "loading": "請求データを読み込み中...",
+      "fetchingPaymentHistory": "支払い履歴を取得中",
+      "noPaymentHistory": "支払い履歴なし",
+      "noPaymentsYet": "まだアプリの支払いはありません。支払いの追跡を開始するにはアプリを登録してください。",
+      "export": "エクスポート",
+      "currentlyRunningApps": "実行中のアプリ",
+      "loadingApps": "実行中のアプリを読み込み中...",
+      "noAppsRunning": "現在実行中のアプリはありません",
+      "instance": "インスタンス",
+      "instances": "インスタンス",
+      "paymentSummary": "支払いサマリー",
+      "totalPaid": "合計支払額",
+      "applications": "アプリケーション",
+      "firstTransaction": "最初のトランザクション",
+      "lastTransaction": "最後のトランザクション",
+      "paymentHistory": "支払い履歴",
+      "filterByType": "タイプでフィルター",
+      "allTypes": "すべてのタイプ",
+      "searchByName": "検索...",
+      "noTransactionsFound": "トランザクションが見つかりません",
+      "noTransactionsMatch": "検索条件に一致するトランザクションはありません",
+      "exportDialog": {
+        "title": "支払い履歴をエクスポート",
+        "format": "エクスポート形式",
+        "selectFormat": "エクスポート形式を選択",
+        "dateRange": "日付範囲",
+        "allTime": "全期間",
+        "last30Days": "過去30日間",
+        "last90Days": "過去90日間",
+        "lastYear": "過去1年間",
+        "customRange": "カスタム範囲",
+        "startDate": "開始日",
+        "endDate": "終了日",
+        "export": "エクスポート",
+        "cancel": "キャンセル"
+      },
+      "table": {
+        "appName": "アプリ名",
+        "totalPaid": "合計支払額",
+        "payments": "支払い回数",
+        "avgPayment": "平均支払額",
+        "actions": "操作",
+        "details": "詳細",
+        "showing": "{total}件中{start}〜{end}件"
+      },
+      "transactionTable": {
+        "type": "タイプ",
+        "amount": "金額",
+        "date": "日付",
+        "blockHeight": "ブロック高",
+        "txid": "トランザクションID",
+        "free": "無料",
+        "types": {
+          "register": "登録",
+          "update": "更新",
+          "renewal": "更新（継続）"
+        }
+      },
+      "types": {
+        "appregister": "登録",
+        "appupdate": "更新"
+      },
+      "stats": {
+        "transactions": "トランザクション",
+        "registered": "登録済み",
+        "updated": "更新済み",
+        "averageCost": "平均コスト",
+        "highestPayment": "最高支払額"
+      },
+      "chart": {
+        "title": "支払いトレンド",
+        "transactions": "トランザクション",
+        "last7Days": "過去7日間",
+        "cumulativeTotalPayments": "累積合計支払額",
+        "spendingBreakdown": "支出内訳",
+        "appLabel": "アプリ",
+        "viewLabel": "表示",
+        "periodLabel": "期間",
+        "metricLabel": "指標",
+        "filterByApp": "検索...",
+        "searchApps": "アプリを検索...",
+        "timeRanges": {
+          "7d": "7日間",
+          "30d": "30日間",
+          "90d": "90日間",
+          "1y": "1年間",
+          "all": "全期間"
+        },
+        "displayModes": {
+          "periodTotal": "期間合計",
+          "cumulative": "累積"
+        },
+        "aggregation": {
+          "daily": "日次",
+          "weekly": "週次",
+          "monthly": "月次"
+        }
+      }
+    },
     "costCalculator": {
       "title": "アプリのホスティングコスト計算ツール",
       "subtitle": "月額 0.99 ドルから始まる手頃な分散型ホスティング - 正確なコストを計算します",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "請求と支払い",
+    "logout": "ログアウト"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/jv.json b/src/plugins/i18n/locales/jv.json
index 3a421f93..69d196fc 100644
--- a/src/plugins/i18n/locales/jv.json
+++ b/src/plugins/i18n/locales/jv.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "Tagihan & Pembayaran",
+      "subtitle": "Lacak riwayat pembayaran aplikasi Flux sampeyan",
+      "loading": "Ngemot data tagihan...",
+      "fetchingPaymentHistory": "Njupuk riwayat pembayaran sampeyan",
+      "noPaymentHistory": "Ora ana riwayat pembayaran",
+      "noPaymentsYet": "Sampeyan durung duwe pembayaran aplikasi. Daftarake aplikasi kanggo wiwit nglacak pembayaran.",
+      "export": "Ekspor",
+      "currentlyRunningApps": "Aplikasi sing lagi mlaku",
+      "loadingApps": "Ngemot aplikasi sing lagi mlaku...",
+      "noAppsRunning": "Ora ana aplikasi sing lagi mlaku",
+      "instance": "Instansi",
+      "instances": "Instansi",
+      "paymentSummary": "Ringkesan pembayaran",
+      "totalPaid": "Total dibayar",
+      "applications": "Aplikasi",
+      "firstTransaction": "Transaksi pertama",
+      "lastTransaction": "Transaksi pungkasan",
+      "paymentHistory": "Riwayat pembayaran",
+      "filterByType": "Filter miturut jinis",
+      "allTypes": "Kabeh jinis",
+      "searchByName": "Goleki...",
+      "noTransactionsFound": "Ora ana transaksi sing ditemokake",
+      "noTransactionsMatch": "Ora ana transaksi sing cocog karo kriteria panelusuran sampeyan",
+      "exportDialog": {
+        "title": "Ekspor riwayat pembayaran",
+        "format": "Format ekspor",
+        "selectFormat": "Pilih format ekspor",
+        "dateRange": "Rentang tanggal",
+        "allTime": "Kabeh wektu",
+        "last30Days": "30 dina kepungkur",
+        "last90Days": "90 dina kepungkur",
+        "lastYear": "Taun kepungkur",
+        "customRange": "Rentang khusus",
+        "startDate": "Tanggal mulai",
+        "endDate": "Tanggal pungkasan",
+        "export": "Ekspor",
+        "cancel": "Batal"
+      },
+      "table": {
+        "appName": "Jeneng aplikasi",
+        "totalPaid": "Total dibayar",
+        "payments": "Pembayaran",
+        "avgPayment": "Rata-rata pembayaran",
+        "actions": "Tindakan",
+        "details": "Detail",
+        "showing": "{start} nganti {end} saka {total}"
+      },
+      "transactionTable": {
+        "type": "Jinis",
+        "amount": "Jumlah",
+        "date": "Tanggal",
+        "blockHeight": "Dhuwur blok",
+        "txid": "ID transaksi",
+        "free": "GRATIS",
+        "types": {
+          "register": "Pendaftaran",
+          "update": "Pembaruan",
+          "renewal": "Pembaruan"
+        }
+      },
+      "types": {
+        "appregister": "Pendaftaran",
+        "appupdate": "Pembaruan"
+      },
+      "stats": {
+        "transactions": "Transaksi",
+        "registered": "Terdaftar",
+        "updated": "Diperbarui",
+        "averageCost": "Biaya rata-rata",
+        "highestPayment": "Pembayaran tertinggi"
+      },
+      "chart": {
+        "title": "TREN PEMBAYARAN",
+        "transactions": "Transaksi",
+        "last7Days": "7 dina kepungkur",
+        "cumulativeTotalPayments": "Total pembayaran kumulatif",
+        "spendingBreakdown": "rincian pengeluaran",
+        "appLabel": "APP",
+        "viewLabel": "TAMPILAN",
+        "periodLabel": "PERIODE",
+        "metricLabel": "METRIK",
+        "filterByApp": "Goleki...",
+        "searchApps": "Goleki aplikasi...",
+        "timeRanges": {
+          "7d": "7 dina",
+          "30d": "30 dina",
+          "90d": "90 dina",
+          "1y": "1 taun",
+          "all": "Kabeh wektu"
+        },
+        "displayModes": {
+          "periodTotal": "Total periode",
+          "cumulative": "Kumulatif"
+        },
+        "aggregation": {
+          "daily": "Saben dina",
+          "weekly": "Saben minggu",
+          "monthly": "Saben sasi"
+        }
+      }
+    },
     "costCalculator": {
       "title": "Kalkulator Biaya",
       "subtitle": "Affordable Desentralisasi hosting Mulai at $0.99/sasi - Calculate your exact costs",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "Tagihan & Pembayaran",
+    "logout": "Metu"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/ko.json b/src/plugins/i18n/locales/ko.json
index 7dd42cc5..d5424c46 100644
--- a/src/plugins/i18n/locales/ko.json
+++ b/src/plugins/i18n/locales/ko.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "청구 및 결제",
+      "subtitle": "Flux 앱 결제 내역 추적",
+      "loading": "청구 데이터 로딩 중...",
+      "fetchingPaymentHistory": "결제 내역을 가져오는 중",
+      "noPaymentHistory": "결제 내역 없음",
+      "noPaymentsYet": "아직 앱 결제 내역이 없습니다. 결제를 추적하려면 앱을 등록하세요.",
+      "export": "내보내기",
+      "currentlyRunningApps": "현재 실행 중인 앱",
+      "loadingApps": "실행 중인 앱을 로딩 중...",
+      "noAppsRunning": "현재 실행 중인 앱이 없습니다",
+      "instance": "인스턴스",
+      "instances": "인스턴스",
+      "paymentSummary": "결제 요약",
+      "totalPaid": "총 결제액",
+      "applications": "애플리케이션",
+      "firstTransaction": "첫 번째 트랜잭션",
+      "lastTransaction": "마지막 트랜잭션",
+      "paymentHistory": "결제 내역",
+      "filterByType": "유형으로 필터",
+      "allTypes": "모든 유형",
+      "searchByName": "검색...",
+      "noTransactionsFound": "트랜잭션을 찾을 수 없습니다",
+      "noTransactionsMatch": "검색 조건에 맞는 트랜잭션이 없습니다",
+      "exportDialog": {
+        "title": "결제 내역 내보내기",
+        "format": "내보내기 형식",
+        "selectFormat": "내보내기 형식 선택",
+        "dateRange": "날짜 범위",
+        "allTime": "전체 기간",
+        "last30Days": "최근 30일",
+        "last90Days": "최근 90일",
+        "lastYear": "최근 1년",
+        "customRange": "사용자 지정 범위",
+        "startDate": "시작 날짜",
+        "endDate": "종료 날짜",
+        "export": "내보내기",
+        "cancel": "취소"
+      },
+      "table": {
+        "appName": "앱 이름",
+        "totalPaid": "총 결제액",
+        "payments": "결제 횟수",
+        "avgPayment": "평균 결제액",
+        "actions": "작업",
+        "details": "세부 정보",
+        "showing": "{total}개 중 {start}~{end}"
+      },
+      "transactionTable": {
+        "type": "유형",
+        "amount": "금액",
+        "date": "날짜",
+        "blockHeight": "블록 높이",
+        "txid": "트랜잭션 ID",
+        "free": "무료",
+        "types": {
+          "register": "등록",
+          "update": "업데이트",
+          "renewal": "갱신"
+        }
+      },
+      "types": {
+        "appregister": "등록",
+        "appupdate": "업데이트"
+      },
+      "stats": {
+        "transactions": "트랜잭션",
+        "registered": "등록됨",
+        "updated": "업데이트됨",
+        "averageCost": "평균 비용",
+        "highestPayment": "최고 결제액"
+      },
+      "chart": {
+        "title": "결제 동향",
+        "transactions": "트랜잭션",
+        "last7Days": "최근 7일",
+        "cumulativeTotalPayments": "누적 총 결제액",
+        "spendingBreakdown": "지출 내역",
+        "appLabel": "앱",
+        "viewLabel": "보기",
+        "periodLabel": "기간",
+        "metricLabel": "지표",
+        "filterByApp": "검색...",
+        "searchApps": "앱 검색...",
+        "timeRanges": {
+          "7d": "7일",
+          "30d": "30일",
+          "90d": "90일",
+          "1y": "1년",
+          "all": "전체 기간"
+        },
+        "displayModes": {
+          "periodTotal": "기간 합계",
+          "cumulative": "누적"
+        },
+        "aggregation": {
+          "daily": "일별",
+          "weekly": "주별",
+          "monthly": "월별"
+        }
+      }
+    },
     "costCalculator": {
       "title": "앱 호스팅 비용 계산기",
       "subtitle": "월 $0.99부터 시작하는 저렴한 분산 호스팅 - 정확한 비용 계산",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "청구 및 결제",
+    "logout": "로그아웃"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/mr.json b/src/plugins/i18n/locales/mr.json
index e7ea564e..89cb33b7 100644
--- a/src/plugins/i18n/locales/mr.json
+++ b/src/plugins/i18n/locales/mr.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "बिलिंग आणि पेमेंट",
+      "subtitle": "तुमच्या Flux अ‍ॅपचा पेमेंट इतिहास ट्रॅक करा",
+      "loading": "बिलिंग डेटा लोड होत आहे...",
+      "fetchingPaymentHistory": "तुमचा पेमेंट इतिहास आणला जात आहे",
+      "noPaymentHistory": "कोणताही पेमेंट इतिहास नाही",
+      "noPaymentsYet": "अद्याप कोणतेही अ‍ॅप पेमेंट नाही. पेमेंट ट्रॅक करणे सुरू करण्यासाठी अ‍ॅप नोंदणी करा.",
+      "export": "निर्यात करा",
+      "currentlyRunningApps": "सध्या चालू असलेले अ‍ॅप्स",
+      "loadingApps": "तुमचे चालू असलेले अ‍ॅप्स लोड होत आहेत...",
+      "noAppsRunning": "सध्या कोणतेही अ‍ॅप चालू नाही",
+      "instance": "इन्स्टन्स",
+      "instances": "इन्स्टन्सेस",
+      "paymentSummary": "पेमेंट सारांश",
+      "totalPaid": "एकूण भरलेले",
+      "applications": "अ‍ॅप्लिकेशन्स",
+      "firstTransaction": "पहिला व्यवहार",
+      "lastTransaction": "शेवटचा व्यवहार",
+      "paymentHistory": "पेमेंट इतिहास",
+      "filterByType": "प्रकारानुसार फिल्टर करा",
+      "allTypes": "सर्व प्रकार",
+      "searchByName": "शोधा...",
+      "noTransactionsFound": "कोणताही व्यवहार आढळला नाही",
+      "noTransactionsMatch": "तुमच्या शोध निकषांशी जुळणारे कोणतेही व्यवहार नाहीत",
+      "exportDialog": {
+        "title": "पेमेंट इतिहास निर्यात करा",
+        "format": "निर्यात स्वरूप",
+        "selectFormat": "निर्यात स्वरूप निवडा",
+        "dateRange": "तारीख श्रेणी",
+        "allTime": "सर्व वेळ",
+        "last30Days": "मागील ३० दिवस",
+        "last90Days": "मागील ९० दिवस",
+        "lastYear": "मागील वर्ष",
+        "customRange": "सानुकूल श्रेणी",
+        "startDate": "प्रारंभ तारीख",
+        "endDate": "समाप्ती तारीख",
+        "export": "निर्यात करा",
+        "cancel": "रद्द करा"
+      },
+      "table": {
+        "appName": "अ‍ॅपचे नाव",
+        "totalPaid": "एकूण भरलेले",
+        "payments": "पेमेंट",
+        "avgPayment": "सरासरी पेमेंट",
+        "actions": "क्रिया",
+        "details": "तपशील",
+        "showing": "{total} पैकी {start} ते {end}"
+      },
+      "transactionTable": {
+        "type": "प्रकार",
+        "amount": "रक्कम",
+        "date": "तारीख",
+        "blockHeight": "ब्लॉक उंची",
+        "txid": "व्यवहार ID",
+        "free": "मोफत",
+        "types": {
+          "register": "नोंदणी",
+          "update": "अपडेट",
+          "renewal": "नूतनीकरण"
+        }
+      },
+      "types": {
+        "appregister": "नोंदणी",
+        "appupdate": "अपडेट"
+      },
+      "stats": {
+        "transactions": "व्यवहार",
+        "registered": "नोंदणीकृत",
+        "updated": "अपडेट केलेले",
+        "averageCost": "सरासरी खर्च",
+        "highestPayment": "सर्वाधिक पेमेंट"
+      },
+      "chart": {
+        "title": "पेमेंट ट्रेंड",
+        "transactions": "व्यवहार",
+        "last7Days": "मागील ७ दिवस",
+        "cumulativeTotalPayments": "संचित एकूण पेमेंट",
+        "spendingBreakdown": "खर्चाचा तपशील",
+        "appLabel": "अ‍ॅप",
+        "viewLabel": "दृश्य",
+        "periodLabel": "कालावधी",
+        "metricLabel": "मेट्रिक",
+        "filterByApp": "शोधा...",
+        "searchApps": "अ‍ॅप्स शोधा...",
+        "timeRanges": {
+          "7d": "७ दिवस",
+          "30d": "३० दिवस",
+          "90d": "९० दिवस",
+          "1y": "१ वर्ष",
+          "all": "सर्व वेळ"
+        },
+        "displayModes": {
+          "periodTotal": "कालावधीचा एकूण",
+          "cumulative": "संचित"
+        },
+        "aggregation": {
+          "daily": "दैनिक",
+          "weekly": "साप्ताहिक",
+          "monthly": "मासिक"
+        }
+      }
+    },
     "costCalculator": {
       "title": "ॲप होस्टिंग कॉस्ट कॅल्क्युलेटर",
       "subtitle": "$0.99/महिना पासून सुरू होणारी परवडणारी विकेंद्रित होस्टिंग - तुमच्या अचूक खर्चाची गणना करा",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "बिलिंग आणि पेमेंट",
+    "logout": "लॉग आउट"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/pa.json b/src/plugins/i18n/locales/pa.json
index 1e427347..9b921c25 100644
--- a/src/plugins/i18n/locales/pa.json
+++ b/src/plugins/i18n/locales/pa.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "ਬਿਲਿੰਗ ਅਤੇ ਭੁਗਤਾਨ",
+      "subtitle": "ਆਪਣੇ Flux ਐਪ ਦੇ ਭੁਗਤਾਨ ਇਤਿਹਾਸ ਨੂੰ ਟ੍ਰੈਕ ਕਰੋ",
+      "loading": "ਬਿਲਿੰਗ ਡੇਟਾ ਲੋਡ ਹੋ ਰਿਹਾ ਹੈ...",
+      "fetchingPaymentHistory": "ਤੁਹਾਡਾ ਭੁਗਤਾਨ ਇਤਿਹਾਸ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ",
+      "noPaymentHistory": "ਕੋਈ ਭੁਗਤਾਨ ਇਤਿਹਾਸ ਨਹੀਂ",
+      "noPaymentsYet": "ਅਜੇ ਤੱਕ ਕੋਈ ਐਪ ਭੁਗਤਾਨ ਨਹੀਂ। ਭੁਗਤਾਨ ਟ੍ਰੈਕ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇੱਕ ਐਪ ਰਜਿਸਟਰ ਕਰੋ।",
+      "export": "ਨਿਰਯਾਤ ਕਰੋ",
+      "currentlyRunningApps": "ਵਰਤਮਾਨ ਵਿੱਚ ਚੱਲ ਰਹੇ ਐਪਸ",
+      "loadingApps": "ਤੁਹਾਡੇ ਚੱਲ ਰਹੇ ਐਪਸ ਲੋਡ ਹੋ ਰਹੇ ਹਨ...",
+      "noAppsRunning": "ਵਰਤਮਾਨ ਵਿੱਚ ਕੋਈ ਐਪ ਨਹੀਂ ਚੱਲ ਰਿਹਾ",
+      "instance": "ਇੰਸਟੈਂਸ",
+      "instances": "ਇੰਸਟੈਂਸ",
+      "paymentSummary": "ਭੁਗਤਾਨ ਸੰਖੇਪ",
+      "totalPaid": "ਕੁੱਲ ਭੁਗਤਾਨ",
+      "applications": "ਐਪਲੀਕੇਸ਼ਨਾਂ",
+      "firstTransaction": "ਪਹਿਲਾ ਲੈਣ-ਦੇਣ",
+      "lastTransaction": "ਆਖਰੀ ਲੈਣ-ਦੇਣ",
+      "paymentHistory": "ਭੁਗਤਾਨ ਇਤਿਹਾਸ",
+      "filterByType": "ਕਿਸਮ ਅਨੁਸਾਰ ਫਿਲਟਰ ਕਰੋ",
+      "allTypes": "ਸਾਰੀਆਂ ਕਿਸਮਾਂ",
+      "searchByName": "ਖੋਜੋ...",
+      "noTransactionsFound": "ਕੋਈ ਲੈਣ-ਦੇਣ ਨਹੀਂ ਮਿਲਿਆ",
+      "noTransactionsMatch": "ਤੁਹਾਡੇ ਖੋਜ ਮਾਪਦੰਡ ਨਾਲ ਕੋਈ ਲੈਣ-ਦੇਣ ਨਹੀਂ ਮਿਲਦਾ",
+      "exportDialog": {
+        "title": "ਭੁਗਤਾਨ ਇਤਿਹਾਸ ਨਿਰਯਾਤ ਕਰੋ",
+        "format": "ਨਿਰਯਾਤ ਫਾਰਮੈਟ",
+        "selectFormat": "ਨਿਰਯਾਤ ਫਾਰਮੈਟ ਚੁਣੋ",
+        "dateRange": "ਮਿਤੀ ਸੀਮਾ",
+        "allTime": "ਸਾਰਾ ਸਮਾਂ",
+        "last30Days": "ਪਿਛਲੇ 30 ਦਿਨ",
+        "last90Days": "ਪਿਛਲੇ 90 ਦਿਨ",
+        "lastYear": "ਪਿਛਲਾ ਸਾਲ",
+        "customRange": "ਕਸਟਮ ਸੀਮਾ",
+        "startDate": "ਸ਼ੁਰੂਆਤੀ ਮਿਤੀ",
+        "endDate": "ਅੰਤਿਮ ਮਿਤੀ",
+        "export": "ਨਿਰਯਾਤ ਕਰੋ",
+        "cancel": "ਰੱਦ ਕਰੋ"
+      },
+      "table": {
+        "appName": "ਐਪ ਦਾ ਨਾਮ",
+        "totalPaid": "ਕੁੱਲ ਭੁਗਤਾਨ",
+        "payments": "ਭੁਗਤਾਨ",
+        "avgPayment": "ਔਸਤ ਭੁਗਤਾਨ",
+        "actions": "ਕਾਰਵਾਈਆਂ",
+        "details": "ਵੇਰਵੇ",
+        "showing": "{total} ਵਿੱਚੋਂ {start} ਤੋਂ {end}"
+      },
+      "transactionTable": {
+        "type": "ਕਿਸਮ",
+        "amount": "ਰਕਮ",
+        "date": "ਮਿਤੀ",
+        "blockHeight": "ਬਲਾਕ ਉਚਾਈ",
+        "txid": "ਲੈਣ-ਦੇਣ ID",
+        "free": "ਮੁਫ਼ਤ",
+        "types": {
+          "register": "ਰਜਿਸਟ੍ਰੇਸ਼ਨ",
+          "update": "ਅਪਡੇਟ",
+          "renewal": "ਨਵੀਨੀਕਰਣ"
+        }
+      },
+      "types": {
+        "appregister": "ਰਜਿਸਟ੍ਰੇਸ਼ਨ",
+        "appupdate": "ਅਪਡੇਟ"
+      },
+      "stats": {
+        "transactions": "ਲੈਣ-ਦੇਣ",
+        "registered": "ਰਜਿਸਟਰਡ",
+        "updated": "ਅਪਡੇਟ ਕੀਤਾ",
+        "averageCost": "ਔਸਤ ਲਾਗਤ",
+        "highestPayment": "ਸਭ ਤੋਂ ਉੱਚਾ ਭੁਗਤਾਨ"
+      },
+      "chart": {
+        "title": "ਭੁਗਤਾਨ ਰੁਝਾਨ",
+        "transactions": "ਲੈਣ-ਦੇਣ",
+        "last7Days": "ਪਿਛਲੇ 7 ਦਿਨ",
+        "cumulativeTotalPayments": "ਸੰਚਿਤ ਕੁੱਲ ਭੁਗਤਾਨ",
+        "spendingBreakdown": "ਖਰਚੇ ਦਾ ਵੇਰਵਾ",
+        "appLabel": "ਐਪ",
+        "viewLabel": "ਦ੍ਰਿਸ਼",
+        "periodLabel": "ਅਵਧੀ",
+        "metricLabel": "ਮੈਟ੍ਰਿਕ",
+        "filterByApp": "ਖੋਜੋ...",
+        "searchApps": "ਐਪਸ ਖੋਜੋ...",
+        "timeRanges": {
+          "7d": "7 ਦਿਨ",
+          "30d": "30 ਦਿਨ",
+          "90d": "90 ਦਿਨ",
+          "1y": "1 ਸਾਲ",
+          "all": "ਸਾਰਾ ਸਮਾਂ"
+        },
+        "displayModes": {
+          "periodTotal": "ਅਵਧੀ ਕੁੱਲ",
+          "cumulative": "ਸੰਚਿਤ"
+        },
+        "aggregation": {
+          "daily": "ਰੋਜ਼ਾਨਾ",
+          "weekly": "ਹਫ਼ਤਾਵਾਰੀ",
+          "monthly": "ਮਾਸਿਕ"
+        }
+      }
+    },
     "costCalculator": {
       "title": "ਐਪ ਹੋਸਟਿੰਗ ਲਾਗਤ ਕੈਲਕੁਲੇਟਰ",
       "subtitle": "$0.99/ਮਹੀਨੇ ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੀ ਕਿਫਾਇਤੀ ਵਿਕੇਂਦਰੀਕ੍ਰਿਤ ਹੋਸਟਿੰਗ - ਆਪਣੀਆਂ ਸਹੀ ਲਾਗਤਾਂ ਦੀ ਗਣਨਾ ਕਰੋ",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "ਬਿਲਿੰਗ ਅਤੇ ਭੁਗਤਾਨ",
+    "logout": "ਲੌਗ ਆਉਟ"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/pl.json b/src/plugins/i18n/locales/pl.json
index 086955bb..01bdef22 100644
--- a/src/plugins/i18n/locales/pl.json
+++ b/src/plugins/i18n/locales/pl.json
@@ -970,6 +970,10 @@
       "loading": "Ładowanie Regulaminu..."
     }
   },
+  "userProfile": {
+    "billingAndPayments": "Płatności i rozliczenia",
+    "logout": "Wyloguj"
+  },
   "pages": {
     "apps": {
       "manage": {
@@ -3262,6 +3266,109 @@
       "loading": "Ładowanie sklepu...",
       "maintenanceSubtitle": "Obecnie występują problemy techniczne ze sklepem. Nasz zespół pracuje nad jak najszybszym rozwiązaniem tego problemu."
     },
+    "billing": {
+      "title": "Rozliczenia i Płatności",
+      "subtitle": "Śledź historię płatności za aplikacje Flux",
+      "loading": "Ładowanie Danych Rozliczeniowych...",
+      "fetchingPaymentHistory": "Pobieranie historii płatności",
+      "noPaymentHistory": "Brak Historii Płatności",
+      "noPaymentsYet": "Nie masz jeszcze żadnych płatności za aplikacje. Zarejestruj aplikację, aby rozpocząć śledzenie płatności.",
+      "export": "Eksportuj",
+      "currentlyRunningApps": "Lista Aktywnych Aplikacji",
+      "loadingApps": "Ładowanie działających aplikacji...",
+      "noAppsRunning": "Brak działających aplikacji",
+      "instance": "Instancja",
+      "instances": "Instancje",
+      "instancesGenitive": "Instancji",
+      "paymentSummary": "Podsumowanie Płatności",
+      "totalPaid": "Łącznie Zapłacono",
+      "applications": "Aplikacje",
+      "firstTransaction": "Pierwsza Transakcja",
+      "lastTransaction": "Ostatnia Transakcja",
+      "paymentHistory": "Historia Płatności",
+      "filterByType": "Filtruj po Typie",
+      "allTypes": "Wszystkie Typy",
+      "searchByName": "Szukaj...",
+      "noTransactionsFound": "Nie znaleziono transakcji",
+      "noTransactionsMatch": "Żadne transakcje nie pasują do kryteriów wyszukiwania",
+      "exportDialog": {
+        "title": "Eksportuj Historię Płatności",
+        "format": "Format Eksportu",
+        "selectFormat": "Wybierz format eksportu",
+        "dateRange": "Zakres Dat",
+        "allTime": "Cały Czas",
+        "last30Days": "Ostatnie 30 Dni",
+        "last90Days": "Ostatnie 90 Dni",
+        "lastYear": "Ostatni Rok",
+        "customRange": "Zakres Niestandardowy",
+        "startDate": "Data Rozpoczęcia",
+        "endDate": "Data Zakończenia",
+        "export": "Eksportuj",
+        "cancel": "Anuluj"
+      },
+      "table": {
+        "appName": "Nazwa Aplikacji",
+        "totalPaid": "Suma wpłat",
+        "payments": "Płatności",
+        "avgPayment": "Śr. płatność",
+        "actions": "Akcje",
+        "details": "Szczegóły",
+        "showing": "{start} do {end} z {total}"
+      },
+      "transactionTable": {
+        "type": "Typ",
+        "amount": "Kwota",
+        "date": "Data",
+        "blockHeight": "Wysokość Bloku",
+        "txid": "ID Transakcji",
+        "free": "DARMOWA",
+        "types": {
+          "register": "Rejestracja",
+          "update": "Aktualizacja",
+          "renewal": "Odnowienie"
+        }
+      },
+      "types": {
+        "appregister": "Rejestracje",
+        "appupdate": "Aktualizacje"
+      },
+      "stats": {
+        "transactions": "Transakcje",
+        "registered": "Zarejestrowanych",
+        "updated": "Aktualizacji",
+        "averageCost": "Średni Koszt",
+        "highestPayment": "Najwyższa Płatność"
+      },
+      "chart": {
+        "title": "TRENDY PŁATNOŚCI",
+        "transactions": "Transakcje",
+        "last7Days": "Ostatnie 7 Dni",
+        "cumulativeTotalPayments": "Łączne skumulowane płatności",
+        "spendingBreakdown": "podział wydatków",
+        "appLabel": "APLIKACJA",
+        "viewLabel": "WIDOK",
+        "periodLabel": "OKRES",
+        "metricLabel": "METRYKA",
+        "filterByApp": "Wyszukaj...",
+        "searchApps": "Szukaj aplikacji...",
+        "timeRanges": {
+          "7d": "7 Dni",
+          "30d": "30 Dni",
+          "90d": "90 Dni",
+          "1y": "1 Rok",
+          "all": "Cały Czas"
+        },
+        "displayModes": {
+          "periodTotal": "Suma Okresu",
+          "cumulative": "Suma Skumulowana"
+        },
+        "aggregation": {
+          "daily": "Dziennie",
+          "weekly": "Tygodniowo",
+          "monthly": "Miesięcznie"
+        }
+      }
+    },
     "costCalculator": {
       "faq": {
         "items": {
diff --git a/src/plugins/i18n/locales/pt.json b/src/plugins/i18n/locales/pt.json
index 8297a714..450ea2c1 100644
--- a/src/plugins/i18n/locales/pt.json
+++ b/src/plugins/i18n/locales/pt.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "Faturamento e Pagamentos",
+      "subtitle": "Acompanhe o histórico de pagamentos do seu app Flux",
+      "loading": "Carregando dados de faturamento...",
+      "fetchingPaymentHistory": "Buscando seu histórico de pagamentos",
+      "noPaymentHistory": "Sem histórico de pagamentos",
+      "noPaymentsYet": "Você ainda não tem pagamentos de apps. Registre um app para começar a rastrear pagamentos.",
+      "export": "Exportar",
+      "currentlyRunningApps": "Apps em execução",
+      "loadingApps": "Carregando seus apps em execução...",
+      "noAppsRunning": "Nenhum app em execução no momento",
+      "instance": "Instância",
+      "instances": "Instâncias",
+      "paymentSummary": "Resumo de pagamentos",
+      "totalPaid": "Total pago",
+      "applications": "Aplicações",
+      "firstTransaction": "Primeira transação",
+      "lastTransaction": "Última transação",
+      "paymentHistory": "Histórico de pagamentos",
+      "filterByType": "Filtrar por tipo",
+      "allTypes": "Todos os tipos",
+      "searchByName": "Pesquisar...",
+      "noTransactionsFound": "Nenhuma transação encontrada",
+      "noTransactionsMatch": "Nenhuma transação corresponde aos seus critérios de pesquisa",
+      "exportDialog": {
+        "title": "Exportar histórico de pagamentos",
+        "format": "Formato de exportação",
+        "selectFormat": "Selecionar formato de exportação",
+        "dateRange": "Intervalo de datas",
+        "allTime": "Todo o tempo",
+        "last30Days": "Últimos 30 dias",
+        "last90Days": "Últimos 90 dias",
+        "lastYear": "Último ano",
+        "customRange": "Intervalo personalizado",
+        "startDate": "Data de início",
+        "endDate": "Data de fim",
+        "export": "Exportar",
+        "cancel": "Cancelar"
+      },
+      "table": {
+        "appName": "Nome do app",
+        "totalPaid": "Total pago",
+        "payments": "Pagamentos",
+        "avgPayment": "Pagamento médio",
+        "actions": "Ações",
+        "details": "Detalhes",
+        "showing": "{start} a {end} de {total}"
+      },
+      "transactionTable": {
+        "type": "Tipo",
+        "amount": "Valor",
+        "date": "Data",
+        "blockHeight": "Altura do bloco",
+        "txid": "ID da transação",
+        "free": "GRÁTIS",
+        "types": {
+          "register": "Registro",
+          "update": "Atualização",
+          "renewal": "Renovação"
+        }
+      },
+      "types": {
+        "appregister": "Registro",
+        "appupdate": "Atualização"
+      },
+      "stats": {
+        "transactions": "Transações",
+        "registered": "Registradas",
+        "updated": "Atualizadas",
+        "averageCost": "Custo médio",
+        "highestPayment": "Maior pagamento"
+      },
+      "chart": {
+        "title": "TENDÊNCIAS DE PAGAMENTO",
+        "transactions": "Transações",
+        "last7Days": "Últimos 7 dias",
+        "cumulativeTotalPayments": "Total de pagamentos acumulados",
+        "spendingBreakdown": "detalhamento de gastos",
+        "appLabel": "APP",
+        "viewLabel": "VISUALIZAÇÃO",
+        "periodLabel": "PERÍODO",
+        "metricLabel": "MÉTRICA",
+        "filterByApp": "Pesquisar...",
+        "searchApps": "Pesquisar apps...",
+        "timeRanges": {
+          "7d": "7 dias",
+          "30d": "30 dias",
+          "90d": "90 dias",
+          "1y": "1 ano",
+          "all": "Todo o tempo"
+        },
+        "displayModes": {
+          "periodTotal": "Total do período",
+          "cumulative": "Cumulativo"
+        },
+        "aggregation": {
+          "daily": "Diário",
+          "weekly": "Semanal",
+          "monthly": "Mensal"
+        }
+      }
+    },
     "costCalculator": {
       "title": "Calculadora de custos de hospedagem de aplicativos",
       "subtitle": "Hospedagem descentralizada acessível a partir de US$ 0,99/mês - Calcule seus custos exatos",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "Faturamento e Pagamentos",
+    "logout": "Sair"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/ru.json b/src/plugins/i18n/locales/ru.json
index 06782501..b4993c07 100644
--- a/src/plugins/i18n/locales/ru.json
+++ b/src/plugins/i18n/locales/ru.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "Биллинг и Платежи",
+      "subtitle": "Отслеживайте историю платежей вашего приложения Flux",
+      "loading": "Загрузка данных биллинга...",
+      "fetchingPaymentHistory": "Получение истории платежей",
+      "noPaymentHistory": "История платежей отсутствует",
+      "noPaymentsYet": "У вас ещё нет платежей за приложения. Зарегистрируйте приложение, чтобы начать отслеживать платежи.",
+      "export": "Экспорт",
+      "currentlyRunningApps": "Запущенные приложения",
+      "loadingApps": "Загрузка запущенных приложений...",
+      "noAppsRunning": "Нет запущенных приложений",
+      "instance": "Экземпляр",
+      "instances": "Экземпляры",
+      "paymentSummary": "Сводка платежей",
+      "totalPaid": "Всего оплачено",
+      "applications": "Приложения",
+      "firstTransaction": "Первая транзакция",
+      "lastTransaction": "Последняя транзакция",
+      "paymentHistory": "История платежей",
+      "filterByType": "Фильтр по типу",
+      "allTypes": "Все типы",
+      "searchByName": "Поиск...",
+      "noTransactionsFound": "Транзакции не найдены",
+      "noTransactionsMatch": "Ни одна транзакция не соответствует критериям поиска",
+      "exportDialog": {
+        "title": "Экспорт истории платежей",
+        "format": "Формат экспорта",
+        "selectFormat": "Выберите формат экспорта",
+        "dateRange": "Диапазон дат",
+        "allTime": "За всё время",
+        "last30Days": "Последние 30 дней",
+        "last90Days": "Последние 90 дней",
+        "lastYear": "Последний год",
+        "customRange": "Произвольный диапазон",
+        "startDate": "Дата начала",
+        "endDate": "Дата окончания",
+        "export": "Экспорт",
+        "cancel": "Отмена"
+      },
+      "table": {
+        "appName": "Название приложения",
+        "totalPaid": "Всего оплачено",
+        "payments": "Платежи",
+        "avgPayment": "Средний платёж",
+        "actions": "Действия",
+        "details": "Подробности",
+        "showing": "{start}–{end} из {total}"
+      },
+      "transactionTable": {
+        "type": "Тип",
+        "amount": "Сумма",
+        "date": "Дата",
+        "blockHeight": "Высота блока",
+        "txid": "ID транзакции",
+        "free": "БЕСПЛАТНО",
+        "types": {
+          "register": "Регистрация",
+          "update": "Обновление",
+          "renewal": "Продление"
+        }
+      },
+      "types": {
+        "appregister": "Регистрация",
+        "appupdate": "Обновление"
+      },
+      "stats": {
+        "transactions": "Транзакции",
+        "registered": "Зарегистрировано",
+        "updated": "Обновлено",
+        "averageCost": "Средняя стоимость",
+        "highestPayment": "Наибольший платёж"
+      },
+      "chart": {
+        "title": "ТРЕНДЫ ПЛАТЕЖЕЙ",
+        "transactions": "Транзакции",
+        "last7Days": "Последние 7 дней",
+        "cumulativeTotalPayments": "Накопленные общие платежи",
+        "spendingBreakdown": "распределение расходов",
+        "appLabel": "ПРИЛОЖЕНИЕ",
+        "viewLabel": "ВИД",
+        "periodLabel": "ПЕРИОД",
+        "metricLabel": "МЕТРИКА",
+        "filterByApp": "Поиск...",
+        "searchApps": "Поиск приложений...",
+        "timeRanges": {
+          "7d": "7 дней",
+          "30d": "30 дней",
+          "90d": "90 дней",
+          "1y": "1 год",
+          "all": "За всё время"
+        },
+        "displayModes": {
+          "periodTotal": "Сумма за период",
+          "cumulative": "Накопительный итог"
+        },
+        "aggregation": {
+          "daily": "Ежедневно",
+          "weekly": "Еженедельно",
+          "monthly": "Ежемесячно"
+        }
+      }
+    },
     "costCalculator": {
       "title": "Калькулятор стоимости хостинга приложений",
       "subtitle": "Доступный децентрализованный хостинг от 0,99 доллара США в месяц. Рассчитайте точные затраты.",
@@ -5265,5 +5367,9 @@
         "category": "система управления контентом"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "Биллинг и Платежи",
+    "logout": "Выйти"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/ta.json b/src/plugins/i18n/locales/ta.json
index b71081b0..ea9e2fb8 100644
--- a/src/plugins/i18n/locales/ta.json
+++ b/src/plugins/i18n/locales/ta.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "பில்லிங் மற்றும் கொடுப்பனவுகள்",
+      "subtitle": "உங்கள் Flux ஆப் கொடுப்பனவு வரலாற்றை கண்காணிக்கவும்",
+      "loading": "பில்லிங் தரவு ஏற்றுகிறது...",
+      "fetchingPaymentHistory": "உங்கள் கொடுப்பனவு வரலாறு பெறப்படுகிறது",
+      "noPaymentHistory": "கொடுப்பனவு வரலாறு இல்லை",
+      "noPaymentsYet": "இன்னும் ஆப் கொடுப்பனவுகள் இல்லை. கொடுப்பனவுகளை கண்காணிக்க ஒரு ஆப்பை பதிவு செய்யுங்கள்.",
+      "export": "ஏற்றுமதி",
+      "currentlyRunningApps": "தற்போது இயங்கும் ஆப்கள்",
+      "loadingApps": "உங்கள் இயங்கும் ஆப்கள் ஏற்றுகிறது...",
+      "noAppsRunning": "தற்போது எந்த ஆப்பும் இயங்கவில்லை",
+      "instance": "நிகழ்வு",
+      "instances": "நிகழ்வுகள்",
+      "paymentSummary": "கொடுப்பனவு சுருக்கம்",
+      "totalPaid": "மொத்தம் செலுத்தியது",
+      "applications": "பயன்பாடுகள்",
+      "firstTransaction": "முதல் பரிவர்த்தனை",
+      "lastTransaction": "கடைசி பரிவர்த்தனை",
+      "paymentHistory": "கொடுப்பனவு வரலாறு",
+      "filterByType": "வகையால் வடிகட்டு",
+      "allTypes": "அனைத்து வகைகள்",
+      "searchByName": "தேடு...",
+      "noTransactionsFound": "பரிவர்த்தனைகள் கிடைக்கவில்லை",
+      "noTransactionsMatch": "உங்கள் தேடல் அளவுகோல்களுடன் எந்த பரிவர்த்தனையும் பொருந்தவில்லை",
+      "exportDialog": {
+        "title": "கொடுப்பனவு வரலாற்றை ஏற்றுமதி செய்",
+        "format": "ஏற்றுமதி வடிவம்",
+        "selectFormat": "ஏற்றுமதி வடிவத்தை தேர்ந்தெடுக்கவும்",
+        "dateRange": "தேதி வரம்பு",
+        "allTime": "எல்லா நேரமும்",
+        "last30Days": "கடந்த 30 நாட்கள்",
+        "last90Days": "கடந்த 90 நாட்கள்",
+        "lastYear": "கடந்த ஆண்டு",
+        "customRange": "தனிப்பயன் வரம்பு",
+        "startDate": "தொடக்க தேதி",
+        "endDate": "முடிவு தேதி",
+        "export": "ஏற்றுமதி",
+        "cancel": "ரத்து செய்"
+      },
+      "table": {
+        "appName": "ஆப் பெயர்",
+        "totalPaid": "மொத்தம் செலுத்தியது",
+        "payments": "கொடுப்பனவுகள்",
+        "avgPayment": "சராசரி கொடுப்பனவு",
+        "actions": "செயல்கள்",
+        "details": "விவரங்கள்",
+        "showing": "{total} இல் {start} முதல் {end} வரை"
+      },
+      "transactionTable": {
+        "type": "வகை",
+        "amount": "தொகை",
+        "date": "தேதி",
+        "blockHeight": "தொகுதி உயரம்",
+        "txid": "பரிவர்த்தனை ID",
+        "free": "இலவசம்",
+        "types": {
+          "register": "பதிவு",
+          "update": "புதுப்பிப்பு",
+          "renewal": "புதுப்பித்தல்"
+        }
+      },
+      "types": {
+        "appregister": "பதிவு",
+        "appupdate": "புதுப்பிப்பு"
+      },
+      "stats": {
+        "transactions": "பரிவர்த்தனைகள்",
+        "registered": "பதிவு செய்யப்பட்டது",
+        "updated": "புதுப்பிக்கப்பட்டது",
+        "averageCost": "சராசரி செலவு",
+        "highestPayment": "மிக அதிக கொடுப்பனவு"
+      },
+      "chart": {
+        "title": "கொடுப்பனவு போக்குகள்",
+        "transactions": "பரிவர்த்தனைகள்",
+        "last7Days": "கடந்த 7 நாட்கள்",
+        "cumulativeTotalPayments": "திரட்டப்பட்ட மொத்த கொடுப்பனவுகள்",
+        "spendingBreakdown": "செலவு விவரம்",
+        "appLabel": "ஆப்",
+        "viewLabel": "காட்சி",
+        "periodLabel": "காலம்",
+        "metricLabel": "அளவீடு",
+        "filterByApp": "தேடு...",
+        "searchApps": "ஆப்கள் தேடு...",
+        "timeRanges": {
+          "7d": "7 நாட்கள்",
+          "30d": "30 நாட்கள்",
+          "90d": "90 நாட்கள்",
+          "1y": "1 ஆண்டு",
+          "all": "எல்லா நேரமும்"
+        },
+        "displayModes": {
+          "periodTotal": "காலகட்ட மொத்தம்",
+          "cumulative": "திரட்டப்பட்டது"
+        },
+        "aggregation": {
+          "daily": "தினசரி",
+          "weekly": "வாராந்திர",
+          "monthly": "மாதாந்திர"
+        }
+      }
+    },
     "costCalculator": {
       "title": "ஆப் ஹோஸ்டிங் செலவு கால்குலேட்டர்",
       "subtitle": "மலிவு விலையில் பரவலாக்கப்பட்ட ஹோஸ்டிங் $0.99/மாதம் தொடங்குகிறது - உங்கள் சரியான செலவுகளைக் கணக்கிடுங்கள்",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "பில்லிங் மற்றும் கொடுப்பனவுகள்",
+    "logout": "வெளியேறு"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/te.json b/src/plugins/i18n/locales/te.json
index 5dee078f..08bfef69 100644
--- a/src/plugins/i18n/locales/te.json
+++ b/src/plugins/i18n/locales/te.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "బిల్లింగ్ మరియు చెల్లింపులు",
+      "subtitle": "మీ Flux యాప్ చెల్లింపు చరిత్రను ట్రాక్ చేయండి",
+      "loading": "బిల్లింగ్ డేటా లోడ్ అవుతోంది...",
+      "fetchingPaymentHistory": "మీ చెల్లింపు చరిత్ర తీసుకోబడుతోంది",
+      "noPaymentHistory": "చెల్లింపు చరిత్ర లేదు",
+      "noPaymentsYet": "మీకు ఇంకా యాప్ చెల్లింపులు లేవు. చెల్లింపులు ట్రాక్ చేయడం ప్రారంభించడానికి యాప్‌ను నమోదు చేయండి.",
+      "export": "ఎగుమతి చేయండి",
+      "currentlyRunningApps": "ప్రస్తుతం నడుస్తున్న యాప్‌లు",
+      "loadingApps": "మీ నడుస్తున్న యాప్‌లు లోడ్ అవుతున్నాయి...",
+      "noAppsRunning": "ప్రస్తుతం యాప్‌లు ఏవీ నడవడం లేదు",
+      "instance": "ఇన్‌స్టాన్స్",
+      "instances": "ఇన్‌స్టాన్స్‌లు",
+      "paymentSummary": "చెల్లింపు సారాంశం",
+      "totalPaid": "మొత్తం చెల్లించారు",
+      "applications": "అప్లికేషన్‌లు",
+      "firstTransaction": "మొదటి లావాదేవీ",
+      "lastTransaction": "చివరి లావాదేవీ",
+      "paymentHistory": "చెల్లింపు చరిత్ర",
+      "filterByType": "రకం ద్వారా వడపోయండి",
+      "allTypes": "అన్ని రకాలు",
+      "searchByName": "వెతకండి...",
+      "noTransactionsFound": "లావాదేవీలు కనుగొనబడలేదు",
+      "noTransactionsMatch": "మీ శోధన ప్రమాణాలకు సరిపోయే లావాదేవీలు లేవు",
+      "exportDialog": {
+        "title": "చెల్లింపు చరిత్రను ఎగుమతి చేయండి",
+        "format": "ఎగుమతి ఆకృతి",
+        "selectFormat": "ఎగుమతి ఆకృతిని ఎంచుకోండి",
+        "dateRange": "తేదీ పరిధి",
+        "allTime": "అన్ని సమయం",
+        "last30Days": "గత 30 రోజులు",
+        "last90Days": "గత 90 రోజులు",
+        "lastYear": "గత సంవత్సరం",
+        "customRange": "అనుకూల పరిధి",
+        "startDate": "ప్రారంభ తేదీ",
+        "endDate": "ముగింపు తేదీ",
+        "export": "ఎగుమతి చేయండి",
+        "cancel": "రద్దు చేయండి"
+      },
+      "table": {
+        "appName": "యాప్ పేరు",
+        "totalPaid": "మొత్తం చెల్లించారు",
+        "payments": "చెల్లింపులు",
+        "avgPayment": "సగటు చెల్లింపు",
+        "actions": "చర్యలు",
+        "details": "వివరాలు",
+        "showing": "{total} లో {start} నుండి {end} వరకు"
+      },
+      "transactionTable": {
+        "type": "రకం",
+        "amount": "మొత్తం",
+        "date": "తేదీ",
+        "blockHeight": "బ్లాక్ ఎత్తు",
+        "txid": "లావాదేవీ ID",
+        "free": "ఉచితం",
+        "types": {
+          "register": "నమోదు",
+          "update": "నవీకరణ",
+          "renewal": "పునరుద్ధరణ"
+        }
+      },
+      "types": {
+        "appregister": "నమోదు",
+        "appupdate": "నవీకరణ"
+      },
+      "stats": {
+        "transactions": "లావాదేవీలు",
+        "registered": "నమోదు చేయబడింది",
+        "updated": "నవీకరించబడింది",
+        "averageCost": "సగటు ఖర్చు",
+        "highestPayment": "అత్యధిక చెల్లింపు"
+      },
+      "chart": {
+        "title": "చెల్లింపు ధోరణులు",
+        "transactions": "లావాదేవీలు",
+        "last7Days": "గత 7 రోజులు",
+        "cumulativeTotalPayments": "సంచిత మొత్తం చెల్లింపులు",
+        "spendingBreakdown": "వ్యయ విభజన",
+        "appLabel": "యాప్",
+        "viewLabel": "వీక్షణ",
+        "periodLabel": "కాలం",
+        "metricLabel": "మెట్రిక్",
+        "filterByApp": "వెతకండి...",
+        "searchApps": "యాప్‌లు వెతకండి...",
+        "timeRanges": {
+          "7d": "7 రోజులు",
+          "30d": "30 రోజులు",
+          "90d": "90 రోజులు",
+          "1y": "1 సంవత్సరం",
+          "all": "అన్ని సమయం"
+        },
+        "displayModes": {
+          "periodTotal": "కాల మొత్తం",
+          "cumulative": "సంచిత"
+        },
+        "aggregation": {
+          "daily": "రోజువారీ",
+          "weekly": "వారపు",
+          "monthly": "నెలవారీ"
+        }
+      }
+    },
     "costCalculator": {
       "title": "యాప్ హోస్టింగ్ ఖర్చు కాలిక్యులేటర్",
       "subtitle": "సరసమైన వికేంద్రీకృత హోస్టింగ్ $0.99/నెలకు ప్రారంభమవుతుంది - మీ ఖచ్చితమైన ఖర్చులను లెక్కించండి",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "బిల్లింగ్ మరియు చెల్లింపులు",
+    "logout": "లాగ్ అవుట్"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/tr.json b/src/plugins/i18n/locales/tr.json
index 1cddd7f4..524a4e1b 100644
--- a/src/plugins/i18n/locales/tr.json
+++ b/src/plugins/i18n/locales/tr.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "Faturalama ve Ödemeler",
+      "subtitle": "Flux uygulamanızın ödeme geçmişini takip edin",
+      "loading": "Faturalama verileri yükleniyor...",
+      "fetchingPaymentHistory": "Ödeme geçmişiniz alınıyor",
+      "noPaymentHistory": "Ödeme geçmişi yok",
+      "noPaymentsYet": "Henüz uygulama ödemesi yok. Ödemeleri takip etmeye başlamak için bir uygulama kaydedin.",
+      "export": "Dışa aktar",
+      "currentlyRunningApps": "Şu anda çalışan uygulamalar",
+      "loadingApps": "Çalışan uygulamalarınız yükleniyor...",
+      "noAppsRunning": "Şu anda çalışan uygulama yok",
+      "instance": "Örnek",
+      "instances": "Örnekler",
+      "paymentSummary": "Ödeme özeti",
+      "totalPaid": "Toplam ödenen",
+      "applications": "Uygulamalar",
+      "firstTransaction": "İlk işlem",
+      "lastTransaction": "Son işlem",
+      "paymentHistory": "Ödeme geçmişi",
+      "filterByType": "Türe göre filtrele",
+      "allTypes": "Tüm türler",
+      "searchByName": "Ara...",
+      "noTransactionsFound": "İşlem bulunamadı",
+      "noTransactionsMatch": "Arama kriterlerinize uyan işlem yok",
+      "exportDialog": {
+        "title": "Ödeme geçmişini dışa aktar",
+        "format": "Dışa aktarma biçimi",
+        "selectFormat": "Dışa aktarma biçimi seçin",
+        "dateRange": "Tarih aralığı",
+        "allTime": "Tüm zamanlar",
+        "last30Days": "Son 30 gün",
+        "last90Days": "Son 90 gün",
+        "lastYear": "Geçen yıl",
+        "customRange": "Özel aralık",
+        "startDate": "Başlangıç tarihi",
+        "endDate": "Bitiş tarihi",
+        "export": "Dışa aktar",
+        "cancel": "İptal"
+      },
+      "table": {
+        "appName": "Uygulama adı",
+        "totalPaid": "Toplam ödenen",
+        "payments": "Ödemeler",
+        "avgPayment": "Ortalama ödeme",
+        "actions": "İşlemler",
+        "details": "Ayrıntılar",
+        "showing": "{total} içinde {start}–{end}"
+      },
+      "transactionTable": {
+        "type": "Tür",
+        "amount": "Tutar",
+        "date": "Tarih",
+        "blockHeight": "Blok yüksekliği",
+        "txid": "İşlem kimliği",
+        "free": "ÜCRETSİZ",
+        "types": {
+          "register": "Kayıt",
+          "update": "Güncelleme",
+          "renewal": "Yenileme"
+        }
+      },
+      "types": {
+        "appregister": "Kayıt",
+        "appupdate": "Güncelleme"
+      },
+      "stats": {
+        "transactions": "İşlemler",
+        "registered": "Kayıtlı",
+        "updated": "Güncellendi",
+        "averageCost": "Ortalama maliyet",
+        "highestPayment": "En yüksek ödeme"
+      },
+      "chart": {
+        "title": "ÖDEME TRENDLERİ",
+        "transactions": "İşlemler",
+        "last7Days": "Son 7 gün",
+        "cumulativeTotalPayments": "Kümülatif toplam ödemeler",
+        "spendingBreakdown": "harcama dağılımı",
+        "appLabel": "UYGULAMA",
+        "viewLabel": "GÖRÜNÜM",
+        "periodLabel": "DÖNEM",
+        "metricLabel": "METRİK",
+        "filterByApp": "Ara...",
+        "searchApps": "Uygulamaları ara...",
+        "timeRanges": {
+          "7d": "7 gün",
+          "30d": "30 gün",
+          "90d": "90 gün",
+          "1y": "1 yıl",
+          "all": "Tüm zamanlar"
+        },
+        "displayModes": {
+          "periodTotal": "Dönem toplamı",
+          "cumulative": "Kümülatif"
+        },
+        "aggregation": {
+          "daily": "Günlük",
+          "weekly": "Haftalık",
+          "monthly": "Aylık"
+        }
+      }
+    },
     "costCalculator": {
       "title": "Uygulama Barındırma Maliyeti Hesaplayıcı",
       "subtitle": "Aylık 0,99$'dan başlayan uygun fiyatlı merkezi olmayan barındırma - Maliyetlerinizi tam olarak hesaplayın",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "Faturalama ve Ödemeler",
+    "logout": "Çıkış yap"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/vi.json b/src/plugins/i18n/locales/vi.json
index f0479d21..94573a33 100644
--- a/src/plugins/i18n/locales/vi.json
+++ b/src/plugins/i18n/locales/vi.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "Hóa đơn và Thanh toán",
+      "subtitle": "Theo dõi lịch sử thanh toán ứng dụng Flux của bạn",
+      "loading": "Đang tải dữ liệu hóa đơn...",
+      "fetchingPaymentHistory": "Đang lấy lịch sử thanh toán của bạn",
+      "noPaymentHistory": "Không có lịch sử thanh toán",
+      "noPaymentsYet": "Bạn chưa có thanh toán ứng dụng nào. Đăng ký ứng dụng để bắt đầu theo dõi thanh toán.",
+      "export": "Xuất",
+      "currentlyRunningApps": "Ứng dụng đang chạy",
+      "loadingApps": "Đang tải ứng dụng đang chạy của bạn...",
+      "noAppsRunning": "Hiện không có ứng dụng nào đang chạy",
+      "instance": "Phiên bản",
+      "instances": "Phiên bản",
+      "paymentSummary": "Tóm tắt thanh toán",
+      "totalPaid": "Tổng đã trả",
+      "applications": "Ứng dụng",
+      "firstTransaction": "Giao dịch đầu tiên",
+      "lastTransaction": "Giao dịch cuối cùng",
+      "paymentHistory": "Lịch sử thanh toán",
+      "filterByType": "Lọc theo loại",
+      "allTypes": "Tất cả loại",
+      "searchByName": "Tìm kiếm...",
+      "noTransactionsFound": "Không tìm thấy giao dịch",
+      "noTransactionsMatch": "Không có giao dịch nào phù hợp với tiêu chí tìm kiếm",
+      "exportDialog": {
+        "title": "Xuất lịch sử thanh toán",
+        "format": "Định dạng xuất",
+        "selectFormat": "Chọn định dạng xuất",
+        "dateRange": "Phạm vi ngày",
+        "allTime": "Tất cả thời gian",
+        "last30Days": "30 ngày qua",
+        "last90Days": "90 ngày qua",
+        "lastYear": "Năm qua",
+        "customRange": "Phạm vi tùy chỉnh",
+        "startDate": "Ngày bắt đầu",
+        "endDate": "Ngày kết thúc",
+        "export": "Xuất",
+        "cancel": "Hủy"
+      },
+      "table": {
+        "appName": "Tên ứng dụng",
+        "totalPaid": "Tổng đã trả",
+        "payments": "Thanh toán",
+        "avgPayment": "Thanh toán trung bình",
+        "actions": "Thao tác",
+        "details": "Chi tiết",
+        "showing": "{start} đến {end} trong {total}"
+      },
+      "transactionTable": {
+        "type": "Loại",
+        "amount": "Số tiền",
+        "date": "Ngày",
+        "blockHeight": "Chiều cao khối",
+        "txid": "ID giao dịch",
+        "free": "MIỄN PHÍ",
+        "types": {
+          "register": "Đăng ký",
+          "update": "Cập nhật",
+          "renewal": "Gia hạn"
+        }
+      },
+      "types": {
+        "appregister": "Đăng ký",
+        "appupdate": "Cập nhật"
+      },
+      "stats": {
+        "transactions": "Giao dịch",
+        "registered": "Đã đăng ký",
+        "updated": "Đã cập nhật",
+        "averageCost": "Chi phí trung bình",
+        "highestPayment": "Thanh toán cao nhất"
+      },
+      "chart": {
+        "title": "XU HƯỚNG THANH TOÁN",
+        "transactions": "Giao dịch",
+        "last7Days": "7 ngày qua",
+        "cumulativeTotalPayments": "Tổng thanh toán tích lũy",
+        "spendingBreakdown": "phân tích chi tiêu",
+        "appLabel": "ỨNG DỤNG",
+        "viewLabel": "XEM",
+        "periodLabel": "THỜI KỲ",
+        "metricLabel": "CHỈ SỐ",
+        "filterByApp": "Tìm kiếm...",
+        "searchApps": "Tìm kiếm ứng dụng...",
+        "timeRanges": {
+          "7d": "7 ngày",
+          "30d": "30 ngày",
+          "90d": "90 ngày",
+          "1y": "1 năm",
+          "all": "Tất cả thời gian"
+        },
+        "displayModes": {
+          "periodTotal": "Tổng kỳ",
+          "cumulative": "Tích lũy"
+        },
+        "aggregation": {
+          "daily": "Hàng ngày",
+          "weekly": "Hàng tuần",
+          "monthly": "Hàng tháng"
+        }
+      }
+    },
     "costCalculator": {
       "title": "Máy tính chi phí lưu trữ ứng dụng",
       "subtitle": "Dịch vụ lưu trữ phi tập trung giá cả phải chăng bắt đầu từ 0,99 USD/tháng - Tính toán chi phí chính xác của bạn",
@@ -5265,5 +5367,9 @@
         "category": "CMS"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "Hóa đơn và Thanh toán",
+    "logout": "Đăng xuất"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/zh-CN.json b/src/plugins/i18n/locales/zh-CN.json
index c041d890..69e0f925 100644
--- a/src/plugins/i18n/locales/zh-CN.json
+++ b/src/plugins/i18n/locales/zh-CN.json
@@ -3430,6 +3430,108 @@
         }
       }
     },
+    "billing": {
+      "title": "账单与付款",
+      "subtitle": "追踪您的 Flux 应用付款历史",
+      "loading": "加载账单数据...",
+      "fetchingPaymentHistory": "正在获取您的付款历史",
+      "noPaymentHistory": "无付款历史",
+      "noPaymentsYet": "您尚无任何应用付款记录。注册一个应用以开始追踪付款。",
+      "export": "导出",
+      "currentlyRunningApps": "当前运行的应用",
+      "loadingApps": "正在加载您的运行中应用...",
+      "noAppsRunning": "当前没有正在运行的应用",
+      "instance": "实例",
+      "instances": "实例",
+      "paymentSummary": "付款摘要",
+      "totalPaid": "总付款额",
+      "applications": "应用程序",
+      "firstTransaction": "首次交易",
+      "lastTransaction": "最近交易",
+      "paymentHistory": "付款历史",
+      "filterByType": "按类型筛选",
+      "allTypes": "所有类型",
+      "searchByName": "搜索...",
+      "noTransactionsFound": "未找到交易",
+      "noTransactionsMatch": "没有交易符合您的搜索条件",
+      "exportDialog": {
+        "title": "导出付款历史",
+        "format": "导出格式",
+        "selectFormat": "选择导出格式",
+        "dateRange": "日期范围",
+        "allTime": "所有时间",
+        "last30Days": "近 30 天",
+        "last90Days": "近 90 天",
+        "lastYear": "近 1 年",
+        "customRange": "自定义范围",
+        "startDate": "开始日期",
+        "endDate": "结束日期",
+        "export": "导出",
+        "cancel": "取消"
+      },
+      "table": {
+        "appName": "应用名称",
+        "totalPaid": "总付款额",
+        "payments": "付款次数",
+        "avgPayment": "平均付款",
+        "actions": "操作",
+        "details": "详情",
+        "showing": "第 {start} 至 {end} 条，共 {total} 条"
+      },
+      "transactionTable": {
+        "type": "类型",
+        "amount": "金额",
+        "date": "日期",
+        "blockHeight": "区块高度",
+        "txid": "交易 ID",
+        "free": "免费",
+        "types": {
+          "register": "注册",
+          "update": "更新",
+          "renewal": "续费"
+        }
+      },
+      "types": {
+        "appregister": "注册",
+        "appupdate": "更新"
+      },
+      "stats": {
+        "transactions": "交易次数",
+        "registered": "已注册",
+        "updated": "已更新",
+        "averageCost": "平均费用",
+        "highestPayment": "最高付款"
+      },
+      "chart": {
+        "title": "付款趋势",
+        "transactions": "交易次数",
+        "last7Days": "近 7 天",
+        "cumulativeTotalPayments": "累计总付款",
+        "spendingBreakdown": "支出明细",
+        "appLabel": "应用",
+        "viewLabel": "视图",
+        "periodLabel": "周期",
+        "metricLabel": "指标",
+        "filterByApp": "搜索...",
+        "searchApps": "搜索应用...",
+        "timeRanges": {
+          "7d": "7 天",
+          "30d": "30 天",
+          "90d": "90 天",
+          "1y": "1 年",
+          "all": "所有时间"
+        },
+        "displayModes": {
+          "periodTotal": "周期合计",
+          "cumulative": "累计"
+        },
+        "aggregation": {
+          "daily": "每日",
+          "weekly": "每周",
+          "monthly": "每月"
+        }
+      }
+    },
     "costCalculator": {
       "title": "应用程序托管成本计算器",
       "subtitle": "经济实惠的去中心化托管，起价 0.99 美元/月 - 计算您的确切成本",
@@ -5265,5 +5367,9 @@
         "category": "内容管理系统"
       }
     }
+  },
+  "userProfile": {
+    "billingAndPayments": "账单与付款",
+    "logout": "退出登录"
   }
-}
\ No newline at end of file
+}
diff --git a/src/services/BillingService.js b/src/services/BillingService.js
new file mode 100644
index 00000000..609538ab
--- /dev/null
+++ b/src/services/BillingService.js
@@ -0,0 +1,38 @@
+import Api from '@/services/ApiClient'
+
+export default {
+  /**
+   * Get payment history for the authenticated user
+   * Uses the /apps/permanentmessages endpoint with owner filter
+   * @param {string} zelidauthHeader - Authentication header
+   * @param {string} zelid - User's ZelID
+   * @returns {Promise} API response with payment transactions
+   */
+  getMyPaymentHistory(zelidauthHeader, zelid) {
+    const axiosConfig = {
+      headers: {
+        zelidauth: zelidauthHeader,
+        'x-apicache-bypass': true,
+      },
+    }
+
+    return Api().get(`/apps/permanentmessages?owner=${zelid}`, axiosConfig)
+  },
+
+  /**
+   * Get all active apps for the authenticated user
+   * @param {string} zelidauthHeader - Authentication header
+   * @param {string} zelid - User's ZelID
+   * @returns {Promise} API response with active apps
+   */
+  getMyApps(zelidauthHeader, zelid) {
+    const axiosConfig = {
+      headers: {
+        zelidauth: zelidauthHeader,
+        'x-apicache-bypass': true,
+      },
+    }
+    
+    return Api().get(`/apps/globalappsspecifications?owner=${zelid}`, axiosConfig)
+  },
+}