Files
ACORE/templates/pages/chat.html
T
lokses c3f56f8a3e Portal redesign from template, real-data pages, test suite, Celery config
- templates: new shell from ACORE-template (mobile sidebar + bottom nav,
  themes, wallpaper, user dropdown), Django-ized nav with push-url;
  login rebranding; ACORE-template/ gitignored
- new pages wired to real data: databases (Directory types/counts),
  it-support (Ticket create form + my tickets), dashboard (live counters),
  structure (departments with head heuristic + pharmacy staffing status);
  static mockups for news/tasks/email/chat/purchases/hr-portal/help
- tests: 57 tests — ad_connector (ldap3 MOCK_SYNC client, sync scenarios,
  signals, mapping page), mattermost_connector (sync on mocks, bare-except
  regression), core (pages smoke, tickets, directories, tree rebuild)
- celery: add missing acore/celery.py app + CELERY_* settings (broker from
  env, eager mode without broker locally); wrap signal .delay calls so an
  unreachable broker no longer breaks employee saves

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-02 22:41:46 +03:00

150 lines
14 KiB
HTML

<div class="page-content">
<div style="margin-bottom:1.5rem;">
<h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">Чат</h1>
<p style="font-size:0.875rem; color:var(--color-muted-foreground); margin-top:0.25rem;">Внутрішній корпоративний месенджер</p>
</div>
<div style="display:grid; grid-template-columns:260px 1fr; gap:1.25rem; height:calc(100vh - 12rem); max-height:600px;">
<!-- Список чатів -->
<div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); box-shadow:0 1px 2px rgb(0 0 0/0.05); display:flex; flex-direction:column; overflow:hidden;">
<div style="padding:0.75rem; border-bottom:1px solid var(--color-border);">
<input type="text" placeholder="Пошук чатів..." class="input" style="width:100%;">
</div>
<div style="overflow-y:auto; flex:1;">
<div style="padding:0.5rem 0.625rem; border-bottom:1px solid var(--color-border); display:flex; gap:0.625rem; align-items:center; background:hsl(0 72% 44% / 0.06); cursor:pointer;">
<div style="width:2.25rem; height:2.25rem; border-radius:50%; background:hsl(205 80% 55% / 0.15); color:hsl(205 80% 45%); display:flex; align-items:center; justify-content:center; font-size:0.6875rem; font-weight:700; flex-shrink:0;">IT</div>
<div style="flex:1; min-width:0;">
<div style="display:flex; justify-content:space-between;">
<span style="font-size:0.8125rem; font-weight:600; color:var(--color-foreground);">#it-відділ</span>
<span style="font-size:0.6875rem; color:var(--color-muted-foreground);">10:22</span>
</div>
<p style="font-size:0.75rem; color:var(--color-muted-foreground); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">Оновлення системи заплановано...</p>
</div>
<span style="background:var(--color-primary); color:white; border-radius:999px; font-size:0.625rem; font-weight:700; padding:0.0625rem 0.375rem; flex-shrink:0;">3</span>
</div>
<div style="padding:0.5rem 0.625rem; border-bottom:1px solid var(--color-border); display:flex; gap:0.625rem; align-items:center; cursor:pointer;" onmouseover="this.style.background='var(--color-muted)'" onmouseout="this.style.background=''">
<div style="width:2.25rem; height:2.25rem; border-radius:50%; background:hsl(152 55% 45% / 0.12); color:hsl(152 55% 35%); display:flex; align-items:center; justify-content:center; font-size:0.6875rem; font-weight:700; flex-shrink:0;">HR</div>
<div style="flex:1; min-width:0;">
<div style="display:flex; justify-content:space-between;">
<span style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">#hr-загальний</span>
<span style="font-size:0.6875rem; color:var(--color-muted-foreground);">Вчора</span>
</div>
<p style="font-size:0.75rem; color:var(--color-muted-foreground); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">Нові інструкції з охорони праці...</p>
</div>
</div>
<div style="padding:0.5rem 0.625rem; border-bottom:1px solid var(--color-border); display:flex; gap:0.625rem; align-items:center; cursor:pointer;" onmouseover="this.style.background='var(--color-muted)'" onmouseout="this.style.background=''">
<div style="width:2.25rem; height:2.25rem; border-radius:50%; background:hsl(270 60% 55% / 0.12); color:hsl(270 60% 42%); display:flex; align-items:center; justify-content:center; font-size:0.6875rem; font-weight:700; flex-shrink:0;">МП</div>
<div style="flex:1; min-width:0;">
<div style="display:flex; justify-content:space-between;">
<span style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">Марія Петренко</span>
<span style="font-size:0.6875rem; color:var(--color-muted-foreground);">07.04</span>
</div>
<p style="font-size:0.75rem; color:var(--color-muted-foreground); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">Дякую! Побачимось завтра.</p>
</div>
</div>
<div style="padding:0.5rem 0.625rem; border-bottom:1px solid var(--color-border); display:flex; gap:0.625rem; align-items:center; cursor:pointer;" onmouseover="this.style.background='var(--color-muted)'" onmouseout="this.style.background=''">
<div style="width:2.25rem; height:2.25rem; border-radius:50%; background:hsl(38 92% 50% / 0.12); color:hsl(38 80% 35%); display:flex; align-items:center; justify-content:center; font-size:0.6875rem; font-weight:700; flex-shrink:0;">РО</div>
<div style="flex:1; min-width:0;">
<div style="display:flex; justify-content:space-between;">
<span style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">#розробка</span>
<span style="font-size:0.6875rem; color:var(--color-muted-foreground);">05.04</span>
</div>
<p style="font-size:0.75rem; color:var(--color-muted-foreground); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">Виправлено баг у формі звітності</p>
</div>
</div>
<div style="padding:0.5rem 0.625rem; display:flex; gap:0.625rem; align-items:center; cursor:pointer;" onmouseover="this.style.background='var(--color-muted)'" onmouseout="this.style.background=''">
<div style="width:2.25rem; height:2.25rem; border-radius:50%; background:hsl(0 72% 44% / 0.1); color:hsl(0 72% 38%); display:flex; align-items:center; justify-content:center; font-size:0.6875rem; font-weight:700; flex-shrink:0;">ЗА</div>
<div style="flex:1; min-width:0;">
<div style="display:flex; justify-content:space-between;">
<span style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">#загальний</span>
<span style="font-size:0.6875rem; color:var(--color-muted-foreground);">03.04</span>
</div>
<p style="font-size:0.75rem; color:var(--color-muted-foreground); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">Вітаємо нових співробітників!</p>
</div>
</div>
</div>
</div>
<!-- Вікно чату -->
<div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); box-shadow:0 1px 2px rgb(0 0 0/0.05); display:flex; flex-direction:column; overflow:hidden;">
<!-- Заголовок -->
<div style="padding:0.875rem 1.25rem; border-bottom:1px solid var(--color-border); display:flex; align-items:center; gap:0.75rem;">
<div style="width:2rem; height:2rem; border-radius:50%; background:hsl(205 80% 55% / 0.15); color:hsl(205 80% 45%); display:flex; align-items:center; justify-content:center; font-size:0.6875rem; font-weight:700;">#IT</div>
<div>
<div style="font-size:0.875rem; font-weight:600; color:var(--color-foreground);">#it-відділ</div>
<div style="font-size:0.75rem; color:var(--color-muted-foreground);">8 учасників</div>
</div>
</div>
<!-- Повідомлення -->
<div style="flex:1; overflow-y:auto; padding:1.25rem; display:flex; flex-direction:column; gap:1rem;">
<div style="display:flex; gap:0.625rem; align-items:flex-start;">
<div style="width:2rem; height:2rem; border-radius:50%; background:hsl(205 80% 55% / 0.15); color:hsl(205 80% 45%); display:flex; align-items:center; justify-content:center; font-size:0.625rem; font-weight:700; flex-shrink:0;">СМ</div>
<div>
<div style="display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.25rem;">
<span style="font-size:0.8125rem; font-weight:600; color:var(--color-foreground);">Сергій Мороз</span>
<span style="font-size:0.6875rem; color:var(--color-muted-foreground);">09:30</span>
</div>
<div style="background:var(--color-muted); border-radius:0 0.75rem 0.75rem 0.75rem; padding:0.625rem 0.875rem; font-size:0.8125rem; color:var(--color-foreground); max-width:28rem;">Колеги, нагадую про заплановане технічне обслуговування 10 квітня з 18:00 до 20:00. Система буде недоступна.</div>
</div>
</div>
<div style="display:flex; gap:0.625rem; align-items:flex-start;">
<div style="width:2rem; height:2rem; border-radius:50%; background:hsl(152 55% 45% / 0.12); color:hsl(152 55% 35%); display:flex; align-items:center; justify-content:center; font-size:0.625rem; font-weight:700; flex-shrink:0;">ОТ</div>
<div>
<div style="display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.25rem;">
<span style="font-size:0.8125rem; font-weight:600; color:var(--color-foreground);">Олексій Ткаченко</span>
<span style="font-size:0.6875rem; color:var(--color-muted-foreground);">09:45</span>
</div>
<div style="background:var(--color-muted); border-radius:0 0.75rem 0.75rem 0.75rem; padding:0.625rem 0.875rem; font-size:0.8125rem; color:var(--color-foreground); max-width:28rem;">Зрозумів, дякую за попередження!</div>
</div>
</div>
<div style="display:flex; gap:0.625rem; align-items:flex-start; flex-direction:row-reverse;">
<div style="width:2rem; height:2rem; border-radius:50%; background:var(--color-accent); color:var(--color-accent-foreground); display:flex; align-items:center; justify-content:center; font-size:0.625rem; font-weight:700; flex-shrink:0;">ІК</div>
<div style="align-items:flex-end; display:flex; flex-direction:column;">
<div style="display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.25rem; flex-direction:row-reverse;">
<span style="font-size:0.8125rem; font-weight:600; color:var(--color-foreground);">Ви</span>
<span style="font-size:0.6875rem; color:var(--color-muted-foreground);">10:05</span>
</div>
<div style="background:var(--color-primary); color:white; border-radius:0.75rem 0 0.75rem 0.75rem; padding:0.625rem 0.875rem; font-size:0.8125rem; max-width:28rem;">Добре, врахую. Чи є резервний доступ до критичних систем в цей час?</div>
</div>
</div>
<div style="display:flex; gap:0.625rem; align-items:flex-start;">
<div style="width:2rem; height:2rem; border-radius:50%; background:hsl(205 80% 55% / 0.15); color:hsl(205 80% 45%); display:flex; align-items:center; justify-content:center; font-size:0.625rem; font-weight:700; flex-shrink:0;">СМ</div>
<div>
<div style="display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.25rem;">
<span style="font-size:0.8125rem; font-weight:600; color:var(--color-foreground);">Сергій Мороз</span>
<span style="font-size:0.6875rem; color:var(--color-muted-foreground);">10:22</span>
</div>
<div style="background:var(--color-muted); border-radius:0 0.75rem 0.75rem 0.75rem; padding:0.625rem 0.875rem; font-size:0.8125rem; color:var(--color-foreground); max-width:28rem;">Так, резервний доступ до 1С та складського обліку буде активований. Деталі надішлю окремо.</div>
</div>
</div>
</div>
<!-- Поле введення -->
<div style="padding:0.875rem 1.25rem; border-top:1px solid var(--color-border); display:flex; gap:0.75rem; align-items:flex-end;">
<textarea placeholder="Написати повідомлення..."
style="flex:1; min-height:2.5rem; max-height:8rem; resize:none; background:var(--color-muted); border:1px solid var(--color-input); border-radius:0.625rem; padding:0.5rem 0.875rem; font-size:0.875rem; color:var(--color-foreground); font-family:var(--font-sans); outline:none; transition:border-color 150ms; box-sizing:border-box;"
onfocus="this.style.borderColor='var(--color-ring)'" onblur="this.style.borderColor=''"></textarea>
<button class="btn btn-primary btn-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>
</button>
</div>
</div>
</div>
</div>