Document configuration-driven architecture in README and ROADMAP

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>

README.md

@@ -2,14 +2,41 @@
 
 A production-ready Next.js 16 application with database management capabilities, built with TypeScript, Tailwind CSS, and DrizzleORM for connecting to multiple database backends.
 
+## 🏗️ Configuration-Driven Architecture
+
+This project features a **unique JSON-driven architecture** that makes adding features incredibly simple:
+
+- **Define features in JSON** (`src/config/features.json`) - no need to write boilerplate code
+- **Automatic UI generation** - navigation and forms are generated by looping over configuration
+- **Reusable components** - shared `DataGrid`, `FormDialog`, and `ConfirmDialog` components
+- **Feature flags** - enable/disable features with a single boolean in the config
+- **Type-safe** - TypeScript ensures configuration integrity
+
+**Example**: To add a new feature, simply add an entry to `features.json`:
+
+```json
+{
+  "id": "my-feature",
+  "name": "My Feature",
+  "enabled": true,
+  "endpoints": [...],
+  "ui": { "showInNav": true, "icon": "Star", "actions": ["create", "read"] }
+}
+```
+
+The system automatically generates the navigation item, API routes, and UI components!
+
 ## Overview
 
 This project is a full-stack web application featuring:
 - **Next.js 16** with App Router for server-side rendering and static site generation
+- **Configuration-driven architecture** - Features defined in JSON, UI generated automatically
+- **Database CRUD operations** - Create, read, update, and delete records through a clean UI
 - **DrizzleORM** for type-safe database operations with support for PostgreSQL, MySQL, and SQLite
 - **PostgreSQL 15** included as default database in Docker container
 - **Multi-database support** - Connect to external PostgreSQL, MySQL, or SQLite servers
-- **Authentication** using Clerk with support for multiple auth providers
+- **Admin panel** with authentication, table management, and SQL query interface
+- **Authentication** using JWT with secure session management
 - **TypeScript** for type safety across the entire stack
 - **Tailwind CSS 4** for modern, responsive styling
 - **Docker** support for easy deployment
@@ -18,12 +45,17 @@ This project is a full-stack web application featuring:
 ## Features
 
 - ⚡ **Next.js 16** with App Router support
+- 🏗️ **Configuration-Driven Architecture** - Define features in JSON, auto-generate UI
 - 🔥 **TypeScript** for type safety
 - 💎 **Tailwind CSS 4** for styling
-- 🔒 **Clerk Authentication** with social login support
+- 🗄️ **Database CRUD Operations** - Full Create, Read, Update, Delete functionality
+- 🛠️ **Admin Panel** - Manage tables, columns, and data through a beautiful UI
+- 📊 **SQL Query Interface** - Execute custom queries with safety validation
+- 🔒 **JWT Authentication** with secure session management
 - 📦 **DrizzleORM** - Support for PostgreSQL, MySQL, and SQLite
 - 🔌 **Multi-Database Support** - Connect to custom database servers
 - 🐳 **Docker** with included PostgreSQL 15 (default option)
+- ♻️ **Reusable Components** - DataGrid, FormDialog, ConfirmDialog for consistent UX
 - 🧪 **Testing Suite** - Vitest for unit tests, Playwright for E2E
 - 🎨 **Storybook** for UI component development
 - 📏 **ESLint & Prettier** for code quality
@@ -57,14 +89,17 @@ Create a `.env.local` file:
 # Database
 DATABASE_URL=postgresql://docker:docker@localhost:5432/postgres
 
-# Clerk Authentication
-NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_key
-CLERK_SECRET_KEY=your_secret
+# JWT Secret (required for admin authentication)
+JWT_SECRET=your_secure_random_secret_here
 
 # Optional: Admin user creation
 CREATE_ADMIN_USER=true
 ADMIN_USERNAME=admin
 ADMIN_PASSWORD=admin123
+
+# Optional: Clerk Authentication
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_key
+CLERK_SECRET_KEY=your_secret
 ```
 
 4. Run the development server:
@@ -74,6 +109,21 @@ npm run dev
 
 5. Open http://localhost:3000 in your browser.
 
+### Admin Panel
+
+Access the admin panel at http://localhost:3000/admin/login
+
+**Default credentials** (if using db:seed-admin):
+- Username: `admin`
+- Password: `admin123` (change this in production!)
+
+**Features available in the admin panel**:
+- 📊 **Table Browser**: View all database tables and their data
+- ✏️ **CRUD Operations**: Create, edit, and delete records
+- 🔍 **SQL Query Interface**: Execute custom SELECT queries
+- 🛠️ **Schema Inspector**: View table structures, columns, and relationships
+- 🔐 **Secure Access**: JWT-based authentication with session management
+
 ### Docker Deployment
 
 The Docker container includes PostgreSQL 15 as the default database option. You can also connect to external database servers.
@@ -103,9 +153,17 @@ The Docker container includes both PostgreSQL and the Next.js application, but P
 ```
 ├── src/
 │   ├── app/              # Next.js App Router pages
+│   │   ├── admin/        # Admin panel pages (dashboard, login)
+│   │   └── api/admin/    # Admin API routes (CRUD, tables, queries)
 │   ├── components/       # React components
+│   │   └── admin/        # Reusable admin components (DataGrid, FormDialog, etc.)
+│   ├── config/           # Configuration files
+│   │   └── features.json # Feature definitions (JSON-driven architecture)
 │   ├── models/           # Database models (DrizzleORM schemas)
 │   ├── utils/            # Utility functions
+│   │   ├── featureConfig.ts  # Feature configuration loader
+│   │   ├── db.ts         # Database connection
+│   │   └── session.ts    # JWT session management
 │   ├── libs/             # Third-party library configurations
 │   └── locales/          # i18n translations
 ├── tests/
@@ -117,6 +175,69 @@ The Docker container includes both PostgreSQL and the Next.js application, but P
 └── docker-compose.yml    # Docker Compose setup
 ```
 
+## Configuration-Driven Features
+
+### Adding a New Feature
+
+To add a new feature to the admin panel:
+
+1. **Define the feature in `src/config/features.json`**:
+```json
+{
+  "id": "my-new-feature",
+  "name": "My New Feature",
+  "description": "Description of what it does",
+  "enabled": true,
+  "priority": "high",
+  "endpoints": [
+    {
+      "path": "/api/admin/my-feature",
+      "methods": ["GET", "POST"],
+      "description": "API endpoint description"
+    }
+  ],
+  "ui": {
+    "showInNav": true,
+    "icon": "Settings",
+    "actions": ["create", "read", "update", "delete"]
+  }
+}
+```
+
+2. **Add navigation item to `navItems` array** (if needed):
+```json
+{
+  "id": "my-feature",
+  "label": "My Feature",
+  "icon": "Settings",
+  "featureId": "my-new-feature"
+}
+```
+
+3. **Create API route** at `src/app/api/admin/my-feature/route.ts`
+
+4. **The UI is automatically generated** from your configuration!
+
+### Reusable Components
+
+Use these components for consistent UX:
+
+- **`<DataGrid>`** - Display table data with edit/delete actions
+- **`<FormDialog>`** - Create/edit forms with automatic field generation
+- **`<ConfirmDialog>`** - Confirmation dialogs for destructive actions
+
+Example:
+```tsx
+import DataGrid from '@/components/admin/DataGrid';
+
+<DataGrid
+  columns={[{ name: 'id' }, { name: 'name' }]}
+  rows={data}
+  onEdit={(row) => handleEdit(row)}
+  onDelete={(row) => handleDelete(row)}
+/>
+```
+
 ## Available Scripts
 
 ### Development
@@ -181,7 +302,33 @@ DATABASE_URL=file:./local.db
 
 ## Authentication
 
-This project uses [Clerk](https://clerk.com) for authentication. To set up:
+This project includes a **JWT-based admin authentication system** with secure session management:
+
+- **Admin Login**: Username/password authentication at `/admin/login`
+- **Session Management**: JWT tokens stored in HTTP-only cookies
+- **Protected Routes**: Admin API endpoints require valid session
+- **Secure**: bcrypt password hashing, 24-hour session expiration
+
+### Admin User Setup
+
+Create an admin user by running:
+
+```bash
+npm run db:seed-admin
+```
+
+Or set environment variables for automatic creation on startup:
+
+```env
+CREATE_ADMIN_USER=true
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=your_secure_password
+JWT_SECRET=your_jwt_secret_here
+```
+
+### Clerk Integration (Optional)
+
+The project also supports [Clerk](https://clerk.com) for additional authentication options:
 
 1. Create a Clerk account and application
 2. Copy your API keys to `.env.local`:

ROADMAP.md

@@ -2,13 +2,41 @@
 
 This document outlines the planned features, improvements, and technical debt items for the project. Items are organized by priority and implementation timeline.
 
+## Architecture Overview
+
+🏗️ **Configuration-Driven Feature System**
+
+This project uses a **JSON-driven architecture** that allows features to be defined declaratively and automatically generated:
+
+- **Feature Configuration** (`src/config/features.json`): Define features, endpoints, UI elements, and data types in JSON
+- **Automatic UI Generation**: Navigation items and components are generated by looping over the configuration
+- **Reusable Components**: Shared components (`DataGrid`, `FormDialog`, `ConfirmDialog`) are used across all features
+- **Easy Feature Management**: Enable/disable features by changing a single flag in the JSON
+- **Type-Safe**: TypeScript interfaces ensure type safety across the configuration
+
+**Benefits:**
+- Add new features by updating JSON configuration
+- Consistent UI patterns across all features
+- Reduced code duplication
+- Easy maintenance and scalability
+- Feature flags for controlled rollouts
+
+See `src/config/features.json` for the complete feature configuration.
+
 ## Current Status
 
 ✅ **Completed**
 - Next.js 16 with App Router
 - PostgreSQL 15 integration (included as default in Docker)
 - DrizzleORM for database operations (supports PostgreSQL, MySQL, SQLite)
+- **Configuration-driven feature system with JSON**
+- **Reusable admin UI components (DataGrid, FormDialog, ConfirmDialog)**
+- **Database CRUD operations API (Create, Read, Update, Delete)**
+- **Table schema inspection API**
+- **Table management API (Create, Drop tables)**
+- **Column management API (Add, Modify, Delete columns)**
 - Basic authentication system (Clerk integration available)
+- **Admin authentication with JWT and session management**
 - Docker containerization with optional embedded PostgreSQL
 - Unit testing with Vitest
 - E2E testing with Playwright
@@ -23,17 +51,21 @@ This document outlines the planned features, improvements, and technical debt it
 
 ### High Priority
 
-- [ ] **Database CRUD Operations**
-  - Create schema management interface
-  - Implement table creation/editing UI
-  - Add column type management (add, modify, delete columns)
-  - Implement record CRUD operations (Create, Read, Update, Delete)
-  - Add data validation and constraints management
-  - Build query builder interface
-  - Add foreign key relationship management
-  - Implement index management UI
-  - Add table migration history viewer
-  - Create database backup/restore UI
+- [x] **Database CRUD Operations** ✅ **IMPLEMENTED**
+  - [x] ✅ Implement record CRUD operations (Create, Read, Update, Delete via API)
+  - [x] ✅ Build reusable DataGrid component with edit/delete actions
+  - [x] ✅ Create FormDialog component for create/edit operations
+  - [x] ✅ Add ConfirmDialog component for delete confirmations
+  - [x] ✅ Implement table schema inspection API
+  - [ ] Create schema management interface
+  - [ ] Implement table creation/editing UI (API ready, UI pending)
+  - [ ] Add column type management UI (API ready, UI pending)
+  - [ ] Add data validation and constraints management
+  - [ ] Build query builder interface
+  - [ ] Add foreign key relationship management
+  - [ ] Implement index management UI
+  - [ ] Add table migration history viewer
+  - [ ] Create database backup/restore UI
 
 - [ ] **Multi-Database Server Support** 🔌
   - **Connection Management**

src/app/admin/dashboard/page.tsx.backup

@@ -0,0 +1,369 @@
+'use client';
+
+import AddIcon from '@mui/icons-material/Add';
+import CodeIcon from '@mui/icons-material/Code';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import LogoutIcon from '@mui/icons-material/Logout';
+import StorageIcon from '@mui/icons-material/Storage';
+import TableChartIcon from '@mui/icons-material/TableChart';
+import {
+  Alert,
+  AppBar,
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Drawer,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Toolbar,
+  Typography,
+} from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
+import { theme } from '@/utils/theme';
+
+const DRAWER_WIDTH = 240;
+
+type TabPanelProps = {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+};
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`tabpanel-${index}`}
+      aria-labelledby={`tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+export default function AdminDashboard() {
+  const router = useRouter();
+  const [tabValue, setTabValue] = useState(0);
+  const [tables, setTables] = useState<any[]>([]);
+  const [selectedTable, setSelectedTable] = useState<string>('');
+  const [queryText, setQueryText] = useState('');
+  const [queryResult, setQueryResult] = useState<any>(null);
+  const [tableSchema, setTableSchema] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+  
+  // Dialog states
+  const [openCreateDialog, setOpenCreateDialog] = useState(false);
+  const [openEditDialog, setOpenEditDialog] = useState(false);
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+  const [editingRecord, setEditingRecord] = useState<any>(null);
+  const [deletingRecord, setDeletingRecord] = useState<any>(null);
+  const [formData, setFormData] = useState<any>({});
+
+  const fetchTables = useCallback(async () => {
+    try {
+      const response = await fetch('/api/admin/tables');
+      if (!response.ok) {
+        if (response.status === 401) {
+          router.push('/admin/login');
+          return;
+        }
+        throw new Error('Failed to fetch tables');
+      }
+      const data = await response.json();
+      setTables(data.tables);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }, [router]);
+
+  useEffect(() => {
+    fetchTables();
+  }, [fetchTables]);
+
+  const handleTableClick = async (tableName: string) => {
+    setSelectedTable(tableName);
+    setLoading(true);
+    setError('');
+    setSuccessMessage('');
+    setQueryResult(null);
+
+    try {
+      // Fetch table data
+      const dataResponse = await fetch('/api/admin/table-data', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ tableName }),
+      });
+
+      if (!response.ok) {
+        const data = await dataResponse.json();
+        throw new Error(data.error || 'Query failed');
+      }
+
+      const data = await dataResponse.json();
+      setQueryResult(data);
+      
+      // Fetch table schema
+      const schemaResponse = await fetch('/api/admin/table-schema', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ tableName }),
+      });
+      
+      if (schemaResponse.ok) {
+        const schemaData = await schemaResponse.json();
+        setTableSchema(schemaData);
+      }
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleQuerySubmit = async () => {
+    if (!queryText.trim()) {
+      setError('Please enter a query');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    setQueryResult(null);
+
+    try {
+      const response = await fetch('/api/admin/query', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ query: queryText }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Query failed');
+      }
+
+      setQueryResult(data);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      await fetch('/api/admin/logout', {
+        method: 'POST',
+      });
+      router.push('/admin/login');
+      router.refresh();
+    } catch (err) {
+      console.error('Logout error:', err);
+    }
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Box sx={{ display: 'flex' }}>
+        <AppBar
+          position="fixed"
+          sx={{ zIndex: theme => theme.zIndex.drawer + 1 }}
+        >
+          <Toolbar>
+            <StorageIcon sx={{ mr: 2 }} />
+            <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
+              Postgres Admin Panel
+            </Typography>
+            <Button color="inherit" onClick={handleLogout} startIcon={<LogoutIcon />}>
+              Logout
+            </Button>
+          </Toolbar>
+        </AppBar>
+
+        <Drawer
+          variant="permanent"
+          sx={{
+            'width': DRAWER_WIDTH,
+            'flexShrink': 0,
+            '& .MuiDrawer-paper': {
+              width: DRAWER_WIDTH,
+              boxSizing: 'border-box',
+            },
+          }}
+        >
+          <Toolbar />
+          <Box sx={{ overflow: 'auto' }}>
+            <List>
+              <ListItem disablePadding>
+                <ListItemButton onClick={() => setTabValue(0)}>
+                  <ListItemIcon>
+                    <StorageIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Tables" />
+                </ListItemButton>
+              </ListItem>
+              <ListItem disablePadding>
+                <ListItemButton onClick={() => setTabValue(1)}>
+                  <ListItemIcon>
+                    <CodeIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="SQL Query" />
+                </ListItemButton>
+              </ListItem>
+            </List>
+          </Box>
+        </Drawer>
+
+        <Box
+          component="main"
+          sx={{
+            flexGrow: 1,
+            bgcolor: 'background.default',
+            p: 3,
+          }}
+        >
+          <Toolbar />
+
+          <TabPanel value={tabValue} index={0}>
+            <Typography variant="h5" gutterBottom>
+              Database Tables
+            </Typography>
+
+            <Paper sx={{ mt: 2, mb: 2 }}>
+              <List>
+                {tables.map(table => (
+                  <ListItem key={table.table_name} disablePadding>
+                    <ListItemButton onClick={() => handleTableClick(table.table_name)}>
+                      <ListItemIcon>
+                        <StorageIcon />
+                      </ListItemIcon>
+                      <ListItemText primary={table.table_name} />
+                    </ListItemButton>
+                  </ListItem>
+                ))}
+              </List>
+            </Paper>
+
+            {selectedTable && (
+              <Typography variant="h6" gutterBottom>
+                Table:
+                {' '}
+                {selectedTable}
+              </Typography>
+            )}
+          </TabPanel>
+
+          <TabPanel value={tabValue} index={1}>
+            <Typography variant="h5" gutterBottom>
+              SQL Query Interface
+            </Typography>
+
+            <Paper sx={{ p: 2, mt: 2 }}>
+              <TextField
+                fullWidth
+                multiline
+                rows={6}
+                label="SQL Query (SELECT only)"
+                variant="outlined"
+                value={queryText}
+                onChange={e => setQueryText(e.target.value)}
+                placeholder="SELECT * FROM your_table LIMIT 10;"
+                sx={{ mb: 2 }}
+              />
+              <Button
+                variant="contained"
+                onClick={handleQuerySubmit}
+                disabled={loading}
+              >
+                {loading ? <CircularProgress size={24} /> : 'Execute Query'}
+              </Button>
+            </Paper>
+          </TabPanel>
+
+          {error && (
+            <Alert severity="error" sx={{ mt: 2 }}>
+              {error}
+            </Alert>
+          )}
+
+          {loading && (
+            <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
+              <CircularProgress />
+            </Box>
+          )}
+
+          {queryResult && !loading && (
+            <Paper sx={{ mt: 2, overflow: 'auto' }}>
+              <Box sx={{ p: 2 }}>
+                <Typography variant="subtitle2" gutterBottom>
+                  Rows returned:
+                  {' '}
+                  {queryResult.rowCount}
+                </Typography>
+              </Box>
+              <TableContainer>
+                <Table size="small">
+                  <TableHead>
+                    <TableRow>
+                      {queryResult.fields?.map((field: any) => (
+                        <TableCell key={field.name}>
+                          <strong>{field.name}</strong>
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {queryResult.rows?.map((row: any, idx: number) => (
+                      <TableRow key={idx}>
+                        {queryResult.fields?.map((field: any) => (
+                          <TableCell key={field.name}>
+                            {row[field.name] !== null
+                              ? String(row[field.name])
+                              : 'NULL'}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </Paper>
+          )}
+        </Box>
+      </Box>
+    </ThemeProvider>
+  );
+}