Display used and reserved limits capacity

frontend/app/lib/kyc/limits.dart

@@ -49,6 +49,8 @@ class LimitsPanel extends StatelessWidget {
               ),
               if (data.simulated)
                 Text(l.kycLimitsDemo, style: t.textTheme.bodySmall),
+              const SizedBox(height: 12),
+              Text(l.kycUsageHelp, style: t.textTheme.bodySmall),
               if (data.rows.isEmpty) Text(l.kycLimitsEmpty),
               for (final row in data.rows) ...[
                 const Divider(height: 32),
@@ -67,6 +69,13 @@ class LimitsPanel extends StatelessWidget {
                       row.currentMinor,
                       row.currency,
                     ),
+                    _amount(context, l.kycUsed, row.usedMinor, row.currency),
+                    _amount(
+                      context,
+                      l.kycReserved,
+                      row.reservedMinor,
+                      row.currency,
+                    ),
                     _amount(
                       context,
                       l.kycRemaining,
@@ -82,6 +91,22 @@ class LimitsPanel extends StatelessWidget {
                       ),
                   ],
                 ),
+                const SizedBox(height: 16),
+                LinearProgressIndicator(
+                  key: ValueKey('usage-${row.period.name}'),
+                  value: row.occupiedFraction,
+                  minHeight: 8,
+                  borderRadius: BorderRadius.circular(4),
+                  semanticsLabel:
+                      '${row.period == LimitPeriod.day ? l.kycDay : l.kycMonth}: ${l.kycOccupied}',
+                ),
+                if (row.remainingMinor <= 0) ...[
+                  const SizedBox(height: 8),
+                  Text(
+                    l.kycNoCapacity,
+                    style: TextStyle(color: t.colorScheme.error),
+                  ),
+                ],
               ],
             ],
           ],