feat(subscription): add resource quota management for subscription plans and update related components

assets/admin/pages/SubscriptionPage.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { CreditCardIcon } from '@heroicons/react/24/outline';
+import { CreditCardIcon, CubeIcon } from '@heroicons/react/24/outline';
 import { CheckCircleIcon } from '@heroicons/react/24/solid';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
 import type { SubscriptionPlan, MySubscriptionData, SubscriptionPeriod } from '../types';
 import { usePaymentConfig } from '../hooks/usePaymentConfig';
-import { formatRial, formatNumber, formatDate } from '../lib/utils';
+import { formatRial, formatNumber, formatDate, formatResourceLimit } from '../lib/utils';
 import Modal from '../components/ui/Modal';
 import SettingsLayout from '../components/layout/SettingsLayout';
 import {
@@ -413,8 +413,8 @@ function PlanCard({
             {meta.desc}
           </div>
 
-          {/* Secretaries pill */}
-          <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
+          {/* Secretaries + resources pills — دو سقفِ عددیِ پلن، کنار هم */}
+          <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end', gap: 6, flexWrap: 'wrap' }}>
             <div dir="rtl" style={{
               minWidth: 86, height: 32, borderRadius: 29, background: 'var(--surface-3)',
               color: 'var(--text)', display: 'flex', gap: 6, alignItems: 'center', justifyContent: 'center',
@@ -425,6 +425,16 @@ function PlanCard({
               </span>
               <PlanCardPerson size={18} />
             </div>
+            <div dir="rtl" style={{
+              minWidth: 86, height: 32, borderRadius: 29, background: 'var(--surface-3)',
+              color: 'var(--text)', display: 'flex', gap: 6, alignItems: 'center', justifyContent: 'center',
+              padding: '0 12px',
+            }}>
+              <span style={{ fontSize: 14, fontWeight: 500, whiteSpace: 'nowrap' }}>
+                {formatResourceLimit(plan.max_resources)} منبع
+              </span>
+              <CubeIcon style={{ width: 17 }} />
+            </div>
           </div>
 
           {/* Period toggle */}