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

- Display all email statuses (Unverified, VerificationPending, Verified, Unsubscribed)
- Show appropriate icons and colors for each status
- Add bilingual translations for status labels
- Use UTF-8 emojis (⚠️ ⏳ ✅ ✉️) alongside Heroicons
- Position indicator before tenantEmail-error div

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

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

diff --git a/web-app/app/ui/LocationEditForm.tsx b/web-app/app/ui/LocationEditForm.tsx
index ae05270..d7e03c6 100644
--- a/web-app/app/ui/LocationEditForm.tsx
+++ b/web-app/app/ui/LocationEditForm.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { TrashIcon } from "@heroicons/react/24/outline";
+import { TrashIcon, ExclamationTriangleIcon, ClockIcon, EnvelopeIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
 import { FC, useState } from "react";
-import { BillingLocation, UserSettings, YearMonth } from "../lib/db-types";
+import { BillingLocation, UserSettings, YearMonth, EmailStatus } from "../lib/db-types";
 import { updateOrAddLocation } from "../lib/actions/locationActions";
 import { useFormState } from "react-dom";
 import Link from "next/link";
@@ -357,6 +357,34 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                                 defaultValue={formValues.tenantEmail}
                                 onChange={(e) => handleInputChange("tenantEmail", e.target.value)}
                             />
+                            {location?.tenantEmail && location?.tenantEmailStatus && (
+                                <div className="flex items-center gap-2 mt-2">
+                                    {location.tenantEmailStatus === EmailStatus.Unverified && (
+                                        <>
+                                            <ExclamationTriangleIcon className="h-5 w-5 text-warning" />
+                                            <span className="text-sm text-warning">{t("email-status.unverified")} ⚠️</span>
+                                        </>
+                                    )}
+                                    {location.tenantEmailStatus === EmailStatus.VerificationPending && (
+                                        <>
+                                            <ClockIcon className="h-5 w-5 text-info" />
+                                            <span className="text-sm text-info">{t("email-status.verification-pending")} ⏳</span>
+                                        </>
+                                    )}
+                                    {location.tenantEmailStatus === EmailStatus.Verified && (
+                                        <>
+                                            <CheckCircleIcon className="h-5 w-5 text-success" />
+                                            <span className="text-sm text-success">{t("email-status.verified")} ✅</span>
+                                        </>
+                                    )}
+                                    {location.tenantEmailStatus === EmailStatus.Unsubscribed && (
+                                        <>
+                                            <EnvelopeIcon className="h-5 w-5 text-error" />
+                                            <span className="text-sm text-error">{t("email-status.unsubscribed")} ✉️</span>
+                                        </>
+                                    )}
+                                </div>
+                            )}
                             <div id="tenantEmail-error" aria-live="polite" aria-atomic="true">
                                 {state.errors?.tenantEmail &&
                                     state.errors.tenantEmail.map((error: string) => (
diff --git a/web-app/messages/en.json b/web-app/messages/en.json
index 7923cb8..49491a9 100644
--- a/web-app/messages/en.json
+++ b/web-app/messages/en.json
@@ -195,6 +195,12 @@
     "rent-amount-placeholder": "enter rent amount",
     "tenant-email-legend": "TENANT EMAIL",
     "tenant-email-placeholder": "enter tenant's email",
+    "email-status": {
+      "unverified": "Email not verified",
+      "verification-pending": "Email verification pending",
+      "verified": "Email verified",
+      "unsubscribed": "Email unsubscribed"
+    },
     "warning-missing-tenant-names": "Warning: Tenant first and last name are missing. The 2D barcode will not be displayed to the tenant when they open the shared link until both fields are filled in.",
     "save-button": "Save",
     "cancel-button": "Cancel",
diff --git a/web-app/messages/hr.json b/web-app/messages/hr.json
index b3014bb..0e6fff0 100644
--- a/web-app/messages/hr.json
+++ b/web-app/messages/hr.json
@@ -194,6 +194,12 @@
     "rent-amount-placeholder": "unesite iznos najamnine",
     "tenant-email-legend": "EMAIL PODSTANARA",
     "tenant-email-placeholder": "unesite email podstanara",
+    "email-status": {
+      "unverified": "Email nije potvrđen",
+      "verification-pending": "Čeka se potvrda emaila",
+      "verified": "Email potvrđen",
+      "unsubscribed": "Email odjavljen"
+    },
     "warning-missing-tenant-names": "Upozorenje: Ime i prezime podstanara nedostaju. 2D barkod neće biti prikazan podstanaru kada otvori podijeljenu poveznicu dok oba polja ne budu popunjena.",
     "save-button": "Spremi",
     "cancel-button": "Odbaci",