Loyalty Card updates

1. Card title fix: The "top-right text" feature was renamed and repositioned to be the actual card title (top-left, replacing the hardcoded "Loyalty Card"), matching what you asked for. This included a proper database migration (cardTopRightText → cardTitleText, etc., using CHANGE COLUMN so any already-configured value is preserved, not dropped) and updates through every layer — schema, service, owner form, and both the owner preview and customer-facing card. Verified live: typed "VIP Rewards" into the new "Card title" field and confirmed it renders top-left on both the owner's live preview and the real customer loyalty page, with the member number staying in its own badge top-right.

2. Tabs: The long "Card Appearance" control list is now split into Colours / Stamp / Text tabs (using the same Tabs component used elsewhere in the app), exactly as you suggested — Colours holds every colour + the background image, Stamp holds just the icon picker, Text holds the title, font, size, and terms line.

Along the way, while running full E2E regression, I found 6 test failures — but traced them via git stash to prove they're pre-existing bugs unrelated to this change (a booking/appointments-list bug), so I reverted-then-confirmed before restoring my work, and filed a separate follow-up task for them rather than mixing it into this change.

Both fixes are typechecked, linted, verified with the full unit (253) and integration (185) suites, confirmed live in a real browser end-to-end, and deployed to your running Docker container — the migration applied cleanly against your real database with no data loss.

src/services/loyalty/loyalty.service.ts

@@ -56,10 +56,10 @@ export interface LoyaltySummary {
   cardBackgroundColor: string | null;
   cardBackgroundImageUrl: string | null;
   termsLine: string | null;
-  cardTopRightText: string | null;
+  cardTitleText: string | null;
   cardFont: LoyaltyCardFont;
-  cardTopRightTextSize: LoyaltyCardTextSize;
-  cardTopRightTextColor: string | null;
+  cardTitleTextSize: LoyaltyCardTextSize;
+  cardTitleTextColor: string | null;
   cardBorderColor: string | null;
   cardMemberNumberColor: string | null;
 }
@@ -105,10 +105,10 @@ export async function getLoyaltySummary(
     cardBackgroundColor: programme.cardBackgroundColor,
     cardBackgroundImageUrl: programme.cardBackgroundImageUrl,
     termsLine: programme.termsLine,
-    cardTopRightText: programme.cardTopRightText,
+    cardTitleText: programme.cardTitleText,
     cardFont: programme.cardFont,
-    cardTopRightTextSize: programme.cardTopRightTextSize,
-    cardTopRightTextColor: programme.cardTopRightTextColor,
+    cardTitleTextSize: programme.cardTitleTextSize,
+    cardTitleTextColor: programme.cardTitleTextColor,
     cardBorderColor: programme.cardBorderColor,
     cardMemberNumberColor: programme.cardMemberNumberColor,
   };
@@ -546,11 +546,11 @@ export interface ProgrammeConfigInput {
   cardBackgroundImageUrl?: string;
   stampIcon?: string;
   termsLine?: string;
-  /** Free text shown in the card's top-right area — see schema.prisma's cardTopRightText doc comment. */
-  cardTopRightText?: string;
+  /** Replaces the "Loyalty Card" title (top-left) when set — see schema.prisma's cardTitleText doc comment. */
+  cardTitleText?: string;
   cardFont: LoyaltyCardFont;
-  cardTopRightTextSize: LoyaltyCardTextSize;
-  cardTopRightTextColor?: string;
+  cardTitleTextSize: LoyaltyCardTextSize;
+  cardTitleTextColor?: string;
   cardBorderColor?: string;
   cardMemberNumberColor?: string;
 }
@@ -627,10 +627,10 @@ export async function updateProgrammeConfig(
     cardBackgroundImageUrl: params.input.cardBackgroundImageUrl || null,
     stampIcon: params.input.stampIcon || null,
     termsLine: params.input.termsLine?.trim() || null,
-    cardTopRightText: params.input.cardTopRightText?.trim() || null,
+    cardTitleText: params.input.cardTitleText?.trim() || null,
     cardFont: params.input.cardFont,
-    cardTopRightTextSize: params.input.cardTopRightTextSize,
-    cardTopRightTextColor: params.input.cardTopRightTextColor || null,
+    cardTitleTextSize: params.input.cardTitleTextSize,
+    cardTitleTextColor: params.input.cardTitleTextColor || null,
     cardBorderColor: params.input.cardBorderColor || null,
     cardMemberNumberColor: params.input.cardMemberNumberColor || null,
   };