INFINWAY | GESTÃO DE PROJETO

Pasted Oct 13, 2026, 1:19 PM1 file404 lines

Scan to open on your phone

Point a camera at the QR code - it opens this exact paste, no app needed.

https://codepastes.com/zzgsxak08k6m4bfw
INFINWAY | GESTÃO DE PROJETO
<!DOCTYPE html>
<html lang="pt-PT">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INFINWAY - Gestão de Projeto LEGI/PIEGI1</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Lucide Icons CDN -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            50: '#ecfdf5',
                            100: '#d1fae5',
                            500: '#10b981',
                            600: '#059669',
                            700: '#047857',
                            800: '#065f46',
                            900: '#064e3b',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        
        .tab-btn.active {
            background-color: #059669 !important;
            color: #ffffff !important;
            box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.2);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in { animation: fadeIn 0.2s ease-out forwards; }
    </style>
</head>
<body class="bg-slate-100 text-slate-800 antialiased h-screen flex overflow-hidden">

    <!-- Sidebar navigation -->
    <aside id="sidebar" class="w-64 bg-slate-900 text-slate-300 flex flex-col justify-between transition-all duration-300 z-30 fixed inset-y-0 left-0 md:static -translate-x-full md:translate-x-0 shadow-xl">
        <div>
            <!-- Logo Section -->
            <div class="p-5 border-b border-slate-800 flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-emerald-600 to-teal-400 flex items-center justify-center text-white font-black text-xl shadow-lg shadow-emerald-900/40">
                        IF
                    </div>
                    <div>
                        <h1 class="font-bold text-lg text-white tracking-wide">INFINWAY</h1>
                        <p class="text-xs text-emerald-400 font-medium">PIEGI1 / LEGI UMinho</p>
                    </div>
                </div>
                <button id="close-sidebar-btn" class="md:hidden text-slate-400 hover:text-white p-1">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <!-- Project Meta Badge -->
            <div class="px-4 py-3 mx-3 my-3 bg-slate-800/60 rounded-xl border border-slate-700/50 text-xs">
                <div class="flex items-center text-emerald-400 font-semibold mb-1">
                    <i data-lucide="recycle" class="w-3.5 h-3.5 mr-1.5"></i> Resíduos Calçado & Marroquinaria
                </div>
                <p class="text-slate-400 leading-relaxed text-[11px]">Via Tátil Modular Inclusiva para Deficientes Visuais</p>
            </div>

            <!-- Navigation Links -->
            <nav class="px-3 space-y-1.5 mt-2">
                <button id="nav-dashboard" data-tab="dashboard" class="tab-btn w-full flex items-center space-x-3 px-3.5 py-2.5 rounded-xl font-medium text-sm transition-all text-slate-400 hover:bg-slate-800 hover:text-white active">
                    <i data-lucide="layout-dashboard" class="w-4 h-4"></i>
                    <span>Dashboard Geral</span>
                </button>
                <button id="nav-kanban" data-tab="kanban" class="tab-btn w-full flex items-center space-x-3 px-3.5 py-2.5 rounded-xl font-medium text-sm transition-all text-slate-400 hover:bg-slate-800 hover:text-white">
                    <i data-lucide="kanban" class="w-4 h-4"></i>
                    <span>Kanban & Tarefas</span>
                </button>
                <button id="nav-team" data-tab="team" class="tab-btn w-full flex items-center space-x-3 px-3.5 py-2.5 rounded-xl font-medium text-sm transition-all text-slate-400 hover:bg-slate-800 hover:text-white">
                    <i data-lucide="users" class="w-4 h-4"></i>
                    <span>Equipa (9 Alunos)</span>
                </button>
                <button id="nav-tutoring" data-tab="tutoring" class="tab-btn w-full flex items-center space-x-3 px-3.5 py-2.5 rounded-xl font-medium text-sm transition-all text-slate-400 hover:bg-slate-800 hover:text-white">
                    <i data-lucide="file-check-2" class="w-4 h-4"></i>
                    <span>Entregáveis T1 (Tutoria)</span>
                </button>
                <button id="nav-timeline" data-tab="timeline" class="tab-btn w-full flex items-center space-x-3 px-3.5 py-2.5 rounded-xl font-medium text-sm transition-all text-slate-400 hover:bg-slate-800 hover:text-white">
                    <i data-lucide="milestone" class="w-4 h-4"></i>
                    <span>Linha Tempo / PCs</span>
                </button>
            </nav>
        </div>

        <!-- Sidebar Footer -->
        <div class="p-4 border-t border-slate-800 text-xs bg-slate-950/40">
            <div class="text-slate-400 font-medium mb-1 flex items-center justify-between">
                <span>Tutores do Projeto</span>
                <span class="bg-slate-800 text-emerald-400 text-[10px] px-1.5 py-0.5 rounded">T1</span>
            </div>
            <p class="text-slate-300 font-semibold truncate">Eva Serafim, Dércio C., Maria J.</p>
            <div class="mt-2 text-[11px] text-slate-400 flex items-center space-x-1">
                <i data-lucide="clock" class="w-3 h-3 text-emerald-400"></i>
                <span>2ª (14h-16h) & 3ª (14h-17h)</span>
            </div>
            <div class="mt-1 text-[11px] text-slate-500 flex items-center space-x-1">
                <i data-lucide="map-pin" class="w-3 h-3"></i>
                <span>Salas LP3 (2.61) e LP4 (2.64)</span>
            </div>
        </div>
    </aside>

    <!-- Overlay mobile sidebar -->
    <div id="sidebar-overlay" class="fixed inset-0 bg-slate-900/60 z-20 hidden md:hidden"></div>

    <!-- Main Content Body -->
    <div class="flex-1 flex flex-col h-screen overflow-hidden">
        
        <!-- Top App Bar -->
        <header class="bg-white border-b border-slate-200 px-4 md:px-8 py-3.5 flex items-center justify-between shrink-0 shadow-sm z-10">
            <div class="flex items-center space-x-3">
                <button id="open-sidebar-btn" class="md:hidden text-slate-600 hover:text-slate-900 p-1 rounded-lg hover:bg-slate-100">
                    <i data-lucide="menu" class="w-6 h-6"></i>
                </button>
                <div>
                    <h2 id="page-title" class="text-xl font-bold text-slate-900 tracking-tight">Dashboard Geral</h2>
                    <p id="page-subtitle" class="text-xs text-slate-500 hidden sm:block">Visão global do estado do projeto e métricas da equipa</p>
                </div>
            </div>

            <!-- Top Actions -->
            <div class="flex items-center space-x-2 md:space-x-3">
                <div class="relative hidden sm:block">
                    <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
                    <input type="text" id="global-search" placeholder="Pesquisar..." class="pl-9 pr-3 py-1.5 bg-slate-100 border border-slate-200 rounded-lg text-xs w-48 lg:w-64 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:bg-white transition-all">
                </div>

                <button id="btn-open-new-task" class="flex items-center space-x-1.5 bg-emerald-600 hover:bg-emerald-700 text-white font-medium text-xs px-3.5 py-2 rounded-xl shadow-md shadow-emerald-600/20 transition-all hover:scale-[1.02] active:scale-95">
                    <i data-lucide="plus-circle" class="w-4 h-4"></i>
                    <span>Nova Tarefa</span>
                </button>

                <button id="btn-reset-data" title="Restaurar dados padrão" class="p-2 text-slate-500 hover:text-slate-800 hover:bg-slate-100 rounded-lg transition-all">
                    <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
                </button>
            </div>
        </header>

        <main class="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8 custom-scrollbar">

            <!-- TAB 1: DASHBOARD -->
            <div id="tab-dashboard" class="tab-content animate-fade-in space-y-6">
                <!-- Welcome Banner -->
                <div class="bg-gradient-to-r from-slate-900 via-slate-800 to-emerald-950 rounded-2xl p-6 text-white shadow-xl relative overflow-hidden">
                    <div class="relative z-10 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
                        <div class="max-w-3xl">
                            <div class="flex items-center space-x-2 mb-2">
                                <span class="bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 text-[11px] font-semibold px-2.5 py-0.5 rounded-full">PIEGI1 / LEGI UMinho</span>
                                <span class="bg-slate-700/80 text-slate-300 text-[11px] font-medium px-2.5 py-0.5 rounded-full">Ano Letivo 2026/2027</span>
                            </div>
                            <h2 class="text-2xl md:text-3xl font-extrabold tracking-tight text-white mb-2">PROJETO INFINWAY</h2>
                            <p class="text-slate-300 text-sm leading-relaxed mb-4">
                                Conceção e validação de uma <strong class="text-emerald-300 font-medium">via tátil modular inclusiva</strong> (módulos de retas direcionais e cruzamentos "às bolinhas") fabricada a partir de resíduos do calçado e marroquinaria.
                            </p>
                            <div class="flex flex-wrap gap-4 text-xs text-slate-300 border-t border-slate-700/60 pt-3">
                                <div class="flex items-center space-x-1.5"><i data-lucide="clock" class="w-4 h-4 text-emerald-400"></i><span>2ªf (14h-16h) & 3ªf (14h-17h)</span></div>
                                <div class="flex items-center space-x-1.5"><i data-lucide="map-pin" class="w-4 h-4 text-emerald-400"></i><span>Salas LP3 (2.61) e LP4 (2.64)</span></div>
                                <div class="flex items-center space-x-1.5"><i data-lucide="award" class="w-4 h-4 text-emerald-400"></i><span>Tutores: Eva Serafim, Dércio C., Maria J. Costa</span></div>
                            </div>
                        </div>

                        <!-- Progress Box -->
                        <div class="bg-slate-800/80 backdrop-blur-md border border-slate-700/70 p-4 rounded-xl shrink-0 w-full lg:w-64 text-center shadow-lg">
                            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Progresso Global</p>
                            <div class="relative inline-flex items-center justify-center my-1">
                                <span id="dash-progress-percent" class="text-3xl font-black text-emerald-400">0%</span>
                            </div>
                            <div class="w-full bg-slate-700 h-2.5 rounded-full overflow-hidden mt-2">
                                <div id="dash-progress-bar" class="bg-emerald-500 h-full transition-all duration-500" style="width: 0%"></div>
                            </div>
                            <p id="dash-progress-sub" class="text-[11px] text-slate-400 mt-2">0 de 0 tarefas concluídas</p>
                        </div>
                    </div>
                </div>

                <!-- Urgent Milestone Alert Banner -->
                <div class="bg-amber-50 border-l-4 border-amber-500 rounded-xl p-4 shadow-sm flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                    <div class="flex items-start space-x-3">
                        <div class="p-2 bg-amber-500/10 rounded-lg text-amber-600 mt-0.5"><i data-lucide="alert-triangle" class="w-5 h-5"></i></div>
                        <div>
                            <div class="flex items-center space-x-2">
                                <span class="font-bold text-amber-900 text-sm">PRÓXIMO PONTO DE CONTROLO: PC2</span>
                                <span class="bg-amber-200 text-amber-900 text-[10px] font-bold px-2 py-0.5 rounded">04/Nov/2026</span>
                            </div>
                            <p class="text-xs text-amber-800 mt-0.5">Apresentação de Andamento + Tutorial Alargado de Metodologia</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-3 w-full sm:w-auto justify-between sm:justify-end">
                        <div class="text-right">
                            <span id="countdown-days" class="text-xl font-extrabold text-amber-900">--</span>
                            <span class="text-xs font-medium text-amber-700 block -mt-1">dias restantes</span>
                        </div>
                        <button id="btn-goto-pc2" class="bg-amber-500 hover:bg-amber-600 text-white text-xs font-semibold px-3 py-1.5 rounded-lg shadow transition-all">Ver PCs</button>
                    </div>
                </div>

                <!-- Stats Cards Grid -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Tarefas Concluídas</p>
                                <h3 id="stat-completed-tasks" class="text-2xl font-black text-slate-900 mt-1">0/0</h3>
                            </div>
                            <div class="p-2.5 rounded-xl bg-emerald-50 text-emerald-600"><i data-lucide="check-circle-2" class="w-6 h-6"></i></div>
                        </div>
                        <p id="stat-pending-tasks-text" class="mt-3 text-xs text-slate-500 font-medium">0 pendentes no Kanban</p>
                    </div>

                    <div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Membros Ativos</p>
                                <h3 class="text-2xl font-black text-slate-900 mt-1">9 Alunos</h3>
                            </div>
                            <div class="p-2.5 rounded-xl bg-blue-50 text-blue-600"><i data-lucide="users" class="w-6 h-6"></i></div>
                        </div>
                        <p class="mt-3 text-xs text-blue-600 font-semibold">100% integrados no projeto</p>
                    </div>

                    <div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Relatórios Técnicos</p>
                                <h3 class="text-2xl font-black text-slate-900 mt-1">PC4 & PC5</h3>
                            </div>
                            <div class="p-2.5 rounded-xl bg-indigo-50 text-indigo-600"><i data-lucide="file-text" class="w-6 h-6"></i></div>
                        </div>
                        <p class="mt-3 text-xs text-slate-500">Limites: 30p e 40p máx.</p>
                    </div>

                    <div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Horas Acumuladas</p>
                                <h3 id="stat-hours-total" class="text-2xl font-black text-slate-900 mt-1">184h</h3>
                            </div>
                            <div class="p-2.5 rounded-xl bg-purple-50 text-purple-600"><i data-lucide="clock-3" class="w-6 h-6"></i></div>
                        </div>
                        <p class="mt-3 text-xs text-slate-500">Registadas em laboratório</p>
                    </div>
                </div>

                <!-- Dashboard Content Rows -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div class="lg:col-span-2 bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
                        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100">
                            <div class="flex items-center space-x-2">
                                <i data-lucide="list-todo" class="w-5 h-5 text-emerald-600"></i>
                                <h3 class="font-bold text-slate-900">Tarefas Prioritárias Pendentes</h3>
                            </div>
                            <button id="btn-goto-kanban" class="text-xs text-emerald-600 hover:text-emerald-700 font-semibold flex items-center space-x-1">
                                <span>Ver todas</span><i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                            </button>
                        </div>
                        <div id="dash-priority-tasks" class="space-y-3"></div>
                    </div>

                    <div class="space-y-6">
                        <div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
                            <h3 class="font-bold text-slate-900 mb-3 flex items-center justify-between text-sm">
                                <span>Distribuição por Membro</span>
                                <i data-lucide="pie-chart" class="w-4 h-4 text-slate-400"></i>
                            </h3>
                            <div id="dash-member-workload" class="space-y-2.5 max-h-56 overflow-y-auto custom-scrollbar pr-1"></div>
                        </div>

                        <div class="bg-slate-900 text-white rounded-2xl p-5 shadow-sm">
                            <h3 class="font-bold mb-3 text-sm flex items-center space-x-2">
                                <i data-lucide="zap" class="w-4 h-4 text-amber-400"></i>
                                <span>Ações Rápidas</span>
                            </h3>
                            <div class="grid grid-cols-2 gap-2">
                                <button id="quick-btn-newtask" class="p-3 bg-slate-800 hover:bg-slate-700 rounded-xl text-left border border-slate-700 transition-all">
                                    <i data-lucide="plus" class="w-4 h-4 text-emerald-400 mb-1"></i>
                                    <p class="text-xs font-semibold">Nova Tarefa</p>
                                </button>
                                <button id="quick-btn-tutoring" class="p-3 bg-slate-800 hover:bg-slate-700 rounded-xl text-left border border-slate-700 transition-all">
                                    <i data-lucide="file-text" class="w-4 h-4 text-blue-400 mb-1"></i>
                                    <p class="text-xs font-semibold">Tutoria T1</p>
                                </button>
                                <button id="quick-btn-team" class="p-3 bg-slate-800 hover:bg-slate-700 rounded-xl text-left border border-slate-700 transition-all">
                                    <i data-lucide="user-check" class="w-4 h-4 text-purple-400 mb-1"></i>
                                    <p class="text-xs font-semibold">Ver Equipa</p>
                                </button>
                                <button id="quick-btn-export" class="p-3 bg-slate-800 hover:bg-slate-700 rounded-xl text-left border border-slate-700 transition-all">
                                    <i data-lucide="download" class="w-4 h-4 text-amber-400 mb-1"></i>
                                    <p class="text-xs font-semibold">Exportar JSON</p>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- TAB 2: KANBAN BOARD -->
            <div id="tab-kanban" class="tab-content hidden animate-fade-in space-y-5">
                <div class="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm flex flex-col md:flex-row items-center justify-between gap-4">
                    <div class="flex flex-wrap items-center gap-3 w-full md:w-auto">
                        <div class="relative flex-1 md:w-56">
                            <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
                            <input type="text" id="kanban-search" placeholder="Filtrar tarefas..." class="w-full pl-9 pr-3 py-1.5 bg-slate-100 border border-slate-200 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500">
                        </div>

                        <select id="filter-member" class="bg-slate-100 border border-slate-200 text-xs rounded-xl px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-emerald-500">
                            <option value="ALL">Todos os Membros</option>
                        </select>

                        <select id="filter-priority" class="bg-slate-100 border border-slate-200 text-xs rounded-xl px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-emerald-500">
                            <option value="ALL">Todas as Prioridades</option>
                            <option value="Urgente">Urgente</option>
                            <option value="Alta">Alta</option>
                            <option value="Média">Média</option>
                            <option value="Baixa">Baixa</option>
                        </select>
                    </div>

                    <div class="flex items-center space-x-2 bg-slate-100 p-1 rounded-xl shrink-0">
                        <button id="btn-view-kanban" class="px-3 py-1.5 rounded-lg text-xs font-semibold transition-all bg-white text-slate-800 shadow-sm">
                            <i data-lucide="kanban" class="w-3.5 h-3.5 inline mr-1"></i> Quadro
                        </button>
                        <button id="btn-view-list" class="px-3 py-1.5 rounded-lg text-xs font-semibold text-slate-600 transition-all hover:text-slate-900">
                            <i data-lucide="list" class="w-3.5 h-3.5 inline mr-1"></i> Lista
                        </button>
                    </div>
                </div>

                <!-- KANBAN BOARD CONTAINER -->
                <div id="kanban-board-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-start">
                    <!-- Column 1: Todo -->
                    <div class="bg-slate-200/60 rounded-2xl p-3.5 border border-slate-300/60 flex flex-col max-h-[calc(100vh-250px)]">
                        <div class="flex items-center justify-between mb-3 px-1">
                            <div class="flex items-center space-x-2">
                                <span class="w-2.5 h-2.5 rounded-full bg-slate-500"></span>
                                <h3 class="font-bold text-xs uppercase tracking-wider text-slate-700">A Fazer</h3>
                                <span id="count-todo" class="bg-slate-300 text-slate-700 font-bold text-[11px] px-2 py-0.5 rounded-full">0</span>
                            </div>
                        </div>
                        <div id="col-todo" class="space-y-3 overflow-y-auto custom-scrollbar p-0.5 flex-1 min-h-[150px]"></div>
                    </div>

                    <!-- Column 2: In Progress -->
                    <div class="bg-blue-50/60 rounded-2xl p-3.5 border border-blue-200/60 flex flex-col max-h-[calc(100vh-250px)]">
                        <div class="flex items-center justify-between mb-3 px-1">
                            <div class="flex items-center space-x-2">
                                <span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
                                <h3 class="font-bold text-xs uppercase tracking-wider text-blue-900">Em Progresso</h3>
                                <span id="count-in_progress" class="bg-blue-200 text-blue-900 font-bold text-[11px] px-2 py-0.5 rounded-full">0</span>
                            </div>
                        </div>
                        <div id="col-in_progress" class="space-y-3 overflow-y-auto custom-scrollbar p-0.5 flex-1 min-h-[150px]"></div>
                    </div>

                    <!-- Column 3: Review -->
                    <div class="bg-purple-50/60 rounded-2xl p-3.5 border border-purple-200/60 flex flex-col max-h-[calc(100vh-250px)]">
                        <div class="flex items-center justify-between mb-3 px-1">
                            <div class="flex items-center space-x-2">
                                <span class="w-2.5 h-2.5 rounded-full bg-purple-500"></span>
                                <h3 class="font-bold text-xs uppercase tracking-wider text-purple-900">Em Revisão</h3>
                                <span id="count-review" class="bg-purple-200 text-purple-900 font-bold text-[11px] px-2 py-0.5 rounded-full">0</span>
                            </div>
                        </div>
                        <div id="col-review" class="space-y-3 overflow-y-auto custom-scrollbar p-0.5 flex-1 min-h-[150px]"></div>
                    </div>

                    <!-- Column 4: Done -->
                    <div class="bg-emerald-50/60 rounded-2xl p-3.5 border border-emerald-200/60 flex flex-col max-h-[calc(100vh-250px)]">
                        <div class="flex items-center justify-between mb-3 px-1">
                            <div class="flex items-center space-x-2">
                                <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
                                <h3 class="font-bold text-xs uppercase tracking-wider text-emerald-900">Concluído</h3>
                                <span id="count-done" class="bg-emerald-200 text-emerald-900 font-bold text-[11px] px-2 py-0.5 rounded-full">0</span>
                            </div>
                        </div>
                        <div id="col-done" class="space-y-3 overflow-y-auto custom-scrollbar p-0.5 flex-1 min-h-[150px]"></div>
                    </div>
                </div>

                <!-- TABLE VIEW -->
                <div id="list-board-container" class="

27,510 chars · codepastes.com