Show SMS sent breakdown by type in admin and business settings.

Data rows for total/mass/singular/auth/auto/admin; balance stays a credit data row.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/SmsSettingsSection.tsx

@@ -43,6 +43,14 @@ export function SmsSettingsSection() {
   const isFa = locale === 'fa'
   const { showToast } = useToast()
   const [balance, setBalance] = useState(0)
+  const [sentCount, setSentCount] = useState(0)
+  const [sentByType, setSentByType] = useState({
+    mass: 0,
+    singular: 0,
+    auth: 0,
+    autoCustomer: 0,
+    admin: 0,
+  })
   const [templates, setTemplates] = useState<SmsTemplate[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
@@ -73,6 +81,14 @@ export function SmsSettingsSection() {
       if (signal?.aborted) return
       setTemplates(tpl.items)
       setBalance(creditRes.balance ?? creditRes.credit ?? 0)
+      setSentCount(creditRes.sentCount ?? 0)
+      setSentByType({
+        mass: creditRes.sentByType?.mass ?? 0,
+        singular: creditRes.sentByType?.singular ?? 0,
+        auth: creditRes.sentByType?.auth ?? 0,
+        autoCustomer: creditRes.sentByType?.autoCustomer ?? 0,
+        admin: creditRes.sentByType?.admin ?? 0,
+      })
     } catch (err) {
       if (isAbortError(err)) return
       setError(err instanceof ApiError ? err.message : t('settings.sms.errorLoad'))
@@ -272,6 +288,26 @@ export function SmsSettingsSection() {
         </strong>
       </div>
 
+      <div className={settingsStyles.smsSentStack} role="group" aria-label={t('settings.sms.sentCount')}>
+        {(
+          [
+            ['settings.sms.sentTotal', sentCount],
+            ['settings.sms.sentMass', sentByType.mass],
+            ['settings.sms.sentSingular', sentByType.singular],
+            ['settings.sms.sentAuth', sentByType.auth],
+            ['settings.sms.sentAutoCustomer', sentByType.autoCustomer],
+            ['settings.sms.sentAdmin', sentByType.admin],
+          ] as const
+        ).map(([labelKey, value]) => (
+          <div key={labelKey} className={`${settingsStyles.smsCreditRow} ${settingsStyles.smsSentRow}`}>
+            <span className={settingsStyles.smsCreditLabel}>{t(labelKey)}</span>
+            <strong className={settingsStyles.smsCreditValue}>
+              {loading ? '…' : value.toLocaleString(isFa ? 'fa-IR' : 'en-US')}
+            </strong>
+          </div>
+        ))}
+      </div>
+
       <div className={settingsStyles.smsTemplatesSummary}>
         <div className={settingsStyles.smsTemplatesSummaryText}>
           <h4 className={settingsStyles.smsTemplatesTitle}>{t('settings.sms.templates')}</h4>