Files
auditly/pages/QuestionnaireComplete.tsx

70 lines
3.0 KiB
TypeScript

import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { CheckCircle, FileText, Sparkles } from 'lucide-react';
const QuestionnaireComplete: React.FC = () => {
const location = useLocation();
const navigate = useNavigate();
const {
employeeName = 'Employee',
reportGenerated = false,
message = 'Thank you for completing the questionnaire!'
} = location.state || {};
return (
<div className="min-h-screen bg-[--background-primary] flex items-center justify-center p-4">
<div className="max-w-md w-full bg-[--background-secondary] rounded-lg shadow-lg p-8 text-center">
<div className="flex justify-center mb-6">
{reportGenerated ? (
<div className="relative">
<CheckCircle className="w-16 h-16 text-green-500" />
<Sparkles className="w-6 h-6 text-yellow-400 absolute -top-1 -right-1" />
</div>
) : (
<CheckCircle className="w-16 h-16 text-green-500" />
)}
</div>
<h1 className="text-2xl font-bold text-[--text-primary] mb-4">
Questionnaire Complete!
</h1>
<p className="text-[--text-secondary] mb-6">
{message}
</p>
{reportGenerated && (
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
<div className="flex items-center justify-center mb-2">
<FileText className="w-5 h-5 text-blue-600 mr-2" />
<span className="text-sm font-medium text-blue-600">AI Report Generated</span>
</div>
<p className="text-sm text-blue-600 dark:text-blue-300">
Your personalized performance report has been created using AI analysis of your responses.
</p>
</div>
)}
<div className="space-y-3">
<button
onClick={() => navigate('/reports')}
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
>
{reportGenerated ? 'View Your Report' : 'Go to Dashboard'}
</button>
<button
onClick={() => navigate('/')}
className="w-full bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
>
Return to Home
</button>
</div>
</div>
</div>
);
};
export default QuestionnaireComplete;