change dashboard layout

src/app/components/PieChartComponent.tsx

@@ -0,0 +1,51 @@
+import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
+
+export const PieChartComponent = ({ data }: {
+	data: {
+		name: string,
+		value: number,
+		color: string
+	}[]
+}) => {
+	console.log(data)
+	return (
+		<div
+			className="flex flex-col items-center"
+		>
+			<ResponsiveContainer width={200} height={200}>
+				<PieChart>
+					<text x={100} y={80} className="pie-char-text">
+						0
+					</text>
+					<text x={100} y={100} className="pie-char-text">
+						из
+					</text>
+					<text x={100} y={120} className="pie-char-text">
+						0
+					</text>
+					<Pie
+						data={data}
+						cx="50%"
+						cy="50%"
+						innerRadius={70}
+						outerRadius={90}
+						paddingAngle={0}
+						dataKey="value"
+					>
+						{data.map((entry, index) => (
+							<Cell key={`cell-${index}`} fill={entry.color} />
+						))}
+					</Pie>
+				</PieChart>
+			</ResponsiveContainer>
+			<div className="flex gap-6">
+				{data.map((entry, index) => (
+					<div key={`cell-${index}`} className="text-white">
+						<span className="w-2 h-2 rounded-full font-bold inline-block mr-1.5" style={{ backgroundColor: entry.color }}></span>
+						<span>{entry.name}</span>
+					</div>
+				))}
+			</div>
+		</div>
+	)
+};