@simple-auth-kit/cli 1.3.1 → 1.4.0

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

@@ -3,8 +3,11 @@
 import { useAbility } from "@casl/react";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
-import { AuthApiError, type CustomerSummary } from "@simple-auth-kit/auth-client";
+import { startTransition, useCallback, useEffect, useState } from "react";
+import {
+  AuthApiError,
+  type CustomerSummary,
+} from "@simple-auth-kit/auth-client";
 import { format } from "date-fns";
 import { PencilIcon } from "lucide-react";
 import { toast } from "sonner";
@@ -13,7 +16,13 @@ import { PermissionRequired } from "@/components/permission-required";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button, buttonVariants } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -23,7 +32,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { PERMISSIONS, hasPermission, missingPermissionHint, type AppAbility } from "@/lib/ability";
+import {
+  PERMISSIONS,
+  hasPermission,
+  missingPermissionHint,
+  type AppAbility,
+} from "@/lib/ability";
 import { authClient } from "@/lib/auth-client";
 
 function apiErrorMessage(err: unknown, fallback: string): string {
@@ -82,20 +96,35 @@ export default function CustomerDetailPage() {
 
   useEffect(() => {
     if (!canRead) return;
-    void load();
+    startTransition(() => void load());
   }, [canRead, load]);
 
-  if (!canRead) return <PermissionRequired permission={PERMISSIONS.customersRead} what="Customer details" />;
+  if (!canRead)
+    return (
+      <PermissionRequired
+        permission={PERMISSIONS.customersRead}
+        what="Customer details"
+      />
+    );
 
   async function toggleActive() {
     if (!customer) return;
     try {
       if (customer.isActive) await authClient.deactivateCustomer(id);
       else await authClient.activateCustomer(id);
-      setCustomer((prev) => (prev ? { ...prev, isActive: !prev.isActive } : prev));
-      toast.success(customer.isActive ? "Customer deactivated." : "Customer activated.");
+      setCustomer((prev) =>
+        prev ? { ...prev, isActive: !prev.isActive } : prev,
+      );
+      toast.success(
+        customer.isActive ? "Customer deactivated." : "Customer activated.",
+      );
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't change this customer's status. Try again."));
+      toast.error(
+        apiErrorMessage(
+          err,
+          "Couldn't change this customer's status. Try again.",
+        ),
+      );
     }
   }
 
@@ -106,7 +135,9 @@ export default function CustomerDetailPage() {
       toast.success("Customer deleted.");
       router.push("/customers");
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't delete this customer. Try again."));
+      toast.error(
+        apiErrorMessage(err, "Couldn't delete this customer. Try again."),
+      );
       setDeleting(false);
       setDeleteOpen(false);
     }
@@ -114,27 +145,44 @@ export default function CustomerDetailPage() {
 
   return (
     <div className="flex flex-col gap-4">
-      <Breadcrumb items={[{ title: "Customers", href: "/customers" }, { title: customer?.email ?? "Details", href: `/customers/${id}` }]} />
+      <Breadcrumb
+        items={[
+          { title: "Customers", href: "/customers" },
+          { title: customer?.email ?? "Details", href: `/customers/${id}` },
+        ]}
+      />
 
-      {loading && !customer && <p className="text-sm text-muted-foreground">Loading…</p>}
+      {loading && !customer && (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      )}
 
       {customer && (
         <>
           <Card>
             <CardHeader className="flex flex-row items-center justify-between">
               <div>
-                <CardTitle>{customerName(customer) || customer.email}</CardTitle>
+                <CardTitle>
+                  {customerName(customer) || customer.email}
+                </CardTitle>
                 <CardDescription>
-                  Joined: {format(new Date(customer.joinedDate), "dd MMM yyyy")} · Created: {format(new Date(customer.createdAt), "dd MMM yyyy")} · Updated:{" "}
-                  {format(new Date(customer.updatedAt), "dd MMM yyyy")}
+                  Joined: {format(new Date(customer.joinedDate), "dd MMM yyyy")}{" "}
+                  · Created:{" "}
+                  {format(new Date(customer.createdAt), "dd MMM yyyy")} ·
+                  Updated: {format(new Date(customer.updatedAt), "dd MMM yyyy")}
                 </CardDescription>
               </div>
               <div className="flex items-center gap-1.5">
-                <Badge variant={customer.isActive ? "success" : "destructive"}>{customer.isActive ? "Active" : "Inactive"}</Badge>
+                <Badge variant={customer.isActive ? "success" : "destructive"}>
+                  {customer.isActive ? "Active" : "Inactive"}
+                </Badge>
                 <Link
                   href={`/customers/${id}/edit`}
                   className={buttonVariants({ variant: "outline", size: "sm" })}
-                  title={canManage ? undefined : missingPermissionHint(PERMISSIONS.customersManage)}
+                  title={
+                    canManage
+                      ? undefined
+                      : missingPermissionHint(PERMISSIONS.customersManage)
+                  }
                   aria-disabled={!canManage}
                   onClick={(e) => !canManage && e.preventDefault()}
                 >
@@ -145,8 +193,16 @@ export default function CustomerDetailPage() {
             </CardHeader>
             <CardContent className="flex flex-col gap-4">
               <Avatar className="size-16">
-                {customer.photo && <AvatarImage src={customer.photo} alt="" className="object-cover" />}
-                <AvatarFallback className="text-base">{initialsOf(customer)}</AvatarFallback>
+                {customer.photo && (
+                  <AvatarImage
+                    src={customer.photo}
+                    alt=""
+                    className="object-cover"
+                  />
+                )}
+                <AvatarFallback className="text-base">
+                  {initialsOf(customer)}
+                </AvatarFallback>
               </Avatar>
 
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
@@ -155,14 +211,39 @@ export default function CustomerDetailPage() {
                 {field("First name", customer.firstName)}
                 {field("Last name", customer.lastName)}
                 {field("Phone", customer.phone)}
-                {field("Gender", customer.gender && customer.gender.charAt(0).toUpperCase() + customer.gender.slice(1))}
-                {field("Date of birth", customer.dob ? format(new Date(customer.dob), "dd MMM yyyy") : null)}
-                {field("Joined date", format(new Date(customer.joinedDate), "dd MMM yyyy"))}
+                {field(
+                  "Gender",
+                  customer.gender &&
+                    customer.gender.charAt(0).toUpperCase() +
+                      customer.gender.slice(1),
+                )}
+                {field(
+                  "Date of birth",
+                  customer.dob
+                    ? format(new Date(customer.dob), "dd MMM yyyy")
+                    : null,
+                )}
+                {field(
+                  "Joined date",
+                  format(new Date(customer.joinedDate), "dd MMM yyyy"),
+                )}
               </div>
 
               <div className="flex flex-wrap gap-1.5">
-                <Badge variant={customer.isEmailVerified ? "success" : "outline"}>{customer.isEmailVerified ? "Email verified" : "Email unverified"}</Badge>
-                <Badge variant={customer.isPhoneVerified ? "success" : "outline"}>{customer.isPhoneVerified ? "Phone verified" : "Phone unverified"}</Badge>
+                <Badge
+                  variant={customer.isEmailVerified ? "success" : "outline"}
+                >
+                  {customer.isEmailVerified
+                    ? "Email verified"
+                    : "Email unverified"}
+                </Badge>
+                <Badge
+                  variant={customer.isPhoneVerified ? "success" : "outline"}
+                >
+                  {customer.isPhoneVerified
+                    ? "Phone verified"
+                    : "Phone unverified"}
+                </Badge>
               </div>
             </CardContent>
           </Card>
@@ -175,7 +256,11 @@ export default function CustomerDetailPage() {
               <Button
                 variant={customer.isActive ? "destructive" : "outline"}
                 disabled={!canStatus}
-                title={canStatus ? undefined : missingPermissionHint(PERMISSIONS.customersStatus)}
+                title={
+                  canStatus
+                    ? undefined
+                    : missingPermissionHint(PERMISSIONS.customersStatus)
+                }
                 onClick={() => void toggleActive()}
               >
                 {customer.isActive ? "Deactivate" : "Activate"}
@@ -183,7 +268,15 @@ export default function CustomerDetailPage() {
 
               <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
                 <DialogTrigger asChild>
-                  <Button variant="destructive" disabled={!canManage} title={canManage ? undefined : missingPermissionHint(PERMISSIONS.customersManage)}>
+                  <Button
+                    variant="destructive"
+                    disabled={!canManage}
+                    title={
+                      canManage
+                        ? undefined
+                        : missingPermissionHint(PERMISSIONS.customersManage)
+                    }
+                  >
                     Delete customer
                   </Button>
                 </DialogTrigger>
@@ -191,14 +284,23 @@ export default function CustomerDetailPage() {
                   <DialogHeader>
                     <DialogTitle>Delete {customer.email}?</DialogTitle>
                     <DialogDescription>
-                      This soft-deletes the customer: they stop appearing in listings, but the row is kept for audit purposes.
+                      This soft-deletes the customer: they stop appearing in
+                      listings, but the row is kept for audit purposes.
                     </DialogDescription>
                   </DialogHeader>
                   <DialogFooter>
-                    <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+                    <Button
+                      variant="outline"
+                      onClick={() => setDeleteOpen(false)}
+                      disabled={deleting}
+                    >
                       Cancel
                     </Button>
-                    <Button variant="destructive" onClick={() => void handleDelete()} disabled={deleting}>
+                    <Button
+                      variant="destructive"
+                      onClick={() => void handleDelete()}
+                      disabled={deleting}
+                    >
                       {deleting ? "Deleting…" : "Delete customer"}
                     </Button>
                   </DialogFooter>

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

@@ -3,25 +3,48 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useAbility } from "@casl/react";
 import { useParams, useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
+import { startTransition, useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { AuthApiError, type LanguageSummary, type UpdateLanguageInput } from "@simple-auth-kit/auth-client";
+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 {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Combobox } from "@/components/ui/combobox";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { Heading } from "@/components/ui/heading";
 import { Input } from "@/components/ui/input";
 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 { DIRECTION_OPTIONS, languageSchema, type LanguageFormValues } from "../../language-schema";
+import {
+  DIRECTION_OPTIONS,
+  languageSchema,
+  type LanguageFormValues,
+} from "../../language-schema";
 
 function apiErrorMessage(err: unknown, fallback: string): string {
   return err instanceof AuthApiError ? err.message : fallback;
@@ -50,7 +73,14 @@ export default function EditLanguagePage() {
 
   const form = useForm<LanguageFormValues>({
     resolver: zodResolver(languageSchema),
-    defaultValues: { code: "", name: "", nativeName: "", direction: "ltr", isDefault: false, isActive: true },
+    defaultValues: {
+      code: "",
+      name: "",
+      nativeName: "",
+      direction: "ltr",
+      isDefault: false,
+      isActive: true,
+    },
   });
 
   const load = useCallback(async () => {
@@ -70,10 +100,16 @@ export default function EditLanguagePage() {
 
   useEffect(() => {
     if (!canManage) return;
-    void load();
+    startTransition(() => void load());
   }, [canManage, load]);
 
-  if (!canManage) return <PermissionRequired permission={PERMISSIONS.languagesManage} what="Editing a language" />;
+  if (!canManage)
+    return (
+      <PermissionRequired
+        permission={PERMISSIONS.languagesManage}
+        what="Editing a language"
+      />
+    );
 
   async function onSubmit(values: LanguageFormValues) {
     if (!language) return;
@@ -112,7 +148,9 @@ export default function EditLanguagePage() {
       </div>
       <Separator />
 
-      {loading && !language && <p className="text-sm text-muted-foreground">Loading…</p>}
+      {loading && !language && (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      )}
 
       {language && (
         <Card>
@@ -120,16 +158,25 @@ export default function EditLanguagePage() {
           <CardContent>
             <FormErrorAlert messages={formError} />
             <Form {...form}>
-              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 w-full">
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                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>
+                    <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>
+                        <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">
                           <FormField
                             control={form.control}
@@ -157,7 +204,9 @@ export default function EditLanguagePage() {
                               <FormItem>
                                 <FormLabel>
                                   Language Code &nbsp;
-                                  <span className="text-xs text-destructive dark:text-destructive-foreground">(ISO code, e.g., en, ar, bn)</span>
+                                  <span className="text-xs text-destructive dark:text-destructive-foreground">
+                                    (ISO code, e.g., en, ar, bn)
+                                  </span>
                                 </FormLabel>
                                 <FormControl>
                                   <Input
@@ -167,7 +216,11 @@ export default function EditLanguagePage() {
                                     type="text"
                                     maxLength={10}
                                     className="bg-background border-2 focus:border-purple-500 transition-colors lowercase"
-                                    onChange={(e) => field.onChange(e.target.value.toLowerCase())}
+                                    onChange={(e) =>
+                                      field.onChange(
+                                        e.target.value.toLowerCase(),
+                                      )
+                                    }
                                   />
                                 </FormControl>
                                 <FormMessage />
@@ -181,7 +234,9 @@ export default function EditLanguagePage() {
                               <FormItem>
                                 <FormLabel>
                                   Native Name &nbsp;
-                                  <span className="text-xs text-muted-foreground">(e.g., العربية, বাংলা)</span>
+                                  <span className="text-xs text-muted-foreground">
+                                    (e.g., العربية, বাংলা)
+                                  </span>
                                 </FormLabel>
                                 <FormControl>
                                   <Input
@@ -208,7 +263,9 @@ export default function EditLanguagePage() {
                                       options={DIRECTION_OPTIONS}
                                       selected={field.value}
                                       placeholder="Select text direction"
-                                      onChange={(option) => field.onChange(option.value)}
+                                      onChange={(option) =>
+                                        field.onChange(option.value)
+                                      }
                                       showCreate={false}
                                       popoverClassName="min-w-[250px]"
                                     />
@@ -230,11 +287,21 @@ export default function EditLanguagePage() {
                       render={({ field }) => (
                         <FormItem className="flex flex-row items-center space-x-3 space-y-0 rounded-lg border border-purple-500 bg-purple-50 dark:bg-purple-950/20 p-4">
                           <FormControl>
-                            <Checkbox checked={field.value} onCheckedChange={(checked) => field.onChange(checked === true)} />
+                            <Checkbox
+                              checked={field.value}
+                              onCheckedChange={(checked) =>
+                                field.onChange(checked === true)
+                              }
+                            />
                           </FormControl>
                           <div className="space-y-1 leading-none">
-                            <FormLabel className="text-base font-medium">Default Language</FormLabel>
-                            <FormDescription className="text-sm">The default language is the one a new deployment&apos;s locale falls back to</FormDescription>
+                            <FormLabel className="text-base font-medium">
+                              Default Language
+                            </FormLabel>
+                            <FormDescription className="text-sm">
+                              The default language is the one a new
+                              deployment&apos;s locale falls back to
+                            </FormDescription>
                           </div>
                         </FormItem>
                       )}
@@ -245,11 +312,21 @@ export default function EditLanguagePage() {
                       render={({ field }) => (
                         <FormItem className="flex flex-row items-center space-x-3 space-y-0 rounded-lg border border-purple-500 bg-purple-50 dark:bg-purple-950/20 p-4">
                           <FormControl>
-                            <Checkbox checked={field.value} onCheckedChange={(checked) => field.onChange(checked === true)} />
+                            <Checkbox
+                              checked={field.value}
+                              onCheckedChange={(checked) =>
+                                field.onChange(checked === true)
+                              }
+                            />
                           </FormControl>
                           <div className="space-y-1 leading-none">
-                            <FormLabel className="text-base font-medium">Active Status</FormLabel>
-                            <FormDescription className="text-sm">Language will be active and available for selection</FormDescription>
+                            <FormLabel className="text-base font-medium">
+                              Active Status
+                            </FormLabel>
+                            <FormDescription className="text-sm">
+                              Language will be active and available for
+                              selection
+                            </FormDescription>
                           </div>
                         </FormItem>
                       )}
@@ -257,10 +334,19 @@ export default function EditLanguagePage() {
                   </div>
 
                   <CardFooter className="flex justify-center gap-4 mt-8 pb-8">
-                    <Button type="button" variant="outline" onClick={() => router.push(`/languages/${id}`)} disabled={saving}>
+                    <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">
+                    <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>