doo-boilerplate 0.2.4 → 0.2.6

package/dist/index.js

@@ -112,7 +112,8 @@ var FILE_RENAMES = [
   ["_gitignore", ".gitignore"],
   ["_env.example", ".env.example"],
   ["_prettierrc", ".prettierrc"],
-  ["_prettierignore", ".prettierignore"]
+  ["_prettierignore", ".prettierignore"],
+  ["_package.json", "package.json"]
 ];
 async function scaffold(options, destDir) {
   const templateSymlink = path2.join(__dirname2, "..", "templates", "template-vite");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doo-boilerplate",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "CLI to scaffold Pila portal frontend projects",
   "type": "module",
   "bin": {

package/templates/template-vite/src/components/common/error-boundary.tsx

@@ -1,4 +1,5 @@
 import { Component, type ErrorInfo, type ReactNode } from 'react'
+import { Link } from '@tanstack/react-router'
 
 import { Button } from '@/components/ui/button'
 
@@ -39,9 +40,14 @@ export class ErrorBoundary extends Component<Props, State> {
           <p className='max-w-md text-sm text-muted-foreground'>
             {this.state.error?.message ?? 'An unexpected error occurred.'}
           </p>
-          <Button variant='outline' onClick={this.handleReset}>
-            Try again
-          </Button>
+          <div className='flex gap-3'>
+            <Button variant='outline' onClick={this.handleReset}>
+              Try again
+            </Button>
+            <Button asChild>
+              <Link to='/500'>View error details</Link>
+            </Button>
+          </div>
         </div>
       )
     }

package/templates/template-vite/src/components/common/error-page.tsx

@@ -0,0 +1,31 @@
+import { Link } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+
+interface ErrorPageProps {
+  code: number
+  title: string
+  description: string
+  /** Show 'Go Back' button using history.back() */
+  showBack?: boolean
+}
+
+/**
+ * Reusable full-screen error page for HTTP-style error statuses.
+ */
+export function ErrorPage({ code, title, description, showBack = true }: ErrorPageProps) {
+  return (
+    <div className='flex min-h-screen flex-col items-center justify-center gap-2 text-center px-4'>
+      <p className='text-8xl font-bold text-muted-foreground/30'>{code}</p>
+      <h1 className='text-2xl font-semibold'>{title}</h1>
+      <p className='max-w-md text-muted-foreground'>{description}</p>
+      <div className='mt-4 flex gap-3'>
+        {showBack && (
+          <Button variant='outline' onClick={() => window.history.back()}>Go Back</Button>
+        )}
+        <Button asChild>
+          <Link to='/dashboard'>Go to Dashboard</Link>
+        </Button>
+      </div>
+    </div>
+  )
+}

package/templates/template-vite/src/components/data-table/data-table-faceted-filter.tsx

@@ -35,7 +35,7 @@ export function DataTableFacetedFilter<TData, TValue>({
   options,
 }: DataTableFacetedFilterProps<TData, TValue>) {
   const facets = column?.getFacetedUniqueValues()
-  const selectedValues = new Set(column?.getFilterValue() as string[])
+  const selectedValues = new Set((column?.getFilterValue() as string[] | undefined) ?? [])
 
   return (
     <Popover>

package/templates/template-vite/src/features/dashboard/components/overview-chart.tsx

@@ -3,18 +3,18 @@ import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YA
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 
 const data = [
-  { month: 'Jan', revenue: 18000, users: 980 },
-  { month: 'Feb', revenue: 22000, users: 1200 },
-  { month: 'Mar', revenue: 19500, users: 1050 },
-  { month: 'Apr', revenue: 28000, users: 1540 },
-  { month: 'May', revenue: 24000, users: 1320 },
-  { month: 'Jun', revenue: 32000, users: 1780 },
-  { month: 'Jul', revenue: 35000, users: 1960 },
-  { month: 'Aug', revenue: 29000, users: 1590 },
-  { month: 'Sep', revenue: 38000, users: 2100 },
-  { month: 'Oct', revenue: 42000, users: 2300 },
-  { month: 'Nov', revenue: 39000, users: 2150 },
-  { month: 'Dec', revenue: 45000, users: 2480 },
+  { month: 'Jan', revenue: 18000 },
+  { month: 'Feb', revenue: 22000 },
+  { month: 'Mar', revenue: 19500 },
+  { month: 'Apr', revenue: 28000 },
+  { month: 'May', revenue: 24000 },
+  { month: 'Jun', revenue: 32000 },
+  { month: 'Jul', revenue: 35000 },
+  { month: 'Aug', revenue: 29000 },
+  { month: 'Sep', revenue: 38000 },
+  { month: 'Oct', revenue: 42000 },
+  { month: 'Nov', revenue: 39000 },
+  { month: 'Dec', revenue: 45000 },
 ]
 
 export function OverviewChart() {

package/templates/template-vite/src/features/tasks/components/tasks-table-columns.tsx

@@ -38,7 +38,7 @@ export function getTaskColumns({ onEdit, onDelete }: ActionsCallbacks): ColumnDe
       id: 'select',
       header: ({ table }) => (
         <Checkbox
-          checked={table.getIsAllPageRowsSelected()}
+          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
           onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}
           aria-label='Select all'
         />

package/templates/template-vite/src/lib/api-client.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { AUTH_STORAGE_KEY } from '@/stores/auth-store'
 
 // Axios instance configured with base URL from Vite env
 const apiClient = axios.create({
@@ -10,7 +11,7 @@ const apiClient = axios.create({
 // Attach Bearer token from auth storage on each request
 apiClient.interceptors.request.use((config) => {
   try {
-    const stored = localStorage.getItem('auth-storage')
+    const stored = localStorage.getItem(AUTH_STORAGE_KEY)
     if (stored) {
       const { state } = JSON.parse(stored)
       if (state?.accessToken) {
@@ -28,7 +29,7 @@ apiClient.interceptors.response.use(
   (response) => response,
   (error) => {
     if (error.response?.status === 401) {
-      localStorage.removeItem('auth-storage')
+      localStorage.removeItem(AUTH_STORAGE_KEY)
       window.location.href = '/sign-in'
     }
     return Promise.reject(error)

package/templates/template-vite/src/routes/(errors)/401.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ErrorPage } from '@/components/common/error-page'
+
+export const Route = createFileRoute('/(errors)/401')({
+  component: () => (
+    <ErrorPage
+      code={401}
+      title='Unauthorized'
+      description='You need to be logged in to access this page.'
+    />
+  ),
+})

package/templates/template-vite/src/routes/(errors)/403.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ErrorPage } from '@/components/common/error-page'
+
+export const Route = createFileRoute('/(errors)/403')({
+  component: () => (
+    <ErrorPage
+      code={403}
+      title='Forbidden'
+      description="You don't have permission to access this resource."
+    />
+  ),
+})

package/templates/template-vite/src/routes/(errors)/404.tsx

@@ -1,19 +1,12 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
-
-import { Button } from '@/components/ui/button'
+import { createFileRoute } from '@tanstack/react-router'
+import { ErrorPage } from '@/components/common/error-page'
 
 export const Route = createFileRoute('/(errors)/404')({
-  component: NotFoundPage,
+  component: () => (
+    <ErrorPage
+      code={404}
+      title='Page Not Found'
+      description="The page you're looking for doesn't exist or has been moved."
+    />
+  ),
 })
-
-function NotFoundPage() {
-  return (
-    <div className='flex min-h-screen flex-col items-center justify-center gap-4'>
-      <h1 className='text-6xl font-bold text-muted-foreground'>404</h1>
-      <p className='text-lg text-muted-foreground'>Page not found</p>
-      <Button asChild>
-        <Link to='/dashboard'>Go to Dashboard</Link>
-      </Button>
-    </div>
-  )
-}

package/templates/template-vite/src/routes/(errors)/500.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ErrorPage } from '@/components/common/error-page'
+
+export const Route = createFileRoute('/(errors)/500')({
+  component: () => (
+    <ErrorPage
+      code={500}
+      title='Internal Server Error'
+      description='Something went wrong on our end. Please try again later.'
+      showBack={false}
+    />
+  ),
+})

package/templates/template-vite/src/routes/__root.tsx

@@ -1,27 +1,21 @@
-import { Link, createRootRouteWithContext, Outlet } from '@tanstack/react-router'
+import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 
-import { Button } from '@/components/ui/button'
+import { ErrorPage } from '@/components/common/error-page'
 import type { QueryClient } from '@tanstack/react-query'
 
 interface RouterContext {
   queryClient: QueryClient
 }
 
-function NotFound() {
-  return (
-    <div className='flex min-h-screen flex-col items-center justify-center gap-4'>
-      <h1 className='text-6xl font-bold text-muted-foreground'>404</h1>
-      <p className='text-lg text-muted-foreground'>Page not found</p>
-      <Button asChild>
-        <Link to='/dashboard'>Go to Dashboard</Link>
-      </Button>
-    </div>
-  )
-}
-
 export const Route = createRootRouteWithContext<RouterContext>()({
-  notFoundComponent: NotFound,
+  notFoundComponent: () => (
+    <ErrorPage
+      code={404}
+      title='Page Not Found'
+      description="The page you're looking for doesn't exist."
+    />
+  ),
   component: () => (
     <>
       <Outlet />

package/templates/template-vite/src/stores/auth-store.ts

@@ -1,3 +1,6 @@
+/** Shared storage key used by auth store and api-client interceptor */
+export const AUTH_STORAGE_KEY = 'auth-storage'
+
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { jwtDecode } from 'jwt-decode'
@@ -51,6 +54,6 @@ export const useAuthStore = create<AuthState>()(
       hasRole: (role) => get().user?.roles.includes(role) ?? false,
       hasPermission: (permission) => get().user?.permissions.includes(permission) ?? false,
     }),
-    { name: 'auth-storage' }
+    { name: AUTH_STORAGE_KEY }
   )
 )