patx/projectpay

update payments table on admin project view

Commit 314b09b · patx · 2026-06-28T16:08:04-04:00

Changeset

314b09b60e8e87b9aa8c8a5c2632e5aaeeaffdf2

Parents

4e890af54b8b5cfa11ad2327ed8f370a51abad14

View source at this commit

Comments

No comments yet.

Log in to comment

Diff

diff --git a/templates/base.html b/templates/base.html
index 99ef978..284b8fb 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -102,12 +102,18 @@
         font-weight: 700;
         text-transform: capitalize;
       }
-      .status.paid { background: #eaf7ef; color: #166534; }
+      .status.paid,
+      .status.succeeded { background: #eaf7ef; color: #166534; }
+      .status.processing,
+      .status.pending { background: #fff8e8; color: #8a5a00; }
+      .status.failed,
+      .status.canceled { background: #fff0ee; color: #b42318; }
       .project-list {
         display: grid;
         gap: 12px;
       }
-      .project-card {
+      .project-card,
+      .payment-card {
         background: #fff;
         border: 1px solid #ddd;
         border-radius: 8px;
@@ -121,7 +127,11 @@
         gap: 12px;
         align-items: start;
       }
-      .project-card h2 { margin: 0 0 4px; }
+      .project-card h2,
+      .payment-card h3 {
+        font-size: 18px;
+        margin: 0 0 4px;
+      }
       .project-card-id { color: #697586; font-size: 13px; }
       .project-card-amount { text-align: right; }
       .project-card-amount span {
@@ -134,6 +144,7 @@
         justify-content: flex-end;
         margin-top: 12px;
       }
+      .payment-card-reference { overflow-wrap: anywhere; }
       .line-item {
         display: grid;
         grid-template-columns: minmax(0, 1fr) auto;
diff --git a/templates/detail.html b/templates/detail.html
index 3dcc01d..785ee36 100644
--- a/templates/detail.html
+++ b/templates/detail.html
@@ -57,26 +57,28 @@
   <section class="section">
     <h2>Payments</h2>
     {% if payments %}
-      <table>
-        <thead>
-          <tr>
-            <th>Date</th>
-            <th>Stripe Payment</th>
-            <th>Status</th>
-            <th class="amount">Amount</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for payment in payments %}
-            <tr>
-              <td>{{ payment.created_at.strftime("%Y-%m-%d %H:%M") if payment.created_at else "" }}</td>
-              <td>{{ payment.stripe_payment_intent_id or payment.stripe_checkout_session_id or payment.webhook_id }}</td>
-              <td>{{ payment.status }}</td>
-              <td class="amount">{{ payment.amount_cents|money(payment.currency or currency) }}</td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+      <div class="project-list payment-list">
+        {% for payment in payments %}
+          {% set payment_reference = payment.stripe_payment_intent_id or payment.stripe_checkout_session_id or payment.webhook_id %}
+          <article class="payment-card">
+            <div class="project-card-main">
+              <div>
+                <h3>
+                  <span class="status {{ payment.status }}">{{ payment.status }}</span>
+                  {{ payment.created_at.strftime("%Y-%m-%d %H:%M") if payment.created_at else "Payment" }}
+                </h3>
+                {% if payment_reference %}
+                  <div class="project-card-id payment-card-reference">{{ payment_reference }}</div>
+                {% endif %}
+              </div>
+              <div class="project-card-amount">
+                <span>Amount</span>
+                <strong>{{ payment.amount_cents|money(payment.currency or currency) }}</strong>
+              </div>
+            </div>
+          </article>
+        {% endfor %}
+      </div>
     {% else %}
       <div class="empty">No payments yet.</div>
     {% endif %}