@betterstart/cli 0.1.69 → 0.1.71

package/templates/init/pages/profile/profile-page.tsx

@@ -0,0 +1,34 @@
+import { getSession } from '@cms/auth/middleware'
+import { PageHeader } from '@cms/components/shared/page-header'
+import { UserRole } from '@cms/types/auth'
+import { redirect } from 'next/navigation'
+import { connection } from 'next/server'
+import { ProfileForm } from './profile-form'
+
+export default async function ProfilePage() {
+  await connection()
+  const session = await getSession()
+
+  if (!session?.user) {
+    redirect('/cms/login')
+  }
+
+  const showPageHeader =
+    session.user.role === UserRole.ADMIN ||
+    session.user.role === UserRole.EDITOR
+
+  return (
+    <>
+      {showPageHeader && <PageHeader title="Profile" />}
+      <main className="container mx-auto max-w-2xl p-6 pb-20">
+        <ProfileForm
+          user={{
+            name: session.user.name,
+            email: session.user.email,
+            image: session.user.image ?? null,
+          }}
+        />
+      </main>
+    </>
+  )
+}

package/templates/init/pages/users/columns.tsx

@@ -0,0 +1,241 @@
+'use client'
+
+import { deleteUser } from '@cms/actions/users'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@cms/components/ui/alert-dialog'
+import { Avatar, AvatarFallback } from '@cms/components/ui/avatar'
+import { Badge } from '@cms/components/ui/badge'
+import { Button } from '@cms/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@cms/components/ui/dropdown-menu'
+import type { UserData } from '@cms/types/auth'
+import { useQueryClient } from '@tanstack/react-query'
+import type { ColumnDef } from '@tanstack/react-table'
+import { ArrowUpDown, Edit, MoreHorizontal, Trash } from 'lucide-react'
+import React from 'react'
+import { toast } from 'sonner'
+import { EditRoleDialog } from './edit-role-dialog'
+
+function getInitials(nameOrEmail: string): string {
+  const parts = nameOrEmail.includes('@')
+    ? nameOrEmail.split('@')[0].split(/[._-]/)
+    : nameOrEmail.split(' ')
+  return parts
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((p) => p[0].toUpperCase())
+    .join('')
+}
+
+function DeleteUserAction({
+  userId,
+  userName,
+  isCurrentUser,
+}: {
+  userId: string
+  userName: string
+  isCurrentUser: boolean
+}) {
+  const [open, setOpen] = React.useState(false)
+  const [isPending, startTransition] = React.useTransition()
+  const queryClient = useQueryClient()
+
+  if (isCurrentUser) return null
+
+  const handleDelete = () => {
+    startTransition(async () => {
+      try {
+        const result = await deleteUser(userId)
+
+        if (result.success) {
+          toast.success('User deleted successfully')
+          queryClient.refetchQueries({ queryKey: ['users'] })
+          setOpen(false)
+        } else {
+          toast.error(result.error || 'Failed to delete user')
+        }
+      } catch (error) {
+        toast.error('An error occurred')
+        console.error(error)
+      }
+    })
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <DropdownMenuItem className="text-destructive" onSelect={(e) => e.preventDefault()}>
+          <Trash className="size-4 mr-2" />
+          Delete user
+        </DropdownMenuItem>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete <strong>{userName}</strong>{' '}
+            and all of their data.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e) => {
+              e.preventDefault()
+              handleDelete()
+            }}
+            disabled={isPending}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {isPending ? 'Deleting...' : 'Delete'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+export const columns: ColumnDef<UserData>[] = [
+  {
+    accessorKey: 'email',
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        className="hover:bg-muted/50 px-0!"
+      >
+        User
+        <ArrowUpDown className="size-4" />
+      </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>{getInitials(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={verified ? 'outline' : 'secondary'}>
+          {verified ? 'Verified' : 'Unverified'}
+        </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">
+            {role}
+            <Edit className="size-3 ml-1" strokeWidth={2} />
+          </Badge>
+        </EditRoleDialog>
+      )
+    },
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        className="hover:bg-muted/50"
+      >
+        Joined
+        <ArrowUpDown className="size-4" />
+      </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',
+    cell: ({ row, table }) => {
+      const currentUser = table.options.meta?.currentUser
+      const isCurrentUser = currentUser?.email === row.original.email
+
+      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">
+              <DropdownMenuLabel>Actions</DropdownMenuLabel>
+              <DropdownMenuItem onClick={() => navigator.clipboard.writeText(row.original.id)}>
+                Copy user ID
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DeleteUserAction
+                userId={row.original.id}
+                userName={row.original.name}
+                isCurrentUser={isCurrentUser}
+              />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )
+    },
+  },
+]

package/templates/init/pages/users/create-user-dialog.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { createUser } from '@cms/actions/users'
+import { Button } from '@cms/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@cms/components/ui/dialog'
+import { Input } from '@cms/components/ui/input'
+import { Label } from '@cms/components/ui/label'
+import { useQueryClient } from '@tanstack/react-query'
+import { Loader2, UserPlus } from 'lucide-react'
+import * as React from 'react'
+import { toast } from 'sonner'
+
+export function CreateUserDialog() {
+  const [open, setOpen] = React.useState(false)
+  const [isPending, startTransition] = React.useTransition()
+  const queryClient = useQueryClient()
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const email = formData.get('email') as string
+    const name = formData.get('name') as string
+    const password = formData.get('password') as string
+
+    startTransition(async () => {
+      try {
+        const result = await createUser({ email, name, password })
+        if (result.success) {
+          toast.success('User created successfully')
+          queryClient.refetchQueries({ queryKey: ['users'] })
+          setOpen(false)
+        } else {
+          toast.error(result.error || 'Failed to create user')
+        }
+      } catch {
+        toast.error('An unexpected error occurred')
+      }
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <UserPlus className="size-3.5 -ml-0.5" strokeWidth={2} />
+          Create User
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Create New User</DialogTitle>
+          <DialogDescription>
+            Add a new user to the CMS. They can sign in with these credentials.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="create-email">Email</Label>
+            <Input
+              id="create-email"
+              name="email"
+              type="email"
+              placeholder="user@example.com"
+              required
+              disabled={isPending}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="create-name">Name</Label>
+            <Input
+              id="create-name"
+              name="name"
+              type="text"
+              placeholder="Full name"
+              required
+              disabled={isPending}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="create-password">Password</Label>
+            <Input
+              id="create-password"
+              name="password"
+              type="password"
+              placeholder="Min 8 characters"
+              minLength={8}
+              required
+              disabled={isPending}
+            />
+          </div>
+          <div className="flex justify-end gap-2 pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setOpen(false)}
+              disabled={isPending}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isPending}>
+              {isPending && <Loader2 className="size-4 mr-1 animate-spin" />}
+              Create User
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/templates/init/pages/users/edit-role-dialog.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { updateUserRole } from '@cms/actions/users'
+import { Button } from '@cms/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@cms/components/ui/dialog'
+import { Label } from '@cms/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@cms/components/ui/select'
+import { UserRole } from '@cms/types/auth'
+import { useQueryClient } from '@tanstack/react-query'
+import { Loader2 } 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 && <Loader2 className="size-4 animate-spin" />}
+            Save Role
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/templates/init/pages/users/users-page-content.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import type { ColumnDef } from '@tanstack/react-table'
+import { PageHeader } from '@cms/components/shared/page-header'
+import type { UserData } from '@cms/types/auth'
+import { CreateUserDialog } from './create-user-dialog'
+import { UsersTable } from './users-table'
+
+interface UsersPageContentProps<TValue> {
+  columns: ColumnDef<UserData, TValue>[]
+}
+
+export function UsersPageContent<TValue>({ columns }: UsersPageContentProps<TValue>) {
+  return (
+    <>
+      <PageHeader
+        title="Users"
+        actions={
+          <div className="flex items-center gap-2">
+            <CreateUserDialog />
+          </div>
+        }
+      />
+      <main className="space-y-6 p-6">
+        <UsersTable columns={columns} />
+      </main>
+    </>
+  )
+}

package/templates/init/pages/users/users-page.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { columns } from './columns'
+import { UsersPageContent } from './users-page-content'
+
+export default function UsersPage() {
+  return (
+    <React.Suspense
+      fallback={
+        <div className="flex items-center justify-center h-48">
+          <div className="text-muted-foreground">Loading Users...</div>
+        </div>
+      }
+    >
+      <div className="flex flex-col">
+        <UsersPageContent columns={columns} />
+      </div>
+    </React.Suspense>
+  )
+}