billing

frontend/src/App.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import {
   FiRefreshCw, FiList, FiLogOut, FiSettings, FiKey, FiTrash2, FiPlus, FiInbox,
-  FiUsers, FiUser, FiHardDrive,
+  FiUsers, FiUser, FiHardDrive, FiDollarSign,
 } from 'react-icons/fi';
 
 import Login from './components/Login';
@@ -16,6 +16,7 @@ import AuditLogModal from './components/AuditLogModal';
 import AdminUsersModal from './components/AdminUsersModal';
 import ChangeMyPasswordModal from './components/ChangeMyPasswordModal';
 import DomainQuotaModal from './components/DomainQuotaModal';
+import BillingModal from './components/BillingModal';
 
 import { authAPI, domainsAPI, mailboxesAPI } from './services/api';
 
@@ -38,6 +39,7 @@ function App() {
   const [showAdmins, setShowAdmins] = useState(false);
   const [showChangePw, setShowChangePw] = useState(false);
   const [showDomainQuota, setShowDomainQuota] = useState(false);
+  const [showBilling, setShowBilling] = useState(false);
 
   const showToast = useCallback((message, type = 'success') => {
     setToast({ message, type });
@@ -193,9 +195,12 @@ function App() {
               <FiUser className="w-4 h-4 mr-2" />
               My Password
             </button>
-            {/* Audit log: super_admin only. */}
             {isSuperAdmin && (
               <>
+                <button onClick={() => setShowBilling(true)} className="btn-secondary">
+                  <FiDollarSign className="w-4 h-4 mr-2" />
+                  Billing
+                </button>
                 <button onClick={() => setShowAudit(true)} className="btn-secondary">
                   <FiList className="w-4 h-4 mr-2" />
                   Audit Log
@@ -274,7 +279,6 @@ function App() {
                 </p>
               </div>
               <div className="flex flex-row flex-nowrap gap-2">
-                {/* Set domain-wide quota: super_admin only. */}
                 {isSuperAdmin && (
                   <button
                     onClick={() => setShowDomainQuota(true)}
@@ -429,6 +433,14 @@ function App() {
           onToast={showToast}
         />
       )}
+      {isSuperAdmin && (
+        <BillingModal
+          open={showBilling}
+          domains={domains}
+          onClose={() => setShowBilling(false)}
+          onToast={showToast}
+        />
+      )}
       <ChangeMyPasswordModal
         open={showChangePw}
         onClose={() => setShowChangePw(false)}