fix

frontend/src/pages/Admin/AdminBilling.tsx

@@ -147,15 +147,13 @@ const AdminBilling: React.FC = () => {
             Admin controls for credits, pricing, and user billing
           </p>
         </div>
-        <a
-          href="/admin/igny8_core/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700"
+        <Button
+          variant="outline"
+          startIcon={<PlugInIcon className="w-4 h-4" />}
+          onClick={() => window.open('/admin/igny8_core/', '_blank')}
         >
-          <PlugInIcon className="w-4 h-4 mr-2" />
           Django Admin
-        </a>
+        </Button>
       </div>
 
       {/* System Stats */}
@@ -163,30 +161,26 @@ const AdminBilling: React.FC = () => {
         <EnhancedMetricCard
           title="Total Users"
           value={stats?.total_users || 0}
-          icon={UserIcon}
-          color="blue"
-          iconColor="text-blue-500"
+          icon={<UserIcon />}
+          accentColor="blue"
         />
         <EnhancedMetricCard
           title="Active Users"
           value={stats?.active_users || 0}
-          icon={CheckCircleIcon}
-          color="green"
-          iconColor="text-green-500"
+          icon={<CheckCircleIcon />}
+          accentColor="green"
         />
         <EnhancedMetricCard
           title="Credits Issued"
           value={stats?.total_credits_issued || 0}
-          icon={DollarLineIcon}
-          color="amber"
-          iconColor="text-amber-500"
+          icon={<DollarLineIcon />}
+          accentColor="orange"
         />
         <EnhancedMetricCard
           title="Credits Used"
           value={stats?.total_credits_used || 0}
-          icon={BoltIcon}
-          color="purple"
-          iconColor="text-purple-500"
+          icon={<BoltIcon />}
+          accentColor="purple"
         />
       </div>
 
@@ -231,28 +225,28 @@ const AdminBilling: React.FC = () => {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           <ComponentCard title="Quick Actions">
             <div className="space-y-3">
-              <Button 
-                variant="primary" 
+              <Button
+                variant="primary"
                 fullWidth
+                startIcon={<UserIcon className="w-4 h-4" />}
                 onClick={() => setActiveTab('users')}
               >
-                <UserIcon className="w-4 h-4 mr-2" />
                 Manage User Credits
               </Button>
-              <Button 
-                variant="secondary" 
+              <Button
+                variant="secondary"
                 fullWidth
+                startIcon={<DollarLineIcon className="w-4 h-4" />}
                 onClick={() => setActiveTab('pricing')}
               >
-                <DollarLineIcon className="w-4 h-4 mr-2" />
                 Update Credit Costs
               </Button>
-              <Button 
-                variant="outline" 
+              <Button
+                variant="outline"
                 fullWidth
+                startIcon={<PlugInIcon className="w-4 h-4" />}
                 onClick={() => window.open('/admin/igny8_core/creditcostconfig/', '_blank')}
               >
-                <PlugInIcon className="w-4 h-4 mr-2" />
                 Full Admin Panel
               </Button>
             </div>
@@ -309,7 +303,7 @@ const AdminBilling: React.FC = () => {
                           </div>
                         </td>
                         <td className="px-4 py-4 whitespace-nowrap">
-                          <Badge variant="info">{user.subscription_plan || 'Free'}</Badge>
+                          <Badge tone="info">{user.subscription_plan || 'Free'}</Badge>
                         </td>
                         <td className="px-4 py-4 whitespace-nowrap text-right font-bold text-amber-600 dark:text-amber-400">
                           {user.credits}
@@ -432,7 +426,7 @@ const AdminBilling: React.FC = () => {
                       {config.cost}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-center">
-                      <Badge variant={config.is_active ? 'success' : 'warning'}>
+                      <Badge tone={config.is_active ? 'success' : 'warning'}>
                         {config.is_active ? 'Active' : 'Inactive'}
                       </Badge>
                     </td>