38086-vm/core/templates/core/inventory.html

{% extends 'base.html' %}
{% load i18n static %}

{% block title %}{% trans "Inventory Management" %} | Meezan Accounting{% endblock %}

{% block content %}
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-1">{% trans "Inventory Management" %}</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'index' %}">{% trans "Dashboard" %}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{% trans "Inventory" %}</li>
                </ol>
            </nav>
        </div>
        <button class="btn btn-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#addProductModal">
            <i class="bi bi-plus-lg me-2"></i>{% trans "Add Product" %}
        </button>
    </div>

    {% if messages %}
    <div class="mb-4">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-3" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Search & Filter Bar -->
    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-body p-3">
            <form class="row g-3">
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
                        <input type="text" class="form-control border-start-0" placeholder="{% trans 'Search by name or SKU...' %}">
                    </div>
                </div>
                <div class="col-md-4">
                    <select class="form-select">
                        <option value="">{% trans "All Categories" %}</option>
                        {% for category in categories %}
                        <option value="{{ category.id }}">{% if LANGUAGE_CODE == 'ar' %}{{ category.name_ar }}{% else %}{{ category.name_en }}{% endif %}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-light w-100">{% trans "Filter" %}</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Product Grid -->
    <div class="row g-4">
        {% for product in products %}
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="card product-card h-100 shadow-sm border-0">
                <div class="position-relative">
                    {% if product.image %}
                    <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name_en }}" style="height: 200px; object-fit: cover;">
                    {% else %}
                    <div class="bg-secondary bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
                        <i class="bi bi-box-seam text-secondary opacity-25" style="font-size: 4rem;"></i>
                    </div>
                    {% endif %}
                    <span class="position-absolute top-0 end-0 m-3 badge {% if product.stock_quantity < 5 %}bg-danger{% else %}bg-success{% endif %}">
                        {% trans "In Stock" %}: {{ product.stock_quantity }}
                    </span>
                </div>
                <div class="card-body">
                    <div class="text-muted small mb-1">
                        {% if LANGUAGE_CODE == 'ar' %}{{ product.category.name_ar }}{% else %}{{ product.category.name_en }}{% endif %}
                    </div>
                    <h5 class="card-title fw-bold mb-2">
                        {% if LANGUAGE_CODE == 'ar' %}{{ product.name_ar }}{% else %}{{ product.name_en }}{% endif %}
                    </h5>
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <h4 class="text-primary fw-bold mb-0">{{ site_settings.currency_symbol }}{{ product.price }}</h4>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-light text-dark"><i class="bi bi-pencil"></i></button>
                            <button class="btn btn-sm btn-outline-light text-dark"><i class="bi bi-eye"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <div class="bg-white rounded-4 p-5 shadow-sm">
                <i class="bi bi-box-seam text-muted opacity-25" style="font-size: 5rem;"></i>
                <h4 class="mt-3 text-muted">{% trans "Your inventory is empty" %}</h4>
                <p class="text-muted">{% trans "Start by adding your first product to the system." %}</p>
                <button class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#addProductModal">
                    {% trans "Add First Product" %}
                </button>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Add Product Modal -->
<div class="modal fade" id="addProductModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold">{% trans "Add New Product" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{% url 'add_product' %}" method="POST">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-bold">{% trans "Name (English)" %}</label>
                            <input type="text" name="name_en" class="form-control rounded-3" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold">{% trans "Name (Arabic)" %}</label>
                            <input type="text" name="name_ar" class="form-control rounded-3" dir="rtl" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold">{% trans "Category" %}</label>
                            <select name="category" class="form-select rounded-3" required>
                                <option value="">{% trans "Select Category" %}</option>
                                {% for category in categories %}
                                <option value="{{ category.id }}">{% if LANGUAGE_CODE == 'ar' %}{{ category.name_ar }}{% else %}{{ category.name_en }}{% endif %}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold">{% trans "SKU" %}</label>
                            <input type="text" name="sku" class="form-control rounded-3" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold">{% trans "Price" %}</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0">{{ site_settings.currency_symbol }}</span>
                                <input type="number" step="0.01" name="price" class="form-control rounded-3 border-start-0" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold">{% trans "Initial Stock" %}</label>
                            <input type="number" name="stock" class="form-control rounded-3" value="0" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="submit" class="btn btn-primary rounded-3 px-4">{% trans "Save Product" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}