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/app/(customer)/home/page.tsx

@@ -143,17 +143,17 @@ export default async function CustomerHomePage() {
     <div>
       {/* Hero — an owner-managed gallery (see /owner/settings/gallery), matching the content width rather than bleeding edge-to-edge. */}
       {heroGalleryImages.length > 0 && (
-        <div className="mx-auto max-w-2xl px-6 pt-4 bg-white">
+        <div className="mx-auto max-w-2xl px-6 pt-4 bg-white border-line border-b">
           <ImageGallery images={heroGalleryImages} />
         </div>
       )}
 
       <main className="mx-auto max-w-2xl bg-white px-6 py-6">
-        {session?.user && (
+        {/* {session?.user && (
           <p className="text-muted mb-1 text-sm">
             Good to see you, {session.user.name?.split(" ")[0] ?? "there"}
           </p>
-        )}
+        )} */}
         <h1 className="mb-1 text-2xl font-bold tracking-tight">{business.name}</h1>
         {location && (
           <p className="text-muted mb-3 text-xs">
@@ -176,9 +176,11 @@ export default async function CustomerHomePage() {
         {/* Upcoming appointment */}
         {upcomingAppointment && (
           <section className="mb-6">
+            {session?.user && (
             <h2 className="text-muted mb-3 text-xs font-bold tracking-widest uppercase">
-              Your Next Visit
-            </h2>
+           {session.user.name?.split(" ")[0] ?? "Your Next Appointment"}, Your Next Appointment
+           </h2>
+        )}
             <AppointmentCard
               status={STATUS_MAP[upcomingAppointment.status] ?? "confirmed"}
               serviceName={upcomingAppointment.services.map((s) => s.service.name).join(" + ")}

src/app/(customer)/loyalty/page.tsx

@@ -86,10 +86,10 @@ export default async function LoyaltyPage() {
           cardBackgroundImageUrl={loyalty.cardBackgroundImageUrl}
           stampIcon={loyalty.stampIcon}
           rewardPosition={loyalty.rewardPosition}
-          cardTopRightText={loyalty.cardTopRightText}
+          cardTitleText={loyalty.cardTitleText}
           cardFont={loyalty.cardFont}
-          cardTopRightTextSize={loyalty.cardTopRightTextSize}
-          cardTopRightTextColor={loyalty.cardTopRightTextColor}
+          cardTitleTextSize={loyalty.cardTitleTextSize}
+          cardTitleTextColor={loyalty.cardTitleTextColor}
           cardBorderColor={loyalty.cardBorderColor}
           cardMemberNumberColor={loyalty.cardMemberNumberColor}
         />

src/app/(owner)/owner/settings/loyalty/page.tsx

@@ -51,10 +51,10 @@ export default async function OwnerLoyaltyConfigPage() {
         cardBackgroundImageUrl: programme.cardBackgroundImageUrl ?? undefined,
         stampIcon: programme.stampIcon ?? undefined,
         termsLine: programme.termsLine ?? undefined,
-        cardTopRightText: programme.cardTopRightText ?? undefined,
+        cardTitleText: programme.cardTitleText ?? undefined,
         cardFont: programme.cardFont,
-        cardTopRightTextSize: programme.cardTopRightTextSize,
-        cardTopRightTextColor: programme.cardTopRightTextColor ?? undefined,
+        cardTitleTextSize: programme.cardTitleTextSize,
+        cardTitleTextColor: programme.cardTitleTextColor ?? undefined,
         cardBorderColor: programme.cardBorderColor ?? undefined,
         cardMemberNumberColor: programme.cardMemberNumberColor ?? undefined,
       }
@@ -68,7 +68,7 @@ export default async function OwnerLoyaltyConfigPage() {
         earnOnCancelled: false,
         earnOnNoShow: false,
         cardFont: LoyaltyCardFont.SANS,
-        cardTopRightTextSize: LoyaltyCardTextSize.MD,
+        cardTitleTextSize: LoyaltyCardTextSize.MD,
       };
 
   return (