@percepta/create 3.5.2 → 3.6.0

package/templates/webapp/e2e/rbac.spec.ts

@@ -18,10 +18,12 @@ test.describe("RBAC access", () => {
     page,
   }) => {
     test.setTimeout(60_000);
-    await signIn(page, users.customerAdmin, "/admin?tab=assignments");
+    await signIn(page, users.customerAdmin, "/settings?tab=assignments");
 
-    await expect(page.getByRole("heading", { name: "RBAC" })).toBeVisible();
-    await expect(page.getByRole("link", { name: "Admin" })).toBeVisible();
+    await expect(
+      page.getByRole("heading", { name: "Access control" }),
+    ).toBeVisible();
+    await expect(page.getByRole("link", { name: "Settings" })).toBeVisible();
 
     const userAssignments = page.getByRole("button", {
       name: "User assignments",
@@ -67,18 +69,18 @@ test.describe("RBAC access", () => {
     await expectAppAccess(browser, users.nonAppUser, false);
 
     await page.goto("/");
-    await expect(page.getByRole("heading", { name: /Welcome to/ })).toHaveCount(
-      0,
-    );
+    await expect(getAppHomeHeading(page)).toHaveCount(0);
     await expectNotFound(page);
   });
 
-  test("app admin can see RBAC and main app but cannot edit default role mappings", async ({
+  test("app admin can see access control and main app but cannot edit default role mappings", async ({
     page,
   }) => {
-    await signIn(page, users.appAdmin, "/admin?tab=assignments");
+    await signIn(page, users.appAdmin, "/settings?tab=assignments");
 
-    await expect(page.getByRole("heading", { name: "RBAC" })).toBeVisible();
+    await expect(
+      page.getByRole("heading", { name: "Access control" }),
+    ).toBeVisible();
     await expect(
       page
         .getByText("Only customer admins can edit default application roles.")
@@ -93,33 +95,31 @@ test.describe("RBAC access", () => {
     ).toHaveAttribute("aria-disabled", "true");
 
     await page.goto("/");
-    await expect(
-      page.getByRole("heading", { name: /Welcome to/ }),
-    ).toBeVisible();
+    await expect(getAppHomeHeading(page)).toBeVisible();
   });
 
-  test("app user can enter the main app but cannot reach admin", async ({
+  test("app user can enter the main app but cannot reach settings", async ({
     page,
   }) => {
     await signIn(page, users.appUser, "/");
 
-    await expect(
-      page.getByRole("heading", { name: /Welcome to/ }),
-    ).toBeVisible();
-    await expect(page.getByRole("link", { name: "Admin" })).toHaveCount(0);
+    await expect(getAppHomeHeading(page)).toBeVisible();
+    await expect(page.getByRole("link", { name: "Settings" })).toHaveCount(0);
 
-    await page.goto("/admin");
-    await expect(page.getByRole("heading", { name: "RBAC" })).toHaveCount(0);
+    await page.goto("/settings");
+    await expect(
+      page.getByRole("heading", { name: "Access control" }),
+    ).toHaveCount(0);
     await expectNotFound(page);
   });
 
   test("non app user cannot enter the app", async ({ page }) => {
     await signIn(page, users.nonAppUser, "/");
 
-    await expect(page.getByRole("heading", { name: /Welcome to/ })).toHaveCount(
-      0,
-    );
-    await expect(page.getByRole("heading", { name: "RBAC" })).toHaveCount(0);
+    await expect(getAppHomeHeading(page)).toHaveCount(0);
+    await expect(
+      page.getByRole("heading", { name: "Access control" }),
+    ).toHaveCount(0);
     await expectNotFound(page);
   });
 });
@@ -140,6 +140,10 @@ async function expectNotFound(page: Page) {
   ).toBeVisible();
 }
 
+function getAppHomeHeading(page: Page) {
+  return page.getByRole("heading", { name: /Good afternoon/ });
+}
+
 async function expectAppAccess(
   browser: Browser,
   email: string,
@@ -155,9 +159,7 @@ async function expectAppAccess(
 
         try {
           await signIn(page, email, "/");
-          return await page
-            .getByRole("heading", { name: /Welcome to/ })
-            .count();
+          return await getAppHomeHeading(page).count();
         } finally {
           await context.close();
         }

package/templates/webapp/package.json.template

@@ -52,10 +52,10 @@
     "@opentelemetry/exporter-trace-otlp-proto": "^0.203.0",
     "@opentelemetry/sdk-node": "^0.203.0",
     "@__REPO_NAME__/auth": "workspace:*",
-    "@percepta/access-control": "0.7.0",
+    "@percepta/access-control": "0.8.0",
     "@percepta/ai": "0.1.0",
     "@percepta/database": "0.1.1",
-    "@percepta/design": "0.3.2",
+    "@percepta/design": "0.4.0",
     "@percepta/inngest": "0.1.0",
     "@percepta/logger": "0.1.0",
     "@percepta/next-utils": "0.2.1",

package/templates/webapp/src/app/(app)/layout.tsx

@@ -20,7 +20,7 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
     canManageDefaultRoles(session.user.id),
     canManageAppRoles(session.user.id),
   ]);
-  const showAdminLink = canManageDefaults || canManageRoles;
+  const showSettingsLink = canManageDefaults || canManageRoles;
 
   if (!canAccessApp) {
     notFound();
@@ -28,13 +28,9 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
 
   return (
     <>
-      <Header showAdminLink={showAdminLink} />
-      <main>
-        <div className="py-8">
-          <div className="mx-auto max-w-6xl">
-            <div className="rounded-lg bg-white p-8">{children}</div>
-          </div>
-        </div>
+      <Header showSettingsLink={showSettingsLink} />
+      <main className="app-shell-main">
+        <div className="app-home">{children}</div>
       </main>
     </>
   );

package/templates/webapp/src/app/(app)/page.tsx

@@ -5,15 +5,156 @@ export const metadata: Metadata = {
   description: "__APP_TITLE__",
 };
 
+const metrics = [
+  { label: "Open projects", value: "12", delta: "+2", tone: "good" },
+  { label: "Tasks this week", value: "47", delta: "+8%", tone: "good" },
+  { label: "Time saved", value: "36h", delta: "+12%", tone: "good" },
+  { label: "On-track rate", value: "91%", delta: "-2%", tone: "warn" },
+] as const;
+
+const activity = [
+  {
+    item: "Q2 procurement plan",
+    owner: "Mira K.",
+    status: "Approved",
+    updated: "12m ago",
+  },
+  {
+    item: "Inventory forecast - West",
+    owner: "System",
+    status: "Running",
+    updated: "24m ago",
+  },
+  {
+    item: "Allergen contamination rules",
+    owner: "Devon A.",
+    status: "Review",
+    updated: "1h ago",
+  },
+  {
+    item: "Cocoa supplier - ABC Inc.",
+    owner: "System",
+    status: "Flagged",
+    updated: "2h ago",
+  },
+  {
+    item: "New brand line variant",
+    owner: "Priya S.",
+    status: "Draft",
+    updated: "3h ago",
+  },
+] as const;
+
+const reviews = [
+  { title: "Supplier change - Cocoa", due: "Due in 2 days" },
+  { title: "Allergen rule update", due: "Due in 5 days" },
+  { title: "Q2 production sequence", due: "Due in 9 days" },
+] as const;
+
 export default function HomePage() {
   return (
-    <div className="space-y-8">
-      <h1 className="text-center text-2xl font-bold text-foreground">
-        Welcome to __APP_TITLE__
-      </h1>
-      <p className="mx-auto max-w-xl text-center text-sm text-muted-foreground">
-        You are logged in. Start building your application!
-      </p>
+    <div className="app-home-screen">
+      <section className="app-home-hero">
+        <div className="app-home-heading">
+          <p className="app-kicker">Overview</p>
+          <h1 className="app-title">Good afternoon, App Admin</h1>
+          <p className="app-subtitle">
+            Welcome to __APP_TITLE__. Three items want attention; the workspace
+            is ready for your team&apos;s first workflows.
+          </p>
+        </div>
+        <div className="app-actions">
+          <span className="app-button-secondary">Last 7 days</span>
+          <span className="app-button-primary">New workflow</span>
+        </div>
+      </section>
+
+      <section className="app-dashboard" aria-label="Workspace overview">
+        <div className="app-metrics">
+          {metrics.map((metric) => (
+            <article className="app-metric-card" key={metric.label}>
+              <div className="app-metric-top">
+                <span className="app-metric-label">{metric.label}</span>
+                <span
+                  className={
+                    metric.tone === "warn" ? "app-chip app-chip-warn" : "app-chip"
+                  }
+                >
+                  {metric.delta}
+                </span>
+              </div>
+              <div className="app-metric-value">{metric.value}</div>
+              <div className="app-sparkline" aria-hidden={true} />
+            </article>
+          ))}
+        </div>
+
+        <div className="app-content-grid">
+          <section className="app-panel">
+            <div className="app-panel-header">
+              <h2 className="app-panel-title">Recent activity</h2>
+              <span className="app-review-meta">View all</span>
+            </div>
+            <table className="app-table">
+              <thead>
+                <tr>
+                  <th>Item</th>
+                  <th>Owner</th>
+                  <th>Status</th>
+                  <th>Updated</th>
+                </tr>
+              </thead>
+              <tbody>
+                {activity.map((row) => (
+                  <tr key={row.item}>
+                    <td>{row.item}</td>
+                    <td className="app-table-muted">{row.owner}</td>
+                    <td>
+                      <span className="app-status">{row.status}</span>
+                    </td>
+                    <td className="app-table-muted">{row.updated}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </section>
+
+          <div className="grid gap-5">
+            <section className="app-panel">
+              <div className="app-panel-header">
+                <h2 className="app-panel-title">Needs your review</h2>
+              </div>
+              <div className="app-review-list">
+                {reviews.map((review) => (
+                  <div className="app-review-item" key={review.title}>
+                    <div>
+                      <div className="app-review-title">{review.title}</div>
+                      <div className="app-review-meta">{review.due}</div>
+                    </div>
+                    <span className="app-review-action">Review</span>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <section className="app-panel">
+              <div className="app-panel-header">
+                <h2 className="app-panel-title">On call today</h2>
+              </div>
+              <div className="app-oncall-list">
+                <div className="app-avatar-stack" aria-label="On call users">
+                  <span>MK</span>
+                  <span>DA</span>
+                  <span>PS</span>
+                  <span>AL</span>
+                  <span>JR</span>
+                </div>
+                <p className="app-review-meta">4 more teammates available</p>
+              </div>
+            </section>
+          </div>
+        </div>
+      </section>
     </div>
   );
 }

package/templates/webapp/src/app/(auth)/auth/signin/CredentialsSignInForm.tsx

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button, Input } from "@percepta/design";
+import { ArrowRight } from "lucide-react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback } from "react";
@@ -64,26 +65,34 @@ export function CredentialsSignInForm() {
   );
 
   return (
-    <div className="space-y-8">
-      <div className="text-center">
-        <h1 className="text-2xl font-bold text-foreground">Sign In</h1>
-        <p className="mt-2 text-sm text-muted-foreground">
+    <div className="grid gap-8">
+      <div className="grid gap-3">
+        <p className="app-auth-kicker">
+          <span>01</span>
+          <span>Sign in</span>
+        </p>
+        <h1 className="app-auth-title">Welcome back.</h1>
+        <p className="app-auth-copy text-sm">
           Need an account?{" "}
           <Link
-            className="font-medium text-primary underline-offset-4 hover:underline"
+            className="app-auth-link"
             href={`/auth/signup?callbackUrl=${encodeURIComponent(callbackUrl)}`}
           >
             Create one
           </Link>
         </p>
       </div>
-      <form className="space-y-6" onSubmit={handleSubmit(submit)}>
-        <div className="space-y-4">
+      <form className="app-auth-form" onSubmit={handleSubmit(submit)}>
+        <div className="app-auth-fields">
           <Controller
             control={control}
             name="email"
             render={({ field, fieldState }) => (
-              <FormItem label="Email" fieldState={fieldState}>
+              <FormItem
+                className="app-auth-field"
+                label="Email"
+                fieldState={fieldState}
+              >
                 <Input {...field} type="email" autoComplete="email" />
               </FormItem>
             )}
@@ -92,7 +101,11 @@ export function CredentialsSignInForm() {
             control={control}
             name="password"
             render={({ field, fieldState }) => (
-              <FormItem label="Password" fieldState={fieldState}>
+              <FormItem
+                className="app-auth-field"
+                label="Password"
+                fieldState={fieldState}
+              >
                 <Input
                   {...field}
                   type="password"
@@ -103,8 +116,13 @@ export function CredentialsSignInForm() {
           />
         </div>
         <div className="flex justify-end">
-          <Button type="submit" loading={isSubmitting}>
-            Sign In
+          <Button
+            className="app-auth-submit"
+            type="submit"
+            loading={isSubmitting}
+          >
+            <span>Sign In</span>
+            <ArrowRight aria-hidden={true} />
           </Button>
         </div>
       </form>

package/templates/webapp/src/app/(auth)/auth/signup/CredentialsSignUpForm.tsx

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button, Input } from "@percepta/design";
+import { ArrowRight } from "lucide-react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback } from "react";
@@ -59,26 +60,34 @@ export function CredentialsSignUpForm() {
   );
 
   return (
-    <div className="space-y-8">
-      <div className="text-center">
-        <h1 className="text-2xl font-bold text-foreground">Create Account</h1>
-        <p className="mt-2 text-sm text-muted-foreground">
+    <div className="grid gap-8">
+      <div className="grid gap-3">
+        <p className="app-auth-kicker">
+          <span>01</span>
+          <span>Request access</span>
+        </p>
+        <h1 className="app-auth-title">Create account.</h1>
+        <p className="app-auth-copy text-sm">
           Already have an account?{" "}
           <Link
-            className="font-medium text-primary underline-offset-4 hover:underline"
+            className="app-auth-link"
             href={`/auth/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`}
           >
             Sign in
           </Link>
         </p>
       </div>
-      <form className="space-y-6" onSubmit={handleSubmit(submit)}>
-        <div className="space-y-4">
+      <form className="app-auth-form" onSubmit={handleSubmit(submit)}>
+        <div className="app-auth-fields">
           <Controller
             control={control}
             name="name"
             render={({ field, fieldState }) => (
-              <FormItem label="Name" fieldState={fieldState}>
+              <FormItem
+                className="app-auth-field"
+                label="Name"
+                fieldState={fieldState}
+              >
                 <Input {...field} autoComplete="name" />
               </FormItem>
             )}
@@ -87,7 +96,11 @@ export function CredentialsSignUpForm() {
             control={control}
             name="email"
             render={({ field, fieldState }) => (
-              <FormItem label="Email" fieldState={fieldState}>
+              <FormItem
+                className="app-auth-field"
+                label="Email"
+                fieldState={fieldState}
+              >
                 <Input {...field} type="email" autoComplete="email" />
               </FormItem>
             )}
@@ -96,15 +109,24 @@ export function CredentialsSignUpForm() {
             control={control}
             name="password"
             render={({ field, fieldState }) => (
-              <FormItem label="Password" fieldState={fieldState}>
+              <FormItem
+                className="app-auth-field"
+                label="Password"
+                fieldState={fieldState}
+              >
                 <Input {...field} type="password" autoComplete="new-password" />
               </FormItem>
             )}
           />
         </div>
         <div className="flex justify-end">
-          <Button type="submit" loading={isSubmitting}>
-            Create Account
+          <Button
+            className="app-auth-submit"
+            type="submit"
+            loading={isSubmitting}
+          >
+            <span>Create Account</span>
+            <ArrowRight aria-hidden={true} />
           </Button>
         </div>
       </form>

package/templates/webapp/src/app/(auth)/layout.tsx

@@ -5,11 +5,37 @@ export default function AuthLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const appTitle = "__APP_TITLE__";
+  const appInitial = appTitle.slice(0, 1).toUpperCase();
+
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 p-4">
-      <div className="w-full max-w-md rounded-lg border border-border bg-card p-8 shadow-sm">
-        {children}
-      </div>
+    <div className="app-auth-shell">
+      <section className="app-auth-story" aria-label={`${appTitle} starter`}>
+        <div className="app-auth-brand">
+          <span className="app-auth-mark" aria-hidden={true}>
+            {appInitial}
+          </span>
+          <span>{appTitle}</span>
+        </div>
+
+        <div className="grid max-w-xl gap-6">
+          <p className="app-auth-kicker">The workspace</p>
+          <h2 className="app-auth-title">
+            A quieter place to do your team&apos;s most considered work.
+          </h2>
+          <p className="app-auth-copy">
+            Keep decisions, handoffs, and daily operations in one calm
+            workspace built for focused teams.
+          </p>
+        </div>
+
+        <div className="flex justify-between gap-4 text-xs uppercase text-muted-foreground">
+          <span>Workspace 1.0</span>
+          <span>Made for teams</span>
+        </div>
+      </section>
+
+      <div className="app-auth-card">{children}</div>
     </div>
   );
 }

package/templates/webapp/src/app/{(admin) → (settings)}/layout.tsx

@@ -7,7 +7,7 @@ import {
   canManageDefaultRoles,
 } from "../../services/access/AppAccessControl";
 
-export default async function AdminLayout({
+export default async function SettingsLayout({
   children,
 }: {
   children: ReactNode;
@@ -22,21 +22,17 @@ export default async function AdminLayout({
     canManageDefaultRoles(session.user.id),
     canManageAppRoles(session.user.id),
   ]);
-  const showAdminLink = canManageDefaults || canManageRoles;
+  const showSettingsLink = canManageDefaults || canManageRoles;
 
-  if (!showAdminLink) {
+  if (!showSettingsLink) {
     notFound();
   }
 
   return (
     <>
-      <Header showAdminLink={showAdminLink} />
-      <main>
-        <div className="py-8">
-          <div className="mx-auto max-w-6xl">
-            <div className="rounded-lg bg-white p-8">{children}</div>
-          </div>
-        </div>
+      <Header showSettingsLink={showSettingsLink} />
+      <main className="app-shell-main">
+        <div className="app-home">{children}</div>
       </main>
     </>
   );

package/templates/webapp/src/app/{(admin)/admin/_components/AdminTabs.tsx → (settings)/settings/_components/AccessControlTabs.tsx}

@@ -3,25 +3,29 @@
 import { Tabs, TabsList, TabsTrigger } from "@percepta/design";
 import Link from "next/link";
 
-export type AdminTab = "assignments" | "roles";
+export type AccessControlTab = "assignments" | "roles";
 
 const tabs = [
-  { href: "/admin?tab=roles", label: "Roles", tab: "roles" },
+  { href: "/settings?tab=roles", label: "Roles", tab: "roles" },
   {
-    href: "/admin?tab=assignments",
+    href: "/settings?tab=assignments",
     label: "Assignments",
     tab: "assignments",
   },
 ] as const satisfies ReadonlyArray<{
   readonly href: string;
   readonly label: string;
-  readonly tab: AdminTab;
+  readonly tab: AccessControlTab;
 }>;
 
-export function AdminTabs({ activeTab }: { readonly activeTab: AdminTab }) {
+export function AccessControlTabs({
+  activeTab,
+}: {
+  readonly activeTab: AccessControlTab;
+}) {
   return (
     <Tabs value={activeTab}>
-      <TabsList aria-label="RBAC views">
+      <TabsList aria-label="Access control views">
         {tabs.map((tab) => (
           <TabsTrigger asChild={true} key={tab.tab} value={tab.tab}>
             <Link href={tab.href}>{tab.label}</Link>

package/templates/webapp/src/app/{(admin)/admin/_lib/accessAdmin.ts → (settings)/settings/_lib/accessSettings.ts}

@@ -12,13 +12,13 @@ export type AccessAppRole = AppRole<typeof accessManifest>;
 export const assignableRoles: readonly AccessAppRole[] =
   accessManifest.system.assignableRoles ?? [];
 
-export interface AdminPermissions {
+export interface SettingsPermissions {
   readonly canManageAppRoles: boolean;
   readonly canManageDefaultRoles: boolean;
 }
 
-export async function requireAnyAdminPermission(): Promise<AdminPermissions> {
-  if (!isAdminUiEnabled()) {
+export async function requireAnySettingsPermission(): Promise<SettingsPermissions> {
+  if (!isAccessControlUiEnabled()) {
     notFound();
   }
 
@@ -55,8 +55,8 @@ export function readAssignableRole(formData: FormData): AccessAppRole {
   return role as AccessAppRole;
 }
 
-function isAdminUiEnabled(): boolean {
-  const adminUI: { readonly enabled?: boolean } | undefined =
+function isAccessControlUiEnabled(): boolean {
+  const accessControlUI: { readonly enabled?: boolean } | undefined =
     accessManifest.adminUI;
-  return adminUI?.enabled !== false;
+  return accessControlUI?.enabled !== false;
 }