Reviews & Layout

Scaled back google reviews to just get the star rating and number of reviews as google limits the number of reviews to 5.

Also removed the reviews tab from homepage.

And updated Appointments button layout

src/app/(customer)/appointments/[id]/page.tsx

@@ -154,37 +154,34 @@ export default async function AppointmentDetailsPage({
           )}
         </Card>
 
-        <div className="flex flex-wrap gap-3">
+        <div className="flex flex-col gap-3">
           <a
             href={`/api/appointments/${appointment.id}/calendar.ics${token ? `?token=${token}` : ""}`}
-            className="rounded-md border-line flex items-center gap-2 border bg-white px-5 py-3 text-sm font-bold"
+            className="rounded-md border-line flex w-full items-center justify-center gap-2 border bg-white px-5 py-3 text-sm font-bold"
           >
             <CalendarPlus className="text-accent h-4 w-4" aria-hidden="true" /> Add to Calendar
           </a>
           {business.phone && (
             <a
               href={`tel:${business.phone}`}
-              className="rounded-md border-line flex items-center gap-2 border bg-white px-5 py-3 text-sm font-bold"
+              className="rounded-md border-line flex w-full items-center justify-center gap-2 border bg-white px-5 py-3 text-sm font-bold"
             >
               <Phone className="text-accent h-4 w-4" aria-hidden="true" /> Contact Business
             </a>
           )}
-        </div>
-
-        <div className="flex flex-wrap gap-3">
           {RESCHEDULABLE_STATUSES.has(appointment.status) && (
             <Link
               href={`/appointments/${appointment.id}/reschedule${token ? `?token=${token}` : ""}`}
-              className="rounded-md border-line border bg-white px-5 py-3 text-sm font-bold"
+              className="rounded-md border-line block w-full border bg-white px-5 py-3 text-center text-sm font-bold"
             >
               Reschedule
             </Link>
           )}
           {CANCELLABLE_STATUSES.has(appointment.status) && (
-            <CancelAppointmentDialog appointmentId={appointment.id} guestToken={token} />
+            <CancelAppointmentDialog appointmentId={appointment.id} guestToken={token} className="w-full" />
           )}
           {REBOOKABLE_STATUSES.has(appointment.status) && (
-            <BookAgainButton appointmentId={appointment.id} guestToken={token} />
+            <BookAgainButton appointmentId={appointment.id} guestToken={token} className="w-full" />
           )}
         </div>
       </main>

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

@@ -275,7 +275,6 @@ export default async function CustomerHomePage() {
           services={services}
           categories={categories.map((c) => ({ id: c.id, name: c.name }))}
           portfolioImages={portfolioImages}
-          reviews={reviews}
           description={business.description}
           phone={business.phone}
           email={business.email}

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

@@ -7,7 +7,6 @@ import { hasPermission } from "@/lib/auth/permissions";
 import { Permission } from "@/generated/prisma/enums";
 import { getActingBusinessContext } from "@/lib/business/get-acting-business-context";
 import { getBusinessProfile } from "@/services/business/business.service";
-import { listReviewsForOwner } from "@/services/reviews/review-management.service";
 import { ReviewsManager } from "@/features/owner/components/reviews-manager";
 
 export const metadata: Metadata = { title: "Reviews" };
@@ -23,28 +22,15 @@ export default async function OwnerReviewsPage() {
   const context = await getActingBusinessContext();
   if (!context) redirect("/staff");
 
-  const [business, reviews] = await Promise.all([
-    getBusinessProfile(prisma, context.businessId),
-    listReviewsForOwner(prisma, context.businessId),
-  ]);
+  const business = await getBusinessProfile(prisma, context.businessId);
   if (!business) redirect("/owner");
 
   return (
     <SettingsPageShell title="Reviews">
       <ReviewsManager
         initialGooglePlaceId={business.googlePlaceId ?? ""}
-        initialReviewsMinRating={business.settings?.reviewsMinRating ?? null}
-        initialReviewsExcludeRatingOnly={business.settings?.reviewsExcludeRatingOnly ?? false}
         googleRating={business.googleRating ? Number(business.googleRating) : null}
         googleRatingCount={business.googleRatingCount}
-        reviews={reviews.map((r) => ({
-          id: r.id,
-          authorName: r.authorName,
-          rating: r.rating,
-          text: r.text,
-          relativeTimeDescription: r.relativeTimeDescription,
-          isHidden: r.isHidden,
-        }))}
       />
     </SettingsPageShell>
   );

src/app/api/cron/sync-google-reviews/route.ts

@@ -13,9 +13,10 @@ import { syncGoogleReviewsForAllBusinesses } from "@/services/reviews/review-syn
  * that, and the customer app never calls Google directly regardless (see
  * src/services/reviews/reviews.service.ts).
  *
- * Safe to run concurrently with itself: syncGoogleReviewsForBusiness's
- * Review upsert is keyed on (businessId, externalId), so an overlapping
- * call just re-writes the same rows, never duplicates them.
+ * Safe to run concurrently with itself: syncGoogleReviewsForBusiness only
+ * overwrites Business.googleRating/googleRatingCount with whatever Google
+ * returns, so an overlapping call just re-writes the same two columns,
+ * never duplicates anything.
  */
 export async function POST(request: Request) {
   const secret = process.env.CRON_SECRET;

src/app/book/review/page.tsx

@@ -58,7 +58,7 @@ export default async function BookReviewPage() {
 
       <main className="mx-auto max-w-2xl space-y-4 px-6 py-6">
         <Card className="space-y-6 p-6">
-          <div className="flex items-start justify-between">
+          <div className="hidden flex items-start justify-between">
             <span className="text-muted text-[10px] font-bold tracking-widest uppercase">
               Business
             </span>
@@ -70,7 +70,7 @@ export default async function BookReviewPage() {
             </Link>
           </div>
 
-          <div className="border-line space-y-4 border-t pt-6">
+          <div className="space-y-4 pt-2">
             <div className="flex items-center justify-between">
               <div>
                 <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">

src/app/globals.css

@@ -13,6 +13,7 @@
   --color-ink: #111b15;
   --color-stone: #f4f6f4;
   --color-surface: #ffffff;
+  --color-pure-cloud: #f5f6f8;
   /* Darkened from the templates' #6c7870 — that value was ~4.2:1 on
      --color-stone (this app's default body background), just under WCAG
      AA's 4.5:1 for normal text, and text-muted is used 300+ times across