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/super-admin/src/pages/BusinessesPage.tsx

@@ -2108,13 +2108,20 @@ export function BusinessesPage() {
           </p>
         </div>
         <div className={styles.field}>
-          <label>Current SMS balance</label>
-          <input
-            value={`${(smsSettingsBusiness?.smsBalance ?? 0).toLocaleString('en-US')} credits`}
-            readOnly
-            disabled
+          <div
+            className={`${styles.dataRow} ${
+              (smsSettingsBusiness?.smsBalance ?? 0) < 400
+                ? styles.dataRowLow
+                : styles.dataRowOk
+            }`}
+            role="status"
             aria-label="Current SMS credit balance"
-          />
+          >
+            <span className={styles.dataRowLabel}>Current SMS balance</span>
+            <strong className={styles.dataRowValue}>
+              {(smsSettingsBusiness?.smsBalance ?? 0).toLocaleString('en-US')} SMS credits
+            </strong>
+          </div>
           <p className={styles.helperText}>
             Prepaid SMS credits. 1 credit = one 64-character segment per recipient (OTP,
             customer SMS, partner SMS). New businesses start with 1,000 credits. Values below
@@ -2156,16 +2163,43 @@ export function BusinessesPage() {
           </p>
         </div>
         <div className={styles.field}>
-          <label>SMS sent</label>
-          <input
-            value={(smsSettingsBusiness?.smsSentCount ?? 0).toLocaleString('en-US')}
-            readOnly
-            disabled
-            aria-label="SMS messages sent"
-          />
+          <div className={styles.dataRowStack} role="group" aria-label="SMS sent by type">
+            <div
+              className={`${styles.dataRow} ${styles.dataRowNeutral}`}
+              role="status"
+            >
+              <span className={styles.dataRowLabel}>SMS sent (total)</span>
+              <strong className={styles.dataRowValue}>
+                {(smsSettingsBusiness?.smsSentCount ?? 0).toLocaleString('en-US')}
+              </strong>
+            </div>
+            {(
+              [
+                ['Mass send', smsSettingsBusiness?.smsSentByType?.mass],
+                ['Singular', smsSettingsBusiness?.smsSentByType?.singular],
+                ['Auth service', smsSettingsBusiness?.smsSentByType?.auth],
+                [
+                  'Auto customer',
+                  smsSettingsBusiness?.smsSentByType?.autoCustomer,
+                ],
+                ['Admin notification', smsSettingsBusiness?.smsSentByType?.admin],
+              ] as const
+            ).map(([label, value]) => (
+              <div
+                key={label}
+                className={`${styles.dataRow} ${styles.dataRowNeutral}`}
+                role="status"
+              >
+                <span className={styles.dataRowLabel}>{label}</span>
+                <strong className={styles.dataRowValue}>
+                  {(value ?? 0).toLocaleString('en-US')}
+                </strong>
+              </div>
+            ))}
+          </div>
           <p className={styles.helperText}>
-            Lifetime messages billed for this business (one per recipient). Updated automatically
-            when SMS is charged or refunded.
+            Lifetime messages billed (one per recipient), split by type. Auto customer and
+            admin notification are reserved for upcoming flows.
           </p>
         </div>
         <div style={{ height: 12 }} />