@parhelia/localization 0.1.10745

package/dist/localization/src/translation-center/BatchTranslationView.js

@@ -0,0 +1,487 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useMemo, useRef, useCallback } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { useEditContext, SimpleTable, Progress, Button } from "@parhelia/core";
+import { listBatchTranslationJobs, subscribeToBatch, unsubscribeFromBatch, getBatchInfo, getTranslationProviders } from "../services/translationService";
+// Normalize API shape/casing to what the UI expects
+function normalizeBatchInfo(raw) {
+    if (!raw)
+        return null;
+    const pick = (a, b) => (a !== undefined ? a : b);
+    const toNum = (v) => (typeof v === "number" ? v : v != null ? parseInt(v, 10) : undefined);
+    const info = {
+        batchId: pick(raw?.batchId, raw?.BatchId),
+        createdAtUtc: pick(raw?.createdAtUtc, raw?.CreatedAtUtc),
+        startedAtUtc: pick(raw?.startedAtUtc, raw?.StartedAtUtc),
+        completedAtUtc: pick(raw?.completedAtUtc, raw?.CompletedAtUtc),
+        initiatedByUser: pick(raw?.initiatedByUser, raw?.InitiatedByUser),
+        initiatorSessionId: pick(raw?.initiatorSessionId, raw?.InitiatorSessionId),
+        provider: pick(raw?.provider, raw?.Provider),
+        status: pick(raw?.status, raw?.Status),
+        expectedJobs: toNum(pick(raw?.expectedJobs, raw?.ExpectedJobs)),
+        completedJobs: toNum(pick(raw?.completedJobs, raw?.CompletedJobs)),
+        errorJobs: toNum(pick(raw?.errorJobs, raw?.ErrorJobs)),
+        includeSubitems: pick(raw?.includeSubitems, raw?.IncludeSubitems) ?? null,
+        scopeItemId: pick(raw?.scopeItemId, raw?.ScopeItemId),
+        scopeItemPath: pick(raw?.scopeItemPath, raw?.ScopeItemPath),
+        metadata: pick(raw?.metadata, raw?.Metadata),
+        lastUpdatedUtc: pick(raw?.lastUpdatedUtc, raw?.LastUpdatedUtc),
+        exists: pick(raw?.exists, raw?.Exists),
+    };
+    return info.batchId ? info : null;
+}
+export function BatchTranslationView({ batchId, onBack }) {
+    const editContext = useEditContext();
+    const [batchJobs, setBatchJobs] = useState([]);
+    const [batchInfo, setBatchInfo] = useState(null);
+    const [providers, setProviders] = useState([]);
+    const [itemNameById, setItemNameById] = useState({});
+    const [isLoading, setIsLoading] = useState(false);
+    const [translationProgress, setTranslationProgress] = useState(new Map());
+    const firstProgressSeenRef = useRef(false);
+    const lastWsAtRef = useRef(0);
+    const batchJobsRef = useRef([]);
+    const hasLoadedRef = useRef(false);
+    const isSubscribedRef = useRef(false);
+    const initGuardRef = useRef(false);
+    const lastBatchIdRef = useRef(null);
+    // Helper function to get display name from service name
+    const getProviderDisplayName = useCallback((serviceName) => {
+        if (!serviceName)
+            return 'Unknown';
+        const provider = providers.find(p => p.name === serviceName);
+        return provider?.displayName || serviceName;
+    }, [providers]);
+    // Keep ref in sync with state
+    useEffect(() => {
+        batchJobsRef.current = batchJobs;
+    }, [batchJobs]);
+    const loadProviders = useCallback(async () => {
+        try {
+            const res = await getTranslationProviders();
+            const providerData = (res?.data ?? res ?? []);
+            setProviders(providerData);
+        }
+        catch (error) {
+            console.error("Failed to load translation providers:", error);
+        }
+    }, []);
+    const loadBatchJobs = useCallback(async () => {
+        setIsLoading(true);
+        try {
+            // Use efficient batch-specific endpoint
+            const res = await listBatchTranslationJobs(batchId);
+            const jobs = (res?.data ?? res ?? []);
+            setBatchJobs(jobs);
+            // Resolve item names only for new items we haven't seen before
+            const ids = Array.from(new Set(jobs.map((j) => j.itemId)));
+            const newIds = ids.filter((id) => !itemNameById[id]);
+            if (newIds.length && editContext?.itemsRepository) {
+                const descriptors = newIds.map((id) => ({ id, language: "en", version: 0 }));
+                try {
+                    const stubs = await editContext.itemsRepository.getItemsStubs(descriptors);
+                    const map = {};
+                    stubs?.forEach((s) => {
+                        if (s)
+                            map[s.id] = s.name || s.id;
+                    });
+                    setItemNameById((prev) => ({ ...prev, ...map }));
+                }
+                catch (error) {
+                    console.error("Failed to load item names:", error);
+                }
+            }
+        }
+        catch (error) {
+            console.error("Failed to load batch jobs:", error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [batchId, editContext, itemNameById]);
+    const debouncedRefresh = useDebouncedCallback(() => {
+        void loadBatchJobs();
+    }, 800);
+    // Load initial data and conditionally subscribe to batch updates
+    useEffect(() => {
+        // Reset guards if batchId changed
+        if (lastBatchIdRef.current !== batchId) {
+            lastBatchIdRef.current = batchId;
+            hasLoadedRef.current = false;
+            isSubscribedRef.current = false;
+            initGuardRef.current = false;
+        }
+        let cancelled = false;
+        const init = async () => {
+            if (initGuardRef.current)
+                return; // prevent duplicate init under StrictMode
+            initGuardRef.current = true;
+            try {
+                // Always load batch info first to decide on subscriptions
+                try {
+                    const resInfo = await getBatchInfo(batchId);
+                    const raw = resInfo?.data ?? resInfo;
+                    const info = normalizeBatchInfo(raw);
+                    if (!cancelled && info)
+                        setBatchInfo(info);
+                    const isTerminal = info?.status === 'Completed' || info?.status === 'Error';
+                    // Conditionally subscribe only for non-terminal batches
+                    if (!isTerminal && editContext?.sessionId) {
+                        await subscribeToBatch(batchId, editContext.sessionId);
+                        isSubscribedRef.current = true;
+                    }
+                }
+                catch { }
+                // Load providers for display name mapping
+                await loadProviders();
+                // Load jobs once per mount/batch change
+                if (!hasLoadedRef.current) {
+                    await loadBatchJobs();
+                    hasLoadedRef.current = true;
+                }
+            }
+            catch (e) {
+                // no-op
+            }
+        };
+        init();
+        return () => {
+            // Cleanup: unsubscribe when component unmounts or batch changes
+            if (isSubscribedRef.current && editContext && editContext.sessionId && batchId) {
+                unsubscribeFromBatch(batchId, editContext.sessionId).catch(console.error);
+            }
+        };
+    }, [batchId, editContext?.sessionId]);
+    // Listen for translation events - only for this batch
+    useEffect(() => {
+        const removeSocketMessageListener = editContext?.addSocketMessageListener((message) => {
+            // Mark last websocket activity time for adaptive polling
+            if (message.type === "translation-started" ||
+                message.type === "translation-finished" ||
+                message.type === "translation-error" ||
+                message.type === "translation-progress" ||
+                message.type === "batch-completed") {
+                lastWsAtRef.current = Date.now();
+            }
+            if (message.type === "translation-started" ||
+                message.type === "translation-finished" ||
+                message.type === "translation-error") {
+                // Only update if this message is for our batch
+                if (message.payload.batchId === batchId) {
+                    // Update the specific job in our local state instead of refetching all jobs
+                    setBatchJobs(prevJobs => {
+                        const jobIndex = prevJobs.findIndex(job => job.itemId === message.payload.itemId &&
+                            job.targetLanguage === message.payload.language);
+                        if (jobIndex >= 0) {
+                            // Update existing job
+                            const updatedJobs = [...prevJobs];
+                            const existingJob = updatedJobs[jobIndex];
+                            if (existingJob) {
+                                updatedJobs[jobIndex] = {
+                                    ...existingJob,
+                                    status: message.payload.status,
+                                    timestamp: message.payload.timestamp || existingJob.timestamp,
+                                    message: message.payload.message || existingJob.message
+                                };
+                            }
+                            return updatedJobs;
+                        }
+                        else if (message.type === "translation-started") {
+                            // Add new job if it doesn't exist (shouldn't happen with batch subscriptions, but safe fallback)
+                            const newJob = {
+                                itemId: message.payload.itemId,
+                                targetLanguage: message.payload.language,
+                                sourceLanguage: message.payload.sourceLanguage || "",
+                                status: message.payload.status,
+                                timestamp: message.payload.timestamp || new Date().toISOString(),
+                                batchId: batchId,
+                                message: message.payload.message || ""
+                            };
+                            // Resolve item name for new job if we don't have it
+                            if (!itemNameById[message.payload.itemId]) {
+                                void resolveItemNames([message.payload.itemId]);
+                            }
+                            return [...prevJobs, newJob];
+                        }
+                        return prevJobs;
+                    });
+                    // Kick reconciliatory refresh the first time we see start/progress
+                    if (!firstProgressSeenRef.current) {
+                        firstProgressSeenRef.current = true;
+                        debouncedRefresh();
+                        setTimeout(() => debouncedRefresh(), 1500);
+                    }
+                }
+            }
+            if (message.type === "translation-progress") {
+                // Only track progress for jobs in this batch
+                if (message.payload.batchId === batchId) {
+                    const itemId = (message.payload.itemId ?? "").toString().toLowerCase();
+                    const language = message.payload.language;
+                    const progressKey = `${itemId}-${language}`;
+                    // Ensure a row exists; if not, add a placeholder "In Progress" job
+                    setBatchJobs(prevJobs => {
+                        const idx = prevJobs.findIndex(j => j.itemId === itemId && j.targetLanguage === language);
+                        if (idx >= 0)
+                            return prevJobs;
+                        const newJob = {
+                            itemId,
+                            targetLanguage: language,
+                            sourceLanguage: message.payload.sourceLanguage || "",
+                            status: "In Progress",
+                            timestamp: new Date().toISOString(),
+                            batchId: batchId,
+                            message: message.payload.message || ""
+                        };
+                        return [...prevJobs, newJob];
+                    });
+                    setTranslationProgress((prev) => {
+                        const next = new Map(prev);
+                        next.set(progressKey, {
+                            progress: message.payload.progress || 0,
+                            message: message.payload.message || ""
+                        });
+                        return next;
+                    });
+                    // Kick reconciliatory refresh the first time we see progress
+                    if (!firstProgressSeenRef.current) {
+                        firstProgressSeenRef.current = true;
+                        debouncedRefresh();
+                        setTimeout(() => debouncedRefresh(), 1500);
+                    }
+                }
+            }
+            // Handle batch-completed messages for this specific batch
+            if (message.type === "batch-completed" && message.payload.batchId === batchId) {
+                // Refresh header info and jobs
+                (async () => {
+                    try {
+                        const resInfo = await getBatchInfo(batchId);
+                        const raw = resInfo?.data ?? resInfo;
+                        const info = normalizeBatchInfo(raw);
+                        if (info)
+                            setBatchInfo(info);
+                    }
+                    catch { }
+                })();
+                // Debounce refresh to avoid bursts near completion
+                debouncedRefresh();
+            }
+        });
+        return () => {
+            if (removeSocketMessageListener) {
+                removeSocketMessageListener();
+            }
+        };
+    }, [editContext, batchId, loadBatchJobs, debouncedRefresh, itemNameById]);
+    // Adaptive polling while batch is in progress: poll only if no WS in last 6s
+    useEffect(() => {
+        const isRunning = batchInfo?.status === 'In Progress';
+        if (!isRunning)
+            return;
+        const id = setInterval(() => {
+            if (Date.now() - lastWsAtRef.current > 6000) {
+                void loadBatchJobs();
+            }
+        }, 12000);
+        return () => clearInterval(id);
+    }, [batchInfo?.status, loadBatchJobs]);
+    // Helper function to resolve item names for new jobs
+    const resolveItemNames = async (itemIds) => {
+        if (itemIds.length && editContext?.itemsRepository) {
+            const descriptors = itemIds.map((id) => ({ id, language: "en", version: 0 }));
+            try {
+                const stubs = await editContext.itemsRepository.getItemsStubs(descriptors);
+                const map = {};
+                stubs?.forEach((s) => {
+                    if (s)
+                        map[s.id] = s.name || s.id;
+                });
+                setItemNameById((prev) => ({ ...prev, ...map }));
+            }
+            catch (error) {
+                console.error("Failed to load item names:", error);
+            }
+        }
+    };
+    // Group jobs by item for better organization
+    const itemGroups = useMemo(() => {
+        const groups = {};
+        for (const job of batchJobs) {
+            if (!groups[job.itemId]) {
+                groups[job.itemId] = [];
+            }
+            groups[job.itemId].push(job);
+        }
+        return groups;
+    }, [batchJobs]);
+    // Sort items by status priority: in-progress first, then errors, then completed
+    const sortedItemGroups = useMemo(() => {
+        const entries = Object.entries(itemGroups);
+        return entries.sort(([, jobsA], [, jobsB]) => {
+            // Calculate status priority for each item group
+            const getStatusPriority = (jobs) => {
+                const hasInProgress = jobs.some(j => j.status === "In Progress");
+                const hasError = jobs.some(j => j.status === "Error");
+                const allCompleted = jobs.every(j => j.status === "Completed");
+                if (hasInProgress)
+                    return 1; // Highest priority - show first
+                if (hasError)
+                    return 2; // Second priority
+                if (allCompleted)
+                    return 4; // Lowest priority - show last
+                return 3; // Pending/other statuses
+            };
+            const priorityA = getStatusPriority(jobsA);
+            const priorityB = getStatusPriority(jobsB);
+            return priorityA - priorityB;
+        });
+    }, [itemGroups]);
+    // Calculate overall progress segments including in-progress job progress.
+    // Incorporate server-side expected/completed/error counts so pending server jobs are reflected.
+    const progressSegments = useMemo(() => {
+        const expectedTotal = typeof batchInfo?.expectedJobs === 'number' && batchInfo.expectedJobs > 0
+            ? batchInfo.expectedJobs
+            : batchJobs.length;
+        if (expectedTotal === 0) {
+            return {
+                completed: 0,
+                inProgress: 0,
+                error: 0,
+                pending: 0,
+                completedCount: 0,
+                inProgressCount: 0,
+                errorCount: 0,
+                pendingCount: 0,
+                total: 0,
+                actualProgress: 0
+            };
+        }
+        const localCompleted = batchJobs.filter(job => job.status === 'Completed').length;
+        const localErrors = batchJobs.filter(job => job.status === 'Error').length;
+        const serverCompleted = typeof batchInfo?.completedJobs === 'number' ? batchInfo.completedJobs : undefined;
+        const serverErrors = typeof batchInfo?.errorJobs === 'number' ? batchInfo.errorJobs : undefined;
+        // Prefer the larger of local/server so UI can progress smoothly with local updates
+        const completedCount = Math.max(0, Math.min(expectedTotal, Math.max(localCompleted, serverCompleted ?? 0)));
+        const errorCount = Math.max(0, Math.min(expectedTotal - completedCount, Math.max(localErrors, serverErrors ?? 0)));
+        // Known in-progress from client state
+        const knownInProgressCount = batchJobs.filter(job => job.status === 'In Progress').length;
+        // Cap to not exceed remaining after completed+error
+        const inProgressCount = Math.max(0, Math.min(knownInProgressCount, expectedTotal - completedCount - errorCount));
+        const pendingCount = Math.max(0, expectedTotal - completedCount - errorCount - inProgressCount);
+        const pct = (count) => Math.max(0, Math.min(100, Math.round((count / expectedTotal) * 100)));
+        // Actual progress: completed=100 each, in-progress use live progress if available, others 0
+        let totalActualProgress = completedCount * 100;
+        for (const job of batchJobs) {
+            if (job.status === 'In Progress') {
+                const progressKey = `${job.itemId}-${job.targetLanguage}`;
+                const jobProgress = translationProgress.get(progressKey);
+                totalActualProgress += jobProgress?.progress || 0;
+            }
+        }
+        const actualProgress = Math.max(0, Math.min(100, Math.round(totalActualProgress / expectedTotal)));
+        return {
+            completed: pct(completedCount),
+            inProgress: pct(inProgressCount),
+            error: pct(errorCount),
+            pending: pct(pendingCount),
+            completedCount,
+            inProgressCount,
+            errorCount,
+            pendingCount,
+            total: expectedTotal,
+            actualProgress,
+        };
+    }, [batchJobs, batchInfo, translationProgress]);
+    const overallProgress = progressSegments.actualProgress;
+    return (_jsxs("div", { className: "flex h-full flex-col min-h-0", children: [_jsxs("div", { className: "border-b p-4 flex-shrink-0", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [onBack && (_jsxs(Button, { size: "sm", variant: "outline", onClick: onBack, children: [_jsx("i", { className: "pi pi-arrow-left" }), "Back"] })), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: "Translation Batch" }), _jsxs("p", { className: "text-sm text-gray-600 mt-1", children: ["Batch ID: ", _jsx("span", { className: "font-mono text-xs bg-gray-100 px-2 py-0.5 rounded", children: batchId })] }), batchInfo && (_jsxs("div", { className: "mt-2 flex flex-wrap gap-2 items-center text-xs", children: [batchInfo.status && (_jsx("span", { className: `inline-flex items-center rounded-full px-2 py-1 font-medium ${batchInfo.status === 'Completed'
+                                                            ? 'bg-green-100 text-green-700'
+                                                            : batchInfo.status === 'In Progress'
+                                                                ? 'bg-blue-100 text-blue-700'
+                                                                : batchInfo.status === 'Error'
+                                                                    ? 'bg-red-100 text-red-700'
+                                                                    : 'bg-gray-100 text-gray-700'}`, children: batchInfo.status })), batchInfo.provider && (_jsxs("span", { className: "text-gray-700", children: ["Provider: ", _jsx("span", { className: "font-medium", children: getProviderDisplayName(batchInfo.provider) })] })), batchInfo.initiatedByUser && (_jsxs("span", { className: "text-gray-700", children: ["By: ", _jsx("span", { className: "font-medium", children: batchInfo.initiatedByUser })] })), batchInfo.includeSubitems !== undefined && batchInfo.includeSubitems !== null && (_jsxs("span", { className: "text-gray-700", children: ["Include subitems: ", _jsx("span", { className: "font-medium", children: batchInfo.includeSubitems ? 'Yes' : 'No' })] })), batchInfo.scopeItemPath && (_jsxs("span", { className: "text-gray-700 truncate max-w-[40rem]", children: ["Scope: ", _jsx("span", { className: "font-mono", children: batchInfo.scopeItemPath })] })), (batchInfo.startedAtUtc || batchInfo.completedAtUtc || batchInfo.lastUpdatedUtc) && (_jsxs("span", { className: "text-gray-500", children: [batchInfo.startedAtUtc && (_jsxs(_Fragment, { children: ["Started: ", new Date(batchInfo.startedAtUtc).toLocaleString()] })), batchInfo.completedAtUtc && (_jsxs(_Fragment, { children: [batchInfo.startedAtUtc ? ' • ' : '', "Completed: ", new Date(batchInfo.completedAtUtc).toLocaleString()] })), !batchInfo.completedAtUtc && batchInfo.lastUpdatedUtc && (_jsxs(_Fragment, { children: [batchInfo.startedAtUtc ? ' • ' : '', "Updated: ", new Date(batchInfo.lastUpdatedUtc).toLocaleString()] }))] }))] }))] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "text-sm text-gray-600", children: [`${progressSegments.completedCount}/${progressSegments.total} completed`, progressSegments.errorCount ? `, ${progressSegments.errorCount} errors` : ''] }), _jsxs(Button, { size: "sm", onClick: loadBatchJobs, disabled: isLoading, title: "Manual refresh - normally updates come through websocket subscriptions", children: [_jsx("i", { className: `pi pi-refresh ${isLoading ? 'pi-spin' : ''}` }), "Refresh"] })] })] }), _jsxs("div", { className: "mt-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "text-sm font-medium", children: "Overall Progress" }), _jsxs("span", { className: "text-sm text-gray-600", children: [progressSegments.completedCount, " / ", progressSegments.total, " completed"] })] }), _jsxs("div", { className: "relative h-4 bg-gray-200 rounded-full overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0 flex", children: [progressSegments.completed > 0 && (_jsx("div", { className: "bg-green-500 h-full transition-all duration-300", style: { width: `${progressSegments.completed}%` } })), progressSegments.inProgress > 0 && (_jsx("div", { className: "bg-blue-500 h-full transition-all duration-300", style: { width: `${progressSegments.inProgress}%` } })), progressSegments.error > 0 && (_jsx("div", { className: "bg-red-500 h-full transition-all duration-300", style: { width: `${progressSegments.error}%` } })), progressSegments.pending > 0 && (_jsx("div", { className: "bg-gray-300 h-full transition-all duration-300", style: { width: `${progressSegments.pending}%` } }))] }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsxs("span", { className: "text-xs font-medium text-white drop-shadow-sm", children: [overallProgress, "%"] }) })] }), _jsxs("div", { className: "flex gap-3 mt-2 text-xs", children: [progressSegments.completedCount > 0 && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-green-500 rounded-sm" }), _jsxs("span", { className: "text-gray-700", children: [progressSegments.completedCount, " completed"] })] })), progressSegments.inProgressCount > 0 && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-blue-500 rounded-sm" }), _jsxs("span", { className: "text-gray-700", children: [progressSegments.inProgressCount, " in progress"] })] })), progressSegments.errorCount > 0 && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-red-500 rounded-sm" }), _jsxs("span", { className: "text-gray-700", children: [progressSegments.errorCount, " errors"] })] })), progressSegments.pendingCount > 0 && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-gray-300 rounded-sm" }), _jsxs("span", { className: "text-gray-700", children: [progressSegments.pendingCount, " pending"] })] })), typeof batchInfo?.expectedJobs === 'number' && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-gray-300 rounded-sm" }), _jsxs("span", { className: "text-gray-700", children: [(batchInfo.expectedJobs || 0) - (batchInfo.completedJobs || 0) - (batchInfo.errorJobs || 0), " pending (server)"] })] }))] })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 min-h-0", children: isLoading && batchJobs.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [_jsx("i", { className: "pi pi-spin pi-spinner" }), "Loading batch translations..."] }) })) : batchJobs.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "text-center text-gray-500", children: [_jsx("i", { className: "pi pi-language text-2xl block mb-2" }), _jsx("p", { children: "No translations found for this batch" }), _jsx("p", { className: "text-sm", children: "The batch may not exist or has no translation jobs" })] }) })) : (_jsx("div", { className: "space-y-6", children: sortedItemGroups.map(([itemId, jobs]) => {
+                        const itemName = itemNameById[itemId] || itemId;
+                        const itemCompleted = jobs.filter(j => j.status === "Completed").length;
+                        // Calculate item progress including in-progress job progress
+                        // Performance: item-level calculation is always fast (typically 2-10 jobs per item)
+                        let totalProgress = 0;
+                        for (const job of jobs) {
+                            if (job.status === "Completed") {
+                                totalProgress += 100; // Full credit for completed jobs
+                            }
+                            else if (job.status === "In Progress") {
+                                // Get progress for this specific job
+                                const progressKey = `${job.itemId}-${job.targetLanguage}`;
+                                const jobProgress = translationProgress.get(progressKey);
+                                totalProgress += jobProgress?.progress || 0; // Use actual progress or 0
+                            }
+                            else {
+                                totalProgress += 0; // Pending/Error jobs contribute 0
+                            }
+                        }
+                        const itemProgress = Math.round(totalProgress / jobs.length);
+                        const itemInProgress = jobs.some(j => j.status === "In Progress");
+                        const itemError = jobs.some(j => j.status === "Error");
+                        return (_jsxs("div", { className: "border rounded-lg p-4", children: [_jsxs("div", { className: "mb-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h3", { className: "font-medium text-lg", children: itemName }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm text-gray-600", children: [itemCompleted, " / ", jobs.length, " languages"] }), itemInProgress && (_jsx("span", { className: "text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full", children: "In Progress" })), itemError && (_jsx("span", { className: "text-xs bg-red-100 text-red-700 px-2 py-1 rounded-full", children: "Error" }))] })] }), _jsx("div", { className: "relative", children: _jsx(Progress, { value: itemProgress, className: "h-3 mb-2", indicatorClassName: itemError ? "bg-red-500" :
+                                                    itemProgress === 100 ? "bg-green-500" :
+                                                        "bg-blue-500", showValue: true }) }), _jsxs("div", { className: "text-xs text-gray-500 font-mono", children: ["Item ID: ", itemId] })] }), _jsx(SimpleTable, { columns: [
+                                        {
+                                            header: "Language",
+                                            className: "w-16", // Fixed width for language column
+                                            body: (job) => (_jsx("div", { className: "font-medium", children: job.targetLanguage }))
+                                        },
+                                        {
+                                            header: "Status",
+                                            className: "w-32", // Fixed width for status column
+                                            body: (job) => {
+                                                const progressKey = `${job.itemId}-${job.targetLanguage}`;
+                                                const progress = translationProgress.get(progressKey);
+                                                return (_jsxs("div", { children: [_jsx("span", { className: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${job.status === "Completed"
+                                                                ? "bg-green-100 text-green-700"
+                                                                : job.status === "In Progress"
+                                                                    ? "bg-blue-100 text-blue-700"
+                                                                    : job.status === "Error"
+                                                                        ? "bg-red-100 text-red-700"
+                                                                        : "bg-gray-100 text-gray-700"}`, children: job.status }), job.status === "In Progress" && progress && Math.round(progress.progress || 0) === 0 && (_jsx("div", { className: "mt-1 text-xs text-gray-600", children: "Version created" })), progress && job.status === "In Progress" && (_jsxs("div", { className: "mt-1", children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("span", { className: "text-xs text-gray-500 truncate", children: progress.message }), _jsxs("span", { className: "text-xs font-medium text-gray-700 ml-1", children: [Math.round(progress.progress), "%"] })] }), _jsx(Progress, { value: progress.progress, className: "h-2", indicatorClassName: "bg-blue-500", showValue: false })] }))] }));
+                                            }
+                                        },
+                                        {
+                                            header: "Source",
+                                            className: "w-16", // Fixed width for source column
+                                            body: (job) => (_jsx("div", { className: "text-sm", children: job.sourceLanguage || "—" }))
+                                        },
+                                        {
+                                            header: "Message",
+                                            className: "w-64", // Fixed width with proper wrapping for message column
+                                            body: (job) => (_jsx("div", { className: "text-sm break-words whitespace-normal leading-relaxed", children: job.message || "—" }))
+                                        },
+                                        {
+                                            header: "Updated",
+                                            className: "w-24", // Fixed width for updated column
+                                            body: (job) => {
+                                                const date = new Date(job.timestamp);
+                                                return (_jsx("div", { className: "text-sm whitespace-nowrap", children: date.toLocaleTimeString() }));
+                                            }
+                                        },
+                                    ], items: jobs.sort((a, b) => {
+                                        // Sort by status first (in-progress first, then errors, then completed)
+                                        const getJobPriority = (job) => {
+                                            if (job.status === "In Progress")
+                                                return 1;
+                                            if (job.status === "Error")
+                                                return 2;
+                                            if (job.status === "Completed")
+                                                return 4;
+                                            return 3; // Pending/other statuses
+                                        };
+                                        const priorityA = getJobPriority(a);
+                                        const priorityB = getJobPriority(b);
+                                        // If same priority, sort by language alphabetically
+                                        if (priorityA === priorityB) {
+                                            return a.targetLanguage.localeCompare(b.targetLanguage);
+                                        }
+                                        return priorityA - priorityB;
+                                    }) })] }, itemId));
+                    }) })) })] }));
+}

package/dist/localization/src/translation-center/RecentTranslations.d.ts

@@ -0,0 +1,2 @@
+export declare function RecentTranslations(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RecentTranslations.d.ts.map

package/dist/localization/src/translation-center/RecentTranslations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecentTranslations.d.ts","sourceRoot":"","sources":["../../../../src/translation-center/RecentTranslations.tsx"],"names":[],"mappings":"AA8BA,wBAAgB,kBAAkB,4CAgYjC"}