@translationstudio/translationstudio-strapi-extension 2.0.2 → 4.0.0

package/dist/_chunks/HistoryPage-CSMW8AED.mjs

@@ -0,0 +1,1057 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Box, Typography, TextInput, Table, Thead, Tr, Tbody, Td, Badge, Th, Button, Radio, Checkbox, DatePicker, ProgressBar, Alert, Main, Grid, Flex } from "@strapi/design-system";
+import { useState, useEffect, useMemo } from "react";
+import { getFetchClient } from "@strapi/strapi/admin";
+import { g as groupHistoryData, f as formatDate, h as handleHistoryResponse, a as getThemeColors, u as useThemeMode, b as getStoredEmail, c as getSubmitLabel, s as setStoredEmail, v as validateDueDate, d as createEntryUid, e as determineEntryName, i as createTranslationPayload, j as createSuccessMessage, k as createErrorMessage, l as createGeneralErrorMessage, T as TranslationstudioLogo } from "./index-ChM8Lw4L.mjs";
+const getSearchableText = (item) => {
+  return `${item["project-name"]} ${item["element-name"]} ${item["element-uid"]} ${item.targetLanguages.join(" ")} ${item.combinedStatus.text}`.toLowerCase();
+};
+const filterBySearchTerm = (items, searchTerm, getSearchableText2) => {
+  if (!searchTerm.trim()) return items;
+  const lowerSearchTerm = searchTerm.toLowerCase();
+  return items.filter((item) => getSearchableText2(item).includes(lowerSearchTerm));
+};
+const getSortValue = (item, sortField) => {
+  if (sortField === "status") {
+    return item.combinedStatus.text.toLowerCase();
+  }
+  if (sortField === "target-language") {
+    return item.targetLanguages.join(", ").toLowerCase();
+  }
+  return item[sortField].toString().toLowerCase();
+};
+const sortItems = (items, sortState) => {
+  return [...items].sort((a, b) => {
+    const aValue = getSortValue(a, sortState.field);
+    const bValue = getSortValue(b, sortState.field);
+    const result = aValue.localeCompare(bValue);
+    return sortState.direction === "asc" ? result : -result;
+  });
+};
+const getNextSortState = (currentState, clickedField) => {
+  if (currentState.field === clickedField) {
+    return {
+      field: clickedField,
+      direction: currentState.direction === "asc" ? "desc" : "asc"
+    };
+  }
+  return {
+    field: clickedField,
+    direction: "asc"
+  };
+};
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+};
+const DEBOUNCE_DELAY = 500;
+const LoadingState = () => /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", children: "Loading history..." }) });
+const EmptyState = ({ hasSearchTerm }) => /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#666" }, children: hasSearchTerm ? "No matching translation history found." : "No translation history available." }) });
+const SearchInput = ({ value, onChange }) => /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(
+  TextInput,
+  {
+    placeholder: "Search by content type, entry, ID, target language, or status...",
+    value,
+    onChange,
+    style: { width: "100%" }
+  }
+) });
+const SortableHeader = ({
+  field,
+  currentSort,
+  onSort,
+  children
+}) => /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsxs(
+  Box,
+  {
+    style: {
+      cursor: "pointer",
+      userSelect: "none",
+      display: "flex",
+      alignItems: "center",
+      gap: "4px"
+    },
+    onClick: () => onSort(field),
+    children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", children }),
+      currentSort.field === field && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px" }, children: currentSort.direction === "asc" ? "↑" : "↓" })
+    ]
+  }
+) });
+const HistoryTable = ({
+  data,
+  sortState,
+  onSort
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    style: {
+      borderRadius: "4px"
+    },
+    children: /* @__PURE__ */ jsxs(Table, { colCount: 6, rowCount: data.length + 1, children: [
+      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(SortableHeader, { field: "project-name", currentSort: sortState, onSort, children: "Content Type" }),
+        /* @__PURE__ */ jsx(SortableHeader, { field: "element-name", currentSort: sortState, onSort, children: "Entry" }),
+        /* @__PURE__ */ jsx(SortableHeader, { field: "element-uid", currentSort: sortState, onSort, children: "ID" }),
+        /* @__PURE__ */ jsx(SortableHeader, { field: "status", currentSort: sortState, onSort, children: "Status" }),
+        /* @__PURE__ */ jsx(SortableHeader, { field: "target-language", currentSort: sortState, onSort, children: "Target Language" }),
+        /* @__PURE__ */ jsx(SortableHeader, { field: "time-imported", currentSort: sortState, onSort, children: "Date" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tbody, { children: data.map((item, index) => /* @__PURE__ */ jsx(HistoryRow, { item }, `${item["element-uid"]}-${index}`)) })
+    ] })
+  }
+);
+const HistoryRow = ({ item }) => /* @__PURE__ */ jsxs(Tr, { children: [
+  /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: item["project-name"] }) }),
+  /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: item["element-name"] }) }),
+  /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { fontFamily: "monospace", fontSize: "12px" }, children: item["element-uid"] }) }),
+  /* @__PURE__ */ jsx(Td, { children: item.combinedStatus.text && /* @__PURE__ */ jsx(Badge, { variant: item.combinedStatus.variant, children: item.combinedStatus.text }) }),
+  /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: item.targetLanguages.map((lang) => lang.toUpperCase()).join(", ") }) }),
+  /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: formatDate(item["time-imported"]) }) })
+] });
+const HistoryMenu = () => {
+  const [historyData, setHistoryData] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [sortState, setSortState] = useState({
+    field: "project-name",
+    direction: "asc"
+  });
+  const { get } = getFetchClient();
+  const debouncedSearchTerm = useDebounce(searchTerm, DEBOUNCE_DELAY);
+  useEffect(() => {
+    const fetchHistory = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await get("/translationstudio/history");
+        const result = handleHistoryResponse(response.data);
+        if (result.isError) {
+          setError(result.errorMessage || "Failed to fetch translation history.");
+        } else {
+          setHistoryData(result.historyData);
+        }
+      } catch (error2) {
+        console.error("Failed to fetch history:", error2);
+        setError("Failed to fetch translation history.");
+        setHistoryData([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchHistory();
+  }, [setIsLoading, setError, setHistoryData]);
+  const processedData = useMemo(() => {
+    const grouped = groupHistoryData(historyData);
+    const filtered = filterBySearchTerm(grouped, debouncedSearchTerm, getSearchableText);
+    return sortItems(filtered, sortState);
+  }, [historyData, debouncedSearchTerm, sortState]);
+  const handleSort = (field) => {
+    setSortState((currentState) => getNextSortState(currentState, field));
+  };
+  const handleSearchChange = (e) => {
+    setSearchTerm(e.target.value);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(LoadingState, {});
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", textColor: "danger600", children: error }) });
+  }
+  const hasData = processedData.length > 0;
+  const hasSearchTerm = Boolean(debouncedSearchTerm.trim());
+  return /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 4, style: { width: "100%" }, children: !hasData && !hasSearchTerm ? /* @__PURE__ */ jsx(EmptyState, { hasSearchTerm: false }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    historyData.length > 10 && /* @__PURE__ */ jsx(SearchInput, { value: searchTerm, onChange: handleSearchChange }),
+    hasData ? /* @__PURE__ */ jsx(HistoryTable, { data: processedData, sortState, onSort: handleSort }) : /* @__PURE__ */ jsx(EmptyState, { hasSearchTerm: true })
+  ] }) });
+};
+const LoadingSpinner = () => /* @__PURE__ */ jsxs(Box, { paddingBottom: 4, style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+  /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        width: "16px",
+        height: "16px",
+        border: "2px solid #f3f3f3",
+        borderTop: "2px solid #3498db",
+        borderRadius: "50%",
+        animation: "spin 1s linear infinite"
+      }
+    }
+  ),
+  /* @__PURE__ */ jsx(Typography, { children: "Loading translation settings..." }),
+  /* @__PURE__ */ jsx("style", { children: `
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    ` })
+] });
+const ErrorMessage = ({ message }) => /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { children: message }) });
+const LanguageSelector = ({
+  languages,
+  selectedOption,
+  onSelectionChange,
+  themeColors
+}) => /* @__PURE__ */ jsx(Box, { paddingBottom: 4, style: { color: themeColors.primaryText }, children: /* @__PURE__ */ jsxs(
+  Radio.Group,
+  {
+    onValueChange: onSelectionChange,
+    value: selectedOption,
+    name: "languages",
+    "aria-label": "translationstudio settings",
+    children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "omega",
+          tag: "label",
+          paddingBottom: 2,
+          style: { color: themeColors.primaryText },
+          children: "Languages / Connectors"
+        }
+      ),
+      languages.map((lang) => /* @__PURE__ */ jsx(Radio.Item, { value: lang.name, children: lang.name }, lang.id))
+    ]
+  }
+) });
+const AdditionalSettings = ({
+  isUrgent,
+  isEmail,
+  email,
+  dueDate,
+  onUrgentChange,
+  onEmailChange,
+  onEmailInputChange,
+  onDueDateChange,
+  themeColors
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "omega",
+      tag: "label",
+      style: { color: themeColors.primaryText },
+      paddingBottom: 4,
+      children: "Additional Settings"
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Checkbox, { onCheckedChange: onUrgentChange, defaultChecked: isUrgent, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: themeColors.primaryText }, children: "translate immediately (and ignore quotes)" }) }) }),
+  /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Checkbox, { onCheckedChange: onEmailChange, defaultChecked: isEmail, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: themeColors.primaryText }, children: "Send email notifications on translation status updates" }) }) }),
+  isEmail && /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      label: "Email Address",
+      name: "email",
+      type: "email",
+      value: email,
+      onChange: onEmailInputChange,
+      placeholder: "Enter your email address"
+    }
+  ) }),
+  !isUrgent && /* @__PURE__ */ jsxs(Box, { paddingBottom: 4, children: [
+    /* @__PURE__ */ jsx(Box, { paddingBottom: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: themeColors.primaryText }, children: "Due Date" }) }),
+    /* @__PURE__ */ jsx(DatePicker, { onChange: onDueDateChange, selecteddate: dueDate ? new Date(dueDate) : null })
+  ] })
+] });
+const ProgressIndicator = ({ progress }) => /* @__PURE__ */ jsxs(Box, { paddingBottom: 4, children: [
+  /* @__PURE__ */ jsxs(Typography, { variant: "omega", paddingBottom: 2, children: [
+    "Processing... ",
+    Math.round(progress),
+    "%"
+  ] }),
+  /* @__PURE__ */ jsx(ProgressBar, { value: progress })
+] });
+const AlertMessage = ({
+  show,
+  type,
+  message,
+  onClose
+}) => {
+  if (!show) return null;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        position: "fixed",
+        top: "10%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        zIndex: 10,
+        minWidth: "400px",
+        maxWidth: "90%"
+      },
+      children: /* @__PURE__ */ jsx(Alert, { closeLabel: "Close", variant: type, onClose, children: message })
+    }
+  );
+};
+const BulkTranslationPanel = ({
+  contentType,
+  selectedEntries,
+  onTranslationComplete
+}) => {
+  const [languages, setLanguages] = useState([]);
+  const [selectedOption, setSelectedOption] = useState("");
+  const [source, setSource] = useState("");
+  const [email, setEmail] = useState("");
+  const [isEmail, setIsEmail] = useState(true);
+  const [isUrgent, setIsUrgent] = useState(false);
+  const [dueDate, setDueDate] = useState(0);
+  const [showAlert, setShowAlert] = useState(false);
+  const [alertType, setAlertType] = useState("success");
+  const [alertMessage, setAlertMessage] = useState("");
+  const [licenseValid, setLicenseValid] = useState(null);
+  const [tsIsAvailable, setTsIsAvailable] = useState(true);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [isLoadingMappings, setIsLoadingMappings] = useState(false);
+  const [mappingsError, setMappingsError] = useState(false);
+  const themeColors = getThemeColors();
+  useThemeMode();
+  const { get, post } = getFetchClient();
+  const selectedLang = languages.find((lang) => lang.name === selectedOption);
+  const isMachineTranslation = selectedLang?.machine ?? false;
+  useEffect(() => {
+    if (!contentType) return;
+    setIsLoadingMappings(true);
+    setMappingsError(false);
+    get("/translationstudio/getLicense").then((response) => {
+      if (typeof response.data.license !== "string") return false;
+      return response.data.license !== "";
+    }).then((hasLicense) => {
+      setLicenseValid(hasLicense);
+      if (!hasLicense) throw new Error("No license set");
+      setTsIsAvailable(true);
+      return get("/translationstudio/mappings");
+    }).then((langs) => {
+      if (langs.data && Array.isArray(langs.data) && langs.data.length > 0) {
+        setLanguages(langs.data);
+        setMappingsError(false);
+      } else {
+        setLanguages([]);
+        setMappingsError(true);
+      }
+    }).catch((err) => {
+      console.error(err);
+      setTsIsAvailable(false);
+      setMappingsError(true);
+    }).finally(() => {
+      setIsLoadingMappings(false);
+    });
+  }, [contentType]);
+  useEffect(() => {
+    if (!contentType || !isEmail) return;
+    const savedEmail = getStoredEmail();
+    if (savedEmail) {
+      setEmail(savedEmail);
+    }
+  }, [isEmail]);
+  const handleUrgentChange = () => {
+    if (isUrgent) {
+      setIsUrgent(false);
+      setDueDate(0);
+    } else {
+      setIsUrgent(true);
+    }
+  };
+  const handleEmailChange = () => {
+    const newEmailState = !isEmail;
+    setIsEmail(newEmailState);
+    if (newEmailState) {
+      const savedEmail = getStoredEmail();
+      if (savedEmail) {
+        setEmail(savedEmail);
+      }
+    } else {
+      setEmail("");
+    }
+  };
+  const handleEmailInputChange = (e) => {
+    const newEmail = e.target.value;
+    setEmail(newEmail);
+    setStoredEmail(newEmail);
+  };
+  const handleDueDateChange = (date) => {
+    const validatedDate = validateDueDate(date);
+    setDueDate(validatedDate);
+    setIsUrgent(false);
+  };
+  const handleRadioSelection = (value) => {
+    setSelectedOption(value);
+    const lang = languages.find((l) => l.name === value);
+    if (lang) {
+      setSource(lang.source);
+      if (lang.machine) {
+        setIsUrgent(false);
+        setDueDate(0);
+      }
+    }
+  };
+  const displayAlert = (type, message) => {
+    setAlertType(type);
+    setAlertMessage(message);
+    setShowAlert(true);
+    setTimeout(() => setShowAlert(false), 5e3);
+  };
+  const handleBulkTranslationRequest = async () => {
+    if (!contentType || !selectedLang) return;
+    setIsProcessing(true);
+    setProgress(0);
+    try {
+      let successCount = 0;
+      let errorCount = 0;
+      for (let i = 0; i < selectedEntries.length; i++) {
+        const entryId = selectedEntries[i];
+        setProgress((i + 1) / selectedEntries.length * 100);
+        try {
+          const entryUid = createEntryUid(contentType, entryId);
+          const entryResponse = await post("/translationstudio/entrydata", {
+            uid: entryUid,
+            locale: source
+          });
+          const fetchedEntryData = entryResponse.data;
+          const entryName = determineEntryName(fetchedEntryData, contentType.displayName);
+          const payload = createTranslationPayload(
+            selectedLang,
+            dueDate,
+            isEmail,
+            isMachineTranslation,
+            email,
+            isUrgent,
+            contentType.displayName,
+            entryUid,
+            entryName
+          );
+          const response = await post("/translationstudio/translate", payload);
+          if (response.data === true) {
+            successCount++;
+          } else {
+            errorCount++;
+          }
+        } catch (error) {
+          console.error(`Failed to translate entry ${entryId}:`, error);
+          errorCount++;
+        }
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+      if (errorCount === 0) {
+        const { type, message } = createSuccessMessage(successCount, selectedEntries.length);
+        displayAlert(type, message);
+      } else if (successCount === 0) {
+        const { type, message } = createErrorMessage(selectedEntries.length);
+        displayAlert(type, message);
+      } else {
+        const { type, message } = createSuccessMessage(successCount, selectedEntries.length);
+        displayAlert(type, message);
+      }
+      onTranslationComplete();
+    } catch (error) {
+      console.error("Bulk translation error:", error);
+      const { type, message } = createGeneralErrorMessage();
+      displayAlert(type, message);
+    } finally {
+      setIsProcessing(false);
+      setProgress(0);
+    }
+  };
+  const renderNotAvailable = () => {
+    if (isLoadingMappings) {
+      return /* @__PURE__ */ jsx(LoadingSpinner, {});
+    }
+    if (!tsIsAvailable || mappingsError) {
+      return /* @__PURE__ */ jsx(ErrorMessage, { message: "Error fetching translation settings." });
+    }
+    if (licenseValid === false) {
+      return /* @__PURE__ */ jsx(ErrorMessage, { message: "Your translationstudio license is invalid. Please update your strapi configuration." });
+    }
+    if (languages.length === 0) {
+      return /* @__PURE__ */ jsx(ErrorMessage, { message: "No translation settings available. translationstudio has not been configured yet. Please add translation settings first." });
+    }
+    return null;
+  };
+  const pluginIsAvailable = () => {
+    return !isLoadingMappings && licenseValid !== null && tsIsAvailable === true && !mappingsError;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      AlertMessage,
+      {
+        show: showAlert,
+        type: alertType,
+        message: alertMessage,
+        onClose: () => setShowAlert(false)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        padding: 4,
+        style: {
+          width: "100%",
+          backgroundColor: themeColors.cardBackground,
+          borderRadius: "4px"
+        },
+        children: !pluginIsAvailable() ? renderNotAvailable() : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            LanguageSelector,
+            {
+              languages,
+              selectedOption,
+              onSelectionChange: handleRadioSelection,
+              themeColors
+            }
+          ),
+          !isMachineTranslation && selectedOption !== "" && /* @__PURE__ */ jsx(
+            AdditionalSettings,
+            {
+              isUrgent,
+              isEmail,
+              email,
+              dueDate,
+              onUrgentChange: handleUrgentChange,
+              onEmailChange: handleEmailChange,
+              onEmailInputChange: handleEmailInputChange,
+              onDueDateChange: handleDueDateChange,
+              themeColors
+            }
+          ),
+          isProcessing && /* @__PURE__ */ jsx(ProgressIndicator, { progress }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              fullWidth: true,
+              onClick: handleBulkTranslationRequest,
+              disabled: !selectedOption || isProcessing,
+              loading: isProcessing,
+              startIcon: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ jsx("path", { d: "M2,21L23,12L2,3V10L17,12L2,14V21Z", fill: "currentColor" })
+                }
+              ),
+              children: getSubmitLabel(selectedEntries.length, isUrgent, isMachineTranslation)
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+const filterAndTransformContentTypes = (data) => {
+  return data.filter((type) => type.kind === "collectionType" || type.kind === "singleType").filter((type) => !type.uid.startsWith("admin::") && !type.uid.startsWith("plugin::")).map((type) => ({
+    uid: type.uid,
+    displayName: type.info.displayName,
+    kind: type.kind
+  }));
+};
+const getEntryTitle = (entry) => {
+  const titleFields = ["title", "name", "headline"];
+  for (const field of titleFields) {
+    if (entry[field] && typeof entry[field] === "string") {
+      return entry[field];
+    }
+  }
+  const excludedFields = ["id", "documentId", "createdAt", "updatedAt", "publishedAt", "locale"];
+  for (const [key, value] of Object.entries(entry)) {
+    if (!excludedFields.includes(key) && typeof value === "string" && value.trim()) {
+      return value;
+    }
+  }
+  return `Entry #${entry.documentId || entry.id}`;
+};
+const getEntryId = (entry) => {
+  return entry.documentId || entry.id;
+};
+const getTranslationStatus = (entryId, historyData) => {
+  if (!Array.isArray(historyData) || historyData.length === 0) {
+    return "error_fetching_history";
+  }
+  const matchingItems = historyData.filter((h) => h["element-uid"].includes(entryId));
+  if (matchingItems.length === 0) {
+    return "not_translated";
+  }
+  const hasInTranslation = matchingItems.some((item) => {
+    const timeInTranslation = item["time-intranslation"] || 0;
+    const timeImported = item["time-imported"] || 0;
+    return timeInTranslation > timeImported;
+  });
+  if (hasInTranslation) {
+    return "in_translation";
+  }
+  const hasTranslated = matchingItems.some((item) => {
+    const timeImported = item["time-imported"] || 0;
+    return timeImported > 0;
+  });
+  return hasTranslated ? "translated" : "not_translated";
+};
+const getTargetLanguages = (entryId, historyData) => {
+  if (!Array.isArray(historyData) || historyData.length === 0) return [];
+  const matchingItems = historyData.filter((h) => h["element-uid"].includes(entryId));
+  const languages = [...new Set(matchingItems.map((item) => item["target-language"]))];
+  return languages.sort();
+};
+const getTranslationDate = (entryId, historyData) => {
+  if (!Array.isArray(historyData) || historyData.length === 0) return "";
+  const matchingItems = historyData.filter((h) => h["element-uid"].includes(entryId));
+  if (matchingItems.length === 0) return "";
+  const latestImportTime = Math.max(
+    ...matchingItems.map((item) => item["time-imported"] || 0)
+  );
+  return latestImportTime > 0 ? formatDate(latestImportTime) : "";
+};
+const getStatusBadgeVariant = (status) => {
+  const variants = {
+    translated: "success",
+    in_translation: "secondary",
+    error_fetching_history: "danger",
+    not_translated: "neutral"
+  };
+  return variants[status] || "neutral";
+};
+const getStatusDisplayText = (status) => {
+  const texts = {
+    translated: "Translated",
+    in_translation: "In Translation",
+    error_fetching_history: "Error fetching history",
+    not_translated: "Not Translated"
+  };
+  return texts[status] || "Not Translated";
+};
+const ContentTypesList = ({
+  contentTypes,
+  isLoading,
+  selectedContentType,
+  onContentTypeClick,
+  themeColors
+}) => /* @__PURE__ */ jsxs(Box, { style: { width: "250px", flexShrink: 0, display: "flex", flexDirection: "column" }, children: [
+  /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "omega",
+      paddingBottom: 3,
+      style: { fontWeight: "bold", color: themeColors.primaryText },
+      children: "Content Types"
+    }
+  ),
+  /* @__PURE__ */ jsx(Box, { style: { paddingTop: "8px", paddingBottom: "8px" }, children: isLoading ? /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: themeColors.primaryText }, children: "Loading..." }) }) : /* @__PURE__ */ jsx(Box, { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: contentTypes.map((type) => /* @__PURE__ */ jsx(
+    ContentTypeItem,
+    {
+      type,
+      isSelected: selectedContentType === type.uid,
+      onClick: () => onContentTypeClick(type.uid),
+      themeColors
+    },
+    type.uid
+  )) }) })
+] });
+const ContentTypeItem = ({
+  type,
+  isSelected,
+  onClick,
+  themeColors
+}) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    style: {
+      padding: "8px 12px",
+      borderRadius: "4px",
+      cursor: "pointer",
+      backgroundColor: themeColors.cardBackground,
+      border: isSelected ? "1px solid #7b79ff" : "1px solid transparent",
+      transition: "all 0.2s ease"
+    },
+    onClick,
+    children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "omega",
+          style: {
+            fontWeight: isSelected ? "bold" : "normal",
+            color: isSelected ? "#7b79ff" : themeColors.primaryText
+          },
+          children: type.displayName
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { color: themeColors.mutedText, fontSize: "11px" }, children: type.kind }) })
+    ]
+  }
+);
+const EntriesTable = ({
+  entries,
+  isLoading,
+  selectedEntries,
+  historyData,
+  isLoadingHistory,
+  onEntrySelection,
+  onSelectAll,
+  themeColors
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        style: {
+          borderRadius: "4px",
+          padding: "16px",
+          backgroundColor: themeColors.cardBackground
+        },
+        children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: themeColors.secondaryText }, children: "Loading entries..." })
+      }
+    );
+  }
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        style: {
+          borderRadius: "4px",
+          padding: "16px",
+          backgroundColor: themeColors.cardBackground
+        },
+        children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: themeColors.mutedText }, children: "No entries found for this content type." })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        borderRadius: "4px",
+        overflow: "auto",
+        display: "flex",
+        flexDirection: "column",
+        maxHeight: "fit-content",
+        backgroundColor: themeColors.cardBackground
+      },
+      children: /* @__PURE__ */ jsxs(Table, { colCount: 6, rowCount: entries.length + 1, children: [
+        /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Th, { style: { width: "50px" }, children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selectedEntries.size === entries.length && entries.length > 0,
+              indeterminate: selectedEntries.size > 0 && selectedEntries.size < entries.length,
+              onCheckedChange: onSelectAll
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "sigma",
+              fontWeight: "bold",
+              style: { color: themeColors.primaryText },
+              children: "Title"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "sigma",
+              fontWeight: "bold",
+              style: { color: themeColors.primaryText },
+              children: "ID"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "sigma",
+              fontWeight: "bold",
+              style: { color: themeColors.primaryText },
+              children: "Status"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "sigma",
+              fontWeight: "bold",
+              style: { color: themeColors.primaryText },
+              children: "Target Language"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "sigma",
+              fontWeight: "bold",
+              style: { color: themeColors.primaryText },
+              children: "Date"
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Tbody, { children: entries.map((entry) => /* @__PURE__ */ jsx(
+          EntryRow,
+          {
+            entry,
+            isSelected: selectedEntries.has(getEntryId(entry)),
+            historyData,
+            isLoadingHistory,
+            onEntrySelection,
+            themeColors
+          },
+          getEntryId(entry)
+        )) })
+      ] })
+    }
+  );
+};
+const EntryRow = ({
+  entry,
+  isSelected,
+  historyData,
+  isLoadingHistory,
+  onEntrySelection,
+  themeColors
+}) => {
+  const entryId = getEntryId(entry);
+  const status = getTranslationStatus(entryId, historyData);
+  const targetLanguages = getTargetLanguages(entryId, historyData);
+  const date = getTranslationDate(entryId, historyData);
+  return /* @__PURE__ */ jsxs(Tr, { children: [
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: isSelected,
+        onCheckedChange: (checked) => onEntrySelection(entryId, checked)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: themeColors.primaryText }, children: getEntryTitle(entry) }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "omega",
+        style: { fontFamily: "monospace", fontSize: "12px", color: themeColors.secondaryText },
+        children: entryId
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Td, { children: isLoadingHistory ? /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: themeColors.mutedText }, children: "Loading..." }) : /* @__PURE__ */ jsx(Badge, { variant: getStatusBadgeVariant(status), children: getStatusDisplayText(status) }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: themeColors.primaryText }, children: targetLanguages.map((lang) => lang.toUpperCase()).join(", ") || "-" }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: themeColors.primaryText }, children: date }) })
+  ] });
+};
+const BulkTranslationMenu = ({
+  historyData,
+  isLoadingHistory,
+  onTranslationComplete
+}) => {
+  const [contentTypes, setContentTypes] = useState([]);
+  const [selectedContentType, setSelectedContentType] = useState("");
+  const [entries, setEntries] = useState([]);
+  const [selectedEntries, setSelectedEntries] = useState(/* @__PURE__ */ new Set());
+  const [isLoadingContentTypes, setIsLoadingContentTypes] = useState(false);
+  const [isLoadingEntries, setIsLoadingEntries] = useState(false);
+  const themeColors = getThemeColors();
+  const { get } = getFetchClient();
+  useEffect(() => {
+    const fetchContentTypes = async () => {
+      setIsLoadingContentTypes(true);
+      try {
+        const response = await get("/content-manager/content-types");
+        const types = filterAndTransformContentTypes(response.data.data);
+        setContentTypes(types);
+      } catch (error) {
+        console.error("Failed to fetch content types:", error);
+      } finally {
+        setIsLoadingContentTypes(false);
+      }
+    };
+    fetchContentTypes();
+  }, [setIsLoadingContentTypes, setContentTypes]);
+  const fetchContentEntries = function(selectedContentType2) {
+    if (!selectedContentType2) {
+      return;
+    }
+    setIsLoadingEntries(true);
+    get(`/content-manager/collection-types/${selectedContentType2}`).then((response) => {
+      setEntries(response.data.results || []);
+      setSelectedEntries(/* @__PURE__ */ new Set());
+    }).catch((error) => {
+      console.error("Failed to fetch entries:", error);
+      setEntries([]);
+    }).finally(() => setIsLoadingEntries(false));
+  };
+  const selectedContentTypeData = useMemo(
+    () => contentTypes.find((ct) => ct.uid === selectedContentType),
+    [contentTypes, selectedContentType]
+  );
+  const handleContentTypeClick = (contentTypeUid) => {
+    if (selectedContentType === contentTypeUid)
+      return;
+    setSelectedContentType(contentTypeUid);
+    fetchContentEntries(contentTypeUid);
+  };
+  const handleEntrySelection = (entryId, isSelected) => {
+    const newSelection = new Set(selectedEntries);
+    if (isSelected) {
+      newSelection.add(entryId);
+    } else {
+      newSelection.delete(entryId);
+    }
+    setSelectedEntries(newSelection);
+  };
+  const handleSelectAll = (isSelected) => {
+    if (isSelected) {
+      setSelectedEntries(new Set(entries.map(getEntryId)));
+    } else {
+      setSelectedEntries(/* @__PURE__ */ new Set());
+    }
+  };
+  const handleTranslationComplete = () => {
+    setSelectedEntries(/* @__PURE__ */ new Set());
+    onTranslationComplete?.();
+  };
+  return /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 4, style: { overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxs(Box, { style: { flex: 1, display: "flex", gap: "16px", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx(
+      ContentTypesList,
+      {
+        contentTypes,
+        isLoading: isLoadingContentTypes,
+        selectedContentType,
+        onContentTypeClick: handleContentTypeClick,
+        themeColors
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          minWidth: "400px",
+          width: "60vw"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", paddingBottom: 3, style: { fontWeight: "bold" }, children: "Entries" }),
+          selectedContentType ? /* @__PURE__ */ jsx(
+            EntriesTable,
+            {
+              entries,
+              isLoading: isLoadingEntries,
+              selectedEntries,
+              historyData,
+              isLoadingHistory,
+              onEntrySelection: handleEntrySelection,
+              onSelectAll: handleSelectAll,
+              themeColors
+            }
+          ) : /* @__PURE__ */ jsx(Box, { style: { borderRadius: "4px", padding: "16px" }, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#666" }, children: "Select a content type to view entries." }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { style: { width: "400px", flexShrink: 0, display: "flex", flexDirection: "column" }, children: selectedEntries.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "omega", paddingBottom: 3, style: { fontWeight: "bold" }, children: "Translation Settings" }),
+      /* @__PURE__ */ jsx(Box, { style: { borderRadius: "4px", overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+        BulkTranslationPanel,
+        {
+          contentType: selectedContentTypeData,
+          selectedEntries: Array.from(selectedEntries),
+          onTranslationComplete: handleTranslationComplete
+        }
+      ) })
+    ] }) })
+  ] }) });
+};
+const HistoryPage = () => {
+  const [historyData, setHistoryData] = useState([]);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(true);
+  const [activeTab, setActiveTab] = useState("history");
+  const { get } = getFetchClient();
+  useEffect(() => {
+    const fetchHistory = async () => {
+      try {
+        const response = await get("/translationstudio/history");
+        const result = handleHistoryResponse(response.data);
+        if (result.isError) {
+        } else {
+          setHistoryData(result.historyData);
+        }
+      } catch (error) {
+        console.error("Failed to fetch history:", error);
+        setHistoryData([]);
+      } finally {
+        setIsLoadingHistory(false);
+      }
+    };
+    fetchHistory();
+  }, [setHistoryData, setIsLoadingHistory]);
+  const refreshHistoryData = async () => {
+    setIsLoadingHistory(true);
+    try {
+      const response = await get("/translationstudio/history");
+      const result = handleHistoryResponse(response.data);
+      if (result.isError) {
+        setHistoryData([]);
+      } else {
+        setHistoryData(result.historyData);
+      }
+    } catch (error) {
+      setHistoryData([]);
+    } finally {
+      setIsLoadingHistory(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Box, { padding: 10, style: { minHeight: "90vh", marginTop: "5vh" }, children: /* @__PURE__ */ jsxs(Grid.Root, { children: [
+    /* @__PURE__ */ jsx(Grid.Item, { xs: 12, children: /* @__PURE__ */ jsx(Box, { style: { textAlign: "right", width: "100%" }, children: /* @__PURE__ */ jsx(
+      "picture",
+      {
+        style: {
+          width: "150px",
+          height: "auto",
+          display: "inline-block"
+        },
+        children: /* @__PURE__ */ jsx(TranslationstudioLogo, {})
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(Grid.Item, { xs: 12, children: /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: activeTab === "history" ? "default" : "tertiary",
+          onClick: () => setActiveTab("history"),
+          children: "Translation History"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: activeTab === "bulk" ? "default" : "tertiary",
+          onClick: () => setActiveTab("bulk"),
+          children: "Translate multiple entries"
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(Grid.Item, { xs: 12, children: [
+      activeTab === "bulk" && /* @__PURE__ */ jsx(
+        BulkTranslationMenu,
+        {
+          historyData,
+          isLoadingHistory,
+          onTranslationComplete: refreshHistoryData
+        }
+      ),
+      activeTab === "history" && /* @__PURE__ */ jsx(
+        HistoryMenu,
+        {
+          historyData,
+          isLoadingHistory,
+          onRefresh: refreshHistoryData
+        }
+      )
+    ] })
+  ] }) }) });
+};
+export {
+  HistoryPage
+};