Deepvest/ProfilingAI

1import React from 'react';2import { Card, CardHeader, CardTitle, CardContent } from './ui/card';3import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';4 5interface PortfolioData {6  currentValue: number;7  returns: number;8  allocation: Record<string, number>;9  history: Array<{10    date: string;11    value: number;12  }>;13}14 15const PortfolioView: React.FC<{ data: PortfolioData }> = ({ data }) => {16  return (17    <div className="space-y-6">18      {/* Vue d'ensemble */}19      <Card>20        <CardHeader>21          <CardTitle>Vue d'ensemble du portefeuille</CardTitle>22        </CardHeader>23        <CardContent>24          <div className="grid grid-cols-3 gap-4">25            <div className="text-center">26              <h3 className="text-sm font-medium text-gray-500">Valeur actuelle</h3>27              <p className="mt-1 text-2xl font-semibold text-gray-900">28                {new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' })29                  .format(data.currentValue)}30              </p>31            </div>32            <div className="text-center">33              <h3 className="text-sm font-medium text-gray-500">Performance</h3>34              <p className={`mt-1 text-2xl font-semibold ${35                data.returns >= 0 ? 'text-green-600' : 'text-red-600'36              }`}>37                {(data.returns * 100).toFixed(2)}%38              </p>39            </div>40            <div className="text-center">41              <h3 className="text-sm font-medium text-gray-500">Actifs</h3>42              <p className="mt-1 text-2xl font-semibold text-gray-900">43                {Object.keys(data.allocation).length}44              </p>45            </div>46          </div>47        </CardContent>48      </Card>49 50      {/* Graphique de performance */}51      <Card>52        <CardHeader>53          <CardTitle>Évolution du portefeuille</CardTitle>54        </CardHeader>55        <CardContent>56          <div className="h-96">57            <ResponsiveContainer width="100%" height="100%">58              <LineChart data={data.history}>59                <CartesianGrid strokeDasharray="3 3" className="stroke-gray-200" />60                <XAxis dataKey="date" className="text-xs" />61                <YAxis className="text-xs" />62                <Tooltip />63                <Legend />64                <Line 65                  type="monotone" 66                  dataKey="value" 67                  stroke="#3b82f6" 68                  strokeWidth={2} 69                  dot={false} 70                />71              </LineChart>72            </ResponsiveContainer>73          </div>74        </CardContent>75      </Card>76 77      {/* Allocation */}78      <Card>79        <CardHeader>80          <CardTitle>Allocation des actifs</CardTitle>81        </CardHeader>82        <CardContent>83          <div className="grid grid-cols-2 gap-4">84            {Object.entries(data.allocation).map(([asset, weight]) => (85              <div key={asset} className="flex items-center justify-between p-2 bg-gray-50 rounded">86                <span className="font-medium">{asset}</span>87                <span className="text-gray-600">{(weight * 100).toFixed(1)}%</span>88              </div>89            ))}90          </div>91        </CardContent>92      </Card>93    </div>94  );95};96 97export default PortfolioView;