From 1e1fddf04c2449624790147b1388ee71777dc216 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E5=8D=97=E5=9B=BD?= <164292041@qq.com>
Date: Wed, 10 Jun 2026 16:43:37 +0800
Subject: [PATCH] =?UTF-8?q?[update]=E6=96=B0=E5=A2=9EsubmittedReward?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/api/backend/user/submittedReward.ts   |  31 +
 web/src/lang/autoload.ts                      |   1 +
 .../lang/backend/en/user/submittedReward.ts   |  27 +
 .../backend/zh-cn/user/submittedReward.ts     |  27 +
 .../backend/user/user/submittedReward.vue     | 622 ++++++++++++++----
 5 files changed, 573 insertions(+), 135 deletions(-)
 create mode 100644 web/src/api/backend/user/submittedReward.ts
 create mode 100644 web/src/lang/backend/en/user/submittedReward.ts
 create mode 100644 web/src/lang/backend/zh-cn/user/submittedReward.ts

diff --git a/web/src/api/backend/user/submittedReward.ts b/web/src/api/backend/user/submittedReward.ts
new file mode 100644
index 0000000..81360f3
--- /dev/null
+++ b/web/src/api/backend/user/submittedReward.ts
@@ -0,0 +1,31 @@
+import createAxios from '/@/utils/axios'
+
+export interface SubmittedRewardParams {
+    start: string
+    end: string
+    status: '' | '0' | '1' | '2'
+    username: string
+    game_id: 268 | 269 | 270
+    page: number
+}
+
+export function getSubmittedRewards(params: SubmittedRewardParams) {
+    return createAxios({
+        url: '/admin/user.User/submittedReward',
+        method: 'get',
+        params,
+    })
+}
+
+export function editReward(data: { id: number | string; status: 1 | 2 }) {
+    return createAxios(
+        {
+            url: '/admin/user.User/editReward',
+            method: 'post',
+            data,
+        },
+        {
+            showSuccessMessage: true,
+        }
+    )
+}
diff --git a/web/src/lang/autoload.ts b/web/src/lang/autoload.ts
index af4d894..0d72d0a 100644
--- a/web/src/lang/autoload.ts
+++ b/web/src/lang/autoload.ts
@@ -10,6 +10,7 @@ export default {
     [adminBaseRoutePath + '/moduleStore']: ['./backend/${lang}/module.ts'],
     [adminBaseRoutePath + '/user/rule']: ['./backend/${lang}/auth/rule.ts'],
     [adminBaseRoutePath + '/user/moneyLog/annualReport']: ['./backend/${lang}/user/moneyLog.ts'],
+    [adminBaseRoutePath + '/user/submittedReward']: ['./backend/${lang}/user/submittedReward.ts'],
     [adminBaseRoutePath + '/user/scoreLog']: ['./backend/${lang}/user/moneyLog.ts'],
     [adminBaseRoutePath + '/crud/crud']: ['./backend/${lang}/crud/log.ts', './backend/${lang}/crud/state.ts'],
 }
diff --git a/web/src/lang/backend/en/user/submittedReward.ts b/web/src/lang/backend/en/user/submittedReward.ts
new file mode 100644
index 0000000..59b0426
--- /dev/null
+++ b/web/src/lang/backend/en/user/submittedReward.ts
@@ -0,0 +1,27 @@
+export default {
+    'Promotion type': 'Promotion type',
+    'Submitted Rewards': 'Submitted Rewards',
+    Running: 'Running',
+    'Start Date': 'Start Date',
+    'End Date': 'End Date',
+    Status: 'Status',
+    Username: 'Username',
+    'All status': '- All status -',
+    'Approve Reward': 'Approve Reward',
+    'Reject Reward': 'Reject Reward',
+    'In process': 'In process',
+    'Search by username': 'Search by username',
+    Clear: 'Clear',
+    'Date of data': 'Date of data',
+    'Submitted Time': 'Submitted Time',
+    'Reward Claim': 'Reward Claim',
+    Action: 'Action',
+    Agree: 'Agree',
+    Reject: 'Reject',
+    'Confirm reward action': 'Are you sure you want to {action} the reward request from {username}?',
+    'No records': 'No records',
+    'Total records': 'Total {total} records',
+    to: 'to',
+    Day: 'Day',
+    Days: 'Days',
+}
diff --git a/web/src/lang/backend/zh-cn/user/submittedReward.ts b/web/src/lang/backend/zh-cn/user/submittedReward.ts
new file mode 100644
index 0000000..7d61515
--- /dev/null
+++ b/web/src/lang/backend/zh-cn/user/submittedReward.ts
@@ -0,0 +1,27 @@
+export default {
+    'Promotion type': '活动类型',
+    'Submitted Rewards': '已提交奖励',
+    Running: '运行中',
+    'Start Date': '开始日期',
+    'End Date': '结束日期',
+    Status: '状态',
+    Username: '用户名',
+    'All status': '- 全部状态 -',
+    'Approve Reward': '批准奖励',
+    'Reject Reward': '拒绝奖励',
+    'In process': '处理中',
+    'Search by username': '按用户名搜索',
+    Clear: '清除',
+    'Date of data': '数据日期',
+    'Submitted Time': '提交时间',
+    'Reward Claim': '领取奖励',
+    Action: '操作',
+    Agree: '同意',
+    Reject: '拒绝',
+    'Confirm reward action': '确定要{action}用户 {username} 的奖励申请吗？',
+    'No records': '暂无记录',
+    'Total records': '共 {total} 条记录',
+    to: '至',
+    Day: '天',
+    Days: '天',
+}
diff --git a/web/src/views/backend/user/user/submittedReward.vue b/web/src/views/backend/user/user/submittedReward.vue
index 9ab0ee6..801dad0 100644
--- a/web/src/views/backend/user/user/submittedReward.vue
+++ b/web/src/views/backend/user/user/submittedReward.vue
@@ -1,156 +1,508 @@
-<!--suppress TypeScriptValidateTypes -->
 <template>
-    <div class="default-main ba-table-box">
-        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
+    <div class="default-main submitted-rewards">
+        <nav class="reward-tabs" :aria-label="t('user.submittedReward.Promotion type')">
+            <button
+                v-for="tab in promotionTabs"
+                :key="tab.value"
+                type="button"
+                :class="{ active: filters.gameId === tab.value }"
+                @click="changePromotion(tab.value)"
+            >
+                {{ tab.label }}
+            </button>
+        </nav>
 
-        <!-- 表格顶部菜单 -->
-        <TableHeader
-            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
-            :quick-search-placeholder="t('Quick search placeholder', { fields: t('user.user.User name') + '/' + t('user.user.nickname') })"
-        />
+        <section class="reward-panel">
+            <header class="panel-heading">
+                <span>{{ t('user.submittedReward.Submitted Rewards') }} ({{ activePromotionLabel }})</span>
+                <strong>{{ t('user.submittedReward.Running') }}</strong>
+            </header>
 
-        <!-- 表格 -->
-        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
-        <Table />
+            <div class="filter-panel">
+                <div class="filter-item">
+                    <label>{{ t('user.submittedReward.Start Date') }}:</label>
+                    <el-date-picker v-model="filters.start" type="date" value-format="YYYY-MM-DD" :clearable="false" />
+                </div>
+                <div class="filter-item">
+                    <label>{{ t('user.submittedReward.End Date') }}:</label>
+                    <el-date-picker v-model="filters.end" type="date" value-format="YYYY-MM-DD" :clearable="false" />
+                </div>
+                <div class="filter-item">
+                    <label>{{ t('user.submittedReward.Status') }}:</label>
+                    <el-select v-model="filters.status">
+                        <el-option :label="t('user.submittedReward.All status')" value="all" />
+                        <el-option :label="t('user.submittedReward.Approve Reward')" value="1" />
+                        <el-option :label="t('user.submittedReward.Reject Reward')" value="2" />
+                        <el-option :label="t('user.submittedReward.In process')" value="0" />
+                    </el-select>
+                </div>
+                <div class="filter-item">
+                    <label>{{ t('user.submittedReward.Username') }}:</label>
+                    <el-input
+                        v-model.trim="filters.username"
+                        :placeholder="t('user.submittedReward.Search by username')"
+                        clearable
+                        @keyup.enter="search"
+                    />
+                </div>
+                <div class="filter-actions">
+                    <el-button @click="search">{{ t('Search') }}</el-button>
+                    <el-button @click="clearFilters">{{ t('user.submittedReward.Clear') }}</el-button>
+                </div>
+            </div>
+        </section>
 
-        <!-- 表单 -->
-        <PopupForm />
-        <MembersPopupForm v-model="customFormVisible" :row="customFormRow" :wallet-data="customFormData" />
+        <div class="date-summary">
+            <strong>{{ t('user.submittedReward.Date of data') }}:</strong>
+            {{ dateRangeText }}
+        </div>
+
+        <div v-loading="loading" class="reward-table-wrap">
+            <table class="reward-table">
+                <thead>
+                    <tr>
+                        <th class="submitted-time">{{ t('user.submittedReward.Submitted Time') }}</th>
+                        <th class="username">{{ t('user.submittedReward.Username') }}</th>
+                        <th class="reward-claim">{{ t('user.submittedReward.Reward Claim') }}</th>
+                        <th>{{ t('user.submittedReward.Status') }}</th>
+                        <th class="action">{{ t('user.submittedReward.Action') }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="row in rows" :key="row.id">
+                        <td>{{ row.submittedTime }}</td>
+                        <td>{{ row.username }}</td>
+                        <td>{{ row.rewardClaim }}</td>
+                        <td>{{ row.status }}</td>
+                        <td>
+                            <div v-if="row.statusCode === 0" class="action-buttons">
+                                <el-button
+                                    type="success"
+                                    size="small"
+                                    :loading="actionLoadingId === row.id"
+                                    @click="confirmReward(row, 1)"
+                                >
+                                    {{ t('user.submittedReward.Agree') }}
+                                </el-button>
+                                <el-button
+                                    type="danger"
+                                    size="small"
+                                    :loading="actionLoadingId === row.id"
+                                    @click="confirmReward(row, 2)"
+                                >
+                                    {{ t('user.submittedReward.Reject') }}
+                                </el-button>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr v-if="!loading && rows.length === 0">
+                        <td class="empty-row" colspan="5">{{ t('user.submittedReward.No records') }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div class="table-footer">
+            <span>{{ t('user.submittedReward.Total records', { total: pagination.total }) }}</span>
+            <el-pagination
+                v-if="pagination.total > 0"
+                v-model:current-page="pagination.currentPage"
+                background
+                layout="prev, pager, next"
+                :page-size="pagination.pageSize"
+                :total="pagination.total"
+                @current-change="changePage"
+            />
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { provide, ref } from 'vue'
-import { getWallet } from '/@/api/backend/user/wallet'
-import baTableClass from '/@/utils/baTable'
-import PopupForm from './popupForm.vue'
-import MembersPopupForm from './membersPopupForm.vue'
-import Table from '/@/components/table/index.vue'
-import TableHeader from '/@/components/table/header/index.vue'
-import { defaultOptButtons } from '/@/components/table'
-import { baTableApi } from '/@/api/common'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
 import { useI18n } from 'vue-i18n'
+import { editReward, getSubmittedRewards, type SubmittedRewardParams } from '/@/api/backend/user/submittedReward'
 
 defineOptions({
-    name: 'user/user',
+    name: 'user/submittedReward',
 })
 
-const { t } = useI18n()
-const customFormVisible = ref(false)
-const customFormRow = ref<TableRow | null>(null)
-const customFormData = ref<anyObj | null>(null)
-const walletLoadingId = ref<number | string | null>(null)
-let walletRequestSeq = 0
+type GameId = 268 | 269 | 270
 
-const optButtons: OptButton[] = [
-    {
-        render: 'tipButton',
-        name: 'customAction',
-        title: 'Members Promotion',
-        text: '',
-        type: 'primary',
-        icon: 'el-icon-Wallet',
-        class: 'table-row-custom',
-        disabledTip: false,
-        loading: (row: TableRow) => walletLoadingId.value === row.id,
-        click: async (row: TableRow) => {
-            const requestSeq = ++walletRequestSeq
-            walletLoadingId.value = row.id
-            try {
-                const res = await getWallet(row.id)
-                if (requestSeq !== walletRequestSeq) return
-                customFormRow.value = { ...row }
-                customFormData.value = res.data?.row ?? res.data ?? {}
-                customFormVisible.value = true
-            } finally {
-                if (requestSeq === walletRequestSeq) {
-                    walletLoadingId.value = null
-                }
-            }
-        },
-    },
-    ...defaultOptButtons(['edit', 'delete']),
+interface RewardRow {
+    id: number | string
+    submittedTime: string
+    username: string
+    rewardClaim: string
+    status: string
+    statusCode: number
+}
+
+const { t } = useI18n()
+
+const formatDate = (date: Date) => {
+    const pad = (value: number) => String(value).padStart(2, '0')
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+}
+
+const today = () => formatDate(new Date())
+
+const promotionTabs: { label: string; value: GameId }[] = [
+    { label: 'Plinko Ball', value: 268 },
+    { label: 'Smash Eggs', value: 269 },
+    { label: 'Spin Wheel', value: 270 },
 ]
 
-const baTable = new baTableClass(
-    new baTableApi('/admin/user.User/'),
-    {
-        column: [
-            { type: 'selection', align: 'center', operator: false },
-            { label: t('Id'), prop: 'id', align: 'center', operator: '=', operatorPlaceholder: t('Id'), width: 70 },
-            { label: t('user.user.User name'), prop: 'jk_username', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
-            { label: t('user.user.nickname'), prop: 'nickname', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
-            { label: t('user.user.jk user id'), prop: 'jk_user_id', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
-            { label: t('user.user.referrer code'), prop: 'referrer_code', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query'), width: 120,},
-            {
-                label: t('user.user.group'),
-                prop: 'userGroup.name',
-                align: 'center',
-                operator: 'LIKE',
-                operatorPlaceholder: t('Fuzzy query'),
-                render: 'tag',
-            },
-            { label: t('user.user.avatar'), prop: 'avatar', align: 'center', render: 'image', operator: false },
-            {
-                label: t('user.user.Gender'),
-                prop: 'gender',
-                align: 'center',
-                render: 'tag',
-                custom: { '0': 'info', '1': '', '2': 'success' },
-                replaceValue: { '0': t('Unknown'), '1': t('user.user.male'), '2': t('user.user.female') },
-            },
-            { label: t('user.user.mobile'), prop: 'mobile', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
-            {
-                label: t('user.user.Last login IP'),
-                prop: 'last_login_ip',
-                align: 'center',
-                operator: 'LIKE',
-                operatorPlaceholder: t('Fuzzy query'),
-                render: 'tag',
-            },
-            {
-                label: t('user.user.Last login'),
-                prop: 'last_login_time',
-                align: 'center',
-                render: 'datetime',
-                sortable: 'custom',
-                operator: 'RANGE',
-                width: 160,
-            },
-            { label: t('Create time'), prop: 'create_time', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
-            {
-                label: t('State'),
-                prop: 'status',
-                align: 'center',
-                render: 'tag',
-                custom: { disable: 'danger', enable: 'success' },
-                replaceValue: { disable: t('Disable'), enable: t('Enable') },
-            },
-            {
-                label: t('Operate'),
-                align: 'center',
-                width: '160',
-                render: 'buttons',
-                buttons: optButtons,
-                operator: false,
-            }
-        ],
-        dblClickNotEditColumn: [undefined],
-    },
-    {
-        defaultItems: {
-            gender: 0,
-            money: '0',
-            score: '0',
-            status: 'enable',
-        },
+const filters = reactive({
+    gameId: 268 as GameId,
+    start: today(),
+    end: today(),
+    status: 'all' as 'all' | SubmittedRewardParams['status'],
+    username: '',
+})
+
+const pagination = reactive({
+    currentPage: 1,
+    pageSize: 20,
+    total: 0,
+})
+
+const rows = ref<RewardRow[]>([])
+const loading = ref(false)
+const actionLoadingId = ref<number | string | null>(null)
+
+const activePromotionLabel = computed(() => {
+    const labelMap: Record<GameId, string> = {
+        268: 'Plinko Ball',
+        269: 'Smash Eggs',
+        270: 'Spin Wheel',
     }
-)
+    return labelMap[filters.gameId]
+})
 
-baTable.mount()
-baTable.getData()
+const dateRangeText = computed(() => {
+    const start = new Date(`${filters.start}T00:00:00`)
+    const end = new Date(`${filters.end}T00:00:00`)
+    const duration = Math.max(1, Math.floor((end.getTime() - start.getTime()) / 86400000) + 1)
+    const range = filters.start === filters.end ? filters.start : `${filters.start} ${t('user.submittedReward.to')} ${filters.end}`
+    return `${range} (${duration} ${duration === 1 ? t('user.submittedReward.Day') : t('user.submittedReward.Days')})`
+})
 
-provide('baTable', baTable)
+const mapRow = (item: Record<string, any>, index: number): RewardRow => {
+    return {
+        id: item.id ?? `${pagination.currentPage}-${index}`,
+        submittedTime: String(item.submitted_time ?? ''),
+        username: String(item.username ?? ''),
+        rewardClaim: String(item.reward_claim ?? ''),
+        status: String(item.status_text ?? ''),
+        statusCode: Number(item.status),
+    }
+}
+
+const normalizeResponse = (responseData: any) => {
+    const source = responseData?.data ?? responseData ?? {}
+    const list = source.list ?? {}
+    const data = Array.isArray(list.data) ? list.data : []
+    const total = Number(list.total ?? list.count ?? data.length)
+    const pageSize = Number(list.per_page ?? list.page_size ?? pagination.pageSize)
+    const currentPage = Number(list.current_page ?? list.page ?? pagination.currentPage)
+
+    return {
+        rows: data.map((item: Record<string, any>, index: number) => mapRow(item, index)),
+        total: Number.isFinite(total) ? total : 0,
+        pageSize: Number.isFinite(pageSize) && pageSize > 0 ? pageSize : 20,
+        currentPage: Number.isFinite(currentPage) && currentPage > 0 ? currentPage : 1,
+    }
+}
+
+const loadRewards = async (page = pagination.currentPage) => {
+    loading.value = true
+    try {
+        const response = await getSubmittedRewards({
+            start: filters.start,
+            end: filters.end,
+            status: filters.status === 'all' ? '' : filters.status,
+            username: filters.username,
+            game_id: filters.gameId,
+            page,
+        })
+        const normalized = normalizeResponse(response.data)
+        rows.value = normalized.rows
+        pagination.total = normalized.total
+        pagination.pageSize = normalized.pageSize
+        pagination.currentPage = normalized.currentPage
+    } finally {
+        loading.value = false
+    }
+}
+
+const search = () => {
+    pagination.currentPage = 1
+    loadRewards(1)
+}
+
+const clearFilters = () => {
+    filters.start = today()
+    filters.end = today()
+    filters.status = 'all'
+    filters.username = ''
+    pagination.currentPage = 1
+    loadRewards(1)
+}
+
+const changePromotion = (gameId: GameId) => {
+    filters.gameId = gameId
+    pagination.currentPage = 1
+    loadRewards(1)
+}
+
+const changePage = (page: number) => {
+    loadRewards(page)
+}
+
+const confirmReward = (row: RewardRow, status: 1 | 2) => {
+    const action = status === 1 ? t('user.submittedReward.Agree') : t('user.submittedReward.Reject')
+
+    ElMessageBox.confirm(
+        t('user.submittedReward.Confirm reward action', {
+            action,
+            username: row.username,
+        }),
+        t('Confirm'),
+        {
+            confirmButtonText: t('Confirm'),
+            cancelButtonText: t('Cancel'),
+            type: status === 1 ? 'success' : 'warning',
+        }
+    )
+        .then(() => {
+            actionLoadingId.value = row.id
+            return editReward({ id: row.id, status })
+        })
+        .then(() => loadRewards(pagination.currentPage))
+        .finally(() => {
+            actionLoadingId.value = null
+        })
+        .catch(() => {
+            // Closing the confirmation dialog does not require feedback.
+        })
+}
+
+onMounted(() => {
+    loadRewards(1)
+})
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.submitted-rewards {
+    --reward-dark: #333;
+    --reward-border: #ddd;
+    --reward-approved: #dcfbc9;
+    padding: 20px;
+    color: var(--el-text-color-primary);
+    font-size: 14px;
+}
+
+.reward-tabs {
+    display: flex;
+    width: fit-content;
+    margin-bottom: 20px;
+    overflow: hidden;
+    border: 1px solid #999;
+    border-radius: 4px;
+
+    button {
+        min-width: 136px;
+        height: 31px;
+        padding: 5px 30px;
+        border: 0;
+        border-right: 1px solid #999;
+        background: var(--el-fill-color-light);
+        color: var(--el-text-color-primary);
+        cursor: pointer;
+
+        &:last-child {
+            min-width: 99px;
+            border-right: 0;
+        }
+
+        &:hover {
+            background: var(--el-fill-color);
+        }
+
+        &.active {
+            background: #bbb;
+            color: #000;
+        }
+    }
+}
+
+.reward-panel {
+    border: 1px solid var(--reward-border);
+}
+
+.panel-heading {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 40px;
+    padding: 10px;
+    background: var(--reward-dark);
+    color: #fff;
+    font-weight: 700;
+
+    strong {
+        color: #57e31a;
+    }
+}
+
+.filter-panel {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 28px;
+    min-height: 88px;
+    padding: 14px 40px;
+    background: var(--el-bg-color);
+}
+
+.filter-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    label {
+        min-width: 76px;
+        text-align: right;
+        font-weight: 700;
+        white-space: nowrap;
+    }
+
+    :deep(.el-date-editor),
+    :deep(.el-select),
+    :deep(.el-input) {
+        width: 200px;
+    }
+}
+
+.filter-actions {
+    display: flex;
+    gap: 8px;
+
+    .el-button {
+        width: 100px;
+        margin: 0;
+    }
+}
+
+.date-summary {
+    margin: 20px 0 8px;
+}
+
+.reward-table-wrap {
+    min-height: 120px;
+    overflow-x: auto;
+}
+
+.reward-table {
+    width: 100%;
+    min-width: 850px;
+    border-collapse: collapse;
+
+    th,
+    td {
+        height: 37px;
+        padding: 8px;
+        border: 1px solid var(--reward-border);
+        text-align: left;
+        white-space: nowrap;
+    }
+
+    th {
+        background: var(--reward-dark);
+        color: #fff;
+        font-weight: 700;
+    }
+
+    tbody tr {
+        background: var(--reward-approved);
+        color: #333;
+    }
+
+    .submitted-time {
+        width: 150px;
+    }
+
+    .username {
+        width: 100px;
+    }
+
+    .reward-claim {
+        width: 180px;
+    }
+
+    .action {
+        width: 180px;
+    }
+
+    .empty-row {
+        height: 90px;
+        background: var(--el-bg-color);
+        color: var(--el-text-color-secondary);
+        text-align: center;
+    }
+}
+
+.action-buttons {
+    display: flex;
+    gap: 8px;
+
+    .el-button {
+        margin: 0;
+    }
+}
+
+.table-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    margin-top: 18px;
+}
+
+@at-root html.dark {
+    .submitted-rewards {
+        --reward-dark: #2b2b2b;
+        --reward-border: var(--el-border-color);
+        --reward-approved: #29482b;
+    }
+
+    .reward-tabs button.active {
+        background: #555;
+        color: #fff;
+    }
+
+    .reward-table tbody tr {
+        color: var(--el-text-color-primary);
+    }
+}
+
+@media (max-width: 900px) {
+    .submitted-rewards {
+        padding: 14px;
+    }
+
+    .reward-tabs {
+        width: 100%;
+        overflow-x: auto;
+
+        button {
+            min-width: 125px;
+        }
+    }
+
+    .filter-panel {
+        padding: 14px;
+    }
+}
+</style>