Phase 1: Workflows UI, Dedup/Merge UI, Import/Export UI, Print/PDF
- Workflows UI: full page with definitions/instances tabs, step editor, instance detail with approve/reject - Dedup/Merge UI: duplicate detection, side-by-side comparison, field-level merge dialog, merge history - Import/Export UI: import wizard (dry-run preview), export panel (CSV/XLSX), backend export route added - Print/PDF: PrintButton component, print.css, integrated in Contacts/Calendar/Reports/ContactDetail - Backend: GET /api/v1/export endpoint, export_companies_csv() service function - Routes: /workflows, /contacts/dedup, /import-export registered - Menu items: Workflows, Import/Export, Duplikate added to automation plugin manifest - IMPLEMENTATION_PLAN.md: audit-corrected plan for all 14 remaining features
This commit is contained in:
Agent Zero
@@ -0,0 +1,192 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useWorkflowInstances } from '@/api/workflows';
|
||||
import type { InstanceStatus, WorkflowInstance } from '@/api/workflows';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { Select } from '@/components/ui/Select';
|
||||
import { Skeleton } from '@/components/ui/Skeleton';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { AlertCircle, ChevronRight } from 'lucide-react';
|
||||
|
||||
const statusFilterOptions = [
|
||||
{ value: '', label: 'Alle Status' },
|
||||
{ value: 'pending', label: 'Wartend' },
|
||||
{ value: 'in_progress', label: 'In Bearbeitung' },
|
||||
{ value: 'completed', label: 'Abgeschlossen' },
|
||||
{ value: 'rejected', label: 'Abgelehnt' },
|
||||
{ value: 'cancelled', label: 'Abgebrochen' },
|
||||
];
|
||||
|
||||
function statusBadgeVariant(
|
||||
status: string
|
||||
): 'success' | 'warning' | 'danger' | 'info' | 'secondary' {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return 'success';
|
||||
case 'in_progress':
|
||||
return 'info';
|
||||
case 'pending':
|
||||
return 'warning';
|
||||
case 'rejected':
|
||||
return 'danger';
|
||||
case 'cancelled':
|
||||
return 'secondary';
|
||||
default:
|
||||
return 'secondary';
|
||||
}
|
||||
}
|
||||
|
||||
function statusLabel(status: string): string {
|
||||
const map: Record<string, string> = {
|
||||
pending: 'Wartend',
|
||||
in_progress: 'In Bearbeitung',
|
||||
completed: 'Abgeschlossen',
|
||||
rejected: 'Abgelehnt',
|
||||
cancelled: 'Abgebrochen',
|
||||
};
|
||||
return map[status] ?? status;
|
||||
}
|
||||
|
||||
export interface WorkflowInstanceListProps {
|
||||
onSelectInstance: (instance: WorkflowInstance) => void;
|
||||
}
|
||||
|
||||
export function WorkflowInstanceList({
|
||||
onSelectInstance,
|
||||
}: WorkflowInstanceListProps) {
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
const [page, setPage] = useState(1);
|
||||
const pageSize = 20;
|
||||
|
||||
const queryStatus =
|
||||
statusFilter !== '' ? (statusFilter as InstanceStatus) : undefined;
|
||||
|
||||
const { data, isLoading, isError, refetch } = useWorkflowInstances(
|
||||
page,
|
||||
pageSize,
|
||||
queryStatus
|
||||
);
|
||||
|
||||
const instances = data?.items ?? [];
|
||||
const total = data?.total ?? 0;
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Filter bar */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Select
|
||||
options={statusFilterOptions}
|
||||
value={statusFilter}
|
||||
onChange={(e) => {
|
||||
setStatusFilter(e.target.value);
|
||||
setPage(1);
|
||||
}}
|
||||
className="max-w-xs"
|
||||
/>
|
||||
<span className="text-sm text-secondary-500">
|
||||
{total} Instanz{total !== 1 ? 'en' : ''}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Loading */}
|
||||
{isLoading && (
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<Skeleton key={i} className="h-16 w-full" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{isError && (
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-3 text-danger-600">
|
||||
<AlertCircle className="h-5 w-5" />
|
||||
<span>Fehler beim Laden der Instanzen</span>
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
className="text-sm text-primary-600 hover:underline"
|
||||
>
|
||||
Erneut versuchen
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!isLoading && !isError && instances.length === 0 && (
|
||||
<EmptyState
|
||||
title="Keine Workflow-Instanzen"
|
||||
description="Es wurden keine Instanzen gefunden, die dem Filter entsprechen."
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Instance list */}
|
||||
{!isLoading && !isError && instances.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{instances.map((instance) => (
|
||||
<button
|
||||
key={instance.id}
|
||||
onClick={() => onSelectInstance(instance)}
|
||||
className="w-full text-left bg-white rounded-lg border border-secondary-200 hover:border-primary-300 hover:shadow-sm transition-all px-4 py-3 cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
<Badge variant={statusBadgeVariant(instance.status)}>
|
||||
{statusLabel(instance.status)}
|
||||
</Badge>
|
||||
<span className="text-sm font-medium text-secondary-900 truncate">
|
||||
{instance.workflow_id}
|
||||
</span>
|
||||
<span className="text-xs text-secondary-400">
|
||||
Schritt {instance.current_step_index + 1}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-xs text-secondary-400 flex-shrink-0">
|
||||
{instance.initiated_by && (
|
||||
<span>von {instance.initiated_by}</span>
|
||||
)}
|
||||
{instance.created_at && (
|
||||
<span>
|
||||
{new Date(instance.created_at).toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
{instance.timeout_at && (
|
||||
<span className="text-warning-600">
|
||||
Timeout: {new Date(instance.timeout_at).toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
<ChevronRight className="h-4 w-4 text-secondary-300" />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{!isLoading && !isError && totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-2 pt-4">
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
disabled={page <= 1}
|
||||
className="px-3 py-1.5 text-sm rounded-md border border-secondary-300 hover:bg-secondary-50 disabled:opacity-50"
|
||||
>
|
||||
Zurueck
|
||||
</button>
|
||||
<span className="text-sm text-secondary-600">
|
||||
Seite {page} / {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={page >= totalPages}
|
||||
className="px-3 py-1.5 text-sm rounded-md border border-secondary-300 hover:bg-secondary-50 disabled:opacity-50"
|
||||
>
|
||||
Weiter
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user