nexus-command-center/public/index.html

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nexus Command Center — Operasyon Paneli</title>
<link rel="stylesheet" href="css/app.css" />
</head>
<body>

<div class="app" id="app">

  <!-- ============ SOL MENÜ ============ -->
  <aside class="sidebar" id="sidebar">
    <div class="brand">
      <div class="brand-mark">N</div>
      <div class="brand-text">
        <strong>NEXUS</strong>
        <span>Command Center</span>
      </div>
      <button class="sidebar-close" id="sidebarClose" aria-label="Menüyü kapat">✕</button>
    </div>

    <nav class="nav" id="nav">
      <button class="nav-item is-active" data-view="overview">
        <span class="nav-ico">◈</span><span>Genel Bakış</span>
      </button>
      <button class="nav-item" data-view="projects">
        <span class="nav-ico">▤</span><span>Projeler</span><span class="nav-badge" id="navCountProjects">0</span>
      </button>
      <button class="nav-item" data-view="tasks">
        <span class="nav-ico">☰</span><span>Görevler</span><span class="nav-badge" id="navCountTasks">0</span>
      </button>
      <button class="nav-item" data-view="team">
        <span class="nav-ico">◉</span><span>Ekip</span><span class="nav-badge" id="navCountTeam">0</span>
      </button>
      <button class="nav-item" data-view="activity">
        <span class="nav-ico">≡</span><span>Aktivite Günlüğü</span>
      </button>
    </nav>

    <div class="sidebar-foot">
      <div class="sys-status" id="sysStatus">
        <span class="dot" id="sysDot"></span>
        <span id="sysText">Sunucu kontrol ediliyor…</span>
      </div>
    </div>
  </aside>

  <div class="scrim" id="scrim"></div>

  <!-- ============ ANA ALAN ============ -->
  <main class="main">
    <header class="topbar">
      <button class="icon-btn menu-btn" id="menuBtn" aria-label="Menüyü aç">☰</button>
      <div class="topbar-title">
        <h1 id="viewTitle">Genel Bakış</h1>
        <p id="viewSubtitle">Operasyonun tek ekranda özeti</p>
      </div>
      <div class="topbar-actions">
        <span class="last-sync" id="lastSync">—</span>
        <button class="btn btn-ghost" id="refreshBtn" title="Veriyi yenile">⟳ Yenile</button>
        <button class="btn btn-primary" id="quickTaskBtn">+ Yeni Görev</button>
      </div>
    </header>

    <div class="toast-host" id="toastHost"></div>

    <section class="view-host" id="viewHost">
      <div class="loading">Veri yükleniyor…</div>
    </section>
  </main>
</div>

<!-- ============ GÖREV MODALI ============ -->
<div class="modal-backdrop" id="taskModal" hidden>
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="taskModalTitle">
    <header class="modal-head">
      <h2 id="taskModalTitle">Yeni Görev</h2>
      <button class="icon-btn" data-close="taskModal" aria-label="Kapat">✕</button>
    </header>
    <form class="modal-body" id="taskForm" novalidate>
      <input type="hidden" name="id" />

      <label class="field">
        <span class="field-label">Başlık <em>*</em></span>
        <input name="title" maxlength="120" placeholder="Örn: Ödeme webhook doğrulaması" />
        <small class="field-error" data-error="title"></small>
      </label>

      <label class="field">
        <span class="field-label">Açıklama</span>
        <textarea name="description" rows="3" maxlength="600" placeholder="Kısa kabul kriteri / not"></textarea>
        <small class="field-error" data-error="description"></small>
      </label>

      <div class="grid-2">
        <label class="field">
          <span class="field-label">Öncelik <em>*</em></span>
          <select name="priority">
            <option value="dusuk">Düşük</option>
            <option value="orta" selected>Orta</option>
            <option value="yuksek">Yüksek</option>
            <option value="kritik">Kritik</option>
          </select>
          <small class="field-error" data-error="priority"></small>
        </label>

        <label class="field">
          <span class="field-label">Durum <em>*</em></span>
          <select name="status">
            <option value="todo">Yapılacak</option>
            <option value="in_progress">Devam Ediyor</option>
            <option value="done">Tamamlandı</option>
          </select>
          <small class="field-error" data-error="status"></small>
        </label>
      </div>

      <div class="grid-2">
        <label class="field">
          <span class="field-label">Sorumlu <em>*</em></span>
          <select name="assignee" id="taskAssignee"></select>
          <small class="field-error" data-error="assignee"></small>
        </label>

        <label class="field">
          <span class="field-label">Son Tarih</span>
          <input type="date" name="due" />
          <small class="field-error" data-error="due"></small>
        </label>
      </div>

      <label class="field">
        <span class="field-label">Proje</span>
        <select name="projectId" id="taskProject">
          <option value="">— Projesiz —</option>
        </select>
        <small class="field-error" data-error="projectId"></small>
      </label>

      <footer class="modal-foot">
        <button type="button" class="btn btn-ghost" data-close="taskModal">Vazgeç</button>
        <button type="submit" class="btn btn-primary" id="taskSubmitBtn">Kaydet</button>
      </footer>
    </form>
  </div>
</div>

<!-- ============ PROJE MODALI ============ -->
<div class="modal-backdrop" id="projectModal" hidden>
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="projectModalTitle">
    <header class="modal-head">
      <h2 id="projectModalTitle">Yeni Proje</h2>
      <button class="icon-btn" data-close="projectModal" aria-label="Kapat">✕</button>
    </header>
    <form class="modal-body" id="projectForm" novalidate>
      <input type="hidden" name="id" />

      <label class="field">
        <span class="field-label">Proje Adı <em>*</em></span>
        <input name="name" maxlength="80" placeholder="Örn: Vega Veri Ambarı" />
        <small class="field-error" data-error="name"></small>
      </label>

      <label class="field">
        <span class="field-label">Açıklama</span>
        <textarea name="description" rows="3" maxlength="400" placeholder="Kapsam / hedef"></textarea>
        <small class="field-error" data-error="description"></small>
      </label>

      <div class="grid-2">
        <label class="field">
          <span class="field-label">Durum <em>*</em></span>
          <select name="status">
            <option value="planlandi">Planlandı</option>
            <option value="devam" selected>Devam Ediyor</option>
            <option value="tamamlandi">Tamamlandı</option>
          </select>
          <small class="field-error" data-error="status"></small>
        </label>

        <label class="field">
          <span class="field-label">Sorumlu <em>*</em></span>
          <select name="owner" id="projectOwner"></select>
          <small class="field-error" data-error="owner"></small>
        </label>
      </div>

      <div class="grid-2">
        <label class="field">
          <span class="field-label">Bitiş Tarihi</span>
          <input type="date" name="deadline" />
          <small class="field-error" data-error="deadline"></small>
        </label>

        <label class="field">
          <span class="field-label">Renk</span>
          <input type="color" name="color" value="#4f8cff" class="color-input" />
          <small class="field-error" data-error="color"></small>
        </label>
      </div>

      <p class="hint">İlerleme yüzdesi elle girilmez — projeye bağlı görevlerin tamamlanma oranından otomatik hesaplanır.</p>

      <footer class="modal-foot">
        <button type="button" class="btn btn-ghost" data-close="projectModal">Vazgeç</button>
        <button type="submit" class="btn btn-primary" id="projectSubmitBtn">Kaydet</button>
      </footer>
    </form>
  </div>
</div>

<!-- ============ ONAY MODALI ============ -->
<div class="modal-backdrop" id="confirmModal" hidden>
  <div class="modal modal-sm" role="alertdialog" aria-modal="true" aria-labelledby="confirmTitle">
    <header class="modal-head">
      <h2 id="confirmTitle">Emin misin?</h2>
      <button class="icon-btn" data-close="confirmModal" aria-label="Kapat">✕</button>
    </header>
    <div class="modal-body">
      <p id="confirmMessage">Bu işlem geri alınamaz.</p>
      <footer class="modal-foot">
        <button type="button" class="btn btn-ghost" id="confirmCancel">Vazgeç</button>
        <button type="button" class="btn btn-danger" id="confirmOk">Sil</button>
      </footer>
    </div>
  </div>
</div>

<script src="js/api.js"></script>
<script src="js/ui.js"></script>
<script src="js/state.js"></script>
<script src="js/chart.js"></script>
<script src="js/dnd.js"></script>
<script src="js/views/overview.js"></script>
<script src="js/views/projects.js"></script>
<script src="js/views/tasks.js"></script>
<script src="js/views/team.js"></script>
<script src="js/views/activity.js"></script>
<script src="js/app.js"></script>
</body>
</html>