create-ej-app 1.0.0

package/template/src/app/(app)/roles/[id]/page.tsx

@@ -0,0 +1,36 @@
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { authGuard } from '@/lib/auth'
+import { siteConfig } from '@/lib/siteConfig'
+import { GetRoleFnDataType, getRole } from './actions'
+import { Render } from './render'
+
+export const generateMetadata = async (props: {
+  params: { id: string }
+}): Promise<Metadata> => ({
+  title: 'Role - ' + props.params.id + ' | ' + siteConfig.name
+})
+
+const RolePage = async ({
+  params: { id }
+}: {
+  params: {
+    id: string
+  }
+}) => {
+  const session = await authGuard(['Root'])
+  if (!session) return notFound()
+
+  let role: GetRoleFnDataType | undefined
+
+  if (id !== 'new') {
+    const x = await getRole(id)
+    if (!x) return notFound()
+    role = x
+  }
+
+  return <Render role={role} />
+}
+
+export default RolePage

package/template/src/app/(app)/roles/[id]/render.tsx

@@ -0,0 +1,266 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Permissions } from '@prisma/client'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { FC, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Heading } from '@/components/heading'
+import { Icons } from '@/components/icons'
+import { Shell } from '@/components/shell'
+import { SystemInfo } from '@/components/system-info'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { toast } from '@/components/ui/use-toast'
+import { formatDateTime, timesAgo } from '@/lib/formatDate'
+import { generateLabel } from '@/lib/generateLabel'
+import {
+  GetRoleFnDataType,
+  createRole,
+  deleteRole,
+  updateRole
+} from './actions'
+
+const RoleSchema = z.object({
+  name: z.string().nonempty(),
+  permissions: z.array(z.nativeEnum(Permissions))
+})
+
+type FormData = z.infer<typeof RoleSchema>
+
+const permissions = Object.values(Permissions).map(x => ({
+  label: generateLabel(x),
+  value: x
+}))
+
+export const Render: FC<{
+  role: GetRoleFnDataType | undefined
+}> = ({ role }) => {
+  const form = useForm<FormData>({
+    resolver: zodResolver(RoleSchema),
+    defaultValues: {
+      name: role?.name ?? '',
+      permissions: role?.permissions.map(p => p.permission) ?? []
+    }
+  })
+  const router = useRouter()
+  const [isSaving, setIsSaving] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  async function onSubmit(data: FormData) {
+    setIsSaving(true)
+    try {
+      if (!role) {
+        const newId = await createRole(data)
+        router.replace(`/roles/${newId}`)
+      } else {
+        await updateRole({
+          id: role.id,
+          ...data
+        })
+      }
+      toast({
+        title: 'Role saved'
+      })
+    } catch (err) {
+      toast({
+        title: 'Error saving role',
+        variant: 'destructive'
+      })
+    }
+    setIsSaving(false)
+  }
+
+  return (
+    <Shell>
+      <Heading heading={role ? role.name : 'New Role'} />
+      <Form {...form}>
+        <form
+          className="grid grid-cols-1 gap-3 md:grid-cols-2"
+          onSubmit={form.handleSubmit(onSubmit)}
+        >
+          <div className="col-span-1 mb-1 grid grid-cols-2 gap-2 sm:flex md:col-span-2">
+            <Button type="button" onClick={() => router.back()} variant="ghost">
+              <Icons.chevronLeft className="mr-2 h-4 w-4" />
+              Back
+            </Button>
+            <Button type="submit" disabled={isSaving || isDeleting}>
+              {isSaving ? (
+                <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Icons.save className="mr-2 h-4 w-4" />
+              )}
+              <span>Save</span>
+            </Button>
+            {role ? (
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    disabled={isSaving || isDeleting}
+                  >
+                    {isDeleting ? (
+                      <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+                    ) : (
+                      <Icons.delete className="mr-2 h-4 w-4" />
+                    )}
+                    Delete
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>
+                      Are you absolutely sure?
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This action cannot be undone.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                      onClick={async () => {
+                        setIsDeleting(true)
+                        try {
+                          await deleteRole(role.id)
+                          toast({
+                            title: 'Role deleted'
+                          })
+                          router.push('/roles')
+                        } catch (err) {
+                          toast({
+                            title: 'Error deleting role',
+                            variant: 'destructive'
+                          })
+                        }
+                        setIsDeleting(false)
+                      }}
+                    >
+                      Continue
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            ) : undefined}
+            {role ? (
+              <Link href="/roles/new">
+                <Button
+                  type="button"
+                  disabled={isSaving || isDeleting}
+                  variant="secondary"
+                  className="w-full"
+                >
+                  <Icons.add className="mr-2 h-4 w-4" />
+                  New
+                </Button>
+              </Link>
+            ) : undefined}
+          </div>
+
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input
+                    type="text"
+                    placeholder="Enter a name"
+                    disabled={isSaving}
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div></div>
+
+          <FormField
+            control={form.control}
+            name="permissions"
+            render={() => (
+              <FormItem>
+                <FormLabel className="text-base">Permissions</FormLabel>
+                {permissions.map(item => (
+                  <FormField
+                    key={item.value}
+                    control={form.control}
+                    name="permissions"
+                    render={({ field }) => (
+                      <FormItem
+                        key={item.value}
+                        className="flex flex-row items-start space-x-3 space-y-0"
+                      >
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value?.includes(item.value)}
+                            onCheckedChange={checked => {
+                              return checked
+                                ? field.onChange([...field.value, item.value])
+                                : field.onChange(
+                                    field.value?.filter(
+                                      value => value !== item.value
+                                    )
+                                  )
+                            }}
+                          />
+                        </FormControl>
+                        <FormLabel>{item.label}</FormLabel>
+                      </FormItem>
+                    )}
+                  />
+                ))}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </form>
+      </Form>
+      {role ? (
+        <SystemInfo
+          items={[
+            {
+              label: 'Id',
+              value: role.id
+            },
+            {
+              label: 'Created At',
+              value: formatDateTime(role.createdAt)
+            },
+            {
+              label: 'Updated At',
+              value: timesAgo(role.updatedAt)
+            }
+          ]}
+        />
+      ) : undefined}
+    </Shell>
+  )
+}

package/template/src/app/(app)/roles/actions.ts

@@ -0,0 +1,67 @@
+'use server'
+
+import { Role } from '@prisma/client'
+
+import { authGuard } from '@/lib/auth'
+import { prisma } from '@/lib/db'
+import { UnwrapPromise } from '@/types/UnwrapPromise'
+
+export const getRoles = async ({
+  page,
+  limit,
+  sortBy,
+  sortOrder,
+  name
+}: {
+  page: number
+  limit: number
+  sortBy?: keyof Role
+  sortOrder?: 'asc' | 'desc'
+  name?: string
+}) => {
+  const session = await authGuard(['Root'])
+  if (!session) throw new Error('Unauthorized')
+
+  const where = {
+    name: name ? { contains: name, mode: 'insensitive' as const } : undefined
+  }
+  const [roles, total] = await Promise.all([
+    prisma.role.findMany({
+      where,
+      select: {
+        id: true,
+        name: true,
+        createdAt: true,
+        updatedAt: true
+      },
+      skip: (page - 1) * limit,
+      take: limit,
+      orderBy: {
+        [sortBy || 'createdAt']: sortOrder || 'desc'
+      }
+    }),
+    prisma.role.count({
+      where
+    })
+  ])
+
+  return { roles, total }
+}
+
+export type GetRolesFnDataType = UnwrapPromise<ReturnType<typeof getRoles>>
+
+export const getRolesMini = async () => {
+  return await prisma.role.findMany({
+    select: {
+      id: true,
+      name: true
+    },
+    orderBy: {
+      name: 'asc'
+    }
+  })
+}
+
+export type GetRolesMiniFnDataType = UnwrapPromise<
+  ReturnType<typeof getRolesMini>
+>

package/template/src/app/(app)/roles/page.tsx

@@ -0,0 +1,51 @@
+import { Role } from '@prisma/client'
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { authGuard } from '@/lib/auth'
+import { siteConfig } from '@/lib/siteConfig'
+import { getRoles } from './actions'
+import { Render } from './render'
+
+export const metadata: Metadata = {
+  title: 'Roles' + ' | ' + siteConfig.name
+}
+
+const RolesPage = async ({
+  searchParams
+}: {
+  searchParams: {
+    page?: string
+    limit?: string
+    sort?: string
+    name?: string
+  }
+}) => {
+  const session = await authGuard(['Root'])
+  if (!session) return notFound()
+
+  const page = searchParams.page ? parseInt(searchParams.page) : 1
+  const limit = searchParams.limit ? parseInt(searchParams.limit) : 10
+
+  const [sortBy, sortOrder] =
+    typeof searchParams.sort === 'string'
+      ? (searchParams.sort.split('.') as [
+          keyof Role | undefined,
+          'asc' | 'desc' | undefined
+        ])
+      : []
+
+  const name = searchParams.name
+
+  const data = await getRoles({
+    page,
+    limit,
+    sortBy,
+    sortOrder,
+    name
+  })
+
+  return <Render data={data} />
+}
+
+export default RolesPage

package/template/src/app/(app)/roles/render.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import Link from 'next/link'
+import { FC } from 'react'
+
+import { DataTable } from '@/components/data-table/data-table'
+import { DataTableColumnHeader } from '@/components/data-table/data-table-column-header'
+import { Heading } from '@/components/heading'
+import { Icons } from '@/components/icons'
+import { Shell } from '@/components/shell'
+import { Button } from '@/components/ui/button'
+import { formatDateTime, timesAgo } from '@/lib/formatDate'
+import { GetRolesFnDataType } from './actions'
+
+export const Render: FC<{
+  data: GetRolesFnDataType
+}> = ({ data }) => {
+  return (
+    <Shell>
+      <Heading heading="Roles" text="List of all the roles">
+        <Link href="/roles/new">
+          <Button>
+            <Icons.add className="mr-2 h-4 w-4" />
+            New
+          </Button>
+        </Link>
+      </Heading>
+      <DataTable
+        columns={[
+          {
+            accessorKey: 'name',
+            header: ({ column }) => (
+              <DataTableColumnHeader column={column} title="Name" />
+            ),
+            cell: ({ row }) => (
+              <Link
+                className="underline underline-offset-4"
+                href={`/roles/${row.original.id}`}
+              >
+                {row.original.name}
+              </Link>
+            )
+          },
+          {
+            accessorKey: 'createdAt',
+            header: ({ column }) => (
+              <DataTableColumnHeader column={column} title="Created At" />
+            ),
+            cell: ({ row }) => formatDateTime(row.original.createdAt)
+          },
+          {
+            accessorKey: 'updatedAt',
+            header: ({ column }) => (
+              <DataTableColumnHeader column={column} title="Updated At" />
+            ),
+            cell: ({ row }) => timesAgo(row.original.updatedAt)
+          }
+        ]}
+        data={data.roles}
+        total={data.total}
+        searchableColumns={[
+          {
+            id: 'name',
+            title: 'Name'
+          }
+        ]}
+      />
+    </Shell>
+  )
+}

package/template/src/app/(app)/settings/actions.ts

@@ -0,0 +1,18 @@
+'use server'
+
+import { getAuthSession } from '@/lib/auth'
+import { prisma } from '@/lib/db'
+
+export const updateName = async ({ name }: { name: string }) => {
+  const session = await getAuthSession()
+  if (!session?.user) throw new Error('Unauthorized')
+
+  await prisma.user.update({
+    where: {
+      id: session.user.id
+    },
+    data: {
+      name
+    }
+  })
+}

package/template/src/app/(app)/settings/loading.tsx

@@ -0,0 +1,28 @@
+import { Heading } from '@/components/heading'
+import { Shell } from '@/components/shell'
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+
+const Loading = () => {
+  return (
+    <Shell>
+      <Heading heading="Settings" text="Manage account and profile settings." />
+      <div className="grid gap-10">
+        <Card>
+          <CardHeader className="gap-2">
+            <Skeleton className="h-6 w-1/5" />
+            <Skeleton className="h-4 w-4/5" />
+          </CardHeader>
+          <CardContent className="h-10">
+            <Skeleton className="h-8 w-full max-w-[400px]" />
+          </CardContent>
+          <CardFooter>
+            <Skeleton className="h-8 w-full max-w-[120px]" />
+          </CardFooter>
+        </Card>
+      </div>
+    </Shell>
+  )
+}
+
+export default Loading

package/template/src/app/(app)/settings/page.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from 'next'
+
+import { Heading } from '@/components/heading'
+import { Shell } from '@/components/shell'
+import { getAuthSession } from '@/lib/auth'
+import { siteConfig } from '@/lib/siteConfig'
+import { Render } from './render'
+
+export const metadata: Metadata = {
+  title: 'Settings' + ' | ' + siteConfig.name
+}
+
+const SettingsPage = async () => {
+  const session = await getAuthSession()
+
+  if (!session?.user) return
+
+  return (
+    <Shell>
+      <Heading heading="Settings" text="Manage account and profile settings." />
+      <div className="grid gap-10">
+        <Render name={session.user.name || ''} />
+      </div>
+    </Shell>
+  )
+}
+
+export default SettingsPage

package/template/src/app/(app)/settings/render.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useRouter } from 'next/navigation'
+import { FC, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Icons } from '@/components/icons'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { toast } from '@/components/ui/use-toast'
+import { updateName } from './actions'
+
+const userSchema = z.object({
+  name: z.string().nonempty()
+})
+
+type FormData = z.infer<typeof userSchema>
+
+export const Render: FC<{ name: string }> = ({ name }) => {
+  const form = useForm<FormData>({
+    resolver: zodResolver(userSchema),
+    defaultValues: {
+      name
+    }
+  })
+  const router = useRouter()
+  const [isSaving, setIsSaving] = useState(false)
+
+  async function onSubmit(data: FormData) {
+    setIsSaving(true)
+
+    try {
+      await updateName({
+        ...data
+      })
+      toast({
+        title: 'Your name has been updated.'
+      })
+      router.refresh()
+    } catch (err) {
+      toast({
+        title: 'Internal Server Error',
+        variant: 'destructive',
+        description: 'Please try again later.'
+      })
+    }
+
+    setIsSaving(false)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <Card>
+          <CardHeader>
+            <CardTitle>Your Name</CardTitle>
+            <CardDescription>
+              Please enter your full name or a display name you are comfortable
+              with.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="max-w-[400px]">
+                  <FormControl>
+                    <Input
+                      type="text"
+                      placeholder="Your Name"
+                      autoComplete="name"
+                      disabled={isSaving}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+          <CardFooter>
+            <Button type="submit" disabled={isSaving}>
+              {isSaving ? (
+                <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Icons.save className="mr-2 h-4 w-4" />
+              )}
+              <span>Save</span>
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </Form>
+  )
+}