@parhelia/localization 0.1.10745

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

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEditContext } from "@parhelia/core";
+import { listBatches, } from "../services/translationService";
+import { Button } from "@parhelia/core";
+import { useDebouncedCallback } from "use-debounce";
+export function RecentTranslations() {
+    const editContext = useEditContext();
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [batches, setBatches] = 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 didInitialLoadRef = useRef(false);
+    const [filters, setFilters] = useState({
+        dateRange: "last30days",
+        status: "all",
+    });
+    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 initial data
+    useEffect(() => {
+        if (didInitialLoadRef.current)
+            return;
+        didInitialLoadRef.current = true;
+        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]);
+    // 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 "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;
+            }
+        }
+        return filtered;
+    }, [batches, filters]);
+    // 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(Array.from(searchParams.entries()));
+        current.set("batchId", batchId);
+        router.push(`${pathname}?${current.toString()}`, { scroll: false });
+    };
+    const totalBatches = groupedBatches.reduce((sum, group) => sum + group.batches.length, 0);
+    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 mb-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: "Recent Translations" }), _jsx("p", { className: "text-sm text-gray-600 mt-1", children: "View and monitor translation jobs across all items" })] }), _jsx("div", { className: "flex gap-2", children: _jsxs(Button, { size: "sm", onClick: () => loadRecentBatches(0, false), disabled: isLoading, children: [_jsx("i", { className: `pi pi-refresh ${isLoading ? 'pi-spin' : ''}` }), "Refresh"] }) })] }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-sm font-medium text-gray-700", children: "Date Range:" }), _jsxs("select", { value: filters.dateRange, onChange: (e) => setFilters(prev => ({ ...prev, dateRange: e.target.value })), className: "px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500", children: [_jsx("option", { value: "today", children: "Today" }), _jsx("option", { value: "last7days", children: "Last 7 Days" }), _jsx("option", { value: "last30days", children: "Last 30 Days" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-sm font-medium text-gray-700", children: "Status:" }), _jsxs("select", { value: filters.status, onChange: (e) => setFilters(prev => ({ ...prev, status: e.target.value })), className: "px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500", children: [_jsx("option", { value: "all", children: "All Status" }), _jsx("option", { value: "in-progress", children: "In Progress" }), _jsx("option", { value: "completed", children: "Completed" }), _jsx("option", { value: "errors", children: "Errors Only" })] })] }), (filters.dateRange !== "last30days" || filters.status !== "all") && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setFilters({ dateRange: "last30days", status: "all" }), children: [_jsx("i", { className: "pi pi-times" }), "Clear Filters"] }))] }), _jsxs("div", { className: "mt-3 text-sm text-gray-600", 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 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-500", children: [_jsx("i", { className: "pi pi-spin pi-spinner" }), "Loading recent translations..."] }) })) : groupedBatches.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" }), _jsx("p", { className: "text-sm", 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-gray-800 mb-3 border-b pb-1", children: [dateGroup.label, _jsxs("span", { className: "ml-2 text-sm font-normal text-gray-500", 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 rounded-lg", children: _jsx("button", { className: "w-full bg-gray-50 px-4 py-3 hover:bg-gray-100 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-gray-900", children: `Translation Batch - ${timeDisplay}` }), _jsxs("div", { className: "text-sm text-gray-600", children: [totalJobs, " translations", typeof itemsCount === 'number' && (_jsxs("span", { children: [" \u2022 ", itemsCount, " items"] })), languages.length ? (_jsxs("span", { children: [" \u2022 ", languages.join(", ")] })) : null, _jsxs("span", { className: "ml-2 text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full", children: ["Batch ID: ", b.id] }), totalJobs > 0 && (_jsxs("span", { className: "ml-2 text-xs text-gray-500", children: ["(", completedJobs, "/", totalJobs, " completed", info?.errorJobs ? `, ${info.errorJobs} errors` : '', ")"] }))] }), _jsxs("div", { className: "mt-1 flex flex-wrap gap-2 items-center text-xs", children: [info?.status && (_jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 font-medium ${info.status === 'Completed' ? 'bg-green-100 text-green-700' :
+                                                                                info.status === 'In Progress' ? 'bg-blue-100 text-blue-700' :
+                                                                                    info.status === 'Error' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700'}`, children: info.status })), info?.provider && (_jsxs("span", { className: "text-gray-700", children: ["Provider: ", _jsx("span", { className: "font-medium", children: info.provider })] })), info?.initiatedByUser && (_jsxs("span", { className: "text-gray-700", children: ["By: ", _jsx("span", { className: "font-medium", children: info.initiatedByUser })] })), info?.lastUpdatedUtc && (_jsxs("span", { className: "text-gray-500", children: ["Updated: ", new Date(info.lastUpdatedUtc).toLocaleString()] }))] })] }), _jsxs("div", { className: "flex gap-2", children: [anyInProgress && (_jsx("span", { className: "rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700", children: "In Progress" })), anyError && (_jsx("span", { className: "rounded-full bg-red-100 px-3 py-1 text-xs font-medium text-red-700", 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-4", children: _jsx(Button, { variant: "outline", onClick: loadMore, disabled: isLoadingMore, children: isLoadingMore ? (_jsxs(_Fragment, { children: [_jsx("i", { className: "pi pi-spin pi-spinner mr-2" }), "Loading more..."] })) : (_jsxs(_Fragment, { children: [_jsx("i", { className: "pi pi-chevron-down mr-2" }), "Load More Batches"] })) }) }))] })) })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TranslationManagement.d.ts","sourceRoot":"","sources":["../../../../src/translation-center/TranslationManagement.tsx"],"names":[],"mappings":"AAKA,wBAAgB,qBAAqB,4CA4CpC"}

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEditContext } from "@parhelia/core";
+import { BatchTranslationView } from "./BatchTranslationView";
+export function TranslationManagement() {
+    const editContext = useEditContext();
+    const config = editContext?.configuration;
+    const searchParams = useSearchParams();
+    const batchId = searchParams.get("batchId");
+    const router = useRouter();
+    const pathname = usePathname();
+    // Get the Recent Translations panel content (since it's the only one)
+    const recentTranslationsPanel = config?.translationCenter?.groups
+        ?.flatMap((x) => x.panels)
+        ?.find((panel) => panel.id === "recent-translations");
+    if (!config) {
+        return (_jsx("div", { className: "flex h-full flex-col items-center justify-center", children: "Loading..." }));
+    }
+    return (_jsx("div", { className: "absolute inset-0 flex flex-col", children: batchId ? (_jsx(BatchTranslationView, { batchId: batchId, onBack: () => {
+                const current = new URLSearchParams(Array.from(searchParams.entries()));
+                current.delete("batchId");
+                router.push(`${pathname}?${current.toString()}`, { scroll: false });
+            } })) : recentTranslationsPanel ? (_jsx("div", { className: "flex-1 min-h-0", children: recentTranslationsPanel.content })) : (_jsxs("div", { className: "flex h-full flex-col items-center justify-center text-gray-500", children: [_jsx("i", { className: "pi pi-language mb-4 text-4xl" }), _jsx("p", { children: "Recent translations not available" })] })) }));
+}

package/dist/localization/src/types.d.ts

@@ -0,0 +1,18 @@
+import { ControlCenterPanel } from "@parhelia/core";
+import { ReactNode } from "react";
+export type TranslationStatus = {
+    itemId: string;
+    targetLanguage: string;
+    sourceLanguage: string;
+    status: string;
+    timestamp: string;
+    message?: string;
+};
+export type translationCenter = {
+    groups: {
+        title: string;
+        icon: ReactNode;
+        panels: ControlCenterPanel[];
+    }[];
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/localization/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,SAAS,CAAC;QAChB,MAAM,EAAE,kBAAkB,EAAE,CAAC;KAC9B,EAAE,CAAC;CACL,CAAC"}

package/dist/localization/src/types.js

@@ -0,0 +1 @@
+export {};

package/dist/localization/src/utils/createVersions.d.ts

@@ -0,0 +1,14 @@
+import { EditContextType } from "@parhelia/core";
+import { TranslationWizardData, TranslationDialogResult } from "../steps/types";
+export type ItemVersionDescriptor = {
+    id: string;
+    version?: number;
+};
+export declare function createVersionsOnlyAndClose(params: {
+    items: ItemVersionDescriptor[];
+    targetLanguages: string[];
+    editContext: EditContextType;
+    data: TranslationWizardData;
+    requestClose: (result: TranslationDialogResult | null) => void;
+}): Promise<void>;
+//# sourceMappingURL=createVersions.d.ts.map

package/dist/localization/src/utils/createVersions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createVersions.d.ts","sourceRoot":"","sources":["../../../../src/utils/createVersions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAGhF,MAAM,MAAM,qBAAqB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErE,wBAAsB,0BAA0B,CAC9C,MAAM,EAAE;IACN,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,EAAE,eAAe,CAAC;IAC7B,IAAI,EAAE,qBAAqB,CAAC;IAC5B,YAAY,EAAE,CAAC,MAAM,EAAE,uBAAuB,GAAG,IAAI,KAAK,IAAI,CAAC;CAChE,GACA,OAAO,CAAC,IAAI,CAAC,CAyBf"}

package/dist/localization/src/utils/createVersions.js

@@ -0,0 +1,26 @@
+import { createVersion as createVersionEdit, createVersionsBatch as createVersionsBatchEdit } from "@parhelia/core";
+export async function createVersionsOnlyAndClose(params) {
+    const { items, targetLanguages, editContext, data, requestClose } = params;
+    try {
+        if (items.length === 1 && targetLanguages.length === 1) {
+            const item = items[0];
+            await createVersionEdit({ id: item.id, language: targetLanguages[0], version: item.version || 0 }, editContext.sessionId);
+        }
+        else {
+            const descriptors = items.flatMap(it => targetLanguages.map(lang => ({ id: it.id, language: lang, version: it.version || 0 })));
+            await createVersionsBatchEdit(descriptors, editContext.sessionId);
+        }
+        editContext?.showToast?.("Versions created");
+        const result = {
+            translationProvider: data.translationProvider,
+            targetLanguages: data.targetLanguages,
+            includeSubitems: data.includeSubitems,
+            discoveredItems: data.discoveredItems,
+        };
+        requestClose(result);
+    }
+    catch (e) {
+        console.error("Create versions failed", e);
+        editContext?.showToast?.("Failed to create versions");
+    }
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@parhelia/localization",
+  "version": "0.1.10745",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist/",
+    "styles.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "eslint . --max-warnings 0",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@turbo/gen": "^2.4.4",
+    "@types/node": "^22.13.9",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "eslint": "^9.22.0",
+    "typescript": "5.8.2"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.0.14",
+    "postcss": "^8.5.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.14"
+  }
+}

package/styles.css

@@ -0,0 +1 @@
+/* Localization package styles */