betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/pages/forgot-password-form.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import { isEmailConfigured } from '@admin/actions/profile'
+import { authClient } from '@admin/auth/client'
+import { Button } from '@admin/components/ui/button'
+import { Card, CardContent } from '@admin/components/ui/card'
+import { Field, FieldGroup, FieldLabel } from '@admin/components/ui/field'
+import { Input } from '@admin/components/ui/input'
+import { cn } from '@admin/utils/shared/cn'
+import { LoaderCircle } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import * as React from 'react'
+
+export function ForgotPasswordForm({ className, ...props }: React.ComponentProps<'div'>) {
+  const [email, setEmail] = React.useState('')
+  const [error, setError] = React.useState<string | null>(null)
+  const [success, setSuccess] = React.useState(false)
+  const [isPending, startTransition] = React.useTransition()
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    startTransition(async () => {
+      try {
+        const emailReady = await isEmailConfigured()
+        if (!emailReady) {
+          setError('Email delivery is not configured for this project.')
+          return
+        }
+        const { error } = await authClient.requestPasswordReset({
+          email,
+          redirectTo: '/admin/reset-password'
+        })
+        if (error) {
+          setError(error.message || 'Failed to send reset link')
+          return
+        }
+        setSuccess(true)
+      } catch {
+        setError('An error occurred. Please try again.')
+      }
+    })
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card className="overflow-hidden p-0">
+        <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
+          <div className="relative hidden bg-muted md:block">
+            <Image
+              src="https://assets.betterstart.dev/assets/placeholder.png"
+              alt=""
+              fill
+              sizes="(min-width: 768px) 42vw, 0px"
+              className="object-cover dark:brightness-[0.2] dark:grayscale"
+            />
+          </div>
+          <div className="p-6 md:p-20">
+            {success ? (
+              <FieldGroup className="pb-12 gap-10">
+                <div className="flex flex-col items-start">
+                  <h1 className="text-xl font-medium">Check your email</h1>
+                  <p className="text-balance text-muted-foreground">
+                    If an account exists for {email}, we sent a password reset link. Check your
+                    inbox and spam folder.
+                  </p>
+                </div>
+                <Link href="/admin/login" className="text-sm underline-offset-4 hover:underline">
+                  Back to login
+                </Link>
+              </FieldGroup>
+            ) : (
+              <form onSubmit={handleSubmit}>
+                <FieldGroup className="pb-12 gap-10">
+                  <div className="flex flex-col items-start">
+                    <h1 className="text-xl font-medium">Forgot password</h1>
+                    <p className="text-balance text-muted-foreground">
+                      Enter your email and we&apos;ll send you a reset link when email delivery is
+                      enabled
+                    </p>
+                  </div>
+                  {error ? (
+                    <div className="bg-destructive/10 text-destructive text-sm p-3 rounded-md">
+                      {error}
+                    </div>
+                  ) : null}
+                  <div className="flex flex-col gap-4">
+                    <Field>
+                      <FieldLabel htmlFor="email">Email</FieldLabel>
+                      <Input
+                        id="email"
+                        type="email"
+                        autoComplete="email"
+                        placeholder="m@example.com"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        required
+                        disabled={isPending}
+                      />
+                    </Field>
+                    <Field className="pt-4">
+                      <Button type="submit" disabled={isPending}>
+                        {isPending && <LoaderCircle className="animate-spin" />}
+                        {isPending ? 'Sending...' : 'Send Reset Link'}
+                      </Button>
+                    </Field>
+                    <Link
+                      href="/admin/login"
+                      className="text-sm text-center underline-offset-4 hover:underline"
+                    >
+                      Back to login
+                    </Link>
+                  </div>
+                </FieldGroup>
+              </form>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,24 @@
+export function ForgotPasswordPageSkeleton() {
+  return (
+    <div className="overflow-hidden rounded-lg border bg-card">
+      <div className="grid md:grid-cols-[5fr_7fr]">
+        <div className="hidden min-h-[460px] bg-muted md:block" />
+        <div className="flex min-h-[460px] flex-col gap-10 p-6 md:p-20">
+          <div className="space-y-3">
+            <div className="h-6 w-40 animate-pulse rounded-md bg-muted" />
+            <div className="h-4 w-full max-w-72 animate-pulse rounded-md bg-muted" />
+            <div className="h-4 w-52 animate-pulse rounded-md bg-muted" />
+          </div>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <div className="h-4 w-12 animate-pulse rounded-md bg-muted" />
+              <div className="h-10 w-full animate-pulse rounded-md bg-muted" />
+            </div>
+            <div className="h-10 w-full animate-pulse rounded-md bg-muted" />
+            <div className="mx-auto h-4 w-20 animate-pulse rounded-md bg-muted" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,21 @@
+import type { Metadata } from 'next'
+import { Suspense } from 'react'
+import { ForgotPasswordForm } from './forgot-password-form'
+import { ForgotPasswordPageSkeleton } from './forgot-password-page-skeleton'
+
+export const metadata: Metadata = {
+  title: 'Forgot Password',
+  robots: { index: false, follow: false }
+}
+
+export default function ForgotPasswordPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-4xl">
+        <Suspense fallback={<ForgotPasswordPageSkeleton />}>
+          <ForgotPasswordForm />
+        </Suspense>
+      </div>
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/login-form.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import { authClient } from '@admin/auth/client'
+import { Button } from '@admin/components/ui/button'
+import { Card, CardContent } from '@admin/components/ui/card'
+import { Field, FieldGroup, FieldLabel } from '@admin/components/ui/field'
+import { Input } from '@admin/components/ui/input'
+import { getAdminPostLoginPath } from '@admin/utils/auth/roles'
+import { cn } from '@admin/utils/shared/cn'
+import { LoaderCircle } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { parseAsStringLiteral, useQueryState } from 'nuqs'
+import * as React from 'react'
+
+export function LoginForm({ className, ...props }: React.ComponentProps<'div'>) {
+  const router = useRouter()
+  const [reset] = useQueryState('reset', parseAsStringLiteral(['success']))
+  const resetSuccess = reset === 'success'
+  const [email, setEmail] = React.useState('')
+  const [password, setPassword] = React.useState('')
+  const [error, setError] = React.useState<string | null>(null)
+  const [isPending, startTransition] = React.useTransition()
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    startTransition(async () => {
+      try {
+        const result = await authClient.signIn.email({
+          email,
+          password
+        })
+
+        if (result.error) {
+          setError(result.error.message || 'Invalid email or password')
+          return
+        }
+
+        const user = result.data?.user
+        const role = user && typeof user === 'object' && 'role' in user ? user.role : undefined
+
+        router.replace(getAdminPostLoginPath(role))
+        router.refresh()
+      } catch {
+        setError('An error occurred. Please try again.')
+      }
+    })
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card className="overflow-hidden p-0">
+        <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
+          <div className="relative hidden bg-muted md:block">
+            <Image
+              src="https://assets.betterstart.dev/assets/placeholder.png"
+              alt=""
+              fill
+              sizes="(min-width: 768px) 42vw, 0px"
+              className="object-cover dark:brightness-[0.2] dark:grayscale"
+            />
+          </div>
+          <form onSubmit={handleSubmit} className="p-6 md:p-20">
+            <FieldGroup className="pb-12 gap-10">
+              <div className="flex flex-col items-start">
+                <h1 className="text-xl font-medium">Welcome back</h1>
+                <p className="text-balance text-muted-foreground">Login to your account</p>
+              </div>
+              {resetSuccess ? (
+                <div className="bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 text-sm p-3 rounded-md">
+                  Password reset successfully. Please log in with your new password.
+                </div>
+              ) : null}
+              {error ? (
+                <div className="bg-destructive/10 text-destructive text-sm p-3 rounded-md">
+                  {error}
+                </div>
+              ) : null}
+              <div className="flex flex-col gap-4">
+                <Field>
+                  <FieldLabel htmlFor="email">Email</FieldLabel>
+                  <Input
+                    id="email"
+                    type="email"
+                    autoComplete="email"
+                    placeholder="m@example.com"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    disabled={isPending}
+                  />
+                </Field>
+                <Field>
+                  <div className="flex items-center">
+                    <FieldLabel htmlFor="password">Password</FieldLabel>
+                    <Link
+                      href="/admin/forgot-password"
+                      className="ml-auto text-sm underline-offset-4 hover:underline"
+                      tabIndex={-1}
+                    >
+                      Forgot password?
+                    </Link>
+                  </div>
+                  <Input
+                    id="password"
+                    type="password"
+                    autoComplete="current-password"
+                    placeholder="Enter your password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                    disabled={isPending}
+                  />
+                </Field>
+                <Field className="pt-4">
+                  <Button type="submit" disabled={isPending}>
+                    {isPending && <LoaderCircle className="animate-spin" />}
+                    {isPending ? 'Signing in...' : 'Login'}
+                  </Button>
+                </Field>
+              </div>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,14 @@
+import { getSession } from '@admin/auth/middleware'
+import { getAdminPostLoginPath } from '@admin/utils/auth/roles'
+import { redirect } from 'next/navigation'
+import { LoginForm } from './login-form'
+
+export async function LoginPageRsc() {
+  const session = await getSession({ disableCookieCache: true })
+
+  if (session?.user) {
+    redirect(getAdminPostLoginPath(session.user.role))
+  }
+
+  return <LoginForm />
+}

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

@@ -0,0 +1,26 @@
+export function LoginPageSkeleton() {
+  return (
+    <div className="overflow-hidden rounded-lg border bg-card">
+      <div className="grid md:grid-cols-[5fr_7fr]">
+        <div className="hidden min-h-[540px] bg-muted md:block" />
+        <div className="flex min-h-[540px] flex-col gap-10 p-6 md:p-20">
+          <div className="space-y-3">
+            <div className="h-6 w-32 animate-pulse rounded-md bg-muted" />
+            <div className="h-4 w-40 animate-pulse rounded-md bg-muted" />
+          </div>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <div className="h-4 w-12 animate-pulse rounded-md bg-muted" />
+              <div className="h-10 w-full animate-pulse rounded-md bg-muted" />
+            </div>
+            <div className="space-y-2">
+              <div className="h-4 w-20 animate-pulse rounded-md bg-muted" />
+              <div className="h-10 w-full animate-pulse rounded-md bg-muted" />
+            </div>
+            <div className="h-10 w-full animate-pulse rounded-md bg-muted" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,21 @@
+import type { Metadata } from 'next'
+import { Suspense } from 'react'
+import { LoginPageRsc } from './login-page-rsc'
+import { LoginPageSkeleton } from './login-page-skeleton'
+
+export const metadata: Metadata = {
+  title: 'Admin Login',
+  robots: { index: false, follow: false }
+}
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-4xl">
+        <Suspense fallback={<LoginPageSkeleton />}>
+          <LoginPageRsc />
+        </Suspense>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,273 @@
+'use client'
+
+import { deleteMediaBulk } from '@admin/actions/media'
+import { UploadDropzone } from '@admin/components/custom/upload-dropzone'
+import { DeleteDialog } from '@admin/components/shared/delete-dialog'
+import { EditMediaDialog } from '@admin/components/shared/media/edit-media-dialog'
+import { MediaEmptyState } from '@admin/components/shared/media/media-empty-state'
+import type { ContentTypeFilter } from '@admin/components/shared/media/media-filters-bar'
+import { MediaFiltersBar } from '@admin/components/shared/media/media-filters-bar'
+import { MediaGrid } from '@admin/components/shared/media/media-grid'
+import { MediaGridPagination } from '@admin/components/shared/media/media-grid-pagination'
+import { MediaUrlImporter } from '@admin/components/shared/media/media-url-importer'
+import { PageHeader } from '@admin/components/shared/page-header'
+import { Button } from '@admin/components/ui/button'
+import { ButtonGroup } from '@admin/components/ui/button-group'
+import * as mediaHooks from '@admin/hooks/use-media'
+import { useMediaFiltersBar } from '@admin/hooks/use-media-filters-bar'
+import { useUpload } from '@admin/hooks/use-upload'
+import type { AdminMedia } from '@admin/types'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { Link, Upload } from 'lucide-react'
+import { parseAsInteger, parseAsString, useQueryState } from 'nuqs'
+import * as React from 'react'
+import { toast } from 'sonner'
+
+const SEARCH_PARSER = parseAsString.withDefault('')
+const TAB_PARSER = parseAsString.withDefault('upload')
+const TYPE_PARSER = parseAsString.withDefault('all')
+const PAGE_PARSER = parseAsInteger.withDefault(1)
+const DEFAULT_MEDIA_PAGE_SIZE = 40
+const SIZE_PARSER = parseAsInteger.withDefault(DEFAULT_MEDIA_PAGE_SIZE)
+
+type EditingMedia = AdminMedia | null
+
+const EMPTY_EDITING_MEDIA: EditingMedia = null
+
+function getMediaId(item: AdminMedia): string {
+  return item.id
+}
+
+export function MediaPageContent() {
+  const queryClient = useQueryClient()
+
+  const [search, setSearch] = useQueryState('mg_q', SEARCH_PARSER)
+  const [activeTab, setActiveTab] = useQueryState('mg_tab', TAB_PARSER)
+  const [mediaType, setContentType] = useQueryState('mg_type', TYPE_PARSER)
+  const [page, setPage] = useQueryState('mg_page', PAGE_PARSER)
+  const [pageSize, setPageSize] = useQueryState('mg_size', SIZE_PARSER)
+
+  const [editingMedia, setEditingMedia] = React.useState(EMPTY_EDITING_MEDIA)
+
+  const safePage = mediaHooks.clampMediaPage(page)
+  const safePageSize = mediaHooks.clampMediaPageSize(pageSize)
+  const effectiveContentType = mediaType === 'all' ? undefined : mediaType
+
+  const { data, isLoading, isFetching } = mediaHooks.useMediaList({
+    search: search || undefined,
+    contentType: effectiveContentType,
+    page: safePage,
+    pageSize: safePageSize
+  })
+
+  const media = data?.media ?? []
+  const total = data?.total ?? 0
+  const pageCount = Math.max(1, Math.ceil(total / safePageSize))
+
+  const { upload, uploadFromUrl, progress } = useUpload({
+    prefix: 'media',
+    onSuccess: (result) => {
+      void queryClient.invalidateQueries({ queryKey: ['media'] })
+      if (result.success) {
+        toast.success('Media uploaded successfully')
+      } else {
+        toast.error(result.error ?? 'Failed to upload media')
+      }
+    },
+    onError: (error) => {
+      toast.error(error.message || 'Failed to upload media')
+    }
+  })
+
+  const hasProgress = progress.length > 0
+  const hasActiveUpload = progress.some((item) => item.progress < 100)
+  const isUploading = hasProgress && hasActiveUpload
+
+  const loadedMediaIds = React.useMemo(() => media.map(getMediaId), [media])
+  const selection = useMediaFiltersBar(loadedMediaIds)
+  const { hasSelection, isSelectMode, selectedIds, setSelectedIds } = selection
+  const selected = React.useMemo(() => new Set(selectedIds), [selectedIds])
+
+  const handleSearch = React.useCallback(
+    (value: string | null) => {
+      React.startTransition(() => {
+        void setSearch(value)
+        void setPage(null)
+      })
+    },
+    [setSearch, setPage]
+  )
+  const clear = React.useCallback(() => handleSearch(null), [handleSearch])
+
+  const handleContentTypeChange = React.useCallback(
+    (value: ContentTypeFilter) => {
+      React.startTransition(() => {
+        void setContentType(value === 'all' ? null : value)
+        void setPage(null)
+      })
+    },
+    [setContentType, setPage]
+  )
+
+  const handlePageChange = React.useCallback(
+    (nextPage: number) => {
+      React.startTransition(() => {
+        void setPage(nextPage)
+      })
+    },
+    [setPage]
+  )
+
+  const handlePageSizeChange = React.useCallback(
+    (nextSize: number) => {
+      React.startTransition(() => {
+        void setPageSize(nextSize)
+        void setPage(null)
+      })
+    },
+    [setPageSize, setPage]
+  )
+
+  const toggleSelect = React.useCallback(
+    (id: string) => {
+      if (!isSelectMode) return
+
+      void setSelectedIds((currentSelectedIds) =>
+        currentSelectedIds.includes(id)
+          ? currentSelectedIds.filter((selectedId) => selectedId !== id)
+          : [...currentSelectedIds, id]
+      )
+    },
+    [isSelectMode, setSelectedIds]
+  )
+
+  const handleItemClick = React.useCallback(
+    (item: AdminMedia) => {
+      if (isSelectMode) {
+        toggleSelect(item.id)
+        return
+      }
+
+      setEditingMedia(item)
+    },
+    [isSelectMode, toggleSelect]
+  )
+
+  const deleteMutation = useMutation({
+    mutationFn: (ids: string[]) => deleteMediaBulk(ids),
+    onSuccess: (result, ids) => {
+      if (result.success) {
+        const suffix = ids.length === 1 ? '' : 's'
+        toast.success(`Deleted ${ids.length} file${suffix}`)
+        void setSelectedIds([])
+        queryClient.invalidateQueries({ queryKey: ['media'] })
+      } else {
+        toast.error(result.error ?? 'Failed to delete files')
+      }
+    }
+  })
+
+  return (
+    <React.Fragment>
+      <PageHeader
+        title="Media Gallery"
+        actions={
+          <ButtonGroup>
+            <Button
+              variant={activeTab === 'url' ? 'default' : 'outline'}
+              onClick={() => setActiveTab('url')}
+            >
+              <Link />
+              Import by URL
+            </Button>
+            <Button
+              variant={activeTab === 'upload' ? 'default' : 'outline'}
+              onClick={() => setActiveTab('upload')}
+            >
+              <Upload />
+              Upload
+            </Button>
+          </ButtonGroup>
+        }
+      />
+
+      <MediaFiltersBar
+        search={search}
+        onSearch={handleSearch}
+        contentType={(mediaType as ContentTypeFilter) || 'all'}
+        onContentTypeChange={handleContentTypeChange}
+        isPending={isFetching}
+        selection={selection}
+        actions={
+          hasSelection ? (
+            <DeleteDialog
+              count={selectedIds.length}
+              entityName="file"
+              onConfirm={() => deleteMutation.mutate(selectedIds)}
+              isPending={deleteMutation.isPending}
+            />
+          ) : null
+        }
+      />
+
+      <main className="space-y-3 px-4 pb-4 h-full">
+        <div className="flex w-full flex-col gap-4 pt-px">
+          {activeTab === 'url' ? (
+            <MediaUrlImporter
+              onImportFromUrl={(url) => uploadFromUrl(url, 'media')}
+              accept={effectiveContentType}
+              className="h-37 shrink-0"
+            />
+          ) : (
+            <UploadDropzone
+              onFilesSelected={upload}
+              progress={progress}
+              isUploading={isUploading}
+              multiple
+              className="h-37 shrink-0 w-full"
+            />
+          )}
+        </div>
+
+        {isLoading ? (
+          <MediaEmptyState variant="loading" />
+        ) : media.length === 0 && search ? (
+          <MediaEmptyState variant="no-results" onClearSearch={clear} />
+        ) : media.length === 0 && !search ? (
+          <MediaEmptyState variant="empty" />
+        ) : (
+          <>
+            <MediaGrid
+              items={media}
+              selectedIds={selected}
+              isSelectMode={isSelectMode}
+              onItemClick={handleItemClick}
+              className="lg:grid-cols-10 pb-12 pt-px px-px"
+            />
+            {total > DEFAULT_MEDIA_PAGE_SIZE ? (
+              <MediaGridPagination
+                page={safePage}
+                pageCount={pageCount}
+                pageSize={safePageSize}
+                onPageChange={handlePageChange}
+                onPageSizeChange={handlePageSizeChange}
+              />
+            ) : null}
+          </>
+        )}
+      </main>
+
+      <EditMediaDialog
+        media={editingMedia}
+        open={!!editingMedia}
+        onOpenChange={(open) => {
+          if (!open) setEditingMedia(null)
+        }}
+        onSaved={() => {
+          setEditingMedia(null)
+          queryClient.invalidateQueries({ queryKey: ['media'] })
+        }}
+      />
+    </React.Fragment>
+  )
+}

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

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

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

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