File changes

Author: base44-builder[bot]

src/pages/PredictiveAnalyticsDashboard.jsx

@@ -58,41 +58,41 @@ export default function PredictiveAnalyticsDashboard() {
 
       {/* Quick Stats */}
       <div className="grid grid-cols-3 gap-4">
-        <Card className="border-red-200">
+        <Card className="border-red-200 bg-slate-900 border-slate-800">
           <CardContent className="pt-6">
             <div className="flex items-center gap-3">
-              <div className="p-3 bg-red-100 rounded-lg">
-                <AlertTriangle className="w-6 h-6 text-red-600" />
+              <div className="p-3 bg-red-100/20 rounded-lg">
+                <AlertTriangle className="w-6 h-6 text-red-400" />
               </div>
               <div>
-                <p className="text-sm text-slate-600">Churn Risk</p>
-                <p className="text-2xl font-bold text-red-600">Monitor</p>
+                <p className="text-sm text-slate-400">At-Risk Users</p>
+                <p className="text-2xl font-bold text-red-400">{atRiskCount}</p>
               </div>
             </div>
           </CardContent>
         </Card>
-        <Card className="border-green-200">
+        <Card className="border-green-200 bg-slate-900 border-slate-800">
           <CardContent className="pt-6">
             <div className="flex items-center gap-3">
-              <div className="p-3 bg-green-100 rounded-lg">
-                <TrendingUp className="w-6 h-6 text-green-600" />
+              <div className="p-3 bg-green-100/20 rounded-lg">
+                <TrendingUp className="w-6 h-6 text-green-400" />
               </div>
               <div>
-                <p className="text-sm text-slate-600">Growth Forecast</p>
-                <p className="text-2xl font-bold text-green-600">Positive</p>
+                <p className="text-sm text-slate-400">Insights Generated</p>
+                <p className="text-2xl font-bold text-green-400">{totalInsightsCount}</p>
               </div>
             </div>
           </CardContent>
         </Card>
-        <Card className="border-blue-200">
+        <Card className="border-blue-200 bg-slate-900 border-slate-800">
           <CardContent className="pt-6">
             <div className="flex items-center gap-3">
-              <div className="p-3 bg-blue-100 rounded-lg">
-                <Lightbulb className="w-6 h-6 text-blue-600" />
+              <div className="p-3 bg-blue-100/20 rounded-lg">
+                <Lightbulb className="w-6 h-6 text-blue-400" />
               </div>
               <div>
-                <p className="text-sm text-slate-600">AI Insights</p>
-                <p className="text-2xl font-bold text-blue-600">Active</p>
+                <p className="text-sm text-slate-400">System Status</p>
+                <p className="text-2xl font-bold text-blue-400">Active</p>
               </div>
             </div>
           </CardContent>