octopus/myproject/inventory/templates/inventory/home.html

{% extends 'base.html' %}

{% block title %}Склад{% endblock %}

{% block content %}
<div class="container-fluid px-3 py-3">
    <!-- Компактный заголовок -->
    <div class="mb-3">
        <h4 class="mb-1">Управление складом</h4>
        <p class="text-muted small mb-0">Выберите операцию</p>
    </div>

    <!-- Основные операции -->
    <div class="mb-3">
        <h6 class="section-title">Операции</h6>
        <div class="menu-list">
            <a href="{% url 'inventory:warehouse-list' %}" class="menu-item">
                <div class="menu-icon">
                    <i class="bi bi-building"></i>
                </div>
                <span class="menu-text">Управление складами</span>
                <i class="bi bi-chevron-right menu-arrow"></i>
            </a>

            <a href="{% url 'inventory:incoming-list' %}" class="menu-item">
                <div class="menu-icon">
                    <i class="bi bi-arrow-down-square"></i>
                </div>
                <span class="menu-text">Приход товара</span>
                <i class="bi bi-chevron-right menu-arrow"></i>
            </a>

            <a href="{% url 'inventory:sale-list' %}" class="menu-item">
                <div class="menu-icon">
                    <i class="bi bi-arrow-up-square"></i>
                </div>
                <span class="menu-text">Реализация товара</span>
                <i class="bi bi-chevron-right menu-arrow"></i>
            </a>

            <a href="{% url 'inventory:inventory-list' %}" class="menu-item">
                <div class="menu-icon">
                    <i class="bi bi-clipboard-check"></i>
                </div>
                <span class="menu-text">Инвентаризация</span>
                <i class="bi bi-chevron-right menu-arrow"></i>
            </a>

            <a href="{% url 'inventory:writeoff-list' %}" class="menu-item">
                <div class="menu-icon">
                    <i class="bi bi-x-circle"></i>
                </div>
                <span class="menu-text">Списание товара</span>
                <i class="bi bi-chevron-right menu-arrow"></i>
            </a>

            <a href="{% url 'inventory:transfer-list' %}" class="menu-item">
                <div class="menu-icon">
                    <i class="bi bi-arrow-left-right"></i>
                </div>
                <span class="menu-text">Перемещение товара</span>
                <i class="bi bi-chevron-right menu-arrow"></i>
            </a>
        </div>
    </div>

    <!-- Справочная информация -->
    <div>
        <h6 class="section-title">Справочники</h6>
        <div class="menu-list">
            <a href="{% url 'inventory:stock-list' %}" class="menu-item">
                <div class="menu-icon">
                    <i class="bi bi-box-seam"></i>
                </div>
                <span class="menu-text">Остатки товаров</span>
                <i class="bi bi-chevron-right menu-arrow"></i>
            </a>

            <a href="{% url 'inventory:batch-list' %}" class="menu-item">
                <div class="menu-icon">
                    <i class="bi bi-diagram-3"></i>
                </div>
                <span class="menu-text">Партии товаров</span>
                <i class="bi bi-chevron-right menu-arrow"></i>
            </a>

            <a href="{% url 'inventory:movement-list' %}" class="menu-item">
                <div class="menu-icon">
                    <i class="bi bi-journal-check"></i>
                </div>
                <span class="menu-text">Журнал операций</span>
                <i class="bi bi-chevron-right menu-arrow"></i>
            </a>
        </div>
    </div>
</div>

<style>
/* Заголовки секций */
.section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Список меню */
.menu-list {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    overflow: hidden;
}

/* Пункты меню */
.menu-item {
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    text-decoration: none;
    color: #212529;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s ease;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item:hover {
    background-color: #f8f9fa;
    text-decoration: none;
    color: #212529;
}

/* Иконка */
.menu-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 6px;
    margin-right: 0.875rem;
    flex-shrink: 0;
    color: #495057;
    font-size: 1.125rem;
}

.menu-item:hover .menu-icon {
    background-color: #e9ecef;
    color: #212529;
}

/* Текст */
.menu-text {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Стрелка */
.menu-arrow {
    color: #adb5bd;
    font-size: 0.875rem;
    margin-left: auto;
    transition: transform 0.15s ease;
}

.menu-item:hover .menu-arrow {
    transform: translateX(3px);
    color: #6c757d;
}

/* Адаптивность */
@media (max-width: 576px) {
    .menu-item {
        padding: 0.75rem 0.875rem;
    }

    .menu-icon {
        width: 28px;
        height: 28px;
        font-size: 1rem;
        margin-right: 0.75rem;
    }

    .menu-text {
        font-size: 0.875rem;
    }
}
</style>
{% endblock %}