betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/pages/users/columns.tsx

@@ -0,0 +1,170 @@
+import { SortIndicator } from '@admin/components/shared/sort-indicator'
+import { Avatar, AvatarFallback } from '@admin/components/ui/avatar'
+import { Badge } from '@admin/components/ui/badge'
+import { Button } from '@admin/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@admin/components/ui/dropdown-menu'
+import type { User } from '@admin/types/auth'
+import { getUserInitials } from '@admin/utils/user/user'
+import type { ColumnDef } from '@tanstack/react-table'
+import { Edit, KeySquare, MoreHorizontal, ShieldCheck } from 'lucide-react'
+import { DeleteUserDialog } from './delete-user-dialog'
+import { EditRoleDialog } from './edit-role-dialog'
+
+export const columns: ColumnDef<User>[] = [
+  {
+    accessorKey: 'email',
+    header: ({ column }) => {
+      const sortDirection = column.getIsSorted()
+
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+        >
+          <span className="truncate">User</span>
+          <SortIndicator direction={sortDirection} />
+        </Button>
+      )
+    },
+    cell: ({ row }) => {
+      const email = row.getValue('email') as string
+      const name = row.original.name
+      return (
+        <div className="flex items-center gap-3">
+          <Avatar className="size-8">
+            <AvatarFallback>{getUserInitials(name || email)}</AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col">
+            <div className="font-medium">{name || 'N/A'}</div>
+            <div className="text-muted-foreground text-sm">{email}</div>
+          </div>
+        </div>
+      )
+    }
+  },
+  {
+    accessorKey: 'emailVerified',
+    header: 'Status',
+    cell: ({ row }) => {
+      const verified = row.getValue('emailVerified') as boolean
+      return (
+        <Badge variant="outline">
+          {verified ? (
+            <span className="flex items-center gap-1">
+              <ShieldCheck className="size-3.5" />
+              Verified
+            </span>
+          ) : (
+            <span className="flex items-center gap-1">
+              <ShieldCheck className="size-3.5" />
+              Unverified
+            </span>
+          )}
+        </Badge>
+      )
+    }
+  },
+  {
+    accessorKey: 'role',
+    header: 'Role',
+    cell: ({ row, table }) => {
+      const role = row.getValue('role') as string
+      const currentUser = table.options.meta?.currentUser
+      const isCurrentUser = currentUser?.email === row.original.email
+
+      if (isCurrentUser) {
+        return (
+          <Badge variant="outline" className="capitalize">
+            {role} (you)
+          </Badge>
+        )
+      }
+
+      return (
+        <EditRoleDialog
+          userId={row.original.id}
+          currentRole={row.original.role}
+          userName={row.original.name}
+        >
+          <Badge variant="outline" className="capitalize cursor-pointer">
+            <span className="flex items-center gap-1">
+              {role}
+              <Edit className="size-3" />
+            </span>
+          </Badge>
+        </EditRoleDialog>
+      )
+    }
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => {
+      const sortDirection = column.getIsSorted()
+
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+        >
+          <span className="truncate">Joined</span>
+          <SortIndicator direction={sortDirection} />
+        </Button>
+      )
+    },
+    cell: ({ row }) => {
+      const date = new Date(row.getValue('createdAt'))
+      return (
+        <div className="text-sm">
+          {date.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+          })}
+        </div>
+      )
+    }
+  },
+  {
+    id: 'actions',
+    size: 80,
+    enableResizing: false,
+    meta: { width: '80px' },
+    cell: ({ row, table }) => {
+      const currentUser = table.options.meta?.currentUser
+      const isCurrentUser = currentUser?.email === row.original.email
+
+      if (isCurrentUser) return null
+
+      return (
+        <div className="flex justify-end">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="size-8 p-0">
+                <span className="sr-only">Open menu</span>
+                <MoreHorizontal className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DeleteUserDialog
+                userId={row.original.id}
+                userName={row.original.name}
+                isCurrentUser={isCurrentUser}
+              />
+              <DropdownMenuItem className="justify-between">
+                <span>Change Password</span>
+                <KeySquare />
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )
+    }
+  }
+]

package/dist/assets/adapters/next/templates/init/pages/users/create-user-dialog.tsx

@@ -0,0 +1,221 @@
+'use client'
+
+import { createUser } from '@admin/actions/users'
+import { Button } from '@admin/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@admin/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@admin/components/ui/form'
+import { Input } from '@admin/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@admin/components/ui/select'
+import { UserRole } from '@admin/types/auth'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { LoaderCircle } from 'lucide-react'
+import * as React from 'react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'
+
+const createUserSchema = z.object({
+  email: z.string().trim().min(1, 'Email is required').email('Enter a valid email address'),
+  name: z
+    .string()
+    .trim()
+    .min(1, 'Name is required')
+    .max(100, 'Name must be 100 characters or fewer'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+  role: z.nativeEnum(UserRole, {
+    errorMap: () => ({ message: 'Role is required' })
+  })
+})
+
+type CreateUserFormValues = z.infer<typeof createUserSchema>
+
+const defaultValues: CreateUserFormValues = {
+  email: '',
+  name: '',
+  password: '',
+  role: UserRole.MEMBER
+}
+
+export function CreateUserDialog() {
+  const [open, setOpen] = React.useState(false)
+  const queryClient = useQueryClient()
+
+  const form = useForm<CreateUserFormValues>({
+    resolver: standardSchemaResolver(createUserSchema),
+    defaultValues,
+    mode: 'onBlur',
+    reValidateMode: 'onChange'
+  })
+
+  const mutation = useMutation({
+    mutationFn: async (values: CreateUserFormValues) => {
+      const result = await createUser(values)
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to create user')
+      }
+
+      return result
+    },
+    onSuccess: async () => {
+      toast.success('User created successfully')
+      await queryClient.invalidateQueries({ queryKey: ['users'] })
+      resetFormState()
+      setOpen(false)
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'An unexpected error occurred')
+    }
+  })
+
+  const isPending = mutation.isPending
+
+  function resetFormState() {
+    form.reset(defaultValues)
+    mutation.reset()
+  }
+
+  function handleOpenChange(nextOpen: boolean) {
+    setOpen(nextOpen)
+
+    if (!nextOpen) {
+      resetFormState()
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button>Create User</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-135">
+        <DialogHeader>
+          <DialogTitle>Create User</DialogTitle>
+          <DialogDescription>Add a new user to the system</DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
+            className="space-y-4"
+          >
+            <div className="space-y-4 px-2 pt-2 pb-4">
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="email"
+                        placeholder="user@example.com"
+                        autoComplete="email"
+                        disabled={isPending}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="text"
+                        placeholder="Full name"
+                        autoComplete="name"
+                        disabled={isPending}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder="Min 8 characters"
+                        autoComplete="new-password"
+                        disabled={isPending}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Use at least 8 characters for the temporary password.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="role"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Role</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange} disabled={isPending}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select a role" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value={UserRole.ADMIN}>Admin</SelectItem>
+                        <SelectItem value={UserRole.EDITOR}>Editor</SelectItem>
+                        <SelectItem value={UserRole.MEMBER}>Member</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormDescription>
+                      Choose the access level the new user should start with.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <DialogFooter showCloseButton={true}>
+              <Button type="submit" disabled={isPending} size="lg">
+                {isPending && <LoaderCircle className="animate-spin" />}
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/users/delete-user-dialog.tsx

@@ -0,0 +1,172 @@
+'use client'
+
+import { deleteUser } from '@admin/actions/users'
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@admin/components/ui/alert-dialog'
+import { Button } from '@admin/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@admin/components/ui/form'
+import { Input } from '@admin/components/ui/input'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { LoaderCircle, Trash } from 'lucide-react'
+import * as React from 'react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'
+
+const DELETE_CONFIRMATION_TEXT = 'Delete'
+
+const deleteUserSchema = z.object({
+  confirmation: z
+    .string()
+    .trim()
+    .refine((value): boolean => value === DELETE_CONFIRMATION_TEXT, {
+      message: `Type "${DELETE_CONFIRMATION_TEXT}" to confirm this action.`
+    })
+})
+
+type DeleteUserFormValues = z.infer<typeof deleteUserSchema>
+
+const deleteUserDefaultValues: DeleteUserFormValues = {
+  confirmation: ''
+}
+
+interface DeleteUserDialogProps {
+  userId: string
+  userName: string
+  isCurrentUser: boolean
+}
+
+export function DeleteUserDialog({ userId, userName, isCurrentUser }: DeleteUserDialogProps) {
+  const [open, setOpen] = React.useState(false)
+  const queryClient = useQueryClient()
+  const form = useForm<DeleteUserFormValues>({
+    resolver: standardSchemaResolver(deleteUserSchema),
+    defaultValues: deleteUserDefaultValues,
+    mode: 'onChange',
+    reValidateMode: 'onChange'
+  })
+
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const result = await deleteUser(userId)
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete user')
+      }
+
+      return result
+    },
+    onSuccess: async () => {
+      toast.success('User deleted successfully')
+      await queryClient.invalidateQueries({ queryKey: ['users'] })
+      resetFormState()
+      setOpen(false)
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'An unexpected error occurred')
+    }
+  })
+
+  const isPending = mutation.isPending
+
+  if (isCurrentUser) return null
+
+  function resetFormState() {
+    form.reset(deleteUserDefaultValues)
+    mutation.reset()
+  }
+
+  function handleOpenChange(nextOpen: boolean) {
+    setOpen(nextOpen)
+
+    if (!nextOpen) {
+      resetFormState()
+    }
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={handleOpenChange}>
+      <AlertDialogTrigger asChild>
+        <Button
+          variant="ghost"
+          onSelect={(e) => e.preventDefault()}
+          className="justify-between text-destructive hover:text-destructive"
+        >
+          <span>Delete user</span>
+          <Trash />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            <Trash className="size-4 text-destructive" /> Delete {userName}
+            &apos;s account?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete <strong className="text-foreground">{userName}</strong> and{' '}
+            <br />
+            all of their data.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(() => mutation.mutate())}
+            className="flex flex-col gap-4"
+          >
+            <div className="px-2">
+              <FormField
+                control={form.control}
+                name="confirmation"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Type `{DELETE_CONFIRMATION_TEXT}` to enable deletion.</FormLabel>
+                    <FormControl>
+                      <Input
+                        autoComplete="off"
+                        autoCapitalize="none"
+                        spellCheck={false}
+                        disabled={isPending}
+                        autoFocus
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <AlertDialogFooter>
+              <AlertDialogCancel type="button" size="lg" disabled={isPending}>
+                Cancel
+              </AlertDialogCancel>
+              <Button
+                type="submit"
+                disabled={isPending || !form.formState.isValid}
+                size="lg"
+                variant="destructive"
+              >
+                {isPending ? <LoaderCircle className="animate-spin" /> : null}
+                {isPending ? 'Deleting...' : 'Delete'}
+              </Button>
+            </AlertDialogFooter>
+          </form>
+        </Form>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/users/edit-role-dialog.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { updateUserRole } from '@admin/actions/users'
+import { Button } from '@admin/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@admin/components/ui/dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@admin/components/ui/select'
+import { UserRole } from '@admin/types/auth'
+import { useQueryClient } from '@tanstack/react-query'
+import { LoaderCircle } from 'lucide-react'
+import * as React from 'react'
+import { toast } from 'sonner'
+
+interface EditRoleDialogProps {
+  userId: string
+  currentRole: string
+  userName: string
+  children: React.ReactNode
+}
+
+export function EditRoleDialog({ userId, currentRole, userName, children }: EditRoleDialogProps) {
+  const [open, setOpen] = React.useState(false)
+  const [role, setRole] = React.useState(currentRole)
+  const [isPending, startTransition] = React.useTransition()
+  const queryClient = useQueryClient()
+
+  const handleSave = () => {
+    startTransition(async () => {
+      try {
+        const result = await updateUserRole(userId, role as UserRole)
+        if (result.success) {
+          toast.success(`Role updated for ${userName}`)
+          queryClient.refetchQueries({ queryKey: ['users'] })
+          setOpen(false)
+        } else {
+          toast.error(result.error || 'Failed to update role')
+        }
+      } catch {
+        toast.error('An unexpected error occurred')
+      }
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-87.5">
+        <DialogHeader>
+          <DialogTitle>Edit Role</DialogTitle>
+          <DialogDescription>Change the role for {userName}</DialogDescription>
+        </DialogHeader>
+
+        <div className="p-2">
+          <Select value={role} onValueChange={setRole}>
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={UserRole.ADMIN}>Admin</SelectItem>
+              <SelectItem value={UserRole.EDITOR}>Editor</SelectItem>
+              <SelectItem value={UserRole.MEMBER}>Member</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)} disabled={isPending}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={isPending || role === currentRole}>
+            {isPending && <LoaderCircle className="animate-spin" />}
+            Save Role
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/users/users-page-content.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { PageHeader } from '@admin/components/shared/page-header'
+import React from 'react'
+import { columns } from './columns'
+import { CreateUserDialog } from './create-user-dialog'
+import { UsersTable } from './users-table'
+
+export function UsersPageContent() {
+  return (
+    <React.Fragment>
+      <PageHeader
+        title="Users"
+        actions={
+          <div className="flex items-center gap-1">
+            <CreateUserDialog />
+          </div>
+        }
+      />
+      <main className="space-y-4 pt-4 pb-6 px-4">
+        <UsersTable columns={columns} />
+      </main>
+    </React.Fragment>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/users/users-page-skeleton.tsx

@@ -0,0 +1,7 @@
+export function UsersPageSkeleton() {
+  return (
+    <div className="flex items-center justify-center h-48">
+      <div className="text-muted-foreground">Loading Users...</div>
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/users/users-page.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { UsersPageContent } from './users-page-content'
+import { UsersPageSkeleton } from './users-page-skeleton'
+
+export default function UsersPage() {
+  return (
+    <React.Suspense fallback={<UsersPageSkeleton />}>
+      <UsersPageContent />
+    </React.Suspense>
+  )
+}