ACORE/templates/pages/structure.html

{% load common_tags %}
{% load i18n %}
<div class="page-content">

    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem;">
        <div>
            <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">{% trans "Структура" %}</h1>
            <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin-top:0.25rem;">{{ departments|length }} відділів · {{ office_count }} співробітників офісу</p>
        </div>
        {% if request.user.is_staff %}
        <div style="display:flex; gap:0.5rem;">
            <a href="/admin/core/directory/add/" class="btn btn-primary" style="text-decoration:none;">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="12" x2="12" y1="5" y2="19"/><line x1="5" x2="19" y1="12" y2="12"/>
                </svg>
                Додати відділ
            </a>
        </div>
        {% endif %}
    </div>

    <!-- Сводка -->
    <div style="display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0.75rem; margin-bottom:1.5rem;">
        <div class="stat-card" style="padding:1rem 1.25rem;">
            <div style="font-size:0.6875rem; color:var(--color-muted-foreground); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.375rem;">{% trans "Офисных сотрудников" %}</div>
            <div style="font-size:1.5rem; font-weight:500; color:var(--color-foreground);">{{ office_count }}</div>
            <div style="font-size:0.75rem; color:var(--color-muted-foreground); margin-top:0.25rem;">активних</div>
        </div>
        <div class="stat-card" style="padding:1rem 1.25rem;">
            <div style="font-size:0.6875rem; color:var(--color-muted-foreground); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.375rem;">{% trans "Отделов" %}</div>
            <div style="font-size:1.5rem; font-weight:500; color:var(--color-foreground);">{{ departments|length }}</div>
            <div style="font-size:0.75rem; color:var(--color-muted-foreground); margin-top:0.25rem;">активних у довіднику</div>
        </div>
        <div class="stat-card" style="padding:1rem 1.25rem;">
            <div style="font-size:0.6875rem; color:var(--color-muted-foreground); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.375rem;">{% trans "Без отдела" %}</div>
            <div style="font-size:1.5rem; font-weight:500; color:var(--color-foreground);">{{ office_no_dept }}</div>
            {% if office_no_dept %}
            <div style="font-size:0.75rem; color:var(--color-warning); margin-top:0.25rem;">потребують призначення</div>
            {% else %}
            <div style="font-size:0.75rem; color:var(--color-success); margin-top:0.25rem;">всі розподілені</div>
            {% endif %}
        </div>
        <div class="stat-card" style="padding:1rem 1.25rem;">
            <div style="font-size:0.6875rem; color:var(--color-muted-foreground); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.375rem;">{% trans "Аптечных сотрудников" %}</div>
            <div style="font-size:1.5rem; font-weight:500; color:var(--color-foreground);">{{ pharmacy_employees_count }}</div>
            <a href="/dislocation/" hx-get="/dislocation/" hx-target="#main-content" hx-push-url="/dislocation/" hx-indicator="#loader" style="font-size:0.75rem; color:var(--color-primary); text-decoration:none; margin-top:0.25rem; display:inline-block;">на Дислокації →</a>
        </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);">
        <div style="padding:1.25rem 1.5rem; border-bottom:1px solid var(--color-border);">
            <h3 style="font-weight:600; color:var(--color-card-foreground); font-size:0.9375rem;">{% trans "Офисные отделы" %}</h3>
        </div>
        <div style="overflow-x:auto;">
            <table style="width:100%; border-collapse:collapse; font-size:0.875rem;">
                <thead>
                    <tr style="border-bottom:1px solid var(--color-border);">
                        <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600; font-size:0.8125rem;">{% trans "Отдел" %}</th>
                        <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600; font-size:0.8125rem;">{% trans "Руководитель" %}</th>
                        <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600; font-size:0.8125rem;">{% trans "Сотрудников" %}</th>
                        <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600; font-size:0.8125rem;">{% trans "Должностей" %}</th>
                        <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600; font-size:0.8125rem;">{% trans "Статус" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for dept in departments %}
                    <tr style="border-bottom:1px solid var(--color-border); transition:background 150ms;" class="tr-hover">
                        <td style="padding:1rem; vertical-align:middle;">
                            <div style="display:flex; align-items:center; gap:0.625rem; margin-left:{% widthratio dept.indent_depth 1 20 %}px;">
                                <div style="width:3px; height:2rem; border-radius:2px; background:{{ dept.color }}; flex-shrink:0;"></div>
                                <span style="font-weight:500; color:var(--color-card-foreground);">{{ dept.name }}</span>
                            </div>
                        </td>
                        <td style="padding:1rem; vertical-align:middle;">
                            {% if dept.head %}
                            <div style="display:flex; align-items:center; gap:0.5rem;">
                                <span style="width:1.5rem; height:1.5rem; border-radius:50%; background:color-mix(in srgb, var(--color-primary) 10%, transparent); color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:0.625rem; font-weight:500; flex-shrink:0;">{{ dept.head|initials }}</span>
                                <span style="color:var(--color-muted-foreground); font-size:0.8125rem;">{{ dept.head.get_full_name }}</span>
                            </div>
                            {% else %}
                            <span style="color:var(--color-muted-foreground); font-size:0.8125rem;">—</span>
                            {% endif %}
                        </td>
                        <td style="padding:1rem; vertical-align:middle; color:var(--color-foreground); font-weight:500;">{{ dept.employees_count }}</td>
                        <td style="padding:1rem; vertical-align:middle; color:var(--color-muted-foreground);">{{ dept.posts_count }}</td>
                        <td style="padding:1rem; vertical-align:middle;">
                            {% if dept.employees_count %}
                            <span class="badge badge-success">{% trans "Активный" %}</span>
                            {% else %}
                            <span class="badge badge-muted">{% trans "Пустой" %}</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="5" style="padding:2rem; text-align:center; color:var(--color-muted-foreground);">{% trans "Отделы ещё не добавлены в справочник" %}</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

</div>