84 lines
5.3 KiB
HTML
84 lines
5.3 KiB
HTML
{% extends "claims/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Mina utlägg" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="space-y-6 py-6">
|
|
<header class="max-w-3xl">
|
|
<p class="text-sm font-semibold uppercase tracking-wide text-brand-600">{% trans "Översikt" %}</p>
|
|
<h1 class="text-3xl font-semibold text-gray-900">{% trans "Mina utlägg" %}</h1>
|
|
<p class="mt-2 text-sm text-gray-600">{% trans "Här ser du status för de utlägg du skickat in när du varit inloggad." %}</p>
|
|
</header>
|
|
|
|
{% if claims %}
|
|
<div class="grid gap-6">
|
|
{% for claim in claims %}
|
|
<article class="rounded-3xl bg-white px-6 py-6 shadow-sm ring-1 ring-gray-100">
|
|
<div class="flex flex-col gap-4 border-b border-gray-100 pb-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<p class="text-xs uppercase tracking-wide text-gray-500">{% trans "Skickad" %} {{ claim.created_at|date:"Y-m-d H:i" }}</p>
|
|
<h2 class="mt-1 text-2xl font-semibold text-gray-900">{{ claim.description|default:_("Utlägg") }}</h2>
|
|
<p class="mt-2 text-sm text-gray-600">
|
|
{% trans "Belopp" %}: <strong>{{ claim.amount }} {{ claim.currency }}</strong><br>
|
|
{% trans "Projekt" %}: {{ claim.project|default:"-" }}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col items-start gap-2 text-sm lg:items-end">
|
|
<span class="rounded-full px-4 py-2 text-sm font-semibold {% if claim.status == 'approved' %}bg-green-50 text-green-700 border border-green-200{% elif claim.status == 'rejected' %}bg-rose-50 text-rose-700 border border-rose-200{% else %}bg-amber-50 text-amber-800 border border-amber-200{% endif %}">
|
|
{{ claim.get_status_display }}
|
|
</span>
|
|
{% if claim.paid_at %}
|
|
<span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-800">
|
|
{% trans "Betald" %} {{ claim.paid_at|date:"Y-m-d" }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 grid gap-4 lg:grid-cols-[2fr,1fr]">
|
|
<div>
|
|
<p class="text-sm font-semibold text-gray-500">{% trans "Detaljer" %}</p>
|
|
<p class="mt-2 whitespace-pre-wrap text-gray-800">{{ claim.description }}</p>
|
|
</div>
|
|
<div class="rounded-2xl bg-slate-50 p-4 text-sm text-gray-600">
|
|
<p class="font-semibold text-gray-800">{% trans "Kvitto" %}</p>
|
|
{% if claim.receipt %}
|
|
<a class="mt-2 inline-flex items-center gap-2 text-brand-600 hover:text-brand-700" href="{{ claim.receipt.url }}" target="_blank" rel="noopener">
|
|
{% trans "Visa fil" %}
|
|
</a>
|
|
{% else %}
|
|
<p class="mt-2 text-xs text-gray-400">{% trans "Inget kvitto bifogat." %}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<details class="mt-4 rounded-2xl border border-dashed border-gray-200 bg-gray-50 p-4 text-sm text-gray-700">
|
|
<summary class="cursor-pointer select-none text-sm font-semibold text-gray-800">{% trans "Visa logg" %}</summary>
|
|
<ul class="mt-3 space-y-2 text-sm text-gray-600">
|
|
{% for log in claim.logs.all %}
|
|
<li class="rounded-lg bg-white px-3 py-2 shadow-sm">
|
|
<p class="font-semibold text-gray-900">{{ log.get_action_display }}</p>
|
|
<p class="text-xs text-gray-500">{{ log.created_at|date:"Y-m-d H:i" }}</p>
|
|
{% if log.from_status %}
|
|
<p class="text-xs text-gray-500">{% trans "Status" %}: {{ log.get_from_status_display }} → {{ log.get_to_status_display }}</p>
|
|
{% endif %}
|
|
{% if log.note %}
|
|
<p class="mt-1 text-xs text-gray-600">"{{ log.note }}"</p>
|
|
{% endif %}
|
|
</li>
|
|
{% empty %}
|
|
<li class="text-xs text-gray-400">{% trans "Ingen logg än." %}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</details>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="rounded-3xl border border-dashed border-gray-200 bg-white px-6 py-10 text-center text-gray-500">
|
|
<p class="text-lg font-semibold text-gray-900">{% trans "Inga utlägg ännu" %}</p>
|
|
<p class="mt-2 text-sm">{% trans "Du har inte skickat in några utlägg ännu eller så gjordes de utan inloggning." %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
{% endblock %}
|