feat: template details page

src/app/dashboard/[teamSlug]/templates/(tabs)/builds/page.tsx

@@ -1,11 +1,16 @@
-import BuildsHeader from '@/features/dashboard/templates/builds/header'
+'use client'
+
+import { AllBuildsHeader } from '@/features/dashboard/templates/builds/all-builds-header'
 import BuildsTable from '@/features/dashboard/templates/builds/table'
+import useFilters from '@/features/dashboard/templates/builds/use-filters'
 
 export default function TemplateBuildsPage() {
+  const { statuses, buildIdOrTemplate } = useFilters()
+
   return (
     <div className="h-full min-h-0 flex-1 p-3 md:p-6 flex flex-col gap-3">
-      <BuildsHeader />
-      <BuildsTable />
+      <AllBuildsHeader />
+      <BuildsTable filters={{ statuses, buildIdOrTemplate }} />
     </div>
   )
 }

src/app/dashboard/[teamSlug]/templates/[templateId]/(detail-tabs)/builds/page.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { use, useCallback } from 'react'
+import type { ListedBuildModel } from '@/core/modules/builds/models'
+import BuildsTable from '@/features/dashboard/templates/builds/table'
+import { TemplateBuildsHeader } from '@/features/dashboard/templates/builds/template-builds-header'
+import useTemplateBuildsFilters from '@/features/dashboard/templates/builds/use-template-builds-filters'
+import { isValidUuid } from '@/features/dashboard/templates/tags/helpers'
+
+export default function TemplateDetailBuildsPage({
+  params,
+}: PageProps<'/dashboard/[teamSlug]/templates/[templateId]'>) {
+  const { templateId } = use(params)
+  const { statuses, q } = useTemplateBuildsFilters()
+
+  const trimmed = q?.trim() ?? ''
+  const isSearching = trimmed.length > 0
+  const isValidSearch = !isSearching || isValidUuid(trimmed)
+
+  const postFilter = useCallback(
+    (build: ListedBuildModel) => build.templateId === templateId,
+    [templateId]
+  )
+
+  return (
+    <div className="h-full min-h-0 flex-1 p-3 md:p-6 flex flex-col gap-3">
+      <TemplateBuildsHeader />
+      <BuildsTable
+        filters={{
+          statuses,
+          buildIdOrTemplate:
+            isSearching && isValidSearch ? trimmed : templateId,
+        }}
+        postFilter={isSearching && isValidSearch ? postFilter : undefined}
+        disabled={isSearching && !isValidSearch}
+        showTemplateColumn={false}
+      />
+    </div>
+  )
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/(detail-tabs)/layout.tsx

@@ -0,0 +1,25 @@
+import { Suspense } from 'react'
+import TemplateDetailTabs from '@/features/dashboard/templates/detail/tabs'
+import TemplateTitleBinder from '@/features/dashboard/templates/detail/title-binder'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
+
+export default async function TemplateDetailLayout({
+  children,
+  params,
+}: LayoutProps<'/dashboard/[teamSlug]/templates/[templateId]'>) {
+  const { teamSlug, templateId } = await params
+
+  prefetch(trpc.templates.getTemplate.queryOptions({ teamSlug, templateId }))
+
+  return (
+    <HydrateClient>
+      <div className="pt-2 flex-1 md:pt-3 min-h-0 h-full flex flex-col">
+        <Suspense fallback={null}>
+          <TemplateTitleBinder teamSlug={teamSlug} templateId={templateId} />
+        </Suspense>
+        <TemplateDetailTabs teamSlug={teamSlug} templateId={templateId} />
+        {children}
+      </div>
+    </HydrateClient>
+  )
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/(detail-tabs)/loading.tsx

@@ -0,0 +1,5 @@
+import LoadingLayout from '@/features/dashboard/loading-layout'
+
+export default function TemplateDetailLoading() {
+  return <LoadingLayout />
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/(detail-tabs)/overview/page.tsx

@@ -0,0 +1,22 @@
+import { Suspense } from 'react'
+import TemplateOverview from '@/features/dashboard/templates/detail/overview'
+import { TemplateOverviewSkeleton } from '@/features/dashboard/templates/detail/overview/skeleton'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
+
+export default async function TemplateOverviewPage({
+  params,
+}: PageProps<'/dashboard/[teamSlug]/templates/[templateId]'>) {
+  const { teamSlug, templateId } = await params
+
+  prefetch(trpc.templates.getTemplate.queryOptions({ teamSlug, templateId }))
+
+  return (
+    <HydrateClient>
+      <div className="p-6 md:p-10 flex flex-col gap-6 w-full max-w-[600px] mx-auto">
+        <Suspense fallback={<TemplateOverviewSkeleton />}>
+          <TemplateOverview teamSlug={teamSlug} templateId={templateId} />
+        </Suspense>
+      </div>
+    </HydrateClient>
+  )
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/(detail-tabs)/tags/[tag]/page.tsx

@@ -0,0 +1,35 @@
+import { Suspense } from 'react'
+import LoadingLayout from '@/features/dashboard/loading-layout'
+import { TAG_HISTORY_PAGE_LIMIT } from '@/features/dashboard/templates/tags/constants'
+import TagHistoryView from '@/features/dashboard/templates/tags/history/tag-history-view'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
+
+export default async function TemplateTagHistoryPage({
+  params,
+}: PageProps<'/dashboard/[teamSlug]/templates/[templateId]/tags/[tag]'>) {
+  const { teamSlug, templateId, tag } = await params
+  const decodedTag = decodeURIComponent(tag)
+
+  prefetch(
+    trpc.templates.getTagAssignments.infiniteQueryOptions({
+      teamSlug,
+      templateId,
+      tag: decodedTag,
+      limit: TAG_HISTORY_PAGE_LIMIT,
+    })
+  )
+
+  return (
+    <HydrateClient>
+      <div className="h-full min-h-0 flex-1 py-6 px-8 md:px-11 flex flex-col gap-3 max-w-[924px] mx-auto w-full">
+        <Suspense fallback={<LoadingLayout />}>
+          <TagHistoryView
+            teamSlug={teamSlug}
+            templateId={templateId}
+            tag={decodedTag}
+          />
+        </Suspense>
+      </div>
+    </HydrateClient>
+  )
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/(detail-tabs)/tags/page.tsx

@@ -0,0 +1,32 @@
+import { Suspense } from 'react'
+import LoadingLayout from '@/features/dashboard/loading-layout'
+import { TAGS_PAGE_LIMIT } from '@/features/dashboard/templates/tags/constants'
+import TagsTable from '@/features/dashboard/templates/tags/table'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
+
+export default async function TemplateTagsPage({
+  params,
+}: PageProps<'/dashboard/[teamSlug]/templates/[templateId]'>) {
+  const { teamSlug, templateId } = await params
+
+  prefetch(
+    trpc.templates.getTagGroups.infiniteQueryOptions({
+      teamSlug,
+      templateId,
+      limit: TAGS_PAGE_LIMIT,
+      search: undefined,
+      sort: undefined,
+    })
+  )
+  prefetch(trpc.templates.getTagCount.queryOptions({ teamSlug, templateId }))
+
+  return (
+    <HydrateClient>
+      <div className="h-full min-h-0 flex-1 pt-6 pb-2 md:pt-10 md:pb-4 px-8 md:px-11 flex flex-col gap-3 max-w-[924px] mx-auto w-full">
+        <Suspense fallback={<LoadingLayout />}>
+          <TagsTable teamSlug={teamSlug} templateId={templateId} />
+        </Suspense>
+      </div>
+    </HydrateClient>
+  )
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/error.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { TRPCClientError } from '@trpc/client'
+import { notFound } from 'next/navigation'
 import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
 
 export default function TemplateDetailsError({
@@ -9,5 +11,9 @@ export default function TemplateDetailsError({
   error: Error & { digest?: string }
   reset: () => void
 }) {
+  if (error instanceof TRPCClientError && error.data?.code === 'NOT_FOUND') {
+    notFound()
+  }
+
   return <DashboardRouteError error={error} reset={reset} />
 }

src/app/dashboard/[teamSlug]/templates/[templateId]/not-found.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { Button } from '@/ui/primitives/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+} from '@/ui/primitives/card'
+import { ArrowLeftIcon } from '@/ui/primitives/icons'
+
+export default function TemplateNotFound() {
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center">
+      <Card className="w-full max-w-md border border-stroke bg-bg-1/40 backdrop-blur-lg">
+        <CardHeader className="text-center">
+          <span className="prose-value-big">404</span>
+          <CardDescription>Template not found</CardDescription>
+        </CardHeader>
+        <CardContent className="text-center text-fg-secondary">
+          <p>We couldn’t find this template in your team.</p>
+        </CardContent>
+        <CardFooter>
+          <Button
+            variant="secondary"
+            onClick={() => window.history.back()}
+            className="w-full"
+          >
+            <ArrowLeftIcon />
+            Go Back
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}

src/app/dashboard/[teamSlug]/templates/[templateId]/page.tsx

@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation'
+import { PROTECTED_URLS } from '@/configs/urls'
+
+export default async function TemplateDetailPage({
+  params,
+}: PageProps<'/dashboard/[teamSlug]/templates/[templateId]'>) {
+  const { teamSlug, templateId } = await params
+
+  redirect(PROTECTED_URLS.TEMPLATE_OVERVIEW(teamSlug, templateId))
+}

src/configs/layout.ts

@@ -38,8 +38,8 @@
   }),
   '/dashboard/*/sandboxes/*/*': (pathname) => {
     const parts = pathname.split('/')
     const teamSlug = parts[2]!
     const sandboxId = parts[4]!
 
     return {
       title: [
@@ -70,8 +70,8 @@
   }),
   '/dashboard/*/templates/*/builds/*': (pathname) => {
     const parts = pathname.split('/')
     const teamSlug = parts[2]!
     const buildId = parts.pop()!
     const buildIdSliced = `${buildId.slice(0, 6)}...${buildId.slice(-6)}`
 
     return {
@@ -89,6 +89,15 @@
       },
     }
   },
+  '/dashboard/*/templates/*/overview': (pathname) =>
+    templateDetailLayoutConfig(pathname),
+  '/dashboard/*/templates/*/tags': (pathname) =>
+    templateDetailLayoutConfig(pathname),
+  '/dashboard/*/templates/*/tags/*': (pathname) =>
+    templateDetailLayoutConfig(pathname),
+  // Keep this more specific glob ahead of /templates/*/builds/* (build detail).
+  '/dashboard/*/templates/*/builds': (pathname) =>
+    templateDetailLayoutConfig(pathname),
 
   // integrations
   '/dashboard/*/webhooks': () => ({
@@ -128,7 +137,7 @@
   }),
   '/dashboard/*/billing/plan': (pathname) => {
     const parts = pathname.split('/')
     const teamSlug = parts[2]!
 
     return {
       title: [
@@ -142,7 +151,7 @@
   },
   '/dashboard/*/billing/plan/select': (pathname) => {
     const parts = pathname.split('/')
     const teamSlug = parts[2]!
 
     return {
       title: [
@@ -163,6 +172,29 @@
   }),
 }
 
+// Pathname fallback for detail tabs; usePageTitle replaces with the friendly template name once data loads.
+function templateDetailLayoutConfig(pathname: string): DashboardLayoutConfig {
+  const parts = pathname.split('/')
+  const teamSlug = parts[2]!
+  const templateId = parts[4]!
+  const templateIdSliced =
+    templateId.length > 14
+      ? `${templateId.slice(0, 6)}...${templateId.slice(-6)}`
+      : templateId
+
+  return {
+    title: [
+      {
+        label: 'Templates',
+        href: PROTECTED_URLS.TEMPLATES_LIST(teamSlug),
+      },
+      { label: templateIdSliced },
+    ],
+    type: 'custom',
+    copyValue: templateId,
+  }
+}
+
 /**
  * Returns the layout config for a given dashboard pathname.
  * @param pathname - The current route pathname