666 lines
47 KiB
HTML
666 lines
47 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}{% trans "Stock Management" %} | {{ site_settings.business_name }}{% 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 "Stock 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 "Stock" %}</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<div class="btn-group">
|
|
<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 Item" %}
|
|
</button>
|
|
<button class="btn btn-outline-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
|
|
<i class="bi bi-folder-plus me-2"></i>{% trans "Add Category" %}
|
|
</button>
|
|
<button class="btn btn-outline-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#addUnitModal">
|
|
<i class="bi bi-rulers me-2"></i>{% trans "Add Unit" %}
|
|
</button>
|
|
</div>
|
|
</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="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Tabs for Stock Management -->
|
|
<ul class="nav nav-pills mb-4 bg-white p-2 rounded-4 shadow-sm" id="stockTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active px-4 rounded-3" id="items-tab" data-bs-toggle="tab" data-bs-target="#items" type="button" role="tab">
|
|
<i class="bi bi-box-seam me-2"></i>{% trans "Items" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link px-4 rounded-3" id="categories-tab" data-bs-toggle="tab" data-bs-target="#categories-list" type="button" role="tab">
|
|
<i class="bi bi-folder me-2"></i>{% trans "Categories" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link px-4 rounded-3" id="units-tab" data-bs-toggle="tab" data-bs-target="#units-list" type="button" role="tab">
|
|
<i class="bi bi-rulers me-2"></i>{% trans "Units" %}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="stockTabsContent">
|
|
<!-- Items Tab -->
|
|
<div class="tab-pane fade show active" id="items" role="tabpanel">
|
|
<!-- 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 Table (Grid) -->
|
|
<div class="card border-0 shadow-sm rounded-4">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th class="ps-4">{% trans "Item" %}</th>
|
|
<th>{% trans "SKU/Barcode" %}</th>
|
|
<th>{% trans "Category" %}</th>
|
|
<th>{% trans "Stock" %}</th>
|
|
<th>{% trans "Cost" %}</th>
|
|
<th>{% trans "Price" %}</th>
|
|
<th>{% trans "Status" %}</th>
|
|
<th class="text-end pe-4">{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for product in products %}
|
|
<tr class="{% if not product.is_active %}opacity-50{% endif %}">
|
|
<td class="ps-4">
|
|
<div class="d-flex align-items-center">
|
|
{% if product.image %}
|
|
<img src="{{ product.image.url }}" class="rounded-2 me-3" alt="" style="width: 40px; height: 40px; object-fit: cover;">
|
|
{% else %}
|
|
<div class="bg-light rounded-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
|
|
<i class="bi bi-box-seam text-muted"></i>
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<div class="fw-bold text-dark">{% if LANGUAGE_CODE == 'ar' %}{{ product.name_ar }}{% else %}{{ product.name_en }}{% endif %}</div>
|
|
<small class="text-muted">{{ product.unit.name_en|default:"" }}</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td><code>{{ product.sku }}</code></td>
|
|
<td>{% if LANGUAGE_CODE == 'ar' %}{{ product.category.name_ar }}{% else %}{{ product.category.name_en }}{% endif %}</td>
|
|
<td>
|
|
<span class="badge {% if product.stock_quantity < 5 %}bg-danger{% else %}bg-success-subtle text-success{% endif %} rounded-pill">
|
|
{{ product.stock_quantity }} {{ product.unit.short_name|default:"" }}
|
|
</span>
|
|
</td>
|
|
<td>{{ site_settings.currency_symbol }}{{ product.cost_price|floatformat:3 }}</td>
|
|
<td class="fw-bold text-primary">{{ site_settings.currency_symbol }}{{ product.price|floatformat:3 }}</td>
|
|
<td>
|
|
{% if product.is_active %}
|
|
<span class="badge bg-success-subtle text-success border-success-subtle">{% trans "Active" %}</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary-subtle text-secondary">{% trans "Inactive" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="text-end pe-4">
|
|
<div class="btn-group">
|
|
<button class="btn btn-sm btn-light rounded-pill px-2 me-1" data-bs-toggle="modal" data-bs-target="#viewProductModal{{ product.id }}" title="{% trans 'View' %}">
|
|
<i class="bi bi-eye text-primary"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-light rounded-pill px-2 me-1" data-bs-toggle="modal" data-bs-target="#editProductModal{{ product.id }}" title="{% trans 'Edit' %}">
|
|
<i class="bi bi-pencil text-success"></i>
|
|
</button>
|
|
<a href="{% url 'delete_product' product.id %}" class="btn btn-sm btn-light rounded-pill px-2" onclick="return confirm('{% trans 'Are you sure you want to delete this item?' %}')" title="{% trans 'Delete' %}">
|
|
<i class="bi bi-trash text-danger"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- View Product Modal -->
|
|
<div class="modal fade" id="viewProductModal{{ product.id }}" 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 "Item Details" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-4 text-center mb-3">
|
|
{% if product.image %}
|
|
<img src="{{ product.image.url }}" class="img-fluid rounded-4 shadow-sm" alt="">
|
|
{% else %}
|
|
<div class="bg-light rounded-4 d-flex align-items-center justify-content-center" style="height: 200px;">
|
|
<i class="bi bi-box-seam text-muted opacity-25" style="font-size: 4rem;"></i>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-8">
|
|
<h3 class="fw-bold mb-1">{% if LANGUAGE_CODE == 'ar' %}{{ product.name_ar }}{% else %}{{ product.name_en }}{% endif %}</h3>
|
|
<p class="text-muted mb-3">{{ product.sku }} | {% if LANGUAGE_CODE == 'ar' %}{{ product.category.name_ar }}{% else %}{{ product.category.name_en }}{% endif %}</p>
|
|
<hr>
|
|
<div class="row g-3">
|
|
<div class="col-6">
|
|
<small class="text-muted d-block">{% trans "Sale Price" %}</small>
|
|
<span class="h5 fw-bold text-primary">{{ site_settings.currency_symbol }}{{ product.price|floatformat:3 }}</span>
|
|
</div>
|
|
<div class="col-6">
|
|
<small class="text-muted d-block">{% trans "Cost Price" %}</small>
|
|
<span class="h5 fw-bold">{{ site_settings.currency_symbol }}{{ product.cost_price|floatformat:3 }}</span>
|
|
</div>
|
|
<div class="col-6">
|
|
<small class="text-muted d-block">{% trans "Stock Quantity" %}</small>
|
|
<span class="badge {% if product.stock_quantity < 5 %}bg-danger{% else %}bg-success{% endif %}">{{ product.stock_quantity }} {{ product.unit.short_name|default:"" }}</span>
|
|
</div>
|
|
<div class="col-6">
|
|
<small class="text-muted d-block">{% trans "VAT" %}</small>
|
|
<span>{{ product.vat }}%</span>
|
|
</div>
|
|
<div class="col-6">
|
|
<small class="text-muted d-block">{% trans "Supplier" %}</small>
|
|
<span>{{ product.supplier.name|default:"-" }}</span>
|
|
</div>
|
|
<div class="col-6">
|
|
<small class="text-muted d-block">{% trans "Status" %}</small>
|
|
{% if product.is_active %}<span class="text-success">{% trans "Active" %}</span>{% else %}<span class="text-danger">{% trans "Inactive" %}</span>{% endif %}
|
|
</div>
|
|
<div class="col-6">
|
|
<small class="text-muted d-block">{% trans "Entry Date" %}</small>
|
|
<span>{{ product.created_at|date:"Y-m-d H:i" }}</span>
|
|
</div>
|
|
<div class="col-6">
|
|
<small class="text-muted d-block">{% trans "Opening Stock" %}</small>
|
|
<span>{{ product.opening_stock }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Product Modal -->
|
|
<div class="modal fade" id="editProductModal{{ product.id }}" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content rounded-4 border-0 shadow">
|
|
<div class="modal-header border-0 pb-0">
|
|
<h5 class="modal-title fw-bold">{% trans "Edit Item" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form action="{% url 'edit_product' product.id %}" method="POST" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<div class="modal-body">
|
|
<div class="row g-3">
|
|
<!-- Identity Section -->
|
|
<div class="col-12"><h6 class="fw-bold text-primary mb-0 mt-2">{% trans "Basic Information" %}</h6><hr class="my-2"></div>
|
|
<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" value="{{ product.name_en }}" 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" value="{{ product.name_ar }}" dir="rtl" required>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "Barcode / SKU" %}</label>
|
|
<input type="text" name="sku" class="form-control rounded-3" value="{{ product.sku }}" required>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "Category" %}</label>
|
|
<select name="category" class="form-select rounded-3" required>
|
|
{% for category in categories %}
|
|
<option value="{{ category.id }}" {% if product.category.id == category.id %}selected{% endif %}>
|
|
{% if LANGUAGE_CODE == 'ar' %}{{ category.name_ar }}{% else %}{{ category.name_en }}{% endif %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "Unit" %}</label>
|
|
<select name="unit" class="form-select rounded-3">
|
|
<option value="">{% trans "Select Unit" %}</option>
|
|
{% for unit in units %}
|
|
<option value="{{ unit.id }}" {% if product.unit.id == unit.id %}selected{% endif %}>
|
|
{% if LANGUAGE_CODE == 'ar' %}{{ unit.name_ar }}{% else %}{{ unit.name_en }}{% endif %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold">{% trans "Supplier" %}</label>
|
|
<select name="supplier" class="form-select rounded-3">
|
|
<option value="">{% trans "Select Supplier" %}</option>
|
|
{% for supplier in suppliers %}
|
|
<option value="{{ supplier.id }}" {% if product.supplier.id == supplier.id %}selected{% endif %}>
|
|
{{ supplier.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold">{% trans "Change Picture" %}</label>
|
|
<input type="file" name="image" class="form-control rounded-3" accept="image/*">
|
|
{% if product.image %}
|
|
<small class="text-muted">{% trans "Current" %}: {{ product.image.name }}</small>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Pricing & Stock Section -->
|
|
<div class="col-12"><h6 class="fw-bold text-primary mb-0 mt-3">{% trans "Pricing & Stock" %}</h6><hr class="my-2"></div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "Cost 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.001" name="cost_price" class="form-control rounded-3 border-start-0" value="{{ product.cost_price|floatformat:3 }}" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "Sale 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.001" name="price" class="form-control rounded-3 border-start-0" value="{{ product.price|floatformat:3 }}" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "VAT (%)" %}</label>
|
|
<div class="input-group">
|
|
<input type="number" step="0.01" name="vat" class="form-control rounded-3" value="{{ product.vat|floatformat:2 }}" required>
|
|
<span class="input-group-text bg-light">%</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "Opening Stock" %}</label>
|
|
<input type="number" name="opening_stock" class="form-control rounded-3" value="{{ product.opening_stock }}" required>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "In Stock (Current)" %}</label>
|
|
<input type="number" name="stock_quantity" class="form-control rounded-3" value="{{ product.stock_quantity }}" required>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-center pt-4">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" name="is_active" id="editActiveSwitch{{ product.id }}" {% if product.is_active %}checked{% endif %}>
|
|
<label class="form-check-label fw-bold small" for="editActiveSwitch{{ product.id }}">{% trans "Active / Visible" %}</label>
|
|
</div>
|
|
</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 "Update Product" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="8" class="text-center py-5">
|
|
<i class="bi bi-box-seam text-muted opacity-25" style="font-size: 3rem;"></i>
|
|
<p class="mt-2 text-muted">{% trans "No products found." %}</p>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Categories Tab -->
|
|
<div class="tab-pane fade" id="categories-list" role="tabpanel">
|
|
<div class="card border-0 shadow-sm rounded-4">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th class="ps-4">{% trans "Category Name" %}</th>
|
|
<th>{% trans "Arabic Name" %}</th>
|
|
<th>{% trans "Slug" %}</th>
|
|
<th class="text-end pe-4">{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for category in categories %}
|
|
<tr>
|
|
<td class="ps-4 fw-bold text-dark">{{ category.name_en }}</td>
|
|
<td dir="rtl">{{ category.name_ar }}</td>
|
|
<td><code>{{ category.slug }}</code></td>
|
|
<td class="text-end pe-4">
|
|
<div class="btn-group">
|
|
<button class="btn btn-sm btn-light rounded-pill px-2 me-1" data-bs-toggle="modal" data-bs-target="#editCategoryModal{{ category.id }}" title="{% trans 'Edit' %}">
|
|
<i class="bi bi-pencil text-success"></i>
|
|
</button>
|
|
<a href="{% url 'delete_category' category.id %}" class="btn btn-sm btn-light rounded-pill px-2" onclick="return confirm('{% trans 'Are you sure you want to delete this category?' %}')" title="{% trans 'Delete' %}">
|
|
<i class="bi bi-trash text-danger"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Edit Category Modal -->
|
|
<div class="modal fade" id="editCategoryModal{{ category.id }}" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content rounded-4 border-0 shadow">
|
|
<div class="modal-header border-0 pb-0">
|
|
<h5 class="modal-title fw-bold">{% trans "Edit Category" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form action="{% url 'edit_category' category.id %}" method="POST">
|
|
{% csrf_token %}
|
|
<div class="modal-body">
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<label class="form-label small fw-bold">{% trans "Name (English)" %}</label>
|
|
<input type="text" name="name_en" class="form-control rounded-3" value="{{ category.name_en }}" required>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label small fw-bold">{% trans "Name (Arabic)" %}</label>
|
|
<input type="text" name="name_ar" class="form-control rounded-3" value="{{ category.name_ar }}" dir="rtl" 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 "Update Category" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="4" class="text-center py-4 text-muted">{% trans "No categories found." %}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Units Tab -->
|
|
<div class="tab-pane fade" id="units-list" role="tabpanel">
|
|
<div class="card border-0 shadow-sm rounded-4">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th class="ps-4">{% trans "Unit Name" %}</th>
|
|
<th>{% trans "Arabic Name" %}</th>
|
|
<th>{% trans "Short Name" %}</th>
|
|
<th class="text-end pe-4">{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for unit in units %}
|
|
<tr>
|
|
<td class="ps-4 fw-bold text-dark">{{ unit.name_en }}</td>
|
|
<td dir="rtl">{{ unit.name_ar }}</td>
|
|
<td><span class="badge bg-light text-dark border">{{ unit.short_name }}</span></td>
|
|
<td class="text-end pe-4">
|
|
<div class="btn-group">
|
|
<button class="btn btn-sm btn-light rounded-pill px-2 me-1" data-bs-toggle="modal" data-bs-target="#editUnitModal{{ unit.id }}" title="{% trans 'Edit' %}">
|
|
<i class="bi bi-pencil text-success"></i>
|
|
</button>
|
|
<a href="{% url 'delete_unit' unit.id %}" class="btn btn-sm btn-light rounded-pill px-2" onclick="return confirm('{% trans 'Are you sure you want to delete this unit?' %}')" title="{% trans 'Delete' %}">
|
|
<i class="bi bi-trash text-danger"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Edit Unit Modal -->
|
|
<div class="modal fade" id="editUnitModal{{ unit.id }}" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content rounded-4 border-0 shadow">
|
|
<div class="modal-header border-0 pb-0">
|
|
<h5 class="modal-title fw-bold">{% trans "Edit Unit" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form action="{% url 'edit_unit' unit.id %}" method="POST">
|
|
{% csrf_token %}
|
|
<div class="modal-body">
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<label class="form-label small fw-bold">{% trans "Name (English)" %}</label>
|
|
<input type="text" name="name_en" class="form-control rounded-3" value="{{ unit.name_en }}" required>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label small fw-bold">{% trans "Name (Arabic)" %}</label>
|
|
<input type="text" name="name_ar" class="form-control rounded-3" value="{{ unit.name_ar }}" dir="rtl" required>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label small fw-bold">{% trans "Short Name" %}</label>
|
|
<input type="text" name="short_name" class="form-control rounded-3" value="{{ unit.short_name }}" 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 "Update Unit" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="4" class="text-center py-4 text-muted">{% trans "No units found." %}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Product Modal -->
|
|
<div class="modal fade" id="addProductModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<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 Item" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form action="{% url 'add_product' %}" method="POST" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<div class="modal-body">
|
|
<div class="row g-3">
|
|
<!-- Identity Section -->
|
|
<div class="col-12"><h6 class="fw-bold text-primary mb-0 mt-2">{% trans "Basic Information" %}</h6><hr class="my-2"></div>
|
|
<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-4">
|
|
<label class="form-label small fw-bold">{% trans "Barcode / SKU" %}</label>
|
|
<input type="text" name="sku" class="form-control rounded-3" required>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<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-4">
|
|
<label class="form-label small fw-bold">{% trans "Unit" %}</label>
|
|
<select name="unit" class="form-select rounded-3">
|
|
<option value="">{% trans "Select Unit" %}</option>
|
|
{% for unit in units %}
|
|
<option value="{{ unit.id }}">{% if LANGUAGE_CODE == 'ar' %}{{ unit.name_ar }}{% else %}{{ unit.name_en }}{% endif %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold">{% trans "Supplier" %}</label>
|
|
<select name="supplier" class="form-select rounded-3">
|
|
<option value="">{% trans "Select Supplier" %}</option>
|
|
{% for supplier in suppliers %}
|
|
<option value="{{ supplier.id }}">{{ supplier.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold">{% trans "Product Picture" %}</label>
|
|
<input type="file" name="image" class="form-control rounded-3" accept="image/*">
|
|
</div>
|
|
|
|
<!-- Pricing & Stock Section -->
|
|
<div class="col-12"><h6 class="fw-bold text-primary mb-0 mt-3">{% trans "Pricing & Stock" %}</h6><hr class="my-2"></div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "Cost 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.001" name="cost_price" class="form-control rounded-3 border-start-0" value="0.000" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "Sale 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.001" name="price" class="form-control rounded-3 border-start-0" value="0.000" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "VAT (%)" %}</label>
|
|
<div class="input-group">
|
|
<input type="number" step="0.01" name="vat" class="form-control rounded-3" value="0.00" required>
|
|
<span class="input-group-text bg-light">%</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "Opening Stock" %}</label>
|
|
<input type="number" name="opening_stock" class="form-control rounded-3" value="0" required>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small fw-bold">{% trans "In Stock (Current)" %}</label>
|
|
<input type="number" name="stock_quantity" class="form-control rounded-3" value="0" required>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-center pt-4">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" name="is_active" id="isActiveSwitch" checked>
|
|
<label class="form-check-label fw-bold small" for="isActiveSwitch">{% trans "Active / Visible" %}</label>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Add Category Modal -->
|
|
<div class="modal fade" id="addCategoryModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<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 Category" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form action="{% url 'add_category' %}" method="POST">
|
|
{% csrf_token %}
|
|
<div class="modal-body">
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<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-12">
|
|
<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>
|
|
</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 Category" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Unit Modal -->
|
|
<div class="modal fade" id="addUnitModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<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 Unit" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form action="{% url 'add_unit' %}" method="POST">
|
|
{% csrf_token %}
|
|
<div class="modal-body">
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<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-12">
|
|
<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-12">
|
|
<label class="form-label small fw-bold">{% trans "Short Name (e.g., kg, pcs)" %}</label>
|
|
<input type="text" name="short_name" class="form-control rounded-3" 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 Unit" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |