change dashboard layout

src/app/ui/dashboard/protection-overview.tsx

@@ -1,22 +1,68 @@
+'use client'
+
+import { useState } from 'react';
+import { PieChartComponent } from '@/app/components/PieChartComponent';
+
+
+const data = [
+	{ name: 'Изображения', value: 33, color: '#f08c00' },
+	{ name: 'Видео', value: 50, color: '#2f9e44' },
+	{ name: 'Аудио', value: 25, color: '#1971c2' },
+];
+
 export default function ProtectionOverview() {
+	const [isOpen, setIsOpen] = useState(false);
+
 	return (
 		<div className="protection-overview">
 			<h3>Защита вашего контента</h3>
 			<p>Текущий статус защищенности и активности системы мониторинга</p>
-			<div className="protection-stats">
-				<div className="protection-stat">
+			<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
+				<div className="protection-stat total-files">
 					<div className="protection-stat-value">0</div>
-					<div className="protection-stat-label">Всего проверок</div>
+					<div className="protection-stat-label">Всего файлов</div>
 				</div>
-				<div className="protection-stat">
-					<div className="protection-stat-value">0</div>
-					<div className="protection-stat-label">Файлов с водяными знаками</div>
-				</div>
-				<div className="protection-stat">
-					<div className="protection-stat-value">0 / 0</div>
-					<div className="protection-stat-label">Использовано места на диске</div>
+
+				<div className="protection-stat total-checks">
+					<div className="protection-stat-row">
+						<div className="protection-stat-value">0</div>
+						<div className="protection-stat-label">проверок</div>
+					</div>
+					<div className="protection-stat-row">
+						<div className="protection-stat-value">0</div>
+						<div className="protection-stat-label">нарушений</div>
+					</div>
 				</div>
+				{isOpen ? (
+					<div className="protection-stat total-usage">
+						<PieChartComponent data={data}/>
+					</div>
+				) : (
+					<div className="protection-stat total-usage">
+						<div className="protection-stat-value">0 / 0</div>
+						<div className="protection-stat-label">Использовано места на диске</div>
+					</div>
+				)}
 			</div>
+			<button
+				className="protection-overview-switch cursor-pointer"
+				onClick={() => {
+					setIsOpen(!isOpen);
+				}}
+			>
+				<svg
+					className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fillRule="evenodd"
+						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+						clipRule="evenodd"
+					/>
+				</svg>
+			</button>
 		</div>
 	)
 }