@parhelia/localization 0.1.12788 → 0.1.12790

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

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

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

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

package/dist/translation-center/RecentTranslations.js

@@ -1,309 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState, useMemo } from "react";
-import React from "react";
-import { Button, Select, useEditContext, usePathname, useRouter, useSearchParams, } from "@parhelia/core";
-import { listBatches, getTranslationProviders, } from "../services/translationService";
-import { useDebouncedCallback } from "use-debounce";
-import { RefreshCw, X, ChevronDown, Languages, Loader2 } from "lucide-react";
-// Wrappers for lucide-react icons to work with React 19
-const RefreshIcon = (props) => React.createElement(RefreshCw, props);
-const XIcon = (props) => React.createElement(X, props);
-const ChevronDownIcon = (props) => React.createElement(ChevronDown, props);
-const LanguagesIcon = (props) => React.createElement(Languages, props);
-const LoaderIcon = (props) => React.createElement(Loader2, props);
-const DATE_RANGE_OPTIONS = [
-    { value: "lastHour", label: "Last Hour" },
-    { value: "last24hours", label: "Last 24 Hours" },
-    { value: "today", label: "Today" },
-    { value: "last7days", label: "Last 7 Days" },
-    { value: "last30days", label: "Last 30 Days" },
-];
-const STATUS_OPTIONS = [
-    { value: "all", label: "All Status" },
-    { value: "in-progress", label: "In Progress" },
-    { value: "completed", label: "Completed" },
-    { value: "errors", label: "Errors Only" },
-];
-export function RecentTranslations() {
-    const editContext = useEditContext();
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-    const [batches, setBatches] = useState([]);
-    const [providers, setProviders] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isLoadingMore, setIsLoadingMore] = useState(false);
-    const [hasMore, setHasMore] = useState(true);
-    const [currentOffset, setCurrentOffset] = useState(0);
-    const debouncedReload = useDebouncedCallback(() => loadRecentBatches(0, false), 800);
-    const currentUserName = editContext?.user?.name || "all";
-    const isLimitedPreviewUser = editContext?.user?.isLimitedPreviewUser ?? false;
-    const [filters, setFilters] = useState({
-        dateRange: "last30days",
-        status: "all",
-        user: currentUserName,
-        provider: "all",
-        targetLanguage: "all",
-    });
-    // Enforce current user filter for limited preview users
-    useEffect(() => {
-        if (isLimitedPreviewUser && currentUserName !== "all" && filters.user !== currentUserName) {
-            setFilters(prev => ({ ...prev, user: currentUserName }));
-        }
-    }, [isLimitedPreviewUser, currentUserName, filters.user]);
-    const loadRecentBatches = async (offset = 0, append = false) => {
-        if (offset === 0) {
-            setIsLoading(true);
-        }
-        else {
-            setIsLoadingMore(true);
-        }
-        try {
-            const limit = 100;
-            const res = await listBatches(limit, offset);
-            const maybeData = res?.data ?? res;
-            const newBatches = Array.isArray(maybeData) ? maybeData : [];
-            if (append) {
-                setBatches(prev => {
-                    const map = new Map();
-                    for (const b of prev)
-                        map.set(b.batchId, b);
-                    for (const b of newBatches)
-                        map.set(b.batchId, b);
-                    return Array.from(map.values());
-                });
-            }
-            else {
-                // Deduplicate in case the API returns duplicates within a page
-                const map = new Map();
-                for (const b of newBatches)
-                    map.set(b.batchId, b);
-                setBatches(Array.from(map.values()));
-            }
-            setHasMore(newBatches.length === limit);
-            setCurrentOffset(offset + limit);
-        }
-        catch (error) {
-            console.error("Failed to load batches:", error);
-        }
-        finally {
-            setIsLoading(false);
-            setIsLoadingMore(false);
-        }
-    };
-    const loadMore = () => {
-        if (!isLoadingMore && hasMore) {
-            loadRecentBatches(currentOffset, true);
-        }
-    };
-    // Load providers
-    useEffect(() => {
-        const loadProviders = async () => {
-            try {
-                const res = await getTranslationProviders();
-                const providerData = (res?.data ?? res ?? []);
-                setProviders(providerData);
-            }
-            catch (error) {
-                console.error("Failed to load translation providers:", error);
-            }
-        };
-        loadProviders();
-    }, []);
-    // Load initial data
-    useEffect(() => {
-        loadRecentBatches(0, false);
-    }, []);
-    // Listen for batch-related events to refresh the list
-    useEffect(() => {
-        const removeSocketMessageListener = editContext?.addSocketMessageListener((message) => {
-            if (message.type === "batch-completed") {
-                debouncedReload();
-            }
-            if ((message.type === "translation-started" || message.type === "translation-finished" || message.type === "translation-error") && message.payload?.batchId) {
-                debouncedReload();
-            }
-        });
-        return () => {
-            if (removeSocketMessageListener) {
-                removeSocketMessageListener();
-            }
-            debouncedReload.cancel();
-        };
-    }, [editContext, debouncedReload]);
-    // Extract unique users from batches
-    const uniqueUsers = useMemo(() => {
-        const users = new Set();
-        batches.forEach(b => {
-            if (b.initiatedByUser) {
-                users.add(b.initiatedByUser);
-            }
-        });
-        return Array.from(users).sort();
-    }, [batches]);
-    // Extract unique languages from batches
-    const uniqueLanguages = useMemo(() => {
-        const languages = new Set();
-        batches.forEach(b => {
-            const languagesCsv = b?.languages;
-            if (languagesCsv) {
-                languagesCsv.split(',').forEach(lang => {
-                    const trimmed = lang.trim();
-                    if (trimmed) {
-                        languages.add(trimmed);
-                    }
-                });
-            }
-        });
-        return Array.from(languages).sort();
-    }, [batches]);
-    // Filter batches
-    const filteredBatches = useMemo(() => {
-        let filtered = [...batches];
-        const now = new Date();
-        const cutoffDate = new Date();
-        switch (filters.dateRange) {
-            case "today":
-                cutoffDate.setHours(0, 0, 0, 0);
-                break;
-            case "lastHour":
-                cutoffDate.setTime(now.getTime() - 60 * 60 * 1000);
-                break;
-            case "last24hours":
-                cutoffDate.setTime(now.getTime() - 24 * 60 * 60 * 1000);
-                break;
-            case "last7days":
-                cutoffDate.setDate(now.getDate() - 7);
-                break;
-            case "last30days":
-                cutoffDate.setDate(now.getDate() - 30);
-                break;
-        }
-        filtered = filtered.filter(b => new Date(b.startedAtUtc || b.createdAtUtc || b.lastUpdatedUtc || new Date().toISOString()) >= cutoffDate);
-        if (filters.status !== "all") {
-            switch (filters.status) {
-                case "in-progress":
-                    filtered = filtered.filter(b => b.status === "In Progress");
-                    break;
-                case "completed":
-                    filtered = filtered.filter(b => b.status === "Completed");
-                    break;
-                case "errors":
-                    filtered = filtered.filter(b => b.status === "Error");
-                    break;
-            }
-        }
-        // Always filter by current user for limited preview users
-        const userFilter = isLimitedPreviewUser ? currentUserName : filters.user;
-        if (userFilter !== "all") {
-            filtered = filtered.filter(b => b.initiatedByUser === userFilter);
-        }
-        if (filters.provider !== "all") {
-            filtered = filtered.filter(b => b.provider === filters.provider);
-        }
-        if (filters.targetLanguage !== "all") {
-            filtered = filtered.filter(b => {
-                const languagesCsv = b?.languages;
-                if (!languagesCsv)
-                    return false;
-                const languages = languagesCsv.split(',').map(lang => lang.trim());
-                return languages.includes(filters.targetLanguage);
-            });
-        }
-        return filtered;
-    }, [batches, filters, isLimitedPreviewUser, currentUserName]);
-    // Group by date
-    const groupedBatches = useMemo(() => {
-        if (filteredBatches.length === 0)
-            return [];
-        // Deduplicate just in case state merging introduced any duplicates
-        const dedupMap = new Map();
-        for (const b of filteredBatches)
-            dedupMap.set(b.batchId, b);
-        const sorted = Array.from(dedupMap.values()).sort((a, b) => new Date(b.startedAtUtc || b.createdAtUtc || b.lastUpdatedUtc || '').getTime() -
-            new Date(a.startedAtUtc || a.createdAtUtc || a.lastUpdatedUtc || '').getTime());
-        const list = sorted.map(b => ({
-            id: b.batchId,
-            timestamp: b.startedAtUtc || b.createdAtUtc || b.lastUpdatedUtc || new Date().toISOString(),
-            info: b,
-        }));
-        const now = new Date();
-        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-        const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
-        const thisWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
-        const dateGroups = [];
-        const todayBatches = [];
-        const yesterdayBatches = [];
-        const thisWeekBatches = [];
-        const olderBatches = [];
-        for (const b of list) {
-            const d = new Date(b.timestamp);
-            const day = new Date(d.getFullYear(), d.getMonth(), d.getDate());
-            if (day.getTime() === today.getTime())
-                todayBatches.push(b);
-            else if (day.getTime() === yesterday.getTime())
-                yesterdayBatches.push(b);
-            else if (day >= thisWeek)
-                thisWeekBatches.push(b);
-            else
-                olderBatches.push(b);
-        }
-        if (todayBatches.length)
-            dateGroups.push({ label: "Today", batches: todayBatches });
-        if (yesterdayBatches.length)
-            dateGroups.push({ label: "Yesterday", batches: yesterdayBatches });
-        if (thisWeekBatches.length)
-            dateGroups.push({ label: "This Week", batches: thisWeekBatches });
-        if (olderBatches.length)
-            dateGroups.push({ label: "Older", batches: olderBatches });
-        return dateGroups;
-    }, [filteredBatches]);
-    const navigateToBatch = (batchId) => {
-        const current = new URLSearchParams(searchParams.toString());
-        current.set("batchId", batchId);
-        router.push(`${pathname}?${current.toString()}`, { scroll: false });
-    };
-    const totalBatches = groupedBatches.reduce((sum, group) => sum + group.batches.length, 0);
-    const isMobile = editContext?.isMobile ?? false;
-    return (_jsxs("div", { className: "flex h-full flex-col min-h-0 bg-gray-5", "data-testid": "recent-translations", children: [_jsxs("div", { className: "shrink-0 border-b border-gray-3 bg-background p-4 md:p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold text-(--color-dark)", children: "Recent Translations" }), _jsx("p", { className: "text-sm text-gray-2 mt-1", children: "View and monitor translation jobs across all items" })] }), _jsx("div", { className: "flex gap-2", children: _jsxs(Button, { size: "sm", variant: "outline", onClick: () => loadRecentBatches(0, false), disabled: isLoading, className: "md:w-auto w-8 h-8 md:h-8 p-0 md:px-3", children: [_jsx(RefreshIcon, { className: `h-4 w-4 ${isLoading ? 'animate-spin' : ''}` }), _jsx("span", { className: "hidden md:inline", children: "Refresh" })] }) })] }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-(--color-gray-1)", children: "Date Range:" }), _jsx(Select, { className: "w-40", options: DATE_RANGE_OPTIONS, value: filters.dateRange, onValueChange: (value) => setFilters((prev) => ({ ...prev, dateRange: value })), placeholder: "Select date range" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-(--color-gray-1)", children: "Status:" }), _jsx(Select, { className: "w-36", options: STATUS_OPTIONS, value: filters.status, onValueChange: (value) => setFilters((prev) => ({ ...prev, status: value })), placeholder: "Select status" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-(--color-gray-1)", children: "User:" }), _jsx(Select, { className: "w-44", options: [
-                                            { value: "all", label: "All Users" },
-                                            ...(currentUserName !== "all"
-                                                ? [{ value: currentUserName, label: `${currentUserName} (You)` }]
-                                                : []),
-                                            ...uniqueUsers
-                                                .filter((u) => u !== currentUserName)
-                                                .map((u) => ({ value: u, label: u })),
-                                        ], value: isLimitedPreviewUser ? currentUserName : filters.user, onValueChange: (value) => setFilters((prev) => ({ ...prev, user: value })), disabled: isLimitedPreviewUser, placeholder: "Select user" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-(--color-gray-1)", children: "Provider:" }), _jsx(Select, { className: "w-44", options: [
-                                            { value: "all", label: "All Providers" },
-                                            ...providers.map((p) => ({
-                                                value: p.name,
-                                                label: p.displayName || p.name,
-                                            })),
-                                        ], value: filters.provider, onValueChange: (value) => setFilters((prev) => ({ ...prev, provider: value })), placeholder: "Select provider" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-(--color-gray-1)", children: "Target Language:" }), _jsx(Select, { className: "w-44", options: [
-                                            { value: "all", label: "All Languages" },
-                                            ...uniqueLanguages.map((lang) => ({
-                                                value: lang,
-                                                label: lang,
-                                            })),
-                                        ], value: filters.targetLanguage, onValueChange: (value) => setFilters((prev) => ({ ...prev, targetLanguage: value })), placeholder: "Select language" })] }), (filters.dateRange !== "last30days" || filters.status !== "all" || filters.user !== currentUserName || filters.provider !== "all" || filters.targetLanguage !== "all") && (_jsxs(Button, { size: "sm", variant: "ghost", onClick: () => setFilters({ dateRange: "last30days", status: "all", user: currentUserName, provider: "all", targetLanguage: "all" }), children: [_jsx("i", { className: "pi pi-times" }), "Clear Filters"] }))] }), _jsxs("div", { className: "mt-3 text-xs text-gray-2", children: ["Showing ", totalBatches, " batch", totalBatches !== 1 ? 'es' : '', batches.length !== totalBatches && (_jsxs("span", { children: [" (filtered from ", batches.length, " total batches)"] }))] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 md:p-6 min-h-0", children: isLoading && batches.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "flex items-center gap-2 text-gray-2", children: [_jsx(LoaderIcon, { className: "h-5 w-5 animate-spin text-theme-secondary" }), "Loading recent translations..."] }) })) : groupedBatches.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "text-center text-gray-2", children: [_jsx(LanguagesIcon, { className: "h-8 w-8 block mx-auto mb-2 text-gray-3" }), _jsx("p", { className: "font-medium text-(--color-gray-1)", children: "No translations found" }), _jsx("p", { className: "text-sm mt-1", children: filteredBatches.length !== batches.length
-                                    ? "Try adjusting your filters or start a translation to see it appear here"
-                                    : "Start a translation to see it appear here" })] }) })) : (_jsxs("div", { className: "space-y-6", children: [groupedBatches.map((dateGroup) => (_jsxs("div", { children: [_jsxs("h2", { className: "text-lg font-semibold text-(--color-dark) mb-3 border-b border-gray-3 pb-2", children: [dateGroup.label, _jsxs("span", { className: "ml-2 text-sm font-normal text-gray-2", children: ["(", dateGroup.batches.length, " batch", dateGroup.batches.length !== 1 ? 'es' : '', ")"] })] }), _jsx("div", { className: "space-y-3", children: dateGroup.batches.map((b) => {
-                                        const batchDate = new Date(b.timestamp);
-                                        const now = new Date();
-                                        const isToday = batchDate.toDateString() === now.toDateString();
-                                        const timeDisplay = isToday
-                                            ? batchDate.toLocaleTimeString()
-                                            : batchDate.toLocaleDateString() + " " + batchDate.toLocaleTimeString();
-                                        const info = b.info;
-                                        const totalJobs = info?.expectedJobs ?? 0;
-                                        const itemsCount = typeof info?.itemsCount === 'number' ? info.itemsCount : undefined;
-                                        const languagesCsv = info?.languages;
-                                        const languages = languagesCsv ? languagesCsv.split(',') : [];
-                                        const completedJobs = info?.completedJobs ?? 0;
-                                        const anyError = (info?.errorJobs ?? 0) > 0;
-                                        const anyInProgress = info?.status === "In Progress";
-                                        return (_jsx("div", { className: "border border-gray-3 rounded-lg bg-background shadow-sm overflow-hidden transition-shadow hover:shadow-md", children: _jsx("button", { className: "w-full px-4 py-3 md:px-6 md:py-4 hover:bg-gray-5 transition-colors text-left", onClick: () => navigateToBatch(b.id), title: "View batch details", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "text-left", children: [_jsx("div", { className: "font-medium text-(--color-dark)", children: `Translation Batch - ${timeDisplay}` }), _jsxs("div", { className: "text-sm text-gray-2 mt-1 flex flex-wrap items-center gap-x-2", children: [_jsxs("span", { className: "font-medium text-(--color-gray-1)", children: [totalJobs, " translations"] }), typeof itemsCount === 'number' && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-3", children: "\u2022" }), _jsxs("span", { children: [itemsCount, " items"] })] })), languages.length ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-3", children: "\u2022" }), _jsx("span", { className: "truncate max-w-[200px]", title: languages.join(", "), children: languages.join(", ") })] })) : null, totalJobs > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-3", children: "\u2022" }), _jsxs("span", { className: "text-xs", children: [completedJobs, "/", totalJobs, " completed"] })] }))] }), _jsx("div", { className: "mt-2 block", children: _jsxs("span", { className: "inline-flex text-[10px] bg-gray-4 text-(--color-gray-1) px-2 py-0.5 rounded font-mono whitespace-nowrap overflow-hidden", children: ["ID: ", b.id] }) }), _jsxs("div", { className: "mt-2 flex flex-wrap gap-2 items-center text-xs", children: [info?.status && (_jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-1 font-medium ${info.status === 'Completed' ? 'bg-green-100 text-green-700' :
-                                                                                info.status === 'In Progress' ? 'bg-theme-secondary-light text-theme-secondary' :
-                                                                                    info.status === 'Error' ? 'bg-red-100 text-red-600' : 'bg-gray-4 text-(--color-gray-1)'}`, children: info.status })), info?.provider && (_jsxs("span", { className: "text-(--color-gray-1)", children: ["Provider: ", _jsx("span", { className: "font-medium", children: info.provider })] })), info?.initiatedByUser && (_jsxs("span", { className: "text-(--color-gray-1)", children: ["By: ", _jsx("span", { className: "font-medium", children: info.initiatedByUser })] })), info?.lastUpdatedUtc && (_jsxs("span", { className: "text-gray-2", children: ["Updated: ", new Date(info.lastUpdatedUtc).toLocaleString()] }))] })] }), _jsxs("div", { className: "flex gap-2", children: [anyInProgress && (_jsx("span", { className: "rounded-full bg-theme-secondary-light px-3 py-1 text-xs font-medium text-theme-secondary", children: "In Progress" })), anyError && (_jsx("span", { className: "rounded-full bg-red-100 px-3 py-1 text-xs font-medium text-red-600", children: "Error" })), !anyInProgress && !anyError && (_jsx("span", { className: "rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700", children: "Completed" }))] })] }) }) }, b.id));
-                                    }) })] }, dateGroup.label))), hasMore && (_jsx("div", { className: "flex justify-center pt-6", children: _jsx(Button, { variant: "outline", size: "sm", onClick: loadMore, disabled: isLoadingMore, children: isLoadingMore ? (_jsxs(_Fragment, { children: [_jsx(LoaderIcon, { className: "h-4 w-4 animate-spin text-theme-secondary" }), "Loading more..."] })) : (_jsxs(_Fragment, { children: [_jsx(ChevronDownIcon, { className: "h-4 w-4" }), "Load More Batches"] })) }) }))] })) })] }));
-}