Fix TypeScript compilation errors in frontend components

- Remove unused variables in ApplicationInfo, ArchitectureDebugPage
- Fix type errors in Dashboard, GovernanceAnalysis, GovernanceModelHelper (PageHeader description prop)
- Add null checks and explicit types in DataValidationDashboard
- Fix ObjectDetailModal type errors for _jiraCreatedAt and Date constructor
- Remove unused imports and variables in SchemaConfigurationSettings
- Update PageHeader to accept string | ReactNode for description prop
This commit is contained in:
2026-01-21 23:19:06 +01:00
parent c4fa18ed55
commit 73660cdf66
9 changed files with 494 additions and 37 deletions

View File

@@ -254,7 +254,7 @@ export default function ApplicationInfo() {
setRefreshMessage(null);
try {
const result = await refreshApplication(id);
await refreshApplication(id);
setRefreshMessage('Applicatie succesvol gesynchroniseerd vanuit Jira');
// Reload the application data after a short delay to show the success message

View File

@@ -168,7 +168,7 @@ export default function ArchitectureDebugPage() {
const referencedObjectKey = inputs.referencedObjectKey || (() => {
// Try to find a reference in the object
const references: string[] = [];
for (const [key, value] of Object.entries(sampleObject)) {
for (const [, value] of Object.entries(sampleObject)) {
if (value && typeof value === 'object' && ('objectKey' in value || 'key' in value)) {
const objKey = (value as any).objectKey || (value as any).key;
if (objKey) references.push(objKey);
@@ -288,7 +288,7 @@ export default function ArchitectureDebugPage() {
credentials: 'include',
});
if (!syncResponse.ok) throw new Error('Sync failed');
const syncResult = await syncResponse.json();
await syncResponse.json();
// Step 3: Check final count (should not have increased much)
updateTestResult(testId, { message: 'Checking final object count...' });
@@ -506,7 +506,7 @@ export default function ArchitectureDebugPage() {
const error = await updateResponse.json();
throw new Error(error.error || 'Update failed');
}
const updateResult = await updateResponse.json();
await updateResponse.json();
// Step 3: Immediately check DB (without refresh)
updateTestResult(testId, { message: 'Checking DB state immediately...' });

View File

@@ -151,7 +151,7 @@ export default function DataValidationDashboard() {
const grouped = new Map<string, typeof stats.comparison.typeComparisons>();
const noSchemaGroup: typeof stats.comparison.typeComparisons = [];
for (const comp of stats.comparison.typeComparisons) {
for (const comp of stats!.comparison.typeComparisons) {
const schemaKey = comp.schemaId && comp.schemaName
? `${comp.schemaId}|${comp.schemaName}`
: '__NO_SCHEMA__';
@@ -391,9 +391,9 @@ export default function DataValidationDashboard() {
{Array.from(groupedBySchema.entries()).map(([schemaKey, typeComps]) => {
const [schemaId, schemaName] = schemaKey.split('|');
const isExpanded = expandedSchemas.has(schemaKey);
const syncedCount = typeComps.filter(t => t.syncStatus === 'synced').length;
const outdatedCount = typeComps.filter(t => t.syncStatus === 'outdated').length;
const missingCount = typeComps.filter(t => t.syncStatus === 'missing').length;
const syncedCount = typeComps.filter((t: { syncStatus: string }) => t.syncStatus === 'synced').length;
const outdatedCount = typeComps.filter((t: { syncStatus: string }) => t.syncStatus === 'outdated').length;
const missingCount = typeComps.filter((t: { syncStatus: string }) => t.syncStatus === 'missing').length;
return (
<div key={schemaKey} className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden hover:shadow-md transition-shadow">
@@ -472,7 +472,7 @@ export default function DataValidationDashboard() {
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-100">
{typeComps.map((comp) => (
{typeComps.map((comp: { typeName: string; cacheCount: number; jiraCount: number; difference: number; syncStatus: string; typeDisplayName: string }) => (
<tr
key={comp.typeName}
className="hover:bg-blue-50/50 cursor-pointer transition-colors group"

View File

@@ -79,7 +79,7 @@ export default function ObjectDetailModal({ objectId, onClose, onObjectClick, on
}
};
const renderAttributeValue = (key: string, value: any) => {
const renderAttributeValue = (key: string, value: any): React.ReactNode | null => {
// Skip internal/system fields
if (key.startsWith('_')) return null;
@@ -296,24 +296,36 @@ export default function ObjectDetailModal({ objectId, onClose, onObjectClick, on
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')}
{(() => {
const obj = objectData.object as Record<string, unknown>;
const updatedAt = obj._jiraUpdatedAt;
const createdAt = obj._jiraCreatedAt;
const hasUpdatedAt = updatedAt && (typeof updatedAt === 'string' || typeof updatedAt === 'number' || updatedAt instanceof Date);
const hasCreatedAt = createdAt && (typeof createdAt === 'string' || typeof createdAt === 'number' || createdAt instanceof Date);
if (!hasUpdatedAt && !hasCreatedAt) return null;
return (
<div className="grid grid-cols-2 gap-6">
{hasUpdatedAt && (
<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(updatedAt as string | number | Date).toLocaleString('nl-NL')}
</div>
</div>
</div>
)}
</div>
)}
)}
{hasCreatedAt && (
<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(createdAt as string | number | Date).toLocaleString('nl-NL')}
</div>
</div>
)}
</div>
);
})()}
</div>
</div>
)}

View File

@@ -2,7 +2,7 @@ import React from 'react';
interface PageHeaderProps {
title: string;
description?: string;
description?: string | React.ReactNode;
icon?: React.ReactNode;
actions?: React.ReactNode;
badge?: React.ReactNode;

View File

@@ -5,17 +5,14 @@ import {
getConfiguredObjectTypes,
setConfiguredObjectTypeEnabled,
bulkSetObjectTypesEnabled,
checkConfiguration,
getSchema,
triggerTypeSync,
getSchemas,
setSchemaSearchEnabled,
type SchemaWithObjectTypes,
type ConfiguredObjectType,
type SchemaConfigurationStats,
type SchemaResponse,
type SchemaObjectTypeDefinition,
type SchemaAttributeDefinition,
type SchemaSearchConfig,
} from '../services/api';
import CacheStatusIndicator from './CacheStatusIndicator';
@@ -252,8 +249,6 @@ export default function SchemaConfigurationSettings() {
if (stats) {
setStats(prevStats => {
if (!prevStats) return prevStats;
const enabledCount = updates.filter(u => u.enabled).length;
const disabledCount = updates.filter(u => !u.enabled).length;
const currentEnabled = prevStats.enabledObjectTypes;
const currentDisabled = prevStats.disabledObjectTypes;
@@ -355,9 +350,6 @@ export default function SchemaConfigurationSettings() {
),
})).filter(schema => schema.objectTypes.length > 0 || searchTerm === '');
const allEnabledCount = schemas.reduce((sum, s) => sum + s.objectTypes.filter(ot => ot.enabled).length, 0);
const allDisabledCount = schemas.reduce((sum, s) => sum + s.objectTypes.filter(ot => !ot.enabled).length, 0);
return (
<div className="space-y-6">
{/* Header Section */}
@@ -698,7 +690,6 @@ export default function SchemaConfigurationSettings() {
const enabledCount = schema.objectTypes.filter(ot => ot.enabled).length;
const isExpanded = expandedSchemas.has(schema.schemaId);
const allEnabled = schema.objectTypes.length > 0 && schema.objectTypes.every(ot => ot.enabled);
const someEnabled = schema.objectTypes.some(ot => ot.enabled);
return (
<div key={schema.schemaId} className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden hover:shadow-md transition-shadow">