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

# Admin Dashboard Redesign

> Navigation grouped by job, Cmd/Ctrl+K search, and more

export const ChangelogActions = () => {
  return <>
      <style>{`
        .changelog-actions {
          display: flex;
          justify-content: center;
          gap: 12px;
          margin-top: 2rem;
          padding-top: 1.5rem;
          border-top: 1px solid #e5e7eb;
        }
        
        [data-theme="dark"] .changelog-actions {
          border-top-color: #374151;
        }
        
        .changelog-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border-radius: 9999px;
          border: 1px solid #d1d5db;
          background: transparent;
          color: #6b7280;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .changelog-btn:hover {
          border-color: #9ca3af;
          background: #f9fafb;
        }
        
        [data-theme="dark"] .changelog-btn {
          border-color: #4b5563;
          color: #9ca3af;
        }
        
        [data-theme="dark"] .changelog-btn:hover {
          border-color: #6b7280;
          background: #1f2937;
        }
      `}</style>
      <div className="changelog-actions">
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    btn.innerHTML = "❤️ Like";
    btn.style.borderColor = "#ec4899";
  }}>
          🤍 Like
        </button>
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    navigator.clipboard.writeText(window.location.href);
    const originalContent = btn.innerHTML;
    btn.innerHTML = "✓ Copied";
    btn.style.borderColor = "#22c55e";
    btn.style.color = "#22c55e";
    setTimeout(() => {
      btn.innerHTML = originalContent;
      btn.style.borderColor = "";
      btn.style.color = "";
    }, 2000);
  }}>
          ↗ Share
        </button>
      </div>
    </>;
};

<div style={{ display: "flex", gap: "8px", flexWrap: "wrap", marginBottom: "16px" }}>
  <Badge color="gray" size="sm" icon="calendar">September 4, 2026</Badge>
  <Badge color="blue" size="sm" icon="rectangle-ad">Ad Platform</Badge>
  <Badge color="purple" size="sm" icon="arrow-up-right-dots">Enhancement</Badge>
</div>

The Admin Dashboard has been redesigned with clearer navigation and faster access to common tasks. All existing functionality is still available. Pages and tools have simply been reorganized.

You can now use **Cmd/Ctrl+K** or select **Search** in the sidebar to quickly find and jump to vendors and campaigns.

Navigation is now grouped by job into **Ads, Analytics, Optimization, Tools, and Management**. Some key changes include:

* **Products** is now under **Catalog**
* **Finance** is now under **Management**
* **Account Details, User Management, Custom Branding, and Payments** are now under **Admin Settings**, accessible from the marketplace dropdown at the top of the sidebar

<ChangelogActions />