Spaces:

PD03
/

AR_Prediction

Running

App Files Files Community

PD03 commited on Jul 22, 2025

Commit

cfa760d

verified ·

1 Parent(s): 5d04a05

Update index.html

Browse files

Files changed (1) hide show

index.html +604 -19

index.html CHANGED Viewed

@@ -1,19 +1,604 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+import React, { useState, useEffect, useRef } from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell } from 'recharts';
+import { Play, Brain, Zap, TrendingUp, AlertTriangle, CheckCircle, XCircle, DollarSign, Clock, Users, BarChart3 } from 'lucide-react';
+import * as tf from 'tensorflow';
+const ModernSAPDemo = () => {
+  const [model, setModel] = useState(null);
+  const [isTraining, setIsTraining] = useState(false);
+  const [trainingProgress, setTrainingProgress] = useState(0);
+  const [trainingMetrics, setTrainingMetrics] = useState(null);
+  const [trainingHistory, setTrainingHistory] = useState([]);
+  const [predictions, setPredictions] = useState([]);
+  const [unpaidInvoices, setUnpaidInvoices] = useState([]);
+  const [activeTab, setActiveTab] = useState('overview');
+  // Generate synthetic SAP AR data
+  const generateSyntheticData = () => {
+    const data = [];
+    const customers = ['Mercedes-Benz AG', 'BMW Group', 'Volkswagen AG', 'Bosch GmbH', 'Siemens AG', 'BASF SE', 'Bayer AG', 'Adidas AG'];
+    for (let i = 0; i < 1500; i++) {
+      const invoiceAmount = Math.random() * 100000 + 5000;
+      const customerCode = customers[Math.floor(Math.random() * customers.length)];
+      const daysOverdue = Math.floor(Math.random() * 150);
+      const previousDelays = Math.floor(Math.random() * 6);
+      const creditScore = Math.random() * 100;
+      const industryRisk = Math.random();
+      const seasonality = Math.sin((i % 365) * 2 * Math.PI / 365);
+      let paymentProb = 0.75;
+      paymentProb -= Math.min(daysOverdue / 120, 0.5);
+      paymentProb -= Math.min(previousDelays / 12, 0.3);
+      paymentProb += (creditScore - 50) / 150;
+      paymentProb -= industryRisk * 0.25;
+      paymentProb += seasonality * 0.15;
+      paymentProb = Math.max(0.05, Math.min(0.95, paymentProb));
+      const paidOnTime = Math.random() < paymentProb ? 1 : 0;
+      data.push({
+        invoiceAmount: invoiceAmount / 100000,
+        daysOverdue: daysOverdue / 150,
+        previousDelays: previousDelays / 6,
+        creditScore: creditScore / 100,
+        industryRisk: industryRisk,
+        seasonality: (seasonality + 1) / 2,
+        paidOnTime: paidOnTime
+      });
+    }
+    return data;
+  };
+  // Generate unpaid invoices for prediction
+  const generateUnpaidInvoices = () => {
+    const invoices = [];
+    const customers = ['Mercedes-Benz AG', 'BMW Group', 'Volkswagen AG', 'Bosch GmbH', 'Siemens AG'];
+    const regions = ['DACH', 'EMEA', 'APAC', 'Americas'];
+    for (let i = 0; i < 20; i++) {
+      const invoiceId = `SAP-${Date.now().toString().slice(-6)}-${i.toString().padStart(3, '0')}`;
+      const customer = customers[Math.floor(Math.random() * customers.length)];
+      const amount = Math.floor(Math.random() * 85000 + 15000);
+      const daysOverdue = Math.floor(Math.random() * 120);
+      const previousDelays = Math.floor(Math.random() * 5);
+      const creditScore = Math.floor(Math.random() * 60 + 40);
+      const region = regions[Math.floor(Math.random() * regions.length)];
+      invoices.push({
+        invoiceId,
+        customer,
+        amount,
+        daysOverdue,
+        previousDelays,
+        creditScore,
+        region,
+        industryRisk: Math.random(),
+        seasonality: Math.random(),
+        dueDate: new Date(Date.now() - daysOverdue * 24 * 60 * 60 * 1000).toLocaleDateString()
+      });
+    }
+    return invoices;
+  };
+  // Train ML model
+  const trainModel = async () => {
+    setIsTraining(true);
+    setTrainingProgress(0);
+    setTrainingHistory([]);
+    try {
+      // Generate training data
+      const trainingData = generateSyntheticData();
+      // Prepare data for TensorFlow
+      const features = trainingData.map(d => [
+        d.invoiceAmount, d.daysOverdue, d.previousDelays,
+        d.creditScore, d.industryRisk, d.seasonality
+      ]);
+      const labels = trainingData.map(d => d.paidOnTime);
+      const xs = tf.tensor2d(features);
+      const ys = tf.tensor1d(labels);
+      // Create advanced model
+      const newModel = tf.sequential({
+        layers: [
+          tf.layers.dense({
+            inputShape: [6],
+            units: 64,
+            activation: 'relu',
+            kernelRegularizer: tf.regularizers.l2({ l2: 0.001 })
+          }),
+          tf.layers.dropout({ rate: 0.3 }),
+          tf.layers.dense({
+            units: 32,
+            activation: 'relu',
+            kernelRegularizer: tf.regularizers.l2({ l2: 0.001 })
+          }),
+          tf.layers.dropout({ rate: 0.2 }),
+          tf.layers.dense({
+            units: 16,
+            activation: 'relu'
+          }),
+          tf.layers.dense({
+            units: 1,
+            activation: 'sigmoid'
+          })
+        ]
+      });
+      newModel.compile({
+        optimizer: tf.train.adam(0.001),
+        loss: 'binaryCrossentropy',
+        metrics: ['accuracy']
+      });
+      // Train model with callbacks
+      const history = await newModel.fit(xs, ys, {
+        epochs: 80,
+        batchSize: 64,
+        validationSplit: 0.25,
+        callbacks: {
+          onEpochEnd: (epoch, logs) => {
+            const progress = ((epoch + 1) / 80) * 100;
+            setTrainingProgress(progress);
+            setTrainingHistory(prev => [...prev, {
+              epoch: epoch + 1,
+              accuracy: logs.acc * 100,
+              loss: logs.loss,
+              valAccuracy: logs.val_acc * 100,
+              valLoss: logs.val_loss
+            }]);
+          }
+        }
+      });
+      const finalMetrics = {
+        accuracy: (history.history.acc[history.history.acc.length - 1] * 100).toFixed(1),
+        valAccuracy: (history.history.val_acc[history.history.val_acc.length - 1] * 100).toFixed(1),
+        loss: history.history.loss[history.history.loss.length - 1].toFixed(4),
+        valLoss: history.history.val_loss[history.history.val_loss.length - 1].toFixed(4)
+      };
+      setTrainingMetrics(finalMetrics);
+      setModel(newModel);
+      // Generate unpaid invoices
+      setUnpaidInvoices(generateUnpaidInvoices());
+      xs.dispose();
+      ys.dispose();
+    } catch (error) {
+      console.error('Training failed:', error);
+    } finally {
+      setIsTraining(false);
+    }
+  };
+  // Make predictions
+  const makePredictions = async () => {
+    if (!model || unpaidInvoices.length === 0) return;
+    const features = unpaidInvoices.map(invoice => [
+      invoice.amount / 100000,
+      invoice.daysOverdue / 150,
+      invoice.previousDelays / 6,
+      invoice.creditScore / 100,
+      invoice.industryRisk,
+      invoice.seasonality
+    ]);
+    const predictionTensor = tf.tensor2d(features);
+    const predictionResults = await model.predict(predictionTensor).data();
+    predictionTensor.dispose();
+    const predictionsWithData = unpaidInvoices.map((invoice, index) => ({
+      ...invoice,
+      probability: predictionResults[index],
+      prediction: predictionResults[index] > 0.5 ? 'Will Pay' : 'Risk Default',
+      riskLevel: predictionResults[index] > 0.7 ? 'Low' : predictionResults[index] > 0.4 ? 'Medium' : 'High'
+    }));
+    setPredictions(predictionsWithData);
+  };
+  useEffect(() => {
+    if (model && unpaidInvoices.length > 0) {
+      makePredictions();
+    }
+  }, [model, unpaidInvoices]);
+  const getRiskColor = (riskLevel) => {
+    switch (riskLevel) {
+      case 'Low': return 'text-emerald-600 bg-emerald-50';
+      case 'Medium': return 'text-amber-600 bg-amber-50';
+      case 'High': return 'text-red-600 bg-red-50';
+      default: return 'text-gray-600 bg-gray-50';
+    }
+  };
+  const getProbabilityColor = (prob) => {
+    if (prob > 0.7) return 'bg-gradient-to-r from-emerald-400 to-emerald-600';
+    if (prob > 0.4) return 'bg-gradient-to-r from-amber-400 to-amber-600';
+    return 'bg-gradient-to-r from-red-400 to-red-600';
+  };
+  // Dashboard summary statistics
+  const dashboardStats = predictions.length > 0 ? {
+    totalInvoices: predictions.length,
+    totalValue: predictions.reduce((sum, p) => sum + p.amount, 0),
+    highRisk: predictions.filter(p => p.riskLevel === 'High').length,
+    avgProbability: (predictions.reduce((sum, p) => sum + p.probability, 0) / predictions.length * 100).toFixed(1)
+  } : null;
+  const riskDistribution = predictions.length > 0 ? [
+    { name: 'Low Risk', value: predictions.filter(p => p.riskLevel === 'Low').length, color: '#10b981' },
+    { name: 'Medium Risk', value: predictions.filter(p => p.riskLevel === 'Medium').length, color: '#f59e0b' },
+    { name: 'High Risk', value: predictions.filter(p => p.riskLevel === 'High').length, color: '#ef4444' }
+  ] : [];
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+      {/* Header */}
+      <div className="bg-black/20 backdrop-blur-sm border-b border-white/10">
+        <div className="max-w-7xl mx-auto px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <div className="p-3 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl">
+                <BarChart3 className="h-8 w-8 text-white" />
+              </div>
+              <div>
+                <h1 className="text-2xl font-bold text-white">SAP Account Receivable Intelligence</h1>
+                <p className="text-slate-300">ML-Powered Payment Prediction Platform</p>
+              </div>
+            </div>
+            {!isTraining && !model && (
+              <button
+                onClick={trainModel}
+                className="flex items-center space-x-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl"
+              >
+                <Brain className="h-5 w-5" />
+                <span>Train AI Model</span>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="max-w-7xl mx-auto px-6 py-8">
+        {/* Training Section */}
+        {(isTraining || model) && (
+          <div className="mb-8">
+            <div className="bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 p-6">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-xl font-bold text-white flex items-center space-x-2">
+                  <Brain className="h-6 w-6 text-blue-400" />
+                  <span>Neural Network Training</span>
+                </h2>
+                {model && (
+                  <div className="flex items-center space-x-2 text-emerald-400">
+                    <CheckCircle className="h-5 w-5" />
+                    <span className="font-medium">Model Ready</span>
+                  </div>
+                )}
+              </div>
+              {isTraining && (
+                <div className="mb-6">
+                  <div className="flex justify-between items-center mb-2">
+                    <span className="text-sm text-slate-300">Training Progress</span>
+                    <span className="text-sm text-slate-300">{trainingProgress.toFixed(1)}%</span>
+                  </div>
+                  <div className="w-full bg-slate-700/50 rounded-full h-3">
+                    <div
+                      className="bg-gradient-to-r from-blue-500 to-purple-600 h-3 rounded-full transition-all duration-500"
+                      style={{ width: `${trainingProgress}%` }}
+                    ></div>
+                  </div>
+                </div>
+              )}
+              {trainingMetrics && (
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+                  <div className="bg-gradient-to-r from-emerald-500/20 to-emerald-600/20 rounded-xl p-4 border border-emerald-500/30">
+                    <div className="text-2xl font-bold text-emerald-400">{trainingMetrics.accuracy}%</div>
+                    <div className="text-sm text-slate-300">Training Accuracy</div>
+                  </div>
+                  <div className="bg-gradient-to-r from-blue-500/20 to-blue-600/20 rounded-xl p-4 border border-blue-500/30">
+                    <div className="text-2xl font-bold text-blue-400">{trainingMetrics.valAccuracy}%</div>
+                    <div className="text-sm text-slate-300">Validation Accuracy</div>
+                  </div>
+                  <div className="bg-gradient-to-r from-purple-500/20 to-purple-600/20 rounded-xl p-4 border border-purple-500/30">
+                    <div className="text-2xl font-bold text-purple-400">{trainingMetrics.loss}</div>
+                    <div className="text-sm text-slate-300">Training Loss</div>
+                  </div>
+                  <div className="bg-gradient-to-r from-pink-500/20 to-pink-600/20 rounded-xl p-4 border border-pink-500/30">
+                    <div className="text-2xl font-bold text-pink-400">{trainingMetrics.valLoss}</div>
+                    <div className="text-sm text-slate-300">Validation Loss</div>
+                  </div>
+                </div>
+              )}
+              {trainingHistory.length > 0 && (
+                <div className="h-64">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <LineChart data={trainingHistory}>
+                      <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                      <XAxis dataKey="epoch" stroke="#9CA3AF" />
+                      <YAxis stroke="#9CA3AF" />
+                      <Tooltip
+                        contentStyle={{
+                          backgroundColor: '#1F2937',
+                          border: '1px solid #374151',
+                          borderRadius: '8px',
+                          color: '#F3F4F6'
+                        }}
+                      />
+                      <Line type="monotone" dataKey="accuracy" stroke="#10B981" strokeWidth={2} dot={false} />
+                      <Line type="monotone" dataKey="valAccuracy" stroke="#3B82F6" strokeWidth={2} dot={false} />
+                    </LineChart>
+                  </ResponsiveContainer>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        {/* Dashboard Stats */}
+        {dashboardStats && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            <div className="bg-gradient-to-r from-blue-500/20 to-blue-600/20 rounded-2xl p-6 border border-blue-500/30">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-slate-300 text-sm">Total Invoices</p>
+                  <p className="text-3xl font-bold text-blue-400">{dashboardStats.totalInvoices}</p>
+                </div>
+                <Users className="h-8 w-8 text-blue-400" />
+              </div>
+            </div>
+            <div className="bg-gradient-to-r from-emerald-500/20 to-emerald-600/20 rounded-2xl p-6 border border-emerald-500/30">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-slate-300 text-sm">Total Value</p>
+                  <p className="text-3xl font-bold text-emerald-400">${(dashboardStats.totalValue / 1000000).toFixed(1)}M</p>
+                </div>
+                <DollarSign className="h-8 w-8 text-emerald-400" />
+              </div>
+            </div>
+            <div className="bg-gradient-to-r from-red-500/20 to-red-600/20 rounded-2xl p-6 border border-red-500/30">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-slate-300 text-sm">High Risk</p>
+                  <p className="text-3xl font-bold text-red-400">{dashboardStats.highRisk}</p>
+                </div>
+                <AlertTriangle className="h-8 w-8 text-red-400" />
+              </div>
+            </div>
+            <div className="bg-gradient-to-r from-purple-500/20 to-purple-600/20 rounded-2xl p-6 border border-purple-500/30">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-slate-300 text-sm">Avg. Pay Probability</p>
+                  <p className="text-3xl font-bold text-purple-400">{dashboardStats.avgProbability}%</p>
+                </div>
+                <TrendingUp className="h-8 w-8 text-purple-400" />
+              </div>
+            </div>
+          </div>
+        )}
+        {/* Tabs */}
+        {predictions.length > 0 && (
+          <div className="mb-8">
+            <div className="flex space-x-1 bg-white/5 p-1 rounded-xl">
+              {[
+                { key: 'overview', label: 'Overview', icon: BarChart3 },
+                { key: 'predictions', label: 'Predictions', icon: Brain },
+                { key: 'analytics', label: 'Analytics', icon: TrendingUp }
+              ].map(({ key, label, icon: Icon }) => (
+                <button
+                  key={key}
+                  onClick={() => setActiveTab(key)}
+                  className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 ${
+                    activeTab === key
+                      ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg'
+                      : 'text-slate-300 hover:text-white hover:bg-white/10'
+                  }`}
+                >
+                  <Icon className="h-4 w-4" />
+                  <span>{label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+        {/* Tab Content */}
+        {predictions.length > 0 && (
+          <div className="space-y-6">
+            {activeTab === 'overview' && (
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div className="bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 p-6">
+                  <h3 className="text-lg font-semibold text-white mb-4">Risk Distribution</h3>
+                  <div className="h-64">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <PieChart>
+                        <Pie
+                          data={riskDistribution}
+                          cx="50%"
+                          cy="50%"
+                          labelLine={false}
+                          outerRadius={80}
+                          fill="#8884d8"
+                          dataKey="value"
+                          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+                        >
+                          {riskDistribution.map((entry, index) => (
+                            <Cell key={`cell-${index}`} fill={entry.color} />
+                          ))}
+                        </Pie>
+                        <Tooltip />
+                      </PieChart>
+                    </ResponsiveContainer>
+                  </div>
+                </div>
+                <div className="bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 p-6">
+                  <h3 className="text-lg font-semibold text-white mb-4">Payment Probability Distribution</h3>
+                  <div className="h-64">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart data={predictions.slice(0, 10)}>
+                        <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                        <XAxis dataKey="invoiceId" stroke="#9CA3AF" angle={-45} textAnchor="end" height={80} />
+                        <YAxis stroke="#9CA3AF" />
+                        <Tooltip
+                          contentStyle={{
+                            backgroundColor: '#1F2937',
+                            border: '1px solid #374151',
+                            borderRadius: '8px',
+                            color: '#F3F4F6'
+                          }}
+                        />
+                        <Bar dataKey="probability" fill="url(#colorGradient)" />
+                        <defs>
+                          <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="5%" stopColor="#3B82F6" stopOpacity={0.8}/>
+                            <stop offset="95%" stopColor="#1D4ED8" stopOpacity={0.8}/>
+                          </linearGradient>
+                        </defs>
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </div>
+                </div>
+              </div>
+            )}
+            {activeTab === 'predictions' && (
+              <div className="bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 overflow-hidden">
+                <div className="p-6 border-b border-white/10">
+                  <h3 className="text-lg font-semibold text-white">Invoice Payment Predictions</h3>
+                  <p className="text-slate-300 text-sm mt-1">AI-powered predictions for unpaid invoices</p>
+                </div>
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead className="bg-white/5">
+                      <tr className="text-left">
+                        <th className="px-6 py-4 text-sm font-medium text-slate-300">Invoice ID</th>
+                        <th className="px-6 py-4 text-sm font-medium text-slate-300">Customer</th>
+                        <th className="px-6 py-4 text-sm font-medium text-slate-300">Amount</th>
+                        <th className="px-6 py-4 text-sm font-medium text-slate-300">Days Overdue</th>
+                        <th className="px-6 py-4 text-sm font-medium text-slate-300">Prediction</th>
+                        <th className="px-6 py-4 text-sm font-medium text-slate-300">Probability</th>
+                        <th className="px-6 py-4 text-sm font-medium text-slate-300">Risk Level</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-white/10">
+                      {predictions.map((prediction, index) => (
+                        <tr key={index} className="hover:bg-white/5 transition-colors">
+                          <td className="px-6 py-4 text-sm font-mono text-blue-400">{prediction.invoiceId}</td>
+                          <td className="px-6 py-4 text-sm text-white">{prediction.customer}</td>
+                          <td className="px-6 py-4 text-sm text-emerald-400 font-semibold">
+                            ${prediction.amount.toLocaleString()}
+                          </td>
+                          <td className="px-6 py-4 text-sm text-slate-300">{prediction.daysOverdue} days</td>
+                          <td className="px-6 py-4">
+                            <div className="flex items-center space-x-2">
+                              {prediction.prediction === 'Will Pay' ? (
+                                <CheckCircle className="h-4 w-4 text-emerald-500" />
+                              ) : (
+                                <XCircle className="h-4 w-4 text-red-500" />
+                              )}
+                              <span className={`text-sm font-medium ${
+                                prediction.prediction === 'Will Pay' ? 'text-emerald-400' : 'text-red-400'
+                              }`}>
+                                {prediction.prediction}
+                              </span>
+                            </div>
+                          </td>
+                          <td className="px-6 py-4">
+                            <div className="flex items-center space-x-3">
+                              <div className="flex-1 bg-slate-700 rounded-full h-2">
+                                <div
+                                  className={`h-2 rounded-full ${getProbabilityColor(prediction.probability)}`}
+                                  style={{ width: `${prediction.probability * 100}%` }}
+                                ></div>
+                              </div>
+                              <span className="text-sm text-slate-300 font-medium min-w-[50px]">
+                                {(prediction.probability * 100).toFixed(1)}%
+                              </span>
+                            </div>
+                          </td>
+                          <td className="px-6 py-4">
+                            <span className={`inline-flex px-2 py-1 rounded-full text-xs font-medium ${getRiskColor(prediction.riskLevel)}`}>
+                              {prediction.riskLevel} Risk
+                            </span>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+            {activeTab === 'analytics' && (
+              <div className="grid grid-cols-1 gap-6">
+                <div className="bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 p-6">
+                  <h3 className="text-lg font-semibold text-white mb-4">Payment Probability vs Days Overdue</h3>
+                  <div className="h-80">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <LineChart data={predictions.sort((a, b) => a.daysOverdue - b.daysOverdue)}>
+                        <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                        <XAxis dataKey="daysOverdue" stroke="#9CA3AF" />
+                        <YAxis stroke="#9CA3AF" domain={[0, 1]} />
+                        <Tooltip
+                          contentStyle={{
+                            backgroundColor: '#1F2937',
+                            border: '1px solid #374151',
+                            borderRadius: '8px',
+                            color: '#F3F4F6'
+                          }}
+                        />
+                        <Line
+                          type="monotone"
+                          dataKey="probability"
+                          stroke="#3B82F6"
+                          strokeWidth={3}
+                          dot={{ fill: '#3B82F6', strokeWidth: 2, r: 4 }}
+                        />
+                      </LineChart>
+                    </ResponsiveContainer>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        {/* No predictions state */}
+        {!isTraining && !model && predictions.length === 0 && (
+          <div className="text-center py-16">
+            <div className="mb-8">
+              <Brain className="h-24 w-24 text-slate-400 mx-auto mb-4" />
+              <h3 className="text-2xl font-bold text-white mb-2">Ready to Get Started</h3>
+              <p className="text-slate-300 max-w-md mx-auto">
+                Train our advanced neural network on synthetic SAP Account Receivable data to predict invoice payment outcomes with high accuracy.
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default ModernSAPDemo;