Untitled
unknown
plain_text
a month ago
2.9 kB
2
Indexable
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> ); }
Editor is loading...
Leave a Comment