betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/api/upload-route.ts

@@ -0,0 +1,132 @@
+import { mediaCacheTags } from '@admin/actions/media/types'
+import { saveUpload } from '@admin/actions/storage'
+import { getSession } from '@admin/auth/middleware'
+import db from '@admin/db'
+import { adminMedia } from '@admin/db/schema'
+import type { UploadedFile } from '@admin/types'
+import { mapMediaRow, selectMedia } from '@admin/utils/media/query'
+import { validateFiles } from '@admin/utils/validation/validation'
+import { eq } from 'drizzle-orm'
+import { revalidateTag } from 'next/cache'
+import { type NextRequest, NextResponse } from 'next/server'
+
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData()
+    const prefix = formData.get('prefix')?.toString() || 'uploads'
+
+    const parsedMaxSizeInBytes = Number(formData.get('maxSizeInBytes'))
+    const maxSizeInBytes =
+      Number.isFinite(parsedMaxSizeInBytes) && parsedMaxSizeInBytes > 0
+        ? parsedMaxSizeInBytes
+        : undefined
+    const parsedMaxFiles = Number(formData.get('maxFiles'))
+    const maxFiles =
+      Number.isFinite(parsedMaxFiles) && parsedMaxFiles > 0 ? parsedMaxFiles : undefined
+    const allowedTypesRaw = formData.get('allowedTypes')?.toString()
+    const allowedTypes = allowedTypesRaw ? allowedTypesRaw.split(',').filter(Boolean) : []
+
+    const files: File[] = []
+    for (const [key, value] of formData.entries()) {
+      if (value instanceof File && key.startsWith('file')) {
+        files.push(value)
+      }
+    }
+
+    if (files.length === 0) {
+      return NextResponse.json({ success: false, error: 'No files provided' }, { status: 400 })
+    }
+
+    const validation = validateFiles(files, {
+      maxSizeInBytes,
+      allowedTypes,
+      maxFiles
+    })
+
+    if (!validation.valid) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: validation.errors
+            .map((e) => (e.filename ? `${e.filename}: ${e.error}` : e.error))
+            .join('; ')
+        },
+        { status: 400 }
+      )
+    }
+
+    const uploadedFiles: UploadedFile[] = []
+    const session = await getSession()
+    const actorId = session?.user?.id ?? null
+
+    for (const [index, file] of files.entries()) {
+      const arrayBuffer = await file.arrayBuffer()
+      const buffer = Buffer.from(arrayBuffer)
+      const { key, url } = await saveUpload({
+        buffer,
+        filename: file.name,
+        contentType: file.type,
+        contentLength: file.size,
+        prefix
+      })
+
+      const widthStr = formData.get(`width${index}`)?.toString()
+      const heightStr = formData.get(`height${index}`)?.toString()
+      const now = new Date().toISOString()
+
+      const [created] = await db
+        .insert(adminMedia)
+        .values({
+          url,
+          filename: file.name,
+          contentType: file.type,
+          size: file.size,
+          width: widthStr ? Number(widthStr) : null,
+          height: heightStr ? Number(heightStr) : null,
+          alt: null,
+          tags: null,
+          createdAt: now,
+          updatedAt: now,
+          createdBy: actorId,
+          updatedBy: actorId
+        })
+        .returning({ id: adminMedia.id })
+
+      if (!created?.id) {
+        return NextResponse.json(
+          { success: false, error: 'Failed to create media record' },
+          { status: 500 }
+        )
+      }
+
+      revalidateTag(mediaCacheTags.all, { expire: 0 })
+      revalidateTag(mediaCacheTags.byId(created.id), { expire: 0 })
+
+      const [mediaRow] = await selectMedia().where(eq(adminMedia.id, created.id)).limit(1)
+      if (!mediaRow) {
+        return NextResponse.json(
+          { success: false, error: 'Failed to create media record' },
+          { status: 500 }
+        )
+      }
+
+      const media = mapMediaRow(mediaRow)
+
+      uploadedFiles.push({
+        id: media.id,
+        key,
+        url,
+        filename: file.name,
+        size: file.size,
+        contentType: file.type,
+        width: media.width,
+        height: media.height
+      })
+    }
+
+    return NextResponse.json({ success: true, files: uploadedFiles })
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Failed to upload files'
+    return NextResponse.json({ success: false, error: message }, { status: 500 })
+  }
+}

package/dist/assets/adapters/next/templates/init/components/layouts/admin-header.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { SidebarTrigger, useSidebar } from '@admin/components/ui/sidebar'
+import { useTheme } from '@admin/hooks/use-admin-theme'
+import { Moon, Sun } from 'lucide-react'
+
+export function AdminHeader() {
+  const { theme, setTheme } = useTheme()
+  const { state } = useSidebar()
+
+  return (
+    <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border w-full sticky top-0 z-50">
+      <div className="flex items-center px-5 gap-1 flex-1 w-full justify-between">
+        <div className="flex items-center gap-2 w-full">
+          {state === 'collapsed' && <SidebarTrigger />}
+        </div>
+        <div className="flex items-center gap-2 ml-auto">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+          >
+            <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span className="sr-only">Toggle theme</span>
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/layouts/admin-nav-link.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { SidebarMenuButton } from '@admin/components/ui/sidebar'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+export function AdminNavLink({ href, children }: { href: string; children: React.ReactNode }) {
+  const pathname = usePathname()
+  const isActive =
+    href === '/admin' ? pathname === '/admin' : pathname === href || pathname.startsWith(`${href}/`)
+
+  return (
+    <SidebarMenuButton asChild>
+      <Link
+        aria-current={isActive ? 'page' : undefined}
+        data-active={isActive ? true : undefined}
+        href={href}
+      >
+        {children}
+      </Link>
+    </SidebarMenuButton>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/layouts/admin-providers.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { Toaster } from '@admin/components/ui/sonner'
+import { TooltipProvider } from '@admin/components/ui/tooltip'
+import { AdminThemeProvider } from '@admin/hooks/use-admin-theme'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useState } from 'react'
+
+export function AdminProviders({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 30 * 1000, // 30 seconds — client navigations reuse cached data
+            refetchOnWindowFocus: false,
+            refetchOnReconnect: false
+          }
+        }
+      })
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AdminThemeProvider>
+        <TooltipProvider>
+          {children}
+          <Toaster position="top-right" richColors />
+        </TooltipProvider>
+      </AdminThemeProvider>
+    </QueryClientProvider>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/layouts/admin-sidebar-branding-rsc.tsx

@@ -0,0 +1,8 @@
+import { getSetting } from '@admin/actions/settings'
+import { SidebarBranding } from './sidebar-branding'
+
+export async function SidebarBrandingRsc() {
+  const settings = await getSetting()
+
+  return <SidebarBranding initialData={settings} />
+}

package/dist/assets/adapters/next/templates/init/components/layouts/admin-sidebar-branding-skeleton.tsx

@@ -0,0 +1,10 @@
+import { Skeleton } from '@admin/components/ui/skeleton'
+
+export function BrandingSkeleton() {
+  return (
+    <div className="flex items-center gap-2 w-full h-full">
+      <Skeleton className="size-8 rounded-full shrink-0" />
+      <Skeleton className="h-4 w-24 group-data-[collapsible=icon]:hidden" />
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/layouts/admin-sidebar-nav-link-skeleton.tsx

@@ -0,0 +1,11 @@
+import { SidebarMenuButton } from '@admin/components/ui/sidebar'
+import Link from 'next/link'
+import type { ReactNode } from 'react'
+
+export function SidebarNavLinkSkeleton({ href, children }: { href: string; children: ReactNode }) {
+  return (
+    <SidebarMenuButton asChild>
+      <Link href={href}>{children}</Link>
+    </SidebarMenuButton>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/layouts/admin-sidebar-nav-link.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react'
+import { Suspense } from 'react'
+import { AdminNavLink } from './admin-nav-link'
+import { SidebarNavLinkSkeleton } from './admin-sidebar-nav-link-skeleton'
+
+export function SidebarNavLink({ href, children }: { href: string; children: ReactNode }) {
+  return (
+    <Suspense fallback={<SidebarNavLinkSkeleton href={href}>{children}</SidebarNavLinkSkeleton>}>
+      <AdminNavLink href={href}>{children}</AdminNavLink>
+    </Suspense>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/layouts/admin-sidebar-user-menu-skeleton.tsx

@@ -0,0 +1,15 @@
+import { SidebarMenu, SidebarMenuItem } from '@admin/components/ui/sidebar'
+import { Skeleton } from '@admin/components/ui/skeleton'
+
+export function UserMenuSkeleton() {
+  return (
+    <SidebarMenu className="h-full gap-0">
+      <SidebarMenuItem className="h-full">
+        <div className="flex h-full w-full items-center gap-2 px-3">
+          <Skeleton className="size-8 rounded-full shrink-0" />
+          <Skeleton className="h-4 w-20 group-data-[collapsible=icon]:hidden" />
+        </div>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/layouts/admin-sidebar-user-menu.tsx

@@ -0,0 +1,90 @@
+import { getSession } from '@admin/auth/middleware'
+import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar'
+import { Button, buttonVariants } from '@admin/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@admin/components/ui/dropdown-menu'
+import { SidebarMenu, SidebarMenuItem } from '@admin/components/ui/sidebar'
+import { cn } from '@admin/utils/shared/cn'
+import { BookOpen, Ellipsis, Settings } from 'lucide-react'
+import Link from 'next/link'
+import { AdminSignOut } from './admin-sign-out'
+
+export async function SidebarUserMenu() {
+  const session = await getSession()
+  const user = session?.user ?? null
+
+  if (!user) return null
+
+  return (
+    <SidebarMenu className="h-full">
+      <SidebarMenuItem className="h-full">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              className="bg-transparent! px-3 h-full w-full justify-start text-left ring-0! border-none"
+            >
+              <Avatar className="size-8 shrink-0">
+                <AvatarImage src={user.image ?? undefined} />
+                <AvatarFallback className="text-xs font-semibold group-hover:bg-white">
+                  {user.name?.charAt(0) ?? user.email?.charAt(0) ?? '?'}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1 truncate group-data-[collapsible=icon]:hidden">
+                <p className="font-medium truncate">{user.name}</p>
+              </div>
+
+              <div className="group-data-[collapsible=icon]:hidden">
+                <span
+                  className={cn(
+                    buttonVariants({ variant: 'outline', size: 'icon' }),
+                    'rounded-full group-hover:bg-white size-7'
+                  )}
+                >
+                  <Ellipsis strokeWidth={2} className="size-4" />
+                </span>
+              </div>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" alignOffset={12} className="w-68 p-1">
+            <DropdownMenuGroup>
+              <DropdownMenuItem className="justify-between" asChild>
+                <Link
+                  href="/admin/profile"
+                  prefetch={true}
+                  className="w-full flex justify-between items-center gap-2 pr-1 py-2"
+                >
+                  <div className="flex gap-2 items-center">
+                    <div className="flex flex-col">
+                      <p className="font-medium truncate">{user.name}</p>
+                      <p className="text-sm text-muted-foreground [text-box-trim:trim-start] truncate font-normal">
+                        {user.email}
+                      </p>
+                    </div>
+                  </div>
+                  <Button variant="ghost" className="size-8! pointer-events-none shrink-0">
+                    <Settings strokeWidth={2} className="size-4" />
+                  </Button>
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuGroup>
+              <DropdownMenuItem className="justify-between" asChild>
+                <Link href="https://betterstart.io/docs" target="_blank">
+                  <span>Docs</span>
+                  <BookOpen strokeWidth={1.2} className="size-4" />
+                </Link>
+              </DropdownMenuItem>
+              <AdminSignOut className="justify-between" />
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/layouts/admin-sidebar.tsx

@@ -0,0 +1,78 @@
+import { Separator } from '@admin/components/ui/separator'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuItem
+} from '@admin/components/ui/sidebar'
+import { adminNavigation } from '@admin/data/navigation'
+import { groupAdminNavigationItems } from '@admin/utils/navigation/sidebar'
+import { Settings, Users } from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { Fragment, Suspense } from 'react'
+import { SidebarBrandingRsc } from './admin-sidebar-branding-rsc'
+import { BrandingSkeleton } from './admin-sidebar-branding-skeleton'
+import { SidebarNavLink } from './admin-sidebar-nav-link'
+import { SidebarUserMenu } from './admin-sidebar-user-menu'
+import { UserMenuSkeleton } from './admin-sidebar-user-menu-skeleton'
+
+export function AdminSidebar(props: ComponentProps<typeof Sidebar>) {
+  const groups = groupAdminNavigationItems(adminNavigation)
+
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader className="border-b border-border/80 h-14 items-center flex w-full border-t">
+        <Suspense fallback={<BrandingSkeleton />}>
+          <SidebarBrandingRsc />
+        </Suspense>
+      </SidebarHeader>
+      <SidebarContent className="pb-1 pt-4">
+        {groups.map((group) => (
+          <Fragment key={group.label ?? '_ungrouped'}>
+            <SidebarGroup className="py-0">
+              {group.label && <SidebarGroupLabel>{group.label}</SidebarGroupLabel>}
+              <SidebarMenu className="gap-px">
+                {group.items.map((item) => (
+                  <SidebarMenuItem key={item.href}>
+                    <SidebarNavLink href={item.href}>
+                      {item.icon && <item.icon strokeWidth={2} />}
+                      <span>{item.label}</span>
+                    </SidebarNavLink>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroup>
+          </Fragment>
+        ))}
+
+        <SidebarGroup className="mt-auto gap-2 px-0">
+          <Separator />
+          <SidebarMenu className="px-2 gap-px">
+            <SidebarMenuItem>
+              <SidebarNavLink href="/admin/users">
+                <Users strokeWidth={2} />
+                <span>Users</span>
+              </SidebarNavLink>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarNavLink href="/admin/settings">
+                <Settings strokeWidth={2} />
+                <span>Settings</span>
+              </SidebarNavLink>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="[--admin-shell-bottom-bar-height:53px] h-(--admin-shell-bottom-bar-height) shrink-0 border-t border-border bg-background p-0">
+        <Suspense fallback={<UserMenuSkeleton />}>
+          <SidebarUserMenu />
+        </Suspense>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/layouts/admin-sign-out.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { signOut } from '@admin/auth/client'
+import { Button } from '@admin/components/ui/button'
+import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
+import { cn } from '@admin/utils/shared/cn'
+import { LogOut } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+
+export function AdminSignOut({
+  className,
+  mode = 'menu-item'
+}: {
+  className?: string
+  mode?: 'menu-item' | 'button'
+}) {
+  const router = useRouter()
+
+  async function handleSignOut() {
+    await signOut()
+    router.push('/admin/login')
+  }
+
+  if (mode === 'button') {
+    return (
+      <Button
+        type="button"
+        variant="ghost"
+        onClick={handleSignOut}
+        className={cn('justify-between', className)}
+      >
+        <span>Log Out</span>
+        <LogOut strokeWidth={1.2} className="size-4" />
+      </Button>
+    )
+  }
+
+  return (
+    <DropdownMenuItem onClick={handleSignOut} className={className}>
+      <span>Log Out</span>
+      <LogOut strokeWidth={1.2} className="size-4" />
+    </DropdownMenuItem>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/layouts/content-skeleton.tsx

@@ -0,0 +1,44 @@
+import { Card, CardContent } from '@admin/components/ui/card'
+import { Skeleton } from '@admin/components/ui/skeleton'
+
+export function ContentSkeleton() {
+  return (
+    <div className="relative z-10 flex items-center justify-center h-[50svh] px-4">
+      <div className="relative w-full max-w-xl" aria-hidden="true">
+        <Card size="sm" className="absolute left-1/2 top-1 h-24 w-[72%] -translate-x-1/2 rotate-3">
+          <CardContent className="flex h-full items-start gap-3 p-3">
+            <Skeleton className="size-8 shrink-0 rounded-md" />
+            <div className="flex min-w-0 flex-1 flex-col gap-2 pt-1">
+              <Skeleton className="h-4 w-full rounded-md" />
+              <Skeleton className="h-3 w-[78%] rounded-md" />
+            </div>
+            <Skeleton className="h-6 w-14 shrink-0 rounded-md" />
+          </CardContent>
+        </Card>
+
+        <Card size="sm" className="absolute right-2 top-10 h-36 w-[50%] rotate-6">
+          <CardContent className="flex h-full flex-col gap-4 p-4">
+            <Skeleton className="ml-auto h-6 w-14 rounded-md" />
+            <div className="flex flex-col gap-3 pt-2">
+              <Skeleton className="h-4 w-full rounded-md" />
+              <Skeleton className="h-4 w-[88%] rounded-md" />
+            </div>
+            <Skeleton className="mt-auto h-4 w-[78%] rounded-md" />
+          </CardContent>
+        </Card>
+
+        <Card size="sm" className="absolute left-0 top-12 h-36 w-[78%] -rotate-2">
+          <CardContent className="flex h-full gap-4 p-4">
+            <Skeleton className="h-full w-[27%] shrink-0 rounded-md" />
+            <div className="flex min-w-0 flex-1 flex-col gap-3">
+              <Skeleton className="h-8 w-full rounded-md" />
+              <Skeleton className="h-9 w-[94%] rounded-md" />
+              <Skeleton className="h-3 w-[70%] rounded-md" />
+            </div>
+            <Skeleton className="h-6 w-14 shrink-0 rounded-md" />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/layouts/sidebar-branding.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import type { Setting } from '@admin/actions/settings'
+import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar'
+import { useSetting } from '@admin/hooks/use-settings'
+import { admin } from '@admin/utils/app/admin'
+import Link from 'next/link'
+import { BrandingSkeleton } from './admin-sidebar-branding-skeleton'
+
+const DEFAULT_LOGO_URL = 'https://assets.betterstart.dev/assets/betterstart-logo.svg'
+
+interface SidebarBrandingProps {
+  initialData?: Setting | null
+}
+
+export function SidebarBranding({ initialData }: SidebarBrandingProps) {
+  const { data: settings, isLoading } = useSetting({ initialData })
+
+  if (isLoading) {
+    return <BrandingSkeleton />
+  }
+
+  const dashboardName = settings?.dashboardName ?? admin.name
+  const dashboardLogo = settings?.dashboardLogo || DEFAULT_LOGO_URL
+
+  return (
+    <div className="flex items-center gap-2 w-full relative h-full">
+      <Link href="/admin" className="flex items-center gap-2 w-full">
+        <Avatar className="size-8">
+          <AvatarImage src={dashboardLogo} />
+          <AvatarFallback className="text-sm font-semibold text-foreground">
+            {dashboardName.charAt(0)}
+          </AvatarFallback>
+        </Avatar>
+        <div className="flex text-foreground items-center gap-1 w-full group-data-[collapsible=icon]:hidden">
+          <span className="text-sm font-medium line-clamp-1">{dashboardName}</span>
+        </div>
+      </Link>
+    </div>
+  )
+}