UsageQuota

usagequota-1779388706119.tsx

'use client';
import { useState } from 'react';

export default function UsageQuota() {
  const quotas = [
    { name: 'API Calls', used: 87420, limit: 100000, unit: 'calls' },
    { name: 'Storage', used: 47.3, limit: 50, unit: 'GB' },
    { name: 'Team Seats', used: 8, limit: 10, unit: 'users' },
    { name: 'Webhooks', used: 12, limit: 25, unit: 'endpoints' },
  ];

  const pct = (q) => Math.round((q.used / q.limit) * 100);
  const getColor = (p) => p >= 90 ? '#ef4444' : p >= 75 ? '#f59e0b' : '#4ade80';
  const getLabel = (p) => p >= 90 ? 'Critical' : p >= 75 ? 'Warning' : 'Healthy';

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '400px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
        <h3 style={{ color: '#F5F5F0', margin: 0, fontSize: '15px', fontWeight: 700 }}>Usage & Quotas</h3>
        <a href="#" style={{ color: '#C9A84C', fontSize: '13px', textDecoration: 'none' }}>Upgrade Plan</a>
      </div>
      {quotas.map((q, i) => {
        const p = pct(q);
        const color = getColor(p);
        return (
          <div key={i} style={{ marginBottom: '18px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <span style={{ color: '#F5F5F0', fontSize: '13px', fontWeight: 600 }}>{q.name}</span>
                <span style={{ background: color + '15', color, border: `1px solid ${color}30`, borderRadius: '4px', padding: '1px 6px', fontSize: '10px', fontWeight: 600 }}>{getLabel(p)}</span>
              </div>
              <span style={{ color: 'rgba(245,245,240,0.5)', fontSize: '12px' }}>
                {typeof q.used === 'number' && q.used > 1000 ? q.used.toLocaleString() : q.used} / {typeof q.limit === 'number' && q.limit > 1000 ? q.limit.toLocaleString() : q.limit} {q.unit}
              </span>
            </div>
            <div style={{ height: '8px', background: 'rgba(255,255,255,0.06)', borderRadius: '4px', overflow: 'hidden' }}>
              <div style={{
                height: '100%', width: `${p}%`,
                background: `linear-gradient(90deg, ${color}aa, ${color})`,
                borderRadius: '4px',
                boxShadow: p >= 75 ? `0 0 8px ${color}60` : 'none',
                transition: 'all 0.5s ease',
              }} />
            </div>
            <p style={{ margin: '4px 0 0 0', color: 'rgba(245,245,240,0.3)', fontSize: '11px', textAlign: 'right' }}>{p}% used</p>
          </div>
        );
      })}
    </div>
  );
}

Component info

CategorySaas Dashboard

Frameworkreact

TierFREE

Copies0

About

API usage quota display with warning states

More from Saas Dashboard

'use client';
import { useState } from 'react';

export default function PricingToggleCard() {
  const [annual, setAnnual] = useState(false);
  const monthly = 49;
  const price = annual ? Math.round(monthly * 0.75) : monthly;

  const features = ['U

PricingToggleCard

Saas Dashboard

'use client';
import { useState, useEffect } from 'react';

export default function ResourceUsageBar() {
  const [resources, setResources] = useState([
    { name: 'CPU', value: 42, color: '#6366f1' },
    { name: 'Memory', value: 71, color: '#C9A84C

ResourceUsageBar

Saas Dashboard

'use client';
import { useState, useEffect } from 'react';

export default function SaaSMetricsDashboard() {
  const [metrics, setMetrics] = useState({
    mrr: 48293, mrrChange: 12.4,
    churn: 1.8, churnChange: -0.3,
    nps: 72, npsChange: 5,

SaaSMetricsDashboard

Saas Dashboard