feat(academy): add course deletion button in admin modal and update academy UI

Author: Alexorim

src/App.tsx

@@ -516,6 +516,26 @@ export default function App() {
               </ProtectedRoute>
             }
           />
+          <Route
+            path="/academia/dashboard/programas"
+            element={
+              <ProtectedRoute allowedRoles={['distribuidor', 'admin', 'operaciones']}>
+                <AcademyLayout>
+                  <Programas />
+                </AcademyLayout>
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/academia/dashboard/programas/:slug"
+            element={
+              <ProtectedRoute allowedRoles={['distribuidor', 'admin', 'operaciones']}>
+                <AcademyLayout>
+                  <ProgramDetalle />
+                </AcademyLayout>
+              </ProtectedRoute>
+            }
+          />
           <Route
             path="/academia/dashboard/biblioteca"
             element={

src/components/AcademyLayout.tsx

@@ -32,7 +32,7 @@ const navItems: NavItem[] = [
   { label: 'Inicio', to: '/academia/dashboard', icon: <GraduationCap size={18} />, end: true },
   { label: 'Mis Cursos', to: '/academia/dashboard/cursos', icon: <BookOpen size={18} /> },
   { label: 'Explorar Cursos', to: '/academia/dashboard/explorar', icon: <Search size={18} /> },
-  { label: 'Programas', to: '/academia/programas', icon: <Layers size={18} /> },
+  { label: 'Programas', to: '/academia/dashboard/programas', icon: <Layers size={18} /> },
   { label: 'Mis Recetas', to: '/academia/dashboard/recetas', icon: <Leaf size={18} /> },
   { label: 'Certificaciones', to: '/academia/dashboard/diplomas', icon: <Award size={18} /> },
   { label: 'Mi Perfil', to: '/academia/dashboard/perfil', icon: <User size={18} /> },

src/lib/academy-types.ts

@@ -82,7 +82,7 @@ export interface AcademyLesson {
   sort_order: number;
   is_published: boolean;
   is_free_preview: boolean;
-  is_required: boolean;
+  is_required?: boolean;
   estimated_minutes: number | null;
   metadata: Record<string, any>;
   created_at: string;

src/lib/academy.ts

@@ -30,6 +30,105 @@ interface AuthContextValue {
   homeForProfile: (p: Profile | null) => '/admin' | '/operaciones' | '/dashboard' | '/academia/dashboard' | '/login';
 }
 
+export const LOCAL_MOCK_ADMIN: Profile = {
+  id: '16092a90-3e8e-466d-a509-eb6b074a92cd',
+  codigo_distribuidor: 'SUMAK-00001',
+  username: 'admin',
+  nombre_completo: 'Administrador Sumak',
+  cedula: '0999999999',
+  email: 'admin@sumak.com',
+  telefono: '0988447019',
+  direccion: 'Oficina Central Sumak',
+  ciudad: 'Babahoyo',
+  codigo_patrocinador: null,
+  patrocinador_id: null,
+  paquete: 'lider',
+  puntos: 9999,
+  estado: 'activo',
+  rol: 'admin',
+  avatar_url: null,
+  fecha_registro: '2026-01-01T00:00:00Z',
+  fecha_aprobacion: '2026-01-01T00:00:00Z',
+  has_completed_onboarding: true,
+};
+
+export const LOCAL_MOCK_ADMIN_USER: User = {
+  id: '16092a90-3e8e-466d-a509-eb6b074a92cd',
+  app_metadata: {},
+  user_metadata: {
+    nombre: 'Administrador Sumak',
+    rol: 'admin',
+  },
+  aud: 'authenticated',
+  created_at: '2026-01-01T00:00:00Z',
+} as User;
+
+export const LOCAL_MOCK_USER: Profile = {
+  id: '22222222-2222-4222-8222-222222222222',
+  codigo_distribuidor: 'SUMAK-00123',
+  username: 'user',
+  nombre_completo: 'Usuario Distribuidor',
+  cedula: '0988888888',
+  email: 'user@sumak.com',
+  telefono: '0991234567',
+  direccion: 'Av. Principal 123',
+  ciudad: 'Guayaquil',
+  codigo_patrocinador: 'SUMAK-00001',
+  patrocinador_id: '16092a90-3e8e-466d-a509-eb6b074a92cd',
+  paquete: 'emprendedor',
+  puntos: 150,
+  estado: 'activo',
+  rol: 'distribuidor',
+  avatar_url: null,
+  fecha_registro: '2026-01-01T00:00:00Z',
+  fecha_aprobacion: '2026-01-01T00:00:00Z',
+  has_completed_onboarding: true,
+};
+
+export const LOCAL_MOCK_USER_AUTH: User = {
+  id: '22222222-2222-4222-8222-222222222222',
+  app_metadata: {},
+  user_metadata: {
+    nombre: 'Usuario Distribuidor',
+    rol: 'distribuidor',
+  },
+  aud: 'authenticated',
+  created_at: '2026-01-01T00:00:00Z',
+} as User;
+
+export const LOCAL_MOCK_ESTUDIANTE: Profile = {
+  id: '33333333-3333-4333-8333-333333333333',
+  codigo_distribuidor: 'ACE-00088',
+  username: 'estudiante',
+  nombre_completo: 'Estudiante Academia Sumak',
+  cedula: '0977777777',
+  email: 'estudiante@sumak.com',
+  telefono: '0997654321',
+  direccion: 'Campus Virtual',
+  ciudad: 'Quito',
+  codigo_patrocinador: null,
+  patrocinador_id: null,
+  paquete: null,
+  puntos: 0,
+  estado: 'activo',
+  rol: 'distribuidor',
+  avatar_url: null,
+  fecha_registro: '2026-01-01T00:00:00Z',
+  fecha_aprobacion: '2026-01-01T00:00:00Z',
+  has_completed_onboarding: true,
+};
+
+export const LOCAL_MOCK_ESTUDIANTE_AUTH: User = {
+  id: '33333333-3333-4333-8333-333333333333',
+  app_metadata: {},
+  user_metadata: {
+    nombre: 'Estudiante Academia Sumak',
+    rol: 'estudiante',
+  },
+  aud: 'authenticated',
+  created_at: '2026-01-01T00:00:00Z',
+} as User;
+
 const AuthContext = createContext<AuthContextValue | null>(null);
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
@@ -59,6 +158,33 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   }
 
   useEffect(() => {
+    // Check for local mock session first (dev only)
+    if (import.meta.env.DEV) {
+      const mockRole = localStorage.getItem('sumak_local_mock_role');
+      const isMockAdmin = localStorage.getItem('sumak_local_mock_admin') === 'true';
+
+      if (mockRole === 'admin' || isMockAdmin) {
+        setUser(LOCAL_MOCK_ADMIN_USER);
+        setProfile(LOCAL_MOCK_ADMIN);
+        setLoading(false);
+        return;
+      }
+
+      if (mockRole === 'user') {
+        setUser(LOCAL_MOCK_USER_AUTH);
+        setProfile(LOCAL_MOCK_USER);
+        setLoading(false);
+        return;
+      }
+
+      if (mockRole === 'estudiante') {
+        setUser(LOCAL_MOCK_ESTUDIANTE_AUTH);
+        setProfile(LOCAL_MOCK_ESTUDIANTE);
+        setLoading(false);
+        return;
+      }
+    }
+
     // Get initial session
     supabase.auth.getSession().then(({ data: { session } }) => {
       setUser(session?.user ?? null);
@@ -71,6 +197,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 
     // Listen for auth changes
     const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      if (import.meta.env.DEV && (localStorage.getItem('sumak_local_mock_role') || localStorage.getItem('sumak_local_mock_admin'))) return;
       setUser(session?.user ?? null);
       if (session?.user) {
         fetchProfile(session.user.id);
@@ -85,6 +212,35 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   async function signIn(
     email: string, password: string, captchaToken?: string,
   ): Promise<{ error: string | null; profile: Profile | null }> {
+    const trimmed = email.trim().toLowerCase();
+
+    // Bypass credenciales locales (dev only)
+    if (import.meta.env.DEV) {
+      if ((trimmed === 'admin' || trimmed === 'admin@sumak.com' || trimmed === 'admin@sumak.ec' || trimmed === 'admin@sumak.local') && password === 'admin') {
+        localStorage.setItem('sumak_local_mock_role', 'admin');
+        localStorage.setItem('sumak_local_mock_admin', 'true');
+        setUser(LOCAL_MOCK_ADMIN_USER);
+        setProfile(LOCAL_MOCK_ADMIN);
+        return { error: null, profile: LOCAL_MOCK_ADMIN };
+      }
+
+      if ((trimmed === 'user' || trimmed === 'user@sumak.com' || trimmed === 'user@sumak.ec' || trimmed === 'user@sumak.local') && password === 'user') {
+        localStorage.setItem('sumak_local_mock_role', 'user');
+        localStorage.setItem('sumak_local_mock_admin', 'false');
+        setUser(LOCAL_MOCK_USER_AUTH);
+        setProfile(LOCAL_MOCK_USER);
+        return { error: null, profile: LOCAL_MOCK_USER };
+      }
+
+      if ((trimmed === 'estudiante' || trimmed === 'estudiante@sumak.com' || trimmed === 'estudiante@sumak.ec' || trimmed === 'estudiante@sumak.local') && password === 'estudiante') {
+        localStorage.setItem('sumak_local_mock_role', 'estudiante');
+        localStorage.setItem('sumak_local_mock_admin', 'false');
+        setUser(LOCAL_MOCK_ESTUDIANTE_AUTH);
+        setProfile(LOCAL_MOCK_ESTUDIANTE);
+        return { error: null, profile: LOCAL_MOCK_ESTUDIANTE };
+      }
+    }
+
     const { data, error } = await supabase.auth.signInWithPassword({
       email,
       password,
@@ -113,7 +269,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     if (session?.user) await fetchProfile(session.user.id);
   }
 
-  const isMockUser = false;
+  const isMockUser = Boolean(
+    user?.id === LOCAL_MOCK_ADMIN.id ||
+    user?.id === LOCAL_MOCK_USER.id ||
+    user?.id === LOCAL_MOCK_ESTUDIANTE.id ||
+    localStorage.getItem('sumak_local_mock_role') ||
+    localStorage.getItem('sumak_local_mock_admin')
+  );
 
   async function completeOnboarding(): Promise<void> {
     if (!profile) return;

src/lib/auth.tsx

@@ -32,11 +32,15 @@ export default function Login() {
   async function resolveEmail(value: string): Promise<string | null> {
     const trimmed = value.trim();
     if (!trimmed) return null;
+    const lower = trimmed.toLowerCase();
+    if (['admin', 'user', 'estudiante'].includes(lower)) {
+      return lower;
+    }
     // Si parece email, lo usamos tal cual.
     if (trimmed.includes('@')) return trimmed;
     // Si no, lo tratamos como username y traducimos a email.
     const { data, error: rpcError } = await supabase.rpc('get_email_for_login', {
-      p_username: trimmed.toLowerCase(),
+      p_username: lower,
     });
     if (rpcError || !data) return null;
     return data as string;
@@ -196,6 +200,46 @@ export default function Login() {
                   Protegido por Cloudflare Turnstile
                 </p>
               )}
+              {import.meta.env.DEV && (
+                <div className="pt-2 border-t border-[#C8D8CB]/40 space-y-2">
+                  <p className="text-[11px] text-[#6B7280] font-medium text-center">Acceso Rápido Local (Dev):</p>
+                  <div className="grid grid-cols-3 gap-1.5">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIdentifier('admin');
+                        setPassword('admin');
+                      }}
+                      className="py-2 px-1 rounded-xl border border-dashed border-[#1A4E26]/40 text-[#1A4E26] font-semibold text-xs hover:bg-[#EBF4ED] transition-colors text-center"
+                      title="Administrador (admin / admin)"
+                    >
+                      🛠️ admin
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIdentifier('user');
+                        setPassword('user');
+                      }}
+                      className="py-2 px-1 rounded-xl border border-dashed border-[#1A4E26]/40 text-[#1A4E26] font-semibold text-xs hover:bg-[#EBF4ED] transition-colors text-center"
+                      title="Usuario Distribuidor (user / user)"
+                    >
+                      👤 user
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIdentifier('estudiante');
+                        setPassword('estudiante');
+                      }}
+                      className="py-2 px-1 rounded-xl border border-dashed border-[#1A4E26]/40 text-[#1A4E26] font-semibold text-xs hover:bg-[#EBF4ED] transition-colors text-center"
+                      title="Estudiante Academia (estudiante / estudiante)"
+                    >
+                      🎓 estudiante
+                    </button>
+                  </div>
+                </div>
+              )}
             </form>
           )}
 

src/pages/Login.tsx

@@ -25,9 +25,13 @@ export default function LoginAcademia() {
   async function resolveEmail(value: string): Promise<string | null> {
     const trimmed = value.trim();
     if (!trimmed) return null;
+    const lower = trimmed.toLowerCase();
+    if (['admin', 'user', 'estudiante'].includes(lower)) {
+      return lower;
+    }
     if (trimmed.includes('@')) return trimmed;
     // Intentar resolver como username
-    const { data } = await supabase.rpc('get_email_for_login', { p_username: trimmed.toLowerCase() });
+    const { data } = await supabase.rpc('get_email_for_login', { p_username: lower });
     return data as string | null;
   }
 
@@ -166,6 +170,47 @@ export default function LoginAcademia() {
                   <><ArrowRight size={20} /> Ingresar a mi Academia</>
                 )}
               </button>
+
+              {import.meta.env.DEV && (
+                <div className="pt-2 border-t border-white/10 space-y-2">
+                  <p className="text-[11px] text-white/50 font-medium text-center">Acceso Rápido Local (Dev):</p>
+                  <div className="grid grid-cols-3 gap-1.5">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setEmail('estudiante');
+                        setPassword('estudiante');
+                      }}
+                      className="py-2 px-1 rounded-xl border border-dashed border-[#D4AF37]/50 text-[#D4AF37] font-semibold text-xs hover:bg-[#D4AF37]/10 transition-colors text-center"
+                      title="Estudiante Academia (estudiante / estudiante)"
+                    >
+                      🎓 estudiante
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setEmail('user');
+                        setPassword('user');
+                      }}
+                      className="py-2 px-1 rounded-xl border border-dashed border-white/20 text-white/70 font-medium text-xs hover:bg-white/5 transition-colors text-center"
+                      title="Usuario Distribuidor (user / user)"
+                    >
+                      👤 user
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setEmail('admin');
+                        setPassword('admin');
+                      }}
+                      className="py-2 px-1 rounded-xl border border-dashed border-white/20 text-white/70 font-medium text-xs hover:bg-white/5 transition-colors text-center"
+                      title="Administrador (admin / admin)"
+                    >
+                      🛠️ admin
+                    </button>
+                  </div>
+                </div>
+              )}
             </form>
           )}