Major visual changes

src/genlab_bestilling/templates/genlab_bestilling/analysisorder_detail.html

@@ -33,7 +33,7 @@ <h5 class="text-2xl my-5">Contacts for Analysis Results</h5>
         {% for contact in results_contacts %}
             <li>
             {{ contact.contact_person_results }} —
-            <a href="mailto:{{ contact.contact_email_results }}" class="underline text-blue-700">
+            <a href="mailto:{{ contact.contact_email_results }}" class="underline text-primary">
                 {{ contact.contact_email_results }}
             </a>
             </li>

src/genlab_bestilling/templates/genlab_bestilling/base_filter.html

@@ -7,10 +7,18 @@ <h3 class="text-4xl mb-5">{% block page-title %}{% endblock page-title %}</h3>
     {% block page-inner %}{% endblock page-inner %}
 
     <form method="get" class="py-3 px-4 border mb-3 ">
+        <div class="mb-2">
+            <span class="text-xl">Filters</span>
+        </div>
         <div class="flex flex-wrap gap-4">
             {{ filter.form | crispy }}
-        <button class="btn custom_order_button_blue mt-6" type="submit">Search</button>
-        <a href="{{ request.path }}" class="btn custom_order_button_grey mt-6">Clear all</a>
+            <div class="flex items-center gap-2">
+                <button class="btn btn-sm custom_order_button_blue" type="submit">
+                    <i class="fa-solid fa-filter"></i>
+                    Apply filters
+                </button>
+                <a href="{{ request.path }}" class="btn btn-sm custom_order_button">Clear all</a>
+            </div>
         </div>
     </form>
 

src/staff/filters.py

@@ -14,14 +14,20 @@
     ExtractionOrder,
     ExtractionPlate,
     Marker,
-    Order,
     Sample,
     SampleMarkerAnalysis,
     Species,
 )
 from nina.models import Project
 from staff.mixins import HideStatusesByDefaultMixin
 
+CUSTOM_ORDER_STATUS_CHOICES = [
+    ("draft", "Draft"),
+    ("confirmed", "Not started"),
+    ("processing", "Processing"),
+    ("completed", "Completed"),
+]
+
 
 class StaticModelSelect2Multiple(autocomplete.ModelSelect2Multiple):
     def __init__(self, static_choices: list[tuple], *args: Any, **kwargs: Any) -> None:
@@ -62,7 +68,7 @@ class AnalysisOrderFilter(HideStatusesByDefaultMixin, filters.FilterSet):
         label="Status",
         choices=Order.OrderStatus.choices,
         widget=StaticModelSelect2Multiple(
-            static_choices=Order.OrderStatus.choices,
+            static_choices=CUSTOM_ORDER_STATUS_CHOICES,
             attrs={
                 "data-placeholder": "Filter by status",
                 "class": "border border-gray-300 rounded-lg py-2 px-4 w-full text-gray-700",  # noqa: E501
@@ -144,7 +150,7 @@ class ExtractionOrderFilter(HideStatusesByDefaultMixin, filters.FilterSet):
         label="Status",
         choices=Order.OrderStatus.choices,
         widget=StaticModelSelect2Multiple(
-            static_choices=Order.OrderStatus.choices,
+            static_choices=CUSTOM_ORDER_STATUS_CHOICES,
             attrs={
                 "data-placeholder": "Filter by status",
                 "class": "border border-gray-300 rounded-lg py-2 px-4 w-full text-gray-700",  # noqa: E501
@@ -301,7 +307,7 @@ class Meta:
 class SampleStatusWidget(forms.Select):
     def __init__(self, attrs: dict[str, Any] | None = None):
         choices = (
-            ("", "---------"),
+            ("", "Status"),
             ("marked", "Marked"),
             ("plucked", "Plucked"),
             ("isolated", "Isolated"),

src/staff/mixins.py

@@ -28,7 +28,7 @@ def render_id(
     ) -> str:
         url = record.get_absolute_staff_url()
 
-        return format_html('<a href="{}">{}</a>', url, str(record))
+        return format_html('<a href="{}" class="underline">{}</a>', url, str(record))
 
 
 def render_status_helper(status: Order.OrderStatus) -> str:

src/staff/tables.py

@@ -3,6 +3,7 @@
 from typing import Any
 
 import django_tables2 as tables
+from django.templatetags.static import static
 from django.utils.html import format_html
 from django.utils.safestring import mark_safe
 
@@ -243,9 +244,9 @@ def render_id(self, record: Any) -> str:
 
     def render_is_urgent(self, value: bool) -> str:
         if value:
-            return mark_safe(
-                "<i class='fa-solid fa-exclamation text-red-500 fa-2x' title='Urgent'></i>"  # noqa: E501
-            )
+            icon_url = static("images/exclaimation_mark.svg")
+            html = f"<img src='{icon_url}' alt='Urgent' title='Urgent' class='w-5 h-5 inline' />"
+            return mark_safe(html)  # noqa: S308
         return ""
 
     def render_is_seen(self, value: bool) -> str:

src/staff/templates/staff/analysisorder_detail.html

@@ -7,31 +7,24 @@ <h3 class="text-4xl mb-5">Order {{ object }}</h3>
     <div class="flex gap-5 mb-5"></div>
 
     <div class="flex gap-5 my-5">
-        <a class="btn custom_order_button" href="{% url 'staff:order-analysis-list' %}"><i class="fas fa-arrow-left"></i> Back</a>
-        <a class="btn custom_order_button" href="{% url 'staff:order-analysis-samples' pk=object.id %}"><i class="fa-solid fa-vial"></i> Samples</a>
-
+        {% responsible_staff_multiselect order=object %}
+        <div class="ml-auto"></div>
+        {% if object.status != object.OrderStatus.DRAFT %}
+            {% url 'staff:order-to-draft' pk=object.id as to_draft_url %}
+            {% action-button action=to_draft_url class="custom_order_button" submit_text="<i class='fa-solid fa-pen-to-square'></i> Convert to draft"|safe csrf_token=csrf_token %}
+        {% endif %}
         {% if extraction_orders|length == 1 and not extraction_has_multiple_analysis_orders %}
             <a class="btn custom_order_button_blue" href="{% url 'staff:order-extraction-detail' pk=extraction_orders.first.id %}">Go to {{ extraction_orders.first }}</a>
         {% endif %}
-
-        <div class="ml-auto"></div>
-
+        <a class="btn custom_order_button_dark_blue" href="{% url 'staff:order-analysis-samples' pk=object.id %}"><i class="fa-solid fa-vial"></i> Samples</a>
         {% if not object.is_seen %}
             <form method="post" action="{% url 'staff:mark-as-seen' pk=object.id %}">
                 {% csrf_token %}
-                <button class="btn btn-sm bg-[#DFF7CA] border-[#93AD7D] hover:bg-[#C9EBB0] hover:border-[#7F996C] active:bg-[#B5DA9C] active:border-[#6B855B] text-nowrap" style="height: auto;" type="submit">
+                <button class="btn bg-[#DFF7CA] border-[#93AD7D] hover:bg-[#C9EBB0] hover:border-[#7F996C] active:bg-[#B5DA9C] active:border-[#6B855B] text-nowrap" style="height: auto;" type="submit">
                     <p><i class="fa-solid fa-circle-check"></i> Mark as seen</p>
                 </button>
             </form>
         {% endif %}
-
-        {% if object.status != object.OrderStatus.DRAFT %}
-            {% url 'staff:order-to-draft' pk=object.id as to_draft_url %}
-            {% action-button action=to_draft_url class="custom_order_button" submit_text="<i class='fa-solid fa-pen-to-square'></i> Convert to draft"|safe csrf_token=csrf_token %}
-        {% endif %}
-    </div>
-    <div class="flex gap-5 my-5">
-        {% responsible_staff_multiselect order=object %}
     </div>
 
     <div class="grid grid-cols-1 xl:grid-cols-3 gap-8">

src/staff/templates/staff/analysisorder_filter.html

@@ -8,10 +8,18 @@
 
 {% block page-inner %}
 <form method="get" class="py-3 px-4 border mb-3 ">
+    <div class="mb-2">
+        <span class="text-xl">Filters</span>
+    </div>
     <div class="flex flex-wrap gap-4">
         {{ filter.form | crispy }}
-    <button class="btn custom_order_button_blue mt-6" type="submit">Search</button>
-    <a href="{{ request.path }}" class="btn custom_order_button_grey mt-6">Clear all</a>
+        <div class="flex items-center gap-2">
+            <button class="btn btn-sm custom_order_button_blue" type="submit">
+                <i class="fa-solid fa-filter"></i>
+                Apply filters
+            </button>
+            <a href="{{ request.path }}" class="btn btn-sm custom_order_button">Clear all</a>
+        </div>
     </div>
 </form>
 

src/staff/templates/staff/base.html

@@ -5,13 +5,34 @@
     <div class="flex flex-col sm:w-56 p-5 flex-shrink-0 bg-white">
         <h5 class="font-bold text-xl">Menu</h5>
         <ul class="flex flex-col gap-2 mt-2 text-lg px-4">
-            <li><a class="hover:underline" href="{% url 'staff:dashboard' %}">Dashboard</a></li>
-            <li><a class="hover:underline" href="{% url 'staff:projects-list' %}">Projects</a></li>
-            <li><a class="hover:underline" href="{% url 'staff:order-equipment-list' %}">Equipment Orders</a></li>
-            <li><a class="hover:underline" href="{% url 'staff:order-extraction-list' %}">Extraction Orders</a></li>
-            <li><a class="hover:underline" href="{% url 'staff:order-analysis-list' %}">Analysis Orders</a></li>
-            <li><a class="hover:underline" href="{% url 'staff:samples-list' %}">Samples</a></li>
-            <li><a class="hover:underline" href="{% url 'staff:plates-list' %}">Plates</a></li>
+          <li>
+            <a class="hover:text-primary {% if request.resolver_match.url_name == 'dashboard' %}text-primary{% endif %}"
+               href="{% url 'staff:dashboard' %}">Dashboard</a>
+        </li>
+        <li>
+            <a class="hover:text-primary {% if request.resolver_match.url_name == 'projects-list' %}text-primary{% endif %}"
+               href="{% url 'staff:projects-list' %}">Projects</a>
+        </li>
+        <li>
+            <a class="hover:text-primary {% if request.resolver_match.url_name == 'order-equipment-list' %}text-primary{% endif %}"
+               href="{% url 'staff:order-equipment-list' %}">Equipment Orders</a>
+        </li>
+        <li>
+            <a class="hover:text-primary {% if request.resolver_match.url_name == 'order-extraction-list' %}text-primary{% endif %}"
+               href="{% url 'staff:order-extraction-list' %}">Extraction Orders</a>
+        </li>
+        <li>
+            <a class="hover:text-primary {% if request.resolver_match.url_name == 'order-analysis-list' %}text-primary{% endif %}"
+               href="{% url 'staff:order-analysis-list' %}">Analysis Orders</a>
+        </li>
+        <li>
+            <a class="hover:text-primary {% if request.resolver_match.url_name == 'samples-list' %}text-primary{% endif %}"
+               href="{% url 'staff:samples-list' %}">Samples</a>
+        </li>
+        <li>
+            <a class="hover:text-primary {% if request.resolver_match.url_name == 'plates-list' %}text-primary{% endif %}"
+               href="{% url 'staff:plates-list' %}">Plates</a>
+        </li>
         </ul>
     </div>
     <div class="flex flex-col flex-1 p-5 overflow-x-scroll">

src/staff/templates/staff/components/extraction_tabs.html

@@ -1,15 +1,15 @@
 <div class="flex items-center w-full min-w-0 mb-5">
-    <div role="tablist" class="tabs tabs-box rounded-md border">
+    <div role="tablist" class="tabs tabs-box bg-white rounded-md border">
         <a role="tab"
-            class="tab {% if active_tab == 'ordered' %}tab-active bg-blue-400/40 rounded-md{% endif %}"
+            class="tab {% if active_tab == 'ordered' %}tab-active bg-[#FFEDC0] rounded-md{% endif %}"
             href="{% url 'staff:order-extraction-samples' pk=order.id %}">
             Ordered extraction
         </a>
         <a role="tab"
-            class="tab {% if active_tab == 'lab' %}tab-active bg-blue-400/40 rounded-md{% endif %}"
+            class="tab {% if active_tab == 'lab' %}tab-active bg-[#FFEDC0] rounded-md{% endif %}"
             href="{% url 'staff:order-extraction-samples-lab' pk=order.id %}">
             Lab extraction
         </a>
     </div>
-    <a class="btn custom_order_button_green ml-auto" href="{% url 'samples-csv' %}?order={{ order.pk }}"><i class="fas fa-download"></i> Download complete sheet</a>
+    <a class="btn custom_order_button_dark_blue ml-auto" href="{% url 'samples-csv' %}?order={{ order.pk }}"><i class="fas fa-download"></i> Export complete sheet</a>
 </div>

src/staff/templates/staff/components/priority_column.html

@@ -1,7 +1,8 @@
 {% load next_input %}
+{% load static %}
 
 {% if record.is_urgent %}
-  <i class="fa-solid fa-exclamation fa-lg text-red-500" title="Urgent"></i>
+  <img src="{% static 'images/exclaimation_mark.svg' %}" alt="Urgent" title="Urgent" class="w-5 h-5 inline" />
 {% else %}
   <form method="post" action="{% url 'staff:order-priority' pk=record.pk %}">
     {% csrf_token %}
@@ -12,11 +13,11 @@
 
     <button title="Mark as {{ record.is_prioritized|yesno:'normal,prioritized' }}">
       {% if record.is_prioritized %}
-        <svg class="size-4 fill-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <svg class="size-4 fill-blue-500 hover:fill-blue-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
           <path d="M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32L0 64 0 368 0 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-128 64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30l0-247.7c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L64 48l0-16z" />
         </svg>
       {% else %}
-        <svg class="size-4 stroke-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <svg class="size-4 stroke-gray-300 hover:fill-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
           <path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24L0 64 0 350.5 0 400l0 88c0 13.3 10.7 24 24 24s24-10.7 24-24l0-100 80.3-20.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30l0-279.7c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L48 52l0-28zm0 77.5l96.6-24.2c27-6.7 55.5-3.6 80.4 8.8c54.9 27.4 118.7 29.7 175 6.8l0 241.8-24.4 9.1c-33.7 12.6-71.2 10.7-103.4-5.4c-48.2-24.1-103.3-30.1-155.6-17.1L48 338.5l0-237z" />
         </svg>
       {% endif %}

src/staff/templates/staff/dashboard.html

@@ -9,13 +9,13 @@
   <div class="flex items-center mb-5 gap-2">
     <div role="tablist" class="tabs tabs-lift bg-white rounded-xl border">
       <a role="tab"
-       class="tab {% if not request.GET.area %}tab-active bg-blue-400/40 rounded-xl{% endif %}"
+       class="tab {% if not request.GET.area %}tab-active bg-[#FFEDC0] rounded-xl{% endif %}"
        href="{% url 'staff:dashboard' %}">
       All
       </a>
       {% for area in areas %}
       <a role="tab"
-         class="tab {% if request.GET.area == area.pk|stringformat:'s' %}tab-active bg-blue-400/40 rounded-xl{% endif %}"
+         class="tab {% if request.GET.area == area.pk|stringformat:'s' %}tab-active bg-[#FFEDC0] rounded-xl{% endif %}"
          href="{% url 'staff:dashboard' %}?area={{ area.pk }}">
         {{ area.name }}
       </a>

src/staff/templates/staff/equipmentorder_filter.html

@@ -8,10 +8,18 @@
 
 {% block page-inner %}
 <form method="get" class="py-3 px-4 border mb-3 ">
+    <div class="mb-2">
+        <span class="text-xl">Filters</span>
+    </div>
     <div class="flex flex-wrap gap-4">
         {{ filter.form | crispy }}
-    <button class="btn custom_order_button_blue mt-6" type="submit">Search</button>
-    <a href="{{ request.path }}" class="btn custom_order_button_grey mt-6">Clear all</a>
+        <div class="flex items-center gap-2">
+            <button class="btn btn-sm custom_order_button_blue" type="submit">
+                <i class="fa-solid fa-filter"></i>
+                Apply filters
+            </button>
+            <a href="{{ request.path }}" class="btn btn-sm custom_order_button">Clear all</a>
+        </div>
     </div>
 </form>
 

src/staff/templates/staff/extractionorder_detail.html

@@ -8,38 +8,33 @@ <h3 class="text-4xl mb-5">Order {{ object }}</h3>
     <div class="flex gap-5 mb-5"></div>
 
     <div class="flex gap-5 my-5">
-        <a class="btn custom_order_button" href="{% url 'staff:order-extraction-list' %}"><i class="fas fa-arrow-left"></i> Back</a>
-        <a class="btn custom_order_button" href="{% url 'staff:order-extraction-samples' pk=object.id %}"><i class="fa-solid fa-vial"></i> Samples</a>
-
+        {% responsible_staff_multiselect order=object %}
+        <div class="ml-auto"></div>
+        {% if object.status != object.OrderStatus.DRAFT %}
+            {% url 'staff:order-to-draft' pk=object.id as to_draft_url %}
+            {% action-button action=to_draft_url class="custom_order_button" submit_text="<i class='fa-solid fa-pen-to-square'></i> Convert to draft"|safe csrf_token=csrf_token %}
+        {% endif %}
         {% if analysis_orders|length == 1 and not analysis_has_multiple_extraction_orders %}
             <a class="btn custom_order_button_blue" href="{% url 'staff:order-analysis-detail' pk=analysis_orders.first.id %}">Go to {{ analysis_orders.first}}</a>
         {% endif %}
-        <div class="ml-auto"></div>
+        <a class="btn custom_order_button_dark_blue" href="{% url 'staff:order-extraction-samples' pk=object.id %}"><i class="fa-solid fa-vial"></i> Samples</a>
 
         {% if not object.is_seen %}
             <form method="post" action="{% url 'staff:mark-as-seen' pk=object.id %}">
                 {% csrf_token %}
-                <button class="btn btn-sm bg-[#DFF7CA] border-[#93AD7D] hover:bg-[#C9EBB0] hover:border-[#7F996C] active:bg-[#B5DA9C] active:border-[#6B855B] text-nowrap" style="height: auto;" type="submit">
+                <button class="btn bg-[#DFF7CA] border-[#93AD7D] hover:bg-[#C9EBB0] hover:border-[#7F996C] active:bg-[#B5DA9C] active:border-[#6B855B] text-nowrap" style="height: auto;" type="submit">
                     <p><i class="fa-solid fa-circle-check"></i> Mark as seen</p>
                 </button>
             </form>
         {% endif %}
 
-        {% if object.status != object.OrderStatus.DRAFT %}
-            {% url 'staff:order-to-draft' pk=object.id as to_draft_url %}
-            {% action-button action=to_draft_url class="custom_order_button" submit_text="<i class='fa-solid fa-pen-to-square'></i> Convert to draft"|safe csrf_token=csrf_token %}
-        {% endif %}
-
         {% if object.status == object.OrderStatus.DELIVERED and object.internal_status == "checked" %}
             {% url 'staff:order-to-next-status' pk=object.id as to_next_status_url %}
             {% with "<i class='fa-solid fa-arrow-right'></i> Set as "|add:object.next_status as btn_name %}
                 {% action-button action=to_next_status_url class="bg-yellow-200 text-yellow-800 border border-yellow-700 hover:bg-yellow-300" submit_text=btn_name csrf_token=csrf_token %}
             {% endwith %}
         {% endif %}
     </div>
-    <div class="flex gap-5 my-5">
-      {% responsible_staff_multiselect order=object %}
-    </div>
 
 
     <div class="grid grid-cols-1 xl:grid-cols-3 gap-8">

src/staff/templates/staff/extractionorder_filter.html

@@ -8,10 +8,18 @@
 
 {% block page-inner %}
 <form method="get" class="py-3 px-4 border mb-3 ">
+    <div class="mb-2">
+        <span class="text-xl">Filters</span>
+    </div>
     <div class="flex flex-wrap gap-4">
         {{ filter.form | crispy }}
-    <button class="btn custom_order_button_blue mt-6" type="submit">Search</button>
-    <a href="{{ request.path }}" class="btn custom_order_button_grey mt-6">Clear all</a>
+        <div class="flex items-center gap-2">
+            <button class="btn btn-sm custom_order_button_blue" type="submit">
+                <i class="fa-solid fa-filter"></i>
+                Apply filters
+            </button>
+            <a href="{{ request.path }}" class="btn btn-sm custom_order_button">Clear all</a>
+        </div>
     </div>
 </form>
 

src/staff/templates/staff/extractionplate_filter.html

@@ -12,11 +12,19 @@
 </div>
 
 <form method="get" class="py-3 px-4 border mb-3 ">
+    <div class="mb-2">
+        <span class="text-xl">Filters</span>
+    </div>
     <div class="flex flex-wrap gap-4">
         {{ filter.form | crispy }}
+        <div class="flex items-center gap-2">
+            <button class="btn btn-sm custom_order_button_blue" type="submit">
+                <i class="fa-solid fa-filter"></i>
+                Apply filters
+            </button>
+            <a href="{{ request.path }}" class="btn btn-sm custom_order_button">Clear all</a>
+        </div>
     </div>
-    <button class="btn custom_order_button_blue" type="submit">Search</button>
-    <a href="{{ request.path }}" class="btn custom_order_button_grey mt-6">Clear all</a>
 </form>
 
 {% render_table table %}