All files / apps/web/src/frontoffice/components UsageBar.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { AlertTriangle, ArrowUp } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { getOrganizationId } from '../../utils/organization'
 
function UsageBar({ label, used, limit, unit, type }) {
  const navigate = useNavigate()
  const percent = limit > 0 ? Math.min(100, Math.round((used / limit) * 100)) : 0
 
  const colorClass =
    percent >= 90 ? 'bg-red-500'
    : percent >= 60 ? 'bg-orange-500'
    : 'bg-green-500'
 
  const textColorClass =
    percent >= 90 ? 'text-red-700'
    : percent >= 60 ? 'text-orange-700'
    : 'text-green-700'
 
  const formatNumber = (n, ref) => {
    if (n == null) return '∞'
    const base = ref != null ? ref : n
    if (type === 'cost') {
      if (base >= 1000000) return `${(n / 1000000).toFixed(2)}€`
      return `${(n / 10000).toFixed(2)}¢`
    }
    if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`
    if (n >= 1000) return `${(n / 1000).toFixed(0)}k`
    return n.toString()
  }
 
  return (
    <div className="mb-4">
      <div className="flex items-center justify-between mb-1">
        <span className="text-sm font-medium text-gray-700">{label}</span>
        <span className={`text-sm font-medium ${textColorClass}`}>
          {formatNumber(used, limit)} / {formatNumber(limit)} {unit}
        </span>
      </div>
      <div className="w-full bg-gray-200 rounded-full h-2.5">
        <div
          className={`h-2.5 rounded-full transition-all duration-300 ${colorClass}`}
          style={{ width: `${percent}%` }}
        />
      </div>
      {percent >= 90 && (
        <div className="flex items-center gap-2 mt-1">
          <AlertTriangle className="w-4 h-4 text-red-500" />
          <span className="text-xs text-red-600">
            Vous approchez de votre limite
          </span>
          <button
            onClick={() => navigate(`/${getOrganizationId()}/backoffice/subscription`)}
            className="text-xs text-indigo-600 hover:text-indigo-800 ml-auto flex items-center gap-1"
          >
            Upgrader <ArrowUp className="w-3 h-3" />
          </button>
        </div>
      )}
    </div>
  )
}
 
export default UsageBar