c3f56f8a3e
- 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>
150 lines
14 KiB
HTML
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>
|