{title}
@@ -108,14 +115,16 @@ export default async function OwnerDashboardPage() { if (!context) redirect("/staff"); const today = todayIn(context.businessTimezone); - const [summary, unreadNotificationCount] = await Promise.all([ + const [summary, unreadNotificationCount, isSuper] = await Promise.all([ getDashboardSummary(prisma, { businessId: context.businessId, businessTimezone: context.businessTimezone, date: today, }), getUnreadNotificationCount(prisma, session.user.id), + isSuperAdmin(session.user.id), ]); + const manageSections = getManageSections(isSuper); return (
@@ -237,7 +246,7 @@ export default async function OwnerDashboardPage() {
+
+ );
+}
diff --git a/src/app/(owner)/owner/settings/business/page.tsx b/src/app/(owner)/owner/settings/business/page.tsx
index 0804f67..6bae6e8 100644
--- a/src/app/(owner)/owner/settings/business/page.tsx
+++ b/src/app/(owner)/owner/settings/business/page.tsx
@@ -38,9 +38,6 @@ export default async function OwnerBusinessDetailsPage() {
welcomeBackgroundDesktopUrl: business.welcomeBackgroundDesktopUrl,
welcomeBackgroundMobileUrl: business.welcomeBackgroundMobileUrl,
faviconUrl: business.faviconUrl,
- appIconUrl: business.appIconUrl,
- themeColor: business.themeColor,
- backgroundColor: business.backgroundColor,
phone: business.phone ?? "",
email: business.email ?? "",
website: business.website ?? "",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 062048c..54b2541 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -19,10 +19,20 @@ const inter = Inter({
*/
export async function generateMetadata(): Promise {
const branding = await getBranding();
+
return {
title: { default: branding.name, template: `%s | ${branding.name}` },
description: branding.description || "Book your next appointment in seconds.",
- appleWebApp: { capable: true, statusBarStyle: "default", title: branding.shortName },
+ appleWebApp: {
+ capable: true,
+ statusBarStyle: "default",
+ title: branding.shortName,
+ // One exact per-device `apple-touch-startup-image` entry per array
+ // item — imported wholesale from a generator's ZIP bundle (see
+ // importAppIconZipAction), not hand-picked. Empty array renders no
+ // splash screens at all, which is the correct "unconfigured" state.
+ startupImage: branding.splashScreens.length > 0 ? branding.splashScreens : undefined,
+ },
icons:
branding.faviconUrl || branding.appIconUrl
? { icon: branding.faviconUrl || undefined, apple: branding.appIconUrl || undefined }
diff --git a/src/app/manifest.ts b/src/app/manifest.ts
index c1fa7a4..41761ce 100644
--- a/src/app/manifest.ts
+++ b/src/app/manifest.ts
@@ -7,15 +7,24 @@ import { getBranding } from "@/lib/business/branding";
* Phase 8: name/description/colors reflect the installed business (see
* src/lib/business/branding.ts) rather than the internal product name.
*
- * `icons` intentionally stays pointed at the app's own pre-generated,
- * correctly-sized/maskable PWA icon set rather than a business's single
- * `appIconUrl` — there's no image-processing pipeline in this app to
- * derive the required 192/512/maskable variants from one arbitrary
- * uploaded URL (see docs/phase-8-summary.md, "Known limitations"), so
- * this is fallback rule #2 ("business name + a neutral generated icon"),
- * applied deliberately rather than risking a broken/non-square install
- * icon.
+ * `force-dynamic` is required, not optional — without it, Next has no
+ * signal that this route depends on request-time data (a plain DB read
+ * doesn't count as one of Next's dynamic-usage triggers) and statically
+ * renders it once at build time. Since the Docker image is built before
+ * the installation wizard ever runs, that bakes in the pre-install
+ * neutral fallback ("Book an Appointment"/"Booking") permanently — the
+ * real business name/icons would never appear no matter how the Business
+ * row changes afterward.
+ *
+ * Each of the four manifest icons falls back independently to the app's
+ * own pre-generated, correctly-sized/maskable PWA icon when a business
+ * hasn't uploaded its own — a business can set some without all four (see
+ * the "App Icon & Home Screen" super-admin settings screen). This is
+ * fallback rule #2 ("business name + a neutral generated icon") applied
+ * per-field, rather than risking a broken/non-square install icon.
*/
+export const dynamic = "force-dynamic";
+
export default async function manifest(): Promise {
const branding = await getBranding();
return {
@@ -29,10 +38,30 @@ export default async function manifest(): Promise {
theme_color: branding.themeColor,
orientation: "portrait-primary",
icons: [
- { src: "/icons/icon-192.png", sizes: "192x192", type: "image/png", purpose: "any" },
- { src: "/icons/icon-512.png", sizes: "512x512", type: "image/png", purpose: "any" },
- { src: "/icons/icon-maskable-192.png", sizes: "192x192", type: "image/png", purpose: "maskable" },
- { src: "/icons/icon-maskable-512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
+ {
+ src: branding.icon192Url || "/icons/icon-192.png",
+ sizes: "192x192",
+ type: "image/png",
+ purpose: "any",
+ },
+ {
+ src: branding.icon512Url || "/icons/icon-512.png",
+ sizes: "512x512",
+ type: "image/png",
+ purpose: "any",
+ },
+ {
+ src: branding.maskableIcon192Url || "/icons/icon-maskable-192.png",
+ sizes: "192x192",
+ type: "image/png",
+ purpose: "maskable",
+ },
+ {
+ src: branding.maskableIcon512Url || "/icons/icon-maskable-512.png",
+ sizes: "512x512",
+ type: "image/png",
+ purpose: "maskable",
+ },
],
};
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 01a0ee6..bd28ae5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,7 +5,7 @@ import { auth } from "@/auth";
import { Button } from "@/components/ui/button";
import { getBranding } from "@/lib/business/branding";
import { getPrimaryBusiness } from "@/lib/business/get-primary-business";
-import { hasPermission } from "@/lib/auth/permissions";
+import { hasPermission, isSuperAdmin } from "@/lib/auth/permissions";
import { Permission } from "@/generated/prisma/enums";
import { prisma } from "@/lib/db/prisma";
import { WelcomeInstallCard } from "@/features/pwa/components/welcome-install-card";
@@ -14,10 +14,14 @@ import { WelcomeInstallCard } from "@/features/pwa/components/welcome-install-ca
* The unauthenticated entry point — always shown at `/` before
* authentication, per the brief's "Welcome routing" requirements.
* Authenticated visitors never see it: they're routed straight to their
- * role's home (customer → /home, barber → /staff, owner → /owner) below.
- * Unreachable at all before installation completes — src/proxy.ts
- * redirects every non-exempt route (including this one) to /install
- * until ApplicationInstallation flips to INSTALLED.
+ * role's calendar (barber → /staff, owner/super admin → /owner/calendar)
+ * or customer home below. This is also where a bare sign-in with no
+ * `callbackUrl` ends up — see safeRedirectPath's fallback in
+ * sign-in-form.tsx — so it's the one place that has to get every role
+ * right, not just staffProfile holders. Unreachable at all before
+ * installation completes — src/proxy.ts redirects every non-exempt route
+ * (including this one) to /install until ApplicationInstallation flips
+ * to INSTALLED.
*/
export default async function WelcomePage() {
const session = await auth();
@@ -27,6 +31,12 @@ export default async function WelcomePage() {
const canManageStaff = await hasPermission(session.user.id, Permission.MANAGE_STAFF);
redirect(canManageStaff ? "/owner" : "/staff");
}
+ // A Super Administrator has no StaffProfile by design (see
+ // isSuperAdmin) — without this check they'd fall through to the
+ // customer /home below instead of the staff shell + Calendar tab
+ // their nav role (see lib/navigation/nav-config.ts) actually gives
+ // them once they land somewhere in it.
+ if (await isSuperAdmin(session.user.id)) redirect("/owner/calendar");
redirect("/home");
}
diff --git a/src/components/navigation/bottom-nav.tsx b/src/components/navigation/bottom-nav.tsx
index 848d05a..ca74c7c 100644
--- a/src/components/navigation/bottom-nav.tsx
+++ b/src/components/navigation/bottom-nav.tsx
@@ -46,6 +46,8 @@ export interface BottomNavProps {
* role-aware component.
*/
variant?: "customer" | "staff";
+ /** Business-wide, Super Administrator-only display setting (see Business.bottomNavShowLabels) — defaults to the original icon+label layout when a caller doesn't pass it. */
+ showLabels?: boolean;
}
/**
@@ -54,7 +56,7 @@ export interface BottomNavProps {
* and pass it down — one less thing to get out of sync as routes are
* added in later phases.
*/
-export function BottomNav({ items, variant = "customer" }: BottomNavProps) {
+export function BottomNav({ items, variant = "customer", showLabels = true }: BottomNavProps) {
const pathname = usePathname();
const isStaff = variant === "staff";
const activeHref = resolveActiveHref(pathname, items);
@@ -85,14 +87,19 @@ export function BottomNav({ items, variant = "customer" }: BottomNavProps) {
key={href}
href={href}
aria-current={active ? "page" : undefined}
+ // Icon-only drops the flex-col label row entirely (not just
+ // hides the text) so the tap target re-centers vertically
+ // instead of leaving an empty gap where the label used to be.
+ aria-label={showLabels ? undefined : label}
className={cn(
- "flex flex-col items-center gap-1 rounded-lg px-3 py-1 transition-colors",
+ "flex items-center rounded-lg transition-colors",
+ showLabels ? "flex-col gap-1 px-3 py-1" : "justify-center px-4 py-2",
active ? (isStaff ? "text-white" : "text-ink") : "hover:text-ink",
isStaff && !active && "hover:text-white",
)}
>
-
- {label}
+
+ {showLabels && {label}}
);
})}
diff --git a/src/components/navigation/staff-shell.tsx b/src/components/navigation/staff-shell.tsx
index c5b305b..5ff2ed0 100644
--- a/src/components/navigation/staff-shell.tsx
+++ b/src/components/navigation/staff-shell.tsx
@@ -33,7 +33,7 @@ export async function StaffShell({
);
}
diff --git a/src/features/auth/components/sign-in-form.tsx b/src/features/auth/components/sign-in-form.tsx
index 7ed9317..3442e90 100644
--- a/src/features/auth/components/sign-in-form.tsx
+++ b/src/features/auth/components/sign-in-form.tsx
@@ -14,7 +14,12 @@ import { safeRedirectPath } from "@/lib/utils/safe-redirect";
export function SignInForm() {
const searchParams = useSearchParams();
- const callbackUrl = safeRedirectPath(searchParams.get("callbackUrl"), "/home");
+ // "/" rather than a hardcoded "/home" — the role isn't known client-side
+ // before sign-in completes, so a bare sign-in (no callbackUrl) routes
+ // through the root welcome page's own post-auth redirect, which already
+ // knows how to send a barber/owner/super admin to their Calendar tab
+ // instead of the customer home. See src/app/page.tsx.
+ const callbackUrl = safeRedirectPath(searchParams.get("callbackUrl"), "/");
const [formError, setFormError] = useState
- {MANAGE_SECTIONS.map((section) => (
+ {manageSections.map((section) => (
diff --git a/src/app/(owner)/owner/settings/app/page.tsx b/src/app/(owner)/owner/settings/app/page.tsx
new file mode 100644
index 0000000..4779bb4
--- /dev/null
+++ b/src/app/(owner)/owner/settings/app/page.tsx
@@ -0,0 +1,46 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
+import { prisma } from "@/lib/db/prisma";
+import { isSuperAdmin } from "@/lib/auth/permissions";
+import { getActingBusinessContext } from "@/lib/business/get-acting-business-context";
+import { parseSplashScreens } from "@/lib/business/branding";
+import { getBusinessProfile } from "@/services/business/business.service";
+import { AppIconSettingsForm } from "@/features/owner/components/app-icon-settings-form";
+
+export const metadata: Metadata = { title: "App Icon & Home Screen" };
+export const dynamic = "force-dynamic";
+
+/** Super Administrator only — not Owner, unlike every other /owner/settings/* page. See requireSuperAdminBusinessManager in features/owner/actions/business.ts for the matching action-layer check. */
+export default async function OwnerAppIconSettingsPage() {
+ const session = await auth();
+ if (!session?.user) redirect("/sign-in");
+
+ if (!(await isSuperAdmin(session.user.id))) redirect("/owner");
+
+ const context = await getActingBusinessContext();
+ if (!context) redirect("/staff");
+
+ const business = await getBusinessProfile(prisma, context.businessId);
+ if (!business) redirect("/owner");
+
+ return (
+ {children}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/features/owner/components/business-details-form.tsx b/src/features/owner/components/business-details-form.tsx
index bc60a2a..e9a89b7 100644
--- a/src/features/owner/components/business-details-form.tsx
+++ b/src/features/owner/components/business-details-form.tsx
@@ -3,7 +3,6 @@
import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { Button } from "@/components/ui/button";
-import { ColorPicker } from "@/components/ui/color-picker";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
@@ -22,9 +21,6 @@ export interface BusinessDetailsInitial {
welcomeBackgroundDesktopUrl: string | null;
welcomeBackgroundMobileUrl: string | null;
faviconUrl: string | null;
- appIconUrl: string | null;
- themeColor: string | null;
- backgroundColor: string | null;
phone: string;
email: string;
website: string;
@@ -69,9 +65,6 @@ export function BusinessDetailsForm({ initial }: { initial: BusinessDetailsIniti
welcomeBackgroundDesktopUrl: form.welcomeBackgroundDesktopUrl,
welcomeBackgroundMobileUrl: form.welcomeBackgroundMobileUrl,
faviconUrl: form.faviconUrl,
- appIconUrl: form.appIconUrl,
- themeColor: form.themeColor,
- backgroundColor: form.backgroundColor,
phone: form.phone || undefined,
email: form.email || undefined,
website: form.website || undefined,
@@ -152,17 +145,6 @@ export function BusinessDetailsForm({ initial }: { initial: BusinessDetailsIniti
category="branding"
hint="Browser tab icon. Falls back to the app default when unset."
/>
- Import from a Generator
+
+
+ + Generate a bundle at {" "} + progressier.com/pwa-icons-and-ios-splash-screen-generator and upload + the ZIP here — the icon and every splash screen it contains are imported automatically, no manual + resizing needed. +
+ void handleZipSelected(e.target.files)} + /> + + {importError && ( ++ {importError} +
+ )} + {importSuccessMessage && !importError && ( ++ {importSuccessMessage} +
+ )} + {importWarnings.length > 0 && ( +-
+ {importWarnings.map((w, i) => (
+
- {w} + ))} +
Preview
+
+
+
+ {form.icon512Url || form.appIconUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element -- local/user-supplied URL, same pattern as MediaPicker
+ 
+ ) : (
+
+
+ {(form.shortName || "A").charAt(0).toUpperCase()}
+
+ )}
+
+
+ {form.shortName || "App Name"}
+How the icon looks on a home screen
+Name & Colours
+
+ set("shortName", e.target.value)}
+ hint="Shown under the icon once someone adds this to their home screen. Keep it short."
+ />
+
+
+ set("themeColor", hex)} />
+ set("backgroundColor", hex)}
+ />
+
+ + Theme and background colour set the status bar and Android splash screen shown while the app opens + after installing. +
+Navigation
+
+ set("bottomNavShowLabels", checked)}
+ />
+
+ iOS Icon
+
+ set("appIconUrl", url)}
+ category="branding"
+ hint="A square image works best — used when someone adds this to their home screen on iPhone/iPad."
+ />
+
+ Android Icons
+
+ set("icon192Url", url)}
+ category="branding"
+ hint="Square, 192×192px."
+ />
+ set("icon512Url", url)}
+ category="branding"
+ hint="Square, 512×512px."
+ />
+ set("maskableIcon192Url", url)}
+ category="branding"
+ hint="Square, 192×192px. Keep the subject within the center ~80% — Android may crop this to a circle or rounded square."
+ />
+ set("maskableIcon512Url", url)}
+ category="branding"
+ hint="Square, 512×512px. Same center-safe-zone rule as above."
+ />
+
+ + Android/Chrome installs read these directly — each falls back to a neutral icon on its own if left + unset. +
+iOS Splash Screens
+
+ {form.splashScreens.length === 0 ? (
+
+ No splash screens imported yet — upload a ZIP above.
+ ) : ( + <> ++ {form.splashScreens.length} splash screen{form.splashScreens.length === 1 ? "" : "s"} imported +
+
+ {form.splashScreens.map((s, i) => (
+ // eslint-disable-next-line @next/next/no-img-element -- local/user-supplied URL, same pattern as MediaPicker
+ 
+ ))}
+
+
+
+ )}
+
+ {error && (
+
+ + {error} +
+ )} + {saved && !error && ( ++ Saved — changes are live immediately. +
+ )} + +
- set("themeColor", hex)} />
- set("backgroundColor", hex)} />
-