doo-boilerplate 0.2.3 → 0.2.4

package/package.json

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

package/templates/template-vite/CLAUDE.md

@@ -0,0 +1,47 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code when working in this project.
+
+## Tech Stack
+- React 19, TypeScript, Vite 8
+- TanStack Router (file-based routing) — add routes in `src/routes/`
+- TanStack Query — data fetching via `useQuery`/`useMutation`
+- TanStack Table — data tables via `src/components/data-table/`
+- Tailwind CSS 4 + shadcn/ui components in `src/components/ui/`
+- Zustand — global state in `src/stores/`
+- react-hook-form + zod — forms with validation
+- Sentry — error tracking (set `VITE_SENTRY_DSN` in `.env`)
+
+## Project Structure
+- `src/routes/` — file-based routes (TanStack Router auto-generates `routeTree.gen.ts`)
+- `src/features/` — feature modules (each has components/, hooks/, types/, schemas/, data/)
+- `src/components/ui/` — shadcn/ui components
+- `src/components/data-table/` — reusable DataTable components
+- `src/components/layout/` — Sidebar, Header, PageLayout
+- `src/lib/` — utilities (api-client, query-client, sentry, utils)
+- `src/stores/` — Zustand stores
+
+## Development Commands
+```bash
+pnpm dev          # start dev server
+pnpm build        # build for production
+pnpm type-check   # TypeScript check
+pnpm lint         # ESLint
+```
+
+## Adding a New Feature Module
+1. Create `src/features/{name}/` with: types/, schemas/, components/, data/
+2. Add route at `src/routes/_authenticated/{name}.tsx`
+3. Add nav item in `src/components/layout/sidebar.tsx`
+4. Use `DataTable` from `src/components/data-table/data-table.tsx` for list views
+
+## Adding New Routes
+Routes are auto-discovered. Create a file in `src/routes/` and run `pnpm dev` to regenerate `routeTree.gen.ts`.
+
+## API Integration
+Replace mock data in `src/features/*/data/` with real API calls using `src/lib/api-client.ts` (axios).
+Use TanStack Query hooks for data fetching.
+
+## Environment Variables
+Copy `.env.example` to `.env` and fill in values.
+`VITE_SENTRY_DSN` — Sentry DSN for error tracking (optional)

package/templates/template-vite/src/components/layout/sidebar.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react'
 import { Link } from '@tanstack/react-router'
-import { LayoutDashboard, Settings, User, Users, ChevronLeft, ChevronRight } from 'lucide-react'
+import { Bell, LayoutDashboard, LayoutTemplate, Settings, Table2, User, Users, ChevronLeft, ChevronRight } from 'lucide-react'
 
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { siteConfig } from '@/config/site'
 
@@ -14,6 +15,12 @@ const navItems = [
   { to: '/settings', label: 'Settings', icon: Settings },
 ] as const
 
+const exampleItems = [
+  { to: '/examples/toasts', label: 'Toasts', icon: Bell },
+  { to: '/examples/modals', label: 'Modals', icon: LayoutTemplate },
+  { to: '/examples/crud', label: 'CRUD', icon: Table2 },
+] as const
+
 export function Sidebar() {
   const [collapsed, setCollapsed] = useState(false)
 
@@ -47,27 +54,58 @@ export function Sidebar() {
       </div>
 
       {/* Navigation */}
-      <nav className='flex-1 space-y-1 p-2'>
+      <nav className='flex-1 overflow-y-auto p-2'>
         <TooltipProvider delayDuration={0}>
-          {navItems.map(({ to, label, icon: Icon }) => (
-            <Tooltip key={to} disableHoverableContent={!collapsed}>
-              <TooltipTrigger asChild>
-                <Link
-                  to={to}
-                  className={cn(
-                    'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-sidebar-foreground',
-                    'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-                    '[&.active]:bg-sidebar-accent [&.active]:text-sidebar-accent-foreground',
-                    collapsed && 'justify-center px-2'
-                  )}
-                >
-                  <Icon className='h-4 w-4 shrink-0' />
-                  {!collapsed && <span>{label}</span>}
-                </Link>
-              </TooltipTrigger>
-              {collapsed && <TooltipContent side='right'>{label}</TooltipContent>}
-            </Tooltip>
-          ))}
+          <div className='space-y-1'>
+            {navItems.map(({ to, label, icon: Icon }) => (
+              <Tooltip key={to} disableHoverableContent={!collapsed}>
+                <TooltipTrigger asChild>
+                  <Link
+                    to={to}
+                    className={cn(
+                      'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-sidebar-foreground',
+                      'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                      '[&.active]:bg-sidebar-accent [&.active]:text-sidebar-accent-foreground',
+                      collapsed && 'justify-center px-2'
+                    )}
+                  >
+                    <Icon className='h-4 w-4 shrink-0' />
+                    {!collapsed && <span>{label}</span>}
+                  </Link>
+                </TooltipTrigger>
+                {collapsed && <TooltipContent side='right'>{label}</TooltipContent>}
+              </Tooltip>
+            ))}
+          </div>
+
+          {/* Examples group */}
+          <Separator className='my-3' />
+          {!collapsed && (
+            <p className='mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground'>
+              Examples
+            </p>
+          )}
+          <div className='space-y-1'>
+            {exampleItems.map(({ to, label, icon: Icon }) => (
+              <Tooltip key={to} disableHoverableContent={!collapsed}>
+                <TooltipTrigger asChild>
+                  <Link
+                    to={to}
+                    className={cn(
+                      'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-sidebar-foreground',
+                      'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                      '[&.active]:bg-sidebar-accent [&.active]:text-sidebar-accent-foreground',
+                      collapsed && 'justify-center px-2'
+                    )}
+                  >
+                    <Icon className='h-4 w-4 shrink-0' />
+                    {!collapsed && <span>{label}</span>}
+                  </Link>
+                </TooltipTrigger>
+                {collapsed && <TooltipContent side='right'>{label}</TooltipContent>}
+              </Tooltip>
+            ))}
+          </div>
         </TooltipProvider>
       </nav>
     </aside>

package/templates/template-vite/src/features/tasks/components/task-form-dialog.tsx

@@ -0,0 +1,98 @@
+import { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
+import { taskFormSchema, type TaskFormValues } from '../schemas/task-form-schema'
+import type { Task } from '../types/task'
+
+interface TaskFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Existing task to edit; undefined = create mode */
+  task?: Task
+  onSubmit: (values: TaskFormValues) => void
+}
+
+/** Dialog for creating or editing a task */
+export function TaskFormDialog({ open, onOpenChange, task, onSubmit }: TaskFormDialogProps) {
+  const form = useForm<TaskFormValues>({
+    resolver: zodResolver(taskFormSchema),
+    defaultValues: { title: '', status: 'todo', priority: 'medium' },
+  })
+
+  // Populate form when editing
+  useEffect(() => {
+    if (task) {
+      form.reset({ title: task.title, status: task.status, priority: task.priority })
+    } else {
+      form.reset({ title: '', status: 'todo', priority: 'medium' })
+    }
+  }, [task, form])
+
+  const handleSubmit = (values: TaskFormValues) => {
+    onSubmit(values)
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{task ? 'Edit Task' : 'Create Task'}</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-4'>
+            <FormField control={form.control} name='title' render={({ field }) => (
+              <FormItem>
+                <FormLabel>Title</FormLabel>
+                <FormControl><Input placeholder='Task title...' {...field} /></FormControl>
+                <FormMessage />
+              </FormItem>
+            )} />
+            <FormField control={form.control} name='status' render={({ field }) => (
+              <FormItem>
+                <FormLabel>Status</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger><SelectValue /></SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value='todo'>Todo</SelectItem>
+                    <SelectItem value='in-progress'>In Progress</SelectItem>
+                    <SelectItem value='done'>Done</SelectItem>
+                    <SelectItem value='cancelled'>Cancelled</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )} />
+            <FormField control={form.control} name='priority' render={({ field }) => (
+              <FormItem>
+                <FormLabel>Priority</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger><SelectValue /></SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value='low'>Low</SelectItem>
+                    <SelectItem value='medium'>Medium</SelectItem>
+                    <SelectItem value='high'>High</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )} />
+            <DialogFooter>
+              <Button type='button' variant='outline' onClick={() => onOpenChange(false)}>Cancel</Button>
+              <Button type='submit'>{task ? 'Save' : 'Create'}</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,117 @@
+import { useState } from 'react'
+import {
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  type SortingState,
+  type ColumnFiltersState,
+  type VisibilityState,
+} from '@tanstack/react-table'
+import { Plus } from 'lucide-react'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/button'
+import { DataTable } from '@/components/data-table/data-table'
+import { DataTableToolbar } from '@/components/data-table/data-table-toolbar'
+import { tasksMockData } from '../data/tasks-mock-data'
+import { getTaskColumns } from './tasks-table-columns'
+import { TaskFormDialog } from './task-form-dialog'
+import type { Task } from '../types/task'
+import type { TaskFormValues } from '../schemas/task-form-schema'
+
+const STATUS_FILTER_OPTIONS = [
+  { label: 'Todo', value: 'todo' },
+  { label: 'In Progress', value: 'in-progress' },
+  { label: 'Done', value: 'done' },
+  { label: 'Cancelled', value: 'cancelled' },
+]
+
+const PRIORITY_FILTER_OPTIONS = [
+  { label: 'Low', value: 'low' },
+  { label: 'Medium', value: 'medium' },
+  { label: 'High', value: 'high' },
+]
+
+/** Full CRUD data table for tasks using local state */
+export function TasksCrudTable() {
+  const [tasks, setTasks] = useState<Task[]>(tasksMockData)
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = useState({})
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [editingTask, setEditingTask] = useState<Task | undefined>()
+
+  const handleEdit = (task: Task) => {
+    setEditingTask(task)
+    setDialogOpen(true)
+  }
+
+  const handleDelete = (id: string) => {
+    setTasks((prev) => prev.filter((t) => t.id !== id))
+    toast.success('Task deleted')
+  }
+
+  const handleSubmit = (values: TaskFormValues) => {
+    if (editingTask) {
+      setTasks((prev) => prev.map((t) => t.id === editingTask.id ? { ...t, ...values } : t))
+      toast.success('Task updated')
+    } else {
+      const newTask: Task = {
+        id: String(Date.now()),
+        ...values,
+        createdAt: new Date().toISOString().slice(0, 10),
+      }
+      setTasks((prev) => [newTask, ...prev])
+      toast.success('Task created')
+    }
+    setEditingTask(undefined)
+  }
+
+  const columns = getTaskColumns({ onEdit: handleEdit, onDelete: handleDelete })
+
+  const table = useReactTable({
+    data: tasks,
+    columns,
+    state: { sorting, columnFilters, columnVisibility, rowSelection },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+  })
+
+  return (
+    <div className='space-y-4'>
+      <div className='flex items-center justify-between'>
+        <DataTableToolbar
+          table={table}
+          searchColumn='title'
+          searchPlaceholder='Search tasks...'
+          filters={[
+            { columnId: 'status', title: 'Status', options: STATUS_FILTER_OPTIONS },
+            { columnId: 'priority', title: 'Priority', options: PRIORITY_FILTER_OPTIONS },
+          ]}
+        />
+        <Button
+          size='sm'
+          className='ml-2'
+          onClick={() => { setEditingTask(undefined); setDialogOpen(true) }}
+        >
+          <Plus className='mr-1 h-4 w-4' /> Add Task
+        </Button>
+      </div>
+      <DataTable table={table} columns={columns} />
+      <TaskFormDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        task={editingTask}
+        onSubmit={handleSubmit}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,108 @@
+import { type ColumnDef } from '@tanstack/react-table'
+import { MoreHorizontal } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { DataTableColumnHeader } from '@/components/data-table/data-table-column-header'
+import type { Task } from '../types/task'
+
+/** Maps task status to badge variant */
+const statusVariant: Record<Task['status'], 'success' | 'warning' | 'secondary' | 'destructive'> = {
+  done: 'success',
+  'in-progress': 'warning',
+  todo: 'secondary',
+  cancelled: 'destructive',
+}
+
+/** Maps task priority to badge variant */
+const priorityVariant: Record<Task['priority'], 'destructive' | 'warning' | 'secondary'> = {
+  high: 'destructive',
+  medium: 'warning',
+  low: 'secondary',
+}
+
+interface ActionsCallbacks {
+  onEdit: (task: Task) => void
+  onDelete: (id: string) => void
+}
+
+export function getTaskColumns({ onEdit, onDelete }: ActionsCallbacks): ColumnDef<Task>[] {
+  return [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <Checkbox
+          checked={table.getIsAllPageRowsSelected()}
+          onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}
+          aria-label='Select all'
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(v) => row.toggleSelected(!!v)}
+          aria-label='Select row'
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    },
+    {
+      accessorKey: 'title',
+      header: ({ column }) => <DataTableColumnHeader column={column} title='Title' />,
+      filterFn: 'includesString',
+    },
+    {
+      accessorKey: 'status',
+      header: ({ column }) => <DataTableColumnHeader column={column} title='Status' />,
+      cell: ({ row }) => {
+        const status = row.getValue<Task['status']>('status')
+        return <Badge variant={statusVariant[status]}>{status}</Badge>
+      },
+      filterFn: (row, id, filterValues: string[]) =>
+        filterValues.includes(row.getValue(id)),
+    },
+    {
+      accessorKey: 'priority',
+      header: ({ column }) => <DataTableColumnHeader column={column} title='Priority' />,
+      cell: ({ row }) => {
+        const priority = row.getValue<Task['priority']>('priority')
+        return <Badge variant={priorityVariant[priority]}>{priority}</Badge>
+      },
+      filterFn: (row, id, filterValues: string[]) =>
+        filterValues.includes(row.getValue(id)),
+    },
+    {
+      accessorKey: 'createdAt',
+      header: ({ column }) => <DataTableColumnHeader column={column} title='Created' />,
+    },
+    {
+      id: 'actions',
+      cell: ({ row }) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant='ghost' className='h-8 w-8 p-0'>
+              <span className='sr-only'>Open menu</span>
+              <MoreHorizontal className='h-4 w-4' />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align='end'>
+            <DropdownMenuItem onClick={() => onEdit(row.original)}>Edit</DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => onDelete(row.original.id)}
+              className='text-destructive'
+            >
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ]
+}

package/templates/template-vite/src/features/tasks/data/tasks-mock-data.ts

@@ -0,0 +1,24 @@
+import type { Task } from '../types/task'
+
+export const tasksMockData: Task[] = [
+  { id: '1', title: 'Set up project structure', status: 'done', priority: 'high', createdAt: '2024-01-01' },
+  { id: '2', title: 'Design database schema', status: 'done', priority: 'high', createdAt: '2024-01-02' },
+  { id: '3', title: 'Implement authentication', status: 'done', priority: 'high', createdAt: '2024-01-03' },
+  { id: '4', title: 'Build user profile page', status: 'in-progress', priority: 'medium', createdAt: '2024-01-04' },
+  { id: '5', title: 'Add email notifications', status: 'in-progress', priority: 'medium', createdAt: '2024-01-05' },
+  { id: '6', title: 'Write unit tests', status: 'todo', priority: 'high', createdAt: '2024-01-06' },
+  { id: '7', title: 'Set up CI/CD pipeline', status: 'todo', priority: 'medium', createdAt: '2024-01-07' },
+  { id: '8', title: 'Optimize database queries', status: 'todo', priority: 'low', createdAt: '2024-01-08' },
+  { id: '9', title: 'Add dark mode support', status: 'todo', priority: 'low', createdAt: '2024-01-09' },
+  { id: '10', title: 'Implement search functionality', status: 'in-progress', priority: 'high', createdAt: '2024-01-10' },
+  { id: '11', title: 'Create onboarding flow', status: 'todo', priority: 'medium', createdAt: '2024-01-11' },
+  { id: '12', title: 'Add export to CSV feature', status: 'cancelled', priority: 'low', createdAt: '2024-01-12' },
+  { id: '13', title: 'Implement role-based access', status: 'in-progress', priority: 'high', createdAt: '2024-01-13' },
+  { id: '14', title: 'Write API documentation', status: 'todo', priority: 'medium', createdAt: '2024-01-14' },
+  { id: '15', title: 'Add analytics dashboard', status: 'todo', priority: 'medium', createdAt: '2024-01-15' },
+  { id: '16', title: 'Fix pagination bug', status: 'done', priority: 'high', createdAt: '2024-01-16' },
+  { id: '17', title: 'Improve error messages', status: 'todo', priority: 'low', createdAt: '2024-01-17' },
+  { id: '18', title: 'Add keyboard shortcuts', status: 'cancelled', priority: 'low', createdAt: '2024-01-18' },
+  { id: '19', title: 'Performance audit', status: 'todo', priority: 'medium', createdAt: '2024-01-19' },
+  { id: '20', title: 'Mobile responsive fixes', status: 'in-progress', priority: 'high', createdAt: '2024-01-20' },
+]

package/templates/template-vite/src/features/tasks/schemas/task-form-schema.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod'
+
+export const taskFormSchema = z.object({
+  title: z.string().min(2, 'Title must be at least 2 characters'),
+  status: z.enum(['todo', 'in-progress', 'done', 'cancelled']),
+  priority: z.enum(['low', 'medium', 'high']),
+})
+
+export type TaskFormValues = z.infer<typeof taskFormSchema>

package/templates/template-vite/src/features/tasks/types/task.ts

@@ -0,0 +1,10 @@
+export type TaskStatus = 'todo' | 'in-progress' | 'done' | 'cancelled'
+export type TaskPriority = 'low' | 'medium' | 'high'
+
+export interface Task {
+  id: string
+  title: string
+  status: TaskStatus
+  priority: TaskPriority
+  createdAt: string
+}

package/templates/template-vite/src/routes/_authenticated/examples/crud.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { PageLayout } from '@/components/layout/page-layout'
+import { TasksCrudTable } from '@/features/tasks/components/tasks-crud-table'
+
+export const Route = createFileRoute('/_authenticated/examples/crud')({
+  component: CrudPage,
+})
+
+function CrudPage() {
+  return (
+    <PageLayout title='CRUD Example' description='Full Create, Read, Update, Delete with DataTable'>
+      <TasksCrudTable />
+    </PageLayout>
+  )
+}

package/templates/template-vite/src/routes/_authenticated/examples/modals.tsx

@@ -0,0 +1,123 @@
+import { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { PageLayout } from '@/components/layout/page-layout'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+
+export const Route = createFileRoute('/_authenticated/examples/modals')({
+  component: ModalsPage,
+})
+
+const formSchema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.string().email('Invalid email address'),
+})
+type FormValues = z.infer<typeof formSchema>
+
+function ModalsPage() {
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [formOpen, setFormOpen] = useState(false)
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { name: '', email: '' },
+  })
+
+  const onSubmit = (values: FormValues) => {
+    toast.success(`Submitted: ${values.name} (${values.email})`)
+    form.reset()
+    setFormOpen(false)
+  }
+
+  return (
+    <PageLayout title='Modals & Dialogs' description='Alert dialogs and form modal examples'>
+      <div className='grid gap-6 md:grid-cols-2'>
+        <Card>
+          <CardHeader>
+            <CardTitle>Confirm Dialog</CardTitle>
+            <CardDescription>Destructive action with confirmation</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button variant='destructive' onClick={() => setConfirmOpen(true)}>Delete Item</Button>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Form Dialog</CardTitle>
+            <CardDescription>Modal with react-hook-form + zod validation</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button onClick={() => setFormOpen(true)}>Open Form</Button>
+          </CardContent>
+        </Card>
+      </div>
+
+      <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>This action cannot be undone. This will permanently delete the item.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => { setConfirmOpen(false); toast.success('Item deleted') }}
+              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create Item</DialogTitle>
+            <DialogDescription>Fill in the details below to create a new item.</DialogDescription>
+          </DialogHeader>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
+              <FormField control={form.control} name='name' render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl><Input placeholder='John Doe' {...field} /></FormControl>
+                  <FormMessage />
+                </FormItem>
+              )} />
+              <FormField control={form.control} name='email' render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl><Input placeholder='john@example.com' type='email' {...field} /></FormControl>
+                  <FormMessage />
+                </FormItem>
+              )} />
+              <DialogFooter>
+                <Button type='button' variant='outline' onClick={() => setFormOpen(false)}>Cancel</Button>
+                <Button type='submit'>Submit</Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    </PageLayout>
+  )
+}

package/templates/template-vite/src/routes/_authenticated/examples/toasts.tsx

@@ -0,0 +1,47 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import { PageLayout } from '@/components/layout/page-layout'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+
+export const Route = createFileRoute('/_authenticated/examples/toasts')({
+  component: ToastsPage,
+})
+
+function ToastsPage() {
+  const showPromise = () => {
+    toast.promise(new Promise((resolve) => setTimeout(resolve, 2000)), {
+      loading: 'Loading...',
+      success: 'Promise resolved!',
+      error: 'Promise rejected',
+    })
+  }
+
+  return (
+    <PageLayout title='Toast Notifications' description='Interactive toast notification examples using Sonner'>
+      <Card>
+        <CardHeader>
+          <CardTitle>Toast Types</CardTitle>
+          <CardDescription>Click buttons to trigger different toast variants</CardDescription>
+        </CardHeader>
+        <CardContent className='flex flex-wrap gap-3'>
+          <Button onClick={() => toast.success('Operation completed successfully!')}>Success</Button>
+          <Button variant='destructive' onClick={() => toast.error('Something went wrong!')}>Error</Button>
+          <Button variant='outline' onClick={() => toast.warning('Proceed with caution')}>Warning</Button>
+          <Button variant='outline' onClick={() => toast.info('Here is some information')}>Info</Button>
+          <Button variant='outline' onClick={showPromise}>Promise</Button>
+          <Button
+            variant='secondary'
+            onClick={() =>
+              toast('Event created', {
+                action: { label: 'Undo', onClick: () => toast.info('Undone!') },
+              })
+            }
+          >
+            With Action
+          </Button>
+        </CardContent>
+      </Card>
+    </PageLayout>
+  )
+}