fuck

frontend/src/documents/DocumentInfoPanel.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ReactNode } from 'react';
 import DocumentSummarySection, { DocumentSummarySectionProps } from './DocumentSummarySection';
-import { buildDocumentMetadataItems, extractDocumentMetadataPayload } from './documentMetadata';
+import { describeDocumentSummary, extractDocumentMetadataPayload, type DocumentSummaryRow } from './documentSummary';
 
 type PanelTab = { id: string; label: string; render: (context?: Record<string, unknown>) => ReactNode };
 
@@ -15,8 +15,8 @@ type ContentState =
 
 export interface DocumentInfoPanelProps {
   document: DocumentSummarySectionProps['document'];
-  summaryProps?: Omit<DocumentSummarySectionProps, 'document' | 'detailItems' | 'layout'>;
-  metadataItems?: Array<{ label: string; value?: string }>;
+  summaryProps?: Omit<DocumentSummarySectionProps, 'document' | 'layout'>;
+  metadataItems?: DocumentSummaryRow[];
   metadataPayload?: Record<string, unknown>;
   metadataTabLabel?: string;
   detailsTabLabel?: string;
@@ -76,7 +76,7 @@ const DocumentInfoPanel: React.FC<DocumentInfoPanelProps> = ({
     if (Array.isArray(metadataItemsProp) && metadataItemsProp.length) {
       return metadataItemsProp;
     }
-    return buildDocumentMetadataItems(document);
+    return describeDocumentSummary(document);
   }, [metadataItemsProp, document]);
 
   const metadataPayload = useMemo(() => {
@@ -149,18 +149,17 @@ const DocumentInfoPanel: React.FC<DocumentInfoPanelProps> = ({
   const renderSummarySection = useCallback(() => (
     <DocumentSummarySection
       document={document}
-      detailItems={metadataItems}
       layout={summaryLayout}
       {...summaryProps}
     />
-  ), [document, summaryLayout, summaryProps, metadataItems]);
+  ), [document, summaryLayout, summaryProps]);
 
   const renderDetailsSection = useCallback(() => (
     <section className={`${base}__section`}>
       {metadataItems.length ? (
         <dl className={`${base}__section-list`}>
-          {metadataItems.map(({ label, value }) => (
-            <div className={`${base}__section-item`} key={label}>
+          {metadataItems.map(({ key, label, value }) => (
+            <div className={`${base}__section-item`} key={key || label}>
               <dt>{label}</dt>
               <dd>{value || '—'}</dd>
             </div>