doo-boilerplate 0.1.9 → 0.1.11

package/package.json

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

package/templates/template-nextjs/src/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,26 @@
+import { PageLayout } from '@/components/layout/page-layout'
+
+function StatCard({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
+      <p className="text-sm font-medium text-muted-foreground">{label}</p>
+      <p className="mt-2 text-3xl font-bold">{value}</p>
+    </div>
+  )
+}
+
+export default function DashboardPage() {
+  return (
+    <PageLayout
+      title="Dashboard"
+      description="Welcome to your portal. Here's an overview of your account."
+    >
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard label="Total Users" value="1,024" />
+        <StatCard label="Active Sessions" value="42" />
+        <StatCard label="Requests Today" value="8,390" />
+        <StatCard label="Uptime" value="99.9%" />
+      </div>
+    </PageLayout>
+  )
+}

package/templates/template-nextjs/src/app/(dashboard)/page.tsx

@@ -1,27 +1,5 @@
-import { PageLayout } from '@/components/layout/page-layout'
+import { redirect } from 'next/navigation'
 
-// Stat card placeholder component
-function StatCard({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
-      <p className="text-sm font-medium text-muted-foreground">{label}</p>
-      <p className="mt-2 text-3xl font-bold">{value}</p>
-    </div>
-  )
-}
-
-export default function DashboardPage() {
-  return (
-    <PageLayout
-      title="Dashboard"
-      description="Welcome to your portal. Here's an overview of your account."
-    >
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <StatCard label="Total Users" value="1,024" />
-        <StatCard label="Active Sessions" value="42" />
-        <StatCard label="Requests Today" value="8,390" />
-        <StatCard label="Uptime" value="99.9%" />
-      </div>
-    </PageLayout>
-  )
+export default function DashboardRootPage() {
+  redirect('/dashboard')
 }

package/templates/template-nextjs/src/components/layout/header.tsx

@@ -2,9 +2,12 @@
 
 import { LogOut, Menu, User } from 'lucide-react'
 import Link from 'next/link'
+import { useLocale } from 'next-intl'
+import { useRouter } from 'next/navigation'
 
 import { useSignOut } from '@/features/auth/hooks/use-auth'
 import { useAuthStore } from '@/stores/auth-store'
+import { ThemeToggle } from '@/components/common/theme-toggle'
 
 import { Avatar, AvatarFallback } from '../ui/avatar'
 import { Button } from '../ui/button'
@@ -18,6 +21,42 @@ import {
 } from '../ui/dropdown-menu'
 import { useSidebarStore } from './sidebar'
 
+const LANGUAGES = [
+  { code: 'en', label: 'EN' },
+  { code: 'vi', label: 'VI' },
+]
+
+function LangSwitcher() {
+  const locale = useLocale()
+  const router = useRouter()
+
+  function switchLocale(code: string) {
+    document.cookie = `NEXT_LOCALE=${code}; path=/; max-age=${365 * 24 * 60 * 60}`
+    router.refresh()
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="w-10 px-0 font-medium">
+          {locale.toUpperCase().slice(0, 2)}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {LANGUAGES.map(({ code, label }) => (
+          <DropdownMenuItem
+            key={code}
+            onClick={() => switchLocale(code)}
+            className={locale === code ? 'font-semibold' : ''}
+          >
+            {label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
 interface HeaderProps {
   title?: string
 }
@@ -52,6 +91,11 @@ export function Header({ title = 'Dashboard' }: HeaderProps) {
         <h2 className="text-lg font-semibold">{title}</h2>
       </div>
 
+      {/* Controls */}
+      <div className="flex items-center gap-1">
+        <LangSwitcher />
+        <ThemeToggle />
+
       {/* User dropdown */}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
@@ -86,6 +130,7 @@ export function Header({ title = 'Dashboard' }: HeaderProps) {
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
+      </div>
     </header>
   )
 }

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

@@ -1,8 +1,11 @@
 import { LogOut, User } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 
 import { useSignOut } from '@/features/auth/hooks/use-auth'
 import { useAuthStore } from '@/stores/auth-store'
+import { ThemeToggle } from '@/components/common/theme-toggle'
 import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,7 +14,35 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Button } from '@/components/ui/button'
+
+const LANGUAGES = [
+  { code: 'en', label: 'EN' },
+  { code: 'vi', label: 'VI' },
+]
+
+function LangSwitcher() {
+  const { i18n } = useTranslation()
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant='ghost' size='sm' className='w-10 px-0 font-medium'>
+          {i18n.language.toUpperCase().slice(0, 2)}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end'>
+        {LANGUAGES.map(({ code, label }) => (
+          <DropdownMenuItem
+            key={code}
+            onClick={() => i18n.changeLanguage(code)}
+            className={i18n.language === code ? 'font-semibold' : ''}
+          >
+            {label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
 
 export function Header() {
   const { user } = useAuthStore()
@@ -25,9 +56,12 @@ export function Header() {
     .slice(0, 2)
 
   return (
-    <header className='flex h-14 items-center border-b bg-background px-4 gap-4'>
+    <header className='flex h-14 items-center border-b bg-background px-4 gap-2'>
       <div className='flex-1' />
 
+      <LangSwitcher />
+      <ThemeToggle />
+
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant='ghost' size='icon' className='rounded-full' aria-label='User menu'>