@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/nextjs/variants/workspaces/src/app/(console)/dashboard/page.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useAbility } from "@casl/react";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import type { AuditLogEntry } from "@simple-auth-kit/auth-client";
+import { Alert } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { PERMISSIONS, hasPermission, type AppAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { errorMessage } from "@/lib/error";
+import { useWorkspaceStore } from "@/lib/stores/store-context";
+
+/**
+ * The overview for the active workspace. Every card is individually permission-gated, same as
+ * the sidebar links it points to — and when there's no active workspace at all, the console
+ * layout's own empty state (`(console)/layout.tsx`) takes over before this page ever renders, the
+ * same way it already does for `/users`, `/roles`, and every other workspace-scoped screen.
+ */
+export default observer(function DashboardPage() {
+  const ability = useAbility<AppAbility>();
+  const workspaces = useWorkspaceStore();
+  const activeWorkspaceId = workspaces.activeWorkspaceId;
+  const workspaceName = workspaces.activeWorkspace?.name ?? "this workspace";
+  const canReadUsers = hasPermission(ability, PERMISSIONS.usersRead);
+  const canManageRoles = hasPermission(ability, PERMISSIONS.rolesManage);
+  const canReadPermissions = hasPermission(ability, PERMISSIONS.permissionsRead);
+  const canReadAuditLog = hasPermission(ability, PERMISSIONS.auditLogRead);
+
+  const [userCount, setUserCount] = useState<number | null>(null);
+  const [roleCount, setRoleCount] = useState<number | null>(null);
+  const [permissionCount, setPermissionCount] = useState<number | null>(null);
+  const [recentActivity, setRecentActivity] = useState<AuditLogEntry[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!activeWorkspaceId) return;
+    let cancelled = false;
+
+    async function load() {
+      try {
+        if (canReadUsers) {
+          const users = await authClient.listUsers({ limit: 1 });
+          if (!cancelled) setUserCount(users.meta.total);
+        }
+        if (canManageRoles) {
+          const roles = await authClient.listRoles();
+          if (!cancelled) setRoleCount(roles.length);
+        }
+        if (canReadPermissions) {
+          const permissions = await authClient.listPermissions();
+          if (!cancelled) setPermissionCount(permissions.length);
+        }
+        if (canReadAuditLog) {
+          const audit = await authClient.listAuditLog({ limit: 5 });
+          if (!cancelled) setRecentActivity(audit.items);
+        }
+      } catch (err) {
+        if (!cancelled) setError(errorMessage(err));
+      }
+    }
+
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [activeWorkspaceId, canReadUsers, canManageRoles, canReadPermissions, canReadAuditLog]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <h1 className="text-xl font-semibold">Dashboard</h1>
+        <p className="text-sm text-muted-foreground">An overview of {workspaceName}.</p>
+      </div>
+
+      {error && <Alert variant="destructive">{error}</Alert>}
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {canManageRoles && (
+          <Card>
+            <CardHeader>
+              <CardDescription>Roles</CardDescription>
+              <CardTitle className="text-3xl">{roleCount ?? "—"}</CardTitle>
+            </CardHeader>
+            <CardContent className="text-sm text-muted-foreground">Defined for this workspace</CardContent>
+          </Card>
+        )}
+        {canReadPermissions && (
+          <Card>
+            <CardHeader>
+              <CardDescription>Permissions</CardDescription>
+              <CardTitle className="text-3xl">{permissionCount ?? "—"}</CardTitle>
+            </CardHeader>
+            <CardContent className="text-sm text-muted-foreground">In the capability catalog</CardContent>
+          </Card>
+        )}
+        {canReadUsers && (
+          <Card>
+            <CardHeader>
+              <CardDescription>Users</CardDescription>
+              <CardTitle className="text-3xl">{userCount ?? "—"}</CardTitle>
+            </CardHeader>
+            <CardContent className="text-sm text-muted-foreground">
+              <Link href="/users" className="font-medium text-primary underline underline-offset-2">
+                Go to Users →
+              </Link>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {canReadAuditLog && (
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <div>
+              <CardTitle>Recent activity</CardTitle>
+              <CardDescription>The latest entries from the audit log.</CardDescription>
+            </div>
+            <Link href="/audit-log" className="text-sm font-medium text-primary underline underline-offset-2">
+              View all →
+            </Link>
+          </CardHeader>
+          <CardContent>
+            {recentActivity.length === 0 ? (
+              <p className="text-sm text-muted-foreground">No activity yet.</p>
+            ) : (
+              <ul className="flex flex-col gap-2">
+                {recentActivity.map((entry) => (
+                  <li key={entry.id} className="flex items-center justify-between gap-2 rounded-lg border border-border px-3 py-2 text-sm">
+                    <div className="flex items-center gap-2">
+                      <Badge variant="outline">{entry.action}</Badge>
+                      <span>{entry.name}</span>
+                    </div>
+                    <span className="text-xs text-muted-foreground">{new Date(entry.createdAt).toLocaleString()}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+});

package/registry/admin-apps/nextjs/variants/workspaces/src/app/(console)/languages/[id]/edit/page.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { useAbility } from "@casl/react";
+import { observer } from "mobx-react-lite";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback, useEffect, useState, type FormEvent } from "react";
+import { AuthApiError, type LanguageSummary, type UpdateLanguageInput } from "@simple-auth-kit/auth-client";
+import { toast } from "sonner";
+import { Breadcrumb } from "@/components/breadcrumb";
+import { FormErrorAlert } from "@/components/form-error-alert";
+import { PermissionRequired } from "@/components/permission-required";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Heading } from "@/components/ui/heading";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { PERMISSIONS, hasPermission, type AppAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { errorMessage, errorMessages } from "@/lib/error";
+import { useWorkspaceStore } from "@/lib/stores/store-context";
+import { DIRECTION_OPTIONS, type LanguageFormValues } from "../../language-schema";
+
+const inputClassName = "bg-background border-2 focus:border-purple-500 transition-colors";
+
+function apiErrorMessage(err: unknown, fallback: string): string {
+  return err instanceof AuthApiError ? err.message : fallback;
+}
+
+function toForm(language: LanguageSummary): LanguageFormValues {
+  return {
+    code: language.code,
+    name: language.name,
+    nativeName: language.nativeName,
+    direction: language.direction === "rtl" ? "rtl" : "ltr",
+    isDefault: language.isDefault,
+    isActive: language.isActive,
+  };
+}
+
+export default observer(function EditLanguagePage() {
+  const { id } = useParams<{ id: string }>();
+  const router = useRouter();
+  const ability = useAbility<AppAbility>();
+  const workspaces = useWorkspaceStore();
+  const activeWorkspaceId = workspaces.activeWorkspaceId;
+  const canManage = hasPermission(ability, PERMISSIONS.languagesManage);
+
+  const [language, setLanguage] = useState<LanguageSummary | null>(null);
+  const [form, setForm] = useState<LanguageFormValues | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [formError, setFormError] = useState<string[] | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await authClient.getLanguage(id);
+      setLanguage(result);
+      setForm(toForm(result));
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't load this language."));
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    if (!canManage || !activeWorkspaceId) return;
+    void load();
+  }, [canManage, activeWorkspaceId, load]);
+
+  if (!canManage) return <PermissionRequired permission={PERMISSIONS.languagesManage} what="Editing a language" />;
+
+  function set<K extends keyof LanguageFormValues>(key: K, value: LanguageFormValues[K]) {
+    setForm((prev) => (prev ? { ...prev, [key]: value } : prev));
+  }
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    if (!form) return;
+    setFormError(null);
+    const input: UpdateLanguageInput = {
+      code: form.code,
+      name: form.name,
+      nativeName: form.nativeName,
+      direction: form.direction,
+      isDefault: form.isDefault,
+      isActive: form.isActive,
+    };
+    setSaving(true);
+    try {
+      await authClient.updateLanguage(id, input);
+      toast.success("Language updated.");
+      router.push(`/languages/${id}`);
+    } catch (err) {
+      setFormError(errorMessages(err));
+      toast.error(errorMessage(err));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="flex-1 space-y-4">
+      <Breadcrumb
+        items={[
+          { title: "Languages", href: "/languages" },
+          { title: language?.name ?? "Details", href: `/languages/${id}` },
+          { title: "Edit", href: `/languages/${id}/edit` },
+        ]}
+      />
+      <div className="flex items-start justify-between">
+        <Heading title="Edit Language" description="Update language details" />
+      </div>
+      <Separator />
+
+      {loading && !language && <p className="text-sm text-muted-foreground">Loading…</p>}
+
+      {language && form && (
+        <Card>
+          <CardHeader />
+          <CardContent>
+            <FormErrorAlert messages={formError} />
+            <form onSubmit={handleSubmit} className="space-y-8 w-full">
+              <Card className="w-full">
+                <CardHeader className="border-b bg-muted/50">
+                  <CardTitle className="text-2xl">Language Information</CardTitle>
+                  <CardDescription className="text-base">Enter language details</CardDescription>
+                </CardHeader>
+                <CardContent className="pt-6">
+                  <div className="space-y-6">
+                    <div className="space-y-4">
+                      <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Basic Information</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div className="flex flex-col gap-1.5">
+                          <Label htmlFor="name">Language Name</Label>
+                          <Input
+                            id="name"
+                            required
+                            disabled={saving}
+                            placeholder="e.g., English"
+                            value={form.name}
+                            onChange={(e) => set("name", e.target.value)}
+                            type="text"
+                            className={inputClassName}
+                          />
+                        </div>
+                        <div className="flex flex-col gap-1.5">
+                          <Label htmlFor="code">
+                            Language Code &nbsp;
+                            <span className="text-xs text-destructive dark:text-destructive-foreground">(ISO code, e.g., en, ar, bn)</span>
+                          </Label>
+                          <Input
+                            id="code"
+                            required
+                            disabled={saving}
+                            placeholder="e.g., en"
+                            value={form.code}
+                            type="text"
+                            maxLength={10}
+                            className={`${inputClassName} lowercase`}
+                            onChange={(e) => set("code", e.target.value.toLowerCase())}
+                          />
+                        </div>
+                        <div className="flex flex-col gap-1.5">
+                          <Label htmlFor="nativeName">
+                            Native Name &nbsp;
+                            <span className="text-xs text-muted-foreground">(e.g., العربية, বাংলা)</span>
+                          </Label>
+                          <Input
+                            id="nativeName"
+                            required
+                            disabled={saving}
+                            placeholder="e.g., English"
+                            value={form.nativeName}
+                            onChange={(e) => set("nativeName", e.target.value)}
+                            type="text"
+                            className={inputClassName}
+                          />
+                        </div>
+                        <div className="flex flex-col gap-1.5">
+                          <Label htmlFor="direction">Text Direction</Label>
+                          <Select value={form.direction} onValueChange={(value) => set("direction", value as "ltr" | "rtl")} disabled={saving}>
+                            <SelectTrigger id="direction" className="w-full min-w-[200px]">
+                              <SelectValue placeholder="Select text direction" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {DIRECTION_OPTIONS.map((option) => (
+                                <SelectItem key={option.value} value={option.value}>
+                                  {option.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+
+                <div className="flex flex-wrap justify-center gap-4 mt-6">
+                  <div className="flex flex-row items-center space-x-3 rounded-lg border border-purple-500 bg-purple-50 dark:bg-purple-950/20 p-4">
+                    <Checkbox id="isDefault" checked={form.isDefault} onCheckedChange={(checked) => set("isDefault", checked === true)} />
+                    <div className="space-y-1 leading-none">
+                      <Label htmlFor="isDefault" className="text-base font-medium">
+                        Default Language
+                      </Label>
+                      <p className="text-sm text-muted-foreground">The default language is the one a new deployment&apos;s locale falls back to</p>
+                    </div>
+                  </div>
+                  <div className="flex flex-row items-center space-x-3 rounded-lg border border-purple-500 bg-purple-50 dark:bg-purple-950/20 p-4">
+                    <Checkbox id="isActive" checked={form.isActive} onCheckedChange={(checked) => set("isActive", checked === true)} />
+                    <div className="space-y-1 leading-none">
+                      <Label htmlFor="isActive" className="text-base font-medium">
+                        Active Status
+                      </Label>
+                      <p className="text-sm text-muted-foreground">Language will be active and available for selection</p>
+                    </div>
+                  </div>
+                </div>
+
+                <CardFooter className="flex justify-center gap-4 mt-8 pb-8">
+                  <Button type="button" variant="outline" onClick={() => router.push(`/languages/${id}`)} disabled={saving}>
+                    Cancel
+                  </Button>
+                  <Button disabled={saving} className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 min-w-32" type="submit">
+                    {saving ? "Updating..." : "Update Language"}
+                  </Button>
+                </CardFooter>
+              </Card>
+            </form>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+});

package/registry/admin-apps/nextjs/variants/workspaces/src/app/(console)/languages/[id]/page.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { useAbility } from "@casl/react";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+import { AuthApiError, type LanguageSummary } from "@simple-auth-kit/auth-client";
+import { PencilIcon } from "lucide-react";
+import { toast } from "sonner";
+import { Breadcrumb } from "@/components/breadcrumb";
+import { PermissionRequired } from "@/components/permission-required";
+import { Badge } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { PERMISSIONS, hasPermission, missingPermissionHint, type AppAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { useWorkspaceStore } from "@/lib/stores/store-context";
+
+function apiErrorMessage(err: unknown, fallback: string): string {
+  return err instanceof AuthApiError ? err.message : fallback;
+}
+
+function field(label: string, value: string | null) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span className="text-sm">{value || "—"}</span>
+    </div>
+  );
+}
+
+export default observer(function LanguageDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const router = useRouter();
+  const ability = useAbility<AppAbility>();
+  const workspaces = useWorkspaceStore();
+  const activeWorkspaceId = workspaces.activeWorkspaceId;
+  const canRead = hasPermission(ability, PERMISSIONS.languagesRead);
+  const canManage = hasPermission(ability, PERMISSIONS.languagesManage);
+  const canStatus = hasPermission(ability, PERMISSIONS.languagesStatus);
+
+  const [language, setLanguage] = useState<LanguageSummary | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await authClient.getLanguage(id);
+      setLanguage(result);
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't load this language."));
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    if (!canRead || !activeWorkspaceId) return;
+    void load();
+  }, [canRead, activeWorkspaceId, load]);
+
+  if (!canRead) return <PermissionRequired permission={PERMISSIONS.languagesRead} what="Language details" />;
+
+  async function toggleActive() {
+    if (!language) return;
+    try {
+      if (language.isActive) await authClient.deactivateLanguage(id);
+      else await authClient.activateLanguage(id);
+      setLanguage((prev) => (prev ? { ...prev, isActive: !prev.isActive } : prev));
+      toast.success(language.isActive ? "Language deactivated." : "Language activated.");
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't change this language's status. Try again."));
+    }
+  }
+
+  async function handleDelete() {
+    setDeleting(true);
+    try {
+      await authClient.deleteLanguage(id);
+      toast.success("Language deleted.");
+      router.push("/languages");
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't delete this language. Try again."));
+      setDeleting(false);
+      setDeleteOpen(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Breadcrumb items={[{ title: "Languages", href: "/languages" }, { title: language?.name ?? "Details", href: `/languages/${id}` }]} />
+
+      {loading && !language && <p className="text-sm text-muted-foreground">Loading…</p>}
+
+      {language && (
+        <>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <div>
+                <CardTitle>{language.name}</CardTitle>
+                <CardDescription>
+                  Created: {new Date(language.createdAt).toLocaleDateString()} · Updated: {new Date(language.updatedAt).toLocaleDateString()}
+                </CardDescription>
+              </div>
+              <div className="flex items-center gap-1.5">
+                {language.isDefault && <Badge variant="secondary">Default</Badge>}
+                <Badge variant={language.isActive ? "success" : "destructive"}>{language.isActive ? "Active" : "Inactive"}</Badge>
+                <Link
+                  href={`/languages/${id}/edit`}
+                  className={buttonVariants({ variant: "outline", size: "sm" })}
+                  title={canManage ? undefined : missingPermissionHint(PERMISSIONS.languagesManage)}
+                  aria-disabled={!canManage}
+                  onClick={(e) => !canManage && e.preventDefault()}
+                >
+                  <PencilIcon />
+                  Edit
+                </Link>
+              </div>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-4">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                {field("Name", language.name)}
+                {field("Native name", language.nativeName)}
+                {field("Code", language.code)}
+                {field("Direction", language.direction === "rtl" ? "Right to left (RTL)" : "Left to right (LTR)")}
+                {field("Default language", language.isDefault ? "Yes" : "No")}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Danger zone</CardTitle>
+            </CardHeader>
+            <CardContent className="flex flex-wrap gap-2">
+              <Button
+                variant={language.isActive ? "destructive" : "outline"}
+                disabled={!canStatus}
+                title={canStatus ? undefined : missingPermissionHint(PERMISSIONS.languagesStatus)}
+                onClick={() => void toggleActive()}
+              >
+                {language.isActive ? "Deactivate" : "Activate"}
+              </Button>
+
+              <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+                <DialogTrigger asChild>
+                  <Button variant="destructive" disabled={!canManage} title={canManage ? undefined : missingPermissionHint(PERMISSIONS.languagesManage)}>
+                    Delete language
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Delete {language.name}?</DialogTitle>
+                    <DialogDescription>
+                      This soft-deletes the language: it stops appearing in listings and pickers, but the row is kept for audit purposes.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <DialogFooter>
+                    <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+                      Cancel
+                    </Button>
+                    <Button variant="destructive" onClick={() => void handleDelete()} disabled={deleting}>
+                      {deleting ? "Deleting…" : "Delete language"}
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </div>
+  );
+});

package/registry/admin-apps/nextjs/variants/workspaces/src/app/(console)/languages/language-schema.ts

@@ -0,0 +1,26 @@
+// This app has no zod dependency, so unlike the plain admin app the form shape lives here as a
+// plain type and the page validates by hand — same convention as `../users/user-schema.ts`.
+// `CreateLanguageInput` and `UpdateLanguageInput` share every field, so one shape serves both forms.
+
+export type LanguageFormValues = {
+  code: string;
+  name: string;
+  nativeName: string;
+  direction: "ltr" | "rtl";
+  isDefault: boolean;
+  isActive: boolean;
+};
+
+export const emptyLanguageForm: LanguageFormValues = {
+  code: "",
+  name: "",
+  nativeName: "",
+  direction: "ltr",
+  isDefault: false,
+  isActive: true,
+};
+
+export const DIRECTION_OPTIONS = [
+  { label: "Left to right (LTR)", value: "ltr" },
+  { label: "Right to left (RTL)", value: "rtl" },
+];