05/08 Phase 4

templates/tenant/pay_periods/index.html

@@ -0,0 +1,53 @@
+{% extends "tenant/layouts/base.html" %}
+{% block title %}Pay Periods{% endblock %}
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h4 class="fw-bold mb-0"><i class="bi bi-wallet2 me-2"></i>Pay Periods</h4>
+  <a href="{{ url_for('pay_periods.calculate') }}" class="btn btn-primary btn-sm">Calculate Period</a>
+</div>
+
+{% if periods %}
+<div class="card shadow-sm">
+  <div class="table-responsive">
+    <table class="table table-hover mb-0">
+      <thead class="table-light">
+        <tr><th>Staff</th><th>Period</th><th>Type</th><th>Base</th><th>Commission</th><th>Topup</th><th>Total</th><th>Status</th><th></th></tr>
+      </thead>
+      <tbody>
+        {% for pp in periods %}
+        <tr>
+          <td class="fw-semibold">{{ pp.staff.name if pp.staff else pp.staff_id }}</td>
+          <td class="small text-nowrap">{{ pp.period_start.strftime('%b %d') }}–{{ pp.period_end.strftime('%b %d, %Y') }}</td>
+          <td class="small">{{ pp.pay_type.title() }}</td>
+          <td>${{ "%.2f"|format(pp.base_amount) }}</td>
+          <td>${{ "%.2f"|format(pp.commission_amount) }}</td>
+          <td>{{ '$' ~ "%.2f"|format(pp.guarantee_topup) if pp.guarantee_topup > 0 else '—' }}</td>
+          <td class="fw-bold">${{ "%.2f"|format(pp.total_amount) }}</td>
+          <td>
+            <span class="badge bg-{{ {'draft':'secondary','approved':'primary','paid':'success'}.get(pp.status,'secondary') }}">
+              {{ pp.status }}
+            </span>
+          </td>
+          <td class="d-flex gap-1">
+            {% if pp.status == 'draft' %}
+            <form method="POST" action="{{ url_for('pay_periods.approve', pp_id=pp.id) }}">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+              <button class="btn btn-outline-primary btn-sm">Approve</button>
+            </form>
+            {% elif pp.status == 'approved' %}
+            <form method="POST" action="{{ url_for('pay_periods.mark_paid', pp_id=pp.id) }}">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+              <button class="btn btn-outline-success btn-sm">Mark Paid</button>
+            </form>
+            {% endif %}
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
+{% else %}
+<div class="alert alert-light">No pay periods calculated yet. Use <strong>Calculate Period</strong> to get started.</div>
+{% endif %}
+{% endblock %}