knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add email status indicators to LocationCard

Browse Source 
- 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>
This commit is contained in:
Knee Cola
2025-12-29 18:33:37 +01:00
parent 0f06394984
commit 8bed381f36
3 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web-app/app/ui/LocationCard.tsx
View File

@@ -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>