created_at swagger

frontend/src/documents/documentSummary.js

@@ -58,9 +58,8 @@ export const describeDocumentSummary = (document, options = {}) => {
       originalName: '',
       mimeTypeLabel: '—',
       sizeLabel: '—',
-      uploadedAtLabel: '—',
-      issuedAtLabel: '—',
       createdAtLabel: '—',
+      issuedAtLabel: '—',
       updatedAtLabel: '—',
       pageCount: null,
       pageCountLabel: '—',
@@ -88,9 +87,8 @@ export const describeDocumentSummary = (document, options = {}) => {
   const pageCount = coercePageCount(metadata);
   const pageCountLabel = Number.isFinite(pageCount) ? String(pageCount) : '—';
 
-  const uploadedAtLabel = formatDateTime(document.uploaded_at);
-  const issuedAtLabel = formatDateTime(document.issued_at);
   const createdAtLabel = formatDateTime(document.created_at);
+  const issuedAtLabel = formatDateTime(document.issued_at);
   const updatedAtLabel = formatDateTime(document.updated_at);
 
   const folderLabel = document.folder_path || document.folder_name || null;
@@ -107,12 +105,11 @@ export const describeDocumentSummary = (document, options = {}) => {
     : '—';
 
   const summaryRows = [
-    { key: 'uploaded', label: 'Uploaded', value: uploadedAtLabel },
+    { key: 'created', label: 'Created', value: createdAtLabel },
     { key: 'size', label: 'Size', value: sizeLabel },
     { key: 'type', label: 'Type', value: mimeTypeLabel },
     { key: 'issued', label: 'Issued', value: issuedAtLabel },
     { key: 'pages', label: 'Pages', value: pageCountLabel },
-    { key: 'created', label: 'Created', value: createdAtLabel },
     { key: 'updated', label: 'Updated', value: updatedAtLabel },
     { key: 'folder', label: 'Folder', value: folderLabel || '—' },
     { key: 'tags', label: 'Tags', value: tagsSummary },
@@ -124,9 +121,8 @@ export const describeDocumentSummary = (document, options = {}) => {
     originalName,
     mimeTypeLabel,
     sizeLabel,
-    uploadedAtLabel,
-    issuedAtLabel,
     createdAtLabel,
+    issuedAtLabel,
     updatedAtLabel,
     pageCount,
     pageCountLabel,

frontend/src/index.jsx

@@ -330,7 +330,7 @@ const isAssetEquivalent = (lhs, rhs) => {
     && lhsPrimaryMetadata?.height === rhsPrimaryMetadata?.height
     && lhs.mime_type === rhs.mime_type
     && lhs.asset_type === rhs.asset_type
-    && lhs.created_at === rhs.created_at
+    && lhs.updated_at === rhs.updated_at
     && lhsCardinality === rhsCardinality
     && objectsComparable
   );

frontend/src/preview/PreviewWorkspace.jsx

@@ -13,21 +13,52 @@ const PreviewWorkspace = ({
 
   const title = document.title;
   const summary = describeDocumentSummary(document);
-  const baseSummaryRows = summary.summaryRows.filter((row) => {
-    if (row.key === 'pages') {
-      return Number.isFinite(summary.pageCount);
+  const correspondents = Array.isArray(document.correspondents)
+    ? document.correspondents.map((entry) => entry?.name).filter(Boolean).join(', ')
+    : '';
+  const tags = Array.isArray(document.tags)
+    ? document.tags.map((tag) => tag?.label).filter(Boolean).join(', ')
+    : '';
+
+  const formatDateTime = (value) => {
+    if (!value) {
+      return '—';
     }
-    if (row.key === 'folder') {
-      return Boolean(summary.folderLabel);
-    }
-    return true;
-  });
-  const summaryRows = [
-    ...baseSummaryRows,
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? '—' : date.toLocaleString();
+  };
+
+  const detailItems = [
+    { label: 'Title', value: summary.title || '—' },
+    { label: 'Archive Reference', value: document.archive_serial || '—' },
+    { label: 'Issued On', value: formatDateTime(document.issued_at) },
+    { label: 'Correspondent', value: correspondents || '—' },
+    { label: 'Document Type', value: document.document_type || '—' },
     {
-      key: 'original-name',
-      label: 'Original filename',
-      value: document.original_name || '—',
+      label: 'Filename',
+      value: document.archive_path || document.filename || '—',
+    },
+    { label: 'Tags', value: tags || '—' },
+  ];
+
+  const metadataItems = [
+    { label: 'Modified At', value: formatDateTime(document.updated_at) },
+    { label: 'Created At', value: formatDateTime(document.created_at) },
+    {
+      label: 'Media Filename',
+      value: document.current_version?.filename || document.archive_path || '—',
+    },
+    {
+      label: 'SHA-256 Checksum',
+      value: document.current_version?.checksum || '—',
+    },
+    {
+      label: 'Original File Size',
+      value: summary.sizeLabel,
+    },
+    {
+      label: 'Original MIME Type',
+      value: document.content_type || '—',
     },
   ];
   const metadata =
@@ -35,30 +66,54 @@ const PreviewWorkspace = ({
 
   return (
     <section className="preview-workspace">
-      <aside className="preview-workspace__sidebar">
-        <div className="preview-workspace__info">
-          {summaryRows.length ? (
-            <dl className="preview-workspace__summary">
-              {summaryRows.map(({ key, label, value }) => {
-                const displayValue =
-                  value === null || value === undefined || value === '' ? '—' : value;
-                return (
-                  <div className="preview-workspace__summary-row" key={key}>
-                    <dt>{label}</dt>
-                    <dd>{displayValue}</dd>
-                  </div>
-                );
-              })}
-            </dl>
+      <div className="preview-workspace__details">
+        <section className="preview-section">
+          <h3 className="preview-section__title">Details</h3>
+          <dl className="preview-section__list">
+            {detailItems.map(({ label, value }) => (
+              <div className="preview-section__item" key={label}>
+                <dt>{label}</dt>
+                <dd>{value || '—'}</dd>
+              </div>
+            ))}
+          </dl>
+        </section>
+        <section className="preview-section">
+          <h3 className="preview-section__title">Content</h3>
+          <p className="preview-section__placeholder">
+            Full OCR text will appear here in a future update. Use the toolbar button to open the OCR view for now.
+          </p>
+        </section>
+        <section className="preview-section">
+          <h3 className="preview-section__title">Metadata</h3>
+          <dl className="preview-section__list">
+            {metadataItems.map(({ label, value }) => (
+              <div className="preview-section__item" key={label}>
+                <dt>{label}</dt>
+                <dd>{value || '—'}</dd>
+              </div>
+            ))}
+          </dl>
+          {metadata ? (
+            <details className="preview-section__payload">
+              <summary>Show metadata payload</summary>
+              <pre>{JSON.stringify(metadata, null, 2)}</pre>
+            </details>
           ) : null}
-        </div>
-        {metadata ? (
-          <section className="preview-workspace__metadata">
-            <h4>Metadata payload</h4>
-            <pre>{JSON.stringify(metadata, null, 2)}</pre>
-          </section>
-        ) : null}
-      </aside>
+        </section>
+        <section className="preview-section">
+          <h3 className="preview-section__title">Notes</h3>
+          <p className="preview-section__placeholder">Custom notes will be editable here once the feature lands.</p>
+        </section>
+        <section className="preview-section">
+          <h3 className="preview-section__title">History</h3>
+          <p className="preview-section__placeholder">Change history will be displayed here in an upcoming release.</p>
+        </section>
+        <section className="preview-section">
+          <h3 className="preview-section__title">Permissions</h3>
+          <p className="preview-section__placeholder">Access control management is planned and will surface here.</p>
+        </section>
+      </div>
       <div className="preview-workspace__viewer">
         {!previewEntry?.url ? (
           <div className="preview-workspace__message">Loading preview…</div>

frontend/src/styles.css

@@ -665,37 +665,13 @@ button.danger:hover:not([disabled]) {
 
 .preview-workspace {
   flex: 1;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 30em) minmax(0, 1fr);
   gap: 1.5rem;
   min-height: 0;
   padding: 1rem 1.5rem;
 }
 
-.preview-workspace__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.75rem 1.5rem 0;
-}
-
-.preview-workspace__meta {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.preview-workspace__meta h2 {
-  margin: 0;
-  font-size: 1.1rem;
-}
-
-.preview-workspace__meta .meta {
-  display: block;
-  font-size: 0.8rem;
-  color: var(--muted);
-}
-
 .document-drag-preview {
   position: fixed;
   pointer-events: none;
@@ -794,75 +770,84 @@ button.danger:hover:not([disabled]) {
   pointer-events: none;
 }
 
-.preview-workspace__actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.preview-workspace__sidebar {
-  flex: 0 0 20em;
+.preview-workspace__details {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  max-width: 100%;
-  overflow: auto;
+  gap: 1.5rem;
+  overflow-y: auto;
+  min-height: 0;
 }
 
-.preview-workspace__info {
+.preview-section {
   background: var(--surface-subtle);
-  padding: 1rem;
   box-shadow: inset 0 0 0 1px var(--outline-subtle);
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
-.preview-workspace__summary {
+.preview-section__title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.preview-section__list {
   margin: 0;
   padding: 0;
   list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 0.75rem 1.25rem;
 }
 
-.preview-workspace__summary-row {
+.preview-section__item {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
 
-.preview-workspace__summary-row dt {
+.preview-section__item dt {
   font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
   color: var(--muted);
 }
 
-.preview-workspace__summary-row dd {
+.preview-section__item dd {
   margin: 0;
   font-size: 0.9rem;
   font-weight: 500;
-}
-
-.preview-workspace__metadata {
-  background: var(--surface-subtle);
-  padding: 1rem;
-  box-shadow: inset 0 0 0 1px var(--outline-subtle);
-  font-size: 0.85rem;
-  overflow: auto;
-  max-height: 40vh;
-}
-
-.preview-workspace__metadata h4 {
-  margin: 0 0 0.5rem;
-  font-size: 0.9rem;
-}
-
-.preview-workspace__metadata pre {
-  margin: 0;
-  white-space: pre-wrap;
   word-break: break-word;
 }
 
+.preview-section__placeholder {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.preview-section__payload {
+  font-size: 0.85rem;
+}
+
+.preview-section__payload summary {
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--accent-strong, var(--accent));
+}
+
+.preview-section__payload pre {
+  margin: 0.75rem 0 0;
+  padding: 0.75rem;
+  background: var(--surface);
+  box-shadow: inset 0 0 0 1px var(--outline-subtle);
+  border-radius: 6px;
+  max-height: 280px;
+  overflow: auto;
+  font-size: 0.8rem;
+}
+
 .preview-workspace__viewer {
   flex: 1;
   min-width: 0;