ManagementTIProjects/index.html at main · EmanuXBe/ManagementTIProjects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>KAIRO — MVP (Escritorio en Web)</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="desktop-app">
    <header class="titlebar">
      <div class="window-controls">
        <span class="dot red"></span>
        <span class="dot yellow"></span>
        <span class="dot green"></span>
      </div>
      <div class="title">KAIRO — Gestión de Proyectos (MVP)</div>
      <div class="actions">
        <input id="globalSearch" type="search" placeholder="Buscar (tareas, datos, progreso)..." />
      </div>
    </header>

    <aside class="sidebar">
      <button class="nav-btn" data-target="dashboard" title="Dashboard">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
        <span>Dashboard</span>
      </button>
      <button class="nav-btn" data-target="addTask" title="Agregar Tareas">
        <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14l4-4h12c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M13 7h-2v3H8v2h3v3h2v-3h3v-2h-3z"/></svg>
        <span>Tareas</span>
      </button>
      <button class="nav-btn" data-target="addData" title="Agregar Datos">
        <svg viewBox="0 0 24 24"><path d="M19 2H8c-1.1 0-2 .9-2 2v3H5c-1.66 0-3 1.34-3 3v8c0 1.66 1.34 3 3 3h10c1.66 0 3-1.34 3-3v-1h1c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4 18H5c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8c0 .55-.45 1-1 1zM20 15h-1V6c0-1.1-.9-2-2-2h-9V4h11v11z"/></svg>
        <span>Datos</span>
      </button>
      <button class="nav-btn" data-target="progress" title="Agregar Progreso">
        <svg viewBox="0 0 24 24"><path d="M3 17h18v2H3zM3 5h18v6H3z"/><path d="M7 9h2V7H7zm0 8h2v-2H7zm4 0h2v-2h-2zm4 0h2v-2h-2z"/></svg>
        <span>Progreso</span>
      </button>
      <button class="nav-btn" data-target="gantt" title="Diagrama de Gantt">
        <svg viewBox="0 0 24 24"><path d="M4 5h16v2H4zM7 9h7v2H7zM7 13h10v2H7zM7 17h5v2H7z"/></svg>
        <span>Gantt</span>
      </button>
      <button class="nav-btn" data-target="talkNLP" title="Hablar (NLP)">
        <svg viewBox="0 0 24 24"><path d="M12 3C7 3 3 6.58 3 11c0 2.5 1.24 4.73 3.2 6.24L6 21l3.02-1.67c.95.26 1.95.4 2.98.4 5 0 9-3.58 9-8s-4-8-9-8z"/></svg>
        <span>Hablar NLP</span>
      </button>
      <button class="nav-btn" data-target="talkLLM" title="Hablar (LLM)">
        <svg viewBox="0 0 24 24"><path d="M4 4h16v10H5.17L4 15.17V4zm0 14h16v2H4z"/></svg>
        <span>Hablar LLM</span>
      </button>
      <button class="nav-btn" data-target="apis" title="APIs & Conectores">
        <svg viewBox="0 0 24 24"><path d="M7 7h10v2H7zM3 3h18v2H3zM7 11h10v2H7zM3 15h18v2H3zM7 19h10v2H7z"/></svg>
        <span>APIs</span>
      </button>
    </aside>

    <main id="views">
      <!-- DASHBOARD -->
      <section class="view active" id="view-dashboard">
        <div class="grid-2">
          <div class="card">
            <h2>Resumen</h2>
            <div id="statRow" class="stats"></div>
            <div class="mini-gantt">
              <h3>Gantt (vista rápida)</h3>
              <div id="miniGantt"></div>
              <button class="btn small" data-open="gantt">Abrir Gantt</button>
            </div>
          </div>
          <div class="card">
            <h2>Atajos</h2>
            <div class="shortcuts">
              <button class="btn" data-open="addTask">+ Nueva tarea</button>
              <button class="btn" data-open="addData">+ Agregar datos</button>
              <button class="btn" data-open="progress">+ Registrar progreso</button>
              <button class="btn" data-open="talkLLM">Hablar con LLM</button>
            </div>
            <div class="list">
              <h3>Tareas próximas</h3>
              <ul id="upcomingList"></ul>
            </div>
          </div>
        </div>
      </section>

      <!-- ADD TASK -->
      <section class="view" id="view-addTask">
        <div class="card">
          <h2>Agregar/Editar Tarea</h2>
          <form id="taskForm" class="form">
            <input type="hidden" id="taskId" />
            <div class="row">
              <label>Nombre</label>
              <input id="taskName" required placeholder="Ej. Integración con Notion" />
            </div>
            <div class="row">
              <label>Responsable</label>
              <input id="taskOwner" placeholder="Ej. Emanuel" />
            </div>
            <div class="row three">
              <div>
                <label>Inicio</label>
                <input type="date" id="taskStart" required />
              </div>
              <div>
                <label>Fin</label>
                <input type="date" id="taskEnd" required />
              </div>
              <div>
                <label>Estado</label>
                <select id="taskStatus">
                  <option>Pendiente</option>
                  <option>En progreso</option>
                  <option>Hecha</option>
                </select>
              </div>
            </div>
            <div class="row">
              <label>Prioridad</label>
              <select id="taskPriority">
                <option>Media</option>
                <option>Alta</option>
                <option>Baja</option>
              </select>
            </div>
            <div class="actions-row">
              <button class="btn" type="submit">Guardar</button>
              <button class="btn ghost" id="taskReset" type="button">Limpiar</button>
            </div>
          </form>
          <hr>
          <h3>Tareas</h3>
          <div id="taskList" class="table"></div>
        </div>
      </section>

      <!-- ADD DATA -->
      <section class="view" id="view-addData">
        <div class="card">
          <h2>Agregar Datos (mock)</h2>
          <form id="dataForm" class="form">
            <div class="row">
              <label>Nombre del archivo</label>
              <input id="dataName" placeholder="Ej. Requisitos-v1.xlsx" required />
            </div>
            <div class="row three">
              <div>
                <label>Tipo</label>
                <select id="dataType">
                  <option>Excel</option>
                  <option>PDF</option>
                  <option>Imagen</option>
                  <option>Documento</option>
                </select>
              </div>
              <div>
                <label>Área</label>
                <select id="dataArea">
                  <option>Legal</option>
                  <option>Comercial</option>
                  <option>Ingeniería</option>
                  <option>Operaciones</option>
                </select>
              </div>
              <div>
                <label>Fecha</label>
                <input type="date" id="dataDate" />
              </div>
            </div>
            <div class="actions-row">
              <button class="btn" type="submit">Guardar</button>
              <button class="btn ghost" id="dataReset" type="button">Limpiar</button>
              <button class="btn link" data-open="gantt" type="button">Actualizar Gantt</button>
            </div>
          </form>
          <hr>
          <h3>Repositorio (mock)</h3>
          <div id="dataList" class="table"></div>
        </div>
      </section>

      <!-- PROGRESS -->
      <section class="view" id="view-progress">
        <div class="card">
          <h2>Registrar Progreso</h2>
          <form id="progressForm" class="form">
            <div class="row three">
              <div>
                <label>Tarea</label>
                <select id="progressTask"></select>
              </div>
              <div>
                <label>% Avance</label>
                <input type="number" id="progressPct" min="0" max="100" value="10" />
              </div>
              <div>
                <label>Fecha</label>
                <input type="date" id="progressDate" />
              </div>
            </div>
            <div class="row">
              <label>Nota</label>
              <input id="progressNote" placeholder="Ej. Integración probada en sandbox." />
            </div>
            <div class="actions-row">
              <button class="btn" type="submit">Guardar</button>
              <button class="btn ghost" id="progressReset" type="button">Limpiar</button>
              <button class="btn link" data-open="gantt" type="button">Ver en Gantt</button>
            </div>
          </form>
          <hr>
          <h3>Historial</h3>
          <div id="progressList" class="table"></div>
        </div>
      </section>

      <!-- GANTT -->
      <section class="view" id="view-gantt">
        <div class="card">
          <h2>Diagrama de Gantt</h2>
          <div id="ganttContainer" class="gantt"></div>
        </div>
      </section>

      <!-- TALK NLP -->
      <section class="view" id="view-talkNLP">
        <div class="card">
          <h2>Hablar con el sistema (NLP)</h2>
          <div class="chat" id="chatNLP"></div>
          <form id="formNLP" class="chat-input">
            <input id="inputNLP" placeholder="Ej. 'conecta Trello' o 'resume tareas para la semana'..." />
            <button class="btn" type="submit">Enviar</button>
          </form>
          <small class="muted">Nota: Respuestas simuladas. La acción <em>conecta</em> o <em>sincroniza</em> abrirá la vista de APIs.</small>
        </div>
      </section>

      <!-- TALK LLM -->
      <section class="view" id="view-talkLLM">
        <div class="card">
          <h2>Hablar con LLM</h2>
          <div class="chat" id="chatLLM"></div>
          <form id="formLLM" class="chat-input">
            <input id="inputLLM" placeholder="Pregunta algo (mock). Ej. 'genera checklist de onboarding'..." />
            <button class="btn" type="submit">Enviar</button>
          </form>
          <small class="muted">Nota: Simulación local sin conexión. Demuestra el flujo de uso.</small>
        </div>
      </section>

      <!-- APIs -->
      <section class="view" id="view-apis">
        <div class="card">
          <h2>Conectores y APIs</h2>
          <div class="connectors">
            <label><input type="checkbox" class="ck-conn" data-key="notion" /> Notion</label>
            <label><input type="checkbox" class="ck-conn" data-key="trello" /> Trello</label>
            <label><input type="checkbox" class="ck-conn" data-key="github" /> GitHub</label>
            <label><input type="checkbox" class="ck-conn" data-key="googledrive" /> Google Drive</label>
          </div>
          <div class="row">
            <label>Endpoint de prueba</label>
            <input id="apiEndpoint" placeholder="https://api.mock/endpoint" />
          </div>
          <div class="actions-row">
            <button class="btn" id="btnTestAPI">Probar Request (mock)</button>
          </div>
          <pre id="apiResult" class="pre"></pre>
        </div>
      </section>
    </main>
  </div>

  <script src="app.js"></script>
</body>
</html>