From 4b8554f41e4bddcd147d5fcfb24812536ff875f3 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Tue, 28 Apr 2026 15:05:02 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=8E=BB=E9=99=A4=E5=BA=95=E8=BE=B9?=
 =?UTF-8?q?=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Administrator/subscriptionPlan.vue        | 2003 +++++++++--------
 1 file changed, 1002 insertions(+), 1001 deletions(-)

diff --git a/src/component/Administrator/subscriptionPlan.vue b/src/component/Administrator/subscriptionPlan.vue
index c9c7a07c..a52a555e 100644
--- a/src/component/Administrator/subscriptionPlan.vue
+++ b/src/component/Administrator/subscriptionPlan.vue
@@ -437,1099 +437,1100 @@
 </template>
 
 <script setup lang="ts">
-import {
-	reactive,
-	ref,
-	onMounted,
-	onBeforeUnmount,
-	onActivated,
-	computed,
-	nextTick,
-	useTemplateRef
-} from "vue"
-import SelectUser from "@/component/common/SelectUser.vue"
-import { message } from "ant-design-vue"
-import { Https } from "@/tool/https"
-import { formatTime } from "@/tool/util"
-import store from "@/store"
-import type { FormInstance, Rule } from "ant-design-vue/es/form"
-import { debounce } from "lodash-es"
-import dayjs, { Dayjs } from "dayjs"
+	import {
+		reactive,
+		ref,
+		onMounted,
+		onBeforeUnmount,
+		onActivated,
+		computed,
+		nextTick,
+		useTemplateRef
+	} from "vue"
+	import SelectUser from "@/component/common/SelectUser.vue"
+	import { message } from "ant-design-vue"
+	import { Https } from "@/tool/https"
+	import { formatTime } from "@/tool/util"
+	import store from "@/store"
+	import type { FormInstance, Rule } from "ant-design-vue/es/form"
+	import { debounce } from "lodash-es"
+	import dayjs, { Dayjs } from "dayjs"
 
-type PlanStatus = "PENDING" | "ACTIVE" | "EXPIRED"
-interface SubscriptionPlan {
-	id: number
-	userId?: string | number
-	name: string
-	currentPeriodStart: string
-	currentPeriodEnd: string
-	organizationId: string
-	adminAccId: string
-	adminAccEmail?: string
-	status: PlanStatus
-	creditLimit: number
-	accountNum?: number
-	startStamp: number
-	endStamp: number
-}
-
-interface UserInfoRecord {
-	id: number
-	userEmail?: string
-	userName?: string
-	language?: string
-	validStartTime?: number | string
-	validEndTime?: number | string
-	country?: string
-	createDate?: number | string
-	isBeginner?: number
-	browserIdentifiers?: string
-	credits?: number
-	systemUser?: number | string
-}
-
-const countryList = ref([])
-const userRef = ref(null)
-
-const searchForm = reactive({
-	name: "",
-	startTime: "",
-	endTime: "",
-	organizationId: undefined as string | undefined,
-	adminAccId: undefined as string | undefined,
-	status: [] as PlanStatus[] | [],
-	id: "",
-	countryOrRegion: null,
-	page: 1,
-	size: 10,
-	total: 0
-})
-
-const toSeconds = (dateStr: string) => Math.floor(new Date(dateStr).getTime() / 1000)
-
-const tableData = ref<SubscriptionPlan[]>([])
-const tableLoading = ref(false)
-const userInfoModalVisible = ref(false)
-const userInfoLoading = ref(false)
-const userInfoList = ref<UserInfoRecord[]>([])
-const currentUserInfoPlanId = ref<string | number | null>(null)
-const userInfoPage = reactive({
-	current: 1,
-	size: 10,
-	total: 0
-})
-
-const modalVisible = ref(false)
-const confirmLoading = ref(false)
-const modalTitle = ref("New Subscription Plan")
-const isEditMode = ref(false)
-const formState = reactive({
-	name: "",
-	currentPeriodStart: "",
-	currentPeriodEnd: "",
-	organizationId: undefined as string | undefined,
-	adminAccId: undefined as string | undefined,
-	creditLimit: null as number | null,
-	accountNum: null as number | null,
-	status: undefined as PlanStatus | undefined,
-	countryOrRegion: null as string | null
-})
-
-const organizationModalVisible = ref(false)
-const organizationForm = reactive({
-	name: "",
-	type: undefined as string | undefined
-})
-
-const statusLabelMap: Record<PlanStatus, string> = {
-	PENDING: "Pending",
-	ACTIVE: "Active",
-	EXPIRED: "Expired"
-}
-const statusColorMap: Record<PlanStatus, string> = {
-	PENDING: "blue",
-	ACTIVE: "green",
-	EXPIRED: "red"
-}
-
-const statusOption = ref([
-	{
-		label: "Pending",
-		value: "PENDING"
-	},
-	{
-		label: "Active",
-		value: "ACTIVE"
-	},
-	{
-		label: "Expired",
-		value: "EXPIRED"
+	type PlanStatus = "PENDING" | "ACTIVE" | "EXPIRED"
+	interface SubscriptionPlan {
+		id: number
+		userId?: string | number
+		name: string
+		currentPeriodStart: string
+		currentPeriodEnd: string
+		organizationId: string
+		adminAccId: string
+		adminAccEmail?: string
+		status: PlanStatus
+		creditLimit: number
+		accountNum?: number
+		startStamp: number
+		endStamp: number
 	}
-])
 
-const disabledDate = (current: Dayjs) => {
-	return current && current < dayjs().subtract(1, "days").endOf("day")
-}
+	interface UserInfoRecord {
+		id: number
+		userEmail?: string
+		userName?: string
+		language?: string
+		validStartTime?: number | string
+		validEndTime?: number | string
+		country?: string
+		createDate?: number | string
+		isBeginner?: number
+		browserIdentifiers?: string
+		credits?: number
+		systemUser?: number | string
+	}
 
-const disableEndDate = (current: Dayjs) => {
-	if (isEditMode.value) {
-		const specificTime = dayjs(formState.currentPeriodEnd)
-		return current && current < dayjs(formState.currentPeriodEnd * 1000).startOf("day")
+	const countryList = ref([])
+	const userRef = ref(null)
+
+	const searchForm = reactive({
+		name: "",
+		startTime: "",
+		endTime: "",
+		organizationId: undefined as string | undefined,
+		adminAccId: undefined as string | undefined,
+		status: [] as PlanStatus[] | [],
+		id: "",
+		countryOrRegion: null,
+		page: 1,
+		size: 10,
+		total: 0
+	})
+
+	const toSeconds = (dateStr: string) => Math.floor(new Date(dateStr).getTime() / 1000)
+
+	const tableData = ref<SubscriptionPlan[]>([])
+	const tableLoading = ref(false)
+	const userInfoModalVisible = ref(false)
+	const userInfoLoading = ref(false)
+	const userInfoList = ref<UserInfoRecord[]>([])
+	const currentUserInfoPlanId = ref<string | number | null>(null)
+	const userInfoPage = reactive({
+		current: 1,
+		size: 10,
+		total: 0
+	})
+
+	const modalVisible = ref(false)
+	const confirmLoading = ref(false)
+	const modalTitle = ref("New Subscription Plan")
+	const isEditMode = ref(false)
+	const formState = reactive({
+		name: "",
+		currentPeriodStart: "",
+		currentPeriodEnd: "",
+		organizationId: undefined as string | undefined,
+		adminAccId: undefined as string | undefined,
+		creditLimit: null as number | null,
+		accountNum: null as number | null,
+		status: undefined as PlanStatus | undefined,
+		countryOrRegion: null as string | null
+	})
+
+	const organizationModalVisible = ref(false)
+	const organizationForm = reactive({
+		name: "",
+		type: undefined as string | undefined
+	})
+
+	const statusLabelMap: Record<PlanStatus, string> = {
+		PENDING: "Pending",
+		ACTIVE: "Active",
+		EXPIRED: "Expired"
 	}
-	return disabledDate(current)
-}
-const range = (start: number, end: number) => {
-	const result = []
-	for (let i = start; i < end; i++) {
-		result.push(i)
+	const statusColorMap: Record<PlanStatus, string> = {
+		PENDING: "blue",
+		ACTIVE: "green",
+		EXPIRED: "red"
 	}
-	return result
-}
-const disableEndTime = (date) => {
-	if (!formState.currentPeriodEnd || !isEditMode.value)
+
+	const statusOption = ref([
+		{
+			label: "Pending",
+			value: "PENDING"
+		},
+		{
+			label: "Active",
+			value: "ACTIVE"
+		},
+		{
+			label: "Expired",
+			value: "EXPIRED"
+		}
+	])
+
+	const disabledDate = (current: Dayjs) => {
+		return current && current < dayjs().subtract(1, "days").endOf("day")
+	}
+
+	const disableEndDate = (current: Dayjs) => {
+		if (isEditMode.value) {
+			const specificTime = dayjs(formState.currentPeriodEnd)
+			return current && current < dayjs(formState.currentPeriodEnd * 1000).startOf("day")
+		}
+		return disabledDate(current)
+	}
+	const range = (start: number, end: number) => {
+		const result = []
+		for (let i = start; i < end; i++) {
+			result.push(i)
+		}
+		return result
+	}
+	const disableEndTime = (date) => {
+		if (!formState.currentPeriodEnd || !isEditMode.value)
+			return {
+				disabledHours: () => [],
+				disabledMinutes: () => [],
+				disabledSeconds: () => []
+			}
+
+		const specificTime = dayjs.unix(formState.currentPeriodEnd)
+
+		if (date && date.isSame(specificTime, "day")) {
+			// 如果是指定日期当天，禁用时间戳之前的时间
+			const hour = specificTime.hour()
+			const minute = specificTime.minute()
+			const second = specificTime.second()
+
+			return {
+				disabledHours: () => Array.from({ length: hour }, (_, i) => i), // 禁用小时之前
+				disabledMinutes: (selectedHour) => {
+					if (selectedHour === hour) {
+						return Array.from({ length: minute }, (_, i) => i) // 同小时，禁用分钟之前
+					}
+					return []
+				},
+				disabledSeconds: (selectedHour, selectedMinute) => {
+					if (selectedHour === hour && selectedMinute === minute) {
+						return Array.from({ length: second }, (_, i) => i) // 同小时分钟，禁用秒之前
+					}
+					return []
+				}
+			}
+		}
+
 		return {
 			disabledHours: () => [],
 			disabledMinutes: () => [],
 			disabledSeconds: () => []
 		}
-
-	const specificTime = dayjs.unix(formState.currentPeriodEnd)
-
-	if (date && date.isSame(specificTime, "day")) {
-		// 如果是指定日期当天，禁用时间戳之前的时间
-		const hour = specificTime.hour()
-		const minute = specificTime.minute()
-		const second = specificTime.second()
-
-		return {
-			disabledHours: () => Array.from({ length: hour }, (_, i) => i), // 禁用小时之前
-			disabledMinutes: (selectedHour) => {
-				if (selectedHour === hour) {
-					return Array.from({ length: minute }, (_, i) => i) // 同小时，禁用分钟之前
-				}
-				return []
-			},
-			disabledSeconds: (selectedHour, selectedMinute) => {
-				if (selectedHour === hour && selectedMinute === minute) {
-					return Array.from({ length: second }, (_, i) => i) // 同小时分钟，禁用秒之前
-				}
-				return []
-			}
-		}
 	}
 
-	return {
-		disabledHours: () => [],
-		disabledMinutes: () => [],
-		disabledSeconds: () => []
+	const normalizeStatus = (status?: string): PlanStatus | undefined => {
+		if (!status) return undefined
+		const upper = status.toUpperCase() as PlanStatus
+		return upper
 	}
-}
+	const getStatusColor = (status?: string) =>
+		statusColorMap[normalizeStatus(status) as PlanStatus] || "default"
 
-const normalizeStatus = (status?: string): PlanStatus | undefined => {
-	if (!status) return undefined
-	const upper = status.toUpperCase() as PlanStatus
-	return upper
-}
-const getStatusColor = (status?: string) =>
-	statusColorMap[normalizeStatus(status) as PlanStatus] || "default"
-
-const columns = [
-	{ title: "Name", dataIndex: "name", key: "name", align: "center", width: 180 },
-	{ title: "ID", dataIndex: "id", key: "id", align: "center", width: 80 },
-	{
-		title: "Organization",
-		dataIndex: "organizationName",
-		key: "organizationName",
-		align: "center",
-		width: 180
-	},
-	{
-		title: "Admin Account",
-		dataIndex: "adminAccEmail",
-		key: "adminAccEmail",
-		align: "center",
-		width: 180,
-		ellipsis: true
-	},
-	{
-		title: "Sub-Account Num",
-		dataIndex: "accountNum",
-		key: "accountNum",
-		align: "center",
-		width: 120,
-		ellipsis: true
-	},
-	{
-		title: "Country or Region",
-		dataIndex: "countryOrRegion",
-		key: "countryOrRegion",
-		align: "center",
-		width: 120,
-		ellipsis: true
-	},
-	{
-		title: "Start Time",
-		dataIndex: "currentPeriodStart",
-		key: "currentPeriodStart",
-		align: "center",
-		width: 200
-	},
-	{
-		title: "End Time",
-		dataIndex: "currentPeriodEnd",
-		key: "currentPeriodEnd",
-		align: "center",
-		width: 200
-	},
-	{ title: "Status", dataIndex: "status", key: "status", align: "center", width: 100 },
-	{
-		title: "Credit Limit",
-		dataIndex: "creditLimit",
-		key: "creditLimit",
-		align: "center",
-		width: 120
-	},
-	{ title: "Operations", key: "actions", width: 160, align: "center", fixed: "right" }
-]
-
-const userInfoColumns = [
-	{ title: "User Id", dataIndex: "id", key: "id", align: "center", width: 100 },
-	{
-		title: "Email",
-		dataIndex: "userEmail",
-		key: "userEmail",
-		align: "center",
-		width: 200,
-		ellipsis: true
-	},
-	{
-		title: "User Name",
-		dataIndex: "userName",
-		key: "userName",
-		align: "center",
-		width: 150,
-		ellipsis: true
-	},
-
-	{
-		title: "Valid Start Time",
-		dataIndex: "validStartTime",
-		key: "validStartTime",
-		align: "center",
-		width: 200
-	},
-	{
-		title: "Valid End Time",
-		dataIndex: "validEndTime",
-		key: "validEndTime",
-		align: "center",
-		width: 200
-	},
-	{
-		title: "Country or Region",
-		dataIndex: "country",
-		key: "country",
-		align: "center",
-		width: 180,
-		ellipsis: true
-	},
-	{
-		title: "Credits",
-		dataIndex: "credits",
-		key: "credits",
-		align: "center",
-		width: 100
-	},
-	{
-		title: "User Type",
-		dataIndex: "systemUser",
-		key: "systemUser",
-		align: "center",
-		width: 120
-	}
-]
-
-const systemUserLabelMap: Record<string, string> = {
-	"0": "visitor",
-	"1": "yearly",
-	"2": "monthly",
-	"3": "trial",
-	"4": "userInEvent",
-	"7": "Edu Admin"
-}
-
-const getSystemUserLabel = (systemUser?: number | string) => {
-	if (systemUser === undefined || systemUser === null) return ""
-	return systemUserLabelMap[String(systemUser)] || String(systemUser)
-}
-
-const formatUserTime = (value?: number | string) => {
-	if (!value) return ""
-	if (typeof value === "number") {
-		return formatTime(value / 1000, "YYYY-MM-DD hh:mm:ss")
-	}
-	if (/^\d+$/.test(value)) {
-		return formatTime(Number(value) / 1000, "YYYY-MM-DD hh:mm:ss")
-	}
-	return value
-}
-
-const normalizeUserInfoList = (res: any): UserInfoRecord[] => {
-	if (Array.isArray(res)) return res
-	if (Array.isArray(res?.records)) return res.records
-	if (res) return [res]
-	return []
-}
-
-const buildUserInfoParams = (id: string | number) => ({
-	endTime: "",
-	startTime: "",
-	size: userInfoPage.size,
-	page: userInfoPage.current,
-	systemUser: "",
-	country: "",
-	email: "",
-	userType: "",
-	ids: [],
-	occupation: "",
-	order: "",
-	orderBy: "",
-	userName: "",
-	subscriptionPlanId: id
-})
-
-const fetchUserInfo = async () => {
-	if (currentUserInfoPlanId.value === null) return
-	userInfoLoading.value = true
-	userInfoList.value = []
-
-	try {
-		const res = await Https.axiosPost(
-			Https.httpUrls.getUserInfo,
-			buildUserInfoParams(currentUserInfoPlanId.value)
-		)
-		const records = normalizeUserInfoList(res)
-		userInfoList.value = records
-		userInfoPage.total = Number(res?.total ?? records.length)
-	} catch (error: any) {
-		message.error(error.message || "Failed to load user info")
-		console.error(error)
-	} finally {
-		userInfoLoading.value = false
-	}
-}
-
-const openUserInfo = async (record: SubscriptionPlan) => {
-	console.log(record)
-	// debugger
-
-	currentUserInfoPlanId.value = record.id
-	userInfoPage.current = 1
-	userInfoModalVisible.value = true
-	await fetchUserInfo()
-}
-
-const changeUserInfoPage = (pagination: any) => {
-	userInfoPage.current = pagination.current
-	userInfoPage.size = pagination.pageSize
-	fetchUserInfo()
-}
-
-const customPlanRow = (record: SubscriptionPlan) => {
-	return {
-		onClick: (event: MouseEvent) => {
-			const target = event.target as HTMLElement | null
-			if (target?.closest(".plan-row-actions")) return
-			openUserInfo(record)
-		}
-	}
-}
-
-const historyTable = ref<HTMLElement | null>(null)
-const historyTableHeight = ref(0)
-const minTableBodyHeight = 120
-let tableResizeObserver: ResizeObserver | null = null
-let tableResizeTimer: ReturnType<typeof window.setTimeout> | null = null
-
-const handleResizeColumn = (w: any, col: any) => {
-	col.width = w
-}
-
-const getElementOuterHeight = (element: Element | null) => {
-	if (!element) return 0
-	const htmlElement = element as HTMLElement
-	const style = window.getComputedStyle(htmlElement)
-	return (
-		htmlElement.offsetHeight +
-		Number.parseFloat(style.marginTop || "0") +
-		Number.parseFloat(style.marginBottom || "0")
-	)
-}
-
-const calculateTableHeight = () => {
-	if (tableResizeTimer) {
-		window.clearTimeout(tableResizeTimer)
-	}
-	tableResizeTimer = window.setTimeout(() => {
-		nextTick(() => {
-			const tableWrapper = historyTable.value
-			if (!tableWrapper) {
-				tableResizeTimer = null
-				return
-			}
-
-			const tableHead = tableWrapper.querySelector(".ant-table-thead") ?? null
-			const pagination = tableWrapper.querySelector(".ant-pagination") ?? null
-			const tableHeadHeight = getElementOuterHeight(tableHead) || 55
-			const paginationHeight = getElementOuterHeight(pagination) || 48
-			const reservedHeight = tableHeadHeight + paginationHeight + 8
-
-			historyTableHeight.value = Math.max(
-				minTableBodyHeight,
-				tableWrapper.clientHeight - reservedHeight
-			)
-			tableResizeTimer = null
-		})
-	}, 50)
-}
-
-const handleResize = () => {
-	calculateTableHeight()
-}
-
-const setupTableResizeObserver = () => {
-	if (!historyTable.value || typeof ResizeObserver === "undefined") return
-	tableResizeObserver?.disconnect()
-	tableResizeObserver = new ResizeObserver(() => {
-		calculateTableHeight()
-	})
-	tableResizeObserver.observe(historyTable.value)
-
-	const searchCard = historyTable.value
-		.closest(".subscription-plan")
-		?.querySelector(".search-card")
-	if (searchCard) {
-		tableResizeObserver.observe(searchCard)
-	}
-}
-
-onMounted(async () => {
-	await getOrganizationList()
-	await handleSearch()
-	calculateTableHeight()
-	setupTableResizeObserver()
-	window.addEventListener("resize", handleResize)
-	const list = sessionStorage.getItem("allCountry")
-	countryList.value = list ? JSON.parse(list) : []
-})
-
-onActivated(() => {
-	calculateTableHeight()
-})
-
-onBeforeUnmount(() => {
-	window.removeEventListener("resize", handleResize)
-	tableResizeObserver?.disconnect()
-	if (tableResizeTimer) {
-		window.clearTimeout(tableResizeTimer)
-		tableResizeTimer = null
-	}
-})
-
-const handleFetchTableData = async () => {
-	tableLoading.value = true
-	return Https.axiosPost(Https.httpUrls.searchAllSubscribePlan, searchForm)
-		.then((res) => {
-			tableData.value = res.records
-			searchForm.total = res.total
-		})
-		.finally(() => {
-			tableLoading.value = false
-			calculateTableHeight()
-		})
-}
-
-const resetFormState = () => {
-	formState.name = ""
-	formState.currentPeriodStart = ""
-	formState.currentPeriodEnd = ""
-	formState.organizationId = undefined
-	formState.adminAccId = undefined
-	formState.creditLimit = null
-	formState.accountNum = null
-	formState.status = undefined
-	formState.countryOrRegion = null
-}
-
-const changePage = (pagination: any) => {
-	searchForm.page = pagination.current
-	searchForm.size = pagination.pageSize
-	handleFetchTableData()
-}
-
-const handleSearch = () => {
-	searchForm.page = 1
-	handleFetchTableData()
-}
-
-const handleReset = () => {
-	searchForm.name = ""
-	searchForm.startTime = ""
-	searchForm.endTime = ""
-	searchForm.organizationId = undefined
-	searchForm.adminAccId = undefined
-	searchForm.status = []
-	searchForm.id = ""
-	searchForm.countryOrRegion = null
-	handleSearch()
-}
-
-const openCreate = () => {
-	modalTitle.value = "New Subscription Plan"
-	isEditMode.value = false
-	resetFormState()
-	modalVisible.value = true
-}
-
-const openEdit = (record: SubscriptionPlan) => {
-	modalTitle.value = "Edit Subscription Plan"
-	isEditMode.value = true
-	formState.name = record.name
-	formState.currentPeriodStart = String(record.currentPeriodStart)
-	formState.currentPeriodEnd = String(record.currentPeriodEnd)
-	formState.organizationId = record.organizationId
-	formState.adminAccId = record.adminAccId
-	formState.creditLimit = record.creditLimit
-	formState.accountNum = (record as any).accountNum || null
-	formState.status = record.status
-	formState.id = record.id
-	formState.countryOrRegion = (record as any).countryOrRegion || null
-
-	// 检查组织ID是否在已加载的组织列表中，如果不在，则添加临时项
-	if (record.organizationId) {
-		const orgExists = organizationOptions.value.some(
-			(org: any) =>
-				org.id === record.organizationId || String(org.id) === String(record.organizationId)
-		)
-		if (!orgExists) {
-			const orgName = (record as any).organizationName
-			if (orgName) {
-				organizationOptions.value = [
-					{
-						id: record.organizationId,
-						name: orgName
-					},
-					...organizationOptions.value
-				]
-			}
-		}
-	}
-	modalVisible.value = true
-	if (record.adminAccId) {
-		nextTick(() => {
-			userRef.value.patchList({
-				label: record.name,
-				value: record.adminAccId,
-				email: record.adminAccEmail
-			})
-		})
-	}
-}
-
-const validateForm = (): boolean => {
-	interface FieldRule {
-		value: any
-		message: string
-		checkNull?: boolean
-	}
-
-	const requiredFields: FieldRule[] = [
-		{ value: formState.currentPeriodStart, message: "Please select the start time" },
-		{ value: formState.currentPeriodEnd, message: "Please select the end time" },
-		{ value: formState.adminAccId, message: "Please select the admin account" },
+	const columns = [
+		{ title: "Name", dataIndex: "name", key: "name", align: "center", width: 180 },
+		{ title: "ID", dataIndex: "id", key: "id", align: "center", width: 80 },
 		{
-			value: formState.creditLimit,
-			message: "Please input credit limit",
-			checkNull: true
+			title: "Organization",
+			dataIndex: "organizationName",
+			key: "organizationName",
+			align: "center",
+			width: 180
 		},
 		{
-			value: formState.accountNum,
-			message: "Please input account number",
-			checkNull: true
+			title: "Admin Account",
+			dataIndex: "adminAccEmail",
+			key: "adminAccEmail",
+			align: "center",
+			width: 180,
+			ellipsis: true
+		},
+		{
+			title: "Sub-Account Num",
+			dataIndex: "accountNum",
+			key: "accountNum",
+			align: "center",
+			width: 120,
+			ellipsis: true
+		},
+		{
+			title: "Country or Region",
+			dataIndex: "countryOrRegion",
+			key: "countryOrRegion",
+			align: "center",
+			width: 120,
+			ellipsis: true
+		},
+		{
+			title: "Start Time",
+			dataIndex: "currentPeriodStart",
+			key: "currentPeriodStart",
+			align: "center",
+			width: 200
+		},
+		{
+			title: "End Time",
+			dataIndex: "currentPeriodEnd",
+			key: "currentPeriodEnd",
+			align: "center",
+			width: 200
+		},
+		{ title: "Status", dataIndex: "status", key: "status", align: "center", width: 100 },
+		{
+			title: "Credit Limit",
+			dataIndex: "creditLimit",
+			key: "creditLimit",
+			align: "center",
+			width: 120
+		},
+		{ title: "Operations", key: "actions", width: 160, align: "center", fixed: "right" }
+	]
+
+	const userInfoColumns = [
+		{ title: "User Id", dataIndex: "id", key: "id", align: "center", width: 100 },
+		{
+			title: "Email",
+			dataIndex: "userEmail",
+			key: "userEmail",
+			align: "center",
+			width: 200,
+			ellipsis: true
+		},
+		{
+			title: "User Name",
+			dataIndex: "userName",
+			key: "userName",
+			align: "center",
+			width: 150,
+			ellipsis: true
+		},
+
+		{
+			title: "Valid Start Time",
+			dataIndex: "validStartTime",
+			key: "validStartTime",
+			align: "center",
+			width: 200
+		},
+		{
+			title: "Valid End Time",
+			dataIndex: "validEndTime",
+			key: "validEndTime",
+			align: "center",
+			width: 200
+		},
+		{
+			title: "Country or Region",
+			dataIndex: "country",
+			key: "country",
+			align: "center",
+			width: 180,
+			ellipsis: true
+		},
+		{
+			title: "Credits",
+			dataIndex: "credits",
+			key: "credits",
+			align: "center",
+			width: 100
+		},
+		{
+			title: "User Type",
+			dataIndex: "systemUser",
+			key: "systemUser",
+			align: "center",
+			width: 120
 		}
 	]
 
-	if (!isEditMode.value) {
-		requiredFields.push(
-			{ value: formState.name, message: "Please input the name" },
-			{ value: formState.organizationId, message: "Please select organization" }
-		)
+	const systemUserLabelMap: Record<string, string> = {
+		"0": "visitor",
+		"1": "yearly",
+		"2": "monthly",
+		"3": "trial",
+		"4": "userInEvent",
+		"7": "Edu Admin"
 	}
 
-	for (const field of requiredFields) {
-		const isEmpty = field.checkNull
-			? field.value === null || field.value === undefined
-			: !field.value
-		if (isEmpty) {
-			message.warning(field.message)
-			return false
+	const getSystemUserLabel = (systemUser?: number | string) => {
+		if (systemUser === undefined || systemUser === null) return ""
+		return systemUserLabelMap[String(systemUser)] || String(systemUser)
+	}
+
+	const formatUserTime = (value?: number | string) => {
+		if (!value) return ""
+		if (typeof value === "number") {
+			return formatTime(value / 1000, "YYYY-MM-DD hh:mm:ss")
+		}
+		if (/^\d+$/.test(value)) {
+			return formatTime(Number(value) / 1000, "YYYY-MM-DD hh:mm:ss")
+		}
+		return value
+	}
+
+	const normalizeUserInfoList = (res: any): UserInfoRecord[] => {
+		if (Array.isArray(res)) return res
+		if (Array.isArray(res?.records)) return res.records
+		if (res) return [res]
+		return []
+	}
+
+	const buildUserInfoParams = (id: string | number) => ({
+		endTime: "",
+		startTime: "",
+		size: userInfoPage.size,
+		page: userInfoPage.current,
+		systemUser: "",
+		country: "",
+		email: "",
+		userType: "",
+		ids: [],
+		occupation: "",
+		order: "",
+		orderBy: "",
+		userName: "",
+		subscriptionPlanId: id
+	})
+
+	const fetchUserInfo = async () => {
+		if (currentUserInfoPlanId.value === null) return
+		userInfoLoading.value = true
+		userInfoList.value = []
+
+		try {
+			const res = await Https.axiosPost(
+				Https.httpUrls.getUserInfo,
+				buildUserInfoParams(currentUserInfoPlanId.value)
+			)
+			const records = normalizeUserInfoList(res)
+			userInfoList.value = records
+			userInfoPage.total = Number(res?.total ?? records.length)
+		} catch (error: any) {
+			message.error(error.message || "Failed to load user info")
+			console.error(error)
+		} finally {
+			userInfoLoading.value = false
 		}
 	}
 
-	return true
-}
+	const openUserInfo = async (record: SubscriptionPlan) => {
+		console.log(record)
+		// debugger
 
-const handleSubmit = async () => {
-	if (!validateForm()) return
-	confirmLoading.value = true
-	const params = {
-		...formState,
-		currentPeriodStart: Number(formState.currentPeriodStart),
-		currentPeriodEnd: Number(formState.currentPeriodEnd)
+		currentUserInfoPlanId.value = record.id
+		userInfoPage.current = 1
+		userInfoModalVisible.value = true
+		await fetchUserInfo()
 	}
-	let res = null
-	try {
-		if (isEditMode.value) {
-			res = await Https.axiosPost(Https.httpUrls.updateSubscribePlan, params)
-		} else {
-			res = await Https.axiosPost(Https.httpUrls.createSubscribePlan, params)
+
+	const changeUserInfoPage = (pagination: any) => {
+		userInfoPage.current = pagination.current
+		userInfoPage.size = pagination.pageSize
+		fetchUserInfo()
+	}
+
+	const customPlanRow = (record: SubscriptionPlan) => {
+		return {
+			onClick: (event: MouseEvent) => {
+				const target = event.target as HTMLElement | null
+				if (target?.closest(".plan-row-actions")) return
+				openUserInfo(record)
+			}
 		}
-		message.success(
-			`${isEditMode.value ? "Subscription plan updated" : "Subscription plan created"}`
+	}
+
+	const historyTable = ref<HTMLElement | null>(null)
+	const historyTableHeight = ref(0)
+	const minTableBodyHeight = 120
+	let tableResizeObserver: ResizeObserver | null = null
+	let tableResizeTimer: ReturnType<typeof window.setTimeout> | null = null
+
+	const handleResizeColumn = (w: any, col: any) => {
+		col.width = w
+	}
+
+	const getElementOuterHeight = (element: Element | null) => {
+		if (!element) return 0
+		const htmlElement = element as HTMLElement
+		const style = window.getComputedStyle(htmlElement)
+		return (
+			htmlElement.offsetHeight +
+			Number.parseFloat(style.marginTop || "0") +
+			Number.parseFloat(style.marginBottom || "0")
 		)
-	} catch (error: any) {
-		message.error(error.message)
-		console.error(error)
-	} finally {
-		confirmLoading.value = false
+	}
+
+	const calculateTableHeight = () => {
+		if (tableResizeTimer) {
+			window.clearTimeout(tableResizeTimer)
+		}
+		tableResizeTimer = window.setTimeout(() => {
+			nextTick(() => {
+				const tableWrapper = historyTable.value
+				if (!tableWrapper) {
+					tableResizeTimer = null
+					return
+				}
+
+				const tableHead = tableWrapper.querySelector(".ant-table-thead") ?? null
+				const pagination = tableWrapper.querySelector(".ant-pagination") ?? null
+				const tableHeadHeight = getElementOuterHeight(tableHead) || 55
+				const paginationHeight = getElementOuterHeight(pagination) || 48
+				const reservedHeight = tableHeadHeight + paginationHeight + 8
+
+				historyTableHeight.value = Math.max(
+					minTableBodyHeight,
+					tableWrapper.clientHeight - reservedHeight
+				)
+				tableResizeTimer = null
+			})
+		}, 50)
+	}
+
+	const handleResize = () => {
+		calculateTableHeight()
+	}
+
+	const setupTableResizeObserver = () => {
+		if (!historyTable.value || typeof ResizeObserver === "undefined") return
+		tableResizeObserver?.disconnect()
+		tableResizeObserver = new ResizeObserver(() => {
+			calculateTableHeight()
+		})
+		tableResizeObserver.observe(historyTable.value)
+
+		const searchCard = historyTable.value
+			.closest(".subscription-plan")
+			?.querySelector(".search-card")
+		if (searchCard) {
+			tableResizeObserver.observe(searchCard)
+		}
+	}
+
+	onMounted(async () => {
+		await getOrganizationList()
+		await handleSearch()
+		calculateTableHeight()
+		setupTableResizeObserver()
+		window.addEventListener("resize", handleResize)
+		const list = sessionStorage.getItem("allCountry")
+		countryList.value = list ? JSON.parse(list) : []
+	})
+
+	onActivated(() => {
+		calculateTableHeight()
+	})
+
+	onBeforeUnmount(() => {
+		window.removeEventListener("resize", handleResize)
+		tableResizeObserver?.disconnect()
+		if (tableResizeTimer) {
+			window.clearTimeout(tableResizeTimer)
+			tableResizeTimer = null
+		}
+	})
+
+	const handleFetchTableData = async () => {
+		tableLoading.value = true
+		return Https.axiosPost(Https.httpUrls.searchAllSubscribePlan, searchForm)
+			.then((res) => {
+				tableData.value = res.records
+				searchForm.total = res.total
+			})
+			.finally(() => {
+				tableLoading.value = false
+				calculateTableHeight()
+			})
+	}
+
+	const resetFormState = () => {
+		formState.name = ""
+		formState.currentPeriodStart = ""
+		formState.currentPeriodEnd = ""
+		formState.organizationId = undefined
+		formState.adminAccId = undefined
+		formState.creditLimit = null
+		formState.accountNum = null
+		formState.status = undefined
+		formState.countryOrRegion = null
+	}
+
+	const changePage = (pagination: any) => {
+		searchForm.page = pagination.current
+		searchForm.size = pagination.pageSize
+		handleFetchTableData()
+	}
+
+	const handleSearch = () => {
+		searchForm.page = 1
+		handleFetchTableData()
+	}
+
+	const handleReset = () => {
+		searchForm.name = ""
+		searchForm.startTime = ""
+		searchForm.endTime = ""
+		searchForm.organizationId = undefined
+		searchForm.adminAccId = undefined
+		searchForm.status = []
+		searchForm.id = ""
+		searchForm.countryOrRegion = null
+		handleSearch()
+	}
+
+	const openCreate = () => {
+		modalTitle.value = "New Subscription Plan"
+		isEditMode.value = false
+		resetFormState()
+		modalVisible.value = true
+	}
+
+	const openEdit = (record: SubscriptionPlan) => {
+		modalTitle.value = "Edit Subscription Plan"
+		isEditMode.value = true
+		formState.name = record.name
+		formState.currentPeriodStart = String(record.currentPeriodStart)
+		formState.currentPeriodEnd = String(record.currentPeriodEnd)
+		formState.organizationId = record.organizationId
+		formState.adminAccId = record.adminAccId
+		formState.creditLimit = record.creditLimit
+		formState.accountNum = (record as any).accountNum || null
+		formState.status = record.status
+		formState.id = record.id
+		formState.countryOrRegion = (record as any).countryOrRegion || null
+
+		// 检查组织ID是否在已加载的组织列表中，如果不在，则添加临时项
+		if (record.organizationId) {
+			const orgExists = organizationOptions.value.some(
+				(org: any) =>
+					org.id === record.organizationId ||
+					String(org.id) === String(record.organizationId)
+			)
+			if (!orgExists) {
+				const orgName = (record as any).organizationName
+				if (orgName) {
+					organizationOptions.value = [
+						{
+							id: record.organizationId,
+							name: orgName
+						},
+						...organizationOptions.value
+					]
+				}
+			}
+		}
+		modalVisible.value = true
+		if (record.adminAccId) {
+			nextTick(() => {
+				userRef.value.patchList({
+					label: record.name,
+					value: record.adminAccId,
+					email: record.adminAccEmail
+				})
+			})
+		}
+	}
+
+	const validateForm = (): boolean => {
+		interface FieldRule {
+			value: any
+			message: string
+			checkNull?: boolean
+		}
+
+		const requiredFields: FieldRule[] = [
+			{ value: formState.currentPeriodStart, message: "Please select the start time" },
+			{ value: formState.currentPeriodEnd, message: "Please select the end time" },
+			{ value: formState.adminAccId, message: "Please select the admin account" },
+			{
+				value: formState.creditLimit,
+				message: "Please input credit limit",
+				checkNull: true
+			},
+			{
+				value: formState.accountNum,
+				message: "Please input account number",
+				checkNull: true
+			}
+		]
+
+		if (!isEditMode.value) {
+			requiredFields.push(
+				{ value: formState.name, message: "Please input the name" },
+				{ value: formState.organizationId, message: "Please select organization" }
+			)
+		}
+
+		for (const field of requiredFields) {
+			const isEmpty = field.checkNull
+				? field.value === null || field.value === undefined
+				: !field.value
+			if (isEmpty) {
+				message.warning(field.message)
+				return false
+			}
+		}
+
+		return true
+	}
+
+	const handleSubmit = async () => {
+		if (!validateForm()) return
+		confirmLoading.value = true
+		const params = {
+			...formState,
+			currentPeriodStart: Number(formState.currentPeriodStart),
+			currentPeriodEnd: Number(formState.currentPeriodEnd)
+		}
+		let res = null
+		try {
+			if (isEditMode.value) {
+				res = await Https.axiosPost(Https.httpUrls.updateSubscribePlan, params)
+			} else {
+				res = await Https.axiosPost(Https.httpUrls.createSubscribePlan, params)
+			}
+			message.success(
+				`${isEditMode.value ? "Subscription plan updated" : "Subscription plan created"}`
+			)
+		} catch (error: any) {
+			message.error(error.message)
+			console.error(error)
+		} finally {
+			confirmLoading.value = false
+			modalVisible.value = false
+			resetFormState()
+			isEditMode.value = false
+			handleSearch()
+		}
+	}
+
+	// 防抖包装，避免重复点击
+	const handleSubmitDebounced = debounce(handleSubmit, 500, {
+		leading: true,
+		trailing: false
+	})
+
+	const cancelModal = () => {
 		modalVisible.value = false
 		resetFormState()
 		isEditMode.value = false
-		handleSearch()
 	}
-}
 
-// 防抖包装，避免重复点击
-const handleSubmitDebounced = debounce(handleSubmit, 500, {
-	leading: true,
-	trailing: false
-})
-
-const cancelModal = () => {
-	modalVisible.value = false
-	resetFormState()
-	isEditMode.value = false
-}
-
-const removePlan = (id: number) => {
-	tableLoading.value = true
-	Https.axiosGet(Https.httpUrls.deleteSubscribePlan, { params: { id } })
-		.then((res) => {
-			message.success("Subscription plan deleted")
-			handleReset()
-		})
-		.catch((error: any) => {
-			message.error(error.message)
-			console.error(error)
-		})
-		.finally(() => {
-			tableLoading.value = false
-		})
-}
-
-const organizationOptions = ref([])
-const organizationParams = reactive({
-	page: 1,
-	size: 10,
-	total: 0
-})
-const organizationLoading = ref(false)
-const getOrganizationList = async (isLoadMore = false) => {
-	if (organizationLoading.value) return
-	if (isLoadMore) {
-		const loaded = organizationParams.page * organizationParams.size
-		if (organizationParams.total && loaded >= organizationParams.total) return
-		organizationParams.page += 1
-	} else {
-		organizationParams.page = 1
-		organizationOptions.value = []
+	const removePlan = (id: number) => {
+		tableLoading.value = true
+		Https.axiosGet(Https.httpUrls.deleteSubscribePlan, { params: { id } })
+			.then((res) => {
+				message.success("Subscription plan deleted")
+				handleReset()
+			})
+			.catch((error: any) => {
+				message.error(error.message)
+				console.error(error)
+			})
+			.finally(() => {
+				tableLoading.value = false
+			})
 	}
-	organizationLoading.value = true
-	try {
-		const { total, ...requestParams } = organizationParams
-		const rv: any = await Https.axiosPost(Https.httpUrls.queryOrganization, requestParams)
-		if (rv) {
-			const newRecords = rv.records || []
-			// 遍历新数据，如果已存在则覆盖，不存在则追加
-			newRecords.forEach((newOrg: any) => {
-				const newOrgId = String(newOrg.id)
-				const existingIndex = organizationOptions.value.findIndex(
-					(org: any) => String(org.id) === newOrgId
-				)
-				if (existingIndex !== -1) {
-					// 如果已存在，用新数据覆盖旧项
-					organizationOptions.value[existingIndex] = newOrg
-				} else {
-					// 如果不存在，追加到末尾
-					organizationOptions.value.push(newOrg)
+
+	const organizationOptions = ref([])
+	const organizationParams = reactive({
+		page: 1,
+		size: 10,
+		total: 0
+	})
+	const organizationLoading = ref(false)
+	const getOrganizationList = async (isLoadMore = false) => {
+		if (organizationLoading.value) return
+		if (isLoadMore) {
+			const loaded = organizationParams.page * organizationParams.size
+			if (organizationParams.total && loaded >= organizationParams.total) return
+			organizationParams.page += 1
+		} else {
+			organizationParams.page = 1
+			organizationOptions.value = []
+		}
+		organizationLoading.value = true
+		try {
+			const { total, ...requestParams } = organizationParams
+			const rv: any = await Https.axiosPost(Https.httpUrls.queryOrganization, requestParams)
+			if (rv) {
+				const newRecords = rv.records || []
+				// 遍历新数据，如果已存在则覆盖，不存在则追加
+				newRecords.forEach((newOrg: any) => {
+					const newOrgId = String(newOrg.id)
+					const existingIndex = organizationOptions.value.findIndex(
+						(org: any) => String(org.id) === newOrgId
+					)
+					if (existingIndex !== -1) {
+						// 如果已存在，用新数据覆盖旧项
+						organizationOptions.value[existingIndex] = newOrg
+					} else {
+						// 如果不存在，追加到末尾
+						organizationOptions.value.push(newOrg)
+					}
+				})
+				organizationParams.total = rv.total || 0
+			}
+		} finally {
+			organizationLoading.value = false
+		}
+	}
+	const handleOrganizationScroll = (e: any) => {
+		const target = e?.target
+		if (!target) return
+		const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 20
+		if (nearBottom) {
+			getOrganizationList(true)
+		}
+	}
+
+	const handleOrganizationSelect = (value: string) => {
+		if (value === "ADD_ORGANIZATION") {
+			// 打开添加组织弹窗
+			organizationModalVisible.value = true
+			// 使用nextTick确保值被重置，使其不被选中
+			nextTick(() => {
+				if (searchForm.organizationId === "ADD_ORGANIZATION") {
+					searchForm.organizationId = undefined
+				}
+				if (formState.organizationId === "ADD_ORGANIZATION") {
+					formState.organizationId = undefined
 				}
 			})
-			organizationParams.total = rv.total || 0
 		}
-	} finally {
-		organizationLoading.value = false
 	}
-}
-const handleOrganizationScroll = (e: any) => {
-	const target = e?.target
-	if (!target) return
-	const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 20
-	if (nearBottom) {
-		getOrganizationList(true)
-	}
-}
 
-const handleOrganizationSelect = (value: string) => {
-	if (value === "ADD_ORGANIZATION") {
-		// 打开添加组织弹窗
-		organizationModalVisible.value = true
-		// 使用nextTick确保值被重置，使其不被选中
-		nextTick(() => {
-			if (searchForm.organizationId === "ADD_ORGANIZATION") {
-				searchForm.organizationId = undefined
-			}
-			if (formState.organizationId === "ADD_ORGANIZATION") {
-				formState.organizationId = undefined
-			}
-		})
-	}
-}
-
-const handleOrganizationChange = (value: string) => {
-	// 如果change事件触发时值是"添加组织"，立即重置
-	if (value === "ADD_ORGANIZATION") {
-		nextTick(() => {
-			if (searchForm.organizationId === "ADD_ORGANIZATION") {
-				searchForm.organizationId = undefined
-			}
-			if (formState.organizationId === "ADD_ORGANIZATION") {
-				formState.organizationId = undefined
-			}
-		})
-	}
-}
-
-const cancelOrganizationModal = () => {
-	organizationModalVisible.value = false
-	organizationForm.name = ""
-	organizationForm.type = undefined
-}
-
-const handleCreateOrganization = async () => {
-	if (!organizationForm.name || !organizationForm.type) {
-		message.warning("Please fill in name and type")
-		return
-	}
-	try {
-		const res: any = await Https.axiosGet(Https.httpUrls.addOrganization, {
-			params: {
-				name: organizationForm.name,
-				type: organizationForm.type
-			}
-		})
-		message.success("Organization created successfully")
-		cancelOrganizationModal()
-		// 刷新组织列表
-		await getOrganizationList()
-		// 如果是在编辑/新建弹窗中，自动选择新创建的组织
-		if (modalVisible.value) {
-			const newOrgId = res?.id || res?.data?.id || res
-			if (newOrgId) {
-				formState.organizationId = String(newOrgId)
-			}
+	const handleOrganizationChange = (value: string) => {
+		// 如果change事件触发时值是"添加组织"，立即重置
+		if (value === "ADD_ORGANIZATION") {
+			nextTick(() => {
+				if (searchForm.organizationId === "ADD_ORGANIZATION") {
+					searchForm.organizationId = undefined
+				}
+				if (formState.organizationId === "ADD_ORGANIZATION") {
+					formState.organizationId = undefined
+				}
+			})
 		}
-	} catch (error: any) {
-		message.error(error.message || "Failed to create organization")
-		console.error(error)
 	}
-}
 
-const filterOption = (input: string, option: any) => {
-	const label = option?.label ?? option?.children ?? option?.key?.label ?? ""
-	return String(label).toLowerCase().includes(input.toLowerCase())
-}
+	const cancelOrganizationModal = () => {
+		organizationModalVisible.value = false
+		organizationForm.name = ""
+		organizationForm.type = undefined
+	}
+
+	const handleCreateOrganization = async () => {
+		if (!organizationForm.name || !organizationForm.type) {
+			message.warning("Please fill in name and type")
+			return
+		}
+		try {
+			const res: any = await Https.axiosGet(Https.httpUrls.addOrganization, {
+				params: {
+					name: organizationForm.name,
+					type: organizationForm.type
+				}
+			})
+			message.success("Organization created successfully")
+			cancelOrganizationModal()
+			// 刷新组织列表
+			await getOrganizationList()
+			// 如果是在编辑/新建弹窗中，自动选择新创建的组织
+			if (modalVisible.value) {
+				const newOrgId = res?.id || res?.data?.id || res
+				if (newOrgId) {
+					formState.organizationId = String(newOrgId)
+				}
+			}
+		} catch (error: any) {
+			message.error(error.message || "Failed to create organization")
+			console.error(error)
+		}
+	}
+
+	const filterOption = (input: string, option: any) => {
+		const label = option?.label ?? option?.children ?? option?.key?.label ?? ""
+		return String(label).toLowerCase().includes(input.toLowerCase())
+	}
 </script>
 
 <style lang="less" scoped>
-.subscription-plan {
-	padding: 2rem 2.4rem 3.2rem 0;
-	display: flex;
-	height: 100%;
-	min-height: 0;
-	flex-direction: column;
-
-	.search-card {
-		margin-bottom: 1.6rem;
-		flex-shrink: 0;
-	}
-
-	.table-card {
-		flex: 1;
+	.subscription-plan {
+		padding: 2rem 2.4rem 0 0;
 		display: flex;
-		flex-direction: column;
-		overflow: hidden;
+		height: 100%;
 		min-height: 0;
+		flex-direction: column;
 
-		:deep(.ant-card-body) {
+		.search-card {
+			margin-bottom: 1.6rem;
+			flex-shrink: 0;
+		}
+
+		.table-card {
 			flex: 1;
 			display: flex;
 			flex-direction: column;
 			overflow: hidden;
-			padding: 2.4rem;
-			min-height: 0;
-		}
-
-		.table-card__header {
-			display: flex;
-			justify-content: flex-end;
-			margin-bottom: 2.6rem;
-			flex-shrink: 0;
-		}
-
-		.table-wrapper {
-			flex: 1;
-			overflow: hidden;
 			min-height: 0;
 
-			:deep(.ant-table-wrapper),
-			:deep(.ant-spin-nested-loading),
-			:deep(.ant-spin-container) {
-				height: 100%;
-			}
-
-			:deep(.ant-spin-container) {
-				display: flex;
-				flex-direction: column;
-				overflow: hidden;
-			}
-
-			:deep(.ant-table) {
+			:deep(.ant-card-body) {
 				flex: 1;
-				min-height: 0;
-				overflow: hidden;
-			}
-
-			:deep(.ant-table-container) {
-				height: 100%;
 				display: flex;
 				flex-direction: column;
+				overflow: hidden;
+				padding: 2.4rem 2.4rem 0;
+				min-height: 0;
 			}
 
-			:deep(.ant-table-content) {
-				height: 100%;
-			}
-
-			:deep(.ant-table-body) {
-				overflow-y: auto !important;
-			}
-
-			:deep(.ant-pagination) {
+			.table-card__header {
+				display: flex;
+				justify-content: flex-end;
+				margin-bottom: 2.6rem;
 				flex-shrink: 0;
 			}
-		}
 
-		.danger-text {
-			color: #ff4d4f;
-		}
-		:deep(.ant-table-cell::before) {
-			display: none;
-		}
+			.table-wrapper {
+				flex: 1;
+				overflow: hidden;
+				min-height: 0;
 
-		:deep(.ant-table-thead > tr > th) {
-			border-bottom: none;
-		}
-		:deep(.ant-table-tbody > tr > td) {
-			border: none;
-		}
+				:deep(.ant-table-wrapper),
+				:deep(.ant-spin-nested-loading),
+				:deep(.ant-spin-container) {
+					height: 100%;
+				}
 
-		:deep(.ant-table-tbody > tr:hover > td) {
-			background: rgb(202, 202, 202);
-		}
+				:deep(.ant-spin-container) {
+					display: flex;
+					flex-direction: column;
+					overflow: hidden;
+				}
 
-		:deep(.ant-table-tbody > tr) {
-			cursor: pointer;
-		}
+				:deep(.ant-table) {
+					flex: 1;
+					min-height: 0;
+					overflow: hidden;
+				}
 
-		:deep(.plan-row-actions) {
-			cursor: default;
+				:deep(.ant-table-container) {
+					height: 100%;
+					display: flex;
+					flex-direction: column;
+				}
+
+				:deep(.ant-table-content) {
+					height: 100%;
+				}
+
+				:deep(.ant-table-body) {
+					overflow-y: auto !important;
+				}
+
+				:deep(.ant-pagination) {
+					flex-shrink: 0;
+				}
+			}
+
+			.danger-text {
+				color: #ff4d4f;
+			}
+			:deep(.ant-table-cell::before) {
+				display: none;
+			}
+
+			:deep(.ant-table-thead > tr > th) {
+				border-bottom: none;
+			}
+			:deep(.ant-table-tbody > tr > td) {
+				border: none;
+			}
+
+			:deep(.ant-table-tbody > tr:hover > td) {
+				background: rgb(202, 202, 202);
+			}
+
+			:deep(.ant-table-tbody > tr) {
+				cursor: pointer;
+			}
+
+			:deep(.plan-row-actions) {
+				cursor: default;
+			}
 		}
 	}
-}
 
-.user-info-modal {
-	:deep(.ant-modal-body) {
-		padding: 2.4rem;
-	}
-}
-
-:deep(.subscriptionPlan_modal) {
-	.ant-modal-body {
-		// height: calc(65rem * 1.2);
-		display: flex;
-		flex-direction: column;
-		padding: 2.5rem 3rem;
-		position: relative;
-	}
-}
-
-.subscriptionPlan_modal {
-	.form_content {
-		width: 100%;
-		display: flex;
-		flex-wrap: wrap;
-		row-gap: 2rem;
-	}
-	.admin_state_item {
-		> span {
-			width: 17rem !important;
+	.user-info-modal {
+		:deep(.ant-modal-body) {
+			padding: 2.4rem;
 		}
 	}
-	.modal_title_text {
-		margin-bottom: 2rem;
-		flex-shrink: 0;
+
+	:deep(.subscriptionPlan_modal) {
+		.ant-modal-body {
+			// height: calc(65rem * 1.2);
+			display: flex;
+			flex-direction: column;
+			padding: 2.5rem 3rem;
+			position: relative;
+		}
 	}
-	.subscriptionPlan_center {
-		flex: 1;
-		overflow-y: auto;
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		align-items: center;
-		justify-content: center;
-		padding: 2rem 0;
+
+	.subscriptionPlan_modal {
+		.form_content {
+			width: 100%;
+			display: flex;
+			flex-wrap: wrap;
+			row-gap: 2rem;
+		}
+		.admin_state_item {
+			> span {
+				width: 17rem !important;
+			}
+		}
+		.modal_title_text {
+			margin-bottom: 2rem;
+			flex-shrink: 0;
+		}
+		.subscriptionPlan_center {
+			flex: 1;
+			overflow-y: auto;
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			align-items: center;
+			justify-content: center;
+			padding: 2rem 0;
+		}
+		.subscriptionPlan_btn {
+			display: flex;
+			flex-direction: row;
+			height: auto;
+			justify-content: flex-end;
+			padding: 1.5rem 0 0 0;
+			margin-top: auto;
+			flex-shrink: 0;
+			.admin_search_item {
+				margin-bottom: 0;
+			}
+		}
 	}
-	.subscriptionPlan_btn {
-		display: flex;
-		flex-direction: row;
-		height: auto;
-		justify-content: flex-end;
-		padding: 1.5rem 0 0 0;
-		margin-top: auto;
-		flex-shrink: 0;
-		.admin_search_item {
+
+	:deep(.search-form) {
+		--search-label-width: 14rem;
+		--search-control-width: 20rem;
+		align-items: flex-start;
+		column-gap: 1.8rem;
+		row-gap: 1.8rem;
+
+		.ant-form-item {
+			min-width: calc(var(--search-label-width) + var(--search-control-width));
+			margin-right: 0;
 			margin-bottom: 0;
 		}
-	}
-}
 
-:deep(.search-form) {
-	--search-label-width: 14rem;
-	--search-control-width: 20rem;
-	align-items: flex-start;
-	column-gap: 1.8rem;
-	row-gap: 1.8rem;
-
-	.ant-form-item {
-		min-width: calc(var(--search-label-width) + var(--search-control-width));
-		margin-right: 0;
-		margin-bottom: 0;
-	}
-
-	.ant-form-item-label {
-		flex: 0 0 var(--search-label-width);
-		max-width: var(--search-label-width);
-		overflow: visible;
-		white-space: nowrap;
-
-		> label {
+		.ant-form-item-label {
+			flex: 0 0 var(--search-label-width);
+			max-width: var(--search-label-width);
+			overflow: visible;
 			white-space: nowrap;
+
+			> label {
+				white-space: nowrap;
+			}
+		}
+
+		.ant-form-item-control {
+			flex: 0 0 var(--search-control-width);
+			max-width: var(--search-control-width);
+		}
+
+		.ant-input,
+		.ant-input-affix-wrapper,
+		.ant-picker,
+		.ant-select {
+			width: 100% !important;
+		}
+
+		.search-form__actions {
+			min-width: auto;
+
+			.ant-form-item-control {
+				flex: 0 0 auto;
+				max-width: none;
+			}
 		}
 	}
 
-	.ant-form-item-control {
-		flex: 0 0 var(--search-control-width);
-		max-width: var(--search-control-width);
+	@media (min-width: 1600px) {
+		:deep(.search-form) {
+			--search-control-width: 22rem;
+		}
 	}
 
-	.ant-input,
-	.ant-input-affix-wrapper,
-	.ant-picker,
-	.ant-select {
-		width: 100% !important;
+	@media (max-width: 760px) {
+		:deep(.search-form) {
+			.ant-form-item {
+				flex: 1 1 100%;
+				min-width: 100%;
+			}
+
+			.ant-form-item-control {
+				flex: 1 1 auto;
+				max-width: calc(100% - var(--search-label-width));
+			}
+		}
 	}
 
-	.search-form__actions {
-		min-width: auto;
+	:deep(.ant-select-dropdown) {
+		.add-organization-option {
+			color: #1890ff !important;
+			font-weight: 600;
+			background-color: #f0f7ff !important;
+			border-bottom: 1px solid #e6f4ff;
+			margin-bottom: 4px;
+			padding-bottom: 4px;
 
-		.ant-form-item-control {
+			&:hover {
+				background-color: #e6f4ff !important;
+			}
+		}
+	}
+
+	:deep(.organization_modal) {
+		.ant-modal-body {
+			height: auto;
+			min-height: 300px;
+			display: flex;
+			flex-direction: column;
+			padding: 2rem 2.5rem;
+			position: relative;
+		}
+
+		.subscriptionPlan_center {
 			flex: 0 0 auto;
-			max-width: none;
-		}
-	}
-}
-
-@media (min-width: 1600px) {
-	:deep(.search-form) {
-		--search-control-width: 22rem;
-	}
-}
-
-@media (max-width: 760px) {
-	:deep(.search-form) {
-		.ant-form-item {
-			flex: 1 1 100%;
-			min-width: 100%;
+			overflow: visible;
+			padding: 1rem 0;
+			min-height: auto;
 		}
 
-		.ant-form-item-control {
-			flex: 1 1 auto;
-			max-width: calc(100% - var(--search-label-width));
+		.modal_title_text {
+			margin-bottom: 1.5rem;
 		}
 	}
-}
-
-:deep(.ant-select-dropdown) {
-	.add-organization-option {
-		color: #1890ff !important;
-		font-weight: 600;
-		background-color: #f0f7ff !important;
-		border-bottom: 1px solid #e6f4ff;
-		margin-bottom: 4px;
-		padding-bottom: 4px;
-
-		&:hover {
-			background-color: #e6f4ff !important;
-		}
-	}
-}
-
-:deep(.organization_modal) {
-	.ant-modal-body {
-		height: auto;
-		min-height: 300px;
+	.organization_footer {
 		display: flex;
-		flex-direction: column;
-		padding: 2rem 2.5rem;
-		position: relative;
+		justify-content: flex-end;
+		column-gap: 3rem;
+		.footer_btn {
+			border-radius: 3.3rem;
+		}
 	}
-
-	.subscriptionPlan_center {
-		flex: 0 0 auto;
-		overflow: visible;
-		padding: 1rem 0;
-		min-height: auto;
-	}
-
-	.modal_title_text {
-		margin-bottom: 1.5rem;
-	}
-}
-.organization_footer {
-	display: flex;
-	justify-content: flex-end;
-	column-gap: 3rem;
-	.footer_btn {
-		border-radius: 3.3rem;
-	}
-}
 </style>