Deepvest/ProfilingAI

1import React from 'react';2import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';3 4interface Recommendation {5  type: string;6  message: string;7  priority: 'high' | 'medium' | 'low';8  action?: string;9}10 11interface ProfileExplanation {12  summary: string;13  riskScore: number;14  horizon: number;15  goals: string[];16  recommendations: Recommendation[];17}18 19interface ProfileRecommendationsProps {20  explanation: ProfileExplanation;21}22 23const ProfileRecommendations: React.FC<ProfileRecommendationsProps> = ({ explanation }) => {24  const getPriorityColor = (priority: string): string => {25    switch(priority) {26      case 'high': return 'bg-red-100 text-red-800';27      case 'medium': return 'bg-yellow-100 text-yellow-800';28      case 'low': return 'bg-green-100 text-green-800';29      default: return 'bg-gray-100 text-gray-800';30    }31  };32 33  return (34    <div className="space-y-6">35      {/* Résumé du profil */}36      <Card>37        <CardHeader>38          <CardTitle>Analyse de votre profil</CardTitle>39        </CardHeader>40        <CardContent>41          <div className="prose">42            <p className="text-gray-700">{explanation.summary}</p>43            44            <div className="grid grid-cols-3 gap-4 mt-4">45              <div className="text-center p-4 bg-blue-50 rounded-lg">46                <div className="text-2xl font-bold text-blue-700">47                  {explanation.riskScore}/548                </div>49                <div className="text-sm text-blue-600">Score de risque</div>50              </div>51              52              <div className="text-center p-4 bg-green-50 rounded-lg">53                <div className="text-2xl font-bold text-green-700">54                  {explanation.horizon} ans55                </div>56                <div className="text-sm text-green-600">Horizon recommandé</div>57              </div>58              59              <div className="text-center p-4 bg-purple-50 rounded-lg">60                <div className="text-2xl font-bold text-purple-700">61                  {explanation.goals.length}62                </div>63                <div className="text-sm text-purple-600">Objectifs identifiés</div>64              </div>65            </div>66          </div>67        </CardContent>68      </Card>69 70      {/* Recommandations */}71      <Card>72        <CardHeader>73          <CardTitle>Recommandations Personnalisées</CardTitle>74        </CardHeader>75        <CardContent>76          <div className="space-y-4">77            {explanation.recommendations.map((rec, index) => (78              <div 79                key={index}80                className={`p-4 rounded-lg ${getPriorityColor(rec.priority)}`}81              >82                <h4 className="font-semibold mb-2">{rec.type}</h4>83                <p className="text-sm">{rec.message}</p>84                {rec.action && (85                  <div className="mt-2 text-sm font-medium">86                    Action recommandée: {rec.action}87                  </div>88                )}89              </div>90            ))}91          </div>92        </CardContent>93      </Card>94 95      {/* Objectifs */}96      <Card>97        <CardHeader>98          <CardTitle>Vos Objectifs</CardTitle>99        </CardHeader>100        <CardContent>101          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">102            {explanation.goals.map((goal, index) => (103              <div 104                key={index}105                className="p-4 bg-gray-50 rounded-lg"106              >107                <div className="text-lg font-medium">{goal}</div>108              </div>109            ))}110          </div>111        </CardContent>112      </Card>113    </div>114  );115};116 117export default ProfileRecommendations;