create-ej-app 11.0.0 → 14.0.0

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

@@ -1,264 +0,0 @@
-'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/old/src/app/(app)/roles/[id]/validation.ts

@@ -1,22 +0,0 @@
-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/old/src/app/(app)/roles/actions.ts

@@ -1,33 +0,0 @@
-'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/old/src/app/(app)/roles/page.tsx

@@ -1,52 +0,0 @@
-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/old/src/app/(app)/roles/render.tsx

@@ -1,80 +0,0 @@
-'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/old/src/app/(app)/settings/actions.ts

@@ -1,17 +0,0 @@
-'use server'
-
-import { authActionClient } from '@/lib/safe-action'
-import { updateCurrentUserNameUseCase } from '@/use-case/user'
-import { userSchema } from './validation'
-
-export const updateNameAction = authActionClient
-  .schema(userSchema)
-  .action(async ({ parsedInput: { name }, ctx: { user } }) => {
-    await updateCurrentUserNameUseCase(user.id, {
-      name
-    })
-
-    return {
-      success: true
-    }
-  })

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

@@ -1,14 +0,0 @@
-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/old/src/app/(app)/settings/loading.tsx

@@ -1,28 +0,0 @@
-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/old/src/app/(app)/settings/page.tsx

@@ -1,19 +0,0 @@
-import { Heading } from '@/components/heading'
-import { Shell } from '@/components/shell'
-import { getAuthSession } from '@/lib/auth'
-import { Render } from './render'
-
-const SettingsPage = async () => {
-  const session = await getAuthSession()
-
-  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/old/src/app/(app)/settings/render.tsx

@@ -1,107 +0,0 @@
-'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 { toast } from 'sonner'
-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 { updateNameAction } from './actions'
-import { userSchema } from './validation'
-
-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)
-
-    const res = await updateNameAction({
-      ...data
-    })
-
-    if (res?.data) {
-      toast('Your name has been updated.')
-      router.refresh()
-    } else {
-      toast('Internal Server Error', {
-        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>
-  )
-}

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

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