@underpeaks/generator-nextjs 1.0.19

package/dist/templates/page-remaining.js

@@ -0,0 +1,870 @@
+"use strict";
+// File: underpeaks_codegen/packages/generator-nextjs/src/templates/page-remaining.ts
+// Covers: dashboard, profile, blog-post, contact, cart, checkout, wallet,
+//         invoice, chat, messages, feed, map, search, settings, gallery,
+//         kanban, calendar, otp_request, otp_entry, custom
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateRemainingNextjsPage = generateRemainingNextjsPage;
+const generator_core_1 = require("@underpeaks/generator-core");
+function generateRemainingNextjsPage(page, model) {
+    const routePath = page.slug.replace(/^\//, '');
+    const className = model ? (0, generator_core_1.modelToClassName)(model.name) : 'Item';
+    const fileName = model ? (0, generator_core_1.modelToFileName)(model.name) : 'item';
+    const pk = model ? (0, generator_core_1.getPrimaryKey)(model) : null;
+    const pkName = pk?.name ?? 'id';
+    const columns = model ? (0, generator_core_1.getVisibleColumns)(model) : [];
+    const lines = [];
+    lines.push(`// GENERATED BY UNDERPEAKS CODEGEN v1.0.0`);
+    lines.push(`// Page: ${page.name} — ${page.template_type}`);
+    lines.push(`// Presentation layer — generated once, you own this file.`);
+    lines.push(`// Regenerate: nxf generate nextjs --include-views`);
+    lines.push(``);
+    switch (page.template_type) {
+        case 'dashboard':
+            lines.push(`import type { ${className} } from '../../../generated/types/${fileName}.types'`);
+            lines.push(``);
+            lines.push(`async function getItems(): Promise<${className}[]> {`);
+            lines.push(`  const res = await fetch(\`\${process.env.NEXT_PUBLIC_APP_URL}/api/${fileName}\`, { cache: 'no-store' })`);
+            lines.push(`  if (!res.ok) return []`);
+            lines.push(`  const json = await res.json()`);
+            lines.push(`  return json.data ?? []`);
+            lines.push(`}`);
+            lines.push(``);
+            lines.push(`export default async function DashboardPage() {`);
+            lines.push(`  const items = await getItems()`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-6">Dashboard</h1>`);
+            lines.push(`      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">`);
+            lines.push(`        <div className="bg-white border border-gray-200 rounded-xl p-6">`);
+            lines.push(`          <p className="text-sm text-gray-500">Total ${className}s</p>`);
+            lines.push(`          <p className="text-3xl font-bold mt-1">{items.length}</p>`);
+            lines.push(`        </div>`);
+            lines.push(`      </div>`);
+            lines.push(`      <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">`);
+            lines.push(`        <div className="px-6 py-4 border-b border-gray-100">`);
+            lines.push(`          <h2 className="font-semibold">Recent ${className}s</h2>`);
+            lines.push(`        </div>`);
+            lines.push(`        <div className="divide-y divide-gray-100">`);
+            lines.push(`          {items.slice(0, 5).map((item) => (`);
+            lines.push(`            <div key={item.${pkName}} className="px-6 py-4">`);
+            if (columns[0])
+                lines.push(`              <p className="font-medium">{item.${columns[0].name}?.toString() ?? '—'}</p>`);
+            if (columns[1])
+                lines.push(`              <p className="text-sm text-gray-500">{item.${columns[1].name}?.toString() ?? ''}</p>`);
+            lines.push(`            </div>`);
+            lines.push(`          ))}`);
+            lines.push(`        </div>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        case 'profile':
+            lines.push(`import type { ${className} } from '../../../../generated/types/${fileName}.types'`);
+            lines.push(`import { notFound } from 'next/navigation'`);
+            lines.push(`import Link         from 'next/link'`);
+            lines.push(``);
+            lines.push(`async function getItem(id: string): Promise<${className} | null> {`);
+            lines.push(`  const res = await fetch(\`\${process.env.NEXT_PUBLIC_APP_URL}/api/${fileName}/\${id}\`, { cache: 'no-store' })`);
+            lines.push(`  if (res.status === 404) return null`);
+            lines.push(`  const json = await res.json()`);
+            lines.push(`  return json.data`);
+            lines.push(`}`);
+            lines.push(``);
+            lines.push(`interface Props { params: Promise<{ ${pkName}: string }> }`);
+            lines.push(``);
+            lines.push(`export default async function ProfilePage({ params }: Props) {`);
+            lines.push(`  const { ${pkName} } = await params`);
+            lines.push(`  const item = await getItem(${pkName})`);
+            lines.push(`  if (!item) notFound()`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8 max-w-2xl">`);
+            lines.push(`      <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">`);
+            lines.push(`        <div className="h-32 bg-gray-100" />`);
+            lines.push(`        <div className="px-6 pb-6">`);
+            lines.push(`          <div className="-mt-12 mb-4">`);
+            lines.push(`            <div className="w-24 h-24 rounded-full bg-gray-200 border-4 border-white flex items-center justify-center text-3xl">👤</div>`);
+            lines.push(`          </div>`);
+            for (const col of columns) {
+                const label = col.name.replaceAll('_', ' ');
+                lines.push(`          <div className="flex items-center justify-between py-3 border-b border-gray-100">`);
+                lines.push(`            <span className="text-sm text-gray-500 capitalize">${label}</span>`);
+                lines.push(`            <span className="text-sm font-medium">{item.${col.name}?.toString() ?? '—'}</span>`);
+                lines.push(`          </div>`);
+            }
+            lines.push(`          <div className="mt-4">`);
+            lines.push(`            <Link href={\`/${routePath}/\${item.${pkName}}/edit\`}`);
+            lines.push(`              className="px-4 py-2 border border-gray-200 rounded-lg text-sm font-medium hover:bg-gray-50 transition">`);
+            lines.push(`              Edit Profile`);
+            lines.push(`            </Link>`);
+            lines.push(`          </div>`);
+            lines.push(`        </div>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        case 'blog-post': {
+            const titleField = columns.find((c) => c.name.includes('title'))?.name ?? columns[0]?.name ?? pkName;
+            const bodyField = columns.find((c) => c.name.includes('body') || c.name.includes('content'))?.name ?? null;
+            const imageField = columns.find((c) => c.name.includes('image') || c.name.includes('cover'))?.name ?? null;
+            const authorField = columns.find((c) => c.name.includes('author'))?.name ?? null;
+            lines.push(`import type { ${className} } from '../../../../generated/types/${fileName}.types'`);
+            lines.push(`import { notFound } from 'next/navigation'`);
+            lines.push(`import Image        from 'next/image'`);
+            lines.push(``);
+            lines.push(`async function getItem(id: string): Promise<${className} | null> {`);
+            lines.push(`  const res = await fetch(\`\${process.env.NEXT_PUBLIC_APP_URL}/api/${fileName}/\${id}\`, { cache: 'no-store' })`);
+            lines.push(`  if (res.status === 404) return null`);
+            lines.push(`  const json = await res.json()`);
+            lines.push(`  return json.data`);
+            lines.push(`}`);
+            lines.push(``);
+            lines.push(`interface Props { params: Promise<{ ${pkName}: string }> }`);
+            lines.push(``);
+            lines.push(`export default async function BlogPostPage({ params }: Props) {`);
+            lines.push(`  const { ${pkName} } = await params`);
+            lines.push(`  const item = await getItem(${pkName})`);
+            lines.push(`  if (!item) notFound()`);
+            lines.push(`  return (`);
+            lines.push(`    <article className="container mx-auto px-4 py-8 max-w-2xl">`);
+            if (imageField) {
+                lines.push(`      {item.${imageField} && (`);
+                lines.push(`        <div className="relative w-full h-64 rounded-xl overflow-hidden mb-8">`);
+                lines.push(`          <Image src={item.${imageField} as string} alt="" fill className="object-cover" />`);
+                lines.push(`        </div>`);
+                lines.push(`      )}`);
+            }
+            lines.push(`      <h1 className="text-3xl font-bold text-gray-900 mb-4">{item.${titleField}?.toString()}</h1>`);
+            if (authorField)
+                lines.push(`      <p className="text-sm text-gray-500 mb-8">By {item.${authorField}?.toString()}</p>`);
+            if (bodyField)
+                lines.push(`      <div className="prose max-w-none"><p className="text-gray-700 leading-relaxed">{item.${bodyField}?.toString()}</p></div>`);
+            lines.push(`    </article>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        }
+        case 'contact':
+            lines.push(`'use client'`);
+            lines.push(`import { useState } from 'react'`);
+            lines.push(``);
+            lines.push(`export default function ContactPage() {`);
+            lines.push(`  const [name,    setName]    = useState('')`);
+            lines.push(`  const [email,   setEmail]   = useState('')`);
+            lines.push(`  const [message, setMessage] = useState('')`);
+            lines.push(`  const [loading, setLoading] = useState(false)`);
+            lines.push(`  const [sent,    setSent]    = useState(false)`);
+            lines.push(`  const [error,   setError]   = useState<string | null>(null)`);
+            lines.push(``);
+            lines.push(`  async function handleSubmit(e: React.FormEvent) {`);
+            lines.push(`    e.preventDefault()`);
+            lines.push(`    setLoading(true)`);
+            lines.push(`    setError(null)`);
+            lines.push(`    try {`);
+            lines.push(`      const res = await fetch('/api/contact', {`);
+            lines.push(`        method:  'POST',`);
+            lines.push(`        headers: { 'Content-Type': 'application/json' },`);
+            lines.push(`        body:    JSON.stringify({ name, email, message }),`);
+            lines.push(`      })`);
+            lines.push(`      if (!res.ok) throw new Error('Failed to send message')`);
+            lines.push(`      setSent(true)`);
+            lines.push(`    } catch (err: any) {`);
+            lines.push(`      setError(err.message)`);
+            lines.push(`    } finally {`);
+            lines.push(`      setLoading(false)`);
+            lines.push(`    }`);
+            lines.push(`  }`);
+            lines.push(``);
+            lines.push(`  if (sent) return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-16 text-center max-w-lg">`);
+            lines.push(`      <div className="text-5xl mb-4">✅</div>`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-2">Message sent!</h1>`);
+            lines.push(`      <p className="text-gray-500">We&apos;ll get back to you as soon as possible.</p>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(``);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8 max-w-xl">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-2">Contact Us</h1>`);
+            lines.push(`      <p className="text-gray-500 mb-8 text-sm">Fill in the form and we&apos;ll get back to you.</p>`);
+            lines.push(`      <form onSubmit={handleSubmit} className="bg-white border border-gray-200 rounded-xl p-6 flex flex-col gap-4">`);
+            lines.push(`        <div className="flex flex-col gap-1">`);
+            lines.push(`          <label className="text-sm font-medium text-gray-700">Full Name</label>`);
+            lines.push(`          <input type="text" value={name} onChange={(e) => setName(e.target.value)} required`);
+            lines.push(`            className="px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-black" />`);
+            lines.push(`        </div>`);
+            lines.push(`        <div className="flex flex-col gap-1">`);
+            lines.push(`          <label className="text-sm font-medium text-gray-700">Email</label>`);
+            lines.push(`          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required`);
+            lines.push(`            className="px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-black" />`);
+            lines.push(`        </div>`);
+            lines.push(`        <div className="flex flex-col gap-1">`);
+            lines.push(`          <label className="text-sm font-medium text-gray-700">Message</label>`);
+            lines.push(`          <textarea value={message} onChange={(e) => setMessage(e.target.value)} required rows={5}`);
+            lines.push(`            className="px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-black resize-none" />`);
+            lines.push(`        </div>`);
+            lines.push(`        {error && <p className="text-sm text-red-500">{error}</p>}`);
+            lines.push(`        <button type="submit" disabled={loading}`);
+            lines.push(`          className="py-2.5 bg-black text-white rounded-lg text-sm font-medium hover:bg-gray-800 disabled:opacity-40 transition">`);
+            lines.push(`          {loading ? 'Sending...' : 'Send Message'}`);
+            lines.push(`        </button>`);
+            lines.push(`      </form>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        case 'cart':
+            lines.push(`'use client'`);
+            lines.push(`import Link from 'next/link'`);
+            lines.push(``);
+            lines.push(`export default function CartPage() {`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8 max-w-2xl">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-6">Cart</h1>`);
+            lines.push(`      <div className="bg-white border border-gray-200 rounded-xl p-8 text-center">`);
+            lines.push(`        <div className="text-5xl mb-4">🛒</div>`);
+            lines.push(`        <p className="text-gray-500 mb-6">Your cart is empty</p>`);
+            lines.push(`        <Link href="/products"`);
+            lines.push(`          className="px-6 py-2.5 bg-black text-white rounded-lg text-sm font-medium hover:bg-gray-800 transition">`);
+            lines.push(`          Continue Shopping`);
+            lines.push(`        </Link>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        case 'checkout':
+            lines.push(`'use client'`);
+            lines.push(`import { useState }  from 'react'`);
+            lines.push(`import { useRouter } from 'next/navigation'`);
+            lines.push(``);
+            lines.push(`export default function CheckoutPage() {`);
+            lines.push(`  const router          = useRouter()`);
+            lines.push(`  const [step, setStep] = useState(0)`);
+            lines.push(`  const steps           = ['Contact', 'Shipping', 'Payment']`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8 max-w-2xl">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-6">Checkout</h1>`);
+            lines.push(`      <div className="flex gap-2 mb-8">`);
+            lines.push(`        {steps.map((s, i) => (`);
+            lines.push(`          <div key={s} className="flex items-center gap-2">`);
+            lines.push(`            <div className={\`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium \${i <= step ? 'bg-black text-white' : 'bg-gray-100 text-gray-400'}\`}>{i + 1}</div>`);
+            lines.push(`            <span className="text-sm text-gray-600">{s}</span>`);
+            lines.push(`            {i < steps.length - 1 && <div className="w-8 h-px bg-gray-200" />}`);
+            lines.push(`          </div>`);
+            lines.push(`        ))}`);
+            lines.push(`      </div>`);
+            lines.push(`      <div className="bg-white border border-gray-200 rounded-xl p-6">`);
+            lines.push(`        <p className="text-gray-500 text-sm">Step {step + 1}: {steps[step]}</p>`);
+            lines.push(`        <div className="mt-4 flex gap-3">`);
+            lines.push(`          {step > 0 && (`);
+            lines.push(`            <button onClick={() => setStep((s) => s - 1)}`);
+            lines.push(`              className="flex-1 py-2.5 border border-gray-200 rounded-lg text-sm font-medium hover:bg-gray-50 transition">`);
+            lines.push(`              Back`);
+            lines.push(`            </button>`);
+            lines.push(`          )}`);
+            lines.push(`          <button onClick={() => step < 2 ? setStep((s) => s + 1) : router.push('/orders')}`);
+            lines.push(`            className="flex-1 py-2.5 bg-black text-white rounded-lg text-sm font-medium hover:bg-gray-800 transition">`);
+            lines.push(`            {step === 2 ? 'Place Order' : 'Continue'}`);
+            lines.push(`          </button>`);
+            lines.push(`        </div>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        case 'wallet':
+            lines.push(`export default function WalletPage() {`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8 max-w-lg">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-6">Wallet</h1>`);
+            lines.push(`      <div className="bg-black text-white rounded-2xl p-8 mb-6">`);
+            lines.push(`        <p className="text-sm text-gray-300">Available Balance</p>`);
+            lines.push(`        <p className="text-4xl font-bold mt-1">$0.00</p>`);
+            lines.push(`        <div className="flex gap-4 mt-6">`);
+            lines.push(`          {['Add', 'Send', 'History'].map((action) => (`);
+            lines.push(`            <button key={action} className="flex flex-col items-center gap-1">`);
+            lines.push(`              <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">`);
+            lines.push(`                {action === 'Add' ? '+' : action === 'Send' ? '↑' : '≡'}`);
+            lines.push(`              </div>`);
+            lines.push(`              <span className="text-xs text-gray-300">{action}</span>`);
+            lines.push(`            </button>`);
+            lines.push(`          ))}`);
+            lines.push(`        </div>`);
+            lines.push(`      </div>`);
+            lines.push(`      <div className="bg-white border border-gray-200 rounded-xl p-6">`);
+            lines.push(`        <h2 className="font-semibold mb-4">Recent Transactions</h2>`);
+            lines.push(`        <p className="text-sm text-gray-400 text-center py-8">No transactions yet.</p>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        case 'invoice': {
+            const totalField = columns.find((c) => c.name.includes('total') || c.name.includes('amount'))?.name ?? null;
+            lines.push(`import type { ${className} } from '../../../../generated/types/${fileName}.types'`);
+            lines.push(`import { notFound } from 'next/navigation'`);
+            lines.push(``);
+            lines.push(`async function getItem(id: string): Promise<${className} | null> {`);
+            lines.push(`  const res = await fetch(\`\${process.env.NEXT_PUBLIC_APP_URL}/api/${fileName}/\${id}\`, { cache: 'no-store' })`);
+            lines.push(`  if (res.status === 404) return null`);
+            lines.push(`  const json = await res.json()`);
+            lines.push(`  return json.data`);
+            lines.push(`}`);
+            lines.push(``);
+            lines.push(`interface Props { params: Promise<{ ${pkName}: string }> }`);
+            lines.push(``);
+            lines.push(`export default async function InvoicePage({ params }: Props) {`);
+            lines.push(`  const { ${pkName} } = await params`);
+            lines.push(`  const item = await getItem(${pkName})`);
+            lines.push(`  if (!item) notFound()`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8 max-w-2xl">`);
+            lines.push(`      <div className="bg-white border border-gray-200 rounded-xl p-8">`);
+            lines.push(`        <div className="flex justify-between items-start mb-8">`);
+            lines.push(`          <div>`);
+            lines.push(`            <h1 className="text-2xl font-bold">INVOICE</h1>`);
+            lines.push(`            <p className="text-sm text-gray-500 mt-1">#{item.${pkName}}</p>`);
+            lines.push(`          </div>`);
+            lines.push(`        </div>`);
+            lines.push(`        <div className="border-t border-gray-100 pt-6 flex flex-col gap-3">`);
+            for (const col of columns) {
+                const label = col.name.replaceAll('_', ' ');
+                lines.push(`          <div className="flex justify-between text-sm">`);
+                lines.push(`            <span className="text-gray-500 capitalize">${label}</span>`);
+                lines.push(`            <span className="font-medium">{item.${col.name}?.toString() ?? '—'}</span>`);
+                lines.push(`          </div>`);
+            }
+            lines.push(`        </div>`);
+            if (totalField) {
+                lines.push(`        <div className="border-t border-gray-200 mt-6 pt-4 flex justify-between">`);
+                lines.push(`          <span className="font-bold text-lg">Total</span>`);
+                lines.push(`          <span className="font-bold text-lg">{item.${totalField}?.toString() ?? '—'}</span>`);
+                lines.push(`        </div>`);
+            }
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        }
+        case 'chat':
+            lines.push(`'use client'`);
+            lines.push(`import { useState, useRef, useEffect } from 'react'`);
+            lines.push(``);
+            lines.push(`export default function ChatPage() {`);
+            lines.push(`  const [messages, setMessages] = useState<{ text: string; isMe: boolean }[]>([])`);
+            lines.push(`  const [input,    setInput]    = useState('')`);
+            lines.push(`  const bottomRef              = useRef<HTMLDivElement>(null)`);
+            lines.push(``);
+            lines.push(`  useEffect(() => {`);
+            lines.push(`    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })`);
+            lines.push(`  }, [messages])`);
+            lines.push(``);
+            lines.push(`  function send() {`);
+            lines.push(`    if (!input.trim()) return`);
+            lines.push(`    setMessages((prev) => [...prev, { text: input.trim(), isMe: true }])`);
+            lines.push(`    setInput('')`);
+            lines.push(`  }`);
+            lines.push(``);
+            lines.push(`  return (`);
+            lines.push(`    <div className="flex flex-col h-[calc(100vh-4rem)]">`);
+            lines.push(`      <div className="flex-1 overflow-y-auto p-4 flex flex-col gap-3">`);
+            lines.push(`        {messages.length === 0 && (`);
+            lines.push(`          <p className="text-center text-gray-400 text-sm mt-8">No messages yet. Say hello!</p>`);
+            lines.push(`        )}`);
+            lines.push(`        {messages.map((msg, i) => (`);
+            lines.push(`          <div key={i} className={\`flex \${msg.isMe ? 'justify-end' : 'justify-start'}\`}>`);
+            lines.push(`            <div className={\`max-w-xs px-4 py-2 rounded-2xl text-sm \${msg.isMe ? 'bg-black text-white' : 'bg-gray-100 text-gray-900'}\`}>`);
+            lines.push(`              {msg.text}`);
+            lines.push(`            </div>`);
+            lines.push(`          </div>`);
+            lines.push(`        ))}`);
+            lines.push(`        <div ref={bottomRef} />`);
+            lines.push(`      </div>`);
+            lines.push(`      <div className="border-t border-gray-200 p-4 flex gap-2">`);
+            lines.push(`        <input value={input} onChange={(e) => setInput(e.target.value)}`);
+            lines.push(`          onKeyDown={(e) => e.key === 'Enter' && send()}`);
+            lines.push(`          placeholder="Type a message..."`);
+            lines.push(`          className="flex-1 px-4 py-2 border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-black" />`);
+            lines.push(`        <button onClick={send}`);
+            lines.push(`          className="w-10 h-10 rounded-full bg-black text-white flex items-center justify-center hover:bg-gray-800 transition">`);
+            lines.push(`          ↑`);
+            lines.push(`        </button>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        case 'messages':
+            lines.push(`export default function MessagesPage() {`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8 max-w-2xl">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-6">Messages</h1>`);
+            lines.push(`      <div className="bg-white border border-gray-200 rounded-xl p-8 text-center">`);
+            lines.push(`        <div className="text-5xl mb-4">💬</div>`);
+            lines.push(`        <p className="text-gray-500">No messages yet</p>`);
+            lines.push(`        <p className="text-sm text-gray-400 mt-1">Start a conversation to see messages here.</p>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        case 'feed': {
+            const bodyField = columns.find((c) => c.name.includes('body') || c.name.includes('content'))?.name ?? columns[0]?.name ?? pkName;
+            const nameField = columns.find((c) => c.name.includes('name') || c.name.includes('author'))?.name ?? null;
+            const modelSlug = model ? model.name.replace('nxf_', '').replace(/_/g, '-') : fileName;
+            lines.push(`import type { ${className} } from '../../../generated/types/${fileName}.types'`);
+            lines.push(`import Link from 'next/link'`);
+            lines.push(``);
+            lines.push(`async function getItems(): Promise<${className}[]> {`);
+            lines.push(`  const res = await fetch(\`\${process.env.NEXT_PUBLIC_APP_URL}/api/${modelSlug}\`, { cache: 'no-store' })`);
+            lines.push(`  if (!res.ok) return []`);
+            lines.push(`  const json = await res.json()`);
+            lines.push(`  return json.data ?? []`);
+            lines.push(`}`);
+            lines.push(``);
+            lines.push(`export default async function FeedPage() {`);
+            lines.push(`  const items = await getItems()`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8 max-w-xl">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-6">${page.name}</h1>`);
+            lines.push(`      <div className="flex flex-col gap-4">`);
+            lines.push(`        {items.length === 0 && <p className="text-center text-gray-400 py-16">No posts yet.</p>}`);
+            lines.push(`        {items.map((item) => (`);
+            lines.push(`          <div key={item.${pkName}} className="bg-white border border-gray-200 rounded-xl p-5">`);
+            lines.push(`            <div className="flex items-center gap-3 mb-3">`);
+            lines.push(`              <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-sm">👤</div>`);
+            if (nameField) {
+                lines.push(`              <span className="text-sm font-medium">{item.${nameField}?.toString() ?? 'User'}</span>`);
+            }
+            else {
+                lines.push(`              <span className="text-sm font-medium">User</span>`);
+            }
+            lines.push(`            </div>`);
+            lines.push(`            <p className="text-sm text-gray-700 mb-3">{item.${bodyField}?.toString() ?? ''}</p>`);
+            lines.push(`            <div className="flex gap-4 text-xs text-gray-400">`);
+            lines.push(`              <button className="hover:text-gray-600">👍 Like</button>`);
+            lines.push(`              <button className="hover:text-gray-600">💬 Comment</button>`);
+            lines.push(`              <button className="hover:text-gray-600">↗ Share</button>`);
+            lines.push(`            </div>`);
+            lines.push(`          </div>`);
+            lines.push(`        ))}`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        }
+        case 'map':
+            lines.push(`export default function MapPage() {`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-6">Map</h1>`);
+            lines.push(`      <div className="bg-gray-100 rounded-xl h-96 flex items-center justify-center">`);
+            lines.push(`        <div className="text-center text-gray-400">`);
+            lines.push(`          <div className="text-5xl mb-3">🗺️</div>`);
+            lines.push(`          <p className="font-medium">Map placeholder</p>`);
+            lines.push(`          <p className="text-sm mt-1">Add @react-google-maps/api or mapbox-gl to implement.</p>`);
+            lines.push(`        </div>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        case 'search': {
+            const titleField = columns.find((c) => c.name.includes('name') || c.name.includes('title'))?.name ?? columns[0]?.name ?? pkName;
+            const modelSlug = model ? model.name.replace('nxf_', '').replace(/_/g, '-') : fileName;
+            lines.push(`'use client'`);
+            lines.push(`import { useState } from 'react'`);
+            lines.push(`import Link         from 'next/link'`);
+            lines.push(`import type { ${className} } from '../../../generated/types/${fileName}.types'`);
+            lines.push(``);
+            lines.push(`export default function SearchPage() {`);
+            lines.push(`  const [query,   setQuery]   = useState('')`);
+            lines.push(`  const [results, setResults] = useState<${className}[]>([])`);
+            lines.push(`  const [loading, setLoading] = useState(false)`);
+            lines.push(``);
+            lines.push(`  async function search(q: string) {`);
+            lines.push(`    setQuery(q)`);
+            lines.push(`    if (!q.trim()) { setResults([]); return }`);
+            lines.push(`    setLoading(true)`);
+            lines.push(`    try {`);
+            lines.push(`      const res = await fetch(\`/api/${modelSlug}?search=\${encodeURIComponent(q)}\`)`);
+            lines.push(`      const json = await res.json()`);
+            lines.push(`      setResults(json.data ?? [])`);
+            lines.push(`    } finally {`);
+            lines.push(`      setLoading(false)`);
+            lines.push(`    }`);
+            lines.push(`  }`);
+            lines.push(``);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8 max-w-2xl">`);
+            lines.push(`      <div className="flex items-center gap-3 bg-white border border-gray-200 rounded-xl px-4 py-3 mb-6">`);
+            lines.push(`        <span className="text-gray-400">🔍</span>`);
+            lines.push(`        <input value={query} onChange={(e) => search(e.target.value)} placeholder="Search..."`);
+            lines.push(`          className="flex-1 text-sm focus:outline-none" autoFocus />`);
+            lines.push(`        {query && <button onClick={() => { setQuery(''); setResults([]) }} className="text-gray-400 hover:text-gray-600">✕</button>}`);
+            lines.push(`      </div>`);
+            lines.push(`      {loading && <p className="text-center text-gray-400 text-sm">Searching...</p>}`);
+            lines.push(`      {!loading && query && results.length === 0 && (`);
+            lines.push(`        <p className="text-center text-gray-400 text-sm">No results for &quot;{query}&quot;</p>`);
+            lines.push(`      )}`);
+            lines.push(`      <div className="flex flex-col gap-2">`);
+            lines.push(`        {results.map((item) => (`);
+            lines.push(`          <Link key={item.${pkName}} href={\`/${routePath}/\${item.${pkName}}\`}`);
+            lines.push(`            className="flex items-center justify-between px-4 py-3 bg-white border border-gray-200 rounded-xl hover:border-gray-400 transition">`);
+            lines.push(`            <span className="text-sm font-medium">{item.${titleField}?.toString() ?? '—'}</span>`);
+            lines.push(`            <span className="text-gray-400">›</span>`);
+            lines.push(`          </Link>`);
+            lines.push(`        ))}`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        }
+        case 'settings':
+            lines.push(`'use client'`);
+            lines.push(`import { useState } from 'react'`);
+            lines.push(``);
+            lines.push(`export default function SettingsPage() {`);
+            lines.push(`  const [notifications, setNotifications] = useState(true)`);
+            lines.push(`  const [darkMode,      setDarkMode]      = useState(false)`);
+            lines.push(``);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8 max-w-2xl">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-6">Settings</h1>`);
+            lines.push(`      <div className="flex flex-col gap-4">`);
+            lines.push(``);
+            lines.push(`        <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">`);
+            lines.push(`          <div className="px-6 py-3 bg-gray-50 border-b border-gray-100">`);
+            lines.push(`            <p className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Account</p>`);
+            lines.push(`          </div>`);
+            lines.push(`          <div className="divide-y divide-gray-100">`);
+            lines.push(`            <div className="flex items-center justify-between px-6 py-4 hover:bg-gray-50 cursor-pointer">`);
+            lines.push(`              <span className="text-sm">Profile</span>`);
+            lines.push(`              <span className="text-gray-400">›</span>`);
+            lines.push(`            </div>`);
+            lines.push(`            <div className="flex items-center justify-between px-6 py-4 hover:bg-gray-50 cursor-pointer">`);
+            lines.push(`              <span className="text-sm">Change Password</span>`);
+            lines.push(`              <span className="text-gray-400">›</span>`);
+            lines.push(`            </div>`);
+            lines.push(`          </div>`);
+            lines.push(`        </div>`);
+            lines.push(``);
+            lines.push(`        <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">`);
+            lines.push(`          <div className="px-6 py-3 bg-gray-50 border-b border-gray-100">`);
+            lines.push(`            <p className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Preferences</p>`);
+            lines.push(`          </div>`);
+            lines.push(`          <div className="divide-y divide-gray-100">`);
+            lines.push(`            <div className="flex items-center justify-between px-6 py-4">`);
+            lines.push(`              <span className="text-sm">Notifications</span>`);
+            lines.push(`              <button onClick={() => setNotifications((v) => !v)}`);
+            lines.push(`                className={\`w-10 h-6 rounded-full transition-colors \${notifications ? 'bg-black' : 'bg-gray-200'}\`}>`);
+            lines.push(`                <span className={\`block w-4 h-4 bg-white rounded-full shadow transition-transform mx-1 \${notifications ? 'translate-x-4' : 'translate-x-0'}\`} />`);
+            lines.push(`              </button>`);
+            lines.push(`            </div>`);
+            lines.push(`            <div className="flex items-center justify-between px-6 py-4">`);
+            lines.push(`              <span className="text-sm">Dark Mode</span>`);
+            lines.push(`              <button onClick={() => setDarkMode((v) => !v)}`);
+            lines.push(`                className={\`w-10 h-6 rounded-full transition-colors \${darkMode ? 'bg-black' : 'bg-gray-200'}\`}>`);
+            lines.push(`                <span className={\`block w-4 h-4 bg-white rounded-full shadow transition-transform mx-1 \${darkMode ? 'translate-x-4' : 'translate-x-0'}\`} />`);
+            lines.push(`              </button>`);
+            lines.push(`            </div>`);
+            lines.push(`          </div>`);
+            lines.push(`        </div>`);
+            lines.push(``);
+            lines.push(`        <button className="w-full py-3 border border-red-200 text-red-500 rounded-xl text-sm font-medium hover:bg-red-50 transition">`);
+            lines.push(`          Sign Out`);
+            lines.push(`        </button>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        case 'gallery': {
+            const imageField = columns.find((c) => c.name.includes('image') || c.name.includes('photo') || c.name.includes('url'))?.name ?? columns[0]?.name ?? pkName;
+            const titleField = columns.find((c) => c.name.includes('title') || c.name.includes('name'))?.name ?? columns[0]?.name ?? pkName;
+            const modelSlug = model ? model.name.replace('nxf_', '').replace(/_/g, '-') : fileName;
+            lines.push(`import type { ${className} } from '../../../generated/types/${fileName}.types'`);
+            lines.push(`import Image from 'next/image'`);
+            lines.push(`import Link  from 'next/link'`);
+            lines.push(``);
+            lines.push(`async function getItems(): Promise<${className}[]> {`);
+            lines.push(`  const res = await fetch(\`\${process.env.NEXT_PUBLIC_APP_URL}/api/${modelSlug}\`, { cache: 'no-store' })`);
+            lines.push(`  if (!res.ok) return []`);
+            lines.push(`  const json = await res.json()`);
+            lines.push(`  return json.data ?? []`);
+            lines.push(`}`);
+            lines.push(``);
+            lines.push(`export default async function GalleryPage() {`);
+            lines.push(`  const items = await getItems()`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-6">${page.name}</h1>`);
+            lines.push(`      {items.length === 0 ? (`);
+            lines.push(`        <div className="text-center py-16 text-gray-400">No items yet.</div>`);
+            lines.push(`      ) : (`);
+            lines.push(`        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">`);
+            lines.push(`          {items.map((item) => (`);
+            lines.push(`            <Link key={item.${pkName}} href={\`/${routePath}/\${item.${pkName}}\`}`);
+            lines.push(`              className="group relative aspect-square bg-gray-100 rounded-xl overflow-hidden">`);
+            lines.push(`              {item.${imageField} ? (`);
+            lines.push(`                <Image src={item.${imageField} as string} alt={item.${titleField}?.toString() ?? ''} fill className="object-cover group-hover:scale-105 transition-transform duration-300" />`);
+            lines.push(`              ) : (`);
+            lines.push(`                <div className="w-full h-full flex items-center justify-center text-gray-300 text-3xl">🖼</div>`);
+            lines.push(`              )}`);
+            lines.push(`              <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300" />`);
+            lines.push(`              <div className="absolute bottom-0 left-0 right-0 p-3 translate-y-full group-hover:translate-y-0 transition-transform duration-300">`);
+            lines.push(`                <p className="text-white text-xs font-medium truncate">{item.${titleField}?.toString() ?? ''}</p>`);
+            lines.push(`              </div>`);
+            lines.push(`            </Link>`);
+            lines.push(`          ))}`);
+            lines.push(`        </div>`);
+            lines.push(`      )}`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        }
+        case 'kanban': {
+            const titleField = columns.find((c) => c.name.includes('title') || c.name.includes('name'))?.name ?? columns[0]?.name ?? pkName;
+            const statusField = columns.find((c) => c.name.includes('status') || c.name.includes('stage'))?.name ?? null;
+            const modelSlug = model ? model.name.replace('nxf_', '').replace(/_/g, '-') : fileName;
+            lines.push(`import type { ${className} } from '../../../generated/types/${fileName}.types'`);
+            lines.push(``);
+            lines.push(`const COLUMNS = ['To Do', 'In Progress', 'Done']`);
+            lines.push(``);
+            lines.push(`async function getItems(): Promise<${className}[]> {`);
+            lines.push(`  const res = await fetch(\`\${process.env.NEXT_PUBLIC_APP_URL}/api/${modelSlug}\`, { cache: 'no-store' })`);
+            lines.push(`  if (!res.ok) return []`);
+            lines.push(`  const json = await res.json()`);
+            lines.push(`  return json.data ?? []`);
+            lines.push(`}`);
+            lines.push(``);
+            lines.push(`export default async function KanbanPage() {`);
+            lines.push(`  const items = await getItems()`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="p-6 overflow-x-auto">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-6">${page.name}</h1>`);
+            lines.push(`      <div className="flex gap-4 min-w-max">`);
+            lines.push(`        {COLUMNS.map((col) => {`);
+            lines.push(`          const colItems = items.filter((item) => {`);
+            if (statusField) {
+                lines.push(`            return (item.${statusField}?.toString() ?? 'To Do') === col`);
+            }
+            else {
+                lines.push(`            return col === 'To Do'`);
+            }
+            lines.push(`          })`);
+            lines.push(`          return (`);
+            lines.push(`            <div key={col} className="w-72 bg-gray-50 rounded-xl p-4 flex flex-col gap-3">`);
+            lines.push(`              <div className="flex items-center justify-between mb-2">`);
+            lines.push(`                <span className="text-sm font-semibold text-gray-700">{col}</span>`);
+            lines.push(`                <span className="text-xs bg-gray-200 text-gray-600 rounded-full px-2 py-0.5">{colItems.length}</span>`);
+            lines.push(`              </div>`);
+            lines.push(`              {colItems.map((item) => (`);
+            lines.push(`                <div key={item.${pkName}} className="bg-white border border-gray-200 rounded-lg p-3 shadow-sm">`);
+            lines.push(`                  <p className="text-sm font-medium text-gray-900">{item.${titleField}?.toString() ?? '—'}</p>`);
+            lines.push(`                </div>`);
+            lines.push(`              ))}`);
+            lines.push(`            </div>`);
+            lines.push(`          )`);
+            lines.push(`        })}`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        }
+        case 'calendar': {
+            const titleField = columns.find((c) => c.name.includes('title') || c.name.includes('name'))?.name ?? columns[0]?.name ?? pkName;
+            const dateField = columns.find((c) => c.name.includes('date') || c.name.includes('start'))?.name ?? null;
+            const modelSlug = model ? model.name.replace('nxf_', '').replace(/_/g, '-') : fileName;
+            lines.push(`import type { ${className} } from '../../../generated/types/${fileName}.types'`);
+            lines.push(``);
+            lines.push(`async function getItems(): Promise<${className}[]> {`);
+            lines.push(`  const res = await fetch(\`\${process.env.NEXT_PUBLIC_APP_URL}/api/${modelSlug}\`, { cache: 'no-store' })`);
+            lines.push(`  if (!res.ok) return []`);
+            lines.push(`  const json = await res.json()`);
+            lines.push(`  return json.data ?? []`);
+            lines.push(`}`);
+            lines.push(``);
+            lines.push(`export default async function CalendarPage() {`);
+            lines.push(`  const items = await getItems()`);
+            lines.push(`  const now   = new Date()`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-6">${page.name}</h1>`);
+            lines.push(`      <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">`);
+            lines.push(`        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">`);
+            lines.push(`          <h2 className="font-semibold">{now.toLocaleString('default', { month: 'long', year: 'numeric' })}</h2>`);
+            lines.push(`        </div>`);
+            lines.push(`        <div className="p-4 flex flex-col gap-2">`);
+            lines.push(`          {items.length === 0 ? (`);
+            lines.push(`            <p className="text-center text-gray-400 py-8">No events yet.</p>`);
+            lines.push(`          ) : (`);
+            lines.push(`            items.map((item) => (`);
+            lines.push(`              <div key={item.${pkName}} className="flex items-center gap-3 px-4 py-3 bg-gray-50 rounded-lg">`);
+            lines.push(`                <div className="w-2 h-2 rounded-full bg-black shrink-0" />`);
+            lines.push(`                <span className="text-sm font-medium">{item.${titleField}?.toString() ?? '—'}</span>`);
+            if (dateField) {
+                lines.push(`                <span className="text-xs text-gray-400 ml-auto">{item.${dateField}?.toString() ?? ''}</span>`);
+            }
+            lines.push(`              </div>`);
+            lines.push(`            ))`);
+            lines.push(`          )}`);
+            lines.push(`        </div>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        }
+        case 'otp_request':
+            lines.push(`'use client'`);
+            lines.push(`import { useState }  from 'react'`);
+            lines.push(`import { useRouter } from 'next/navigation'`);
+            lines.push(``);
+            lines.push(`export default function OtpRequestPage() {`);
+            lines.push(`  const router                    = useRouter()`);
+            lines.push(`  const [phone,   setPhone]       = useState('')`);
+            lines.push(`  const [loading, setLoading]     = useState(false)`);
+            lines.push(`  const [error,   setError]       = useState<string | null>(null)`);
+            lines.push(``);
+            lines.push(`  async function handleSubmit(e: React.FormEvent) {`);
+            lines.push(`    e.preventDefault()`);
+            lines.push(`    setLoading(true)`);
+            lines.push(`    setError(null)`);
+            lines.push(`    try {`);
+            lines.push(`      const res = await fetch('/api/auth/otp/request', {`);
+            lines.push(`        method:  'POST',`);
+            lines.push(`        headers: { 'Content-Type': 'application/json' },`);
+            lines.push(`        body:    JSON.stringify({ phone }),`);
+            lines.push(`      })`);
+            lines.push(`      if (!res.ok) throw new Error('Failed to send OTP')`);
+            lines.push(`      router.push(\`/otp-entry?phone=\${encodeURIComponent(phone)}\`)`);
+            lines.push(`    } catch (err: any) {`);
+            lines.push(`      setError(err.message)`);
+            lines.push(`    } finally {`);
+            lines.push(`      setLoading(false)`);
+            lines.push(`    }`);
+            lines.push(`  }`);
+            lines.push(``);
+            lines.push(`  return (`);
+            lines.push(`    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">`);
+            lines.push(`      <div className="w-full max-w-sm text-center">`);
+            lines.push(`        <div className="text-5xl mb-4">📱</div>`);
+            lines.push(`        <h1 className="text-2xl font-bold mb-2">Verify Phone</h1>`);
+            lines.push(`        <p className="text-gray-500 mb-8 text-sm">We will send you a one-time verification code.</p>`);
+            lines.push(`        <form onSubmit={handleSubmit} className="bg-white border border-gray-200 rounded-xl p-6 flex flex-col gap-4 text-left">`);
+            lines.push(`          <div className="flex flex-col gap-1">`);
+            lines.push(`            <label className="text-sm font-medium text-gray-700">Phone Number</label>`);
+            lines.push(`            <input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} required`);
+            lines.push(`              className="px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-black" />`);
+            lines.push(`          </div>`);
+            lines.push(`          {error && <p className="text-sm text-red-500">{error}</p>}`);
+            lines.push(`          <button type="submit" disabled={loading}`);
+            lines.push(`            className="py-2.5 bg-black text-white rounded-lg text-sm font-medium hover:bg-gray-800 disabled:opacity-40 transition">`);
+            lines.push(`            {loading ? 'Sending...' : 'Send OTP'}`);
+            lines.push(`          </button>`);
+            lines.push(`        </form>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        case 'otp_entry':
+            lines.push(`'use client'`);
+            lines.push(`import { useState, useRef }   from 'react'`);
+            lines.push(`import { useRouter,`);
+            lines.push(`         useSearchParams }     from 'next/navigation'`);
+            lines.push(``);
+            lines.push(`export default function OtpEntryPage() {`);
+            lines.push(`  const router                = useRouter()`);
+            lines.push(`  const searchParams          = useSearchParams()`);
+            lines.push(`  const phone                 = searchParams.get('phone') ?? ''`);
+            lines.push(`  const [otp,     setOtp]     = useState(Array(6).fill(''))`);
+            lines.push(`  const [loading, setLoading] = useState(false)`);
+            lines.push(`  const [error,   setError]   = useState<string | null>(null)`);
+            lines.push(`  const inputRefs             = Array.from({ length: 6 }, () => useRef<HTMLInputElement>(null))`);
+            lines.push(``);
+            lines.push(`  function handleChange(i: number, value: string) {`);
+            lines.push(`    if (!/^[0-9]?$/.test(value)) return`);
+            lines.push(`    const next = [...otp]`);
+            lines.push(`    next[i] = value`);
+            lines.push(`    setOtp(next)`);
+            lines.push(`    if (value && i < 5) inputRefs[i + 1].current?.focus()`);
+            lines.push(`    if (!value && i > 0) inputRefs[i - 1].current?.focus()`);
+            lines.push(`    if (next.every((d) => d !== '') && i === 5) verify(next.join(''))`);
+            lines.push(`  }`);
+            lines.push(``);
+            lines.push(`  async function verify(code: string) {`);
+            lines.push(`    setLoading(true)`);
+            lines.push(`    setError(null)`);
+            lines.push(`    try {`);
+            lines.push(`      const res = await fetch('/api/auth/otp/verify', {`);
+            lines.push(`        method:  'POST',`);
+            lines.push(`        headers: { 'Content-Type': 'application/json' },`);
+            lines.push(`        body:    JSON.stringify({ phone, otp: code }),`);
+            lines.push(`      })`);
+            lines.push(`      if (!res.ok) throw new Error('Invalid OTP')`);
+            lines.push(`      router.push('/')`);
+            lines.push(`    } catch (err: any) {`);
+            lines.push(`      setError(err.message)`);
+            lines.push(`      setOtp(Array(6).fill(''))`);
+            lines.push(`      inputRefs[0].current?.focus()`);
+            lines.push(`    } finally {`);
+            lines.push(`      setLoading(false)`);
+            lines.push(`    }`);
+            lines.push(`  }`);
+            lines.push(``);
+            lines.push(`  return (`);
+            lines.push(`    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">`);
+            lines.push(`      <div className="w-full max-w-sm text-center">`);
+            lines.push(`        <div className="text-5xl mb-4">🔒</div>`);
+            lines.push(`        <h1 className="text-2xl font-bold mb-2">Verification Code</h1>`);
+            lines.push(`        <p className="text-gray-500 mb-8 text-sm">Enter the 6-digit code sent to {phone}</p>`);
+            lines.push(`        <div className="flex justify-center gap-2 mb-6">`);
+            lines.push(`          {otp.map((digit, i) => (`);
+            lines.push(`            <input key={i} ref={inputRefs[i]} type="text" inputMode="numeric"`);
+            lines.push(`              value={digit} onChange={(e) => handleChange(i, e.target.value)} maxLength={1}`);
+            lines.push(`              className="w-12 h-14 text-center text-xl font-bold border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-black" />`);
+            lines.push(`          ))}`);
+            lines.push(`        </div>`);
+            lines.push(`        {error && <p className="text-sm text-red-500 mb-4">{error}</p>}`);
+            lines.push(`        <button onClick={() => verify(otp.join(''))} disabled={loading || otp.some((d) => !d)}`);
+            lines.push(`          className="w-full py-2.5 bg-black text-white rounded-lg text-sm font-medium hover:bg-gray-800 disabled:opacity-40 transition">`);
+            lines.push(`          {loading ? 'Verifying...' : 'Verify'}`);
+            lines.push(`        </button>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+        case 'custom':
+        default:
+            lines.push(`export default function CustomPage() {`);
+            lines.push(`  return (`);
+            lines.push(`    <div className="container mx-auto px-4 py-8">`);
+            lines.push(`      <h1 className="text-2xl font-bold mb-4">${page.name}</h1>`);
+            lines.push(`      <div className="bg-white border border-gray-200 rounded-xl p-8 text-center text-gray-400">`);
+            lines.push(`        <p className="text-4xl mb-4">⚡</p>`);
+            lines.push(`        <p className="font-medium">Custom Page</p>`);
+            lines.push(`        <p className="text-sm mt-1">Build your custom UI here.</p>`);
+            lines.push(`      </div>`);
+            lines.push(`    </div>`);
+            lines.push(`  )`);
+            lines.push(`}`);
+            break;
+    }
+    return {
+        path: `app/(presentation)/${routePath}/page.tsx`,
+        content: lines.join('\n'),
+        category: 'customizable',
+    };
+}
+//# sourceMappingURL=page-remaining.js.map