frontdev/no-copy-legal-panel-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add modal windows

Browse Source
This commit is contained in:
smanylov
2026-01-16 17:07:02 +07:00
parent a6eea2fe0a
commit 7f56debe16
8 changed files with 333 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/modalWindow.tsx
+29
View File
@@ -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
+33
View File
@@ -72,6 +72,11 @@
padding: 1.5rem; padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease; 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); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease; transition: all 0.3s ease;
border: 1px solid transparent; 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 { .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
+34
View File
@@ -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
+33
View File
@@ -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
+48
View File
@@ -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
+46
View File
@@ -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
+1 -1
View File
@@ -39,7 +39,7 @@ export default function CasesList() {
<i className="fas fa-sync-alt mr-2"> <i className="fas fa-sync-alt mr-2">
<IconRefresh /> <IconRefresh />
</i> </i>
Показать все дела (12) Показать все дела (0)
</button> </button>
</div> </div>
src/app/ui/main-page/quick-actions.tsx
+109 -50
View File
@@ -1,63 +1,122 @@
'use client'
import { IconBlank, IconDocument, IconClock, IconGraphMultiple } from '@/app/ui/icons/icons'; 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() { export default function QuickActions() {
const [showModal, setShowModal] = useState(false);
const [showModalContent, setShowModalContent] = useState<string | null>(null);
return ( return (
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> <>
<button className="quick-action-modern"> <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<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>
<button className="quick-action-modern"> <button
<div className="flex items-center space-x-4"> className="quick-action-modern"
<div className="bg-green-500 text-white rounded-lg p-3"> onClick={() => {
<i className="fas fa-clock text-xl"> setShowModal(true);
<IconClock /> setShowModalContent('note');
</i> }}
>
<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>
<div className="text-left"> </button>
<h4 className="font-bold text-gray-800">Время</h4>
<p className="text-sm text-gray-600">Добавить</p>
</div>
</div>
</button>
<button className="quick-action-modern"> <button
<div className="flex items-center space-x-4"> className="quick-action-modern"
<div className="bg-purple-500 text-white rounded-lg p-3"> onClick={() => {
<i className="fas fa-chart-bar text-xl"> setShowModal(true);
<IconGraphMultiple /> setShowModalContent('time');
</i> }}
>
<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>
<div className="text-left"> </button>
<h4 className="font-bold text-gray-800">Аналитика</h4>
<p className="text-sm text-gray-600">Открыть</p>
</div>
</div>
</button>
<button className="quick-action-modern"> <button
<div className="flex items-center space-x-4"> className="quick-action-modern"
<div className="bg-orange-500 text-white rounded-lg p-3"> onClick={() => {
<i className="fas fa-file-alt text-xl"> setShowModal(true);
<IconDocument /> setShowModalContent('analytics');
</i> }}
>
<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>
<div className="text-left"> </button>
<h4 className="font-bold text-gray-800">Шаблоны</h4>
<p className="text-sm text-gray-600">Документы</p> <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>
</div> </button>
</button>
</div> </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>
</>
) )
} }