scud_ai/modules/web_api/static/modals/presence_modal.html

<div id="presence-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
  <div class="bg-white rounded-2xl shadow-2xl w-full max-w-6xl h-[88vh] flex flex-col overflow-hidden border border-slate-200">
    
    <!-- Шапка -->
    <div class="px-6 py-4 border-b border-slate-200 bg-slate-50/80 flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <div class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-600 flex items-center justify-center font-bold text-xl">
          🏢
        </div>
        <div>
          <h3 class="text-lg font-bold text-slate-800">Оперативный мониторинг присутствия</h3>
          <p id="presence-modal-subtitle" class="text-xs text-slate-500">Загрузка данных...</p>
        </div>
      </div>
      <div class="flex items-center space-x-2">
        <button id="btn-presence-force-refresh" class="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-semibold flex items-center space-x-1.5 transition-colors shadow-sm">
          <span>🔄</span>
          <span>Запросить из СКУД</span>
        </button>
        <button id="btn-close-presence-modal" class="text-slate-400 hover:text-slate-600 p-2 rounded-lg hover:bg-slate-100 transition-colors">
          ✕
        </button>
      </div>
    </div>

    <!-- Метрики (плашки) - 7 колонок для точного баланса штата 1С -->
    <div class="grid grid-cols-2 sm:grid-cols-7 gap-2 p-4 bg-slate-100/60 border-b border-slate-200">
      <div class="bg-white p-2.5 rounded-xl border border-slate-200/80 text-center">
        <div class="text-[11px] text-slate-500 font-medium">Штат 1С</div>
        <div id="metric-total" class="text-lg font-bold text-slate-800">—</div>
      </div>
      <div class="bg-emerald-50 p-2.5 rounded-xl border border-emerald-200/80 text-center">
        <div class="text-[11px] text-emerald-700 font-medium">В здании</div>
        <div id="metric-inside" class="text-lg font-bold text-emerald-700">—</div>
      </div>
      <div class="bg-amber-50 p-2.5 rounded-xl border border-amber-200/80 text-center">
        <div class="text-[11px] text-amber-700 font-medium">Вышли</div>
        <div id="metric-outside" class="text-lg font-bold text-amber-700">—</div>
      </div>
      <div class="bg-blue-50 p-2.5 rounded-xl border border-blue-200/80 text-center">
        <div class="text-[11px] text-blue-700 font-medium">Удаленка</div>
        <div id="metric-remote" class="text-lg font-bold text-blue-700">—</div>
      </div>
      <div class="bg-purple-50 p-2.5 rounded-xl border border-purple-200/80 text-center">
        <div class="text-[11px] text-purple-700 font-medium">Отпуск/Ком.</div>
        <div id="metric-absence" class="text-lg font-bold text-purple-700">—</div>
      </div>
      <div class="bg-rose-50 p-2.5 rounded-xl border border-rose-200/80 text-center">
        <div class="text-[11px] text-rose-700 font-medium">Не пришли</div>
        <div id="metric-not-entered" class="text-lg font-bold text-rose-700">—</div>
      </div>
      <div class="bg-slate-200/70 p-2.5 rounded-xl border border-slate-300 text-center">
        <div class="text-[11px] text-slate-600 font-medium">Исключения</div>
        <div id="metric-excluded" class="text-lg font-bold text-slate-700">—</div>
      </div>
    </div>

    <!-- Панель управления и фильтрации -->
    <div class="p-4 border-b border-slate-200 flex flex-wrap items-center justify-between gap-3 bg-white">
      <!-- Табы статусов -->
      <div class="flex items-center space-x-1 overflow-x-auto bg-slate-100 p-1 rounded-xl text-xs font-semibold">
        <button class="presence-tab-btn px-3 py-1.5 rounded-lg bg-white shadow-xs text-slate-800" data-tab="ALL">Все (<span id="tab-cnt-all">0</span>)</button>
        <button class="presence-tab-btn px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900" data-tab="INSIDE">В здании (<span id="tab-cnt-inside">0</span>)</button>
        <button class="presence-tab-btn px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900" data-tab="OUTSIDE">Вышли (<span id="tab-cnt-outside">0</span>)</button>
        <button class="presence-tab-btn px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900" data-tab="REMOTE">Удаленка (<span id="tab-cnt-remote">0</span>)</button>
        <button class="presence-tab-btn px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900" data-tab="ABSENCE">Отсутствуют (<span id="tab-cnt-absence">0</span>)</button>
        <button class="presence-tab-btn px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900" data-tab="NOT_ENTERED">Не пришли (<span id="tab-cnt-not-entered">0</span>)</button>
        <button class="presence-tab-btn px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900" data-tab="EXCLUDED">Исключения (<span id="tab-cnt-excluded">0</span>)</button>
      </div>

      <!-- Поиск по ФИО и фильтр отдела -->
      <div class="flex items-center space-x-2 w-full sm:w-auto">
        <input type="text" id="presence-search-input" placeholder="🔍 Поиск сотрудника..." class="text-xs px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg w-48 focus:outline-emerald-500 focus:bg-white">
        <select id="presence-dept-filter" class="text-xs px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg max-w-[180px] focus:outline-emerald-500">
          <option value="ALL">Все подразделения</option>
        </select>
      </div>
    </div>

    <!-- Таблица сотрудников -->
    <div class="flex-1 overflow-y-auto p-4">
      <table class="w-full text-left text-xs border-collapse">
        <thead class="sticky top-0 bg-slate-50 border-b border-slate-200 text-slate-500 uppercase tracking-wider">
          <tr>
            <th class="py-2.5 px-3 font-semibold">Сотрудник</th>
            <th class="py-2.5 px-3 font-semibold">Отдел</th>
            <th class="py-2.5 px-3 font-semibold">Должность</th>
            <th class="py-2.5 px-3 font-semibold text-center">Статус</th>
            <th class="py-2.5 px-3 font-semibold text-center">Отметка</th>
          </tr>
        </thead>
        <tbody id="presence-table-body" class="divide-y divide-slate-100">
          <tr>
            <td colspan="5" class="py-8 text-center text-slate-400">Загрузка данных...</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</div>