> ## Documentation Index
> Fetch the complete documentation index at: https://docs.activeviam.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Atoti Admin UI available versions

> General availability and end of support dates for all released minor versions of Atoti Admin UI.

export const versions = [{
  version: "5.2",
  docsUrl: "/engine/admin-ui/5.2/",
  releaseNotesUrl: "/engine/admin-ui/5.2/releases-and-upgrades/changelog",
  gaDate: "Aug 08, 2024",
  eosDate: null
}];

export const eosBg = dateStr => {
  const dark = typeof document !== "undefined" && document.documentElement.classList.contains("dark");
  if (!dateStr) return dark ? {
    color: "white"
  } : {};
  const d = new Date(dateStr);
  const now = new Date();
  const soon = new Date(now);
  soon.setMonth(now.getMonth() + 6);
  if (d < now) return {
    backgroundColor: dark ? "rgba(239, 68, 68, 0.3)" : "rgba(254, 202, 202, 0.7)",
    color: dark ? "white" : undefined
  };
  if (d <= soon) return {
    backgroundColor: dark ? "rgba(234, 179, 8, 0.35)" : "rgba(254, 240, 138, 0.9)",
    color: dark ? "white" : undefined
  };
  return dark ? {
    color: "white"
  } : {};
};

export const isDark = () => typeof document !== "undefined" && document.documentElement.classList.contains("dark");
export const soonBg = () => isDark() ? "rgba(234, 179, 8, 0.35)" : "rgba(254, 240, 138, 0.9)";
export const expiredBg = () => isDark() ? "rgba(239, 68, 68, 0.3)" : "rgba(254, 202, 202, 0.7)";
export const swatchBorder = () => isDark() ? "1px solid rgba(255,255,255,0.15)" : "1px solid rgba(0,0,0,0.2)";

Configure, manage, and monitor your Atoti deployment from a central administration interface.

<Note>Atoti Admin UI follows the EOS policy of the underlying Atoti UI version it is bundled with.</Note>

<table>
  <thead>
    <tr>
      <th>Version</th>
      <th>Release notes</th>
      <th>GA date</th>
      <th>EOS date</th>
    </tr>
  </thead>

  <tbody>
    {versions.map(v => (
            <tr key={v.version} style={eosBg(v.eosDate)}>
              <td><a href={v.docsUrl}>{v.version}</a></td>
              <td><a href={v.releaseNotesUrl}>Release notes</a></td>
              <td>{v.gaDate}</td>
              <td>{v.eosDate ?? ""}</td>
            </tr>
          ))}
  </tbody>
</table>

<div style={{display: "flex", gap: "20px", marginTop: "12px", fontSize: "0.85rem", flexWrap: "wrap"}}>
  <div style={{display: "flex", alignItems: "center", gap: "6px"}}>
    <span style={{display: "inline-block", width: "14px", height: "14px", backgroundColor: soonBg(), border: swatchBorder(), borderRadius: "2px", flexShrink: 0}} /> EOS within 6 months
  </div>

  <div style={{display: "flex", alignItems: "center", gap: "6px"}}>
    <span style={{display: "inline-block", width: "14px", height: "14px", backgroundColor: expiredBg(), border: swatchBorder(), borderRadius: "2px", flexShrink: 0}} /> No longer supported
  </div>

  <div style={{display: "flex", alignItems: "center", gap: "6px", color: "gray"}}>
    No background — EOS date not yet set
  </div>
</div>