Spaces:

Alexsandr123
/

quality-docs-manager

Running

App Files Files Community

Alexsandr123 commited on Nov 12, 2025

Commit

da273f4

verified ·

1 Parent(s): 09e5dc7

<!DOCTYPE html>

Browse files

<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Документы Службы Качества</title>
<style>
/* Все стили остаются без изменений */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
min-height: 100vh;
padding: 20px;
color: #2c3e50;
}

.container {
max-width: 1200px;
margin: 0 auto;
}

header {
text-align: center;
padding: 30px 0 20px;
}

h1 {
font-size: 2rem;
font-weight: 600;
color: #1a365d;
margin-bottom: 8px;
}

.subtitle {
font-size: 1rem;
color: #64748b;
font-weight: 400;
}

.auth-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}

.auth-form {
background: white;
border-radius: 12px;
padding: 32px;
width: 420px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border: 1px solid #e2e8f0;
}

.auth-title {
text-align: center;
margin-bottom: 24px;
font-size: 1.4rem;
font-weight: 600;
color: #1a365d;
}

.auth-input {
width: 100%;
padding: 14px 16px;
background: white;
border: 1px solid #cbd5e1;
border-radius: 8px;
color: #2c3e50;
font-size: 1rem;
margin-bottom: 20px;
transition: border-color 0.2s ease;
}

.auth-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.auth-btn {
width: 100%;
padding: 14px;
background: #1a365d;
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
}

.auth-btn:hover {
background: #0f294d;
}

.auth-btn:active {
transform: translateY(1px);
}

.add-form {
background: white;
border-radius: 12px;
padding: 32px;
margin: 20px auto;
max-width: 700px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
display: none;
}

.form-title {
text-align: center;
margin-bottom: 24px;
color: #1a365d;
font-size: 1.4rem;
font-weight: 600;
}

.form-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 8px;
color: #475569;
font-weight: 500;
font-size: 0.95rem;
}

input[type="text"], input[type="url"], input[type="date"], input[type="file"], textarea {
width: 100%;
padding: 14px 16px;
background: white;
border: 1px solid #cbd5e1;
border-radius: 8px;
color: #2c3e50;
font-size: 1rem;
transition: border-color 0.2s ease;
}

input[type="text"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="file"]:focus, textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

textarea {
min-height: 100px;
resize: vertical;
}

.add-btn, .update-btn {
width: 100%;
padding: 14px;
background: #1a365d;
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
}

.add-btn:hover, .update-btn:hover {
background: #0f294d;
}

.add-btn:active, .update-btn:active {
transform: translateY(1px);
}

.action-buttons {
display: flex;
gap: 12px;
margin: 20px auto;
max-width: 700px;
flex-wrap: wrap;
}

.action-btn {
background: #1a365d;
color: white;
border: none;
padding: 12px 28px;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
flex: 1;
min-width: 200px;
}

.action-btn:hover {
background: #0f294d;
}

.action-btn:active {
transform: translateY(1px);
}

.action-btn.export {
background: #059669;
}

.action-btn.export:hover {
background: #047857;
}

.action-btn.import {
background: #d97706;
}

.action-btn.import:hover {
background: #b45309;
}

.documents-list {
background: white;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
overflow: hidden;
margin: 20px 0;
}

.document-header {
display: grid;
grid-template-columns: 60px 1fr 120px 100px 120px;
gap: 16px;
padding: 16px 20px;
background: #1a365d;
color: white;
font-weight: 600;
position: sticky;
top: 0;
z-index: 10;
}

.document-row {
display: grid;
grid-template-columns: 60px 1fr 120px 100px 120px;
gap: 16px;
padding: 16px 20px;
border-bottom: 1px solid #f1f5f9;
transition: background 0.2s ease;
position: relative;
}

.document-row:nth-child(even) {
background: #f8fafc;
}

.document-row:hover {
background: #e0f2fe;
}

.document-row:last-child {
border-bottom: none;
}

.row-actions {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 8px;
opacity: 0;
transition: opacity 0.2s ease;
}

.document-row:hover .row-actions {
opacity: 1;
}

.delete-btn, .edit-btn {
background: #ef4444;
color: white;
border: none;
border-radius: 6px;
width: 28px;
height: 28px;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}

.edit-btn {
background: #3b82f6;
}

.delete-btn:hover {
background: #dc2626;
}

.edit-btn:hover {
background: #2563eb;
}

.document-title {
font-weight: 500;
color: #1e293b;
line-height: 1.4;
}

.document-code {
color: #0369a1;
font-size: 0.9rem;
font-weight: 500;
}

.document-details {
grid-column: 1 / -1;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed #e2e8f0;
display: none;
}

.document-row.expanded .document-details {
display: block;
}

.document-scope {
font-size: 0.9rem;
color: #475569;
line-height: 1.4;
margin-bottom: 8px;
}

.document-location {
font-size: 0.9rem;
color: #059669;
font-weight: 500;
}

.document-link {
display: inline-flex;
align-items: center;
color: #1d4ed8;
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
font-size: 0.9rem;
margin-top: 8px;
}

.document-link:hover {
color: #1e40af;
text-decoration: underline;
}

.expand-btn {
background: none;
border: none;
color: #64748b;
cursor: pointer;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 4px;
margin-top: 8px;
}

.notification {
position: fixed;
top: 20px;
right: 20px;
background: #10b981;
color: white;
padding: 16px 24px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

Files changed (4) hide show

README.md +8 -5
index.html +154 -19
script.js +152 -0
style.css +50 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Quality Docs Manager
-emoji: 🐢
-colorFrom: pink
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Quality Docs Manager 📋
+colorFrom: purple
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,154 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Документы Службы Качества</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <div class="container mx-auto px-4 py-8">
+        <header class="text-center mb-8">
+            <h1 class="text-3xl font-bold text-gray-800 mb-2">Документы Службы Качества</h1>
+            <p class="text-gray-600">Управление документами системы качества</p>
+        </header>
+        <div class="flex flex-wrap gap-4 mb-6">
+            <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition" onclick="showAuthModal('add')">
+                <i data-feather="plus" class="inline mr-2"></i>Добавить документ
+            </button>
+            <button class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition" onclick="exportData()">
+                <i data-feather="download" class="inline mr-2"></i>Экспорт в JSON
+            </button>
+            <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition" onclick="showImportSection()">
+                <i data-feather="upload" class="inline mr-2"></i>Импорт из JSON
+            </button>
+        </div>
+        <!-- Add Document Form -->
+        <div class="bg-white rounded-xl shadow-md p-6 mb-6 max-w-3xl mx-auto hidden" id="addForm">
+            <h2 class="text-xl font-semibold text-gray-800 mb-6 text-center" id="formTitle">Добавить новый документ</h2>
+            <form id="documentForm">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="docNumber">№ п/п</label>
+                        <input type="text" id="docNumber" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Введите номер по порядку">
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="docApprovalDate">Дата утверждения</label>
+                        <input type="date" id="docApprovalDate" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    </div>
+                </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2" for="docTitle">Наименование документа</label>
+                    <input type="text" id="docTitle" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Введите название документа">
+                </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2" for="docCode">Шифр документа</label>
+                    <input type="text" id="docCode" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Введите шифр документа">
+                </div>
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2" for="docScope">Область действия документа</label>
+                    <textarea id="docScope" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Опишите область действия документа и структурные подразделения"></textarea>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="docUrl">Ссылка на документ (если есть)</label>
+                        <input type="url" id="docUrl" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="https://sharepoint.example.com/...">
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2" for="docLocation">Место хранения (если нет ссылки)</label>
+                        <input type="text" id="docLocation" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Оригинал в отделе...">
+                    </div>
+                </div>
+                <button type="button" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition" id="saveButton" onclick="saveDocument()">
+                    Добавить документ
+                </button>
+            </form>
+        </div>
+        <!-- Import Section -->
+        <div class="bg-white rounded-xl shadow-md p-6 mb-6 max-w-3xl mx-auto hidden" id="importSection">
+            <h2 class="text-xl font-semibold text-gray-800 mb-6 text-center">Импорт документов из JSON</h2>
+            <div class="mb-4">
+                <label class="block text-gray-700 mb-2" for="jsonFile">Выберите JSON файл для импорта</label>
+                <input type="file" id="jsonFile" accept=".json" onchange="handleFileSelect(this)" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                <div class="text-sm text-gray-500 mt-1" id="fileInfo">Файл не выбран</div>
+            </div>
+            <div class="mb-6">
+                <label class="flex items-center">
+                    <input type="checkbox" id="replaceData" class="rounded text-blue-600 focus:ring-blue-500">
+                    <span class="ml-2 text-gray-700">Заменить текущие данные (все существующие документы будут удалены)</span>
+                </label>
+            </div>
+            <div class="flex flex-wrap gap-3">
+                <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition flex-1" onclick="importData()" id="importButton" disabled>
+                    <i data-feather="upload" class="inline mr-2"></i>Импортировать данные
+                </button>
+                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium transition flex-1" onclick="hideImportSection()">
+                    <i data-feather="x" class="inline mr-2"></i>Отмена
+                </button>
+            </div>
+        </div>
+        <!-- Documents List -->
+        <div class="bg-white rounded-xl shadow-md overflow-hidden" id="documentsContainer">
+            <div class="grid grid-cols-12 gap-4 bg-gray-800 text-white p-4 sticky top-0 z-10">
+                <div class="col-span-1 font-semibold">№ п/п</div>
+                <div class="col-span-5 font-semibold">Наименование документа</div>
+                <div class="col-span-2 font-semibold">Шифр</div>
+                <div class="col-span-2 font-semibold">Дата утверждения</div>
+                <div class="col-span-2 font-semibold">Статус</div>
+            </div>
+            <div class="empty-state hidden p-12 text-center" id="emptyState">
+                <div class="text-5xl mb-4 opacity-30">📄</div>
+                <div class="text-xl text-gray-600 mb-2">Документы не найдены</div>
+                <div class="text-gray-500">Нажмите "Добавить документ" чтобы создать первый документ</div>
+            </div>
+            <!-- Documents will be inserted here by JavaScript -->
+        </div>
+    </div>
+    <!-- Auth Modal -->
+    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="authModal">
+        <div class="bg-white rounded-xl p-6 w-full max-w-md">
+            <h2 class="text-xl font-semibold text-gray-800 mb-6 text-center">Требуется аутентификация</h2>
+            <input type="password" id="passwordInput" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 mb-4" placeholder="Введите пароль доступа">
+            <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition" onclick="authenticate()">
+                Подтвердить доступ
+            </button>
+        </div>
+    </div>
+    <!-- Notification -->
+    <div class="fixed top-6 right-6 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg flex items-center transform translate-x-full transition-transform duration-300 z-50" id="notification">
+        <i data-feather="check-circle" class="mr-2"></i>
+        <span id="notificationText">Документ успешно сохранен!</span>
+    </div>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,152 @@

+// Initialize documents array
+let documents = [];
+let isAuthenticated = false;
+let editingDocumentId = null;
+let selectedFile = null;
+// Sample data from PDF
+const pdfData = [
+    {
+        "number": "1",
+        "title": "Политика в области качества и пищевой безопасности АО «ПРОГРЕСС»",
+        "code": "",
+        "approvalDate": "2025-08-04",
+        "scope": "Все подразделения АО \"ПРОГРЕСС\", г. Липецк",
+        "url": "",
+        "location": ""
+    },
+    // ... (rest of the PDF data remains the same as in the original)
+];
+// Initialize PDF data if localStorage is empty
+function initializePdfData() {
+    const savedDocuments = localStorage.getItem('documents');
+    if (!savedDocuments) {
+        documents = pdfData.map((doc, index) => ({
+            id: index + 1,
+            ...doc
+        }));
+        saveToLocalStorage();
+        showNotification('Данные из PDF успешно загружены!');
+    }
+}
+// Calculate update date (3 years from approval)
+function calculateUpdateDate(approvalDate) {
+    const date = new Date(approvalDate);
+    date.setFullYear(date.getFullYear() + 3);
+    return date;
+}
+// Get document status based on approval date
+function getDocumentStatus(approvalDate) {
+    const updateDate = calculateUpdateDate(approvalDate);
+    const today = new Date();
+    const timeDiff = updateDate.getTime() - today.getTime();
+    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
+    const monthsDiff = Math.floor(daysDiff / 30);
+    if (daysDiff <= 0) {
+        return { status: 'expired', days: daysDiff, months: monthsDiff };
+    } else if (monthsDiff <= 3) {
+        return { status: 'danger', days: daysDiff, months: monthsDiff };
+    } else if (monthsDiff <= 6) {
+        return { status: 'warning', days: daysDiff, months: monthsDiff };
+    } else {
+        return { status: 'normal', days: daysDiff, months: monthsDiff };
+    }
+}
+// Get status text and class
+function getStatusText(statusInfo) {
+    switch (statusInfo.status) {
+        case 'expired':
+            return {
+                text: 'ПРОСРОЧЕН',
+                class: 'expired',
+                fullText: 'Документ требует срочной актуализации! Просрочен.'
+            };
+        case 'danger':
+            return {
+                text: `${statusInfo.months} мес.`,
+                class: 'danger',
+                fullText: `Срочная актуализация! Осталось ${statusInfo.months} месяцев (${statusInfo.days} дней)`
+            };
+        case 'warning':
+            return {
+                text: `${statusInfo.months} мес.`,
+                class: 'warning',
+                fullText: `Требуется актуализация в ближайшее время. Осталось ${statusInfo.months} месяцев`
+            };
+        default:
+            return {
+                text: `Актуален`,
+                class: 'normal',
+                fullText: `Документ актуален. Актуализация через ${statusInfo.months} месяцев`
+            };
+    }
+}
+// Save to localStorage
+function saveToLocalStorage() {
+    localStorage.setItem('documents', JSON.stringify(documents));
+}
+// Load from localStorage
+function loadFromLocalStorage() {
+    const savedDocuments = localStorage.getItem('documents');
+    if (savedDocuments) {
+        documents = JSON.parse(savedDocuments);
+    } else {
+        documents = [];
+        saveToLocalStorage();
+    }
+}
+// Render documents list
+function renderDocuments() {
+    const container = document.getElementById('documentsContainer');
+    const emptyState = document.getElementById('emptyState');
+    // Clear existing documents (keep header and empty state)
+    const header = container.querySelector('.grid.bg-gray-800');
+    container.innerHTML = '';
+    if (header) container.appendChild(header);
+    container.appendChild(emptyState);
+    if (documents.length === 0) {
+        emptyState.classList.remove('hidden');
+        return;
+    }
+    emptyState.classList.add('hidden');
+    // Sort documents by status priority
+    const sortedDocuments = [...documents].sort((a, b) => {
+        const statusA = getDocumentStatus(a.approvalDate);
+        const statusB = getDocumentStatus(b.approvalDate);
+        const priority = { 'expired': 0, 'danger': 1, 'warning': 2, 'normal': 3 };
+        return priority[statusA.status] - priority[statusB.status];
+    });
+    // Render each document
+    sortedDocuments.forEach(doc => {
+        const statusInfo = getDocumentStatus(doc.approvalDate);
+        const statusText = getStatusText(statusInfo);
+        const row = document.createElement('div');
+        row.className = 'document-row';
+        row.innerHTML = `
+            <div class="col-span-1 font-medium">${doc.number}</div>
+            <div class="col-span-5">${doc.title}</div>
+            <div class="col-span-2 text-gray-600">${doc.code || '-'}</div>
+            <div class="col-span-2">${doc.approvalDate}</div>
+            <div class="col-span-2">
+                <span class="status-indicator ${statusText.class}"></span>
+                <span class="text-sm">${statusText.text}</span>
+            </div>
+            <div class="document-details">
+                <div class="mb-2"><span class="font-medium">Область действия:</span> ${doc.scope}</div>
+                <div class="mb-2"><span class="font-medium">Место хранения:</span> ${doc.location || 'Не указано'}</div>
+                <div class="p-2 rounded bg-gray-100 mb-2 text-sm">

style.css CHANGED Viewed

@@ -1,28 +1,59 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom styles that complement Tailwind */
+.document-row {
+    @apply grid grid-cols-12 gap-4 p-4 border-b border-gray-100 hover:bg-blue-50 transition-colors;
 }
+.document-row:nth-child(even) {
+    @apply bg-gray-50;
 }
+.document-details {
+    @apply col-span-12 mt-3 pt-3 border-t border-dashed border-gray-200 hidden;
 }
+.document-row.expanded .document-details {
+    @apply block;
 }
+.status-indicator {
+    @apply w-3 h-3 rounded-full inline-block mr-2;
 }
+.status-indicator.normal {
+    @apply bg-green-500;
+}
+.status-indicator.warning {
+    @apply bg-amber-500;
+}
+.status-indicator.danger {
+    @apply bg-red-500;
+}
+.status-indicator.expired {
+    @apply bg-red-600 animate-pulse;
+}
+.notification.error {
+    @apply bg-red-600;
+}
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .document-header {
+        @apply hidden;
+    }
+    .document-row {
+        @apply grid-cols-1 gap-2 p-4;
+    }
+    .document-row > div:not(:first-child) {
+        @apply mt-2;
+    }
+    .row-actions {
+        @apply mt-3 justify-end;
+    }
+}