update docs

web-server/public/css/styles.css

@@ -1724,12 +1724,155 @@ tbody tr:hover td.action-col {
   min-width: 980px;
 }
 
+.documents-table {
+  min-width: 980px;
+}
+
+.document-title-cell {
+  max-width: 360px;
+  min-width: 240px;
+}
+
+.document-title-cell .table-subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.document-file-name {
+  color: var(--text-primary);
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.document-detail-grid {
+  display: grid;
+  flex: 1;
+  gap: 16px;
+  grid-template-columns: 320px minmax(0, 1fr);
+  min-height: 0;
+}
+
+.document-meta-panel,
+.document-reader-panel {
+  min-width: 0;
+}
+
+.document-reader {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 20px;
+  min-height: 0;
+  overflow: auto;
+  padding: 20px;
+}
+
+.document-copy {
+  color: var(--text-primary);
+  font-family: "Montserrat Variable", Montserrat, "Segoe UI", sans-serif;
+  font-size: 14px;
+  line-height: 1.75;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.document-preview-block {
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 16px;
+}
+
+.document-section-heading {
+  align-items: center;
+  color: var(--text-secondary);
+  display: flex;
+  font-size: 12px;
+  gap: 6px;
+}
+
+.document-section-heading .material-symbols-outlined {
+  color: var(--brand-primary);
+  font-size: 18px;
+}
+
+.document-file-preview {
+  background: var(--neutral-50);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  min-height: 540px;
+  width: 100%;
+}
+
+.document-image-preview {
+  align-self: center;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  height: auto;
+  max-height: 70vh;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+.document-attachment-state {
+  align-items: center;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: 14px;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding: 16px;
+}
+
+.document-attachment-state > .material-symbols-outlined {
+  color: var(--brand-primary);
+  font-size: 34px;
+}
+
+.document-attachment-state strong,
+.document-attachment-state p {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.document-attachment-state p {
+  color: var(--text-secondary);
+  font-size: 12px;
+  margin-top: 3px;
+}
+
+.document-remove-option {
+  align-items: flex-start;
+  background: var(--semantic-warning-bg);
+  border: 1px solid #f3d28c;
+  border-radius: var(--radius-md);
+  color: var(--semantic-warning);
+  display: flex;
+  font-size: 12px;
+  gap: 8px;
+  padding: 10px 12px;
+}
+
+.document-remove-option input {
+  flex: 0 0 auto;
+  margin-top: 3px;
+}
+
 @media (max-width: 1100px) {
   .dashboard-grid,
   .detail-grid,
   .builder-layout,
   .agent-layout,
-  .users-layout {
+  .users-layout,
+  .document-detail-grid {
     grid-template-columns: 1fr;
   }
 
@@ -1740,9 +1883,14 @@ tbody tr:hover td.action-col {
   .detail-grid,
   .builder-layout,
   .agent-layout,
-  .users-layout {
+  .users-layout,
+  .document-detail-grid {
     overflow: auto;
   }
+
+  .document-reader-panel {
+    min-height: 620px;
+  }
 }
 
 @media (max-width: 900px) {
@@ -1833,6 +1981,16 @@ tbody tr:hover td.action-col {
     gap: 8px;
   }
 
+  .document-attachment-state {
+    align-items: flex-start;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .document-attachment-state .btn {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
   .modal-backdrop {
     align-items: flex-end;
   }

web-server/public/js/app.js

@@ -15,6 +15,7 @@
     database_off: 'database_warning_20_regular.svg',
     delete: 'delete_20_regular.svg',
     deployed_code: 'cube_24_regular.svg',
+    description: 'document_24_regular.svg',
     download: 'arrow_download_20_regular.svg',
     draft: 'document_24_regular.svg',
     edit: 'edit_20_regular.svg',
@@ -22,6 +23,7 @@
     forward_to_inbox: 'mail_arrow_forward_20_regular.svg',
     group: 'people_24_regular.svg',
     inventory_2: 'box_24_regular.svg',
+    library_books: 'library_24_regular.svg',
     link_off: 'link_dismiss_20_regular.svg',
     login: 'arrow_enter_20_regular.svg',
     logout: 'sign_out_20_regular.svg',
@@ -30,6 +32,7 @@
     menu: 'navigation_20_regular.svg',
     notifications: 'alert_20_regular.svg',
     notifications_none: 'alert_off_20_regular.svg',
+    note_add: 'document_add_24_regular.svg',
     person_add: 'person_add_20_regular.svg',
     precision_manufacturing: 'bot_24_filled.svg',
     save: 'save_20_regular.svg',
@@ -451,7 +454,8 @@
       createdAt: row.dataset.userCreatedAt || '',
       updatedAt: row.dataset.userUpdatedAt || '',
       packageCount: row.dataset.userPackageCount || '0',
-      applicationCount: row.dataset.userApplicationCount || '0'
+      applicationCount: row.dataset.userApplicationCount || '0',
+      documentCount: row.dataset.userDocumentCount || '0'
     };
   }
 
@@ -561,7 +565,10 @@
     setText('[data-user-detail="status"]', user.status);
     setText('[data-user-detail="createdAt"]', user.createdAt);
     setText('[data-user-detail="updatedAt"]', user.updatedAt || 'Chưa cập nhật');
-    setText('[data-user-detail="ownedData"]', `${user.packageCount} packages, ${user.applicationCount} apps`);
+    setText(
+      '[data-user-detail="ownedData"]',
+      `${user.packageCount} packages, ${user.applicationCount} apps, ${user.documentCount} tài liệu`
+    );
 
     openModal('userDetailModal');
   }