@simple-auth-kit/cli 1.3.2 → 1.4.1

package/lib/copy.ts

@@ -1,15 +1,40 @@
 import { createHash } from "node:crypto";
-import { mkdir, readdir, readFile, rm, rmdir, writeFile } from "node:fs/promises";
+import {
+  mkdir,
+  readdir,
+  readFile,
+  rm,
+  rmdir,
+  writeFile,
+} from "node:fs/promises";
 import { dirname, join, relative, resolve, sep } from "node:path";
 
 // Never copied out of the registry: build output, the registry's own package/tsconfig wiring,
 // and the per-variant test harness. A consumer gets source, not this repo's scaffolding.
-export const NEVER_COPY = new Set(["node_modules", "dist", "generated", "test", "scripts", ".variant", "package.json", "tsconfig.json", ".env"]);
+export const NEVER_COPY = new Set([
+  "node_modules",
+  "dist",
+  "generated",
+  "test",
+  "scripts",
+  ".variant",
+  "package.json",
+  "tsconfig.json",
+  ".env",
+]);
 
 // For "scaffold" installs (admin/mobile apps materialized as whole standalone projects, not
 // merged into an existing one): package.json/tsconfig.json are real, consumer-facing content
 // here, not the registry's own dev wiring, so they're copied like any other file.
-export const SCAFFOLD_NEVER_COPY = new Set(["node_modules", "dist", "generated", "test", "scripts", ".variant", ".env"]);
+export const SCAFFOLD_NEVER_COPY = new Set([
+  "node_modules",
+  "dist",
+  "generated",
+  "test",
+  "scripts",
+  ".variant",
+  ".env",
+]);
 
 export interface CopyOptions {
   /**
@@ -79,7 +104,8 @@ export interface CopyResult {
   updated: string[];
 }
 
-export const sha256 = (content: string) => createHash("sha256").update(content).digest("hex");
+export const sha256 = (content: string) =>
+  createHash("sha256").update(content).digest("hex");
 export const toPosix = (path: string) => path.split(sep).join("/");
 
 async function readIfExists(path: string): Promise<string | null> {
@@ -90,7 +116,13 @@ async function readIfExists(path: string): Promise<string | null> {
   }
 }
 
-export async function copyOneFile(srcPath: string, destPath: string, destRoot: string, opts: CopyOptions, result: CopyResult): Promise<void> {
+export async function copyOneFile(
+  srcPath: string,
+  destPath: string,
+  destRoot: string,
+  opts: CopyOptions,
+  result: CopyResult,
+): Promise<void> {
   const rel = toPosix(relative(destRoot, destPath));
 
   if (opts.ignore?.includes(rel)) {
@@ -113,7 +145,12 @@ export async function copyOneFile(srcPath: string, destPath: string, destRoot: s
   const existing = await readIfExists(destPath);
   const recorded = opts.previous?.[rel];
   const forced = opts.force || opts.forcePaths?.has(rel);
-  if (!forced && existing !== null && recorded !== undefined && sha256(existing) !== recorded) {
+  if (
+    !forced &&
+    existing !== null &&
+    recorded !== undefined &&
+    sha256(existing) !== recorded
+  ) {
     result.skipped.push(rel);
     result.manifest[rel] = sha256(existing);
     return;
@@ -127,7 +164,11 @@ export async function copyOneFile(srcPath: string, destPath: string, destRoot: s
 
   result.updated.push(rel);
   result.manifest[rel] = newHash;
-  opts.collectDiffs?.push({ path: rel, oldContent: existing, newContent: content });
+  opts.collectDiffs?.push({
+    path: rel,
+    oldContent: existing,
+    newContent: content,
+  });
   if (opts.dryRun) return;
 
   await mkdir(dirname(destPath), { recursive: true });
@@ -135,15 +176,31 @@ export async function copyOneFile(srcPath: string, destPath: string, destRoot: s
 }
 
 /** Recursively copies srcDir into destDir, rewriting the placeholder core import alias in .ts files. */
-export async function copyDir(srcDir: string, destDir: string, opts: CopyOptions, destRoot: string = destDir, result?: CopyResult): Promise<CopyResult> {
-  const acc: CopyResult = result ?? { manifest: {}, skipped: [], ignored: [], updated: [] };
+export async function copyDir(
+  srcDir: string,
+  destDir: string,
+  opts: CopyOptions,
+  destRoot: string = destDir,
+  result?: CopyResult,
+): Promise<CopyResult> {
+  const acc: CopyResult = result ?? {
+    manifest: {},
+    skipped: [],
+    ignored: [],
+    updated: [],
+  };
   const skipNames = opts.neverCopy ?? NEVER_COPY;
   const entries = await readdir(srcDir, { withFileTypes: true });
 
   for (const entry of entries) {
     if (skipNames.has(entry.name)) continue;
     const srcPath = join(srcDir, entry.name);
-    const destPath = join(destDir, entry.name);
+    // Registry sources name this "gitignore" (no leading dot) because `npm publish` silently
+    // drops every literal `.gitignore` file from the package — a well-known npm packing quirk,
+    // not specific to this file. Renamed back to `.gitignore` only on the way out, so a
+    // consumer's scaffolded project still gets a real one.
+    const destName = entry.name === "gitignore" ? ".gitignore" : entry.name;
+    const destPath = join(destDir, destName);
 
     if (entry.isDirectory()) {
       await copyDir(srcPath, destPath, opts, destRoot, acc);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-auth-kit/cli",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "license": "MIT",
   "description": "simple-auth-kit add <combo> — copies registry source (backend combos, admin consoles, mobile apps) into a consumer repo, shadcn-CLI-style. Nothing is ever installed as a runtime dependency of the consumer.",
   "bin": {

package/registry/admin-apps/nextjs/shared/.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit "$1"

package/registry/admin-apps/nextjs/shared/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/registry/admin-apps/nextjs/shared/.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "*.{ts,tsx,js,jsx}": "eslint --fix",
+  "*.{ts,tsx,js,jsx,json,md,css,scss}": "prettier --write"
+}

package/registry/admin-apps/nextjs/shared/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "all"
+}

package/registry/admin-apps/nextjs/shared/commitlint.config.js

@@ -0,0 +1,5 @@
+const config = {
+  extends: ["@commitlint/config-conventional"],
+};
+
+export default config;

package/registry/admin-apps/nextjs/shared/eslint.config.js

@@ -0,0 +1,28 @@
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+
+const config = [
+  {
+    // src/components/ui/** is shadcn-generated (components.json), not hand-authored — same
+    // "vendored, don't lint" treatment this repo already gives it for Biome (the surviving
+    // biome-ignore-all comment on multi-selector.tsx).
+    ignores: [
+      ".next/**",
+      "node_modules/**",
+      "out/**",
+      "dist/**",
+      "src/components/ui/**",
+    ],
+  },
+  ...nextCoreWebVitals,
+  {
+    rules: {
+      // TanStack Table's useReactTable() is on React Compiler's own documented list of
+      // incompatible APIs (it returns functions that can't be safely memoized) — the compiler
+      // already handles this correctly by skipping memoization for it; there's no code change
+      // that "fixes" a structural library incompatibility.
+      "react-hooks/incompatible-library": "off",
+    },
+  },
+];
+
+export default config;

package/registry/admin-apps/nextjs/shared/gitignore

@@ -0,0 +1,11 @@
+/node_modules
+/.next/
+/out/
+.env*.local
+next-env.d.ts
+*.tsbuildinfo
+/AGENTS.md
+/CLAUDE.md
+
+# husky-generated shim dir (recreated by the "prepare" script on install)
+.husky/_

package/registry/admin-apps/nextjs/variants/base/package.json

@@ -8,7 +8,9 @@
     "dev": "next dev -p 3000",
     "build": "next build",
     "start": "next start -p 3000",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "prepare": "husky"
   },
   "dependencies": {
     "@casl/ability": "^7.0.1",
@@ -48,11 +50,18 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
     "@tailwindcss/postcss": "^4.3.3",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.4",
+    "eslint": "^9.39.5",
+    "eslint-config-next": "^16.3.5",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.5.1",
+    "prettier": "^3.9.6",
     "tailwindcss": "^4.3.3",
-    "typescript": "^7.0.2"
+    "typescript": "^6.0.3"
   }
 }

package/registry/admin-apps/nextjs/variants/base/src/app/(console)/audit-log/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useAbility } from "@casl/react";
-import { useCallback, useEffect, useState } from "react";
+import { startTransition, useCallback, useEffect, useState } from "react";
 import type { AuditLogEntry, PageMeta } from "@simple-auth-kit/auth-client";
 import { Breadcrumb } from "@/components/breadcrumb";
 import { PermissionRequired } from "@/components/permission-required";
@@ -11,7 +11,14 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { DateTimePicker } from "@/components/ui/datetime-picker";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { PERMISSIONS, hasPermission, type AppAbility } from "@/lib/ability";
 import { authClient } from "@/lib/auth-client";
 import { errorMessage } from "@/lib/error";
@@ -55,11 +62,17 @@ export default function AuditLogPage() {
 
   useEffect(() => {
     if (!canRead) return;
-    void load(1);
+    startTransition(() => void load(1));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [canRead]);
 
-  if (!canRead) return <PermissionRequired permission={PERMISSIONS.auditLogRead} what="The audit log" />;
+  if (!canRead)
+    return (
+      <PermissionRequired
+        permission={PERMISSIONS.auditLogRead}
+        what="The audit log"
+      />
+    );
 
   return (
     <div className="flex flex-col">
@@ -80,19 +93,39 @@ export default function AuditLogPage() {
           >
             <div className="flex flex-col gap-1.5">
               <Label htmlFor="filterUserId">User ID</Label>
-              <Input id="filterUserId" value={userId} onChange={(e) => setUserId(e.target.value)} placeholder="uuid" />
+              <Input
+                id="filterUserId"
+                value={userId}
+                onChange={(e) => setUserId(e.target.value)}
+                placeholder="uuid"
+              />
             </div>
             <div className="flex flex-col gap-1.5">
               <Label htmlFor="filterAction">Action</Label>
-              <Input id="filterAction" value={action} onChange={(e) => setAction(e.target.value)} placeholder="role_assigned" />
+              <Input
+                id="filterAction"
+                value={action}
+                onChange={(e) => setAction(e.target.value)}
+                placeholder="role_assigned"
+              />
             </div>
             <div className="flex flex-col gap-1.5">
               <Label>Since</Label>
-              <DateTimePicker value={since} onChange={setSince} granularity="minute" placeholder="Since" />
+              <DateTimePicker
+                value={since}
+                onChange={setSince}
+                granularity="minute"
+                placeholder="Since"
+              />
             </div>
             <div className="flex flex-col gap-1.5">
               <Label>Until</Label>
-              <DateTimePicker value={until} onChange={setUntil} granularity="minute" placeholder="Until" />
+              <DateTimePicker
+                value={until}
+                onChange={setUntil}
+                granularity="minute"
+                placeholder="Until"
+              />
             </div>
             <div className="col-span-2 flex items-end gap-2 sm:col-span-4">
               <Button type="submit" disabled={loading}>
@@ -136,18 +169,30 @@ export default function AuditLogPage() {
                   </TableCell>
                   <TableCell>
                     <div className="text-sm">{entry.name}</div>
-                    <div className="font-mono text-xs text-muted-foreground">{entry.action}</div>
+                    <div className="font-mono text-xs text-muted-foreground">
+                      {entry.action}
+                    </div>
                   </TableCell>
-                  <TableCell className="font-mono text-xs">{entry.userId ?? "—"}</TableCell>
-                  <TableCell className="max-w-xs truncate font-mono text-xs text-muted-foreground" title={JSON.stringify(entry.info)}>
+                  <TableCell className="font-mono text-xs">
+                    {entry.userId ?? "—"}
+                  </TableCell>
+                  <TableCell
+                    className="max-w-xs truncate font-mono text-xs text-muted-foreground"
+                    title={JSON.stringify(entry.info)}
+                  >
                     {JSON.stringify(entry.info)}
                   </TableCell>
-                  <TableCell className="max-w-3xs truncate text-xs text-muted-foreground">{entry.remarks ?? "—"}</TableCell>
+                  <TableCell className="max-w-3xs truncate text-xs text-muted-foreground">
+                    {entry.remarks ?? "—"}
+                  </TableCell>
                 </TableRow>
               ))}
               {entries.length === 0 && !loading && (
                 <TableRow>
-                  <TableCell colSpan={5} className="text-center text-sm text-muted-foreground">
+                  <TableCell
+                    colSpan={5}
+                    className="text-center text-sm text-muted-foreground"
+                  >
                     No entries match these filters.
                   </TableCell>
                 </TableRow>
@@ -158,16 +203,27 @@ export default function AuditLogPage() {
           {meta && meta.total > 0 && (
             <div className="flex items-center justify-between">
               <p className="text-sm text-muted-foreground">
-                Showing {(meta.page - 1) * meta.limit + 1}–{Math.min(meta.page * meta.limit, meta.total)} of {meta.total}
+                Showing {(meta.page - 1) * meta.limit + 1}–
+                {Math.min(meta.page * meta.limit, meta.total)} of {meta.total}
               </p>
               <div className="flex items-center gap-2">
-                <Button variant="outline" size="sm" disabled={!meta.hasPreviousPage || loading} onClick={() => load(meta.page - 1)}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!meta.hasPreviousPage || loading}
+                  onClick={() => load(meta.page - 1)}
+                >
                   Previous
                 </Button>
                 <span className="text-sm text-muted-foreground">
                   Page {meta.page} of {meta.pageCount}
                 </span>
-                <Button variant="outline" size="sm" disabled={!meta.hasNextPage || loading} onClick={() => load(meta.page + 1)}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!meta.hasNextPage || loading}
+                  onClick={() => load(meta.page + 1)}
+                >
                   Next
                 </Button>
               </div>

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

@@ -3,9 +3,13 @@
 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 CustomerSummary, type UpdateCustomerInput } from "@simple-auth-kit/auth-client";
+import {
+  AuthApiError,
+  type CustomerSummary,
+  type UpdateCustomerInput,
+} from "@simple-auth-kit/auth-client";
 import { format } from "date-fns";
 import { toast } from "sonner";
 import { Breadcrumb } from "@/components/breadcrumb";
@@ -13,18 +17,37 @@ import { FormErrorAlert } from "@/components/form-error-alert";
 import { PermissionRequired } from "@/components/permission-required";
 import { PhotoUpload } from "@/components/photo-upload";
 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 { DatePicker } from "@/components/ui/date-picker";
-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 { GENDER_OPTIONS, editCustomerSchema, type EditCustomerFormValues } from "../../customer-schema";
+import {
+  GENDER_OPTIONS,
+  editCustomerSchema,
+  type EditCustomerFormValues,
+} from "../../customer-schema";
 
 function apiErrorMessage(err: unknown, fallback: string): string {
   return err instanceof AuthApiError ? err.message : fallback;
@@ -88,10 +111,16 @@ export default function EditCustomerPage() {
 
   useEffect(() => {
     if (!canManage) return;
-    void load();
+    startTransition(() => void load());
   }, [canManage, load]);
 
-  if (!canManage) return <PermissionRequired permission={PERMISSIONS.customersManage} what="Editing a customer" />;
+  if (!canManage)
+    return (
+      <PermissionRequired
+        permission={PERMISSIONS.customersManage}
+        what="Editing a customer"
+      />
+    );
 
   async function onSubmit(values: EditCustomerFormValues) {
     if (!customer) return;
@@ -105,7 +134,9 @@ export default function EditCustomerPage() {
       phone: values.phone || null,
       dob: values.dob ? format(values.dob, "yyyy-MM-dd") : null,
       gender: values.gender || null,
-      joinedDate: values.joinedDate ? format(values.joinedDate, "yyyy-MM-dd") : undefined,
+      joinedDate: values.joinedDate
+        ? format(values.joinedDate, "yyyy-MM-dd")
+        : undefined,
       photo: values.photo || null,
       isActive: values.isActive,
     };
@@ -135,7 +166,9 @@ export default function EditCustomerPage() {
       </div>
       <Separator />
 
-      {loading && !customer && <p className="text-sm text-muted-foreground">Loading…</p>}
+      {loading && !customer && (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      )}
 
       {customer && (
         <Card>
@@ -143,16 +176,25 @@ export default function EditCustomerPage() {
           <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">Customer Information</CardTitle>
-                    <CardDescription className="text-base">Update customer&apos;s basic information</CardDescription>
+                    <CardTitle className="text-2xl">
+                      Customer Information
+                    </CardTitle>
+                    <CardDescription className="text-base">
+                      Update customer&apos;s basic information
+                    </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">Personal Information</h3>
+                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                          Personal Information
+                        </h3>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                           <FormField
                             control={form.control}
@@ -199,7 +241,9 @@ export default function EditCustomerPage() {
                               <FormItem>
                                 <FormLabel>
                                   Username &nbsp;
-                                  <span className="text-xs text-destructive dark:text-destructive-foreground">(Must be unique)</span>
+                                  <span className="text-xs text-destructive dark:text-destructive-foreground">
+                                    (Must be unique)
+                                  </span>
                                 </FormLabel>
                                 <FormControl>
                                   <Input
@@ -217,7 +261,9 @@ export default function EditCustomerPage() {
                       </div>
 
                       <div className="space-y-4">
-                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Contact Information</h3>
+                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                          Contact Information
+                        </h3>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                           <FormField
                             control={form.control}
@@ -226,7 +272,9 @@ export default function EditCustomerPage() {
                               <FormItem>
                                 <FormLabel>
                                   Email &nbsp;
-                                  <span className="text-xs text-destructive dark:text-destructive-foreground">(Must be unique)</span>
+                                  <span className="text-xs text-destructive dark:text-destructive-foreground">
+                                    (Must be unique)
+                                  </span>
                                 </FormLabel>
                                 <FormControl>
                                   <Input
@@ -248,7 +296,9 @@ export default function EditCustomerPage() {
                               <FormItem>
                                 <FormLabel>
                                   Phone &nbsp;
-                                  <span className="text-xs text-muted-foreground">(With country code)</span>
+                                  <span className="text-xs text-muted-foreground">
+                                    (With country code)
+                                  </span>
                                 </FormLabel>
                                 <FormControl>
                                   <Input
@@ -267,7 +317,9 @@ export default function EditCustomerPage() {
                       </div>
 
                       <div className="space-y-4">
-                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Additional Details</h3>
+                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                          Additional Details
+                        </h3>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                           <FormField
                             control={form.control}
@@ -313,7 +365,9 @@ export default function EditCustomerPage() {
                                       options={GENDER_OPTIONS}
                                       selected={field.value ?? ""}
                                       placeholder="Select Gender"
-                                      onChange={(option) => field.onChange(option.value)}
+                                      onChange={(option) =>
+                                        field.onChange(option.value)
+                                      }
                                       showCreate={false}
                                       popoverClassName="min-w-[200px]"
                                     />
@@ -330,7 +384,10 @@ export default function EditCustomerPage() {
 
                   <CardHeader className="border-b bg-muted/50 mt-6">
                     <CardTitle className="text-2xl">Profile Photo</CardTitle>
-                    <CardDescription className="text-base">Upload customer&apos;s profile picture (Max size: 2MB, Formats: JPG, PNG)</CardDescription>
+                    <CardDescription className="text-base">
+                      Upload customer&apos;s profile picture (Max size: 2MB,
+                      Formats: JPG, PNG)
+                    </CardDescription>
                   </CardHeader>
                   <CardContent className="pt-6">
                     <FormField
@@ -340,7 +397,12 @@ export default function EditCustomerPage() {
                         <FormItem>
                           <FormControl>
                             <div>
-                              <PhotoUpload photo={field.value} fallback="?" onChange={field.onChange} disabled={saving} />
+                              <PhotoUpload
+                                photo={field.value}
+                                fallback="?"
+                                onChange={field.onChange}
+                                disabled={saving}
+                              />
                             </div>
                           </FormControl>
                           <FormMessage />
@@ -356,11 +418,21 @@ export default function EditCustomerPage() {
                       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">Customer will be active and available for selection</FormDescription>
+                            <FormLabel className="text-base font-medium">
+                              Active Status
+                            </FormLabel>
+                            <FormDescription className="text-sm">
+                              Customer will be active and available for
+                              selection
+                            </FormDescription>
                           </div>
                         </FormItem>
                       )}
@@ -368,10 +440,19 @@ export default function EditCustomerPage() {
                   </div>
 
                   <CardFooter className="flex justify-center gap-4 mt-8 pb-8">
-                    <Button type="button" variant="outline" onClick={() => router.push(`/customers/${id}`)} disabled={saving}>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => router.push(`/customers/${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 Customer"}
                     </Button>
                   </CardFooter>