add modal windows

src/app/components/modalWindow.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+
+interface ModalWindowtProps {
+	children: ReactNode | null;
+	state: boolean;
+	callBack: (value: boolean) => void;
+}
+
+export default function ModalWindow({ children, state, callBack }: ModalWindowtProps) {
+	return (
+		<>
+			{state && (
+				<div
+					className="modal-wrapper"
+					onClick={() => {
+						callBack(false);
+					}}
+				>
+					<div
+						className="modal-window"
+						onClick={(e) => e.stopPropagation()}
+					>
+						{children}
+					</div>
+				</div>
+			)}
+		</>
+	)
+}

src/app/styles/global-styles.scss

@@ -72,6 +72,11 @@
 		padding: 1.5rem;
 		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 		transition: all 0.3s ease;
+
+		&:hover {
+			transform: translateY(-4px);
+			box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+		}
 	}
 }
 
@@ -82,6 +87,12 @@
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 	transition: all 0.3s ease;
 	border: 1px solid transparent;
+
+	&:hover {
+		transform: translateY(-2px);
+		box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
+		border-color: #667eea;
+	}
 }
 
 .cases-list-wrapper {
@@ -196,3 +207,25 @@
 		}
 	}
 }
+
+.modal-wrapper {
+	position: fixed;
+	z-index: 101;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background: #0000007a;
+
+	.modal-window {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		padding: 20px;
+		background: #fff;
+		color: #1f2937;
+		border-radius: 20px;
+		box-shadow: 0px 4px 20px #0000001a;
+	}
+}

src/app/ui/main-page/actions-modals/action-analytics.tsx

@@ -0,0 +1,34 @@
+export default function ActionAnalytics() {
+	return (
+		<div>
+			<div className="flex items-center justify-between mb-4">
+				<h3 className="text-xl font-bold text-gray-800">
+					<i className="fas fa-chart-bar mr-2 text-purple-500"></i>
+					Аналитика работы
+				</h3>
+				<button className="text-gray-400 hover:text-gray-600">
+					<i className="fas fa-times text-xl"></i>
+				</button>
+			</div>
+			<div className="grid grid-cols-2 gap-4">
+				<div className="bg-blue-50 rounded-lg p-4">
+					<p className="text-sm text-gray-600 mb-1">Активных дел</p>
+					<p className="text-2xl font-bold text-blue-600">7</p>
+				</div>
+				<div className="bg-green-50 rounded-lg p-4">
+					<p className="text-sm text-gray-600 mb-1">Время сегодня</p>
+					<p className="text-2xl font-bold text-green-600">0 мин</p>
+				</div>
+				<div className="bg-purple-50 rounded-lg p-4">
+					<p className="text-sm text-gray-600 mb-1">Процент успеха</p>
+					<p className="text-2xl font-bold text-purple-600">10%</p>
+				</div>
+				<div className="bg-orange-50 rounded-lg p-4">
+					<p className="text-sm text-gray-600 mb-1">Средний чек</p>
+					<p className="text-2xl font-bold text-orange-600">
+						₽10 000                </p>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/main-page/actions-modals/action-documents.tsx

@@ -0,0 +1,33 @@
+export default function ActionDocuments() {
+	return (
+		<div>
+			<div className="flex items-center justify-between mb-4">
+				<h3 className="text-xl font-bold text-gray-800">
+					<i className="fas fa-file-alt mr-2 text-orange-500"></i>
+					Шаблоны документов
+				</h3>
+				<button className="text-gray-400 hover:text-gray-600">
+					<i className="fas fa-times text-xl"></i>
+				</button>
+			</div>
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div className="border border-gray-200 rounded-lg p-4 hover:border-purple-300 transition cursor-pointer">
+					<h4 className="font-semibold text-gray-800 mb-2">📄 Исковое заявление</h4>
+					<p className="text-sm text-gray-600">Шаблон искового заявления о защите авторских прав</p>
+				</div>
+				<div className="border border-gray-200 rounded-lg p-4 hover:border-purple-300 transition cursor-pointer">
+					<h4 className="font-semibold text-gray-800 mb-2">📝 Претензия</h4>
+					<p className="text-sm text-gray-600">Досудебная претензия о нарушении прав</p>
+				</div>
+				<div className="border border-gray-200 rounded-lg p-4 hover:border-purple-300 transition cursor-pointer">
+					<h4 className="font-semibold text-gray-800 mb-2">⚖️ Ходатайство</h4>
+					<p className="text-sm text-gray-600">Ходатайство о приобщении доказательств</p>
+				</div>
+				<div className="border border-gray-200 rounded-lg p-4 hover:border-purple-300 transition cursor-pointer">
+					<h4 className="font-semibold text-gray-800 mb-2">✍️ Соглашение</h4>
+					<p className="text-sm text-gray-600">Соглашение о правовой помощи</p>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/main-page/actions-modals/action-note.tsx

@@ -0,0 +1,48 @@
+export default function ActionNote() {
+	return (
+		<div className="">
+			<div className="flex items-center justify-between mb-4">
+				<h3 className="text-xl font-bold text-gray-800">
+					<i className="fas fa-sticky-note mr-2 text-yellow-500"></i>
+					Создать заметку
+				</h3>
+				<button className="text-gray-400 hover:text-gray-600">
+					<i className="fas fa-times text-xl"></i>
+				</button>
+			</div>
+			<form method="POST">
+				<input type="hidden" name="add_note" value="1" />
+				<input type="hidden" name="case_id" value="0" />
+
+				<div className="mb-4">
+					<label className="block text-sm font-semibold text-gray-700 mb-2">Заголовок</label>
+					<input type="text" name="note_title" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500" placeholder="Краткое описание" />
+				</div>
+
+				<div className="mb-4">
+					<label className="block text-sm font-semibold text-gray-700 mb-2">Содержание</label>
+					<textarea name="note_content" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500" placeholder="Подробное описание"></textarea>
+				</div>
+
+				<div className="mb-4">
+					<label className="block text-sm font-semibold text-gray-700 mb-2">Приоритет</label>
+					<select name="priority" className="w-full px-4 py-2 border border-gray-300 rounded-lg">
+						<option value="low">🟢 Низкий</option>
+						<option value="medium">🟡 Средний</option>
+						<option value="high">🟠 Высокий</option>
+						<option value="urgent">🔴 Срочный</option>
+					</select>
+				</div>
+
+				<div className="flex space-x-2">
+					<button type="submit" className="flex-1 px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition font-semibold">
+						<i className="fas fa-save mr-2"></i>Сохранить
+					</button>
+					<button type="button" className="px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition font-semibold">
+						Отмена
+					</button>
+				</div>
+			</form>
+		</div>
+	)
+}

src/app/ui/main-page/actions-modals/action-time.tsx

@@ -0,0 +1,46 @@
+export default function ActionTime() {
+	return (
+		<div className="">
+			<div className="flex items-center justify-between mb-4">
+				<h3 className="text-xl font-bold text-gray-800">
+					<i className="fas fa-clock mr-2 text-green-500"></i>
+					Добавить время работы
+				</h3>
+				<button className="text-gray-400 hover:text-gray-600">
+					<i className="fas fa-times text-xl"></i>
+				</button>
+			</div>
+			<form method="POST">
+				<input type="hidden" name="add_time" value="1" />
+				<input type="hidden" name="case_id" id="timeModalCaseId" value="" />
+
+				<div className="grid grid-cols-2 gap-4 mb-4">
+					<div>
+						<label className="block text-sm font-semibold text-gray-700 mb-2">Описание</label>
+						<input type="text" name="time_description" className="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Что было сделано" />
+					</div>
+					<div>
+						<label className="block text-sm font-semibold text-gray-700 mb-2">Часы</label>
+						<input type="number" name="hours" step="0.25" min="0.25" className="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="1.5" />
+					</div>
+				</div>
+
+				<div className="mb-4">
+					<label className="flex items-center space-x-2">
+						<input type="checkbox" name="billable" className="rounded" />
+						<span className="text-sm text-gray-700">Оплачиваемое время</span>
+					</label>
+				</div>
+
+				<div className="flex space-x-2">
+					<button type="submit" className="flex-1 px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-semibold">
+						<i className="fas fa-plus mr-2"></i>Добавить
+					</button>
+					<button type="button" className="px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition font-semibold">
+						Отмена
+					</button>
+				</div>
+			</form>
+		</div>
+	)
+}

src/app/ui/main-page/cases-list.tsx

@@ -39,7 +39,7 @@ export default function CasesList() {
 					<i className="fas fa-sync-alt mr-2">
 						<IconRefresh />
 					</i>
-					Показать все дела (12)
+					Показать все дела (0)
 				</button>
 			</div>
 

src/app/ui/main-page/quick-actions.tsx

@@ -1,63 +1,122 @@
+'use client'
+
 import { IconBlank, IconDocument, IconClock, IconGraphMultiple } from '@/app/ui/icons/icons';
+import { useState } from 'react';
+import ModalWindow from '@/app/components/modalWindow';
+import ActionAnalytics from '@/app/ui/main-page/actions-modals/action-analytics';
+import ActionDocuments from '@/app/ui/main-page/actions-modals/action-documents';
+import ActionNote from '@/app/ui/main-page/actions-modals/action-note';
+import ActionTime from '@/app/ui/main-page/actions-modals/action-time';
 
 export default function QuickActions() {
+	const [showModal, setShowModal] = useState(false);
+	const [showModalContent, setShowModalContent] = useState<string | null>(null);
+
 	return (
-		<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
-			<button className="quick-action-modern">
-				<div className="flex items-center space-x-4">
-					<div className="bg-blue-500 text-white rounded-lg p-3">
-						<i className="fas fa-sticky-note text-xl">
-							<IconBlank />
-						</i>
-					</div>
-					<div className="text-left">
-						<h4 className="font-bold text-gray-800">Заметка</h4>
-						<p className="text-sm text-gray-600">Создать</p>
-					</div>
-				</div>
-			</button>
+		<>
+			<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
 
-			<button className="quick-action-modern">
-				<div className="flex items-center space-x-4">
-					<div className="bg-green-500 text-white rounded-lg p-3">
-						<i className="fas fa-clock text-xl">
-							<IconClock />
-						</i>
+				<button
+					className="quick-action-modern"
+					onClick={() => {
+						setShowModal(true);
+						setShowModalContent('note');
+					}}
+				>
+					<div className="flex items-center space-x-4">
+						<div className="bg-blue-500 text-white rounded-lg p-3">
+							<i className="fas fa-sticky-note text-xl">
+								<IconBlank />
+							</i>
+						</div>
+						<div className="text-left">
+							<h4 className="font-bold text-gray-800">Заметка</h4>
+							<p className="text-sm text-gray-600">Создать</p>
+						</div>
 					</div>
-					<div className="text-left">
-						<h4 className="font-bold text-gray-800">Время</h4>
-						<p className="text-sm text-gray-600">Добавить</p>
-					</div>
-				</div>
-			</button>
+				</button>
 
-			<button className="quick-action-modern">
-				<div className="flex items-center space-x-4">
-					<div className="bg-purple-500 text-white rounded-lg p-3">
-						<i className="fas fa-chart-bar text-xl">
-							<IconGraphMultiple />
-						</i>
+				<button
+					className="quick-action-modern"
+					onClick={() => {
+						setShowModal(true);
+						setShowModalContent('time');
+					}}
+				>
+					<div className="flex items-center space-x-4">
+						<div className="bg-green-500 text-white rounded-lg p-3">
+							<i className="fas fa-clock text-xl">
+								<IconClock />
+							</i>
+						</div>
+						<div className="text-left">
+							<h4 className="font-bold text-gray-800">Время</h4>
+							<p className="text-sm text-gray-600">Добавить</p>
+						</div>
 					</div>
-					<div className="text-left">
-						<h4 className="font-bold text-gray-800">Аналитика</h4>
-						<p className="text-sm text-gray-600">Открыть</p>
-					</div>
-				</div>
-			</button>
+				</button>
 
-			<button className="quick-action-modern">
-				<div className="flex items-center space-x-4">
-					<div className="bg-orange-500 text-white rounded-lg p-3">
-						<i className="fas fa-file-alt text-xl">
-							<IconDocument />
-						</i>
+				<button
+					className="quick-action-modern"
+					onClick={() => {
+						setShowModal(true);
+						setShowModalContent('analytics');
+					}}
+				>
+					<div className="flex items-center space-x-4">
+						<div className="bg-purple-500 text-white rounded-lg p-3">
+							<i className="fas fa-chart-bar text-xl">
+								<IconGraphMultiple />
+							</i>
+						</div>
+						<div className="text-left">
+							<h4 className="font-bold text-gray-800">Аналитика</h4>
+							<p className="text-sm text-gray-600">Открыть</p>
+						</div>
 					</div>
-					<div className="text-left">
-						<h4 className="font-bold text-gray-800">Шаблоны</h4>
-						<p className="text-sm text-gray-600">Документы</p>
+				</button>
+
+				<button
+					className="quick-action-modern"
+					onClick={() => {
+						setShowModal(true);
+						setShowModalContent('documents');
+					}}
+				>
+					<div className="flex items-center space-x-4">
+						<div className="bg-orange-500 text-white rounded-lg p-3">
+							<i className="fas fa-file-alt text-xl">
+								<IconDocument />
+							</i>
+						</div>
+						<div className="text-left">
+							<h4 className="font-bold text-gray-800">Шаблоны</h4>
+							<p className="text-sm text-gray-600">Документы</p>
+						</div>
 					</div>
-				</div>
-			</button>
-		</div>
+				</button>
+
+			</div>
+
+			<ModalWindow state={showModal} callBack={() => {
+				setShowModal(false);
+			}}>
+				{(() => {
+					switch (showModalContent) {
+						case 'note':
+							return <ActionNote />
+						case 'time':
+							return <ActionTime />
+						case 'analytics':
+							return <ActionAnalytics />
+						case 'documents':
+							return <ActionDocuments />
+						default:
+							return <div>none</div>;
+					}
+				})()}
+
+			</ModalWindow>
+		</>
 	)
 }