106 lines
5.4 KiB
HTML
106 lines
5.4 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans "Convert to Action" %} - {{ observation.tracking_code }} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Back Link -->
|
|
<div class="mb-6">
|
|
<a href="{% url 'observations:observation_detail' observation.id %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition font-medium">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> {{ observation.tracking_code }}
|
|
</a>
|
|
<span class="mx-2 text-slate">/</span>
|
|
<span class="text-navy font-semibold">{% trans "Convert to Action" %}</span>
|
|
</div>
|
|
|
|
<div class="max-w-3xl mx-auto">
|
|
<!-- Convert Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<!-- Card Header -->
|
|
<div class="px-6 py-4 bg-green-500 text-white">
|
|
<h2 class="text-lg font-bold flex items-center gap-2">
|
|
<i data-lucide="arrow-right-circle" class="w-5 h-5"></i>
|
|
{% trans "Convert Observation to PX Action" %}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<!-- Observation Summary -->
|
|
<div class="bg-blue-50 border border-blue-100 rounded-xl p-4 mb-6">
|
|
<h3 class="text-sm font-bold text-navy mb-3">{% trans "Observation Summary" %}</h3>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<p class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Reference Number" %}</p>
|
|
<p class="text-sm font-bold text-navy font-mono">{{ observation.tracking_code }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Severity" %}</p>
|
|
<span class="px-3 py-1 rounded-full text-sm font-semibold
|
|
{% if observation.severity == 'low' %}bg-green-100 text-green-700
|
|
{% elif observation.severity == 'medium' %}bg-yellow-100 text-yellow-700
|
|
{% elif observation.severity == 'high' %}bg-red-100 text-red-700
|
|
{% elif observation.severity == 'critical' %}bg-red-500 text-white
|
|
{% else %}bg-gray-100 text-gray-600{% endif %}">
|
|
{{ observation.get_severity_display }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<hr class="border-blue-100 my-3">
|
|
<p class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Description" %}</p>
|
|
<p class="text-sm text-gray-700">{{ observation.description|truncatewords:50 }}</p>
|
|
</div>
|
|
|
|
<!-- Convert Form -->
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-semibold text-slate mb-2">{% trans "Action Title" %} <span class="text-red-500">*</span></label>
|
|
{{ form.title }}
|
|
<p class="text-xs text-slate mt-1">{% trans "A clear, actionable title for the PX Action" %}</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-semibold text-slate mb-2">{% trans "Description" %} <span class="text-red-500">*</span></label>
|
|
{{ form.description }}
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate mb-2">{% trans "Category" %} <span class="text-red-500">*</span></label>
|
|
{{ form.category }}
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate mb-2">{% trans "Priority" %} <span class="text-red-500">*</span></label>
|
|
{{ form.priority }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate mb-2">{% trans "Assign to Department" %}</label>
|
|
{{ form.assigned_department }}
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate mb-2">{% trans "Assign to User" %}</label>
|
|
{{ form.assigned_to }}
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="border-slate-100 mb-6">
|
|
|
|
<div class="flex justify-end gap-3">
|
|
<a href="{% url 'observations:observation_detail' observation.id %}" class="px-4 py-2.5 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-slate-50 transition inline-flex items-center gap-2">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Cancel" %}
|
|
</a>
|
|
<button type="submit" class="bg-green-500 text-white px-6 py-2.5 rounded-xl font-semibold hover:bg-green-600 transition inline-flex items-center gap-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4"></i> {% trans "Create PX Action" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|