kincses/service-finder
1
0
Fork 0
Code Issues 52 Pull Requests Packages Projects 2 Releases Wiki Activity

L1L2 gen1Gen2 kialakítása

Browse Source
This commit is contained in:
Roo
2026-07-24 09:56:21 +00:00
parent 4594de6c11
commit 33c4d793db
49 changed files with 4108 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
frontend_admin/.nuxt/dev/index.mjs
View File

@@ -2504,7 +2504,9 @@ var menu$1 = {
user_list: "Felhasználók listája",
persons: "Személyek",
finance: "Pénzügyek",
finance_management: "Pénzügyek Kezelése",
packages: "Csomagok",
commission_rules: "Jutalék Szabályok",
gamification: "Gamification",
game_settings: "Játékmenet Beállítások",
point_rules: "Pontszabályok",
@@ -3766,6 +3768,87 @@ const locale_system_46json_21da1de8 = {
system: system$1
};
var commission_rules$1 = {
title: "Jutalék Szabályok",
subtitle: "Fix jutalmak és százalékos jutalékok kezelése a partnerrendszerben",
create: "Új szabály",
create_title: "Jutalék Szabály Létrehozása",
edit_title: "Jutalék Szabály Szerkesztése",
created: "Jutalék szabály sikeresen létrehozva",
deactivated: "Jutalék szabály sikeresen deaktiválva",
no_items: "Nincsenek jutalék szabályok",
all_types: "Minden típus",
all_tiers: "Minden szint",
filter_region: "Régió",
active_only: "Csak aktív",
campaign_only: "Csak kampány",
tier: "Szint",
region: "Régió",
region_code: "Régiókód",
campaign_dates: "Kampány / Dátumok",
campaign: "Kampány",
permanent: "Állandó",
l1_reward: "Fix Összegű Jutalom (Mikrotranzakció)",
l2_commission: "Százalékos Jutalék (Vásárlás után)",
is_campaign: "Ez egy kampány szabály",
rewards_section: "Fix Jutalmak (XP / Kredit)",
xp_reward: "XP Jutalom",
credit_reward: "Credit Jutalom",
commission_section: "Százalékos Jutalékok",
commission_percent: "Jutalék % (Gen1)",
upline_commission_percent: "Felső szintű Jutalék % (Gen2)",
upline_commission_percent_helper: "A felső szintű ajánlónak (Gen2 — az ajánló ajánlója) járó jutalék százaléka minden vásárlás után.",
renewal_commission_percent: "Megújítási Jutalék %",
renewal_commission_percent_helper: "A havi/éves előfizetés megújításakor járó jutalék százaléka.",
commission_max_amount: "Max Összeg",
deactivate_confirm: "Biztosan deaktiválod a következőt: \"{name}\"?",
showing: "Mutatva",
xp_reward_helper: "Egyéni meghívások után járó fix jutalom (pl. sikeres regisztráció).",
credit_reward_helper: "Egyéni meghívások után járó fix jutalom (pl. sikeres regisztráció).",
commission_percent_helper: "A meghívott cég előfizetési díjából számított százalékos jutalék.",
commission_max_amount_helper: "A kifizethető maximális jutalék összege ezen a szabályon belül.",
region_code_label: "Régiókód",
region_global: "Globális",
region_hu: "Magyarország",
region_de: "Németország",
region_at: "Ausztria",
region_ro: "Románia",
region_sk: "Szlovákia",
id: "Azonosító",
name: "Név",
type: "Típus",
status: "Státusz",
actions: "Műveletek",
active: "Aktív",
inactive: "Inaktív",
edit: "Szerkesztés",
deactivate: "Deaktiválás",
prev: "Előző",
next: "Következő",
loading: "Betöltés...",
error: "Hiba történt",
retry: "Újra",
save: "Mentés",
saving: "Mentés...",
cancel: "Mégsem",
name_placeholder: "Add meg a nevet",
description: "Leírás",
desc_placeholder: "Add meg a leírást",
start_date: "Kezdő Dátum",
end_date: "Befejező Dátum",
delete_title: "Törlés Megerősítése",
updated: "Sikeresen frissítve",
save_error: "Sikertelen mentés",
tier_standard: "Standard",
tier_vip: "VIP",
tier_platinum: "Platinum",
tier_enterprise: "Enterprise",
tier_contracted: "Szerződött Üzletkötő"
};
const locale_commission_46json_2229a18b = {
commission_rules: commission_rules$1
};
var loading = "Loading...";
var saving = "Saving...";
var error = "An error occurred";
@@ -3973,7 +4056,9 @@ var menu = {
user_list: "User List",
persons: "Persons",
finance: "Finance",
finance_management: "Finance Management",
packages: "Packages",
commission_rules: "Commission Rules",
gamification: "Gamification",
game_settings: "Game Settings",
point_rules: "Point Rules",
@@ -5235,6 +5320,87 @@ const locale_system_46json_cff5800c = {
system: system
};
var commission_rules = {
title: "Commission Rules",
subtitle: "Manage fixed rewards and percentage commissions for the referral system",
create: "New Rule",
create_title: "Create Commission Rule",
edit_title: "Edit Commission Rule",
created: "Commission rule created successfully",
deactivated: "Commission rule deactivated successfully",
no_items: "No commission rules found",
all_types: "All Types",
all_tiers: "All Tiers",
filter_region: "Region",
active_only: "Active only",
campaign_only: "Campaign only",
tier: "Tier",
region: "Region",
region_code: "Region Code",
campaign_dates: "Campaign / Dates",
campaign: "Campaign",
permanent: "Permanent",
l1_reward: "Fixed Amount Reward (Microtransaction)",
l2_commission: "Percentage Commission (Post-Purchase)",
is_campaign: "This is a campaign rule",
rewards_section: "Fixed Rewards (XP / Credit)",
xp_reward: "XP Reward",
credit_reward: "Credit Reward",
commission_section: "Percentage Commissions",
commission_percent: "Commission % (Gen1)",
upline_commission_percent: "Upline Commission % (Gen2)",
upline_commission_percent_helper: "Percentage paid to the upline (Gen2 — the referrer's referrer) on each purchase.",
renewal_commission_percent: "Renewal Commission %",
renewal_commission_percent_helper: "Percentage paid on monthly/yearly subscription renewals.",
commission_max_amount: "Max Amount",
deactivate_confirm: "Are you sure you want to deactivate \"{name}\"?",
showing: "Showing",
xp_reward_helper: "Fixed reward given to the user for successful individual referrals (e.g., successful registration via invite code).",
credit_reward_helper: "Fixed reward given to the user for successful individual referrals (e.g., successful registration via invite code).",
commission_percent_helper: "Percentage calculated from the invited company's subscription fee.",
commission_max_amount_helper: "Maximum payable limit for this specific commission rule.",
region_code_label: "Region Code",
region_global: "Global",
region_hu: "Hungary",
region_de: "Germany",
region_at: "Austria",
region_ro: "Romania",
region_sk: "Slovakia",
id: "ID",
name: "Name",
type: "Type",
status: "Status",
actions: "Actions",
active: "Active",
inactive: "Inactive",
edit: "Edit",
deactivate: "Deactivate",
prev: "Previous",
next: "Next",
loading: "Loading...",
error: "An error occurred",
retry: "Retry",
save: "Save",
saving: "Saving...",
cancel: "Cancel",
name_placeholder: "Enter name",
description: "Description",
desc_placeholder: "Enter description",
start_date: "Start Date",
end_date: "End Date",
delete_title: "Confirm Deletion",
updated: "Updated successfully",
save_error: "Failed to save",
tier_standard: "Standard",
tier_vip: "VIP",
tier_platinum: "Platinum",
tier_enterprise: "Enterprise",
tier_contracted: "Contracted Agent"
};
const locale_commission_46json_ea60861a = {
commission_rules: commission_rules
};
var common$4 = {
loading: "Wird geladen...",
saving: "Wird gespeichert...",
@@ -5746,6 +5912,11 @@ const localeLoaders = {
key: "locale_system_46json_21da1de8",
load: () => Promise.resolve(locale_system_46json_21da1de8),
cache: true
},
{
key: "locale_commission_46json_2229a18b",
load: () => Promise.resolve(locale_commission_46json_2229a18b),
cache: true
}
],
en: [
@@ -5788,6 +5959,11 @@ const localeLoaders = {
key: "locale_system_46json_cff5800c",
load: () => Promise.resolve(locale_system_46json_cff5800c),
cache: true
},
{
key: "locale_commission_46json_ea60861a",
load: () => Promise.resolve(locale_commission_46json_ea60861a),
cache: true
}
],
de: [
@@ -6481,16 +6657,16 @@ _wH6JrtIxmaSoA8lCPWFnE9z4lQeXW6H5z3l5aymEQw
const assets = {
"/index.mjs": {
"type": "text/javascript; charset=utf-8",
"etag": "\"3c8cf-iVwUAHqMbwVWb0CE25IIZzxdTQs\"",
"mtime": "2026-07-08T11:00:08.610Z",
"size": 248015,
"etag": "\"3e482-bMW8N/gd5+rJ6Fet5d7ZvFyoG5I\"",
"mtime": "2026-07-24T01:36:18.316Z",
"size": 255106,
"path": "index.mjs"
},
"/index.mjs.map": {
"type": "application/json",
"etag": "\"84c42-k0hYb3YBaxguGfUt43nQybikfko\"",
"mtime": "2026-07-08T11:00:08.610Z",
"size": 543810,
"etag": "\"84cfb-v0HL6pG50A9Shz5WFud0S34p4No\"",
"mtime": "2026-07-24T01:36:18.317Z",
"size": 543995,
"path": "index.mjs.map"
}
};

2
frontend_admin/.nuxt/dev/index.mjs.map
View File

File diff suppressed because one or more lines are too long

2
frontend_admin/.nuxt/manifest/latest.json
View File

@@ -1 +1 @@
{"id":"dev","timestamp":1783500293953}
{"id":"dev","timestamp":1784853723611}

2
frontend_admin/.nuxt/manifest/meta/dev.json
View File

@@ -1 +1 @@
{"id":"dev","timestamp":1783500293953,"prerendered":[]}
{"id":"dev","timestamp":1784853723611,"prerendered":[]}

4
frontend_admin/.nuxt/nitro.json
View File

@@ -1,5 +1,5 @@
{
"date": "2026-07-08T11:00:15.496Z",
"date": "2026-07-24T01:36:24.822Z",
"preset": "nitro-dev",
"framework": {
"name": "nuxt",
@@ -11,7 +11,7 @@
"dev": {
"pid": 19,
"workerAddress": {
"socketPath": "\u0000nitro-worker-19-3-3-6895.sock"
"socketPath": "\u0000nitro-worker-19-14-14-1789.sock"
}
}
}

2
frontend_admin/.nuxt/nuxt.d.ts vendored
View File

@@ -1,5 +1,5 @@
/// <reference types="@nuxtjs/tailwindcss" />
/// <reference types="@nuxtjs/i18n" />
/// <reference types="@nuxtjs/tailwindcss" />
/// <reference types="@pinia/nuxt" />
/// <reference types="@nuxt/telemetry" />
/// <reference types="@nuxt/devtools" />

2
frontend_admin/.nuxt/tailwind/postcss.mjs
View File

@@ -1,4 +1,4 @@
// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 7/8/2026, 11:05:19 AM
// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 7/24/2026, 1:36:24 AM
import "@nuxtjs/tailwindcss/config-ctx"
import configMerger from "@nuxtjs/tailwindcss/merger";

12
frontend_admin/.nuxt/tsconfig.json
View File

@@ -1,9 +1,6 @@
{
"compilerOptions": {
"paths": {
"nuxt": [
"../node_modules/nuxt"
],
"@unhead/vue": [
"../node_modules/@unhead/vue"
],
@@ -19,6 +16,9 @@
"@nuxt/schema": [
"../node_modules/@nuxt/schema"
],
"nuxt": [
"../node_modules/nuxt"
],
"vue-i18n": [
"../node_modules/vue-i18n/dist/vue-i18n",
"../node_modules/vue-i18n"
@@ -47,6 +47,9 @@
"../node_modules/@intlify/message-compiler/dist/message-compiler",
"../node_modules/@intlify/message-compiler"
],
"nitropack": [
"../node_modules/nitropack"
],
"defu": [
"../node_modules/defu"
],
@@ -65,9 +68,6 @@
"unplugin-vue-router/client": [
"../node_modules/unplugin-vue-router/client"
],
"nitropack": [
"../node_modules/nitropack"
],
"vite/client": [
"../node_modules/vite/client"
],

12
frontend_admin/.nuxt/tsconfig.server.json
View File

@@ -29,9 +29,6 @@
"@@/*": [
"../*"
],
"nuxt": [
"../node_modules/nuxt"
],
"@unhead/vue": [
"../node_modules/@unhead/vue"
],
@@ -47,6 +44,9 @@
"@nuxt/schema": [
"../node_modules/@nuxt/schema"
],
"nuxt": [
"../node_modules/nuxt"
],
"vue-i18n": [
"../node_modules/vue-i18n"
],
@@ -68,6 +68,9 @@
"@intlify/message-compiler": [
"../node_modules/@intlify/message-compiler"
],
"nitropack": [
"../node_modules/nitropack"
],
"defu": [
"../node_modules/defu"
],
@@ -86,9 +89,6 @@
"unplugin-vue-router/client": [
"../node_modules/unplugin-vue-router/client"
],
"nitropack": [
"../node_modules/nitropack"
],
"vite/client": [
"../node_modules/vite/client"
],

79
frontend_admin/i18n/locales/en/commission.json Normal file
View File

@@ -0,0 +1,79 @@
{
"commission_rules": {
"title": "Commission Rules",
"subtitle": "Manage fixed rewards and percentage commissions for the referral system",
"create": "New Rule",
"create_title": "Create Commission Rule",
"edit_title": "Edit Commission Rule",
"created": "Commission rule created successfully",
"deactivated": "Commission rule deactivated successfully",
"no_items": "No commission rules found",
"all_types": "All Types",
"all_tiers": "All Tiers",
"filter_region": "Region",
"active_only": "Active only",
"campaign_only": "Campaign only",
"tier": "Tier",
"region": "Region",
"region_code": "Region Code",
"campaign_dates": "Campaign / Dates",
"campaign": "Campaign",
"permanent": "Permanent",
"l1_reward": "Fixed Amount Reward (Microtransaction)",
"l2_commission": "Percentage Commission (Post-Purchase)",
"is_campaign": "This is a campaign rule",
"rewards_section": "Fixed Rewards (XP / Credit)",
"xp_reward": "XP Reward",
"credit_reward": "Credit Reward",
"commission_section": "Percentage Commissions",
"commission_percent": "Commission % (Gen1)",
"upline_commission_percent": "Upline Commission % (Gen2)",
"upline_commission_percent_helper": "Percentage paid to the upline (Gen2 — the referrer's referrer) on each purchase.",
"renewal_commission_percent": "Renewal Commission %",
"renewal_commission_percent_helper": "Percentage paid on monthly/yearly subscription renewals.",
"commission_max_amount": "Max Amount",
"deactivate_confirm": "Are you sure you want to deactivate \"{name}\"?",
"showing": "Showing",
"xp_reward_helper": "Fixed reward given to the user for successful individual referrals (e.g., successful registration via invite code).",
"credit_reward_helper": "Fixed reward given to the user for successful individual referrals (e.g., successful registration via invite code).",
"commission_percent_helper": "Percentage calculated from the invited company's subscription fee.",
"commission_max_amount_helper": "Maximum payable limit for this specific commission rule.",
"region_code_label": "Region Code",
"region_global": "Global",
"region_hu": "Hungary",
"region_de": "Germany",
"region_at": "Austria",
"region_ro": "Romania",
"region_sk": "Slovakia",
"id": "ID",
"name": "Name",
"type": "Type",
"status": "Status",
"actions": "Actions",
"active": "Active",
"inactive": "Inactive",
"edit": "Edit",
"deactivate": "Deactivate",
"prev": "Previous",
"next": "Next",
"loading": "Loading...",
"error": "An error occurred",
"retry": "Retry",
"save": "Save",
"saving": "Saving...",
"cancel": "Cancel",
"name_placeholder": "Enter name",
"description": "Description",
"desc_placeholder": "Enter description",
"start_date": "Start Date",
"end_date": "End Date",
"delete_title": "Confirm Deletion",
"updated": "Updated successfully",
"save_error": "Failed to save",
"tier_standard": "Standard",
"tier_vip": "VIP",
"tier_platinum": "Platinum",
"tier_enterprise": "Enterprise",
"tier_contracted": "Contracted Agent"
}
}

2
frontend_admin/i18n/locales/en/menu.json
View File

@@ -13,7 +13,9 @@
"user_list": "User List",
"persons": "Persons",
"finance": "Finance",
"finance_management": "Finance Management",
"packages": "Packages",
"commission_rules": "Commission Rules",
"gamification": "Gamification",
"game_settings": "Game Settings",
"point_rules": "Point Rules",

79
frontend_admin/i18n/locales/hu/commission.json Normal file
View File

@@ -0,0 +1,79 @@
{
"commission_rules": {
"title": "Jutalék Szabályok",
"subtitle": "Fix jutalmak és százalékos jutalékok kezelése a partnerrendszerben",
"create": "Új szabály",
"create_title": "Jutalék Szabály Létrehozása",
"edit_title": "Jutalék Szabály Szerkesztése",
"created": "Jutalék szabály sikeresen létrehozva",
"deactivated": "Jutalék szabály sikeresen deaktiválva",
"no_items": "Nincsenek jutalék szabályok",
"all_types": "Minden típus",
"all_tiers": "Minden szint",
"filter_region": "Régió",
"active_only": "Csak aktív",
"campaign_only": "Csak kampány",
"tier": "Szint",
"region": "Régió",
"region_code": "Régiókód",
"campaign_dates": "Kampány / Dátumok",
"campaign": "Kampány",
"permanent": "Állandó",
"l1_reward": "Fix Összegű Jutalom (Mikrotranzakció)",
"l2_commission": "Százalékos Jutalék (Vásárlás után)",
"is_campaign": "Ez egy kampány szabály",
"rewards_section": "Fix Jutalmak (XP / Kredit)",
"xp_reward": "XP Jutalom",
"credit_reward": "Credit Jutalom",
"commission_section": "Százalékos Jutalékok",
"commission_percent": "Jutalék % (Gen1)",
"upline_commission_percent": "Felső szintű Jutalék % (Gen2)",
"upline_commission_percent_helper": "A felső szintű ajánlónak (Gen2 — az ajánló ajánlója) járó jutalék százaléka minden vásárlás után.",
"renewal_commission_percent": "Megújítási Jutalék %",
"renewal_commission_percent_helper": "A havi/éves előfizetés megújításakor járó jutalék százaléka.",
"commission_max_amount": "Max Összeg",
"deactivate_confirm": "Biztosan deaktiválod a következőt: \"{name}\"?",
"showing": "Mutatva",
"xp_reward_helper": "Egyéni meghívások után járó fix jutalom (pl. sikeres regisztráció).",
"credit_reward_helper": "Egyéni meghívások után járó fix jutalom (pl. sikeres regisztráció).",
"commission_percent_helper": "A meghívott cég előfizetési díjából számított százalékos jutalék.",
"commission_max_amount_helper": "A kifizethető maximális jutalék összege ezen a szabályon belül.",
"region_code_label": "Régiókód",
"region_global": "Globális",
"region_hu": "Magyarország",
"region_de": "Németország",
"region_at": "Ausztria",
"region_ro": "Románia",
"region_sk": "Szlovákia",
"id": "Azonosító",
"name": "Név",
"type": "Típus",
"status": "Státusz",
"actions": "Műveletek",
"active": "Aktív",
"inactive": "Inaktív",
"edit": "Szerkesztés",
"deactivate": "Deaktiválás",
"prev": "Előző",
"next": "Következő",
"loading": "Betöltés...",
"error": "Hiba történt",
"retry": "Újra",
"save": "Mentés",
"saving": "Mentés...",
"cancel": "Mégsem",
"name_placeholder": "Add meg a nevet",
"description": "Leírás",
"desc_placeholder": "Add meg a leírást",
"start_date": "Kezdő Dátum",
"end_date": "Befejező Dátum",
"delete_title": "Törlés Megerősítése",
"updated": "Sikeresen frissítve",
"save_error": "Sikertelen mentés",
"tier_standard": "Standard",
"tier_vip": "VIP",
"tier_platinum": "Platinum",
"tier_enterprise": "Enterprise",
"tier_contracted": "Szerződött Üzletkötő"
}
}

2
frontend_admin/i18n/locales/hu/menu.json
View File

@@ -13,7 +13,9 @@
"user_list": "Felhasználók listája",
"persons": "Személyek",
"finance": "Pénzügyek",
"finance_management": "Pénzügyek Kezelése",
"packages": "Csomagok",
"commission_rules": "Jutalék Szabályok",
"gamification": "Gamification",
"game_settings": "Játékmenet Beállítások",
"point_rules": "Pontszabályok",

16
frontend_admin/layouts/default.vue
View File

@@ -339,9 +339,20 @@ const menuGroups: MenuGroup[] = [
title: 'menu.finance',
items: [
{
path: '/packages',
label: 'menu.packages',
label: 'menu.finance_management',
icon: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0l-3-3m3 3l3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" /></svg>',
children: [
{
path: '/packages',
label: 'menu.packages',
icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>',
},
{
path: '/finance/commission-rules',
label: 'menu.commission_rules',
icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
},
],
},
],
},
@@ -460,6 +471,7 @@ const pageTitle = computed(() => {
if (route.path.startsWith('/users')) return 'menu.users'
if (route.path.startsWith('/logs')) return 'menu.system_logs'
if (route.path.startsWith('/packages')) return 'menu.packages'
if (route.path.startsWith('/finance/commission-rules')) return 'commission_rules.title'
if (route.path.startsWith('/providers')) {
if (route.path === '/providers/pending') return 'providers.pending_title'
if (route.path.startsWith('/providers/')) return 'providers.provider_detail'

2
frontend_admin/nuxt.config.ts
View File

@@ -23,6 +23,7 @@ export default defineNuxtConfig({
files: [
'hu/common.json', 'hu/menu.json', 'hu/dashboard.json', 'hu/providers.json',
'hu/garages.json', 'hu/users.json', 'hu/gamification.json', 'hu/system.json',
'hu/commission.json',
],
},
{
@@ -30,6 +31,7 @@ export default defineNuxtConfig({
files: [
'en/common.json', 'en/menu.json', 'en/dashboard.json', 'en/providers.json',
'en/garages.json', 'en/users.json', 'en/gamification.json', 'en/system.json',
'en/commission.json',
],
},
{ code: 'de', iso: 'de-DE', file: 'de.json', name: 'Deutsch' },

795
frontend_admin/pages/finance/commission-rules.vue Normal file
View File

@@ -0,0 +1,795 @@
<template>
<div>
<!-- Page Header -->
<div class="mb-8">
<h1 class="text-2xl font-bold text-white">{{ t('commission_rules.title') }}</h1>
<p class="text-slate-400 mt-1">{{ t('commission_rules.subtitle') }}</p>
</div>
<!-- Loading State -->
<div v-if="loading" class="flex items-center justify-center py-20">
<div class="text-slate-400 flex items-center gap-3">
<svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
<span>{{ t('commission_rules.loading') }}</span>
</div>
</div>
<!-- Error State -->
<div v-else-if="error" class="bg-rose-500/10 border border-rose-500/30 rounded-xl p-6 mb-8">
<p class="text-rose-400">{{ t('commission_rules.error') }}</p>
<button @click="fetchRules" class="mt-3 text-sm text-rose-300 hover:text-rose-200 underline">{{ t('commission_rules.retry') }}</button>
</div>
<template v-else>
<!-- Filters & Create Button -->
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
<!-- Filters -->
<div class="flex flex-wrap items-center gap-3">
<!-- Rule Type Filter -->
<select
v-model="filterType"
class="px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
@change="fetchRules"
>
<option value="">{{ t('commission_rules.all_types') }}</option>
<option value="L1_REWARD">{{ t('commission_rules.l1_reward') }}</option>
<option value="L2_COMMISSION">{{ t('commission_rules.l2_commission') }}</option>
</select>
<!-- Tier Filter -->
<select
v-model="filterTier"
class="px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
@change="fetchRules"
>
<option value="">{{ t('commission_rules.all_tiers') }}</option>
<option value="STANDARD">{{ t('commission_rules.tier_standard') }}</option>
<option value="VIP">{{ t('commission_rules.tier_vip') }}</option>
<option value="PLATINUM">{{ t('commission_rules.tier_platinum') }}</option>
<option value="ENTERPRISE">{{ t('commission_rules.tier_enterprise') }}</option>
<option value="CONTRACTED">{{ t('commission_rules.tier_contracted') }}</option>
</select>
<!-- Region Filter -->
<input
v-model="filterRegion"
type="text"
:placeholder="t('commission_rules.filter_region')"
maxlength="10"
class="w-28 px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
@input="debouncedFetch"
/>
<!-- Active Only Toggle -->
<label class="flex items-center gap-2 text-sm text-slate-300 cursor-pointer select-none">
<input
v-model="filterActive"
type="checkbox"
class="w-4 h-4 rounded bg-slate-700 border-slate-600 text-indigo-500 focus:ring-indigo-500/50"
@change="fetchRules"
/>
{{ t('commission_rules.active_only') }}
</label>
<!-- Campaign Only Toggle -->
<label class="flex items-center gap-2 text-sm text-slate-300 cursor-pointer select-none">
<input
v-model="filterCampaign"
type="checkbox"
class="w-4 h-4 rounded bg-slate-700 border-slate-600 text-indigo-500 focus:ring-indigo-500/50"
@change="fetchRules"
/>
{{ t('commission_rules.campaign_only') }}
</label>
</div>
<!-- Create Button -->
<button @click="openCreateModal" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium transition flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
{{ t('commission_rules.create') }}
</button>
</div>
<!-- Rules Table -->
<div class="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
<table class="w-full">
<thead>
<tr class="border-b border-slate-700">
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.id') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.name') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.type') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.tier') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.region') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.campaign_dates') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.status') }}</th>
<th class="text-right px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.actions') }}</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-700/50">
<tr v-for="rule in rules" :key="rule.id" class="hover:bg-slate-700/30 transition">
<td class="px-6 py-4 text-sm text-slate-400">{{ rule.id }}</td>
<td class="px-6 py-4">
<div class="text-sm font-medium text-white">{{ rule.name }}</div>
<div v-if="rule.description" class="text-xs text-slate-500 mt-0.5 max-w-xs truncate">{{ rule.description }}</div>
</td>
<td class="px-6 py-4">
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
:class="rule.rule_type === 'L1_REWARD' ? 'bg-amber-500/10 text-amber-400' : 'bg-blue-500/10 text-blue-400'"
>
{{ rule.rule_type === 'L1_REWARD' ? t('commission_rules.l1_reward') : t('commission_rules.l2_commission') }}
</span>
</td>
<td class="px-6 py-4">
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
:class="tierBadgeClass(rule.tier)"
>
{{ tierLabel(rule.tier) }}
</span>
</td>
<td class="px-6 py-4">
<code class="text-sm font-mono text-indigo-300 bg-indigo-500/10 px-2 py-0.5 rounded">{{ rule.region_code }}</code>
</td>
<td class="px-6 py-4">
<template v-if="rule.is_campaign">
<div class="text-xs text-slate-300">
<span class="text-amber-400 font-medium">{{ t('commission_rules.campaign') }}</span>
</div>
<div class="text-xs text-slate-500 mt-0.5">
{{ rule.start_date || '—' }} → {{ rule.end_date || '—' }}
</div>
</template>
<span v-else class="text-xs text-slate-500">{{ t('commission_rules.permanent') }}</span>
</td>
<td class="px-6 py-4">
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
:class="rule.is_active ? 'bg-emerald-500/10 text-emerald-400' : 'bg-slate-500/10 text-slate-400'"
>
{{ rule.is_active ? t('commission_rules.active') : t('commission_rules.inactive') }}
</span>
</td>
<td class="px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2">
<button @click="openEditModal(rule)" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition" :title="t('commission_rules.edit')">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
<button @click="confirmDeactivate(rule)" class="p-1.5 rounded-lg text-slate-400 hover:text-rose-400 hover:bg-rose-500/10 transition" :title="t('commission_rules.deactivate')">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
<tr v-if="rules.length === 0">
<td colspan="8" class="px-6 py-12 text-center text-sm text-slate-500">
{{ t('commission_rules.no_items') }}
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div v-if="totalPages > 1" class="mt-6 flex items-center justify-between">
<div class="text-sm text-slate-400">
{{ t('commission_rules.showing') }} {{ (currentPage - 1) * pageSize + 1 }}–{{ Math.min(currentPage * pageSize, total) }} / {{ total }}
</div>
<div class="flex items-center gap-2">
<button
:disabled="currentPage <= 1"
class="px-3 py-1.5 rounded-lg text-sm font-medium transition disabled:opacity-30 disabled:cursor-not-allowed"
:class="currentPage > 1 ? 'bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white' : 'bg-slate-800 text-slate-600'"
@click="goToPage(currentPage - 1)"
>
{{ t('commission_rules.prev') }}
</button>
<span class="text-sm text-slate-400 px-2">{{ currentPage }} / {{ totalPages }}</span>
<button
:disabled="currentPage >= totalPages"
class="px-3 py-1.5 rounded-lg text-sm font-medium transition disabled:opacity-30 disabled:cursor-not-allowed"
:class="currentPage < totalPages ? 'bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white' : 'bg-slate-800 text-slate-600'"
@click="goToPage(currentPage + 1)"
>
{{ t('commission_rules.next') }}
</button>
</div>
</div>
</template>
<!-- Create/Edit Modal -->
<div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm overflow-y-auto py-8" @click.self="closeModal">
<div class="bg-slate-800 rounded-xl border border-slate-700 p-6 w-full max-w-2xl mx-4 shadow-2xl my-auto">
<h2 class="text-lg font-semibold text-white mb-6">
{{ editingRule ? t('commission_rules.edit_title') : t('commission_rules.create_title') }}
</h2>
<form @submit.prevent="saveRule" class="space-y-5">
<!-- Row: Name + Rule Type -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Name -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.name') }} <span class="text-rose-400">*</span></label>
<input
v-model="form.name"
type="text"
required
maxlength="255"
:placeholder="t('commission_rules.name_placeholder')"
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
/>
</div>
<!-- Rule Type -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.type') }} <span class="text-rose-400">*</span></label>
<select
v-model="form.rule_type"
required
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
>
<option value="L1_REWARD">{{ t('commission_rules.l1_reward') }}</option>
<option value="L2_COMMISSION">{{ t('commission_rules.l2_commission') }}</option>
</select>
</div>
</div>
<!-- Row: Tier + Region -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Tier -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.tier') }}</label>
<select
v-model="form.tier"
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
>
<option value="STANDARD">{{ t('commission_rules.tier_standard') }}</option>
<option value="VIP">{{ t('commission_rules.tier_vip') }}</option>
<option value="PLATINUM">{{ t('commission_rules.tier_platinum') }}</option>
<option value="ENTERPRISE">{{ t('commission_rules.tier_enterprise') }}</option>
<option value="CONTRACTED">{{ t('commission_rules.tier_contracted') }}</option>
</select>
</div>
<!-- Region Code -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.region_code_label') }}</label>
<select
v-model="form.region_code"
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
>
<option value="GLOBAL">{{ t('commission_rules.region_global') }}</option>
<option value="HU">{{ t('commission_rules.region_hu') }}</option>
<option value="DE">{{ t('commission_rules.region_de') }}</option>
<option value="AT">{{ t('commission_rules.region_at') }}</option>
<option value="RO">{{ t('commission_rules.region_ro') }}</option>
<option value="SK">{{ t('commission_rules.region_sk') }}</option>
</select>
</div>
</div>
<!-- Description -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.description') }}</label>
<textarea
v-model="form.description"
rows="2"
:placeholder="t('commission_rules.desc_placeholder')"
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm resize-none"
></textarea>
</div>
<!-- Campaign Section -->
<div class="bg-slate-700/30 rounded-lg p-4 space-y-4">
<div class="flex items-center gap-3">
<input
v-model="form.is_campaign"
type="checkbox"
id="is_campaign"
class="w-4 h-4 rounded bg-slate-700 border-slate-600 text-indigo-500 focus:ring-indigo-500/50"
/>
<label for="is_campaign" class="text-sm text-slate-300 font-medium">{{ t('commission_rules.is_campaign') }}</label>
</div>
<div v-if="form.is_campaign" class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Start Date -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.start_date') }}</label>
<input
v-model="form.start_date"
type="date"
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
/>
</div>
<!-- End Date -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.end_date') }}</label>
<input
v-model="form.end_date"
type="date"
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
/>
</div>
</div>
</div>
<!-- Rewards Section (L1) -->
<div
class="bg-slate-700/30 rounded-lg p-4 space-y-4 transition-opacity duration-200"
:class="form.rule_type === 'L2_COMMISSION' ? 'opacity-40 pointer-events-none' : ''"
>
<div class="text-sm font-medium text-slate-300 mb-2">{{ t('commission_rules.rewards_section') }}</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- XP Reward -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.xp_reward') }}</label>
<input
v-model.number="form.xp_reward"
type="number"
min="0"
placeholder="0"
:disabled="form.rule_type === 'L2_COMMISSION'"
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm disabled:cursor-not-allowed"
/>
<p class="mt-1 text-xs text-slate-400">{{ t('commission_rules.xp_reward_helper') }}</p>
</div>
<!-- Credit Reward -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.credit_reward') }}</label>
<input
v-model.number="form.credit_reward"
type="number"
min="0"
placeholder="0"
:disabled="form.rule_type === 'L2_COMMISSION'"
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm disabled:cursor-not-allowed"
/>
<p class="mt-1 text-xs text-slate-400">{{ t('commission_rules.credit_reward_helper') }}</p>
</div>
</div>
</div>
<!-- Commission Section (L2) -->
<div
class="bg-slate-700/30 rounded-lg p-4 space-y-4 transition-opacity duration-200"
:class="form.rule_type === 'L1_REWARD' ? 'opacity-40 pointer-events-none' : ''"
>
<div class="text-sm font-medium text-slate-300 mb-2">{{ t('commission_rules.commission_section') }}</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Commission Percent (Gen1) -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.commission_percent') }}</label>
<div class="relative">
<input
v-model.number="form.commission_percent"
type="number"
min="0"
max="100"
step="0.01"
placeholder="0.00"
:disabled="form.rule_type === 'L1_REWARD'"
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm pr-8 disabled:cursor-not-allowed"
/>
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">%</span>
</div>
<p class="mt-1 text-xs text-slate-400">{{ t('commission_rules.commission_percent_helper') }}</p>
</div>
<!-- Upline Commission Percent (Gen2) -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.upline_commission_percent') }}</label>
<div class="relative">
<input
v-model.number="form.upline_commission_percent"
type="number"
min="0"
max="100"
step="0.01"
placeholder="0.00"
:disabled="form.rule_type === 'L1_REWARD'"
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm pr-8 disabled:cursor-not-allowed"
/>
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">%</span>
</div>
<p class="mt-1 text-xs text-slate-400">{{ t('commission_rules.upline_commission_percent_helper') }}</p>
</div>
<!-- Renewal Commission Percent -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.renewal_commission_percent') }}</label>
<div class="relative">
<input
v-model.number="form.renewal_commission_percent"
type="number"
min="0"
max="100"
step="0.01"
placeholder="0.00"
:disabled="form.rule_type === 'L1_REWARD'"
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm pr-8 disabled:cursor-not-allowed"
/>
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">%</span>
</div>
<p class="mt-1 text-xs text-slate-400">{{ t('commission_rules.renewal_commission_percent_helper') }}</p>
</div>
<!-- Commission Max Amount -->
<div>
<label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.commission_max_amount') }}</label>
<input
v-model.number="form.commission_max_amount"
type="number"
min="0"
step="0.01"
placeholder="0.00"
:disabled="form.rule_type === 'L1_REWARD'"
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm disabled:cursor-not-allowed"
/>
<p class="mt-1 text-xs text-slate-400">{{ t('commission_rules.commission_max_amount_helper') }}</p>
</div>
</div>
</div>
<!-- Is Active -->
<div class="flex items-center gap-3">
<input
v-model="form.is_active"
type="checkbox"
id="form_is_active"
class="w-4 h-4 rounded bg-slate-700 border-slate-600 text-indigo-500 focus:ring-indigo-500/50"
/>
<label for="form_is_active" class="text-sm text-slate-300">{{ t('commission_rules.active') }}</label>
</div>
<!-- Error Message -->
<div v-if="formError" class="bg-rose-500/10 border border-rose-500/30 rounded-lg p-3">
<p class="text-sm text-rose-400">{{ formError }}</p>
</div>
<!-- Actions -->
<div class="flex justify-end gap-3 pt-2 border-t border-slate-700">
<button type="button" @click="closeModal" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition">{{ t('commission_rules.cancel') }}</button>
<button type="submit" :disabled="saving" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-600/50 text-white rounded-lg text-sm font-medium transition flex items-center gap-2">
<svg v-if="saving" class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
{{ saving ? t('commission_rules.saving') : t('commission_rules.save') }}
</button>
</div>
</form>
</div>
</div>
<!-- Deactivate Confirmation Modal -->
<div v-if="showDeactivateModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showDeactivateModal = false">
<div class="bg-slate-800 rounded-xl border border-slate-700 p-6 w-full max-w-md mx-4 shadow-2xl">
<h2 class="text-lg font-semibold text-white mb-2">{{ t('commission_rules.delete_title') }}</h2>
<p class="text-sm text-slate-400 mb-6">
{{ t('commission_rules.deactivate_confirm', { name: deactivatingRule?.name }) }}
</p>
<div class="flex justify-end gap-3">
<button @click="showDeactivateModal = false" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition">{{ t('commission_rules.cancel') }}</button>
<button @click="deactivateRule" :disabled="saving" class="px-4 py-2 bg-rose-600 hover:bg-rose-500 disabled:bg-rose-600/50 text-white rounded-lg text-sm font-medium transition">
{{ saving ? t('commission_rules.saving') : t('commission_rules.deactivate') }}
</button>
</div>
</div>
</div>
<!-- Success Toast -->
<div v-if="toast" class="fixed bottom-6 right-6 z-50 bg-emerald-600 text-white px-4 py-3 rounded-lg shadow-lg text-sm flex items-center gap-2 animate-slide-up">
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{{ toast }}
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
definePageMeta({
middleware: 'auth',
})
const { t } = useI18n()
interface CommissionRule {
id: number
rule_type: 'L1_REWARD' | 'L2_COMMISSION'
tier: 'STANDARD' | 'VIP' | 'PLATINUM' | 'ENTERPRISE' | 'CONTRACTED'
region_code: string
xp_reward: number | null
credit_reward: number | null
commission_percent: number | null
upline_commission_percent: number | null
renewal_commission_percent: number | null
commission_max_amount: number | null
is_campaign: boolean
start_date: string | null
end_date: string | null
name: string
description: string | null
is_active: boolean
created_by: number | null
created_at: string
updated_at: string
}
interface PaginatedResponse {
items: CommissionRule[]
total: number
page: number
page_size: number
}
const loading = ref(true)
const error = ref(false)
const rules = ref<CommissionRule[]>([])
const showModal = ref(false)
const showDeactivateModal = ref(false)
const editingRule = ref<CommissionRule | null>(null)
const deactivatingRule = ref<CommissionRule | null>(null)
const saving = ref(false)
const formError = ref('')
const toast = ref('')
// Pagination
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
// Filters
const filterType = ref('')
const filterTier = ref('')
const filterRegion = ref('')
const filterActive = ref(false)
const filterCampaign = ref(false)
let debounceTimer: ReturnType<typeof setTimeout> | null = null
function debouncedFetch() {
if (debounceTimer) clearTimeout(debounceTimer)
debounceTimer = setTimeout(() => {
currentPage.value = 1
fetchRules()
}, 400)
}
const form = reactive({
name: '',
description: '',
rule_type: 'L1_REWARD' as 'L1_REWARD' | 'L2_COMMISSION',
tier: 'STANDARD' as 'STANDARD' | 'VIP' | 'PLATINUM' | 'ENTERPRISE' | 'CONTRACTED',
region_code: 'GLOBAL',
is_campaign: false,
start_date: '',
end_date: '',
xp_reward: null as number | null,
credit_reward: null as number | null,
commission_percent: null as number | null,
upline_commission_percent: null as number | null,
renewal_commission_percent: null as number | null,
commission_max_amount: null as number | null,
is_active: true,
})
function getHeaders(): Record<string, string> {
const tokenCookie = useCookie('access_token')
const token = tokenCookie.value
return token ? { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' } : { 'Content-Type': 'application/json' }
}
function showToast(msg: string) {
toast.value = msg
setTimeout(() => { toast.value = '' }, 3000)
}
function resetForm() {
form.name = ''
form.description = ''
form.rule_type = 'L1_REWARD'
form.tier = 'STANDARD'
form.region_code = 'GLOBAL'
form.is_campaign = false
form.start_date = ''
form.end_date = ''
form.xp_reward = null
form.credit_reward = null
form.commission_percent = null
form.upline_commission_percent = null
form.renewal_commission_percent = null
form.commission_max_amount = null
form.is_active = true
formError.value = ''
}
function openCreateModal() {
editingRule.value = null
resetForm()
showModal.value = true
}
function openEditModal(rule: CommissionRule) {
editingRule.value = rule
form.name = rule.name
form.description = rule.description || ''
form.rule_type = rule.rule_type
form.tier = rule.tier
form.region_code = rule.region_code
form.is_campaign = rule.is_campaign
form.start_date = rule.start_date || ''
form.end_date = rule.end_date || ''
form.xp_reward = rule.xp_reward
form.credit_reward = rule.credit_reward
form.commission_percent = rule.commission_percent
form.upline_commission_percent = rule.upline_commission_percent
form.renewal_commission_percent = rule.renewal_commission_percent
form.commission_max_amount = rule.commission_max_amount
form.is_active = rule.is_active
formError.value = ''
showModal.value = true
}
function closeModal() {
showModal.value = false
editingRule.value = null
resetForm()
}
function confirmDeactivate(rule: CommissionRule) {
deactivatingRule.value = rule
showDeactivateModal.value = true
}
function tierLabel(tier: string): string {
const key = `commission_rules.tier_${tier.toLowerCase()}`
const label = t(key)
return label !== key ? label : tier
}
function tierBadgeClass(tier: string): string {
switch (tier) {
case 'STANDARD': return 'bg-slate-500/10 text-slate-400'
case 'VIP': return 'bg-purple-500/10 text-purple-400'
case 'PLATINUM': return 'bg-cyan-500/10 text-cyan-400'
case 'ENTERPRISE': return 'bg-amber-500/10 text-amber-400'
case 'CONTRACTED': return 'bg-indigo-500/10 text-indigo-400'
default: return 'bg-slate-500/10 text-slate-400'
}
}
function goToPage(page: number) {
if (page < 1 || page > totalPages.value) return
currentPage.value = page
fetchRules()
}
async function fetchRules() {
loading.value = true
error.value = false
try {
const params = new URLSearchParams()
params.set('page', String(currentPage.value))
params.set('page_size', String(pageSize.value))
if (filterType.value) params.set('rule_type', filterType.value)
if (filterTier.value) params.set('tier', filterTier.value)
if (filterRegion.value) params.set('region_code', filterRegion.value)
if (filterActive.value) params.set('is_active', 'true')
if (filterCampaign.value) params.set('is_campaign', 'true')
const data = await $fetch<PaginatedResponse>(`/api/v1/admin/commission-rules?${params.toString()}`, {
headers: getHeaders(),
})
rules.value = data.items
total.value = data.total
} catch (e) {
console.error('Failed to fetch commission rules:', e)
error.value = true
} finally {
loading.value = false
}
}
async function saveRule() {
saving.value = true
formError.value = ''
try {
const payload: Record<string, any> = {
name: form.name,
description: form.description || null,
rule_type: form.rule_type,
tier: form.tier,
region_code: form.region_code,
is_campaign: form.is_campaign,
is_active: form.is_active,
}
// Only include campaign dates if is_campaign is true
if (form.is_campaign) {
payload.start_date = form.start_date || null
payload.end_date = form.end_date || null
} else {
payload.start_date = null
payload.end_date = null
}
// Type-specific fields
payload.xp_reward = form.xp_reward
payload.credit_reward = form.credit_reward
payload.commission_percent = form.commission_percent
payload.upline_commission_percent = form.upline_commission_percent
payload.renewal_commission_percent = form.renewal_commission_percent
payload.commission_max_amount = form.commission_max_amount
if (editingRule.value) {
await $fetch(`/api/v1/admin/commission-rules/${editingRule.value.id}`, {
method: 'PUT',
headers: getHeaders(),
body: payload,
})
showToast(t('commission_rules.updated'))
} else {
await $fetch('/api/v1/admin/commission-rules', {
method: 'POST',
headers: getHeaders(),
body: payload,
})
showToast(t('commission_rules.created'))
}
closeModal()
await fetchRules()
} catch (e: any) {
console.error('Failed to save commission rule:', e)
formError.value = e?.data?.detail || t('commission_rules.save_error')
} finally {
saving.value = false
}
}
async function deactivateRule() {
if (!deactivatingRule.value) return
saving.value = true
try {
await $fetch(`/api/v1/admin/commission-rules/${deactivatingRule.value.id}`, {
method: 'DELETE',
headers: getHeaders(),
})
showToast(t('commission_rules.deactivated'))
showDeactivateModal.value = false
deactivatingRule.value = null
await fetchRules()
} catch (e) {
console.error('Failed to deactivate commission rule:', e)
} finally {
saving.value = false
}
}
onMounted(() => {
fetchRules()
})
</script>
<style scoped>
.animate-slide-up {
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(1rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>