From 8bed381f361898c3b35a54adbb4edd1200da7342 Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Mon, 29 Dec 2025 18:33:37 +0100
Subject: [PATCH] feat: add email status indicators to LocationCard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Display email status when not Verified
- Show appropriate icons and colors for each status
- Add bilingual translations for status labels
- Use UTF-8 emojis (⚠️ ⏳ ✉️) alongside Heroicons

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 web-app/app/ui/LocationCard.tsx | 24 ++++++++++++++++++++++--
 web-app/messages/en.json        |  5 +++++
 web-app/messages/hr.json        |  5 +++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/web-app/app/ui/LocationCard.tsx b/web-app/app/ui/LocationCard.tsx
index f175f20..1e3f70a 100644
--- a/web-app/app/ui/LocationCard.tsx
+++ b/web-app/app/ui/LocationCard.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { CheckCircleIcon, Cog8ToothIcon, PlusCircleIcon, ShareIcon, BanknotesIcon, EyeIcon, TicketIcon, ShoppingCartIcon } from "@heroicons/react/24/outline";
+import { CheckCircleIcon, Cog8ToothIcon, PlusCircleIcon, ShareIcon, BanknotesIcon, EyeIcon, TicketIcon, ShoppingCartIcon, EnvelopeIcon, ExclamationTriangleIcon, ClockIcon } from "@heroicons/react/24/outline";
 import { FC } from "react";
 import { BillBadge } from "./BillBadge";
-import { BillingLocation } from "../lib/db-types";
+import { BillingLocation, EmailStatus } from "../lib/db-types";
 import { formatYearMonth } from "../lib/format";
 import { formatCurrency } from "../lib/formatStrings";
 import Link from "next/link";
@@ -25,6 +25,8 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
         seenByTenantAt,
         // NOTE: only the fileName is projected from the DB to reduce data transfer
         utilBillsProofOfPayment,
+        tenantEmail,
+        tenantEmailStatus,
     } = location;
 
     const t = useTranslations("home-page.location-card");
@@ -95,6 +97,24 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
                                         </div>
                                         : null
                                 }
+                                {tenantEmail && tenantEmailStatus && tenantEmailStatus !== EmailStatus.Verified && (
+                                    <div className="flex ml-1">
+                                        <span className="w-5 min-w-5 mr-2">
+                                            {tenantEmailStatus === EmailStatus.Unverified && <ExclamationTriangleIcon className="mt-[.1rem] text-warning" />}
+                                            {tenantEmailStatus === EmailStatus.VerificationPending && <ClockIcon className="mt-[.1rem] text-info" />}
+                                            {tenantEmailStatus === EmailStatus.Unsubscribed && <EnvelopeIcon className="mt-[.1rem] text-error" />}
+                                        </span>
+                                        <span className={
+                                            tenantEmailStatus === EmailStatus.Unverified ? "text-warning" :
+                                            tenantEmailStatus === EmailStatus.VerificationPending ? "text-info" :
+                                            "text-error"
+                                        }>
+                                            {tenantEmailStatus === EmailStatus.Unverified && `${t("email-status.unverified")} ⚠️`}
+                                            {tenantEmailStatus === EmailStatus.VerificationPending && `${t("email-status.verification-pending")} ⏳`}
+                                            {tenantEmailStatus === EmailStatus.Unsubscribed && `${t("email-status.unsubscribed")} ✉️`}
+                                        </span>
+                                    </div>
+                                )}
                                 {seenByTenantAt && (
                                     <div className="flex mt-1 ml-1">
                                         <span className="w-5 mr-2 min-w-5"><EyeIcon className="mt-[.1rem]" /></span>
diff --git a/web-app/messages/en.json b/web-app/messages/en.json
index c1c1d43..7923cb8 100644
--- a/web-app/messages/en.json
+++ b/web-app/messages/en.json
@@ -61,6 +61,11 @@
       "monthly-statement-legend": "Monthly statement",
       "seen-by-tenant-label": "seen by tenant",
       "download-proof-of-payment-label": "proof-of-payment.PDF",
+      "email-status": {
+        "unverified": "Email not verified",
+        "verification-pending": "Email verification pending",
+        "unsubscribed": "Email unsubscribed"
+      },
       "payment-info-header": "You can pay the utility bills for this month using the following information:",
       "payment-amount-label": "Amount:",
       "payment-recipient-label": "Recipient:",
diff --git a/web-app/messages/hr.json b/web-app/messages/hr.json
index f20a9ee..b3014bb 100644
--- a/web-app/messages/hr.json
+++ b/web-app/messages/hr.json
@@ -61,6 +61,11 @@
       "monthly-statement-legend": "Obračun",
       "seen-by-tenant-label": "viđeno od strane podstanara",
       "download-proof-of-payment-label": "potvrda-o-uplati.PDF",
+      "email-status": {
+        "unverified": "Email nije potvrđen",
+        "verification-pending": "Čeka se potvrda emaila",
+        "unsubscribed": "Email odjavljen"
+      },
       "payment-info-header": "Režije za ovaj mjesec možete uplatiti koristeći slijedeće podatke:",
       "payment-amount-label": "Iznos:",
       "payment-recipient-label": "Primatelj:",