igor_nadein
243fffc126
PROBLEM:
- Document cards had unstructured layout with all elements mixed together
- No clear visual separation between sections
- Poor readability and cluttered appearance
- Actions scattered without logical grouping
SOLUTION:
Completely restructured document cards into 3 distinct sections:
1. HEADER (with light background and border-bottom)
- Checkbox + Title (h3 with semibold)
- Status badges (primary + acknowledgement)
- Quick action buttons (Preview/PDF + Details) on the right
- Improved: Buttons now have solid backgrounds (bg-sky-100, bg-gray-100) for better visibility
2. BODY (main content area)
- Description (only if exists, with better line-height)
- Metadata grid (3 columns on large screens):
• Folder location (sky background with FolderOpen icon)
• Author (gray background with User icon)
• Created date (gray background with Calendar icon)
- Workflow actions (only for draft/review/approved/rejected states)
- Better spacing and visual hierarchy
3. FOOTER (conditional, only when needed)
- Shows only if document has acknowledgement requirement OR is published/archived
- Acknowledgement actions (Ознакомиться + Ведомость buttons)
- Workflow for published/archived states (aligned right)
- Light background matching header
IMPROVEMENTS:
- Clear visual sections with borders and backgrounds
- Metadata in colored pill-shaped cards instead of plain text
- Icons for all metadata fields (folder, user, calendar)
- Removed redundant 'Updated' field (not essential)
- Removed empty description text ('Описание не заполнено')
- Better button hierarchy: primary actions in header, secondary in footer
- Larger, more clickable buttons (px-3 py-1.5 instead of px-2.5 py-1)
- Consistent rounded-lg instead of mix of rounded-full/rounded-lg
- Better hover states (bg-sky-200 instead of bg-sky-100)
- Conditional rendering: footer only appears when necessary
VISUAL DESIGN:
- Header: bg-gray-50/50 with border-bottom
- Body: white background, clean content area
- Footer: bg-gray-50/50 with border-top
- Metadata cards: colored backgrounds (sky-50 for folder, gray-50 for others)
- Better border colors: border-gray-200 instead of border-gray-100
This matches the structure of modern DMS systems like Notion, Confluence, and Google Drive where cards have clear header/body/footer separation.
Документация проекта EUSRR
Эта папка содержит всю документацию проекта, организованную по категориям.
📁 Структура
completed/
Завершенные задачи: рефакторинги, исправления, реализованные фичи (22 файла)
guides/
Активные руководства и инструкции для разработчиков (гайды по валидации, миграции, настройке)
architecture/
Архитектурная документация и анализ систем (рендеринг чата, архитектура страниц)
diagnostic/
Диагностические руководства (WebSocket 1006, отладка проблем)
in-progress/
Активные задачи в разработке (закупки, получатели заявок, календарь)
reports/
Отчеты и аудиты проекта (реорганизация документации, план очистки)
📝 Главная документация
- README.md - основная документация проекта
- docs/reports/ - отчеты и планы по проекту
🔍 Поиск информации
- Завершенные фичи →
completed/ - Как настроить X →
guides/ - Как работает Y →
architecture/ - Проблемы с Z →
diagnostic/ - Что в разработке →
in-progress/ - Отчеты и аудиты →
reports/