create-numz-app 1.0.0 → 1.0.1

package/README.md

@@ -31,7 +31,7 @@ npm link          # makes `project-gen` available globally
 ## Usage
 
 ```bash
-project-gen
+npm create numz-app
 ```
 
 The CLI will ask you:

package/bin/cli.js

@@ -1,10 +1,9 @@
 #!/usr/bin/env node
-// bin/cli.js — interactive CLI
-
 import prompts from 'prompts';
 import chalk   from 'chalk';
 import ora     from 'ora';
 import path    from 'path';
+import { parseSQL } from '../src/parser.js';
 import { generateProject } from '../src/index.js';
 
 console.log('');
@@ -13,63 +12,62 @@ console.log(chalk.bold.blue('║        numz  —  Full-Stack Builder    ║'));
 console.log(chalk.bold.blue('╚══════════════════════════════════════╝'));
 console.log(chalk.gray('  Paste SQL → get Express + React CRUD app\n'));
 
-const answers = await prompts([
-  {
-    type: 'text',
-    name: 'projectName',
-    message: 'Project name (folder to create):',
-    initial: 'my-app',
-    validate: (v) => /^[\w-]+$/.test(v.trim()) || 'Letters, numbers, hyphens only',
-  },
-  {
-    type: 'text',
-    name: 'dbName',
-    message: 'MySQL database name:',
-    validate: (v) => v.trim().length > 0 || 'Required',
-  },
-  {
-    type: 'text',
-    name: 'outputDir',
-    message: 'Output directory (blank = current folder):',
-    initial: '',
-  },
-  {
-    type: 'text',
-    name: 'sql',
+const base = await prompts([
+  { type:'text', name:'projectName', message:'Project name:', initial:'my-app',
+    validate:(v)=>/^[\w-]+$/.test(v.trim())||'Letters, numbers, hyphens only' },
+  { type:'text', name:'dbName', message:'MySQL database name:',
+    validate:(v)=>v.trim().length>0||'Required' },
+  { type:'text', name:'outputDir', message:'Output directory (blank = current folder):', initial:'' },
+  { type:'text', name:'sql',
     message: chalk.yellow('Paste your SQL CREATE TABLE statements then press Enter:'),
-    validate: (v) =>
-      v.toLowerCase().includes('create table') || 'Must include at least one CREATE TABLE',
-  },
-], {
-  onCancel: () => { console.log(chalk.red('\nCancelled.')); process.exit(1); },
-});
+    validate:(v)=>v.toLowerCase().includes('create table')||'Must include at least one CREATE TABLE' },
+], { onCancel:()=>{ console.log(chalk.red('\nCancelled.')); process.exit(1); } });
+
+// Parse SQL now so we can offer table choices for reports
+const parsedTables = parseSQL(base.sql.trim());
+if (!parsedTables.length) {
+  console.log(chalk.red('No CREATE TABLE statements detected. Exiting.')); process.exit(1);
+}
+
+const reportsQ = await prompts([
+  { type:'confirm', name:'wantReports', message:'Generate a Reports page?', initial:true },
+], { onCancel:()=>{ console.log(chalk.red('\nCancelled.')); process.exit(1); } });
+
+let reportTables = [];
 
-const outputDir = answers.outputDir.trim()
-  ? path.resolve(answers.outputDir.trim())
-  : process.cwd();
+if (reportsQ.wantReports) {
+  const sel = await prompts([
+    { type:'multiselect', name:'reportTables',
+      message:'Which tables should appear in reports? (Space to select)',
+      choices: parsedTables.map((t)=>({ title:t.tableName, value:t.tableName })),
+      min:1, hint:'Space to select, Enter to confirm', instructions:false },
+  ], { onCancel:()=>{ console.log(chalk.red('\nCancelled.')); process.exit(1); } });
 
+  reportTables = sel.reportTables || [];
+  if (!reportTables.length) { console.log(chalk.yellow('No tables selected — skipping Reports page.')); reportsQ.wantReports = false; }
+}
+
+const outputDir = base.outputDir.trim() ? path.resolve(base.outputDir.trim()) : process.cwd();
 console.log('');
 const spinner = ora('Generating project files…').start();
 
 try {
   const { baseDir, files } = generateProject({
-    dbName:      answers.dbName.trim(),
-    sql:         answers.sql.trim(),
-    projectName: answers.projectName.trim(),
+    dbName:      base.dbName.trim(),
+    sql:         base.sql.trim(),
+    projectName: base.projectName.trim(),
     outputDir,
+    withReports: reportsQ.wantReports,
+    reportTables,
   });
 
-  spinner.succeed(chalk.green(`Done! ${files.length} files written.\n`));
-
+  spinner.succeed(chalk.green('Done! ' + files.length + ' files written.\n'));
   console.log(chalk.bold('📁 ' + baseDir));
   for (const f of files) console.log(chalk.gray('   ├── ') + chalk.cyan(f));
-
   console.log(chalk.bold.yellow('\n▶  Next steps:\n'));
-  console.log(`  cd ${answers.projectName}/backend  →  npm install  →  edit .env  →  npm run dev`);
-  console.log(`  cd ${answers.projectName}/frontend →  npm install  →  npm run dev`);
-  console.log(`\n  Then open ${chalk.bold('http://localhost:5173')}\n`);
-
+  console.log('  cd ' + base.projectName + '/backend  →  npm install  →  edit .env  →  npm run dev');
+  console.log('  cd ' + base.projectName + '/frontend →  npm install  →  npm run dev');
+  console.log('\n  Open ' + chalk.bold('http://localhost:5173') + '\n');
 } catch (err) {
-  spinner.fail(chalk.red('Error: ' + err.message));
-  process.exit(1);
+  spinner.fail(chalk.red('Error: ' + err.message)); process.exit(1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-numz-app",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Generate a full Express + React CRUD project from a DB name and SQL CREATE TABLE statements.",
   "type": "module",
   "bin": {
@@ -15,6 +15,8 @@
     "ora": "^8.1.0",
     "prompts": "^2.4.2"
   },
-  "engines": { "node": ">=18.0.0" },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "license": "MIT"
-}
+}

package/src/generator/backend.js

@@ -70,7 +70,7 @@ export default router;
 `;
 }
 
-export function generateServer(tables) {
+export function generateServer(tables, withReports) {
   const imports = tables
     .map((t) => `import ${camel(t.tableName)}Router from './routes/${t.tableName.toLowerCase()}.js';`)
     .join('\n');
@@ -78,10 +78,14 @@ export function generateServer(tables) {
     .map((t) => `app.use('/api/${t.tableName.toLowerCase()}', ${camel(t.tableName)}Router);`)
     .join('\n');
 
+  const reportsImport = withReports ? `import reportsRouter from './routes/reports.js';` : '';
+  const reportsUse    = withReports ? `app.use('/api/reports', reportsRouter);` : '';
+
   return `import express from 'express';
 import cors from 'cors';
 import dotenv from 'dotenv';
 ${imports}
+${reportsImport}
 
 dotenv.config();
 const app = express();
@@ -90,12 +94,75 @@ app.use(cors({ origin: 'http://localhost:5173', credentials: true }));
 app.use(express.json());
 
 ${uses}
+${reportsUse}
 
 const PORT = process.env.PORT || 5000;
 app.listen(PORT, () => console.log('Server running on port ' + PORT));
 `;
 }
 
+// Generates backend/routes/reports.js
+// Security: only whitelisted tables can be queried
+// Date columns are auto-detected from the schema and used for range filtering
+export function generateReportsRoute(reportTables, allTables) {
+  // Build { tablename: 'DateColumnName' } from schema
+  const dateCols = {};
+  for (const name of reportTables) {
+    const t = allTables.find((t) => t.tableName.toLowerCase() === name.toLowerCase());
+    if (t) {
+      const dc = t.columns.find((c) => c.type === 'date' || c.type === 'datetime');
+      dateCols[t.tableName.toLowerCase()] = dc ? dc.name : null;
+    }
+  }
+
+  const allowed    = JSON.stringify(reportTables.map((n) => n.toLowerCase()));
+  const dateColMap = JSON.stringify(dateCols, null, 2);
+
+  return `import express from 'express';
+import db from '../db.js';
+
+const router = express.Router();
+
+// Only these tables can be queried via reports (security whitelist)
+const ALLOWED = ${allowed};
+
+// Auto-detected date column per table — used for date range filtering
+const DATE_COLS = ${dateColMap};
+
+// GET /api/reports/:table?from=YYYY-MM-DD&to=YYYY-MM-DD
+router.get('/:table', (req, res) => {
+  const table = req.params.table.toLowerCase();
+
+  if (!ALLOWED.includes(table)) {
+    return res.status(400).json({ error: 'Invalid table name' });
+  }
+
+  const { from, to } = req.query;
+  const dateCol = DATE_COLS[table];
+  const params = [];
+
+  let sql = 'SELECT * FROM ' + table;
+
+  // Apply date range filter only if this table has a date column
+  if (dateCol && (from || to)) {
+    const conds = [];
+    if (from) { conds.push(dateCol + ' >= ?'); params.push(from); }
+    if (to)   { conds.push(dateCol + ' <= ?'); params.push(to); }
+    sql += ' WHERE ' + conds.join(' AND ');
+  }
+
+  if (dateCol) sql += ' ORDER BY ' + dateCol + ' DESC';
+
+  db.query(sql, params, (err, results) => {
+    if (err) return res.status(500).json({ error: err.message });
+    res.json(results);
+  });
+});
+
+export default router;
+`;
+}
+
 export function generateDb(dbName) {
   return `import mysql from 'mysql2';
 import dotenv from 'dotenv';

package/src/generator/frontend.js

@@ -160,13 +160,16 @@ export default ${name};
 `;
 }
 
-export function generateApp(tables) {
+export function generateApp(tables, withReports) {
   const imports = tables.map((t) => `import ${pascal(t.tableName)} from './pages/${pascal(t.tableName)}';`).join('\n');
   const routes  = tables.map((t) => `        <Route path="/${t.tableName.toLowerCase()}" element={<${pascal(t.tableName)} />} />`).join('\n');
   const first   = tables[0]?.tableName.toLowerCase() ?? 'home';
+  const reportsImport = withReports ? `import Reports from './pages/Reports';` : '';
+  const reportsRoute  = withReports ? `        <Route path="/reports" element={<Reports />} />` : '';
   return `import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import Login from './pages/Login';
 ${imports}
+${reportsImport}
 
 function App() {
   return (
@@ -175,6 +178,7 @@ function App() {
         <Route path="/" element={<Navigate to="/login" />} />
         <Route path="/login" element={<Login />} />
 ${routes}
+${reportsRoute}
       </Routes>
     </Router>
   );
@@ -184,10 +188,13 @@ export default App;
 `;
 }
 
-export function generateNavbar(tables) {
+export function generateNavbar(tables, withReports) {
   const links = tables
     .map((t) => `        <Link to="/${t.tableName.toLowerCase()}" className="hover:text-blue-300 font-medium">${pascal(t.tableName)}</Link>`)
     .join('\n');
+  const reportsLink = withReports
+    ? `        <Link to="/reports" className="hover:text-blue-300 font-medium">Reports</Link>`
+    : '';
   return `import { Link } from 'react-router-dom';
 
 function Navbar() {
@@ -195,6 +202,7 @@ function Navbar() {
     <nav className="bg-blue-700 text-white px-6 py-3 flex gap-6 items-center shadow">
       <span className="font-bold text-lg mr-4">SIMS</span>
 ${links}
+${reportsLink}
     </nav>
   );
 }
@@ -252,13 +260,23 @@ export default Login;
 `;
 }
 
-export function generateFrontendPackage(name) {
+export function generateFrontendPackage(name, withReports) {
+  const deps = {
+    axios: '^1.6.0',
+    react: '^18.2.0',
+    'react-dom': '^18.2.0',
+    'react-router-dom': '^6.20.0',
+  };
+  if (withReports) {
+    deps['jspdf'] = '^2.5.1';
+    deps['jspdf-autotable'] = '^3.8.1';
+  }
   return JSON.stringify({
     name: `${name}-frontend`,
     version: '1.0.0',
     type: 'module',
     scripts: { dev: 'vite', build: 'vite build', preview: 'vite preview' },
-    dependencies: { axios: '^1.6.0', react: '^18.2.0', 'react-dom': '^18.2.0', 'react-router-dom': '^6.20.0' },
+    dependencies: deps,
     devDependencies: { '@vitejs/plugin-react': '^4.2.0', autoprefixer: '^10.4.16', postcss: '^8.4.31', tailwindcss: '^3.3.5', vite: '^5.0.0' },
   }, null, 2);
 }
@@ -306,6 +324,168 @@ export function generateHTML(title) {
 `;
 }
 
+// ── Reports page ───────────────────────────────────────────────────────────
+// reportTables = string[] of table names the user chose
+// allTables    = full parsed schema array
+export function generateReportsPage(reportTables, allTables) {
+  // Resolve full schema for each chosen table
+  const resolved = reportTables
+    .map((n) => allTables.find((t) => t.tableName.toLowerCase() === n.toLowerCase()))
+    .filter(Boolean);
+
+  // Build the <option> list for the table-selector dropdown
+  const tableOptions = resolved
+    .map((t) => '              <option value="' + t.tableName + '">' + pascal(t.tableName) + '</option>')
+    .join('\n');
+
+  const firstTable = resolved[0]?.tableName ?? '';
+
+  // Build date-column map as a JS object literal (safe — no template interpolation issues)
+  const dateColEntries = resolved.map((t) => {
+    const dc = t.columns.find((c) => c.type === 'date' || c.type === 'datetime');
+    return '  ' + t.tableName + ': ' + (dc ? JSON.stringify(dc.name) : 'null');
+  }).join(',\n');
+
+  return [
+    "import { useState, useEffect } from 'react';",
+    "import axios from 'axios';",
+    "import jsPDF from 'jspdf';",
+    "import autoTable from 'jspdf-autotable';",
+    "import Navbar from '../Navbar';",
+    '',
+    '// Date column per table — used for server-side date range filtering',
+    'const DATE_COL = {',
+    dateColEntries,
+    '};',
+    '',
+    'function Reports() {',
+    "  const today = new Date().toISOString().split('T')[0];",
+    "  const [table, setTable]     = useState('" + firstTable + "');",
+    "  const [fromDate, setFrom]   = useState('');",
+    "  const [toDate, setTo]       = useState('');",
+    "  const [records, setRecords] = useState([]);",
+    "  const [msg, setMsg]         = useState('');",
+    '',
+    '  const fetchReport = async () => {',
+    '    if (!table) return;',
+    '    try {',
+    '      const params = {};',
+    '      if (fromDate) params.from = fromDate;',
+    '      if (toDate)   params.to   = toDate;',
+    '      const res = await axios.get(`/api/reports/${table.toLowerCase()}`, { params });',
+    '      setRecords(res.data);',
+    "      setMsg(res.data.length === 0 ? 'No records found for this filter.' : '');",
+    '    } catch {',
+    "      setMsg('Failed to load report.');",
+    '    }',
+    '  };',
+    '',
+    '  // Reload when the selected table changes',
+    '  useEffect(() => { fetchReport(); }, [table]);',
+    '',
+    '  // Download as CSV — no extra library needed',
+    '  const downloadCSV = () => {',
+    '    if (!records.length) return;',
+    '    const headers = Object.keys(records[0]).join(",");',
+    '    const rows    = records.map((r) => Object.values(r).map(String).join(",")).join("\\n");',
+    '    const blob    = new Blob([headers + "\\n" + rows], { type: "text/csv" });',
+    '    const a       = document.createElement("a");',
+    '    a.href        = URL.createObjectURL(blob);',
+    '    a.download    = `${table}-report.csv`;',
+    '    a.click();',
+    '  };',
+    '',
+    '  // Download as PDF using jsPDF + autoTable',
+    '  const downloadPDF = () => {',
+    '    if (!records.length) return;',
+    '    const doc     = new jsPDF("landscape");',
+    '    const headers = Object.keys(records[0]);',
+    '    const rows    = records.map((r) => Object.values(r).map(String));',
+    '    doc.setFontSize(14);',
+    '    doc.text(`${table} Report`, 14, 15);',
+    '    doc.setFontSize(10);',
+    '    doc.text(`Period: ${fromDate || "All"} → ${toDate || "All"}`, 14, 22);',
+    '    autoTable(doc, { head: [headers], body: rows, startY: 28 });',
+    '    doc.save(`${table}-report.pdf`);',
+    '  };',
+    '',
+    '  const cols = records.length ? Object.keys(records[0]) : [];',
+    '',
+    '  return (',
+    '    <div>',
+    '      <Navbar />',
+    '      <div className="p-6">',
+    '        <h2 className="text-xl font-bold mb-4 text-blue-700">Reports</h2>',
+    '',
+    '        {/* Filter bar */}',
+    '        <div className="flex flex-wrap gap-3 mb-4 items-end">',
+    '          <div>',
+    '            <label className="block text-xs text-gray-500 mb-1">Table</label>',
+    '            <select value={table} onChange={(e) => setTable(e.target.value)} className="border p-2 rounded">',
+    tableOptions,
+    '            </select>',
+    '          </div>',
+    '          <div>',
+    '            <label className="block text-xs text-gray-500 mb-1">From Date</label>',
+    '            <input type="date" value={fromDate} max={today}',
+    '              onChange={(e) => setFrom(e.target.value)} className="border p-2 rounded" />',
+    '          </div>',
+    '          <div>',
+    '            <label className="block text-xs text-gray-500 mb-1">To Date</label>',
+    '            <input type="date" value={toDate} min={fromDate} max={today}',
+    '              onChange={(e) => setTo(e.target.value)} className="border p-2 rounded" />',
+    '          </div>',
+    '          <button onClick={fetchReport}',
+    '            className="bg-blue-700 text-white px-4 py-2 rounded hover:bg-blue-800">',
+    '            Generate Report',
+    '          </button>',
+    '          <button onClick={() => { setFrom(""); setTo(""); }}',
+    '            className="bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">',
+    '            Clear',
+    '          </button>',
+    '        </div>',
+    '',
+    '        {msg && <p className="text-gray-500 mb-3 text-sm">{msg}</p>}',
+    '',
+    '        {/* Download buttons — only shown when there are results */}',
+    '        {records.length > 0 && (',
+    '          <div className="flex gap-2 mb-4 items-center">',
+    '            <button onClick={downloadCSV}',
+    '              className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 text-sm">',
+    '              ⬇ Download CSV',
+    '            </button>',
+    '            <button onClick={downloadPDF}',
+    '              className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 text-sm">',
+    '              ⬇ Download PDF',
+    '            </button>',
+    '            <span className="text-gray-400 text-sm">{records.length} record(s)</span>',
+    '          </div>',
+    '        )}',
+    '',
+    '        {/* Results table */}',
+    '        <div className="overflow-x-auto">',
+    '          <table className="w-full border text-sm">',
+    '            <thead className="bg-blue-700 text-white">',
+    '              <tr>{cols.map((c) => <th key={c} className="p-2 border">{c}</th>)}</tr>',
+    '            </thead>',
+    '            <tbody>',
+    '              {records.map((r, i) => (',
+    '                <tr key={i} className="hover:bg-gray-50">',
+    '                  {cols.map((c) => <td key={c} className="p-2 border">{String(r[c] ?? "")}</td>)}',
+    '                </tr>',
+    '              ))}',
+    '            </tbody>',
+    '          </table>',
+    '        </div>',
+    '      </div>',
+    '    </div>',
+    '  );',
+    '}',
+    '',
+    'export default Reports;',
+  ].join('\n');
+}
+
 // ── helpers ────────────────────────────────────────────────────────────────
 
 function pascal(str) { return str.charAt(0).toUpperCase() + str.slice(1); }

package/src/index.js

@@ -1,43 +1,55 @@
-// src/index.js — orchestrator: parse SQL → generate all files → write to disk
+// src/index.js — orchestrator
 import path from 'path';
 import { parseSQL } from './parser.js';
-import { generateRoute, generateServer, generateDb, generateEnv, generateBackendPackage } from './generator/backend.js';
-import { generatePage, generateApp, generateNavbar, generateLogin, generateFrontendPackage, generateViteConfig, generateMain, generateCSS, generateHTML } from './generator/frontend.js';
+import { generateRoute, generateServer, generateDb, generateEnv, generateBackendPackage, generateReportsRoute } from './generator/backend.js';
+import { generatePage, generateApp, generateNavbar, generateLogin, generateFrontendPackage, generateViteConfig, generateMain, generateCSS, generateHTML, generateReportsPage } from './generator/frontend.js';
 import { writeFiles } from './writer.js';
 
-export function generateProject({ dbName, sql, projectName, outputDir }) {
+export function generateProject({ dbName, sql, projectName, outputDir, withReports = false, reportTables = [] }) {
   const outDir = outputDir || process.cwd();
 
-  // 1. Parse SQL
+  // 1. Parse SQL into structured schema
   const tables = parseSQL(sql);
   if (!tables.length) throw new Error('No CREATE TABLE statements found.');
 
   const baseDir = path.join(outDir, projectName);
   const files   = {};
 
-  // 2. Backend files
+  // ── Backend ────────────────────────────────────────────────────────────
   files['backend/package.json'] = generateBackendPackage(projectName);
-  files['backend/server.js']    = generateServer(tables);
+  files['backend/server.js']    = generateServer(tables, withReports);
   files['backend/db.js']        = generateDb(dbName);
   files['backend/.env']         = generateEnv(dbName);
+
   for (const t of tables) {
-    files[`backend/routes/${t.tableName.toLowerCase()}.js`] = generateRoute(t);
+    files['backend/routes/' + t.tableName.toLowerCase() + '.js'] = generateRoute(t);
+  }
+
+  // Reports backend route (only if user opted in)
+  if (withReports && reportTables.length) {
+    files['backend/routes/reports.js'] = generateReportsRoute(reportTables, tables);
   }
 
-  // 3. Frontend files
-  files['frontend/package.json']        = generateFrontendPackage(projectName);
+  // ── Frontend ───────────────────────────────────────────────────────────
+  files['frontend/package.json']        = generateFrontendPackage(projectName, withReports);
   files['frontend/vite.config.js']      = generateViteConfig();
   files['frontend/index.html']          = generateHTML(projectName);
   files['frontend/src/main.jsx']        = generateMain();
   files['frontend/src/index.css']       = generateCSS();
-  files['frontend/src/App.jsx']         = generateApp(tables);
-  files['frontend/src/Navbar.jsx']      = generateNavbar(tables);
+  files['frontend/src/App.jsx']         = generateApp(tables, withReports);
+  files['frontend/src/Navbar.jsx']      = generateNavbar(tables, withReports);
   files['frontend/src/pages/Login.jsx'] = generateLogin(tables[0].tableName.toLowerCase());
+
   for (const t of tables) {
-    files[`frontend/src/pages/${pascal(t.tableName)}.jsx`] = generatePage(t, tables);
+    files['frontend/src/pages/' + pascal(t.tableName) + '.jsx'] = generatePage(t, tables);
+  }
+
+  // Reports frontend page (only if user opted in)
+  if (withReports && reportTables.length) {
+    files['frontend/src/pages/Reports.jsx'] = generateReportsPage(reportTables, tables);
   }
 
-  // 4. Write everything
+  // 2. Write all files to disk
   const written = writeFiles(baseDir, files);
   return { baseDir, files: written };
 }