Update frontend/src/pages/SuperAdminPanel.jsx

frontend/src/pages/SuperAdminPanel.jsx

@@ -9,7 +9,7 @@ const DEFAULT_BILLING_TIERS = [
   { id: 'quick', name: 'Quick Scan', badge: 'QUICK', monthly_price: 499, yearly_price: 4990 },
   { id: 'advanced', name: 'Advanced Scan', badge: 'ADVANCED', monthly_price: 4499, yearly_price: 44990 },
   { id: 'deep', name: 'Deep Scan', badge: 'DEEP', monthly_price: 9999, yearly_price: 99990 },
-  { id: 'enterprise', name: 'Custom Solutions', badge: 'ENTERPRISE', monthly_price: 0, yearly_price: 0, isCustom: true }
+  { id: 'enterprise', name: 'Custom Solutions', badge: 'ENTERPRISE', monthly_price: 0, yearly_price: 0 }
 ];
 
 const BillingTierCard = ({ tier, onSave }) => {
@@ -30,10 +30,10 @@ const BillingTierCard = ({ tier, onSave }) => {
 
   const getAccentClass = (id) => {
     const key = (id || '').toLowerCase();
-    if (key.includes('quick')) return 'bg-blue-500';
-    if (key.includes('advanced')) return 'bg-purple-500';
-    if (key.includes('deep')) return 'bg-orange-500';
-    if (key.includes('enterprise') || key.includes('custom')) return 'bg-orange-500';
+    if (key.includes('quick')) return 'bg-[#4285f4]';
+    if (key.includes('advanced')) return 'bg-[#a855f7]';
+    if (key.includes('deep')) return 'bg-[#f97316]';
+    if (key.includes('enterprise') || key.includes('custom')) return 'bg-[#f97316]';
     return 'bg-primary';
   };
 
@@ -57,78 +57,74 @@ const BillingTierCard = ({ tier, onSave }) => {
     return tier.name || tier.id;
   };
 
-  const isCustom = (tier.id || '').toLowerCase() === 'enterprise' || tier.isCustom;
-
   return (
-    <div className="bg-surface-container-lowest border border-outline-variant/80 rounded-2xl p-md flex flex-col gap-sm shadow-sm relative overflow-hidden">
+    <div className="bg-surface-container-lowest border border-outline-variant/70 rounded-2xl p-6 flex flex-col justify-between shadow-2xs relative overflow-hidden">
       {/* Accent Top Border */}
-      <div className={`absolute top-0 left-0 right-0 h-1.5 ${getAccentClass(tier.id)}`}></div>
-
-      <div className="flex flex-col items-start gap-0.5 pt-1">
-        <h3 className="font-headline-sm text-[17px] font-bold text-on-surface">
-          {getDisplayName(tier)}
-        </h3>
-        <span className="text-[11px] font-mono font-bold text-on-surface-variant uppercase tracking-wider bg-surface-container px-2 py-0.5 rounded">
-          {getBadge(tier)}
-        </span>
-      </div>
+      <div className={`absolute top-0 left-0 right-0 h-[5px] ${getAccentClass(tier.id)}`}></div>
+
+      <div>
+        <div className="flex flex-col items-start gap-1 pt-1 mb-5">
+          <h3 className="font-headline-sm text-[18px] font-bold text-on-surface">
+            {getDisplayName(tier)}
+          </h3>
+          <span className="text-[11px] font-mono font-medium text-on-surface-variant uppercase tracking-wider bg-[#e5e5e5] px-2.5 py-0.5 rounded">
+            {getBadge(tier)}
+          </span>
+        </div>
 
-      <div className="grid grid-cols-2 gap-md mt-1">
-        <div className="flex flex-col gap-1">
-          <label className="text-[11px] font-bold text-on-surface-variant uppercase tracking-wider">MONTHLY PRICE</label>
-          <div className="relative flex items-center">
-            <span className="absolute left-3 text-on-surface font-bold text-sm">$</span>
-            <input
-              type="number"
-              step="0.01"
-              min="0"
-              value={monthly}
-              onChange={e => setMonthly(e.target.value)}
-              className="w-full bg-surface-container border border-outline-variant/80 rounded-lg pl-7 pr-3 py-2 focus:border-primary outline-none text-on-surface font-mono font-bold text-sm"
-            />
+        <div className="grid grid-cols-2 gap-4">
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[11px] font-bold text-on-surface-variant uppercase tracking-wider">MONTHLY PRICE</label>
+            <div className="bg-[#e5e5e5] border border-outline-variant/40 rounded-lg px-3 py-2 flex items-center gap-2">
+              <span className="font-mono font-bold text-on-surface text-sm">$</span>
+              <input
+                type="number"
+                step="0.01"
+                min="0"
+                value={monthly}
+                onChange={e => setMonthly(e.target.value)}
+                className="bg-transparent border-0 outline-none w-full font-mono font-bold text-on-surface text-sm"
+              />
+            </div>
           </div>
-        </div>
 
-        <div className="flex flex-col gap-1">
-          <label className="text-[11px] font-bold text-on-surface-variant uppercase tracking-wider">YEARLY PRICE</label>
-          <div className="relative flex items-center">
-            <span className="absolute left-3 text-on-surface font-bold text-sm">$</span>
-            <input
-              type="number"
-              step="0.01"
-              min="0"
-              value={yearly}
-              onChange={e => setYearly(e.target.value)}
-              className="w-full bg-surface-container border border-outline-variant/80 rounded-lg pl-7 pr-3 py-2 focus:border-primary outline-none text-on-surface font-mono font-bold text-sm"
-            />
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[11px] font-bold text-on-surface-variant uppercase tracking-wider">YEARLY PRICE</label>
+            <div className="bg-[#e5e5e5] border border-outline-variant/40 rounded-lg px-3 py-2 flex items-center gap-2">
+              <span className="font-mono font-bold text-on-surface text-sm">$</span>
+              <input
+                type="number"
+                step="0.01"
+                min="0"
+                value={yearly}
+                onChange={e => setYearly(e.target.value)}
+                className="bg-transparent border-0 outline-none w-full font-mono font-bold text-on-surface text-sm"
+              />
+            </div>
           </div>
         </div>
       </div>
 
-      {!isCustom ? (
-        <div className="flex justify-end mt-1">
-          <button
-            onClick={handleSave}
-            disabled={saving}
-            className={`px-3 py-1.5 border rounded-lg font-bold text-xs transition-all flex items-center gap-1.5 cursor-pointer shadow-sm ${
-              saved
-                ? 'bg-green-500 text-white border-green-500'
-                : 'border-outline-variant hover:border-primary text-primary bg-surface-container-lowest'
-            }`}
-          >
-            {saving ? (
-              <span className="material-symbols-outlined animate-spin text-[16px]">sync</span>
-            ) : saved ? (
-              <span className="material-symbols-outlined text-[16px]">check_circle</span>
-            ) : (
-              <span className="material-symbols-outlined text-[16px] text-primary">save</span>
-            )}
-            <span>{saving ? 'Saving...' : saved ? 'Saved!' : 'Save Changes'}</span>
-          </button>
-        </div>
-      ) : (
-        <div className="h-8"></div>
-      )}
+      <div className="border-t border-outline-variant/30 mt-5 pt-4 flex justify-end">
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className={`px-5 py-2 border rounded-lg font-bold text-[13px] transition-all flex items-center gap-2 cursor-pointer shadow-2xs ${
+            saved
+              ? 'bg-green-500 text-white border-green-500'
+              : 'border-[#2563eb]/40 text-[#2563eb] hover:border-[#2563eb] bg-surface-container-lowest hover:bg-blue-50/20'
+          }`}
+        >
+          {saving ? (
+            <span className="material-symbols-outlined animate-spin text-[16px]">sync</span>
+          ) : saved ? (
+            <span className="material-symbols-outlined text-[16px]">check_circle</span>
+          ) : (
+            <span className="material-symbols-outlined text-[16px] text-[#2563eb]">save</span>
+          )}
+          <span>{saving ? 'Saving...' : saved ? 'Saved!' : 'Save Changes'}</span>
+        </button>
+      </div>
     </div>
   );
 };