chore(ds): finalize design-system rollout and smoke compatibility

.gitignore

@@ -37,3 +37,6 @@ services/api/.data/
 # E2E artifacts
 playwright-report/
 test-results/
+
+# Local MCP config
+mcp.toml

apps/admin/package.json

@@ -12,6 +12,7 @@
     "typecheck": "echo 'admin typecheck not configured yet'"
   },
   "dependencies": {
+    "@flix/design-system": "0.1.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.4"

apps/admin/src/App.jsx

@@ -1,14 +1,24 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { ProtectedRoute } from './routes/ProtectedRoute.jsx';
 import { LoginPage } from './pages/LoginPage.jsx';
-import { DashboardPage } from './pages/DashboardPage.jsx';
+import { DashboardHomePage } from './pages/DashboardHomePage.jsx';
+import { EventsPage } from './pages/EventsPage.jsx';
+import { NewEventPage } from './pages/NewEventPage.jsx';
+import { EditEventPage } from './pages/EditEventPage.jsx';
+import { LessonsPage } from './pages/LessonsPage.jsx';
+import { QuizzesPage } from './pages/QuizzesPage.jsx';
 
 export const App = () => (
   <Routes>
     <Route path="/login" element={<LoginPage />} />
 
     <Route element={<ProtectedRoute />}>
-      <Route path="/dashboard" element={<DashboardPage />} />
+      <Route path="/dashboard" element={<DashboardHomePage />} />
+      <Route path="/eventos" element={<EventsPage />} />
+      <Route path="/eventos/novo" element={<NewEventPage />} />
+      <Route path="/eventos/:id/editar" element={<EditEventPage />} />
+      <Route path="/aulas" element={<LessonsPage />} />
+      <Route path="/quizzes" element={<QuizzesPage />} />
     </Route>
 
     <Route path="*" element={<Navigate to="/dashboard" replace />} />

apps/admin/src/main.jsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { App } from './App.jsx';
 import { AuthProvider } from './auth/AuthContext.jsx';
+import '@flix/design-system/tokens/theme.css';
 import './styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(

apps/admin/src/pages/DashboardHomePage.jsx

@@ -0,0 +1,3 @@
+import { DashboardPage } from './DashboardPage.jsx';
+
+export const DashboardHomePage = () => <DashboardPage section="dashboard" />;

apps/admin/src/pages/DashboardPage.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import { NavLink, useNavigate, useParams } from 'react-router-dom';
 import { useAuth } from '../auth/AuthContext.jsx';
 import {
   createEvent,
@@ -95,7 +96,18 @@ const buildEventUpdatePayload = (form) => ({
   logoUrl: form.logoUrl ? form.logoUrl : null,
 });
 
-export const DashboardPage = () => {
+const pageTitles = {
+  dashboard: 'Dashboard',
+  eventos: 'Eventos',
+  'eventos-new': 'Eventos / Novo',
+  'eventos-edit': 'Eventos / Editar',
+  aulas: 'Aulas',
+  quizzes: 'Quizzes',
+};
+
+export const DashboardPage = ({ section = 'dashboard' }) => {
+  const navigate = useNavigate();
+  const { id: routeEventId } = useParams();
   const { session, logout } = useAuth();
   const token = session?.accessToken;
 
@@ -119,6 +131,10 @@ export const DashboardPage = () => {
   const [status, setStatus] = useState('');
   const [error, setError] = useState('');
 
+  const isEventosSection = ['eventos', 'eventos-new', 'eventos-edit'].includes(section);
+  const isEventCreateMode = section === 'eventos-new';
+  const isEventEditMode = section === 'eventos-edit';
+
   const selectedEvent = useMemo(
     () => events.find((event) => event.id === selectedEventId) ?? null,
     [events, selectedEventId],
@@ -248,6 +264,26 @@ export const DashboardPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedEventId, selectedLessonId]);
 
+  useEffect(() => {
+    if (isEventCreateMode) {
+      setSelectedEventId('');
+      setEventForm(defaultEventForm);
+      setBrandingPreview(null);
+      setBrandingRollback(null);
+      setBrandingError('');
+      return;
+    }
+
+    if (isEventEditMode && routeEventId) {
+      setSelectedEventId(routeEventId);
+    }
+  }, [isEventCreateMode, isEventEditMode, routeEventId]);
+
+  useEffect(() => {
+    if (!isEventEditMode || !selectedEvent) return;
+    setEventForm(mapEventToForm(selectedEvent));
+  }, [isEventEditMode, selectedEvent]);
+
   const handleCreateEvent = async (event) => {
     event.preventDefault();
     resetFeedback();
@@ -700,14 +736,29 @@ export const DashboardPage = () => {
     <main className="dashboard-layout">
       <header className="dashboard-header">
         <div>
-          <h1>Admin Content Operations</h1>
-          <p>Manage events, lessons, materials, quizzes, and branding from one place.</p>
+          <h1>{pageTitles[section] ?? 'Admin Content Operations'}</h1>
+          <p>Fluxo administrativo orientado por rotas do workflow oficial.</p>
         </div>
         <button type="button" onClick={logout}>
           Logout
         </button>
       </header>
 
+      <nav className="admin-nav">
+        <NavLink to="/dashboard" className={({ isActive }) => (isActive ? 'active' : '')}>
+          Dashboard
+        </NavLink>
+        <NavLink to="/eventos" className={({ isActive }) => (isActive ? 'active' : '')}>
+          Eventos
+        </NavLink>
+        <NavLink to="/aulas" className={({ isActive }) => (isActive ? 'active' : '')}>
+          Aulas
+        </NavLink>
+        <NavLink to="/quizzes" className={({ isActive }) => (isActive ? 'active' : '')}>
+          Quizzes
+        </NavLink>
+      </nav>
+
       <section className="dashboard-grid two-col">
         <article>
           <h2>Runtime</h2>
@@ -726,7 +777,31 @@ export const DashboardPage = () => {
         </article>
       </section>
 
-      <section className="dashboard-grid two-col">
+      {section === 'dashboard' ? (
+        <section className="dashboard-grid two-col">
+          <article>
+            <h2>Command Center</h2>
+            <p className="muted">Use o menu para operar cada etapa com foco por contexto.</p>
+            <div className="inline-actions">
+              <NavLink to="/eventos">Abrir Eventos</NavLink>
+              <NavLink to="/aulas">Abrir Aulas</NavLink>
+              <NavLink to="/quizzes">Abrir Quizzes</NavLink>
+            </div>
+          </article>
+          <article>
+            <h2>Selecao Atual</h2>
+            <p className="muted">
+              Evento: <strong>{selectedEvent?.title ?? 'Nenhum'}</strong>
+            </p>
+            <p className="muted">
+              Aula: <strong>{selectedLesson?.title ?? 'Nenhuma'}</strong>
+            </p>
+          </article>
+        </section>
+      ) : null}
+
+      {isEventosSection ? (
+        <section className="dashboard-grid two-col">
         <article>
           <h2>Events + Branding</h2>
           <form className="stack-form" onSubmit={handleCreateEvent}>
@@ -919,34 +994,78 @@ export const DashboardPage = () => {
             )}
 
             <div className="inline-actions">
-              <button type="submit">Create event</button>
-              <button type="button" onClick={handleLoadEventForEdit}>
-                Load selected
-              </button>
-              <button type="button" onClick={handleUpdateEvent}>
-                Update selected
-              </button>
-              <button type="button" className="danger" onClick={handleDeleteEvent}>
-                Delete selected
-              </button>
+              {isEventCreateMode ? (
+                <>
+                  <button type="submit">Create event</button>
+                  <button type="button" onClick={() => setEventForm(defaultEventForm)}>
+                    Clear form
+                  </button>
+                </>
+              ) : (
+                <>
+                  <button type="submit">Create event</button>
+                  <button type="button" onClick={handleLoadEventForEdit}>
+                    Load selected
+                  </button>
+                  <button type="button" onClick={handleUpdateEvent}>
+                    Update selected
+                  </button>
+                  <button type="button" className="danger" onClick={handleDeleteEvent}>
+                    Delete selected
+                  </button>
+                </>
+              )}
             </div>
           </form>
 
+          <div className="inline-actions">
+            <NavLink to="/eventos/novo">Novo evento</NavLink>
+            <NavLink to="/eventos">Painel eventos</NavLink>
+            {selectedEventId ? <NavLink to={`/eventos/${selectedEventId}/editar`}>Editar selecionado</NavLink> : null}
+          </div>
+
           <ul className="select-list">
             {events.map((item) => (
               <li key={item.id}>
                 <button
                   type="button"
                   className={selectedEventId === item.id ? 'active' : ''}
-                  onClick={() => setSelectedEventId(item.id)}
+                  onClick={() => {
+                    setSelectedEventId(item.id);
+                    if (isEventEditMode) {
+                      navigate(`/eventos/${item.id}/editar`);
+                    }
+                  }}
                 >
                   {item.title} ({item.visibility})
                 </button>
               </li>
             ))}
           </ul>
         </article>
+        <article>
+          <h2>Selected Event Context</h2>
+          {selectedEvent ? (
+            <div className="payload-preview">
+              <p>
+                <strong>{selectedEvent.title}</strong>
+              </p>
+              <p className="muted">Slug: {selectedEvent.slug}</p>
+              <p className="muted">Visibility: {selectedEvent.visibility}</p>
+            </div>
+          ) : (
+            <p className="muted">
+              {isEventEditMode
+                ? 'Select an event or use a valid /eventos/:id/editar URL.'
+                : 'Select an event to continue with lesson and quiz flows.'}
+            </p>
+          )}
+        </article>
+      </section>
+      ) : null}
 
+      {section === 'aulas' ? (
+      <section className="dashboard-grid two-col">
         <article>
           <h2>Lessons</h2>
           <form className="stack-form" onSubmit={handleCreateLesson}>
@@ -1025,9 +1144,7 @@ export const DashboardPage = () => {
             ))}
           </ul>
         </article>
-      </section>
 
-      <section className="dashboard-grid two-col">
         <article>
           <h2>Materials</h2>
           <form className="stack-form" onSubmit={handleCreateMaterial}>
@@ -1076,7 +1193,11 @@ export const DashboardPage = () => {
             ))}
           </ul>
         </article>
+      </section>
+      ) : null}
 
+      {section === 'quizzes' ? (
+      <section className="dashboard-grid two-col">
         <article>
           <h2>Quizzes</h2>
           <form className="stack-form" onSubmit={handleCreateQuiz}>
@@ -1146,7 +1267,21 @@ export const DashboardPage = () => {
             </div>
           ) : null}
         </article>
+        <article>
+          <h2>Lesson Context</h2>
+          {selectedLesson ? (
+            <div className="payload-preview">
+              <p>
+                <strong>{selectedLesson.title}</strong>
+              </p>
+              <p className="muted">Slug: {selectedLesson.slug}</p>
+            </div>
+          ) : (
+            <p className="muted">Select event and lesson in /aulas before creating quizzes.</p>
+          )}
+        </article>
       </section>
+      ) : null}
     </main>
   );
 };

apps/admin/src/pages/EditEventPage.jsx

@@ -0,0 +1,3 @@
+import { DashboardPage } from './DashboardPage.jsx';
+
+export const EditEventPage = () => <DashboardPage section="eventos-edit" />;

apps/admin/src/pages/EventsPage.jsx

@@ -0,0 +1,3 @@
+import { DashboardPage } from './DashboardPage.jsx';
+
+export const EventsPage = () => <DashboardPage section="eventos" />;

apps/admin/src/pages/LessonsPage.jsx

@@ -0,0 +1,3 @@
+import { DashboardPage } from './DashboardPage.jsx';
+
+export const LessonsPage = () => <DashboardPage section="aulas" />;