100 lines
4.0 KiB
HTML
100 lines
4.0 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static humanize %}
|
|
{% load custom_filters %}
|
|
{% block title %}{{ _("Opportunities") }}{% endblock title %}
|
|
{% block content %}
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<h2 class="mb-3">{{ _("Opportunities") }}</h2>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
|
|
<!-- Filter Controls -->
|
|
<div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center gap-3 w-100" id="filter-container">
|
|
<!-- Search Input - Wider and properly aligned -->
|
|
<div class="position-relative flex-grow-1" style="min-width: 300px;">
|
|
<span class="fas fa-search position-absolute top-50 translate-middle-y ms-3 text-body-tertiary"></span>
|
|
<input
|
|
class="form-control ps-6"
|
|
type="text"
|
|
placeholder="{% trans 'Search opportunities...' %}"
|
|
name="search"
|
|
hx-get="{% url 'opportunity_list' %}"
|
|
hx-trigger="keyup changed delay:500ms"
|
|
hx-target="#opportunities-grid"
|
|
hx-select="#opportunities-grid"
|
|
hx-include="#filter-container select"
|
|
hx-swap="outerHTML"
|
|
style="width: 100%;"
|
|
>
|
|
</div>
|
|
|
|
<!-- Filter Dropdowns - Aligned in a row -->
|
|
<div class="d-flex flex-column flex-sm-row gap-3 w-100" style="max-width: 500px;">
|
|
<!-- Stage Filter -->
|
|
<div class="flex-grow-1">
|
|
<select
|
|
class="form-select"
|
|
name="stage"
|
|
hx-get="{% url 'opportunity_list' %}"
|
|
hx-trigger="change"
|
|
hx-target="#opportunities-grid"
|
|
hx-select="#opportunities-grid"
|
|
hx-swap="outerHTML"
|
|
hx-include="#filter-container input, #filter-container select"
|
|
>
|
|
<option value="">{% trans "All Stages" %}</option>
|
|
{% for value, label in stage_choices %}
|
|
<option value="{{ value }}" {% if request.GET.stage == value %}selected{% endif %}>
|
|
{{ label }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Sort Filter -->
|
|
<div class="flex-grow-1">
|
|
<select
|
|
class="form-select"
|
|
name="sort"
|
|
hx-get="{% url 'opportunity_list' %}"
|
|
hx-trigger="change"
|
|
hx-target="#opportunities-grid"
|
|
hx-select="#opportunities-grid"
|
|
hx-swap="outerHTML"
|
|
hx-include="#filter-container input, #filter-container select"
|
|
>
|
|
<option value="newest" {% if request.GET.sort == 'newest' %}selected{% endif %}>
|
|
{% trans "Newest First" %}
|
|
</option>
|
|
<option value="highest" {% if request.GET.sort == 'highest' %}selected{% endif %}>
|
|
{% trans "Highest Value" %}
|
|
</option>
|
|
<option value="closing" {% if request.GET.sort == 'closing' %}selected{% endif %}>
|
|
{% trans "Earliest Close Date" %}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end">
|
|
<a class="btn btn-phoenix-primary btn-sm" href="{% url 'opportunity_create' %}">
|
|
<span class="fas fa-plus me-2"></span>{{ _("Add Opportunity") }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="opportunities-grid" class="row g-4 px-2 px-lg-4 mt-1">
|
|
{% include 'crm/opportunities/partials/opportunity_grid.html' %}
|
|
</div>
|
|
<div class="d-flex justify-content-end mt-3">
|
|
<div class="d-flex">
|
|
{% if is_paginated %}
|
|
{% include 'partials/pagination.html' %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock %} |