sustitude flet by flask

Dockerfile

@@ -1,20 +1,23 @@
 FROM python:3.9-slim
 
-# Instalar dependencias de sistema para Flet
+# Instalar dependencias de sistema
 RUN apt-get update && apt-get install -y \
     git \
     && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /app
 
+# Copiar requerimientos e instalar
 COPY app/requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
+# Copiar la aplicación
 COPY app/ .
-COPY assets/ ./assets/
 
-# Exponer el puerto que definimos en main.py
-EXPOSE 8080
+# Exponer el puerto de Hugging Face
+EXPOSE 7860
 
-# Comando para ejecutar la app en modo PWA
-CMD ["python", "main.py", "--port", "7860", "--host", "0.0.0.0"]
+# Ejecutar con Gunicorn y worker de eventlet para soportar Socket.IO
+# Usamos -w 1 porque el bot de Telegram corre en un hilo dentro del proceso
+# y no queremos múltiples instancias del bot (409 Conflict)
+CMD ["gunicorn", "--worker-class", "eventlet", "-w", "1", "-b", "0.0.0.0:7860", "main:app"]

app/main.py

@@ -1,16 +1,20 @@
-import flet as ft
-import gitlab
 import os
+import json
+import uuid
+import threading
+import time
 import base64
 import requests
 import datetime
-import socket
-import json
-import threading
-import uuid
+from flask import Flask, render_template, request, jsonify, redirect, url_for
+from flask_socketio import SocketIO, emit
+import gitlab
 import telebot
-import time
 from telebot import types
+import markdown
+from dotenv import load_dotenv
+
+load_dotenv()
 
 # --- CLASE PARA PERSISTENCIA ---
 class LoanManager:
@@ -48,6 +52,11 @@ class LoanManager:
 
 loan_mgr = LoanManager()
 
+# --- APP CONFIG ---
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'maker-secret-key'
+socketio = SocketIO(app, cors_allowed_origins="*")
+
 # --- CONFIGURACIÓN DE VARIABLES GLOBALES ---
 TG_TOKEN = os.getenv("TELEGRAM_TOKEN")
 TG_CHAT_ID = os.getenv("TELEGRAM_CHAT_ID")
@@ -55,26 +64,24 @@ try:
     if TG_CHAT_ID: TG_CHAT_ID = int(TG_CHAT_ID)
 except:
     pass
-GOOGLE_PROXY_URL = "https://script.google.com/macros/s/AKfycbz7z1Jb0vsur42GmmqrL3PVXeRkN2WxSojFDIleEDoLOg6MnrmJjb_uuPcQ15CTwyzD/exec"
 
-# --- CONFIGURACIÓN DE PROXY PARA TODO EL BOT ---
+GOOGLE_PROXY_URL = os.getenv("GOOGLE_PROXY_URL") # Can be empty
+
+# --- CONFIGURACIÓN DE PROXY PARA EL BOT ---
 if TG_TOKEN and GOOGLE_PROXY_URL:
     base_url = GOOGLE_PROXY_URL.split('?')[0]
     telebot.apihelper.API_URL = base_url + "?path={1}&token={0}"
-    telebot.apihelper.CONNECT_TIMEOUT = 60
-    telebot.apihelper.READ_TIMEOUT = 60
 
-# Inicializar bot (GLOBAL)
+# Inicializar bot
 bot = telebot.TeleBot(TG_TOKEN) if TG_TOKEN else None
 
-# --- AYUDANTE PARA ESCAPAR MARKDOWN (GLOBAL) ---
 def escape_md(text):
     if not text: return ""
     for char in ['_', '*', '[', '`']:
         text = text.replace(char, f"\\{char}")
     return text
 
-# --- BOT HANDLERS (GLOBALS) ---
+# --- BOT HANDLERS ---
 if bot:
     @bot.callback_query_handler(func=lambda call: True)
     def handle_query(call):
@@ -85,15 +92,14 @@ if bot:
                     bot.answer_callback_query(call.id, "Préstamo Aceptado")
                     nuevo_texto = f"✅ *ACEPTADO*\n{escape_md(call.message.text)}"
                     bot.edit_message_text(nuevo_texto, call.message.chat.id, call.message.message_id, parse_mode="Markdown")
-                    # Notificar a todas las sesiones activas vía PubSub
-                    bot_broadcast({"text": f"Préstamo {loan_id[:8]} ACEPTADO", "color": ft.Colors.GREEN})
+                    socketio.emit('notification', {"text": f"Préstamo {loan_id[:8]} ACEPTADO", "color": "green"})
             elif call.data.startswith("decline_"):
                 loan_id = call.data.replace("decline_", "")
                 if loan_mgr.update_status(loan_id, "DECLINED"):
                     bot.answer_callback_query(call.id, "Préstamo Declinado")
                     nuevo_texto = f"❌ *DECLINADO*\n{escape_md(call.message.text)}"
                     bot.edit_message_text(nuevo_texto, call.message.chat.id, call.message.message_id, parse_mode="Markdown")
-                    bot_broadcast({"text": f"Préstamo {loan_id[:8]} DECLINADO", "color": "red"})
+                    socketio.emit('notification', {"text": f"Préstamo {loan_id[:8]} DECLINADO", "color": "red"})
         except Exception as e:
             print(f"Callback Error: {e}")
 
@@ -109,7 +115,7 @@ if bot:
             if loan_mgr.update_status(loan_id, status):
                 emoji = "✅" if status == "ACCEPTED" else "❌"
                 bot.reply_to(message, f"{emoji} Préstamo {loan_id} actualizado a {status}")
-                bot_broadcast({"text": f"Préstamo {loan_id[:8]} {status}", "color": "green" if status == "ACCEPTED" else "red"})
+                socketio.emit('notification', {"text": f"Préstamo {loan_id[:8]} {status}", "color": "green" if status == "ACCEPTED" else "red"})
             else:
                 bot.reply_to(message, "ID de préstamo no encontrado.")
         except Exception as e:
@@ -122,388 +128,129 @@ if bot:
         except Exception as e:
             print(f"GetID Error: {e}")
 
-# --- BROADCAST PARA NOTIFICACIONES (GLOBAL) ---
-registered_pages = []
-def bot_broadcast(msg):
-    for p in registered_pages:
-        try:
-            p.pubsub.send_all(msg)
-        except: pass
-
 def start_bot_thread():
     if bot:
-        # Retraso inicial para Hugging Face: permite que las instancias viejas se apaguen
-        # y suelten el polling antes de que esta nueva intente conectar (Evita 409 Conflict)
-        print("INFO: Esperando 15s para estabilizar conexión con Telegram...")
-        time.sleep(15)
-        
+        print("INFO: Esperando 5s para estabilizar conexión con Telegram...")
+        time.sleep(5)
         try: bot.delete_webhook()
         except: pass
-        
         while True:
             try:
                 print("DEBUG: Iniciando polling de Telegram...")
                 bot.infinity_polling(timeout=20, long_polling_timeout=10)
             except Exception as e:
-                print(f"Error DNS/Red/Conflicto: {e}. Reintento en 30s...")
+                print(f"Error Polling: {e}. Reintento en 30s...")
                 time.sleep(30)
 
 if bot:
     threading.Thread(target=start_bot_thread, daemon=True).start()
 
-def main(page: ft.Page):
-    page.title = "makerspacepage"
-    page.favicon = "favicon.png"
-    # Solicitar permiso para notificaciones de navegador/sistema (vía JS)
-    # Solicitar permiso para notificaciones de navegador/sistema (vía JS seguro)
-    def pedir_permiso_notif(e=None):
-        if hasattr(page, "run_javascript"):
-            page.run_javascript("""
-            if ("Notification" in window) {
-                Notification.requestPermission();
-            }
-            """)
-        else:
-            mostrar_notificacion("⚠️ Tu navegador no soporta alertas nativas")
-
-    def abrir_link_externo(url):
-        if hasattr(page, "run_javascript"):
-            # Script para forzar apertura en navegador externo (mejor para PWA)
-            page.run_javascript(f"window.open('{url}', '_blank');")
-        else:
-            page.launch_url(url)
-
-    def mostrar_notificacion(texto, color="blue"):
-        # Notificación en la app (SnackBar)
-        snack = ft.SnackBar(ft.Text(texto), bgcolor=color)
-        page.overlay.append(snack)
-        snack.open = True
-        
-        # Notificación de Sistema/Navegador (vía JS seguro)
-        if hasattr(page, "run_javascript"):
-            page.run_javascript(f"""
-            if ("Notification" in window && Notification.permission === "granted") {{
-                new Notification("MAKER STATION", {{
-                    body: "{texto}",
-                    icon: "/icon192x192.png"
-                }});
-            }}
-            """)
-        
-        page.update()
-
-    def enviar_telegram_con_botones(loan_id, mensaje):
-        if not bot or not TG_CHAT_ID:
-            print("Error: Bot o Chat ID no configurados")
-            return "ERR_CONFIG"
-        
-        markup = types.InlineKeyboardMarkup()
-        btn_aceptar = types.InlineKeyboardButton("✅ Aceptar", callback_data=f"accept_{loan_id}")
-        btn_declinar = types.InlineKeyboardButton("❌ Declinar", callback_data=f"decline_{loan_id}")
-        markup.add(btn_aceptar, btn_declinar)
-        
+# --- WEB ROUTES ---
+@app.route('/')
+def index():
+    return render_template('index.html', title="MAKER STATION")
+
+@app.route('/prestamos')
+def prestamos():
+    loans = loan_mgr.get_all()
+    return render_template('prestamos.html', title="Préstamos", loans=loans)
+
+@app.route('/api/prestamo', methods=['POST'])
+def api_prestamo():
+    data = request.json
+    solicitante = data.get('solicitante')
+    h_salida = data.get('hora_salida')
+    h_retorno = data.get('hora_retorno')
+    items = data.get('items', [])
+
+    if not solicitante or not items:
+        return jsonify({"status": "error", "message": "Datos incompletos"}), 400
+
+    loan_id = str(uuid.uuid4())
+    lista_items_str = "\n".join([f"• [{i['categoria']}] {i['descripcion']} (x{i['cantidad']})" for i in items])
+
+    mensaje_tg = (
+        "🛠 *NUEVA SOLICITUD DE PRÉSTAMO*\n"
+        f"👤 *Solicitante:* {escape_md(solicitante)}\n"
+        f" *Horario:* {h_salida} a {h_retorno}\n"
+        f" *Herramientas:*\n{escape_md(lista_items_str)}"
+    )
+
+    res_tg = "OK"
+    if bot and TG_CHAT_ID:
         try:
-            print(f"DEBUG: Enviando mensaje a Telegram (Chat: {TG_CHAT_ID}). Len: {len(mensaje)}")
-            bot.send_message(TG_CHAT_ID, mensaje, reply_markup=markup, parse_mode="Markdown")
-            return "OK"
+            markup = types.InlineKeyboardMarkup()
+            markup.add(
+                types.InlineKeyboardButton("✅ Aceptar", callback_data=f"accept_{loan_id}"),
+                types.InlineKeyboardButton("❌ Declinar", callback_data=f"decline_{loan_id}")
+            )
+            bot.send_message(TG_CHAT_ID, mensaje_tg, reply_markup=markup, parse_mode="Markdown")
         except Exception as e:
-            error_msg = str(e)
-            print(f"DEBUG Error Telegram: {error_msg}")
-            if "Max retries" in error_msg:
-                return f"ERR_DNS: {error_msg[:40]}"
-            return f"ERR_CONN: {error_msg[:100]}"
-
-    # Registrar esta página para recibir notificaciones del bot
-    registered_pages.append(page)
-    def on_broadcast(msg):
-        mostrar_notificacion(msg["text"], msg["color"])
-        # Si estamos en /prestamos, forzar refresco (esto es un poco complejo sin una ref global)
-        # Por ahora solo la notificación
-    page.pubsub.subscribe(on_broadcast)
+            res_tg = str(e)
+
+    nuevo = {
+        "id": loan_id,
+        "Solicitante": solicitante,
+        "item": lista_items_str,
+        "cantidad": "Multiple",
+        "hora": h_salida,
+        "devolucion": h_retorno,
+        "status_loan": "PENDING",
+        "status_tg": res_tg
+    }
     
-    # --- CONFIGURACIÓN DE VARIABLES LOCALES ---
+    loan_mgr.add_loan(nuevo)
+    return jsonify({"status": "success", "id": loan_id})
+
+@app.route('/repos')
+def repos():
     GITLAB_URL = "https://gitlab.com"
     GIT_TOKEN = os.getenv("GITLAB_TOKEN")
     GIT_GROUP = os.getenv("GITLAB_GROUP_ID")
+    
+    projects = []
+    if GIT_TOKEN and GIT_GROUP:
+        try:
+            gl = gitlab.Gitlab(GIT_URL, private_token=GIT_TOKEN)
+            projects = gl.groups.get(GIT_GROUP).projects.list(all=True)
+        except: pass
+    return render_template('repos.html', title="Proyectos", projects=projects)
 
-    def mostrar_factura(i):
-        status_color = {
-            "PENDING": ft.Colors.ORANGE,
-            "ACCEPTED": ft.Colors.GREEN,
-            "DECLINED": ft.Colors.RED
-        }.get(i.get('status_loan', 'PENDING'), ft.Colors.GREY)
-
-        dialog = ft.AlertDialog(
-            title=ft.Text("RECIBO DE PRÉSTAMO", weight="bold"),
-            content=ft.Column([
-                ft.Text(f"ESTADO: {i.get('status_loan', 'PENDING')}", color=status_color, weight="bold"),
-                ft.Divider(),
-                ft.Text(f"SOLICITANTE: {i.get('Solicitante', i.get('solicitante', '---'))}", size=16),
-                ft.Text(f"ITEM: {i['item']}", weight="bold"),
-                ft.Text(f"CANTIDAD: {i['cantidad']}"),
-                ft.Divider(),
-                ft.Text(f"SALIDA: {i['hora']}"),
-                ft.Text(f"RETORNO EST.: {i['devolucion']}"),
-                ft.Text(f"ID: {i['id']}", size=10, color="grey"),
-            ], tight=True, spacing=5),
-            actions=[ft.TextButton("Cerrar", on_click=lambda _: page.close_dialog())]
-        )
-        page.dialog = dialog
-        dialog.open = True
-        page.update()
-
-    def route_change(route):
-        page.views.clear()
-        
-        if page.route == "/":
-            page.views.append(
-                ft.View("/", [
-                    ft.AppBar(title=ft.Text("MAKERSPACE"), bgcolor="#1a1c1e"),
-                    ft.Container(
-                        content=ft.Column([
-                            ft.Text("PANEL DE CONTROL", size=24, weight="bold", text_align=ft.TextAlign.CENTER),
-                            ft.ResponsiveRow([
-                                ft.ElevatedButton(
-                                    "GITLAB REPOS", 
-                                    icon=ft.Icons.FOLDER, 
-                                    on_click=lambda _: page.go("/repos"), 
-                                    height=80, 
-                                    col={"sm": 12, "md": 6}
-                                ),
-                                ft.ElevatedButton(
-                                    "SISTEMA PRÉSTAMOS", 
-                                    icon=ft.Icons.BUILD, 
-                                    on_click=lambda _: page.go("/prestamos"), 
-                                    height=80, 
-                                    bgcolor=ft.Colors.BLUE_800,
-                                    col={"sm": 12, "md": 6}
-                                ),
-                            ], spacing=20, alignment=ft.MainAxisAlignment.CENTER),
-                        ], spacing=30, horizontal_alignment=ft.CrossAxisAlignment.CENTER),
-                        padding=20,
-                        alignment=ft.alignment.top_center,
-                        expand=True
-                    )
-                ])
-            )
+@app.route('/ver/<pid>/<pname>')
+def ver_repo(pid, pname):
+    GIT_TOKEN = os.getenv("GITLAB_TOKEN")
+    GITLAB_URL = "https://gitlab.com"
+    
+    readme_html = "<p>README.md no encontrado.</p>"
+    web_url = "#"
+    download_url = "#"
 
-        elif page.route == "/prestamos":
-            # --- CONFIGURACIÓN DE TIEMPO (8:00 - 15:00) ---
-            opciones_hora = [ft.dropdown.Option(f"{h:02d}:00") for h in range(8, 16)]
-            
-            nombre = ft.TextField(
-                label="Nombre del solicitante", 
-                prefix_icon=ft.Icons.PERSON,
-                text_size=18,
-                border_color=ft.Colors.BLUE_400,
-                capitalization=ft.TextCapitalization.WORDS
-            )
-            h_ext = ft.Dropdown(label="Hora Salida", options=opciones_hora, value="08:00", expand=True)
-            h_dev = ft.Dropdown(label="Devolución", options=opciones_hora, value="15:00", expand=True)
-            
-            st_txt = ft.Text("", weight="bold")
-            lista_historial = ft.ListView(expand=True, spacing=10)
+    if GIT_TOKEN:
+        try:
+            gl = gitlab.Gitlab(GITLAB_URL, private_token=GIT_TOKEN)
+            project = gl.projects.get(pid)
+            web_url = project.web_url
+            download_url = f"{GITLAB_URL}/api/v4/projects/{pid}/repository/archive.zip?private_token={GIT_TOKEN}"
             
-            # --- GESTIÓN DE FILAS DINÁMICAS ---
-            container_items = ft.Column(spacing=10)
+            readme_text = ""
+            for branch in ["main", "master"]:
+                try:
+                    f = project.files.get(file_path='README.md', ref=branch)
+                    readme_text = base64.b64decode(f.content).decode("utf-8")
+                    break
+                except: continue
             
-            def crear_fila_item():
-                return ft.ResponsiveRow([
-                    ft.Dropdown(
-                        label="Categoría",
-                        options=[
-                            ft.dropdown.Option("Herramientas"),
-                            ft.dropdown.Option("Dispositivos Eléctricos")
-                        ],
-                        value="Herramientas",
-                        col={"sm": 12, "md": 3}
-                    ),
-                    ft.TextField(label="Descripción", col={"sm": 12, "md": 6}),
-                    ft.Row([
-                        ft.TextField(label="Cant.", value="1", width=70, text_align=ft.TextAlign.CENTER),
-                        ft.IconButton(ft.Icons.DELETE_OUTLINE, icon_color="red", on_click=lambda e: eliminar_fila(e))
-                    ], col={"sm": 12, "md": 3}, alignment=ft.MainAxisAlignment.END)
-                ], alignment=ft.MainAxisAlignment.START, vertical_alignment=ft.CrossAxisAlignment.CENTER)
-
-            def eliminar_fila(e):
-                if len(container_items.controls) > 1:
-                    container_items.controls.remove(e.control.parent.parent)
-                    page.update()
-
-            def agregar_fila(e):
-                container_items.controls.append(crear_fila_item())
-                page.update()
-
-            container_items.controls.append(crear_fila_item())
-
-            def crear_card(d):
-                icon = ft.Icons.HOURGLASS_EMPTY
-                color = ft.Colors.ORANGE
-                if d.get('status_loan') == "ACCEPTED":
-                    icon = ft.Icons.CHECK_CIRCLE
-                    color = ft.Colors.GREEN
-                elif d.get('status_loan') == "DECLINED":
-                    icon = ft.Icons.CANCEL
-                    color = ft.Colors.RED
-
-                return ft.Container(
-                    content=ft.ListTile(
-                        title=ft.Text(d.get('Solicitante', d.get('solicitante', '---')).upper(), weight="bold", size=16),
-                        subtitle=ft.Text(f"{d['item']} (x{d['cantidad']})", size=13, max_lines=2, overflow=ft.TextOverflow.ELLIPSIS),
-                        trailing=ft.Icon(icon, color=color, size=30),
-                        is_three_line=True,
-                        on_click=lambda _: mostrar_factura(d)
-                    ), 
-                    bgcolor="#2d3238", 
-                    border_radius=12,
-                    padding=ft.padding.symmetric(vertical=5, horizontal=0)
-                )
-
-            def refactor_list():
-                lista_historial.controls.clear()
-                for d in reversed(loan_mgr.get_all()):
-                    lista_historial.controls.append(crear_card(d))
-                page.update()
-
-            refactor_list()
-
-            def registrar(e):
-                if not nombre.value:
-                    st_txt.value = "⚠️ Nombre de solicitante requerido"; st_txt.color="red"; page.update(); return
-                
-                items_solicitados = []
-                for fila in container_items.controls:
-                    cat = fila.controls[0].value
-                    txt = fila.controls[1].value
-                    ct = fila.controls[2].controls[0].value
-                    if txt:
-                        items_solicitados.append(f"• [{cat}] {txt} (x{ct})")
-                
-                if not items_solicitados:
-                    st_txt.value = "⚠️ Agrega al menos una herramienta"; st_txt.color="red"; page.update(); return
-
-                loan_id = str(uuid.uuid4())
-                lista_items_str = "\n".join(items_solicitados)
-                
-                mensaje_tg = (
-                    "🛠 *NUEVA SOLICITUD DE PRÉSTAMO*\n"
-                    f"👤 *Solicitante:* {escape_md(nombre.value)}\n"
-                    f" *Horario:* {h_ext.value} a {h_dev.value}\n"
-                    f" *Herramientas:*\n{escape_md(lista_items_str)}"
-                )
-                
-                res_tg = enviar_telegram_con_botones(loan_id, mensaje_tg)
-                
-                nuevo = {
-                    "id": loan_id,
-                    "Solicitante": nombre.value,
-                    "item": lista_items_str,
-                    "cantidad": "Multiple",
-                    "hora": h_ext.value,
-                    "devolucion": h_dev.value,
-                    "status_loan": "PENDING",
-                    "status_tg": res_tg
-                }
-                
-                loan_mgr.add_loan(nuevo)
-                refactor_list()
-                
-                st_txt.value = "✅ Solicitud Enviada" if res_tg == "OK" else f"⚠️ Error Telegram: {res_tg}"
-                st_txt.color = "green" if res_tg == "OK" else "orange"
-                nombre.value = ""
-                container_items.controls.clear()
-                container_items.controls.append(crear_fila_item())
-                page.update()
-
-            page.views.append(
-                ft.View("/prestamos", [
-                    ft.AppBar(title=ft.Text("Préstamos"), bgcolor="#1a1c1e"),
-                    ft.Container(
-                        content=ft.Column([
-                            ft.Row([
-                                ft.Text("SOLICITAR PRÉSTAMO", size=18, weight="bold"),
-                                ft.ElevatedButton("🔔 ALERTAS", icon=ft.Icons.NOTIFICATIONS_ACTIVE, 
-                                                on_click=pedir_permiso_notif, bgcolor=ft.Colors.BLUE_GREY_900)
-                            ], alignment=ft.MainAxisAlignment.SPACE_BETWEEN),
-                            
-                            nombre,
-                            ft.ResponsiveRow([
-                                ft.Container(h_ext, col={"sm": 6, "md": 6}),
-                                ft.Container(h_dev, col={"sm": 6, "md": 6}),
-                            ], spacing=10),
-                            
-                            ft.Divider(),
-                            ft.Row([
-                                ft.Text("LISTA DE HERRAMIENTAS", size=14, weight="bold"),
-                                ft.IconButton(ft.Icons.ADD_CIRCLE, icon_color="green", on_click=agregar_fila)
-                            ], alignment=ft.MainAxisAlignment.SPACE_BETWEEN),
-                            
-                            container_items,
-                            
-                            ft.ElevatedButton("ENVIAR SOLICITUD TOTAL", icon=ft.Icons.SEND, on_click=registrar, 
-                                            bgcolor=ft.Colors.GREEN_800, color="white", height=50, width=float("inf")),
-                            
-                            st_txt,
-                            ft.Divider(),
-                            ft.Text("HISTORIAL RECIENTE", size=20, weight="bold"),
-                            ft.Container(lista_historial, expand=True),
-                            ft.TextButton("Volver al Inicio", on_click=lambda _: page.go("/"), icon=ft.Icons.ARROW_BACK)
-                        ], spacing=20, scroll=ft.ScrollMode.ADAPTIVE),
-                        padding=20,
-                        # Para compatibilidad con versiones antiguas, usamos width dinámico o restringido
-                        width=800 if page.width > 800 else None,
-                        alignment=ft.alignment.top_center,
-                        expand=True
-                    )
-                ])
-            )
-
-        elif page.route == "/repos":
-            repo_list = ft.ListView(expand=True, spacing=10)
-            page.views.append(ft.View("/repos", [ft.AppBar(title=ft.Text("Proyectos")), repo_list, ft.TextButton("Volver", on_click=lambda _: page.go("/"))]))
-            try:
-                gl = gitlab.Gitlab(GITLAB_URL, private_token=GIT_TOKEN)
-                for p in gl.groups.get(GIT_GROUP).projects.list(all=True):
-                    repo_list.controls.append(ft.ListTile(title=ft.Text(p.name), on_click=lambda _, pid=p.id, pname=p.name: page.go(f"/ver/{pid}/{pname}")))
-                page.update()
-            except: pass
-
-        elif page.route.startswith("/ver/"):
-            parts = page.route.split("/")
-            pid, pname = parts[2], parts[3]
-            c_area = ft.Column(scroll=ft.ScrollMode.ADAPTIVE, expand=True)
-            page.views.append(ft.View(f"/ver/{pid}", [ft.AppBar(title=ft.Text(pname)), c_area, ft.TextButton("Volver", on_click=lambda _: page.go("/repos"))]))
-            try:
-                gl = gitlab.Gitlab(GITLAB_URL, private_token=GIT_TOKEN)
-                project = gl.projects.get(pid)
-                readme_text = "README.md no encontrado."
-                for branch in ["main", "master"]:
-                    try:
-                        f = project.files.get(file_path='README.md', ref=branch)
-                        readme_text = base64.b64decode(f.content).decode("utf-8")
-                        break
-                    except: continue
-                c_area.controls.append(ft.Markdown(readme_text, selectable=True, extension_set=ft.MarkdownExtensionSet.GITHUB_WEB))
-                c_area.controls.append(ft.Divider())
-                c_area.controls.append(ft.Row([
-                    ft.ElevatedButton("ZIP", icon=ft.Icons.DOWNLOAD, on_click=lambda _: abrir_link_externo(f"{GITLAB_URL}/api/v4/projects/{pid}/repository/archive.zip?private_token={GIT_TOKEN}")),
-                    ft.OutlinedButton("WEB", icon=ft.Icons.OPEN_IN_NEW, on_click=lambda _: abrir_link_externo(project.web_url))
-                ], alignment=ft.MainAxisAlignment.CENTER))
-                page.update()
-            except: pass
-        page.update()
-
-    page.on_route_change = route_change
-    page.go("/")
-
-if __name__ == "__main__":
+            if readme_text:
+                readme_html = markdown.markdown(readme_text, extensions=['fenced_code', 'tables'])
+        except: pass
+        
+    return render_template('ver_repo.html', 
+                          title=pname, 
+                          project_name=pname, 
+                          readme_html=readme_html,
+                          web_url=web_url,
+                          download_url=download_url)
+
+if __name__ == '__main__':
     port = int(os.getenv("PORT", 7860))
-    
-    # Buscar la carpeta de assets (local: ../assets, docker: ./assets)
-    current_dir = os.path.dirname(os.path.abspath(__file__))
-    assets_path = os.path.join(current_dir, "assets")
-    if not os.path.exists(assets_path):
-        assets_path = os.path.join(current_dir, "../assets")
-    
-    print(f"DEBUG: assets_dir set to: {assets_path}")
-    ft.app(target=main, view=ft.AppView.WEB_BROWSER, host="0.0.0.0", port=port, assets_dir=assets_path)
+    socketio.run(app, host="0.0.0.0", port=port, debug=True)

app/requirements.txt

@@ -1,4 +1,9 @@
-flet
+flask
+flask-socketio
 python-gitlab
 requests
 pyTelegramBotAPI
+python-dotenv
+gunicorn
+eventlet
+markdown

app/static/css/style.css

@@ -0,0 +1,245 @@
+:root {
+    --bg-dark: #0f172a;
+    --bg-card: rgba(30, 41, 59, 0.7);
+    --accent: #38bdf8;
+    --accent-hover: #0ea5e9;
+    --text-main: #f8fafc;
+    --text-dim: #94a3b8;
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background: radial-gradient(circle at top right, #1e293b, #0f172a);
+    color: var(--text-main);
+    min-height: 100vh;
+    line-height: 1.6;
+}
+
+.glass {
+    background: var(--bg-card);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--shadow);
+}
+
+.navbar {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    padding: 1rem 2rem;
+    margin-bottom: 2rem;
+}
+
+.nav-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.nav-logo {
+    font-family: 'Outfit', sans-serif;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--accent);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+}
+
+.nav-item {
+    color: var(--text-dim);
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.3s;
+    font-size: 0.9rem;
+    letter-spacing: 1px;
+}
+
+.nav-item:hover {
+    color: var(--accent);
+}
+
+.content-wrapper {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 0 2rem 4rem;
+}
+
+/* CARDS */
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-top: 2rem;
+}
+
+.card {
+    padding: 2.5rem;
+    border-radius: 24px;
+    text-decoration: none;
+    color: inherit;
+    transition: transform 0.3s, border-color 0.3s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.card:hover {
+    transform: translateY(-10px);
+    border-color: var(--accent);
+}
+
+.card i {
+    font-size: 3rem;
+    color: var(--accent);
+    margin-bottom: 1.5rem;
+}
+
+.card h2 {
+    font-family: 'Outfit', sans-serif;
+    margin-bottom: 1rem;
+}
+
+/* BUTTONS */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 12px;
+    border: none;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s;
+}
+
+.btn-primary {
+    background: var(--accent);
+    color: var(--bg-dark);
+}
+
+.btn-primary:hover {
+    background: var(--accent-hover);
+    transform: scale(1.02);
+}
+
+.btn-icon {
+    background: none;
+    border: none;
+    color: var(--text-dim);
+    font-size: 1.3rem;
+    cursor: pointer;
+    transition: color 0.3s;
+}
+
+.btn-icon:hover {
+    color: var(--accent);
+}
+
+/* FORMS */
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text-dim);
+    font-size: 0.9rem;
+}
+
+input, select, textarea {
+    width: 100%;
+    padding: 1rem;
+    background: rgba(15, 23, 42, 0.5);
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    color: white;
+    font-family: inherit;
+}
+
+input:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+/* NOTIFICATIONS */
+#notification-container {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    z-index: 1000;
+}
+
+.notification {
+    padding: 1rem 2rem;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    animation: slideIn 0.3s ease-out;
+    transition: opacity 0.5s;
+}
+
+@keyframes slideIn {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+.green { border-left: 4px solid #10b981; }
+.red { border-left: 4px solid #ef4444; }
+.blue { border-left: 4px solid #3b82f6; }
+
+/* REPO LIST */
+.repo-item {
+    padding: 1.5rem;
+    border-radius: 16px;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background 0.3s;
+}
+
+.repo-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+/* MARKDOWN */
+.markdown-body {
+    background: transparent !important;
+    color: var(--text-main) !important;
+}
+
+/* LOAN ITEMS */
+.item-row {
+    display: grid;
+    grid-template-columns: 1fr 2fr 100px auto;
+    gap: 1rem;
+    align-items: flex-end;
+    margin-bottom: 1rem;
+}
+
+@media (max-width: 768px) {
+    .item-row {
+        grid-template-columns: 1fr;
+    }
+}

app/static/js/script.js

@@ -0,0 +1,4 @@
+// Global scripts for Maker Station
+console.log("Maker Station UI Loaded");
+
+// Handle any global interactions here

app/templates/base.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title if title else "MAKERSPACE" }}</title>
+    <link rel="icon" href="{{ url_for('static', filename='assets/favicon.png') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Outfit:wght@500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+</head>
+<body class="dark-theme">
+    <nav class="navbar glass">
+        <div class="nav-container">
+            <a href="/" class="nav-logo">
+                <i class="fas fa-cube"></i>
+                <span>MAKER STATION</span>
+            </a>
+            <div class="nav-links">
+                <a href="/repos" class="nav-item">PROYECTOS</a>
+                <a href="/prestamos" class="nav-item">PRÉSTAMOS</a>
+            </div>
+            <button id="notif-btn" class="btn-icon">
+                <i class="fas fa-bell"></i>
+            </button>
+        </div>
+    </nav>
+
+    <main class="content-wrapper">
+        {% block content %}{% endblock %}
+    </main>
+
+    <div id="notification-container"></div>
+
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+    <script>
+        const socket = io();
+        
+        socket.on('connect', () => {
+            console.log('Static Connection established');
+        });
+
+        socket.on('notification', (data) => {
+            showNotification(data.text, data.color || 'blue');
+        });
+
+        function showNotification(text, color) {
+            const container = document.getElementById('notification-container');
+            const notif = document.createElement('div');
+            notif.className = `notification glass ${color}`;
+            notif.innerHTML = `<i class="fas fa-info-circle"></i> <span>${text}</span>`;
+            container.appendChild(notif);
+            
+            if ("Notification" in window && Notification.permission === "granted") {
+                new Notification("MAKER STATION", { body: text });
+            }
+
+            setTimeout(() => {
+                notif.style.opacity = '0';
+                setTimeout(() => notif.remove(), 500);
+            }, 5000);
+        }
+
+        document.getElementById('notif-btn').addEventListener('click', () => {
+            if ("Notification" in window) {
+                Notification.requestPermission();
+            }
+        });
+    </script>
+</body>
+</html>

app/templates/index.html

@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="hero section">
+    <h1>PANEL DE CONTROL</h1>
+    <p class="text-dim">Gestiona los recursos de Maker Station de forma eficiente.</p>
+</div>
+
+<div class="card-grid">
+    <a href="/repos" class="card glass">
+        <i class="fas fa-folder-open"></i>
+        <h2>GITLAB REPOS</h2>
+        <p class="text-dim">Explora y descarga proyectos del grupo Maker Station.</p>
+    </a>
+
+    <a href="/prestamos" class="card glass" style="border-bottom: 4px solid #3b82f6;">
+        <i class="fas fa-tools"></i>
+        <h2>SISTEMA PRÉSTAMOS</h2>
+        <p class="text-dim">Solicita herramientas y dispositivos para tus proyectos.</p>
+    </a>
+</div>
+{% endblock %}

app/templates/prestamos.html

@@ -0,0 +1,210 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="section-header"
+    style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+    <h1>SOLICITAR PRÉSTAMO</h1>
+    <a href="/" class="btn-icon"><i class="fas fa-arrow-left"></i></a>
+</div>
+
+<div class="glass" style="padding: 2rem; border-radius: 24px; margin-bottom: 3rem;">
+    <form id="loan-form">
+        <div class="form-group">
+            <label for="solicitante">Nombre del solicitante</label>
+            <input type="text" id="solicitante" name="solicitante" placeholder="Tu nombre completo" required>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+            <div class="form-group">
+                <label for="hora_salida">Hora Salida</label>
+                <select id="hora_salida" name="hora_salida">
+                    {% for h in range(8, 16) %}
+                    <option value="{{ '%02d' % h }:00">{{ '%02d' % h }:00</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="hora_retorno">Devolución Estimada</label>
+                <select id="hora_retorno" name="hora_retorno">
+                    {% for h in range(8, 16) %}
+                    <option value="{{ '%02d' % h }:00" {{ 'selected' if h==15 }}>{{ '%02d' % h }:00</option>
+                    {% endfor %}
+                </select>
+            </div>
+        </div>
+
+        <hr style="opacity: 0.1; margin: 2rem 0;">
+
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+            <h3>LISTA DE HERRAMIENTAS</h3>
+            <button type="button" class="btn-icon" onclick="addItemRow()" style="color: #10b981;">
+                <i class="fas fa-plus-circle"></i>
+            </button>
+        </div>
+
+        <div id="items-container">
+            <div class="item-row">
+                <div class="form-group">
+                    <label>Categoría</label>
+                    <select name="categoria[]">
+                        <option value="Herramientas">Herramientas</option>
+                        <option value="Dispositivos Eléctricos">Dispositivos Eléctricos</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>Descripción</label>
+                    <input type="text" name="descripcion[]" placeholder="Ej: Martillo, Multímetro..." required>
+                </div>
+                <div class="form-group">
+                    <label>Cant.</label>
+                    <input type="number" name="cantidad[]" value="1" min="1">
+                </div>
+                <button type="button" class="btn-icon" onclick="this.parentElement.remove()"
+                    style="color: #ef4444; margin-bottom: 1rem;">
+                    <i class="fas fa-trash"></i>
+                </button>
+            </div>
+        </div>
+
+        <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 2rem;">
+            ENVIAR SOLICITUD TOTAL <i class="fas fa-paper-plane" style="margin-left: 0.5rem;"></i>
+        </button>
+    </form>
+</div>
+
+<div class="history-section">
+    <h2 style="margin-bottom: 2rem; font-family: 'Outfit';">HISTORIAL RECIENTE</h2>
+    <div id="history-list">
+        {% for loan in loans|reverse %}
+        <div class="repo-item glass" onclick="showReceipt({{ loop.index0 }})">
+            <div>
+                <strong style="font-size: 1.1rem;">{{ loan.Solicitante|upper }}</strong>
+                <p class="text-dim" style="font-size: 0.9rem;">{{ loan.item }}</p>
+            </div>
+            <div style="text-align: right;">
+                {% if loan.status_loan == 'ACCEPTED' %}
+                <i class="fas fa-check-circle" style="color: #10b981; font-size: 1.5rem;"></i>
+                {% elif loan.status_loan == 'DECLINED' %}
+                <i class="fas fa-times-circle" style="color: #ef4444; font-size: 1.5rem;"></i>
+                {% else %}
+                <i class="fas fa-hourglass-half" style="color: #f59e0b; font-size: 1.5rem;"></i>
+                {% endif %}
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+
+<style>
+    /* Inline helper for specific page logic */
+    .receipt-modal {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 90%;
+        max-width: 400px;
+        z-index: 1001;
+        padding: 2rem;
+        border-radius: 20px;
+    }
+</style>
+
+<div id="modal-overlay"
+    style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:1000;"
+    onclick="closeModal()"></div>
+<div id="modal-content" class="receipt-modal glass" style="display:none;"></div>
+
+<script>
+    function addItemRow() {
+        const container = document.getElementById('items-container');
+        const div = document.createElement('div');
+        div.className = 'item-row';
+        div.innerHTML = `
+            <div class="form-group">
+                <select name="categoria[]">
+                    <option value="Herramientas">Herramientas</option>
+                    <option value="Dispositivos Eléctricos">Dispositivos Eléctricos</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <input type="text" name="descripcion[]" placeholder="Ej: Martillo, Multímetro..." required>
+            </div>
+            <div class="form-group">
+                <input type="number" name="cantidad[]" value="1" min="1">
+            </div>
+            <button type="button" class="btn-icon" onclick="this.parentElement.remove()" style="color: #ef4444; margin-bottom: 1rem;">
+                <i class="fas fa-trash"></i>
+            </button>
+        `;
+        container.appendChild(div);
+    }
+
+    document.getElementById('loan-form').onsubmit = async (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+        const data = {
+            solicitante: formData.get('solicitante'),
+            hora_salida: formData.get('hora_salida'),
+            hora_retorno: formData.get('hora_retorno'),
+            items: []
+        };
+
+        const cats = formData.getAll('categoria[]');
+        const descs = formData.getAll('descripcion[]');
+        const cants = formData.getAll('cantidad[]');
+
+        for (let i = 0; i < descs.length; i++) {
+            if (descs[i].trim()) {
+                data.items.push({
+                    categoria: cats[i],
+                    descripcion: descs[i],
+                    cantidad: cants[i]
+                });
+            }
+        }
+
+        const response = await fetch('/api/prestamo', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data)
+        });
+
+        if (response.ok) {
+            location.reload();
+        } else {
+            alert('Error al enviar la solicitud');
+        }
+    };
+
+    const rawLoans = {{ loans| tojson }};
+    function showReceipt(index) {
+        const loan = rawLoans.slice().reverse()[index];
+        const modal = document.getElementById('modal-content');
+        const overlay = document.getElementById('modal-overlay');
+
+        const statusColor = loan.status_loan === 'ACCEPTED' ? '#10b981' : (loan.status_loan === 'DECLINED' ? '#ef4444' : '#f59e0b');
+
+        modal.innerHTML = `
+            <h2 style="font-family:'Outfit'; text-align:center; margin-bottom:1.5rem;">RECIBO DE PRÉSTAMO</h2>
+            <div style="background:${statusColor}; color:white; padding:0.5rem; border-radius:8px; text-align:center; font-weight:bold; margin-bottom:1.5rem;">
+                ESTADO: ${loan.status_loan}
+            </div>
+            <p><strong>SOLICITANTE:</strong> ${loan.Solicitante}</p>
+            <p><strong>SALIDA:</strong> ${loan.hora}</p>
+            <p><strong>RETORNO:</strong> ${loan.devolucion}</p>
+            <hr style="opacity:0.1; margin:1rem 0;">
+            <p><strong>HERRAMIENTAS:</strong></p>
+            <p style="white-space:pre-wrap; font-size:0.9rem;">${loan.item}</p>
+            <button class="btn btn-primary" style="width:100%; margin-top:1.5rem;" onclick="closeModal()">Cerrar</button>
+        `;
+        modal.style.display = 'block';
+        overlay.style.display = 'block';
+    }
+
+    function closeModal() {
+        document.getElementById('modal-content').style.display = 'none';
+        document.getElementById('modal-overlay').style.display = 'none';
+    }
+</script>
+{% endblock %}

app/templates/repos.html

@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="section-header"
+    style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+    <h1>PROYECTOS</h1>
+    <a href="/" class="btn-icon"><i class="fas fa-arrow-left"></i></a>
+</div>
+
+<div class="project-list">
+    {% for project in projects %}
+    <a href="/ver/{{ project.id }}/{{ project.name }}" class="repo-item glass"
+        style="text-decoration: none; color: inherit;">
+        <div>
+            <strong style="font-size: 1.1rem;">{{ project.name }}</strong>
+            <p class="text-dim" style="font-size: 0.9rem;">{{ project.description if project.description else 'Sin
+                descripción' }}</p>
+        </div>
+        <i class="fas fa-chevron-right text-dim"></i>
+    </a>
+    {% endfor %}
+</div>
+{% endblock %}

app/templates/ver_repo.html

@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="section-header"
+    style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+    <h1>{{ project_name }}</h1>
+    <a href="/repos" class="btn-icon"><i class="fas fa-arrow-left"></i></a>
+</div>
+
+<div class="glass" style="padding: 2rem; border-radius: 24px; margin-bottom: 2rem;">
+    <div class="markdown-body">
+        {{ readme_html|safe }}
+    </div>
+</div>
+
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+    <a href="{{ download_url }}" class="btn glass"
+        style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; color: inherit;">
+        <i class="fas fa-download" style="color: var(--accent);"></i> DESCARGAR ZIP
+    </a>
+    <a href="{{ web_url }}" target="_blank" class="btn glass"
+        style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; color: inherit;">
+        <i class="fas fa-external-link-alt" style="color: var(--accent);"></i> VER EN GITLAB
+    </a>
+</div>
+
+<!-- Add markdown styling -->
+<link rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-dark.min.css">
+{% endblock %}