Phase 7

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

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { LogIn } from "lucide-react";
+import { Bell, Gift, LogIn } from "lucide-react";
 import Link from "next/link";
 import { auth } from "@/auth";
 import { Button } from "@/components/ui/button";
@@ -7,6 +7,7 @@ import { EmptyState } from "@/components/feedback/empty-state";
 import { ProfileCard } from "@/components/ui/profile-card";
 import { prisma } from "@/lib/db/prisma";
 import { SignOutButton } from "@/features/auth/components/sign-out-button";
+import { InstallAppButton } from "@/features/pwa/components/install-app-button";
 
 export const metadata: Metadata = { title: "Settings" };
 export const dynamic = "force-dynamic";
@@ -48,10 +49,24 @@ export default async function CustomerSettingsPage() {
         meta={customerProfile?.email ?? session.user.email}
         avatarUrl={session.user.image ?? undefined}
       />
-      <p className="text-muted text-sm">
-        Preferred barber, loyalty card, and notification preferences are designed in
-        <code> templates/10, 11, 35</code> and land in a later phase.
-      </p>
+      <div className="space-y-2">
+        <Link
+          href="/loyalty"
+          className="border-line flex items-center gap-3 rounded-xl border bg-white px-4 py-3 text-sm font-bold"
+        >
+          <Gift className="h-4 w-4" aria-hidden="true" /> Loyalty card
+        </Link>
+        <Link
+          href="/settings/notifications"
+          className="border-line flex items-center gap-3 rounded-xl border bg-white px-4 py-3 text-sm font-bold"
+        >
+          <Bell className="h-4 w-4" aria-hidden="true" /> Notifications
+        </Link>
+      </div>
+      <div className="border-line rounded-jumbo border bg-white p-5">
+        <p className="mb-3 text-sm font-bold">Get the app</p>
+        <InstallAppButton />
+      </div>
       <SignOutButton />
     </div>
   );