@create-lft-app/nextjs 2.0.1 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@create-lft-app/nextjs",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "Next.js template para proyectos LFT con Midday Design System",
   "type": "module",
   "bin": {
@@ -12,6 +12,7 @@
     "!template/node_modules",
     "!template/.next",
     "!template/package-lock.json",
+    "!template/pnpm-lock.yaml",
     "!template/next-env.d.ts",
     "!template/.env*"
   ],
@@ -30,7 +31,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Test-Boiler/create-lft-nextjs"
+    "url": "https://github.com/somosdcg/next-boiler"
   },
   "publishConfig": {
     "access": "public"

package/template/CLAUDE.md

@@ -0,0 +1,279 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## 🚨 CRITICAL: MANDATORY ARCHITECTURAL PATTERN 🚨
+
+**⚠️ BEFORE WRITING ANY CODE, YOU MUST READ AND FOLLOW THIS PATTERN ⚠️**
+
+This section is **NON-NEGOTIABLE** and MUST be followed in **100% of cases** when creating or modifying features in this codebase.
+
+## ⚠️ The Most Common Mistake (DON'T DO THIS!)
+
+```typescript
+// ❌ WRONG - NEVER IMPORT MUTATIONS OR QUERIES DIRECTLY IN COMPONENTS
+import { useEntityMutations } from '@/modules/[entity]/hooks/useEntityMutations'
+import { useEntityQueries } from '@/modules/[entity]/hooks/useEntityQueries'
+
+export function MyComponent() {
+  const { createEntity } = useEntityMutations() // ❌ ARCHITECTURAL VIOLATION
+  const { entities } = useEntityQueries() // ❌ ARCHITECTURAL VIOLATION
+}
+
+// ✅ CORRECT - ALWAYS USE THE UNIFIED HOOK
+import { useEntity } from '@/modules/[entity]/hooks/useEntity'
+
+export function MyComponent() {
+  const { createEntity, entities } = useEntity() // ✅ CORRECT PATTERN
+}
+```
+
+## 🚨 MANDATORY Pattern: Store → Queries → Mutations → Unified Hook → Component
+
+**THIS IS THE ONLY ACCEPTABLE ARCHITECTURE FOR THIS CODEBASE.**
+
+Every module MUST follow this exact structure:
+
+```
+modules/
+└── [entity]/
+    ├── actions/
+    │   └── [entity]-actions.ts          # Server actions with RLS
+    ├── components/
+    │   ├── [entity]-list.tsx            # Component imports ONLY unified hook
+    │   ├── [entity]-form.tsx
+    │   └── [entity]-detail.tsx
+    ├── hooks/
+    │   ├── use[Entity]Queries.ts        # TanStack Query (read operations)
+    │   ├── use[Entity]Mutations.ts      # TanStack Mutations (write operations)
+    │   └── use[Entity].ts               # UNIFIED HOOK (components use THIS)
+    ├── stores/
+    │   └── use[Entity]Store.ts          # Zustand store (UI state only)
+    ├── schemas/
+    │   └── [entity].schema.ts           # Zod validation schemas
+    ├── columns.tsx                      # TanStack Table column definitions (if needed)
+    └── index.ts                         # Barrel export
+```
+
+## 📋 Mandatory Implementation Checklist
+
+Before writing ANY code, verify this checklist:
+
+- [ ] **Step 1**: Create Drizzle schema in `db/schema/[entity].ts`
+- [ ] **Step 2**: Create Zod schemas in `modules/[entity]/schemas/[entity].schema.ts`
+- [ ] **Step 3**: Create Server actions in `modules/[entity]/actions/[entity]-actions.ts`
+- [ ] **Step 4**: Create Zustand store with separate state/actions selectors using `useShallow` in `modules/[entity]/stores/`
+- [ ] **Step 5**: Create Queries hook in `modules/[entity]/hooks/use[Entity]Queries.ts`
+- [ ] **Step 6**: Create Mutations hook with cache invalidation in `modules/[entity]/hooks/use[Entity]Mutations.ts`
+- [ ] **Step 7**: Create Unified hook that combines store + queries + mutations in `modules/[entity]/hooks/use[Entity].ts`
+- [ ] **Step 8**: Components ONLY import the unified hook (NEVER queries/mutations directly)
+- [ ] **Step 9**: Test with `pnpm typecheck && pnpm lint` before committing
+
+## 🔴 NEVER DO THIS (Anti-Patterns)
+
+```typescript
+// ❌ NEVER: Import queries or mutations directly in components
+import { useEntityQueries } from '@/modules/[entity]/hooks/useEntityQueries'
+import { useEntityMutations } from '@/modules/[entity]/hooks/useEntityMutations'
+
+// ❌ NEVER: Consume entire store (causes re-renders)
+const store = useEntityStore()
+
+// ❌ NEVER: Manual data fetching in useEffect
+useEffect(() => {
+  fetch('/api/entities').then(setData)
+}, [])
+
+// ❌ NEVER: Server actions without authenticated user context (RLS won't work)
+export async function deleteEntity(id: string) {
+  const supabase = createClient() // Anonymous client - RLS will fail!
+  await supabase.from('entities').delete().eq('id', id)
+}
+```
+
+## ✅ ALWAYS DO THIS (Correct Patterns)
+
+```typescript
+// ✅ ALWAYS: Use the unified hook in components
+import { useEntity } from '@/modules/[entity]/hooks/useEntity'
+
+// ✅ ALWAYS: Use separate selectors with useShallow
+import { useEntityStore } from '@/modules/[entity]/stores/useEntityStore'
+import { useShallow } from 'zustand/react/shallow'
+
+const state = useEntityStore(useShallow((s) => s.state))
+const actions = useEntityStore(useShallow((s) => s.actions))
+
+// ✅ ALWAYS: Use TanStack Query for data fetching
+const { data } = useQuery({ queryKey: ['entities'], queryFn: fetchEntities })
+
+// ✅ ALWAYS: Use authenticated Supabase client in server actions (RLS enforced)
+'use server'
+
+import { createClient } from '@/lib/supabase/server'
+
+export async function deleteEntity(id: string) {
+  const supabase = await createClient() // Authenticated client with user context
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) throw new Error('Unauthorized')
+
+  // RLS policies will automatically enforce authorization
+  const { error } = await supabase.from('entities').delete().eq('id', id)
+
+  if (error) throw error
+}
+```
+
+## 📁 Complete Project Structure
+
+```
+src/
+├── app/
+│   ├── (auth)/                          # Rutas autenticadas
+│   │   ├── dashboard/
+│   │   │   └── page.tsx
+│   │   └── layout.tsx
+│   ├── (public)/                        # Rutas públicas
+│   │   ├── login/
+│   │   │   └── page.tsx
+│   │   └── layout.tsx
+│   ├── api/
+│   │   └── webhooks/
+│   │       └── route.ts
+│   ├── layout.tsx
+│   ├── page.tsx
+│   └── providers.tsx
+│
+├── modules/                             # Feature-based modules
+│   ├── auth/
+│   │   ├── actions/
+│   │   │   └── auth-actions.ts
+│   │   ├── components/
+│   │   │   └── login-form.tsx
+│   │   ├── hooks/
+│   │   │   ├── useAuthQueries.ts
+│   │   │   ├── useAuthMutations.ts
+│   │   │   └── useAuth.ts
+│   │   ├── stores/
+│   │   │   └── useAuthStore.ts
+│   │   ├── schemas/
+│   │   │   └── auth.schema.ts
+│   │   └── index.ts
+│   └── users/
+│       ├── actions/
+│       │   └── users-actions.ts
+│       ├── components/
+│       │   ├── users-list.tsx
+│       │   ├── users-form.tsx
+│       │   └── users-detail.tsx
+│       ├── hooks/
+│       │   ├── useUsersQueries.ts
+│       │   ├── useUsersMutations.ts
+│       │   └── useUsers.ts
+│       ├── stores/
+│       │   └── useUsersStore.ts
+│       ├── schemas/
+│       │   └── users.schema.ts
+│       ├── columns.tsx
+│       └── index.ts
+│
+├── components/
+│   ├── ui/                              # Radix custom components
+│   │   ├── button.tsx
+│   │   ├── dialog.tsx
+│   │   └── index.ts
+│   ├── tables/                          # TanStack Table components
+│   │   ├── data-table.tsx
+│   │   ├── data-table-pagination.tsx
+│   │   ├── data-table-toolbar.tsx
+│   │   ├── data-table-column-header.tsx
+│   │   └── index.ts
+│   ├── layout/
+│   │   ├── header.tsx
+│   │   └── sidebar.tsx
+│   └── shared/
+│       └── ...
+│
+├── stores/                              # Global Zustand stores
+│   ├── useUiStore.ts
+│   └── index.ts
+│
+├── hooks/                               # Global hooks
+│   ├── useMediaQuery.ts
+│   ├── useDebounce.ts
+│   └── useDataTable.ts
+│
+├── lib/
+│   ├── supabase/
+│   │   ├── client.ts
+│   │   ├── server.ts
+│   │   ├── proxy.ts
+│   │   └── types.ts
+│   ├── excel/
+│   │   ├── parser.ts
+│   │   ├── exporter.ts
+│   │   └── index.ts
+│   ├── date/
+│   │   ├── config.ts
+│   │   ├── formatters.ts
+│   │   └── index.ts
+│   ├── validations/
+│   │   ├── common.ts
+│   │   └── index.ts
+│   ├── query-client.ts
+│   └── utils.ts
+│
+├── db/
+│   ├── schema/
+│   │   ├── users.ts
+│   │   └── index.ts
+│   ├── migrations/
+│   ├── index.ts
+│   └── seed.ts
+│
+├── types/
+│   ├── api.ts
+│   ├── table.ts
+│   └── index.ts
+│
+├── config/
+│   ├── site.ts
+│   └── navigation.ts
+│
+└── styles/
+    └── globals.css
+
+supabase/
+├── functions/
+│   ├── process-excel/
+│   │   └── index.ts
+│   └── send-notification/
+│       └── index.ts
+├── migrations/
+└── config.toml
+
+# Root files
+├── .env.local
+├── .env.example
+├── drizzle.config.ts
+├── proxy.ts
+├── next.config.ts
+├── package.json
+├── tsconfig.json
+└── tailwind.config.ts
+```
+
+## 🛠️ Tech Stack
+
+- **Framework**: Next.js 16 (App Router)
+- **State Management**: Zustand 5
+- **Data Fetching**: TanStack Query 5
+- **Tables**: TanStack Table 8
+- **Database**: Supabase + Drizzle ORM
+- **Validation**: Zod
+- **UI**: Radix UI + Tailwind CSS
+- **Forms**: React Hook Form + Zod resolver
+- **Excel**: xlsx (SheetJS)
+- **Dates**: dayjs
+- **Package Manager**: pnpm

package/template/drizzle.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'drizzle-kit'
+
+export default defineConfig({
+  schema: './src/db/schema/index.ts',
+  out: './src/db/migrations',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: process.env.DATABASE_URL!,
+  },
+  verbose: true,
+  strict: true,
+})

package/template/package.json

@@ -6,12 +6,18 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate",
+    "db:push": "drizzle-kit push",
+    "db:studio": "drizzle-kit studio",
+    "db:seed": "tsx src/db/seed.ts"
   },
   "dependencies": {
     "next": "^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.0",
     "@radix-ui/react-avatar": "^1.1.0",
@@ -31,21 +37,38 @@
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.0",
+
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "tailwind-merge": "^2.5.0",
     "lucide-react": "^0.400.0",
+
     "react-hook-form": "^7.50.0",
     "@hookform/resolvers": "^3.9.0",
+    "zod": "^3.23.0",
+
     "cmdk": "^1.0.0",
-    "react-day-picker": "^9.0.0",
-    "date-fns": "^4.0.0",
     "sonner": "^1.5.0",
     "next-themes": "^0.4.0",
     "tw-animate-css": "^1.2.0",
-    "zod": "^3.23.0",
+    "react-day-picker": "^9.4.0",
+
     "@supabase/supabase-js": "^2.45.0",
-    "@supabase/ssr": "^0.5.0"
+    "@supabase/ssr": "^0.5.0",
+
+    "zustand": "^5.0.0",
+
+    "@tanstack/react-query": "^5.60.0",
+    "@tanstack/react-query-devtools": "^5.60.0",
+    "@tanstack/react-table": "^8.20.0",
+
+    "drizzle-orm": "^0.36.0",
+    "postgres": "^3.4.0",
+
+    "xlsx": "^0.18.5",
+    "dayjs": "^1.11.0",
+
+    "framer-motion": "^11.15.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -56,6 +79,8 @@
     "eslint-config-next": "^16.0.0",
     "tailwindcss": "^4.0.0",
     "@tailwindcss/postcss": "^4.0.0",
-    "tailwindcss-animate": "^1.0.0"
+    "tailwindcss-animate": "^1.0.0",
+    "drizzle-kit": "^0.28.0",
+    "tsx": "^4.19.0"
   }
 }

package/template/proxy.ts

@@ -0,0 +1,12 @@
+import { type NextRequest } from 'next/server'
+import { updateSession } from '@/lib/supabase/proxy'
+
+export async function proxy(request: NextRequest) {
+  return await updateSession(request)
+}
+
+export const config = {
+  unstable_allowDynamic: [
+    '/node_modules/@supabase/**',
+  ],
+}

package/template/src/app/(auth)/dashboard/dashboard-content.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import {
+  PageTransition,
+  PageHeader,
+  PageTitle,
+  PageDescription,
+  MotionDiv,
+  staggerContainer,
+  staggerItem,
+} from '@/components/ui/animations'
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from '@/components/ui/card'
+import { Users, FileText, TrendingUp, DollarSign } from 'lucide-react'
+
+interface DashboardContentProps {
+  userEmail: string
+}
+
+const stats = [
+  {
+    title: 'Usuarios Totales',
+    value: '2,350',
+    description: '+180 este mes',
+    icon: Users,
+  },
+  {
+    title: 'Documentos',
+    value: '12,234',
+    description: '+1,234 esta semana',
+    icon: FileText,
+  },
+  {
+    title: 'Crecimiento',
+    value: '+23%',
+    description: 'vs mes anterior',
+    icon: TrendingUp,
+  },
+  {
+    title: 'Ingresos',
+    value: '$45,231',
+    description: '+20.1% este mes',
+    icon: DollarSign,
+  },
+]
+
+export function DashboardContent({ userEmail }: DashboardContentProps) {
+  return (
+    <PageTransition className="flex flex-1 flex-col gap-6 p-6">
+      <PageHeader>
+        <PageTitle>Dashboard</PageTitle>
+        <PageDescription>Bienvenido, {userEmail}</PageDescription>
+      </PageHeader>
+
+      <MotionDiv
+        variants={staggerContainer}
+        initial="hidden"
+        animate="visible"
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
+      >
+        {stats.map((stat) => (
+          <MotionDiv key={stat.title} variants={staggerItem}>
+            <Card className="h-full">
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-sm font-medium">
+                  {stat.title}
+                </CardTitle>
+                <stat.icon className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{stat.value}</div>
+                <CardDescription>{stat.description}</CardDescription>
+              </CardContent>
+            </Card>
+          </MotionDiv>
+        ))}
+      </MotionDiv>
+
+      <MotionDiv
+        variants={staggerContainer}
+        initial="hidden"
+        animate="visible"
+        className="grid grid-cols-1 lg:grid-cols-2 gap-4"
+      >
+        <MotionDiv variants={staggerItem}>
+          <Card className="h-[400px]">
+            <CardHeader>
+              <CardTitle>Actividad Reciente</CardTitle>
+              <CardDescription>
+                Últimas acciones en el sistema
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-center h-[280px] text-muted-foreground">
+                Gráfico de actividad
+              </div>
+            </CardContent>
+          </Card>
+        </MotionDiv>
+
+        <MotionDiv variants={staggerItem}>
+          <Card className="h-[400px]">
+            <CardHeader>
+              <CardTitle>Resumen</CardTitle>
+              <CardDescription>
+                Estadísticas generales del período
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-center h-[280px] text-muted-foreground">
+                Gráfico de resumen
+              </div>
+            </CardContent>
+          </Card>
+        </MotionDiv>
+      </MotionDiv>
+    </PageTransition>
+  )
+}

package/template/src/app/(auth)/dashboard/page.tsx

@@ -0,0 +1,9 @@
+import { createClient } from '@/lib/supabase/server'
+import { DashboardContent } from './dashboard-content'
+
+export default async function DashboardPage() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  return <DashboardContent userEmail={user?.email ?? ''} />
+}

package/template/src/app/(auth)/layout.tsx

@@ -0,0 +1,7 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <>{children}</>
+}

package/template/src/app/(auth)/users/page.tsx

@@ -0,0 +1,9 @@
+import { createClient } from '@/lib/supabase/server'
+import { UsersContent } from './users-content'
+
+export default async function UsersPage() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  return <UsersContent userEmail={user?.email ?? ''} />
+}

package/template/src/app/(auth)/users/users-content.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import {
+  PageTransition,
+  PageHeader,
+  PageTitle,
+  PageDescription,
+} from '@/components/ui/animations'
+import { UsersList } from '@/modules/users'
+
+interface UsersContentProps {
+  userEmail: string
+}
+
+export function UsersContent({ userEmail }: UsersContentProps) {
+  return (
+    <PageTransition className="flex flex-1 flex-col gap-6 p-6">
+      <PageHeader>
+        <PageTitle>Usuarios</PageTitle>
+        <PageDescription>Gestión de usuarios del sistema</PageDescription>
+      </PageHeader>
+
+      <UsersList />
+    </PageTransition>
+  )
+}

package/template/src/app/(public)/layout.tsx

@@ -0,0 +1,7 @@
+export default function PublicLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <>{children}</>
+}

package/template/src/app/(public)/login/page.tsx

@@ -0,0 +1,17 @@
+import { LoginForm } from '@/modules/auth/components/login-form'
+
+export default function LoginPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="w-full max-w-md space-y-8 px-4">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold">Iniciar sesión</h1>
+          <p className="mt-2 text-muted-foreground">
+            Ingresa tus credenciales para acceder
+          </p>
+        </div>
+        <LoginForm />
+      </div>
+    </div>
+  )
+}

package/template/src/app/api/webhooks/route.ts

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+
+    // Verificar firma del webhook aquí
+    // const signature = request.headers.get('x-webhook-signature')
+
+    console.log('Webhook received:', body)
+
+    return NextResponse.json({ received: true })
+  } catch (error) {
+    console.error('Webhook error:', error)
+    return NextResponse.json(
+      { error: 'Webhook processing failed' },
+      { status: 500 }
+    )
+  }
+}

package/template/src/app/layout.tsx

@@ -1,10 +1,10 @@
 import type { Metadata } from "next"
 import { Inter } from "next/font/google"
 import "./globals.css"
+import { Providers } from "./providers"
 import { SidebarProvider } from "@/components/layout/sidebar-context"
-import { Sidebar } from "@/components/layout/midday-sidebar"
+import { Sidebar } from "@/components/layout/sidebar"
 import { MainContent } from "@/components/layout/main-content"
-import { Toaster } from "@/components/ui/sonner"
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -19,17 +19,18 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="es" className="dark" suppressHydrationWarning>
+    <html lang="es" suppressHydrationWarning>
       <body className={`${inter.className} font-sans antialiased`}>
-        <SidebarProvider>
-          <div className="min-h-screen bg-background flex">
-            <Sidebar />
-            <MainContent>
-              {children}
-            </MainContent>
-          </div>
-        </SidebarProvider>
-        <Toaster />
+        <Providers>
+          <SidebarProvider>
+            <div className="min-h-screen bg-background flex">
+              <Sidebar />
+              <MainContent>
+                {children}
+              </MainContent>
+            </div>
+          </SidebarProvider>
+        </Providers>
       </body>
     </html>
   )