import React, { useState, useEffect } from ‘react’;
import { ShieldCheck, ArrowRight, Lock, CheckCircle2, AlertCircle, Activity } from ‘lucide-react’;
export default function CibilScoreChecker() {
// App State: ‘phone’ | ‘otp’ | ‘details’ | ‘loading’ | ‘dashboard’
const [step, setStep] = useState(‘phone’);
// Form Data State
const [phone, setPhone] = useState(”);
const [otp, setOtp] = useState([”, ”, ”, ”]);
const [details, setDetails] = useState({ name: ”, pan: ”, dob: ”, consent: false });
// Dashboard State
const [scoreData, setScoreData] = useState(null);
const [loadingText, setLoadingText] = useState(”);
// — Simulated Backend API Calls —
const requestOtp = async (e) => {
e.preventDefault();
if (phone.length !== 10) return alert(“Enter a valid 10-digit number”);
setStep(‘otp’);
};
const verifyOtp = async (e) => {
e.preventDefault();
if (otp.join(”).length !== 4) return alert(“Enter complete OTP”);
setStep(‘details’);
};
const fetchCreditScore = async (e) => {
e.preventDefault();
if (!details.consent) return alert(“You must provide consent to fetch your score.”);
setStep(‘loading’);
// Simulate Bureau API phases
setLoadingText(‘Securing connection…’);
await new Promise(res => setTimeout(res, 1000));
setLoadingText(‘Verifying PAN details…’);
await new Promise(res => setTimeout(res, 1500));
setLoadingText(‘Fetching credit history from bureaus…’);
await new Promise(res => setTimeout(res, 1500));
// Mock Bureau Response
setScoreData({
score: 785,
status: ‘Excellent’,
color: ‘text-emerald-500’,
bgRing: ‘stroke-emerald-500’,
factors: [
{ label: ‘Payment History’, value: ‘100%’, status: ‘Excellent’ },
{ label: ‘Credit Utilization’, value: ‘24%’, status: ‘Good’ },
{ label: ‘Credit Age’, value: ‘4 Years’, status: ‘Average’ }
]
});
setStep(‘dashboard’);
};
// — UI Components —
const renderPhoneStep = () => (
Check Your Credit Score
Free. Secure. No impact on your score.
Bank-grade 256-bit encryption
);
const renderOtpStep = () => (
Verify your number
We’ve sent a 4-digit code to +91 {phone}
);
const renderDetailsStep = () => (
Just a few details
Bureaus require this to fetch your exact score.
);
const renderLoadingStep = () => (
Analyzing your profile
{loadingText}
);
const renderDashboard = () => {
// Calculate SVG circle progress
const radius = 60;
const circumference = 2 * Math.PI * radius;
const percent = (scoreData.score – 300) / (900 – 300); // Score range 300-900
const offset = circumference – percent * circumference;
return (
Hello, {details.name.split(‘ ‘)[0]}
Here is your latest credit profile
{/* Speedometer/Score Card */}
{/* Background Ring */}
{scoreData.score}
{scoreData.status}
Powered by Experian • Updated today
{/* Key Insights */}
Key Insights
{scoreData.factors.map((factor, idx) => (
{factor.status === ‘Excellent’ ?
:
}
{factor.label}
))}
);
};
return (
{step === ‘phone’ && renderPhoneStep()}
{step === ‘otp’ && renderOtpStep()}
{step === ‘details’ && renderDetailsStep()}
{step === ‘loading’ && renderLoadingStep()}
{step === ‘dashboard’ && renderDashboard()}
);
}
