Development/services

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -13,14 +13,25 @@
   "dependencies": {
     "@base-ui/react": "^1.3.0",
     "@reduxjs/toolkit": "^2.11.2",
+    "@tiptap/extension-color": "^3.22.5",
+    "@tiptap/extension-placeholder": "^3.22.5",
+    "@tiptap/extension-text-style": "^3.22.5",
+    "@tiptap/extension-underline": "^3.22.5",
+    "@tiptap/pm": "^3.22.5",
+    "@tiptap/react": "^3.22.5",
+    "@tiptap/starter-kit": "^3.22.5",
+    "@types/sanitize-html": "^2.16.1",
     "axios": "1.14.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "lucide-react": "^1.7.0",
     "next": "16.2.1",
     "react": "19.2.4",
+    "react-day-picker": "^9.14.0",
     "react-dom": "19.2.4",
     "react-redux": "^9.2.0",
+    "sanitize-html": "^2.17.3",
     "shadcn": "^4.2.0",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0"

src/app/(protected)/account/page.tsx

@@ -5,7 +5,9 @@ import { UserProfilePanel } from "@/components/organisms";
 import { getMessages } from "@/i18n/config";
 import { getServerLocale } from "@/i18n/server";
 import { fetchAccountBrands } from "@/lib/brands-api";
+import { buildPageTitle } from "@/lib/page-metadata";
 import { requireProtectedRouteAccess } from "@/lib/protected-route";
+import { fetchPublicServices } from "@/lib/services-api";
 import { fetchUserProfileById } from "@/lib/users-api";
 
 type AccountPageProps = {
@@ -22,9 +24,28 @@ function getSearchParamValue(
   return value ?? null;
 }
 
-export async function generateMetadata(): Promise<Metadata> {
+export async function generateMetadata({
+  searchParams,
+}: AccountPageProps): Promise<Metadata> {
   const locale = await getServerLocale();
   const messages = getMessages(locale);
+  const resolvedSearchParams = (await searchParams) ?? {};
+  const requestedUserId = getSearchParamValue(resolvedSearchParams.id)?.trim();
+
+  if (requestedUserId) {
+    const cookieStore = await cookies();
+    const accessToken = cookieStore.get("rzp_at")?.value;
+    const targetUser = accessToken
+      ? await fetchUserProfileById(requestedUserId, accessToken).catch(() => null)
+      : null;
+    const fullName = targetUser
+      ? `${targetUser.first_name} ${targetUser.last_name}`.trim()
+      : null;
+
+    return {
+      title: buildPageTitle(messages.dashboard.profile, fullName),
+    };
+  }
 
   return {
     title: messages.dashboard.account,
@@ -53,7 +74,13 @@ export default async function AccountPage({ searchParams }: AccountPageProps) {
     notFound();
   }
 
-  const brands = await fetchAccountBrands(requestedUserId, accessToken).catch(() => []);
+  const [brands, services] = await Promise.all([
+    fetchAccountBrands(requestedUserId, accessToken).catch(() => []),
+    fetchPublicServices(
+      { owner_id: requestedUserId, direct_only: true },
+      accessToken,
+    ).catch(() => []),
+  ]);
 
-  return <UserProfilePanel user={targetUser} brands={brands} />;
+  return <UserProfilePanel user={targetUser} brands={brands} services={services} />;
 }

src/app/(protected)/brands/page.tsx

@@ -1,15 +1,19 @@
+import type { Metadata } from "next";
 import { cookies } from "next/headers";
 import { notFound } from "next/navigation";
 import { AccountBrandsSection } from "@/components/organisms/account-brands-section/account-brands-section";
 import { requireProtectedRouteAccess } from "@/lib/protected-route";
 import {
   fetchMyBrands,
   fetchBrandById,
-  fetchActiveBrands,
+  fetchActiveBrandsPage,
   fetchAccountBrands,
   fetchBrandCategories,
   fetchBrandTeamWorkspace,
 } from "@/lib/brands-api";
+import { fetchPublicServices } from "@/lib/services-api";
+import { fetchMarketplaceFacets } from "@/lib/marketplace-api";
+import { fetchBrandForReview } from "@/lib/moderation-api";
 import { BrandsUsoPage } from "@/components/organisms/brands-uso-page";
 import { BrandsUcrPage } from "@/components/organisms/brands-ucr-page";
 import { BrandDetail } from "@/components/organisms/brand-detail";
@@ -18,7 +22,9 @@ import { BrandTeamWorkspace } from "@/components/organisms/brand-team-workspace"
 import { fetchUserProfileById } from "@/lib/users-api";
 import { getMessages } from "@/i18n/config";
 import { getServerLocale } from "@/i18n/server";
-import type { Brand, PublicUserProfile } from "@/types";
+import { buildPageTitle } from "@/lib/page-metadata";
+import type { Brand, BrandStatus, PublicUserProfile } from "@/types";
+import type { ModerationBrandDetail } from "@/types/moderation";
 
 type BrandsPageProps = {
   searchParams?: Promise<Record<string, string | string[] | undefined>>;
@@ -58,6 +64,113 @@ async function fetchBrandOwnersById(
   );
 }
 
+function mapModerationBrandToBrand(brand: ModerationBrandDetail): Brand {
+  return {
+    id: brand.id,
+    name: brand.name,
+    description: brand.description ?? undefined,
+    status: brand.status as BrandStatus,
+    owner_id: brand.owner.id,
+    logo_url: brand.logo_url ?? undefined,
+    gallery: (brand.gallery ?? []).map((item, index) => ({
+      id: `${brand.id}-gallery-${index}`,
+      media_id: `${brand.id}-gallery-media-${index}`,
+      url: item.url,
+      order: item.order ?? index,
+    })),
+    branches: (brand.branches ?? []).map((branch) => ({
+      id: branch.id,
+      brand_id: brand.id,
+      name: branch.name,
+      description: branch.description ?? undefined,
+      address1: branch.address1,
+      address2: branch.address2 ?? undefined,
+      phone: branch.phone ?? undefined,
+      email: branch.email ?? undefined,
+      is_24_7: branch.is_24_7 ?? false,
+      opening: branch.opening ?? undefined,
+      closing: branch.closing ?? undefined,
+      breaks: [],
+      cover_url: branch.cover_url ?? undefined,
+    })),
+    categories: brand.categories ?? [],
+    rating: null,
+    rating_count: 0,
+    my_rating: null,
+    created_at: brand.created_at,
+    updated_at: brand.updated_at ?? brand.created_at,
+  };
+}
+
+function mapModerationBrandOwnerToProfile(brand: ModerationBrandDetail): PublicUserProfile {
+  return {
+    id: brand.owner.id,
+    first_name: brand.owner.first_name,
+    last_name: brand.owner.last_name,
+    email: brand.owner.email,
+    type: "uso",
+    avatar_url: brand.owner.avatar_url ?? null,
+    created_at: brand.owner.created_at ?? brand.created_at,
+    updated_at: brand.owner.created_at ?? brand.created_at,
+  };
+}
+
+export async function generateMetadata({
+  searchParams,
+}: BrandsPageProps): Promise<Metadata> {
+  const [locale, resolvedParams, cookieStore] = await Promise.all([
+    getServerLocale(),
+    searchParams ?? Promise.resolve({}),
+    cookies(),
+  ]);
+  const messages = getMessages(locale);
+  const progress = getStringParam(resolvedParams, "progress");
+  const brandId = getStringParam(resolvedParams, "id");
+  const accountUserId = getStringParam(resolvedParams, "account");
+  const accessToken = cookieStore.get("rzp_at")?.value ?? "";
+
+  if (accountUserId && !progress && !brandId) {
+    const targetUser = await fetchUserProfileById(accountUserId, accessToken).catch(() => null);
+    const fullName = targetUser
+      ? `${targetUser.first_name} ${targetUser.last_name}`.trim()
+      : null;
+
+    return {
+      title: buildPageTitle(messages.profile.brandsSectionTitle, fullName),
+    };
+  }
+
+  if (progress === "create") {
+    return {
+      title: buildPageTitle(messages.dashboard.brands, messages.brands.createBrand),
+    };
+  }
+
+  if (brandId) {
+    const brand = await fetchBrandById(brandId, accessToken).catch(() => null);
+
+    if (progress === "edit") {
+      return {
+        title: buildPageTitle(messages.brands.editBrand, brand?.name),
+      };
+    }
+
+    if (progress === "team") {
+      return {
+        title: buildPageTitle(messages.brands.teamWorkspace, brand?.name),
+      };
+    }
+
+    return {
+      title: buildPageTitle(messages.brands.detailTitle, brand?.name),
+    };
+  }
+
+  return {
+    title: messages.dashboard.brands,
+  };
+}
+
 export default async function BrandsPage({ searchParams }: BrandsPageProps) {
   const resolvedParams = await (searchParams ?? Promise.resolve({}));
   const user = await requireProtectedRouteAccess("/brands", resolvedParams);
@@ -137,6 +250,26 @@ export default async function BrandsPage({ searchParams }: BrandsPageProps) {
 
   // ── Brand detail view (?id=<brand_id>) ────────────────────────────────────
   if (brandId && !progress) {
+    if (user.type === "admin") {
+      const moderationBrand = await fetchBrandForReview(brandId, accessToken).catch(() => null);
+
+      if (!moderationBrand) {
+        return (
+          <div style={{ padding: "2rem", color: "var(--app-text-muted)", fontSize: "var(--font-size-small)" }}>
+            Brand not found.
+          </div>
+        );
+      }
+
+      return (
+        <BrandDetail
+          brand={mapModerationBrandToBrand(moderationBrand)}
+          currentUserId={user.id}
+          owner={mapModerationBrandOwnerToProfile(moderationBrand)}
+        />
+      );
+    }
+
     const brand = await fetchBrandById(brandId, accessToken).catch(() => null);
 
     if (!brand) {
@@ -225,8 +358,37 @@ export default async function BrandsPage({ searchParams }: BrandsPageProps) {
 
   // ── UCR default view (should only land here with ?id, handled above) ───────
   // Fallback: show the active brands gallery
-  const brands = await fetchActiveBrands(accessToken).catch(() => []);
-  const ownersById = await fetchBrandOwnersById(brands, accessToken);
+  const activeBrandCategoryId =
+    getStringParam(resolvedParams, "category") ??
+    getStringParam(resolvedParams, "brand_category_id");
+  const [brandsPage, featuredServices, marketplaceFacets] = await Promise.all([
+    fetchActiveBrandsPage(accessToken, {
+      page: 1,
+      limit: 24,
+      ...(activeBrandCategoryId && { brand_category_id: activeBrandCategoryId }),
+    }).catch(() => ({
+      brands: [],
+      meta: { page: 1, limit: 24, total_count: 0, has_more: false },
+    })),
+    fetchPublicServices({}, accessToken).catch(() => []),
+    fetchMarketplaceFacets(accessToken).catch(() => ({
+      service_categories: [],
+      brand_categories: [],
+    })),
+  ]);
+  const ownersById = await fetchBrandOwnersById(brandsPage.brands, accessToken);
+  const activeServices = featuredServices.filter((s) => s.status === "ACTIVE");
 
-  return <BrandsUcrPage brands={brands} ownersById={ownersById} />;
+  return (
+    <BrandsUcrPage
+      key={activeBrandCategoryId ?? "all"}
+      brands={brandsPage.brands}
+      ownersById={ownersById}
+      featuredServices={activeServices}
+      accessToken={accessToken}
+      initialMeta={brandsPage.meta}
+      brandCategories={marketplaceFacets.brand_categories}
+      activeBrandCategoryId={activeBrandCategoryId}
+    />
+  );
 }

src/app/(protected)/dashboard/page.tsx

@@ -1,4 +1,16 @@
+import type { Metadata } from "next";
 import { ProtectedComingSoonRoute } from "@/components/organisms/protected-coming-soon-route";
+import { getMessages } from "@/i18n/config";
+import { getServerLocale } from "@/i18n/server";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const locale = await getServerLocale();
+  const messages = getMessages(locale);
+
+  return {
+    title: messages.dashboard.dashboardPage,
+  };
+}
 
 export default function DashboardPage() {
   return <ProtectedComingSoonRoute path="/dashboard" />;