Bert Hausmans
cdee0e8819
- Restore blue PageHeader on Dashboard (/app-components) - Update homepage (/) with subtle header design without blue bar - Add uniform PageHeader styling to application edit page - Fix Rapporten link on homepage to point to /reports overview - Improve header descriptions spacing for better readability
343 lines
16 KiB
TypeScript
343 lines
16 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { getDataValidationObject, type DataValidationObjectResponse } from '../services/api';
|
|
import { useAuthStore } from '../stores/authStore';
|
|
|
|
interface ObjectDetailModalProps {
|
|
objectId: string | null;
|
|
onClose: () => void;
|
|
onObjectClick?: (objectId: string) => void;
|
|
onBack?: () => void;
|
|
canGoBack?: boolean;
|
|
}
|
|
|
|
interface ObjectReference {
|
|
objectId: string;
|
|
objectKey: string;
|
|
label: string;
|
|
}
|
|
|
|
function isObjectReference(value: any): value is ObjectReference {
|
|
return value && typeof value === 'object' && 'objectId' in value;
|
|
}
|
|
|
|
function formatValue(value: any): string {
|
|
if (value === null || value === undefined) return '—';
|
|
if (typeof value === 'boolean') return value ? 'Ja' : 'Nee';
|
|
if (typeof value === 'object') {
|
|
if (Array.isArray(value)) {
|
|
if (value.length === 0) return '—';
|
|
return value.map(v => formatValue(v)).join(', ');
|
|
}
|
|
if (isObjectReference(value)) {
|
|
return value.label || value.objectKey || value.objectId;
|
|
}
|
|
return JSON.stringify(value);
|
|
}
|
|
return String(value);
|
|
}
|
|
|
|
export default function ObjectDetailModal({ objectId, onClose, onObjectClick, onBack, canGoBack = false }: ObjectDetailModalProps) {
|
|
const [objectData, setObjectData] = useState<DataValidationObjectResponse | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const { config } = useAuthStore();
|
|
|
|
useEffect(() => {
|
|
if (!objectId) {
|
|
setObjectData(null);
|
|
return;
|
|
}
|
|
|
|
const loadObject = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const data = await getDataValidationObject(objectId);
|
|
setObjectData(data);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to load object');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
loadObject();
|
|
}, [objectId]);
|
|
|
|
if (!objectId) return null;
|
|
|
|
const handleReferenceClick = (ref: ObjectReference, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (onObjectClick) {
|
|
onObjectClick(ref.objectId);
|
|
}
|
|
};
|
|
|
|
const handleBack = () => {
|
|
if (onBack) {
|
|
onBack();
|
|
}
|
|
};
|
|
|
|
const renderAttributeValue = (key: string, value: any) => {
|
|
// Skip internal/system fields
|
|
if (key.startsWith('_')) return null;
|
|
|
|
// Handle reference fields
|
|
if (isObjectReference(value)) {
|
|
return (
|
|
<button
|
|
onClick={(e) => handleReferenceClick(value, e)}
|
|
className="inline-flex items-center gap-1.5 text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
|
</svg>
|
|
{value.label || value.objectKey || value.objectId}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// Handle arrays of references
|
|
if (Array.isArray(value) && value.length > 0 && isObjectReference(value[0])) {
|
|
return (
|
|
<div className="flex flex-wrap gap-3">
|
|
{value.map((ref, idx) => (
|
|
<button
|
|
key={idx}
|
|
onClick={(e) => handleReferenceClick(ref, e)}
|
|
className="inline-flex items-center gap-1.5 text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
|
</svg>
|
|
{ref.label || ref.objectKey || ref.objectId}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Regular values
|
|
return <span className="text-gray-900 font-medium">{formatValue(value)}</span>;
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 overflow-y-auto">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="fixed inset-0 bg-black/70 backdrop-blur-sm transition-opacity animate-in fade-in"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal */}
|
|
<div className="flex min-h-full items-center justify-center p-4">
|
|
<div
|
|
className="relative bg-white rounded-2xl shadow-2xl border border-gray-200 max-w-5xl w-full max-h-[90vh] overflow-hidden flex flex-col animate-in slide-in-from-bottom-4 duration-300"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Header */}
|
|
<div className="px-8 py-6 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white flex items-center justify-between">
|
|
<div className="flex items-center gap-4 flex-1">
|
|
{/* Back Button */}
|
|
{canGoBack && onBack && (
|
|
<button
|
|
onClick={handleBack}
|
|
className="p-2.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 rounded-xl transition-all hover:shadow-md"
|
|
title="Terug naar vorig object"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
<div className="flex-1">
|
|
{loading ? (
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
|
|
<h2 className="text-xl font-bold text-gray-900">Laden...</h2>
|
|
</div>
|
|
) : objectData ? (
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-xl font-bold text-gray-900">{objectData.metadata.label}</h2>
|
|
</div>
|
|
<div className="flex items-center gap-4 mt-1 text-sm text-gray-600">
|
|
<span className="font-mono bg-gray-100 px-2 py-1 rounded-md">{objectData.metadata.objectKey}</span>
|
|
<span className="text-gray-300">•</span>
|
|
<span className="font-semibold">{objectData.metadata.typeDisplayName}</span>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<h2 className="text-xl font-bold text-gray-900">Object Details</h2>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{/* Jira Assets Link */}
|
|
{objectData && config?.jiraHost && (
|
|
<a
|
|
href={`${config.jiraHost}/secure/insight/assets/${objectData.metadata.objectKey}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="p-2.5 text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-xl transition-all"
|
|
title="Open in Jira Assets"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</a>
|
|
)}
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-xl transition-all"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto px-8 py-6 bg-gray-50/30">
|
|
{error ? (
|
|
<div className="bg-red-50 border-2 border-red-200 rounded-xl p-6 text-center">
|
|
<svg className="w-16 h-16 text-red-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
<p className="text-red-600 font-semibold">{error}</p>
|
|
</div>
|
|
) : objectData ? (
|
|
<div className="space-y-6">
|
|
{/* Basic Info */}
|
|
<div>
|
|
<h3 className="text-sm font-bold text-gray-700 uppercase tracking-wider mb-4 flex items-center gap-2">
|
|
<div className="w-1 h-5 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"></div>
|
|
Basis Informatie
|
|
</h3>
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">ID</div>
|
|
<div className="text-sm font-mono text-gray-900 bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">{objectData.metadata.objectKey}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Type</div>
|
|
<div className="text-sm font-semibold text-gray-900 bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">{objectData.metadata.typeDisplayName}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Attributes */}
|
|
<div>
|
|
<h3 className="text-sm font-bold text-gray-700 uppercase tracking-wider mb-4 flex items-center gap-2">
|
|
<div className="w-1 h-5 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"></div>
|
|
Attributen
|
|
</h3>
|
|
<div className="bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gradient-to-r from-gray-50 to-gray-100">
|
|
<tr>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
|
|
Attribuut
|
|
</th>
|
|
<th className="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
|
|
Waarde
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-100">
|
|
{Object.entries(objectData.object as Record<string, any>)
|
|
.filter(([key]) => !key.startsWith('_'))
|
|
.sort(([a], [b]) => a.localeCompare(b))
|
|
.map(([key, value]) => {
|
|
const renderedValue = renderAttributeValue(key, value);
|
|
if (renderedValue === null) return null;
|
|
|
|
return (
|
|
<tr key={key} className="hover:bg-blue-50/30 transition-colors">
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-700">
|
|
{key}
|
|
</td>
|
|
<td className="px-6 py-4 text-sm">
|
|
{renderedValue}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
{Object.entries(objectData.object as Record<string, any>)
|
|
.filter(([key]) => !key.startsWith('_')).length === 0 && (
|
|
<tr>
|
|
<td colSpan={2} className="px-6 py-12 text-center text-sm text-gray-500">
|
|
<svg className="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
|
</svg>
|
|
Geen attributen beschikbaar
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Metadata */}
|
|
{objectData.object && typeof objectData.object === 'object' && '_jiraUpdatedAt' in objectData.object && (
|
|
<div>
|
|
<h3 className="text-sm font-bold text-gray-700 uppercase tracking-wider mb-4 flex items-center gap-2">
|
|
<div className="w-1 h-5 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"></div>
|
|
Metadata
|
|
</h3>
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
|
|
{objectData.object._jiraUpdatedAt && (
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Laatst bijgewerkt (Jira)</div>
|
|
<div className="text-sm font-medium text-gray-900 bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">
|
|
{new Date(objectData.object._jiraUpdatedAt).toLocaleString('nl-NL')}
|
|
</div>
|
|
</div>
|
|
{objectData.object._jiraCreatedAt && (
|
|
<div>
|
|
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Aangemaakt (Jira)</div>
|
|
<div className="text-sm font-medium text-gray-900 bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">
|
|
{new Date(objectData.object._jiraCreatedAt).toLocaleString('nl-NL')}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-16 text-gray-500">
|
|
<div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
|
<p className="font-medium">Laden van object details...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-8 py-5 border-t border-gray-200 bg-gradient-to-r from-gray-50 to-white flex justify-end">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-6 py-2.5 text-sm font-semibold text-gray-700 bg-white border-2 border-gray-300 rounded-xl hover:bg-gray-50 hover:border-gray-400 transition-all shadow-sm hover:shadow-md"
|
|
>
|
|
Sluiten
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|