create-nevela 0.4.3 → 0.5.0

package/template/web/app/dashboard/access/roles/[id]/page.tsx

@@ -0,0 +1,32 @@
+import { notFound } from "next/navigation";
+import { RoleForm } from "@/components/access/role-form";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { getCatalog, getRole } from "@/lib/access";
+import { requirePermission } from "@/lib/dashboard";
+
+export const metadata = { title: "Role" };
+
+export default async function RolePage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const { session, may } = await requirePermission("roles.view", `/dashboard/access/roles/${id}`);
+  const [role, catalog] = await Promise.all([getRole(id), getCatalog()]);
+  if (!role) notFound();
+  const { user } = session;
+
+  return (
+    <>
+      <PageHeader
+        title={role.name}
+        description={role.users === 1 ? "One person holds this role." : `${role.users.toLocaleString()} people hold this role.`}
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Roles", href: "/dashboard/access/roles" }, { label: role.name }]}
+      />
+      <RoleForm
+        role={role}
+        catalog={catalog}
+        mine={user.isAdmin || user.permissions === undefined ? null : user.permissions}
+        canEdit={may("roles.edit")}
+        canDelete={may("roles.delete")}
+      />
+    </>
+  );
+}

package/template/web/app/dashboard/access/roles/new/page.tsx

@@ -0,0 +1,18 @@
+import { RoleForm } from "@/components/access/role-form";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { getCatalog } from "@/lib/access";
+import { requirePermission } from "@/lib/dashboard";
+
+export const metadata = { title: "New role" };
+
+export default async function NewRolePage() {
+  const { session } = await requirePermission("roles.create", "/dashboard/access/roles/new");
+  const { user } = session;
+
+  return (
+    <>
+      <PageHeader title="New role" crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Roles", href: "/dashboard/access/roles" }, { label: "New" }]} />
+      <RoleForm catalog={await getCatalog()} mine={user.isAdmin || user.permissions === undefined ? null : user.permissions} canEdit canDelete={false} />
+    </>
+  );
+}

package/template/web/app/dashboard/access/roles/page.tsx

@@ -0,0 +1,77 @@
+import Link from "next/link";
+import { PlusIcon, UsersIcon } from "lucide-react";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { getCatalog, listRoles } from "@/lib/access";
+import { requirePermission } from "@/lib/dashboard";
+
+export const metadata = { title: "Roles" };
+
+/** Each role: what it allows, out of everything there is, and how many people hold it. */
+export default async function RolesPage() {
+  const { may } = await requirePermission("roles.view", "/dashboard/access/roles");
+  const [roles, catalog] = await Promise.all([listRoles(), getCatalog()]);
+
+  return (
+    <>
+      <PageHeader
+        title="Roles"
+        description="A role is a set of permissions. Give someone a role on the Users screen, and they may do what it allows."
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Roles" }]}
+        actions={
+          may("roles.create") && (
+            <Button asChild>
+              <Link href="/dashboard/access/roles/new">
+                <PlusIcon />
+                New role
+              </Link>
+            </Button>
+          )
+        }
+      />
+
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {roles.map((role) => {
+          const share = catalog.total > 0 ? Math.round((role.permissions.length / catalog.total) * 100) : 0;
+          return (
+            <Card key={role.id} className="flex flex-col">
+              <CardHeader>
+                <CardTitle className="flex flex-wrap items-center gap-2 text-base">
+                  <Link href={`/dashboard/access/roles/${encodeURIComponent(role.id)}`} className="hover:underline">
+                    {role.name}
+                  </Link>
+                  {role.isSystem && <Badge variant="outline">Built in</Badge>}
+                  {role.isAdmin && <Badge>Full access</Badge>}
+                </CardTitle>
+                <CardDescription>{role.description || "No description."}</CardDescription>
+              </CardHeader>
+              <CardContent className="mt-auto flex flex-col gap-3">
+                <div className="flex flex-col gap-1.5">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">Permissions</span>
+                    <span className="tabular-nums">
+                      {role.permissions.length} of {catalog.total}
+                    </span>
+                  </div>
+                  <Progress value={share} aria-label={`${share}% of all permissions`} />
+                </div>
+                <div className="flex items-center justify-between">
+                  <Link href={`/dashboard/access/users?role=${encodeURIComponent(role.id)}`} className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground">
+                    <UsersIcon className="size-4" />
+                    {role.users === 1 ? "1 user" : `${role.users.toLocaleString()} users`}
+                  </Link>
+                  <Button variant="outline" size="sm" asChild>
+                    <Link href={`/dashboard/access/roles/${encodeURIComponent(role.id)}`}>{may("roles.edit") && role.withinYours ? "Edit" : "View"}</Link>
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </>
+  );
+}

package/template/web/app/dashboard/access/users/[id]/page.tsx

@@ -0,0 +1,28 @@
+import { notFound, redirect } from "next/navigation";
+import { UserForm } from "@/components/access/user-form";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { getUser, listRoles } from "@/lib/access";
+import { requirePermission } from "@/lib/dashboard";
+
+export const metadata = { title: "Edit user" };
+
+export default async function EditUserPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  await requirePermission("users.edit", `/dashboard/access/users/${id}`);
+  const [user, roles] = await Promise.all([getUser(id), listRoles()]);
+  if (!user) notFound();
+  // An account that may do more than you isn't yours to change, and Laravel would refuse
+  // every field of this form. The list doesn't link here for one; this is for the address typed in.
+  if (!user.withinYours && !user.isSelf) redirect("/dashboard?error=forbidden");
+
+  return (
+    <>
+      <PageHeader
+        title={user.name || user.email}
+        description={user.isSelf ? "This is your own account. Your name and picture are on your account page." : undefined}
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Users", href: "/dashboard/access/users" }, { label: user.name || user.email }]}
+      />
+      <UserForm user={user} roles={roles} />
+    </>
+  );
+}

package/template/web/app/dashboard/access/users/new/page.tsx

@@ -0,0 +1,17 @@
+import { UserForm } from "@/components/access/user-form";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { listRoles } from "@/lib/access";
+import { requirePermission } from "@/lib/dashboard";
+
+export const metadata = { title: "Add user" };
+
+export default async function NewUserPage() {
+  await requirePermission("users.create", "/dashboard/access/users/new");
+
+  return (
+    <>
+      <PageHeader title="Add user" crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Users", href: "/dashboard/access/users" }, { label: "Add" }]} />
+      <UserForm roles={await listRoles()} />
+    </>
+  );
+}

package/template/web/app/dashboard/access/users/page.tsx

@@ -0,0 +1,158 @@
+import Link from "next/link";
+import { PlusIcon, ShieldCheckIcon } from "lucide-react";
+import { UserRowActions } from "@/components/access/user-row-actions";
+import { UsersToolbar } from "@/components/access/users-toolbar";
+import { LocalTime } from "@/components/dashboard/local-time";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { UserAvatar } from "@/components/dashboard/user-menu";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { listRoles, listUsers } from "@/lib/access";
+import { requirePermission } from "@/lib/dashboard";
+
+export const metadata = { title: "Users" };
+
+type Params = { q?: string; role?: string; status?: string; page?: string };
+
+/** Everyone who can sign in: who they are, what roles they hold, and whether they still can. */
+export default async function UsersPage({ searchParams }: { searchParams: Promise<Params> }) {
+  const { may } = await requirePermission("users.view", "/dashboard/access/users");
+  const params = await searchParams;
+  const [list, roles] = await Promise.all([listUsers(params), listRoles()]);
+  const users = list?.data ?? [];
+  const meta = list?.meta ?? { page: 1, perPage: 25, total: 0, totalPages: 1 };
+  const filtered = Boolean(params.q || params.role || params.status);
+
+  const pageHref = (page: number) => {
+    const query = new URLSearchParams(Object.entries({ ...params, page: String(page) }).filter(([, value]) => value) as [string, string][]);
+    return `/dashboard/access/users?${query}`;
+  };
+
+  return (
+    <>
+      <PageHeader
+        title="Users"
+        description="Everyone who can sign in, and the roles that say what they may do."
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Users" }]}
+        actions={
+          may("users.create") && (
+            <Button asChild>
+              <Link href="/dashboard/access/users/new">
+                <PlusIcon />
+                Add user
+              </Link>
+            </Button>
+          )
+        }
+      />
+
+      <UsersToolbar roles={roles.map(({ id, name }) => ({ id, name }))} />
+
+      {users.length === 0 ? (
+        <Empty className="rounded-xl border border-dashed">
+          <EmptyHeader>
+            <EmptyTitle>{filtered ? "Nobody matches" : "No users"}</EmptyTitle>
+            <EmptyDescription>{filtered ? "Try a different search, role or status." : "Add the first person who should be able to sign in."}</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      ) : (
+        <div className="overflow-x-auto rounded-xl border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>User</TableHead>
+                <TableHead>Roles</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Last active</TableHead>
+                <TableHead className="w-12">
+                  <span className="sr-only">Actions</span>
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {users.map((user) => (
+                <TableRow key={user.id} className={user.active ? undefined : "text-muted-foreground"}>
+                  <TableCell>
+                    <div className="flex items-center gap-3">
+                      <UserAvatar user={{ name: user.name, email: user.email, image: user.image }} className="size-8" />
+                      <div className="flex min-w-0 flex-col">
+                        <span className="flex items-center gap-2 truncate text-sm font-medium">
+                          {may("users.edit") && (user.withinYours || user.isSelf) ? (
+                            <Link href={`/dashboard/access/users/${encodeURIComponent(user.id)}`} className="truncate hover:underline">
+                              {user.name || user.email}
+                            </Link>
+                          ) : (
+                            <span className="truncate">{user.name || user.email}</span>
+                          )}
+                          {user.isSelf && <Badge variant="outline">You</Badge>}
+                        </span>
+                        <span className="truncate text-xs text-muted-foreground">{user.email}</span>
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap gap-1">
+                      {user.roles.length === 0 && <span className="text-sm text-muted-foreground">None</span>}
+                      {user.roles.map((role) => (
+                        <Badge key={role.id} variant={user.isAdmin && role.name === "ADMIN" ? "default" : "secondary"}>
+                          {role.name}
+                        </Badge>
+                      ))}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap items-center gap-1">
+                      <Badge variant={user.active ? "outline" : "secondary"}>{user.active ? "Active" : "Switched off"}</Badge>
+                      {user.twoFactorEnabled && (
+                        <Badge variant="outline" title="Signs in with a second step">
+                          <ShieldCheckIcon />
+                          2-step
+                        </Badge>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">{user.lastActiveAt ? <LocalTime value={user.lastActiveAt} /> : "Not yet"}</TableCell>
+                  <TableCell>
+                    <UserRowActions user={user} canEdit={may("users.edit") && (user.withinYours || user.isSelf)} canDelete={may("users.delete") && user.withinYours} />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {meta.total > 0 && (
+        <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
+          <p className="tabular-nums">
+            {(meta.page - 1) * meta.perPage + 1}–{Math.min(meta.page * meta.perPage, meta.total)} of {meta.total.toLocaleString()} {meta.total === 1 ? "user" : "users"}
+          </p>
+          {meta.totalPages > 1 && (
+            <div className="flex items-center gap-2">
+              {meta.page > 1 ? (
+                <Button variant="outline" size="sm" asChild>
+                  <Link href={pageHref(meta.page - 1)}>Previous</Link>
+                </Button>
+              ) : (
+                <Button variant="outline" size="sm" disabled>
+                  Previous
+                </Button>
+              )}
+              {meta.page < meta.totalPages ? (
+                <Button variant="outline" size="sm" asChild>
+                  <Link href={pageHref(meta.page + 1)}>Next</Link>
+                </Button>
+              ) : (
+                <Button variant="outline" size="sm" disabled>
+                  Next
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

package/template/web/app/dashboard/actions.ts

@@ -1,11 +1,11 @@
 "use server";
 
 import { revalidatePath } from "next/cache";
-import { can, storedFields, type PolicyAction } from "@flaredev/core";
+import { storedFields, type PolicyAction } from "@flaredev/core";
 import type { FieldIssue } from "@/lib/resource/store";
 import { toCsv } from "@/lib/csv";
 import { fileUrl } from "@/lib/files";
-import { resourcePath, dashboardSession, dashboardStore, policyFor } from "@/lib/dashboard";
+import { allResources, resourcePath, dashboardSession, dashboardStore, mayDo } from "@/lib/dashboard";
 
 export type ActionResult<T = unknown> =
   | { ok: true; data: T }
@@ -14,13 +14,14 @@ export type ActionResult<T = unknown> =
 const forbidden = (message = "You don't have access to this."): ActionResult<never> => ({ ok: false, status: 403, error: message });
 
 /**
- * Session check, plus the display policy when the resource has one. Laravel's policy
- * is the real decision and answers 403 itself; this only saves a round trip.
+ * Session check, plus what the person's roles allow. Laravel's policy is the real
+ * decision and answers 403 itself; this only saves a round trip.
  */
 async function allowed(resourceName: string, action: PolicyAction): Promise<ActionResult<never> | undefined> {
-  const { allowed: inAdmin, role } = await dashboardSession();
+  const { allowed: inAdmin } = await dashboardSession();
   if (!inAdmin) return forbidden();
-  if (!can(policyFor(resourceName), role, action)) return forbidden(`Your role can't ${action} this record.`);
+  const resource = allResources().find((item) => item.name === resourceName);
+  if (!resource || !(await mayDo(resource, action))) return forbidden(`Your role can't ${action} this record.`);
 }
 
 export async function deleteRecordAction(resourceName: string, id: string): Promise<ActionResult<{ id: string }>> {
@@ -125,9 +126,9 @@ export async function createUploadUrlAction(
   fieldKey: string,
   file: { name: string; type: string; size: number },
 ): Promise<ActionResult<{ url: string; key: string }>> {
-  const { allowed: inAdmin, role } = await dashboardSession();
-  const policy = policyFor(resourceName);
-  if (!inAdmin || !(can(policy, role, "create") || can(policy, role, "update"))) return forbidden("Your role can't add files to this record.");
+  const { allowed: inAdmin } = await dashboardSession();
+  const target = allResources().find((item) => item.name === resourceName);
+  if (!inAdmin || !target || !((await mayDo(target, "create")) || (await mayDo(target, "update")))) return forbidden("Your role can't add files to this record.");
 
   const field = dashboardStore(resourceName).resource.fields[fieldKey];
   if (!field || field.kind !== "file") return { ok: false, status: 404, error: "That isn't a file field." };

package/template/web/app/dashboard/import-actions.ts

@@ -1,9 +1,9 @@
 "use server";
 
 import { revalidatePath } from "next/cache";
-import { can, type PolicyAction } from "@flaredev/core";
+import type { PolicyAction } from "@flaredev/core";
 import type { Failure } from "@/lib/resource/store";
-import { resourcePath, dashboardSession, dashboardStore, policyFor } from "@/lib/dashboard";
+import { allResources, resourcePath, dashboardSession, dashboardStore, mayDo } from "@/lib/dashboard";
 import type { ActionResult } from "./actions";
 
 /** One row that couldn't be saved, numbered from 1 within the batch that was sent. */
@@ -26,11 +26,12 @@ const GIVE_UP_AFTER = 25;
 
 const forbidden = (message = "You don't have access to the admin."): ActionResult<never> => ({ ok: false, status: 403, error: message });
 
-/** Session + policy check for one action on one resource. */
+/** Session check, plus what the person's roles allow, for one action on one resource. */
 async function allowed(resourceName: string, action: PolicyAction): Promise<ActionResult<never> | undefined> {
-  const { allowed: inAdmin, role } = await dashboardSession();
+  const { allowed: inAdmin } = await dashboardSession();
   if (!inAdmin) return forbidden();
-  if (!can(policyFor(resourceName), role, action)) return forbidden(`Your role can't ${action} this record.`);
+  const resource = allResources().find((item) => item.name === resourceName);
+  if (!resource || !(await mayDo(resource, action))) return forbidden(`Your role can't ${action} this record.`);
 }
 
 /** A store failure as one line of text, attributed to a field when the issues name one. */

package/template/web/app/dashboard/layout.tsx

@@ -4,7 +4,7 @@ import { Toaster } from "@/components/ui/sonner";
 import { DashboardHeader, type Theme } from "@/components/dashboard/dashboard-header";
 import { DashboardSidebar } from "@/components/dashboard/dashboard-sidebar";
 import { dashboardLinks } from "@/lib/dashboard-nav";
-import { ADMIN_ROLES, visibleResources } from "@/lib/dashboard";
+import { dashboardSession, visibleResources } from "@/lib/dashboard";
 import { fileUrl } from "@/lib/files";
 import { requireSession } from "@/lib/session";
 import { site } from "@/lib/site";
@@ -31,10 +31,13 @@ export default async function DashboardLayout({ children }: { children: React.Re
   }));
 
   const account = { name: user.name, email: user.email, image: user.avatar ? fileUrl(user.avatar, "thumb") : null };
+  // The screens for managing people, for those whose roles allow it.
+  const { isAdmin, may } = await dashboardSession();
+  const access = { users: may("users.view"), roles: may("roles.view") };
 
   return (
     <SidebarProvider defaultOpen={!collapsed}>
-      <DashboardSidebar appName={site.name} resources={resources} links={dashboardLinks} isAdmin={ADMIN_ROLES.includes(user.role ?? "")} user={account} />
+      <DashboardSidebar appName={site.name} resources={resources} links={dashboardLinks} isAdmin={isAdmin} access={access} user={account} />
       <SidebarInset>
         <DashboardHeader user={account} initialTheme={theme} notices={[]} />
         <main className="flex flex-1 flex-col gap-6 p-4 md:p-6 lg:p-8">{children}</main>

package/template/web/app/dashboard/page.tsx

@@ -1,20 +1,24 @@
 import Link from "next/link";
 import { ArrowRightIcon, PlusIcon } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
 import { PageHeader } from "@/components/dashboard/page-header";
 import { resourceIcon } from "@/components/dashboard/resource-icon";
 import { StatCards, type Stat } from "@/components/dashboard/stat-card";
-import { adminPermissions, resourcePath, resourceStats, trend, visibleResources } from "@/lib/dashboard";
+import { adminPermissions, allResources, resourcePath, resourceStats, trend, visibleResources } from "@/lib/dashboard";
 import { requireSession } from "@/lib/session";
 
 export const metadata = { title: "Dashboard" };
 
 /** The first thing you see when you sign in: how much data there is, and what's left to set up. */
-export default async function DashboardPage() {
+export default async function DashboardPage({ searchParams }: { searchParams: Promise<{ error?: string }> }) {
   const { user } = await requireSession("/dashboard");
   const resources = await visibleResources();
+  // Resources exist, and this person's roles show them none: not the same as an empty app.
+  const noneForYou = resources.length === 0 && allResources().length > 0;
+  const turnedBack = (await searchParams).error === "forbidden";
 
   const cards = await Promise.all(
     resources.map(async (resource) => {
@@ -37,12 +41,31 @@ export default async function DashboardPage() {
     <>
       <PageHeader
         title={`Welcome${user.name ? `, ${user.name.split(" ")[0]}` : ""}`}
-        description={resources.length > 0 ? "Everything in your app, and how it's moving." : "Your app is running. Add a resource to fill this page."}
+        description={resources.length > 0 ? "Everything in your app, and how it's moving." : noneForYou ? "You're signed in." : "Your app is running. Add a resource to fill this page."}
       />
 
+      {turnedBack && (
+        <Alert>
+          <AlertTitle>Your role doesn&apos;t include that page</AlertTitle>
+          <AlertDescription>If you need it, ask an administrator to add it to your role.</AlertDescription>
+        </Alert>
+      )}
+
       <StatCards stats={stats} />
 
-      {resources.length === 0 && (
+      {noneForYou && (
+        <Empty className="rounded-xl border border-dashed">
+          <EmptyHeader>
+            <EmptyTitle>Nothing to show yet</EmptyTitle>
+            <EmptyDescription>
+              Your role doesn&apos;t include any of this app&apos;s data. You can manage <Link href="/dashboard/account" className="underline">your account</Link>, and an
+              administrator can give you access to more.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
+
+      {resources.length === 0 && !noneForYou && (
         <Empty className="rounded-xl border border-dashed">
           <EmptyHeader>
             <EmptyTitle>No resources yet</EmptyTitle>