aida_front/src/component/Administrator/subscriptionPlan.vue

<template>
  <div class="subscription-plan">
    <a-card class="search-card" :bordered="false">
      <a-form
        class="search-form"
        layout="inline"
        :model="searchForm"
        :label-col="{ style: { width: '12rem' } }"
        :wrapper-col="{ style: { width: '22rem' } }"
      >
        <a-form-item label="ID">
          <a-input v-model:value="searchForm.id" allow-clear placeholder="Input the id" />
        </a-form-item>
        <a-form-item label="Name">
          <a-input
            v-model:value="searchForm.name"
            allow-clear
            placeholder="Input the name"
          />
        </a-form-item>
        <a-form-item label="Time Range">
          <a-range-picker
            v-model:value="searchForm.dateRange"
            value-format="X"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="Organization">
          <a-select
            v-model:value="searchForm.organizationId"
            allow-clear
            placeholder="Select Organization"
            style="width: 180px"
            @popupScroll="handleOrganizationScroll"
            @select="handleOrganizationSelect"
            @change="handleOrganizationChange"
          >
            <a-select-option value="ADD_ORGANIZATION" class="add-organization-option">
              + Create Organization
            </a-select-option>
            <a-select-option
              v-for="item in organizationOptions"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="Admin Account">
          <a-select
            v-model:value="searchForm.adminAccId"
            allow-clear
            show-search
            :filter-option="filterOption"
            placeholder="Select Account"
            style="width: 180px"
            :options="allUserList"
          ></a-select>
        </a-form-item>
        <a-form-item label="Status">
          <a-select
            v-model:value="searchForm.status"
            mode="multiple"
            allow-clear
            placeholder="Select Status"
            style="width: 220px"
            :options="statusOption"
          />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">Search</a-button>
            <a-button @click="handleReset">Reset</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>

    <a-card class="table-card" :bordered="false">
      <div class="table-card__header">
        <a-button type="primary" @click="openCreate">New Subscription Plan</a-button>
      </div>
      <div ref="historyTable" class="table-wrapper">
        <a-table
          :data-source="tableData"
          :columns="columns"
          :loading="tableLoading"
          :bordered="false"
          row-key="id"
          @change="changePage"
          @resizeColumn="handleResizeColumn"
          :scroll="{ y: historyTableHeight }"
          :pagination="{
            showSizeChanger: true,
            current: searchForm.page,
            pageSize: searchForm.size,
            total: searchForm.total,
            showQuickJumper: true,
            bordered: false
          }"
        >
          <template #bodyCell="{ column, record }">
            <template
              v-if="
                column.key === 'currentPeriodStart' || column.key === 'currentPeriodEnd'
              "
            >
              {{ formatTime(record[column.key], 'YYYY-MM-DD hh:mm:ss') }}
            </template>

            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ record.status }}
              </a-tag>
            </template>
            <template v-if="column.key === 'adminAccId'">
              {{ allUserList.find(item => item.value === record.adminAccId)?.label }}
            </template>

            <template v-else-if="column.key === 'actions'">
              <a-space>
                <a @click="openEdit(record)">Edit</a>
                <a-popconfirm
                  title="Confirm to delete this subscription plan?"
                  ok-text="Confirm"
                  cancel-text="Cancel"
                  @confirm="removePlan(record.id)"
                >
                  <a class="danger-text">Delete</a>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </div>
    </a-card>

    <div class="subscriptionPlanModal" ref="subscriptionPlanModal"></div>
    <a-modal
      class="subscriptionPlan_modal generalModel"
      v-model:visible="modalVisible"
      :footer="null"
      :get-container="() => $refs.subscriptionPlanModal"
      width="50%"
      :maskClosable="false"
      :centered="true"
      :closable="false"
      :mask="true"
      wrapClassName="#app"
      :keyboard="false"
      destroy-on-close
    >
      <div class="generalModel_btn">
        <div class="generalModel_closeIcon" @click.stop="cancelModal">
          <svg
            width="100%"
            height="100%"
            viewBox="0 0 46 46"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3" />
            <rect
              x="32.5063"
              y="12"
              width="3"
              height="29"
              rx="1.5"
              transform="rotate(45 32.5063 12)"
              fill="white"
            />
            <rect
              x="34.6274"
              y="32.5059"
              width="3"
              height="29"
              rx="1.5"
              transform="rotate(135 34.6274 32.5059)"
              fill="white"
            />
          </svg>
        </div>
      </div>
      <div class="modal_title_text">
        <div>{{ modalTitle }}</div>
      </div>
      <div class="subscriptionPlan_center admin_page">
        <div class="form_content">
          <div class="admin_state_item" v-if="!isEditMode">
            <span>
              Name:
              <span>*</span>
            </span>
            <a-input
              v-model:value="formState.name"
              placeholder="Input the name"
              style="width: 250px"
            />
          </div>
          <div class="admin_state_item">
            <span>
              Organization:
              <span>*</span>
            </span>
            <a-select
              v-model:value="formState.organizationId"
              placeholder="Select the organization"
              allow-clear
              style="width: 250px"
              @popupScroll="handleOrganizationScroll"
              @select="handleOrganizationSelect"
              @change="handleOrganizationChange"
            >
              <a-select-option value="ADD_ORGANIZATION" class="add-organization-option">
                + Create Organization
              </a-select-option>
              <a-select-option
                v-for="item in organizationOptions"
                :key="item.id"
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </div>
          <div class="admin_state_item">
            <span>
              Admin Account:
              <span>*</span>
            </span>
            <a-select
              v-model:value="formState.adminAccId"
              placeholder="Select the admin account"
              allow-clear
              show-search
              :filter-option="filterOption"
              style="width: 250px"
              :options="allUserList"
            ></a-select>
          </div>
          <div class="admin_state_item">
            <span>
              Start Time:
              <span>*</span>
            </span>
            <a-date-picker
              v-model:value="formState.currentPeriodStart"
              value-format="X"
              style="width: 250px"
              :disabledDate="disabledDate"
              class="range_picker"
              placeholder="Select the start time"
            >
              <template #suffixIcon>
                <span class="icon iconfont range_picker_icon icon-rili"></span>
              </template>
            </a-date-picker>
          </div>
          <div class="admin_state_item">
            <span>
              End Time:
              <span>*</span>
            </span>
            <a-date-picker
              v-model:value="formState.currentPeriodEnd"
              value-format="X"
              style="width: 250px"
              class="range_picker"
              placeholder="Select the end time"
            >
              <template #suffixIcon>
                <span class="icon iconfont range_picker_icon icon-rili"></span>
              </template>
            </a-date-picker>
          </div>
          <div class="admin_state_item">
            <span>
              Account Num:
              <span>*</span>
            </span>
            <a-input-number
              v-model:value="formState.accountNum"
              :min="0"
              style="width: 250px"
              placeholder="Input the account number"
            />
          </div>
          <div class="admin_state_item">
            <span>
              Credit Limit:
              <span>*</span>
            </span>
            <a-input-number
              v-model:value="formState.creditLimit"
              :min="0"
              style="width: 250px"
              placeholder="Input the credit limit"
            />
          </div>
          <div class="admin_state_item" v-if="!isEditMode">
            <span>Status:</span>
            <a-select
              v-model:value="formState.status"
              placeholder="Select status"
              allow-clear
              style="width: 250px"
              :options="statusOption"
            />
          </div>
        </div>
      </div>
      <div class="subscriptionPlan_btn admin_page">
        <div class="admin_search_item" @click="cancelModal">Close</div>
        <div class="admin_search_item" @click="handleSubmitDebounced">OK</div>
      </div>
    </a-modal>

    <div class="organizationModal" ref="organizationModal"></div>
    <a-modal
      class="organization_modal"
      v-model:visible="organizationModalVisible"
      :footer="null"
      :get-container="() => $refs.organizationModal"
      :maskClosable="false"
      :centered="true"
      :mask="true"
      wrapClassName="#app"
      :keyboard="false"
      destroy-on-close
    >
      <div class="modal_title_text">
        <div>Create Organization</div>
      </div>
      <div class="subscriptionPlan_center admin_page">
        <div class="form_content">
          <div class="admin_state_item">
            <span>
              Name:
              <span>*</span>
            </span>
            <a-input
              v-model:value="organizationForm.name"
              placeholder="Input the name"
              style="width: 250px"
            />
          </div>
          <div class="admin_state_item">
            <span>
              Type:
              <span>*</span>
            </span>
            <a-select
              v-model:value="organizationForm.type"
              placeholder="Select type"
              style="width: 250px"
            >
              <a-select-option value="Enterprise">Enterprise</a-select-option>
              <a-select-option value="Education">Education</a-select-option>
            </a-select>
          </div>
        </div>
      </div>
      <div class="organization_footer">
        <div class="footer_btn ant-btn ant-btn-primary" @click="cancelOrganizationModal">
          Close
        </div>
        <div class="footer_btn ant-btn ant-btn-primary" @click="handleCreateOrganization">
          OK
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {
  reactive,
  ref,
  onMounted,
  onBeforeUnmount,
  computed,
  nextTick,
  useTemplateRef
} from '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
  name: string
  currentPeriodStart: string
  currentPeriodEnd: string
  organizationId: string
  adminAccId: string
  status: PlanStatus
  creditLimit: number
  accountNum?: number
  startStamp: number
  endStamp: number
}

const disabledDate = (current: Dayjs) => {
  return current && current < dayjs().subtract(1, 'days').endOf('day')
}

const searchForm = reactive({
  name: '',
  startTime: '',
  endTime: '',
  organizationId: undefined as string | undefined,
  adminAccId: undefined as string | undefined,
  status: [] as PlanStatus[] | [],
  id: '',
  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 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
})

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'
  }
])

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: 'adminAccId',
    key: 'adminAccId',
    align: 'center',
    width: 180
  },
  {
    title: 'Account Num',
    dataIndex: 'accountNum',
    key: 'accountNum',
    align: 'center',
    width: 120
  },
  {
    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 historyTable = ref()
const historyTableHeight = ref(0)
const handleResizeColumn = (w: any, col: any) => {
  col.width = w
}

const calculateTableHeight = () => {
  nextTick(() => {
    if (historyTable.value) {
      historyTableHeight.value = historyTable.value.clientHeight - 200
    }
  })
}

const handleResize = () => {
  calculateTableHeight()
}

onMounted(async () => {
  await getOrganizationList()
  await handleSearch()
  calculateTableHeight()
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})

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
    })
}

const resetFormState = () => {
  formState.name = ''
  formState.currentPeriodStart = ''
  formState.currentPeriodEnd = ''
  formState.organizationId = undefined
  formState.adminAccId = undefined
  formState.creditLimit = null
  formState.accountNum = null
  formState.status = undefined
}

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 = ''
  handleSearch()
}

const allUserList = computed(() => {
  return store.state.adminPage.allUserList
})
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

  // 检查组织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
}

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
}

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 = []
  }
  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
      }
    })
  }
}

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)
      }
    }
  } 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%;
  flex-direction: column;

  .search-card {
    margin-bottom: 1.6rem;
  }

  .table-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    :deep(.ant-card-body) {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 2.4rem;
    }

    .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;
    }

    .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(.subscriptionPlan_modal) {
  .ant-modal-body {
    // height: calc(65rem * 1.2);
    display: flex;
    flex-direction: column;
    padding: 2.5rem 3rem;
    position: relative;
  }
}

.subscriptionPlan_modal {
  > .admin_state_item {
    > span {
      width: 15rem;
    }
  }
  .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;
    }
  }
}

:deep(.search-form) {
  column-gap: 2rem;
  row-gap: 2rem;
  .ant-select {
    width: 100% !important;
  }
}

: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;
    display: flex;
    flex-direction: column;
    padding: 2rem 2.5rem;
    position: relative;
  }

  .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>