create-ej-app 3.2.0 → 5.0.0

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

@@ -0,0 +1,46 @@
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { authGuard, getAuthSession } from '@/lib/auth'
+import { siteConfig } from '@/lib/siteConfig'
+import { getRoleAction } 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 getAuthSession()
+  if (!session) return notFound()
+
+  const g = await authGuard(session)
+  if (!g) return notFound()
+
+  if (id == 'new') return <Render />
+
+  const role = await getRoleAction(id)
+  if (!role?.data) return notFound()
+
+  return (
+    <Render
+      role={{
+        id: role.data.id,
+        name: role.data.name,
+        permissions: role.data.permissions.map(p => p.permission),
+        createdAt: role.data.createdAt,
+        updatedAt: role.data.updatedAt
+      }}
+    />
+  )
+}
+
+export default RolePage

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

@@ -0,0 +1,264 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { FC, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+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 { type RolePermissionType } from '@/data-access/role-permission'
+import { formatDateTime, timesAgo } from '@/lib/formatDate'
+import { createRoleAction, deleteRoleAction, updateRoleAction } from './actions'
+import { RoleCreateUpdateSchema, defaultPermissions } from './validation'
+
+type FormData = z.infer<typeof RoleCreateUpdateSchema>
+
+export const Render: FC<{
+  role?: {
+    id: string
+    name: string
+    permissions: RolePermissionType['permission'][]
+    createdAt: Date
+    updatedAt?: Date | null
+  } | null
+}> = ({ role }) => {
+  const form = useForm<FormData>({
+    resolver: zodResolver(RoleCreateUpdateSchema),
+    defaultValues: {
+      name: role?.name ?? '',
+      permissions: role?.permissions ?? []
+    }
+  })
+
+  const router = useRouter()
+
+  const [isSaving, setIsSaving] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  async function onSubmit(data: FormData) {
+    setIsSaving(true)
+    try {
+      if (!role) {
+        const res = await createRoleAction(data)
+        if (!res?.data?.success)
+          throw new Error(res?.serverError || 'No success returned from server')
+        if (!res?.data?.id) throw new Error('No id returned from server')
+        router.replace(`/roles/${res.data.id}`)
+      } else {
+        const res = await updateRoleAction({
+          id: role.id,
+          ...data
+        })
+        if (!res?.data?.success)
+          throw new Error(res?.serverError || 'No success returned from server')
+      }
+      toast('Role saved')
+    } catch (err) {
+      toast('Error saving role', {
+        description: (err as any).message || undefined
+      })
+    }
+    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 {
+                          const res = await deleteRoleAction(role.id)
+                          if (!res?.data?.success)
+                            throw new Error(
+                              res?.serverError ||
+                                'No success returned from server'
+                            )
+                          toast('Role deleted')
+                          router.replace('/roles')
+                        } catch (err) {
+                          toast('Error deleting role', {
+                            description:
+                              (err as any).message || 'Something went wrong'
+                          })
+                        }
+                        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>
+                {defaultPermissions.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: role.updatedAt ? timesAgo(role.updatedAt) : '-'
+            }
+          ]}
+        />
+      ) : undefined}
+    </Shell>
+  )
+}

package/template/base/src/app/(app)/roles/[id]/validation.ts

@@ -0,0 +1,22 @@
+import { z } from 'zod'
+
+import { RolePermission } from '@/db/schema'
+import { generateLabel } from '@/lib/generateLabel'
+
+const RolePermissionsEnumArr = RolePermission.permission.enumValues
+
+export const RoleCreateUpdateSchema = z.object({
+  name: z.string().min(1).trim(),
+  permissions: z.array(z.enum(RolePermissionsEnumArr))
+})
+
+export const defaultPermissions = RolePermissionsEnumArr.map(x => ({
+  label: generateLabel(x),
+  value: x
+}))
+
+export const RoleUpdateServerSchema = RoleCreateUpdateSchema.merge(
+  z.object({
+    id: z.string().min(1)
+  })
+)

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

@@ -0,0 +1,33 @@
+'use server'
+
+import { z } from 'zod'
+
+import { authActionClient } from '@/lib/safe-action'
+import { SortOrderEnum } from '@/lib/sortOrderEnum'
+import { getRolesUseCase } from '@/use-case/role'
+
+export const getRolesAction = authActionClient
+  .schema(
+    z.object({
+      page: z.number().gte(1),
+      limit: z.number().gte(1).lte(1000),
+      sortBy: z.enum(['id', 'name', 'createdAt', 'updatedAt']).optional(),
+      sortOrder: z.enum(SortOrderEnum).optional(),
+      name: z.string().optional()
+    })
+  )
+  .action(
+    async ({ parsedInput: { page, limit, sortBy, sortOrder, name }, ctx }) => {
+      return await getRolesUseCase(ctx.user.type, {
+        page,
+        limit,
+        sortBy,
+        sortOrder,
+        filters: name
+          ? {
+              name
+            }
+          : undefined
+      })
+    }
+  )

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

@@ -0,0 +1,52 @@
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { authGuard, getAuthSession } from '@/lib/auth'
+import { siteConfig } from '@/lib/siteConfig'
+import { getRolesAction } 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 getAuthSession()
+  if (!session) return notFound()
+
+  const g = await authGuard(session)
+  if (!g) 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 [any, 'asc' | 'desc' | undefined])
+      : []
+
+  const name = searchParams.name
+
+  const data = await getRolesAction({
+    page,
+    limit,
+    sortBy,
+    sortOrder,
+    name
+  })
+
+  if (!data?.data) throw new Error('Roles data not found')
+
+  return <Render data={data.data} />
+}
+
+export default RolesPage

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

@@ -0,0 +1,80 @@
+'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'
+
+export const Render: FC<{
+  data: {
+    roles: {
+      id: string
+      name: string
+      createdAt: Date
+      updatedAt?: Date | null
+    }[]
+    total: number
+  }
+}> = ({ 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 }) =>
+              row.original.updatedAt
+                ? timesAgo(row.original.updatedAt)
+                : undefined
+          }
+        ]}
+        data={data.roles}
+        total={data.total}
+        searchableColumns={[
+          {
+            id: 'name',
+            title: 'Name'
+          }
+        ]}
+      />
+    </Shell>
+  )
+}

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

@@ -1,18 +1,17 @@
 'use server'
 
-import { getAuthSession } from '@/lib/auth'
-import { prisma } from '@/lib/db'
+import { authActionClient } from '@/lib/safe-action'
+import { updateCurrentUserNameUseCase } from '@/use-case/user'
+import { userSchema } from './validation'
 
-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: {
+export const updateNameAction = authActionClient
+  .schema(userSchema)
+  .action(async ({ parsedInput: { name }, ctx: { user } }) => {
+    await updateCurrentUserNameUseCase(user.id, {
       name
+    })
+
+    return {
+      success: true
     }
   })
-}

package/template/base/src/app/(app)/settings/layout.tsx

@@ -0,0 +1,14 @@
+import { Metadata } from 'next'
+import { ReactNode } from 'react'
+
+import { siteConfig } from '@/lib/siteConfig'
+
+export const metadata: Metadata = {
+  title: 'Settings' + ' | ' + siteConfig.name
+}
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return <>{children}</>
+}
+
+export default Layout

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

@@ -1,25 +1,16 @@
-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 || ''} />
+        <Render name={session?.user.name || ''} />
       </div>
     </Shell>
   )

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

@@ -4,6 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useRouter } from 'next/navigation'
 import { FC, useState } from 'react'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { Icons } from '@/components/icons'
@@ -24,12 +25,8 @@ import {
   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()
-})
+import { updateNameAction } from './actions'
+import { userSchema } from './validation'
 
 type FormData = z.infer<typeof userSchema>
 
@@ -46,18 +43,15 @@ export const Render: FC<{ name: string }> = ({ name }) => {
   async function onSubmit(data: FormData) {
     setIsSaving(true)
 
-    try {
-      await updateName({
-        ...data
-      })
-      toast({
-        title: 'Your name has been updated.'
-      })
+    const res = await updateNameAction({
+      ...data
+    })
+
+    if (res?.data) {
+      toast('Your name has been updated.')
       router.refresh()
-    } catch (err) {
-      toast({
-        title: 'Internal Server Error',
-        variant: 'destructive',
+    } else {
+      toast('Internal Server Error', {
         description: 'Please try again later.'
       })
     }

package/template/base/src/app/(app)/settings/validation.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod'
+
+export const userSchema = z.object({
+  name: z.string().min(1)
+})