140 lines
10 KiB
HTML
140 lines
10 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}
|
|
{% trans 'inventory'|capfirst %}
|
|
{% endblock %}
|
|
|
|
|
|
{% block content %}
|
|
<div class="row g-3 justify-content-between">
|
|
<div class="col-sm-12">
|
|
<div class="card border h-100 w-100 overflow-hidden">
|
|
<div class="bg-holder d-block bg-card" style="background-image:url({% static 'images/spot-illustrations/32.png' %});background-position: top right;">
|
|
</div>
|
|
<div class="d-dark-none me-5">
|
|
<div class="bg-holder d-none d-sm-block d-xl-none d-xxl-block bg-card" style="background-image:url({% static 'images/spot-illustrations/dark_21.png' %}); background-position: bottom right; background-size: auto;">
|
|
</div>
|
|
</div>
|
|
<div class="d-light-none me-5">
|
|
<div class="bg-holder d-none d-sm-block d-xl-none d-xxl-block bg-card" style="background-image:url({% static 'images/spot-illustrations/21.png' %}); background-position: bottom right; background-size: auto;">
|
|
</div>
|
|
</div>
|
|
<div class="card-body px-lg-5 position-relative">
|
|
<br>
|
|
<div class="row align-items-center g-3 g-sm-5 text-start text-sm-start">
|
|
|
|
<div class="col-12 col-sm-auto ">
|
|
<div class="avatar avatar-3xl avatar-bordered mb-3">
|
|
{% if cars.first.id_car_make.logo %}
|
|
<img class="rounded" src="{{ cars.first.id_car_make.logo.url }}" alt="">
|
|
{% else %}
|
|
<img class="rounded" src="{% static 'images/logos/car_make/sedan.svg' %}" alt="">
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-auto flex-1">
|
|
<div><h3 class="mb-2">{{ cars.first.id_car_make.get_local_name }} <span class="ms-2 text-body-tertiary fw-semibold">{{ cars.first.id_car_model.get_local_name }}</span></h3></div>
|
|
<p class="text-body-tertiary fw-semibold">{{ cars.first.id_car_serie.name }}, <span class="fs-10">{{ cars.first.id_car_trim.name }}</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 justify-content-between mt-4">
|
|
<div class="col-sm-12">
|
|
<div class="table-list" id="inventoryTable">
|
|
<div class="table-responsive scrollbar mb-3">
|
|
<table class="table table-sm fs-9 mb-0 overflow-hidden">
|
|
<thead class="text-body">
|
|
<tr>
|
|
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="stock">{% trans 'Stock'|upper %}</th>
|
|
<th class="pe-1 align-middle white-space-nowrap text-start" data-sort="vin" style="min-width: 4.5rem;">{% trans "VIN" %}</th>
|
|
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="date">{% trans "Year"|upper %}</th>
|
|
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="extColor" style="min-width: 8.5rem">{% trans 'Exterior Color'|upper %}</th>
|
|
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="intColor" style="min-width: 8.5rem">{% trans 'Interior Color'|upper %}</th>
|
|
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="location" style="min-width: 12.5rem;">{% trans "Showroom Location"|upper %}</th>
|
|
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="status">{% trans 'Status'|upper %}</th>
|
|
<th class="pe-1 align-middle white-space-nowrap text-center" data-sort="age" style="min-width: 7rem">{% trans 'Age'|upper %}</th>
|
|
<th class="no-sort align-middle white-space-nowrap text-center"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for car in cars %}
|
|
<tr>
|
|
<td class="align-middle white-space-nowrap text-center fw-bold text-body-tertiary">
|
|
{% if car.stock_type == "new" %}
|
|
<span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{_("New")}}</span></span>
|
|
{% elif car.status == "used" %}
|
|
<span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("Used")}}</span></span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="align-middle white-space-nowrap text-start"><a class="fs-9 fw-bold" href="{% url 'car_detail' car.pk %}">{{ car.vin }}</a></td>
|
|
<td class="align-middle white-space-nowrap text-center fw-bold">{{ car.year }}</td>
|
|
{% if car.colors.exists %}
|
|
<td class="align-middle white-space-nowrap text-body fs-9 text-start">
|
|
<div class="d-flex flex-column align-items-center">
|
|
<span class="color-div" style="background: linear-gradient(90deg, rgba({{ car.colors.first.exterior.rgb }},1) 10%, rgba({{ car.colors.first.exterior.rgb }},0.10) 100%);" title="{{ car.colors.first.exterior.get_local_name }}"></span><span>{{ car.colors.first.exterior.get_local_name }}</span>
|
|
</div>
|
|
</td>
|
|
<td class="align-middle white-space-nowrap text-body fs-9 text-start">
|
|
<div class="d-flex flex-column align-items-center">
|
|
<span class="color-div" style="background: linear-gradient(90deg, rgba({{ car.colors.first.interior.rgb }},1) 10%, rgba({{ car.colors.first.interior.rgb }},0.10) 100%);" title="{{ car.colors.first.interior.get_local_name }}"></span><span>{{ car.colors.first.interior.get_local_name }}</span>
|
|
</div>
|
|
</td>
|
|
{% else %}
|
|
<td class="align-middle white-space-nowrap text-body fs-9 text-center"><span class="color-div">{% trans 'No Color' %}</span></td>
|
|
<td class="align-middle white-space-nowrap text-body fs-9 text-center"><span class="color-div">{% trans 'No Color' %}</span></td>
|
|
{% endif %}
|
|
<td class="align-middle white-space-nowrap text-body fs-9 text-center">
|
|
{% if car.location.is_owner_showroom %}
|
|
{% trans 'Our Showroom' %}
|
|
{% else %}
|
|
{{ car.location.showroom.get_local_name }}
|
|
{% endif %}
|
|
</td>
|
|
<td class="status align-middle white-space-nowrap text-center fw-bold text-body-tertiary">
|
|
{% if car.status == "available" %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="badge-label">{{_("Available")}}</span><span class="ms-1" data-feather="check" style="height:13px;width:13px;"></span></span>
|
|
{% elif car.status == "sold" %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-primary"><span class="badge-label">{{_("Sold")}}</span><span class="ms-1" data-feather="package" style="height:13px;width:13px;"></span></span>
|
|
{% elif car.status == "hold" %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="badge-label">{{ _("Hold") }}</span><span class="ms-1" data-feather="alert-octagon" style="height:13px;width:13px;"></span></span>
|
|
{% elif car.status == "reserved" %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-danger"><span class="badge-label">{{ _("Reserved") }}</span><span class="ms-1" data-feather="info" style="height:13px;width:13px;"></span></span>
|
|
{% elif car.status == "damaged" %}
|
|
<span class="badge badge-phoenix fs-10 badge-phoenix-secondary"><span class="badge-label">{{ _("Damaged") }}</span><span class="ms-1" data-feather="x" style="height:13px;width:13px;"></span></span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-start">
|
|
<span class="fw-light">{{ car.receiving_date|timesince }}</span>
|
|
</td>
|
|
<td class="align-middle white-space-nowrap text-end pe-0 ps-4">
|
|
<div class="btn-reveal-trigger position-static">
|
|
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
|
|
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="{% url 'car_detail' car.pk %}">{% trans "view"|capfirst %}</a>
|
|
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="7" class="d-flex flex-column align-items-center">
|
|
<p class="text-muted">{% trans "No cars available." %}</p>
|
|
<a href="{% url 'add_car' %}" class="btn btn-primary">{% trans "Add a Car" %}</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- Pagination -->
|
|
{% if is_paginated %}
|
|
{% include 'partials/pagination.html' %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock %} |