Untitled

import { Card, CardContent } from "@/components/ui/card";
import { LineChart, PieChart, Gauge, BarChart } from "recharts";
import { useState } from "react";

export default function Dashboard() {
  const [data] = useState({
    chatbotResolution: 85,
    csat: 4.5,
    responseTime: 3,
    costSavings: 500000,
    onboardingCompletion: 92,
    fraudDetection: 95,
    appUsage: 70,
    appRating: 4.8,
    transactionSuccess: 98,
    predictiveAccuracy: 87,
    biometricAdoption: 75,
    fraudReduction: 98,
    loyaltyEngagement: 65,
    retentionRate: 90,
    callResolution: 85,
    callSatisfaction: 4.6,
  });

  return (
    <div className="grid grid-cols-3 gap-4 p-4">
      {/* Chatbot Performance */}
      <Card>
        <CardContent>
          <h2 className="text-xl font-semibold">Chatbot Performance</h2>
          <p>Resolution Rate: {data.chatbotResolution}%</p>
          <p>CSAT Score: {data.csat}/5</p>
          <p>Response Time: {data.responseTime} sec</p>
        </CardContent>
      </Card>
      
      {/* Digital Onboarding */}
      <Card>
        <CardContent>
          <h2 className="text-xl font-semibold">Digital Onboarding</h2>
          <p>Completion Rate: {data.onboardingCompletion}%</p>
          <p>Fraud Detection: {data.fraudDetection}%</p>
        </CardContent>
      </Card>
      
      {/* Mobile App Performance */}
      <Card>
        <CardContent>
          <h2 className="text-xl font-semibold">Mobile App Performance</h2>
          <p>Feature Utilization: {data.appUsage}%</p>
          <p>App Rating: {data.appRating}/5</p>
          <p>Transaction Success: {data.transactionSuccess}%</p>
        </CardContent>
      </Card>
      
      {/* AI-Powered Predictive Banking */}
      <Card>
        <CardContent>
          <h2 className="text-xl font-semibold">Predictive Banking</h2>
          <p>Accuracy: {data.predictiveAccuracy}%</p>
        </CardContent>
      </Card>
      
      {/* Biometric Authentication */}
      <Card>
        <CardContent>
          <h2 className="text-xl font-semibold">Biometric Authentication</h2>
          <p>Adoption Rate: {data.biometricAdoption}%</p>
          <p>Fraud Reduction: {data.fraudReduction}%</p>
        </CardContent>
      </Card>
      
      {/* Customer Loyalty */}
      <Card>
        <CardContent>
          <h2 className="text-xl font-semibold">Customer Loyalty</h2>
          <p>Engagement Rate: {data.loyaltyEngagement}%</p>
          <p>Retention Rate: {data.retentionRate}%</p>
        </CardContent>
      </Card>
      
      {/* Call Center */}
      <Card>
        <CardContent>
          <h2 className="text-xl font-semibold">Call Center Performance</h2>
          <p>Resolution Rate: {data.callResolution}%</p>
          <p>CSAT Score: {data.callSatisfaction}/5</p>
        </CardContent>
      </Card>
    </div>
  );
}