@erwininteractive/mvc 0.1.5 → 0.2.0

package/dist/cli.js

@@ -5,11 +5,12 @@ const commander_1 = require("commander");
 const initApp_1 = require("./generators/initApp");
 const generateModel_1 = require("./generators/generateModel");
 const generateController_1 = require("./generators/generateController");
+const generateResource_1 = require("./generators/generateResource");
 const program = new commander_1.Command();
 program
     .name("erwinmvc")
     .description("CLI for @erwininteractive/mvc framework")
-    .version("0.1.4");
+    .version("0.1.5");
 // Init command - scaffold a new application
 program
     .command("init <dir>")
@@ -29,7 +30,7 @@ program
 const generate = program
     .command("generate")
     .alias("g")
-    .description("Generate models or controllers");
+    .description("Generate models, controllers, or resources");
 // Generate model
 generate
     .command("model <name>")
@@ -58,4 +59,22 @@ generate
         process.exit(1);
     }
 });
+// Generate resource (model + controller + views)
+generate
+    .command("resource <name>")
+    .description("Generate a complete resource (model + controller + views)")
+    .option("--skip-model", "Skip generating Prisma model")
+    .option("--skip-controller", "Skip generating controller")
+    .option("--skip-views", "Skip generating views")
+    .option("--skip-migrate", "Skip running Prisma migrate")
+    .option("--api-only", "Generate API-only controller (no views)")
+    .action(async (name, options) => {
+    try {
+        await (0, generateResource_1.generateResource)(name, options);
+    }
+    catch (err) {
+        console.error("Error:", err instanceof Error ? err.message : err);
+        process.exit(1);
+    }
+});
 program.parse();

package/dist/generators/generateResource.d.ts

@@ -0,0 +1,11 @@
+export interface GenerateResourceOptions {
+    skipModel?: boolean;
+    skipController?: boolean;
+    skipViews?: boolean;
+    skipMigrate?: boolean;
+    apiOnly?: boolean;
+}
+/**
+ * Generate a complete resource: model + controller + views.
+ */
+export declare function generateResource(name: string, options?: GenerateResourceOptions): Promise<void>;

package/dist/generators/generateResource.js

@@ -0,0 +1,199 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateResource = generateResource;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const ejs_1 = __importDefault(require("ejs"));
+const child_process_1 = require("child_process");
+const paths_1 = require("./paths");
+const utils_1 = require("./utils");
+/**
+ * Generate a complete resource: model + controller + views.
+ */
+async function generateResource(name, options = {}) {
+    const modelName = (0, utils_1.capitalize)(name);
+    const lowerModelName = name.toLowerCase();
+    const controllerName = `${modelName}Controller`;
+    const resourcePath = (0, utils_1.pluralize)(lowerModelName);
+    const tableName = (0, utils_1.pluralize)(lowerModelName);
+    console.log(`\nGenerating resource: ${modelName}\n`);
+    // Generate model (if database is set up)
+    if (!options.skipModel) {
+        const schemaPath = path_1.default.resolve("prisma/schema.prisma");
+        if (fs_1.default.existsSync(schemaPath)) {
+            await generateModel(modelName, tableName, schemaPath, options.skipMigrate);
+        }
+        else {
+            console.log("Skipping model (no prisma/schema.prisma found)");
+            console.log("Run 'npm run db:setup' first to enable database features\n");
+        }
+    }
+    // Generate controller
+    if (!options.skipController) {
+        await generateController(modelName, lowerModelName, controllerName, resourcePath, options.apiOnly);
+    }
+    // Generate views (unless API only)
+    if (!options.skipViews && !options.apiOnly) {
+        await generateViews(modelName, lowerModelName, resourcePath);
+    }
+    // Print summary
+    printSummary(modelName, controllerName, resourcePath, options);
+}
+/**
+ * Generate Prisma model.
+ */
+async function generateModel(modelName, tableName, schemaPath, skipMigrate) {
+    const templatePath = path_1.default.join((0, paths_1.getTemplatesDir)(), "model.prisma.ejs");
+    if (!fs_1.default.existsSync(templatePath)) {
+        throw new Error("Model template not found");
+    }
+    // Check if model already exists
+    const existingSchema = fs_1.default.readFileSync(schemaPath, "utf-8");
+    if (existingSchema.includes(`model ${modelName} {`)) {
+        console.log(`Model ${modelName} already exists, skipping...`);
+        return;
+    }
+    const template = fs_1.default.readFileSync(templatePath, "utf-8");
+    const modelContent = ejs_1.default.render(template, { modelName, tableName });
+    fs_1.default.appendFileSync(schemaPath, "\n" + modelContent);
+    console.log(`Created model ${modelName} in prisma/schema.prisma`);
+    if (!skipMigrate) {
+        console.log("\nRunning Prisma migrate...");
+        try {
+            (0, child_process_1.execSync)(`npx prisma migrate dev --name add-${tableName}`, {
+                stdio: "inherit",
+            });
+            (0, child_process_1.execSync)("npx prisma generate", { stdio: "inherit" });
+        }
+        catch {
+            console.error("Migration failed. Run manually: npx prisma migrate dev");
+        }
+    }
+}
+/**
+ * Generate controller file.
+ */
+async function generateController(modelName, lowerModelName, controllerName, resourcePath, apiOnly) {
+    const controllersDir = path_1.default.resolve("src/controllers");
+    if (!fs_1.default.existsSync(controllersDir)) {
+        fs_1.default.mkdirSync(controllersDir, { recursive: true });
+    }
+    const controllerPath = path_1.default.join(controllersDir, `${controllerName}.ts`);
+    if (fs_1.default.existsSync(controllerPath)) {
+        console.log(`Controller ${controllerName}.ts already exists, skipping...`);
+        return;
+    }
+    // Use resource controller template (with full CRUD + form handling)
+    const templateName = apiOnly ? "controller.api.ts.ejs" : "controller.resource.ts.ejs";
+    let templatePath = path_1.default.join((0, paths_1.getTemplatesDir)(), templateName);
+    // Fall back to basic controller template if resource template doesn't exist
+    if (!fs_1.default.existsSync(templatePath)) {
+        templatePath = path_1.default.join((0, paths_1.getTemplatesDir)(), "controller.ts.ejs");
+    }
+    if (!fs_1.default.existsSync(templatePath)) {
+        throw new Error("Controller template not found");
+    }
+    const template = fs_1.default.readFileSync(templatePath, "utf-8");
+    const controllerContent = ejs_1.default.render(template, {
+        modelName,
+        lowerModelName,
+        controllerName,
+        resourcePath,
+    });
+    fs_1.default.writeFileSync(controllerPath, controllerContent);
+    console.log(`Created src/controllers/${controllerName}.ts`);
+}
+/**
+ * Generate view files for the resource.
+ */
+async function generateViews(modelName, lowerModelName, resourcePath) {
+    const viewsDir = path_1.default.resolve(`src/views/${resourcePath}`);
+    if (!fs_1.default.existsSync(viewsDir)) {
+        fs_1.default.mkdirSync(viewsDir, { recursive: true });
+    }
+    const views = [
+        { name: "index", title: `${modelName} List` },
+        { name: "show", title: `${modelName} Details` },
+        { name: "create", title: `Create ${modelName}` },
+        { name: "edit", title: `Edit ${modelName}` },
+    ];
+    for (const view of views) {
+        const viewPath = path_1.default.join(viewsDir, `${view.name}.ejs`);
+        if (fs_1.default.existsSync(viewPath)) {
+            console.log(`View ${view.name}.ejs already exists, skipping...`);
+            continue;
+        }
+        // Try specific template first, then fall back to generic
+        let templatePath = path_1.default.join((0, paths_1.getTemplatesDir)(), `views/${view.name}.ejs.ejs`);
+        if (!fs_1.default.existsSync(templatePath)) {
+            templatePath = path_1.default.join((0, paths_1.getTemplatesDir)(), "view.ejs.ejs");
+        }
+        if (!fs_1.default.existsSync(templatePath)) {
+            console.warn(`View template for ${view.name} not found, skipping...`);
+            continue;
+        }
+        const template = fs_1.default.readFileSync(templatePath, "utf-8");
+        const viewContent = ejs_1.default.render(template, {
+            title: view.title,
+            modelName,
+            lowerName: lowerModelName,
+            resourcePath,
+            viewType: view.name,
+        });
+        fs_1.default.writeFileSync(viewPath, viewContent);
+    }
+    console.log(`Created views in src/views/${resourcePath}/`);
+}
+/**
+ * Print summary of generated files and next steps.
+ */
+function printSummary(modelName, controllerName, resourcePath, options) {
+    console.log(`
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Resource ${modelName} created successfully!
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Files created:`);
+    if (!options.skipModel) {
+        console.log(`  prisma/schema.prisma  (${modelName} model added)`);
+    }
+    if (!options.skipController) {
+        console.log(`  src/controllers/${controllerName}.ts`);
+    }
+    if (!options.skipViews && !options.apiOnly) {
+        console.log(`  src/views/${resourcePath}/index.ejs`);
+        console.log(`  src/views/${resourcePath}/show.ejs`);
+        console.log(`  src/views/${resourcePath}/create.ejs`);
+        console.log(`  src/views/${resourcePath}/edit.ejs`);
+    }
+    console.log(`
+Routes:
+  GET    /${resourcePath}           → List all ${resourcePath}
+  GET    /${resourcePath}/create    → Show create form
+  POST   /${resourcePath}           → Create new ${modelName.toLowerCase()}
+  GET    /${resourcePath}/:id       → Show ${modelName.toLowerCase()}
+  GET    /${resourcePath}/:id/edit  → Show edit form
+  PUT    /${resourcePath}/:id       → Update ${modelName.toLowerCase()}
+  DELETE /${resourcePath}/:id       → Delete ${modelName.toLowerCase()}
+
+Next steps:
+  1. Add routes to src/server.ts:
+
+     import * as ${controllerName} from "./controllers/${controllerName}";
+     
+     app.get("/${resourcePath}", ${controllerName}.index);
+     app.get("/${resourcePath}/create", ${controllerName}.create);
+     app.post("/${resourcePath}", ${controllerName}.store);
+     app.get("/${resourcePath}/:id", ${controllerName}.show);
+     app.get("/${resourcePath}/:id/edit", ${controllerName}.edit);
+     app.put("/${resourcePath}/:id", ${controllerName}.update);
+     app.delete("/${resourcePath}/:id", ${controllerName}.destroy);
+
+  2. Edit the model in prisma/schema.prisma to add your fields
+  3. Run: npx prisma migrate dev --name add-${resourcePath}-fields
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+`);
+}

package/dist/generators/utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared utilities for generators.
+ */
+/**
+ * Capitalize the first letter of a string.
+ */
+export declare function capitalize(str: string): string;
+/**
+ * Pluralize a word with common English rules.
+ */
+export declare function pluralize(str: string): string;
+/**
+ * Convert to kebab-case (for URLs).
+ */
+export declare function kebabCase(str: string): string;
+/**
+ * Convert to snake_case (for database tables).
+ */
+export declare function snakeCase(str: string): string;

package/dist/generators/utils.js

@@ -0,0 +1,80 @@
+"use strict";
+/**
+ * Shared utilities for generators.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.capitalize = capitalize;
+exports.pluralize = pluralize;
+exports.kebabCase = kebabCase;
+exports.snakeCase = snakeCase;
+/**
+ * Capitalize the first letter of a string.
+ */
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+/**
+ * Pluralize a word with common English rules.
+ */
+function pluralize(str) {
+    const lower = str.toLowerCase();
+    // Irregular plurals
+    const irregulars = {
+        person: "people",
+        child: "children",
+        man: "men",
+        woman: "women",
+        tooth: "teeth",
+        foot: "feet",
+        mouse: "mice",
+        goose: "geese",
+    };
+    if (irregulars[lower]) {
+        // Preserve original casing
+        return str.charAt(0) === str.charAt(0).toUpperCase()
+            ? capitalize(irregulars[lower])
+            : irregulars[lower];
+    }
+    // Already plural or uncountable
+    if (lower.endsWith("s") || lower.endsWith("x") || lower.endsWith("z")) {
+        if (lower.endsWith("ss") || lower.endsWith("us") || lower.endsWith("is")) {
+            return str + "es";
+        }
+        return str;
+    }
+    // Words ending in consonant + y
+    if (lower.endsWith("y") && !/[aeiou]y$/.test(lower)) {
+        return str.slice(0, -1) + "ies";
+    }
+    // Words ending in ch, sh, x, z, s
+    if (/(?:ch|sh|x|z|s)$/.test(lower)) {
+        return str + "es";
+    }
+    // Words ending in f or fe
+    if (lower.endsWith("f")) {
+        return str.slice(0, -1) + "ves";
+    }
+    if (lower.endsWith("fe")) {
+        return str.slice(0, -2) + "ves";
+    }
+    // Default: add s
+    return str + "s";
+}
+/**
+ * Convert to kebab-case (for URLs).
+ */
+function kebabCase(str) {
+    return str
+        .replace(/([a-z])([A-Z])/g, "$1-$2")
+        .replace(/[\s_]+/g, "-")
+        .toLowerCase();
+}
+/**
+ * Convert to snake_case (for database tables).
+ */
+function snakeCase(str) {
+    return str
+        .replace(/([a-z])([A-Z])/g, "$1_$2")
+        .replace(/[\s-]+/g, "_")
+        .toLowerCase();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erwininteractive/mvc",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "A lightweight, full-featured MVC framework for Node.js with Express, Prisma, and EJS",
   "main": "dist/framework/index.js",
   "types": "dist/framework/index.d.ts",

package/templates/controller.resource.ts.ejs

@@ -0,0 +1,181 @@
+import type { Request, Response } from "express";
+import { getPrismaClient } from "@erwininteractive/mvc";
+
+const prisma = getPrismaClient();
+
+/**
+ * GET /<%= resourcePath %>
+ * List all <%= lowerModelName %> records.
+ */
+export async function index(req: Request, res: Response): Promise<void> {
+  try {
+    const items = await prisma.<%= lowerModelName %>.findMany({
+      orderBy: { createdAt: "desc" },
+    });
+    res.render("<%= resourcePath %>/index", { 
+      title: "<%= modelName %> List",
+      items,
+    });
+  } catch (error) {
+    console.error("Error fetching <%= resourcePath %>:", error);
+    res.status(500).render("error", { 
+      title: "Error",
+      message: "Failed to load <%= resourcePath %>",
+    });
+  }
+}
+
+/**
+ * GET /<%= resourcePath %>/create
+ * Show form to create a new <%= lowerModelName %>.
+ */
+export async function create(req: Request, res: Response): Promise<void> {
+  res.render("<%= resourcePath %>/create", {
+    title: "Create <%= modelName %>",
+    item: {},
+    errors: {},
+  });
+}
+
+/**
+ * POST /<%= resourcePath %>
+ * Create a new <%= lowerModelName %> record.
+ */
+export async function store(req: Request, res: Response): Promise<void> {
+  try {
+    const data = req.body;
+    const item = await prisma.<%= lowerModelName %>.create({ data });
+    res.redirect(`/<%= resourcePath %>/${item.id}`);
+  } catch (error) {
+    console.error("Error creating <%= lowerModelName %>:", error);
+    res.status(400).render("<%= resourcePath %>/create", {
+      title: "Create <%= modelName %>",
+      item: req.body,
+      errors: { _form: "Failed to create <%= lowerModelName %>. Please check your input." },
+    });
+  }
+}
+
+/**
+ * GET /<%= resourcePath %>/:id
+ * Show a single <%= lowerModelName %> record.
+ */
+export async function show(req: Request, res: Response): Promise<void> {
+  try {
+    const id = Number(req.params.id);
+    if (isNaN(id)) {
+      res.status(400).render("error", { title: "Error", message: "Invalid ID" });
+      return;
+    }
+
+    const item = await prisma.<%= lowerModelName %>.findUnique({ where: { id } });
+    if (!item) {
+      res.status(404).render("error", { 
+        title: "Not Found", 
+        message: "<%= modelName %> not found",
+      });
+      return;
+    }
+
+    res.render("<%= resourcePath %>/show", { 
+      title: "<%= modelName %> Details",
+      item,
+    });
+  } catch (error) {
+    console.error("Error fetching <%= lowerModelName %>:", error);
+    res.status(500).render("error", { 
+      title: "Error",
+      message: "Failed to load <%= lowerModelName %>",
+    });
+  }
+}
+
+/**
+ * GET /<%= resourcePath %>/:id/edit
+ * Show form to edit a <%= lowerModelName %>.
+ */
+export async function edit(req: Request, res: Response): Promise<void> {
+  try {
+    const id = Number(req.params.id);
+    if (isNaN(id)) {
+      res.status(400).render("error", { title: "Error", message: "Invalid ID" });
+      return;
+    }
+
+    const item = await prisma.<%= lowerModelName %>.findUnique({ where: { id } });
+    if (!item) {
+      res.status(404).render("error", { 
+        title: "Not Found", 
+        message: "<%= modelName %> not found",
+      });
+      return;
+    }
+
+    res.render("<%= resourcePath %>/edit", {
+      title: "Edit <%= modelName %>",
+      item,
+      errors: {},
+    });
+  } catch (error) {
+    console.error("Error fetching <%= lowerModelName %>:", error);
+    res.status(500).render("error", { 
+      title: "Error",
+      message: "Failed to load <%= lowerModelName %>",
+    });
+  }
+}
+
+/**
+ * PUT /<%= resourcePath %>/:id
+ * Update a <%= lowerModelName %> record.
+ */
+export async function update(req: Request, res: Response): Promise<void> {
+  try {
+    const id = Number(req.params.id);
+    if (isNaN(id)) {
+      res.status(400).render("error", { title: "Error", message: "Invalid ID" });
+      return;
+    }
+
+    const data = req.body;
+    await prisma.<%= lowerModelName %>.update({
+      where: { id },
+      data,
+    });
+
+    res.redirect(`/<%= resourcePath %>/${id}`);
+  } catch (error) {
+    console.error("Error updating <%= lowerModelName %>:", error);
+    res.status(400).render("<%= resourcePath %>/edit", {
+      title: "Edit <%= modelName %>",
+      item: { id: req.params.id, ...req.body },
+      errors: { _form: "Failed to update <%= lowerModelName %>. Please check your input." },
+    });
+  }
+}
+
+/**
+ * DELETE /<%= resourcePath %>/:id
+ * Delete a <%= lowerModelName %> record.
+ */
+export async function destroy(req: Request, res: Response): Promise<void> {
+  try {
+    const id = Number(req.params.id);
+    if (isNaN(id)) {
+      res.status(400).json({ error: "Invalid ID" });
+      return;
+    }
+
+    await prisma.<%= lowerModelName %>.delete({ where: { id } });
+    
+    // Check if request wants JSON response
+    if (req.accepts("json") && !req.accepts("html")) {
+      res.json({ success: true });
+    } else {
+      res.redirect("/<%= resourcePath %>");
+    }
+  } catch (error) {
+    console.error("Error deleting <%= lowerModelName %>:", error);
+    res.status(500).json({ error: "Failed to delete <%= lowerModelName %>" });
+  }
+}

package/templates/views/create.ejs.ejs

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%%= title %></title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      line-height: 1.6;
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 2rem;
+      background: #f5f5f5;
+    }
+    h1 { color: #333; margin-bottom: 1rem; }
+    .breadcrumb {
+      margin-bottom: 1.5rem;
+      color: #666;
+    }
+    .breadcrumb a { color: #667eea; text-decoration: none; }
+    .breadcrumb a:hover { text-decoration: underline; }
+    .card {
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      padding: 2rem;
+    }
+    .form-group { margin-bottom: 1.5rem; }
+    label {
+      display: block;
+      font-weight: 500;
+      margin-bottom: 0.5rem;
+      color: #333;
+    }
+    input[type="text"],
+    input[type="email"],
+    input[type="number"],
+    input[type="date"],
+    textarea,
+    select {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      font-size: 1rem;
+      transition: border-color 0.2s;
+    }
+    input:focus, textarea:focus, select:focus {
+      outline: none;
+      border-color: #667eea;
+      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+    textarea { min-height: 120px; resize: vertical; }
+    .error-message {
+      color: #dc3545;
+      font-size: 0.875rem;
+      margin-top: 0.25rem;
+    }
+    .form-error {
+      background: #f8d7da;
+      color: #721c24;
+      padding: 1rem;
+      border-radius: 6px;
+      margin-bottom: 1.5rem;
+    }
+    .actions {
+      display: flex;
+      gap: 0.75rem;
+      margin-top: 1.5rem;
+      padding-top: 1.5rem;
+      border-top: 1px solid #eee;
+    }
+    .btn {
+      display: inline-block;
+      padding: 0.75rem 1.5rem;
+      background: #667eea;
+      color: white;
+      text-decoration: none;
+      border-radius: 6px;
+      border: none;
+      cursor: pointer;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+    .btn:hover { background: #5a6fd6; }
+    .btn-secondary { background: #6c757d; }
+    .btn-secondary:hover { background: #5a6268; }
+  </style>
+</head>
+<body>
+  <div class="breadcrumb">
+    <a href="/<%= resourcePath %>"><%= modelName %> List</a> / Create New
+  </div>
+
+  <h1><%%= title %></h1>
+  
+  <div class="card">
+    <%% if (errors && errors._form) { %>
+      <div class="form-error"><%%= errors._form %></div>
+    <%% } %>
+
+    <form method="POST" action="/<%= resourcePath %>">
+      <!-- 
+        Add your form fields here. Example:
+        
+        <div class="form-group">
+          <label for="title">Title</label>
+          <input type="text" id="title" name="title" value="<%%- item.title || '' %>" required>
+          <%% if (errors && errors.title) { %>
+            <div class="error-message"><%%= errors.title %></div>
+          <%% } %>
+        </div>
+        
+        <div class="form-group">
+          <label for="description">Description</label>
+          <textarea id="description" name="description"><%%- item.description || '' %></textarea>
+        </div>
+      -->
+      
+      <div class="form-group">
+        <label for="placeholder">Placeholder Field</label>
+        <input type="text" id="placeholder" name="placeholder" placeholder="Edit this form to add your fields">
+        <p style="color: #666; font-size: 0.875rem; margin-top: 0.5rem;">
+          Edit this template at <code>src/views/<%= resourcePath %>/create.ejs</code> to add your model fields.
+        </p>
+      </div>
+
+      <div class="actions">
+        <button type="submit" class="btn">Create <%= modelName %></button>
+        <a href="/<%= resourcePath %>" class="btn btn-secondary">Cancel</a>
+      </div>
+    </form>
+  </div>
+</body>
+</html>

package/templates/views/edit.ejs.ejs

@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%%= title %></title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      line-height: 1.6;
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 2rem;
+      background: #f5f5f5;
+    }
+    h1 { color: #333; margin-bottom: 1rem; }
+    .breadcrumb {
+      margin-bottom: 1.5rem;
+      color: #666;
+    }
+    .breadcrumb a { color: #667eea; text-decoration: none; }
+    .breadcrumb a:hover { text-decoration: underline; }
+    .card {
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      padding: 2rem;
+    }
+    .form-group { margin-bottom: 1.5rem; }
+    label {
+      display: block;
+      font-weight: 500;
+      margin-bottom: 0.5rem;
+      color: #333;
+    }
+    input[type="text"],
+    input[type="email"],
+    input[type="number"],
+    input[type="date"],
+    textarea,
+    select {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      font-size: 1rem;
+      transition: border-color 0.2s;
+    }
+    input:focus, textarea:focus, select:focus {
+      outline: none;
+      border-color: #667eea;
+      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+    textarea { min-height: 120px; resize: vertical; }
+    .error-message {
+      color: #dc3545;
+      font-size: 0.875rem;
+      margin-top: 0.25rem;
+    }
+    .form-error {
+      background: #f8d7da;
+      color: #721c24;
+      padding: 1rem;
+      border-radius: 6px;
+      margin-bottom: 1.5rem;
+    }
+    .meta {
+      font-size: 0.875rem;
+      color: #666;
+      margin-bottom: 1.5rem;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid #eee;
+    }
+    .actions {
+      display: flex;
+      gap: 0.75rem;
+      margin-top: 1.5rem;
+      padding-top: 1.5rem;
+      border-top: 1px solid #eee;
+    }
+    .btn {
+      display: inline-block;
+      padding: 0.75rem 1.5rem;
+      background: #667eea;
+      color: white;
+      text-decoration: none;
+      border-radius: 6px;
+      border: none;
+      cursor: pointer;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+    .btn:hover { background: #5a6fd6; }
+    .btn-secondary { background: #6c757d; }
+    .btn-secondary:hover { background: #5a6268; }
+    .btn-danger { background: #dc3545; }
+    .btn-danger:hover { background: #c82333; }
+  </style>
+</head>
+<body>
+  <div class="breadcrumb">
+    <a href="/<%= resourcePath %>"><%= modelName %> List</a> / 
+    <a href="/<%= resourcePath %>/<%%= item.id %>"><%%= item.id %></a> / Edit
+  </div>
+
+  <h1><%%= title %></h1>
+  
+  <div class="card">
+    <div class="meta">
+      Editing <%= modelName %> #<%%= item.id %> 
+      <%% if (item.updatedAt) { %>
+        &middot; Last updated: <%%= new Date(item.updatedAt).toLocaleString() %>
+      <%% } %>
+    </div>
+
+    <%% if (errors && errors._form) { %>
+      <div class="form-error"><%%= errors._form %></div>
+    <%% } %>
+
+    <form method="POST" action="/<%= resourcePath %>/<%%= item.id %>?_method=PUT">
+      <!-- 
+        Add your form fields here. Example:
+        
+        <div class="form-group">
+          <label for="title">Title</label>
+          <input type="text" id="title" name="title" value="<%%- item.title || '' %>" required>
+          <%% if (errors && errors.title) { %>
+            <div class="error-message"><%%= errors.title %></div>
+          <%% } %>
+        </div>
+        
+        <div class="form-group">
+          <label for="description">Description</label>
+          <textarea id="description" name="description"><%%- item.description || '' %></textarea>
+        </div>
+      -->
+      
+      <div class="form-group">
+        <label for="placeholder">Placeholder Field</label>
+        <input type="text" id="placeholder" name="placeholder" placeholder="Edit this form to add your fields">
+        <p style="color: #666; font-size: 0.875rem; margin-top: 0.5rem;">
+          Edit this template at <code>src/views/<%= resourcePath %>/edit.ejs</code> to add your model fields.
+        </p>
+      </div>
+
+      <div class="actions">
+        <button type="submit" class="btn">Update <%= modelName %></button>
+        <a href="/<%= resourcePath %>/<%%= item.id %>" class="btn btn-secondary">Cancel</a>
+        <form method="POST" action="/<%= resourcePath %>/<%%= item.id %>?_method=DELETE" style="display:inline; margin-left: auto;">
+          <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this <%= lowerName %>?')">Delete</button>
+        </form>
+      </div>
+    </form>
+  </div>
+</body>
+</html>

package/templates/views/index.ejs.ejs

@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%%= title %></title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      line-height: 1.6;
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 2rem;
+      background: #f5f5f5;
+    }
+    h1 { color: #333; margin-bottom: 1rem; }
+    .actions { margin-bottom: 1.5rem; }
+    .btn {
+      display: inline-block;
+      padding: 0.5rem 1rem;
+      background: #667eea;
+      color: white;
+      text-decoration: none;
+      border-radius: 6px;
+      border: none;
+      cursor: pointer;
+      font-size: 1rem;
+    }
+    .btn:hover { background: #5a6fd6; }
+    .btn-danger { background: #dc3545; }
+    .btn-danger:hover { background: #c82333; }
+    .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      background: white;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    th, td {
+      padding: 1rem;
+      text-align: left;
+      border-bottom: 1px solid #eee;
+    }
+    th { background: #f8f9fa; font-weight: 600; }
+    tr:hover { background: #f8f9fa; }
+    .empty {
+      text-align: center;
+      padding: 3rem;
+      color: #666;
+    }
+    .item-actions { white-space: nowrap; }
+    .item-actions a, .item-actions button { margin-right: 0.5rem; }
+  </style>
+</head>
+<body>
+  <h1><%%= title %></h1>
+  
+  <div class="actions">
+    <a href="/<%= resourcePath %>/create" class="btn">Create New <%= modelName %></a>
+  </div>
+
+  <%% if (items && items.length > 0) { %>
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Created</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <%% items.forEach(item => { %>
+          <tr>
+            <td><%%= item.id %></td>
+            <td><%%= new Date(item.createdAt).toLocaleDateString() %></td>
+            <td class="item-actions">
+              <a href="/<%= resourcePath %>/<%%= item.id %>" class="btn btn-sm">View</a>
+              <a href="/<%= resourcePath %>/<%%= item.id %>/edit" class="btn btn-sm">Edit</a>
+              <form method="POST" action="/<%= resourcePath %>/<%%= item.id %>?_method=DELETE" style="display:inline">
+                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
+              </form>
+            </td>
+          </tr>
+        <%% }); %>
+      </tbody>
+    </table>
+  <%% } else { %>
+    <div class="empty">
+      <p>No <%= resourcePath %> found.</p>
+      <a href="/<%= resourcePath %>/create" class="btn">Create your first <%= lowerName %></a>
+    </div>
+  <%% } %>
+</body>
+</html>

package/templates/views/show.ejs.ejs

@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%%= title %></title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      line-height: 1.6;
+      max-width: 700px;
+      margin: 0 auto;
+      padding: 2rem;
+      background: #f5f5f5;
+    }
+    h1 { color: #333; margin-bottom: 1rem; }
+    .breadcrumb {
+      margin-bottom: 1.5rem;
+      color: #666;
+    }
+    .breadcrumb a { color: #667eea; text-decoration: none; }
+    .breadcrumb a:hover { text-decoration: underline; }
+    .card {
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      padding: 2rem;
+      margin-bottom: 1.5rem;
+    }
+    .field { margin-bottom: 1.5rem; }
+    .field:last-child { margin-bottom: 0; }
+    .field-label {
+      font-size: 0.875rem;
+      color: #666;
+      margin-bottom: 0.25rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .field-value {
+      font-size: 1.1rem;
+      color: #333;
+    }
+    .actions { display: flex; gap: 0.75rem; }
+    .btn {
+      display: inline-block;
+      padding: 0.5rem 1rem;
+      background: #667eea;
+      color: white;
+      text-decoration: none;
+      border-radius: 6px;
+      border: none;
+      cursor: pointer;
+      font-size: 1rem;
+    }
+    .btn:hover { background: #5a6fd6; }
+    .btn-secondary { background: #6c757d; }
+    .btn-secondary:hover { background: #5a6268; }
+    .btn-danger { background: #dc3545; }
+    .btn-danger:hover { background: #c82333; }
+  </style>
+</head>
+<body>
+  <div class="breadcrumb">
+    <a href="/<%= resourcePath %>"><%= modelName %> List</a> / Details
+  </div>
+
+  <h1><%%= title %></h1>
+  
+  <div class="card">
+    <div class="field">
+      <div class="field-label">ID</div>
+      <div class="field-value"><%%= item.id %></div>
+    </div>
+    
+    <div class="field">
+      <div class="field-label">Created At</div>
+      <div class="field-value"><%%= new Date(item.createdAt).toLocaleString() %></div>
+    </div>
+    
+    <div class="field">
+      <div class="field-label">Updated At</div>
+      <div class="field-value"><%%= new Date(item.updatedAt).toLocaleString() %></div>
+    </div>
+    
+    <!-- Add more fields here as you add them to your model -->
+  </div>
+
+  <div class="actions">
+    <a href="/<%= resourcePath %>/<%%= item.id %>/edit" class="btn">Edit</a>
+    <a href="/<%= resourcePath %>" class="btn btn-secondary">Back to List</a>
+    <form method="POST" action="/<%= resourcePath %>/<%%= item.id %>?_method=DELETE" style="display:inline">
+      <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this <%= lowerName %>?')">Delete</button>
+    </form>
+  </div>
+</body>
+</html>