first commit

.gitignore

@@ -0,0 +1,80 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Environment variables
+.env
+.env.*
+!.env.example
+
+# Build output
+dist/
+build/
+out/
+.next/
+.nuxt/
+.cache/
+
+# Coverage directory
+coverage/
+.nyc_output/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Parcel cache
+.cache/
+.parcel-cache/
+
+# Vite
+vite.svg
+
+# TypeScript
+*.tsbuildinfo
+
+# Mac files
+.DS_Store
+
+# Windows files
+Thumbs.db
+
+# IDEs & Editors
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Docker
+docker-compose.override.yml
+uploads/
+# Local database
+*.sqlite
+*.sqlite3
+
+# Misc
+*.tgz
+*.bak
+
+# PM2
+.pm2/
+
+# Logs (custom)
+logs/
+*.log

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "events-api",
+  "version": "1.0.0",
+  "description": "Node.js API for events management with MySQL and file upload",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "nodejs",
+    "express",
+    "mysql",
+    "multer",
+    "api",
+    "crud"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.18.2",
+    "mysql2": "^3.6.0",
+    "multer": "^1.4.5-lts.1",
+    "dotenv": "^16.3.1",
+    "cors": "^2.8.5"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.1"
+  }
+}

server.js

@@ -0,0 +1,747 @@
+const express = require('express');
+const mysql = require('mysql2/promise');
+const multer = require('multer');
+const path = require('path');
+const fs = require('fs');
+require('dotenv').config();
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+// CORS Middleware - Add this before other middleware
+app.use((req, res, next) => {
+    res.header('Access-Control-Allow-Origin', '*');
+    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
+
+    // Handle preflight requests
+    if (req.method === 'OPTIONS') {
+        res.sendStatus(200);
+    } else {
+        next();
+    }
+});
+
+// Middleware
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// Create uploads directory if it doesn't exist
+const uploadsDir = path.join(__dirname, 'uploads');
+if (!fs.existsSync(uploadsDir)) {
+    fs.mkdirSync(uploadsDir, { recursive: true });
+}
+
+// Serve static files from uploads directory
+app.use('/uploads', express.static('uploads'));
+
+// MySQL connection pool with optimized settings
+const pool = mysql.createPool({
+    host: process.env.DB_HOST,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASSWORD,
+    database: process.env.DB_NAME,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0,
+    acquireTimeout: 60000,
+    timeout: 60000,
+    enableKeepAlive: true,
+    keepAliveInitialDelay: 0,
+    reconnect: true,
+    idleTimeout: 300000, // 5 minutes
+    maxIdle: 10,
+    maxReuse: 1000,
+    charset: 'utf8mb4'
+});
+
+// Test database connection on startup
+async function testDatabaseConnection() {
+    try {
+        const connection = await pool.getConnection();
+        console.log('✅ Database connected successfully');
+        await connection.execute('SELECT 1');
+        connection.release();
+    } catch (error) {
+        console.error('❌ Database connection failed:', error.message);
+        process.exit(1);
+    }
+}
+
+// Keep connections alive with periodic ping
+setInterval(async () => {
+    try {
+        const connection = await pool.getConnection();
+        await connection.execute('SELECT 1');
+        connection.release();
+    } catch (error) {
+        console.error('Keep-alive ping failed:', error.message);
+    }
+}, 240000); // Every 4 minutes
+
+// Multer configuration for file uploads
+const storage = multer.diskStorage({
+    destination: function (req, file, cb) {
+        cb(null, 'uploads/');
+    },
+    filename: function (req, file, cb) {
+        // Create timestamp-based filename
+        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+        const randomSuffix = Math.round(Math.random() * 1E9);
+        const fileExtension = path.extname(file.originalname);
+        const baseName = path.basename(file.originalname, fileExtension);
+
+        // Format: originalname_timestamp_random.ext
+        const filename = `${baseName}_${timestamp}_${randomSuffix}${fileExtension}`;
+        cb(null, filename);
+    }
+});
+
+const upload = multer({
+    storage: storage,
+    limits: {
+        fileSize: 10 * 1024 * 1024 // 10MB limit
+    },
+    fileFilter: function (req, file, cb) {
+        // Accept images only
+        if (!file.originalname.match(/\.(jpg|jpeg|png|gif|webp)$/)) {
+            return cb(new Error('Only image files are allowed!'), false);
+        }
+        cb(null, true);
+    }
+});
+
+// ===============================
+// HEALTH CHECK & STATUS ROUTES
+// ===============================
+
+// Health check endpoint
+app.get('/api/health', async (req, res) => {
+    try {
+        const startTime = Date.now();
+        const connection = await pool.getConnection();
+        const [rows] = await connection.execute('SELECT 1 as health_check');
+        connection.release();
+        const dbResponseTime = Date.now() - startTime;
+
+        res.json({
+            success: true,
+            status: 'healthy',
+            timestamp: new Date().toISOString(),
+            database: {
+                status: 'connected',
+                responseTime: `${dbResponseTime}ms`
+            },
+            uptime: process.uptime(),
+            memory: process.memoryUsage()
+        });
+    } catch (error) {
+        res.status(500).json({
+            success: false,
+            status: 'unhealthy',
+            error: error.message,
+            timestamp: new Date().toISOString()
+        });
+    }
+});
+
+// Database status endpoint
+app.get('/api/db-status', async (req, res) => {
+    try {
+        const connection = await pool.getConnection();
+        const [rows] = await connection.execute('SHOW STATUS LIKE "Threads_connected"');
+        connection.release();
+
+        res.json({
+            success: true,
+            data: {
+                activeConnections: rows[0]?.Value || 'Unknown',
+                poolStatus: {
+                    totalConnections: pool.pool._allConnections.length,
+                    freeConnections: pool.pool._freeConnections.length,
+                    acquiringConnections: pool.pool._acquiringConnections.length
+                }
+            }
+        });
+    } catch (error) {
+        res.status(500).json({
+            success: false,
+            message: 'Database status check failed',
+            error: error.message
+        });
+    }
+});
+
+// ===============================
+// EVENTS CRUD ROUTES
+// ===============================
+
+// GET all events
+app.get('/api/events', async (req, res) => {
+    try {
+        const [rows] = await pool.execute('SELECT * FROM events ORDER BY year DESC, id DESC');
+        res.json({
+            success: true,
+            data: rows
+        });
+    } catch (error) {
+        console.error('Error fetching events:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error fetching events',
+            error: error.message
+        });
+    }
+});
+
+// GET single event by ID
+app.get('/api/events/:id', async (req, res) => {
+    try {
+        const [rows] = await pool.execute('SELECT * FROM events WHERE id = ?', [req.params.id]);
+        if (rows.length === 0) {
+            return res.status(404).json({
+                success: false,
+                message: 'Event not found'
+            });
+        }
+        res.json({
+            success: true,
+            data: rows[0]
+        });
+    } catch (error) {
+        console.error('Error fetching event:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error fetching event',
+            error: error.message
+        });
+    }
+});
+
+// POST create new event
+app.post('/api/events', async (req, res) => {
+    try {
+        const { year, eventdate, eventtitle, eventimageurl, eventdescription } = req.body;
+
+        if (!year || !eventtitle) {
+            return res.status(400).json({
+                success: false,
+                message: 'Year and event title are required'
+            });
+        }
+
+        const [result] = await pool.execute(
+            'INSERT INTO events (year, eventdate, eventtitle, eventimageurl, eventdescription) VALUES (?, ?, ?, ?, ?)',
+            [year, eventdate, eventtitle, eventimageurl, eventdescription]
+        );
+
+        res.status(201).json({
+            success: true,
+            message: 'Event created successfully',
+            data: { id: result.insertId }
+        });
+    } catch (error) {
+        console.error('Error creating event:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error creating event',
+            error: error.message
+        });
+    }
+});
+
+// PUT update event
+app.put('/api/events/:id', async (req, res) => {
+    try {
+        const { year, eventdate, eventtitle, eventimageurl, eventdescription } = req.body;
+        const eventId = req.params.id;
+
+        if (!year || !eventtitle) {
+            return res.status(400).json({
+                success: false,
+                message: 'Year and event title are required'
+            });
+        }
+
+        const [result] = await pool.execute(
+            'UPDATE events SET year = ?, eventdate = ?, eventtitle = ?, eventimageurl = ?, eventdescription = ? WHERE id = ?',
+            [year, eventdate, eventtitle, eventimageurl, eventdescription, eventId]
+        );
+
+        if (result.affectedRows === 0) {
+            return res.status(404).json({
+                success: false,
+                message: 'Event not found'
+            });
+        }
+
+        res.json({
+            success: true,
+            message: 'Event updated successfully'
+        });
+    } catch (error) {
+        console.error('Error updating event:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error updating event',
+            error: error.message
+        });
+    }
+});
+
+// DELETE event
+app.delete('/api/events/:id', async (req, res) => {
+    try {
+        const [result] = await pool.execute('DELETE FROM events WHERE id = ?', [req.params.id]);
+
+        if (result.affectedRows === 0) {
+            return res.status(404).json({
+                success: false,
+                message: 'Event not found'
+            });
+        }
+
+        res.json({
+            success: true,
+            message: 'Event deleted successfully'
+        });
+    } catch (error) {
+        console.error('Error deleting event:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error deleting event',
+            error: error.message
+        });
+    }
+});
+
+// ===============================
+// EVENT_IMAGES CRUD ROUTES
+// ===============================
+
+// GET all event images
+app.get('/api/event-images', async (req, res) => {
+    try {
+        const [rows] = await pool.execute(`
+            SELECT ei.*, e.eventtitle 
+            FROM event_images ei 
+            LEFT JOIN events e ON ei.eventid = e.id 
+            ORDER BY ei.id DESC
+        `);
+        res.json({
+            success: true,
+            data: rows
+        });
+    } catch (error) {
+        console.error('Error fetching event images:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error fetching event images',
+            error: error.message
+        });
+    }
+});
+
+// GET event images by event ID
+app.get('/api/event-images/event/:eventId', async (req, res) => {
+    try {
+        const [rows] = await pool.execute('SELECT * FROM event_images WHERE eventid = ?', [req.params.eventId]);
+        res.json({
+            success: true,
+            data: rows
+        });
+    } catch (error) {
+        console.error('Error fetching event images:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error fetching event images',
+            error: error.message
+        });
+    }
+});
+
+// GET single event image by ID
+app.get('/api/event-images/:id', async (req, res) => {
+    try {
+        const [rows] = await pool.execute('SELECT * FROM event_images WHERE id = ?', [req.params.id]);
+        if (rows.length === 0) {
+            return res.status(404).json({
+                success: false,
+                message: 'Event image not found'
+            });
+        }
+        res.json({
+            success: true,
+            data: rows[0]
+        });
+    } catch (error) {
+        console.error('Error fetching event image:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error fetching event image',
+            error: error.message
+        });
+    }
+});
+
+// POST create new event image
+app.post('/api/event-images', async (req, res) => {
+    try {
+        const { eventid, imageurl } = req.body;
+
+        if (!eventid || !imageurl) {
+            return res.status(400).json({
+                success: false,
+                message: 'Event ID and image URL are required'
+            });
+        }
+
+        // Check if event exists
+        const [eventRows] = await pool.execute('SELECT id FROM events WHERE id = ?', [eventid]);
+        if (eventRows.length === 0) {
+            return res.status(400).json({
+                success: false,
+                message: 'Event does not exist'
+            });
+        }
+
+        const [result] = await pool.execute(
+            'INSERT INTO event_images (eventid, imageurl) VALUES (?, ?)',
+            [eventid, imageurl]
+        );
+
+        res.status(201).json({
+            success: true,
+            message: 'Event image created successfully',
+            data: { id: result.insertId }
+        });
+    } catch (error) {
+        console.error('Error creating event image:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error creating event image',
+            error: error.message
+        });
+    }
+});
+
+app.post('/api/event-images/bulk', async (req, res) => {
+    try {
+        const { eventid, imageurl } = req.body;
+
+        // Input validation
+        if (
+            !eventid || typeof eventid !== 'number' || isNaN(eventid) ||
+            !Array.isArray(imageurl) || imageurl.length === 0 ||
+            imageurl.some(url => typeof url !== 'string' || url.trim() === '')
+        ) {
+            return res.status(400).json({
+                success: false,
+                message: 'Valid event ID and a non-empty array of image URLs (as strings) are required'
+            });
+        }
+
+        // Check if the event exists
+        const [eventRows] = await pool.execute(
+            'SELECT id FROM events WHERE id = ?',
+            [eventid]
+        );
+
+        if (eventRows.length === 0) {
+            return res.status(400).json({
+                success: false,
+                message: 'Event does not exist'
+            });
+        }
+
+        // Prepare the SQL placeholders and values
+        const placeholders = imageurl.map(() => '(?, ?)').join(', ');
+        const values = imageurl.flatMap(url => [eventid, url]);
+
+        // Debug logs (optional)
+        // console.log('SQL:', `INSERT INTO event_images (eventid, imageurl) VALUES ${placeholders}`);
+        // console.log('Values:', values);
+
+        // Execute the bulk insert
+        const [result] = await pool.execute(
+            `INSERT INTO event_images (eventid, imageurl) VALUES ${placeholders}`,
+            values
+        );
+
+        res.status(201).json({
+            success: true,
+            message: 'Event images inserted successfully',
+            insertedCount: imageurl.length,
+            data: {
+                firstInsertId: result.insertId,
+                affectedRows: result.affectedRows
+            }
+        });
+
+    } catch (error) {
+        console.error('Error inserting event images in bulk:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error inserting event images',
+            error: error.message
+        });
+    }
+});
+
+
+
+// PUT update event image
+app.put('/api/event-images/:id', async (req, res) => {
+    try {
+        const { eventid, imageurl } = req.body;
+        const imageId = req.params.id;
+
+        if (!eventid || !imageurl) {
+            return res.status(400).json({
+                success: false,
+                message: 'Event ID and image URL are required'
+            });
+        }
+
+        // Check if event exists
+        const [eventRows] = await pool.execute('SELECT id FROM events WHERE id = ?', [eventid]);
+        if (eventRows.length === 0) {
+            return res.status(400).json({
+                success: false,
+                message: 'Event does not exist'
+            });
+        }
+
+        const [result] = await pool.execute(
+            'UPDATE event_images SET eventid = ?, imageurl = ? WHERE id = ?',
+            [eventid, imageurl, imageId]
+        );
+
+        if (result.affectedRows === 0) {
+            return res.status(404).json({
+                success: false,
+                message: 'Event image not found'
+            });
+        }
+
+        res.json({
+            success: true,
+            message: 'Event image updated successfully'
+        });
+    } catch (error) {
+        console.error('Error updating event image:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error updating event image',
+            error: error.message
+        });
+    }
+});
+
+// DELETE event image
+app.delete('/api/event-images/:id', async (req, res) => {
+    try {
+        const [result] = await pool.execute('DELETE FROM event_images WHERE id = ?', [req.params.id]);
+
+        if (result.affectedRows === 0) {
+            return res.status(404).json({
+                success: false,
+                message: 'Event image not found'
+            });
+        }
+
+        res.json({
+            success: true,
+            message: 'Event image deleted successfully'
+        });
+    } catch (error) {
+        console.error('Error deleting event image:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error deleting event image',
+            error: error.message
+        });
+    }
+});
+
+// ===============================
+// FILE UPLOAD ROUTES
+// ===============================
+
+// Upload single file
+app.post('/api/upload/single', upload.single('file'), async (req, res) => {
+    try {
+        if (!req.file) {
+            return res.status(400).json({
+                success: false,
+                message: 'No file uploaded'
+            });
+        }
+
+        const filePath = `/uploads/${req.file.filename}`;
+        const timestamp = new Date().toISOString();
+
+        res.json({
+            success: true,
+            message: 'File uploaded successfully',
+            data: {
+                filename: req.file.filename,
+                originalname: req.file.originalname,
+                path: filePath,
+                fullUrl: `${req.protocol}://${req.get('host')}${filePath}`,
+                size: req.file.size,
+                mimetype: req.file.mimetype,
+                uploadedAt: timestamp
+            }
+        });
+    } catch (error) {
+        console.error('Error uploading file:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error uploading file',
+            error: error.message
+        });
+    }
+});
+
+// Upload multiple files
+app.post('/api/upload/multiple', upload.array('files', 10), async (req, res) => {
+    try {
+        if (!req.files || req.files.length === 0) {
+            return res.status(400).json({
+                success: false,
+                message: 'No files uploaded'
+            });
+        }
+
+        const timestamp = new Date().toISOString();
+        const uploadedFiles = req.files.map(file => ({
+            filename: file.filename,
+            originalname: file.originalname,
+            path: `/uploads/${file.filename}`,
+            fullUrl: `${req.protocol}://${req.get('host')}/uploads/${file.filename}`,
+            size: file.size,
+            mimetype: file.mimetype,
+            uploadedAt: timestamp
+        }));
+
+        res.json({
+            success: true,
+            message: `${req.files.length} files uploaded successfully`,
+            data: uploadedFiles,
+            uploadedAt: timestamp
+        });
+    } catch (error) {
+        console.error('Error uploading files:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error uploading files',
+            error: error.message
+        });
+    }
+});
+
+// Upload and save to event_images table
+app.post('/api/upload/event-images/:eventId', upload.array('files', 10), async (req, res) => {
+    try {
+        const eventId = req.params.eventId;
+
+        if (!req.files || req.files.length === 0) {
+            return res.status(400).json({
+                success: false,
+                message: 'No files uploaded'
+            });
+        }
+
+        // Check if event exists
+        const [eventRows] = await pool.execute('SELECT id FROM events WHERE id = ?', [eventId]);
+        if (eventRows.length === 0) {
+            return res.status(400).json({
+                success: false,
+                message: 'Event does not exist'
+            });
+        }
+
+        const timestamp = new Date().toISOString();
+        const uploadedFiles = [];
+
+        // Insert each uploaded file into event_images table
+        for (const file of req.files) {
+            const filePath = `/uploads/${file.filename}`;
+
+            const [result] = await pool.execute(
+                'INSERT INTO event_images (eventid, imageurl) VALUES (?, ?)',
+                [eventId, filePath]
+            );
+
+            uploadedFiles.push({
+                id: result.insertId,
+                filename: file.filename,
+                originalname: file.originalname,
+                path: filePath,
+                fullUrl: `${req.protocol}://${req.get('host')}${filePath}`,
+                size: file.size,
+                mimetype: file.mimetype,
+                uploadedAt: timestamp,
+                eventId: parseInt(eventId)
+            });
+        }
+
+        res.json({
+            success: true,
+            message: `${req.files.length} files uploaded and saved to database`,
+            data: uploadedFiles,
+            uploadedAt: timestamp
+        });
+    } catch (error) {
+        console.error('Error uploading and saving files:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Error uploading and saving files',
+            error: error.message
+        });
+    }
+});
+
+// Error handling middleware
+app.use((error, req, res, next) => {
+    if (error instanceof multer.MulterError) {
+        if (error.code === 'LIMIT_FILE_SIZE') {
+            return res.status(400).json({
+                success: false,
+                message: 'File too large. Maximum size is 10MB.'
+            });
+        }
+    }
+
+    res.status(500).json({
+        success: false,
+        message: error.message || 'Something went wrong!'
+    });
+});
+
+// Start server
+app.listen(PORT, async () => {
+    console.log(`🚀 Server is running on port ${PORT}`);
+    console.log(`📁 Uploads directory: ${uploadsDir}`);
+
+    // Test database connection
+    await testDatabaseConnection();
+
+    console.log('🎉 Server is ready to accept requests');
+});
+
+// Graceful shutdown
+process.on('SIGINT', async () => {
+    console.log('\n🛑 Shutting down gracefully...');
+    await pool.end();
+    process.exit(0);
+});
+
+process.on('SIGTERM', async () => {
+    console.log('\n🛑 Shutting down gracefully...');
+    await pool.end();
+    process.exit(0);
+});
+
+module.exports = app;

test.html

@@ -0,0 +1,775 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Events API Test Page</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        }
+
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 30px;
+            font-size: 2.5em;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .section {
+            margin-bottom: 40px;
+            border: 2px solid #e0e0e0;
+            border-radius: 15px;
+            padding: 25px;
+            background: #fafafa;
+        }
+
+        .section h2 {
+            color: #444;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 3px solid #667eea;
+            font-size: 1.5em;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 600;
+            color: #555;
+        }
+
+        input, textarea, select {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #ddd;
+            border-radius: 8px;
+            font-size: 14px;
+            transition: border-color 0.3s ease;
+        }
+
+        input:focus, textarea:focus, select:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        button {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            padding: 12px 25px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 600;
+            margin: 5px;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+        }
+
+        button:active {
+            transform: translateY(0);
+        }
+
+        .btn-danger {
+            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
+        }
+
+        .btn-danger:hover {
+            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
+        }
+
+        .response {
+            background: #f8f9fa;
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+            padding: 15px;
+            margin-top: 15px;
+            max-height: 200px;
+            overflow-y: auto;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            white-space: pre-wrap;
+        }
+
+        .success {
+            border-left: 5px solid #28a745;
+            background: #d4edda;
+        }
+
+        .error {
+            border-left: 5px solid #dc3545;
+            background: #f8d7da;
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            gap: 20px;
+        }
+
+        .events-list, .images-list {
+            background: white;
+            border-radius: 10px;
+            padding: 20px;
+            margin-top: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        .event-item, .image-item {
+            background: #f8f9fa;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 15px;
+            border-left: 4px solid #667eea;
+        }
+
+        .image-item img {
+            max-width: 100px;
+            max-height: 100px;
+            object-fit: cover;
+            border-radius: 5px;
+            margin-top: 10px;
+        }
+
+        .file-preview {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 10px;
+        }
+
+        .file-preview img {
+            width: 80px;
+            height: 80px;
+            object-fit: cover;
+            border-radius: 5px;
+            border: 2px solid #ddd;
+        }
+
+        .loading {
+            opacity: 0.6;
+            pointer-events: none;
+        }
+
+        .api-status {
+            background: linear-gradient(45deg, #28a745, #20c997);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 25px;
+            text-align: center;
+            margin-bottom: 20px;
+            font-weight: 600;
+        }
+
+        .api-status.offline {
+            background: linear-gradient(45deg, #dc3545, #c82333);
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 15px;
+            }
+            
+            .grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .form-row {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎉 Events API Test Dashboard</h1>
+        
+        <div id="apiStatus" class="api-status">
+            Checking API Status...
+        </div>
+
+        <div class="grid">
+            <!-- Events Section -->
+            <div class="section">
+                <h2>📅 Events Management</h2>
+                
+                <div class="form-row">
+                    <div class="form-group">
+                        <label>Year</label>
+                        <input type="number" id="eventYear" placeholder="2024" min="1900" max="2100">
+                    </div>
+                    <div class="form-group">
+                        <label>Event Date</label>
+                        <input type="date" id="eventDate">
+                    </div>
+                </div>
+                
+                <div class="form-group">
+                    <label>Event Title</label>
+                    <input type="text" id="eventTitle" placeholder="Amazing Event Title">
+                </div>
+                
+                <div class="form-group">
+                    <label>Event Image URL</label>
+                    <input type="url" id="eventImageUrl" placeholder="https://example.com/image.jpg">
+                </div>
+                
+                <div class="form-group">
+                    <label>Event Description</label>
+                    <textarea id="eventDescription" rows="3" placeholder="Describe your amazing event..."></textarea>
+                </div>
+                
+                <div class="form-group" style="display: none;" id="eventIdGroup">
+                    <label>Event ID (for update/delete)</label>
+                    <input type="number" id="eventId" placeholder="Enter event ID">
+                </div>
+                
+                <button onclick="createNewEvent()">✨ Create Event</button>
+                <button onclick="getAllEvents()">📋 Get All Events</button>
+                <button onclick="showEventUpdateForm()">✏️ Update Event</button>
+                <button onclick="showEventDeleteForm()">🗑️ Delete Event</button>
+                
+                <div id="eventResponse" class="response"></div>
+            </div>
+
+            <!-- Event Images Section -->
+            <div class="section">
+                <h2>🖼️ Event Images Management</h2>
+                
+                <div class="form-row">
+                    <div class="form-group">
+                        <label>Event ID</label>
+                        <select id="imageEventId">
+                            <option value="">Select Event</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Image URL</label>
+                        <input type="url" id="imageUrl" placeholder="https://example.com/image.jpg">
+                    </div>
+                </div>
+                
+                <div class="form-group" style="display: none;" id="imageIdGroup">
+                    <label>Image ID (for update/delete)</label>
+                    <input type="number" id="imageId" placeholder="Enter image ID">
+                </div>
+                
+                <button onclick="createEventImage()">🖼️ Add Image</button>
+                <button onclick="getAllEventImages()">📸 Get All Images</button>
+                <button onclick="showImageUpdateForm()">✏️ Update Image</button>
+                <button onclick="showImageDeleteForm()">🗑️ Delete Image</button>
+                
+                <div id="imageResponse" class="response"></div>
+            </div>
+        </div>
+
+        <!-- File Upload Section -->
+        <div class="section">
+            <h2>📁 File Upload Testing</h2>
+            
+            <div class="grid">
+                <div>
+                    <h3>Single File Upload</h3>
+                    <div class="form-group">
+                        <label>Choose File</label>
+                        <input type="file" id="singleFile" accept="image/*">
+                    </div>
+                    <button onclick="uploadSingleFile()">📤 Upload Single</button>
+                    <div id="singleFilePreview" class="file-preview"></div>
+                </div>
+                
+                <div>
+                    <h3>Multiple Files Upload</h3>
+                    <div class="form-group">
+                        <label>Choose Files</label>
+                        <input type="file" id="multipleFiles" accept="image/*" multiple>
+                    </div>
+                    <button onclick="uploadMultipleFiles()">📤 Upload Multiple</button>
+                    <div id="multipleFilePreview" class="file-preview"></div>
+                </div>
+            </div>
+            
+            <div style="margin-top: 20px;">
+                <h3>Upload to Event Images</h3>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label>Select Event</label>
+                        <select id="uploadEventId">
+                            <option value="">Select Event</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Choose Files</label>
+                        <input type="file" id="eventFiles" accept="image/*" multiple>
+                    </div>
+                </div>
+                <button onclick="uploadToEvent()">📤 Upload to Event</button>
+                <div id="eventFilePreview" class="file-preview"></div>
+            </div>
+            
+            <div id="uploadResponse" class="response"></div>
+        </div>
+
+        <!-- Display Lists -->
+        <div class="grid">
+            <div class="events-list">
+                <h3>📋 Events List</h3>
+                <div id="eventsList"></div>
+            </div>
+            
+            <div class="images-list">
+                <h3>🖼️ Images List</h3>
+                <div id="imagesList"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const API_BASE = 'http://localhost:3000/api';
+        let events = [];
+        let images = [];
+
+        // Check API status on load
+        window.onload = function() {
+            checkApiStatus();
+            loadEventOptions();
+        };
+
+        async function checkApiStatus() {
+            const statusDiv = document.getElementById('apiStatus');
+            try {
+                const response = await fetch(`${API_BASE}/events`);
+                if (response.ok) {
+                    statusDiv.textContent = '✅ API Server is Online';
+                    statusDiv.className = 'api-status';
+                } else {
+                    throw new Error('API not responding');
+                }
+            } catch (error) {
+                statusDiv.textContent = '❌ API Server is Offline';
+                statusDiv.className = 'api-status offline';
+            }
+        }
+
+        async function makeRequest(url, options = {}) {
+            try {
+                const response = await fetch(url, options);
+                const data = await response.json();
+                return { response, data };
+            } catch (error) {
+                return { error: error.message };
+            }
+        }
+
+        function displayResponse(elementId, data, isError = false) {
+            const element = document.getElementById(elementId);
+            element.textContent = JSON.stringify(data, null, 2);
+            element.className = `response ${isError ? 'error' : 'success'}`;
+        }
+
+        // Events CRUD
+        async function createNewEvent() {
+            const eventData = {
+                year: parseInt(document.getElementById('eventYear').value),
+                eventdate: document.getElementById('eventDate').value,
+                eventtitle: document.getElementById('eventTitle').value,
+                eventimageurl: document.getElementById('eventImageUrl').value,
+                eventdescription: document.getElementById('eventDescription').value
+            };
+
+            if (!eventData.year || !eventData.eventtitle) {
+                alert('Year and Event Title are required!');
+                return;
+            }
+
+            const { response, data, error } = await makeRequest(`${API_BASE}/events`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(eventData)
+            });
+
+            displayResponse('eventResponse', error || data, !!error);
+            if (!error && data.success) {
+                clearEventForm();
+                getAllEvents();
+                loadEventOptions();
+            }
+        }
+
+        async function getAllEvents() {
+            const { response, data, error } = await makeRequest(`${API_BASE}/events`);
+            displayResponse('eventResponse', error || data, !!error);
+            
+            if (!error && data.success) {
+                events = data.data;
+                displayEventsList();
+                loadEventOptions();
+            }
+        }
+
+        function showEventUpdateForm() {
+            document.getElementById('eventIdGroup').style.display = 'block';
+            const updateBtn = event.target;
+            updateBtn.textContent = '💾 Update Event';
+            updateBtn.onclick = updateExistingEvent;
+        }
+
+        async function updateExistingEvent() {
+            const eventId = document.getElementById('eventId').value;
+            if (!eventId) {
+                alert('Please enter Event ID');
+                return;
+            }
+
+            const eventData = {
+                year: parseInt(document.getElementById('eventYear').value),
+                eventdate: document.getElementById('eventDate').value,
+                eventtitle: document.getElementById('eventTitle').value,
+                eventimageurl: document.getElementById('eventImageUrl').value,
+                eventdescription: document.getElementById('eventDescription').value
+            };
+
+            const { response, data, error } = await makeRequest(`${API_BASE}/events/${eventId}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(eventData)
+            });
+
+            displayResponse('eventResponse', error || data, !!error);
+            if (!error && data.success) {
+                clearEventForm();
+                getAllEvents();
+            }
+        }
+
+        function showEventDeleteForm() {
+            document.getElementById('eventIdGroup').style.display = 'block';
+            const deleteBtn = event.target;
+            deleteBtn.textContent = '🗑️ Confirm Delete';
+            deleteBtn.className = 'btn-danger';
+            deleteBtn.onclick = deleteExistingEvent;
+        }
+
+        async function deleteExistingEvent() {
+            const eventId = document.getElementById('eventId').value;
+            if (!eventId) {
+                alert('Please enter Event ID');
+                return;
+            }
+
+            if (!confirm('Are you sure you want to delete this event?')) {
+                return;
+            }
+
+            const { response, data, error } = await makeRequest(`${API_BASE}/events/${eventId}`, {
+                method: 'DELETE'
+            });
+
+            displayResponse('eventResponse', error || data, !!error);
+            if (!error && data.success) {
+                clearEventForm();
+                getAllEvents();
+            }
+        }
+
+        function clearEventForm() {
+            document.getElementById('eventYear').value = '';
+            document.getElementById('eventDate').value = '';
+            document.getElementById('eventTitle').value = '';
+            document.getElementById('eventImageUrl').value = '';
+            document.getElementById('eventDescription').value = '';
+            document.getElementById('eventId').value = '';
+            document.getElementById('eventIdGroup').style.display = 'none';
+        }
+
+        // Event Images CRUD
+        async function createEventImage() {
+            const imageData = {
+                eventid: parseInt(document.getElementById('imageEventId').value),
+                imageurl: document.getElementById('imageUrl').value
+            };
+
+            if (!imageData.eventid || !imageData.imageurl) {
+                alert('Event ID and Image URL are required!');
+                return;
+            }
+
+            const { response, data, error } = await makeRequest(`${API_BASE}/event-images`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(imageData)
+            });
+
+            displayResponse('imageResponse', error || data, !!error);
+            if (!error && data.success) {
+                clearImageForm();
+                getAllEventImages();
+            }
+        }
+
+        async function getAllEventImages() {
+            const { response, data, error } = await makeRequest(`${API_BASE}/event-images`);
+            displayResponse('imageResponse', error || data, !!error);
+            
+            if (!error && data.success) {
+                images = data.data;
+                displayImagesList();
+            }
+        }
+
+        function showImageUpdateForm() {
+            document.getElementById('imageIdGroup').style.display = 'block';
+            const updateBtn = event.target;
+            updateBtn.textContent = '💾 Update Image';
+            updateBtn.onclick = updateEventImage;
+        }
+
+        async function updateEventImage() {
+            const imageId = document.getElementById('imageId').value;
+            if (!imageId) {
+                alert('Please enter Image ID');
+                return;
+            }
+
+            const imageData = {
+                eventid: parseInt(document.getElementById('imageEventId').value),
+                imageurl: document.getElementById('imageUrl').value
+            };
+
+            const { response, data, error } = await makeRequest(`${API_BASE}/event-images/${imageId}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(imageData)
+            });
+
+            displayResponse('imageResponse', error || data, !!error);
+            if (!error && data.success) {
+                clearImageForm();
+                getAllEventImages();
+            }
+        }
+
+        function showImageDeleteForm() {
+            document.getElementById('imageIdGroup').style.display = 'block';
+            const deleteBtn = event.target;
+            deleteBtn.textContent = '🗑️ Confirm Delete';
+            deleteBtn.className = 'btn-danger';
+            deleteBtn.onclick = deleteEventImage;
+        }
+
+        async function deleteEventImage() {
+            const imageId = document.getElementById('imageId').value;
+            if (!imageId) {
+                alert('Please enter Image ID');
+                return;
+            }
+
+            if (!confirm('Are you sure you want to delete this image?')) {
+                return;
+            }
+
+            const { response, data, error } = await makeRequest(`${API_BASE}/event-images/${imageId}`, {
+                method: 'DELETE'
+            });
+
+            displayResponse('imageResponse', error || data, !!error);
+            if (!error && data.success) {
+                clearImageForm();
+                getAllEventImages();
+            }
+        }
+
+        function clearImageForm() {
+            document.getElementById('imageEventId').value = '';
+            document.getElementById('imageUrl').value = '';
+            document.getElementById('imageId').value = '';
+            document.getElementById('imageIdGroup').style.display = 'none';
+        }
+
+        // File Upload Functions
+        async function uploadSingleFile() {
+            const fileInput = document.getElementById('singleFile');
+            if (!fileInput.files[0]) {
+                alert('Please select a file');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('file', fileInput.files[0]);
+
+            const { response, data, error } = await makeRequest(`${API_BASE}/upload/single`, {
+                method: 'POST',
+                body: formData
+            });
+
+            displayResponse('uploadResponse', error || data, !!error);
+            if (!error && data.success) {
+                displayFilePreview('singleFilePreview', [data.data]);
+            }
+        }
+
+        async function uploadMultipleFiles() {
+            const fileInput = document.getElementById('multipleFiles');
+            if (!fileInput.files.length) {
+                alert('Please select files');
+                return;
+            }
+
+            const formData = new FormData();
+            for (let file of fileInput.files) {
+                formData.append('files', file);
+            }
+
+            const { response, data, error } = await makeRequest(`${API_BASE}/upload/multiple`, {
+                method: 'POST',
+                body: formData
+            });
+
+            displayResponse('uploadResponse', error || data, !!error);
+            if (!error && data.success) {
+                displayFilePreview('multipleFilePreview', data.data);
+            }
+        }
+
+        async function uploadToEvent() {
+            const eventId = document.getElementById('uploadEventId').value;
+            const fileInput = document.getElementById('eventFiles');
+            
+            if (!eventId) {
+                alert('Please select an event');
+                return;
+            }
+            
+            if (!fileInput.files.length) {
+                alert('Please select files');
+                return;
+            }
+
+            const formData = new FormData();
+            for (let file of fileInput.files) {
+                formData.append('files', file);
+            }
+
+            const { response, data, error } = await makeRequest(`${API_BASE}/upload/event-images/${eventId}`, {
+                method: 'POST',
+                body: formData
+            });
+
+            displayResponse('uploadResponse', error || data, !!error);
+            if (!error && data.success) {
+                displayFilePreview('eventFilePreview', data.data);
+                getAllEventImages();
+            }
+        }
+
+        function displayFilePreview(containerId, files) {
+            const container = document.getElementById(containerId);
+            container.innerHTML = '';
+            
+            files.forEach(file => {
+                const img = document.createElement('img');
+                img.src = file.fullUrl || `http://localhost:3000${file.path}`;
+                img.alt = file.originalname;
+                img.title = `${file.originalname} (${(file.size / 1024).toFixed(1)} KB)`;
+                container.appendChild(img);
+            });
+        }
+
+        // Display Functions
+        function displayEventsList() {
+            const container = document.getElementById('eventsList');
+            container.innerHTML = '';
+            
+            events.forEach(event => {
+                const eventDiv = document.createElement('div');
+                eventDiv.className = 'event-item';
+                eventDiv.innerHTML = `
+                    <strong>ID: ${event.id}</strong> - ${event.eventtitle} (${event.year})
+                    <br><small>Date: ${event.eventdate || 'N/A'}</small>
+                    <br><small>Description: ${event.eventdescription || 'N/A'}</small>
+                    ${event.eventimageurl ? `<br><img src="${event.eventimageurl}" alt="Event Image" style="max-width: 100px; margin-top: 5px;">` : ''}
+                `;
+                container.appendChild(eventDiv);
+            });
+        }
+
+        function displayImagesList() {
+            const container = document.getElementById('imagesList');
+            container.innerHTML = '';
+            
+            images.forEach(image => {
+                const imageDiv = document.createElement('div');
+                imageDiv.className = 'image-item';
+                imageDiv.innerHTML = `
+                    <strong>Image ID: ${image.id}</strong> - Event: ${image.eventtitle || 'N/A'}
+                    <br><small>Event ID: ${image.eventid}</small>
+                    <img src="http://localhost:3000${image.imageurl}" alt="Event Image" onerror="this.style.display='none'">
+                `;
+                container.appendChild(imageDiv);
+            });
+        }
+
+        async function loadEventOptions() {
+            const { response, data, error } = await makeRequest(`${API_BASE}/events`);
+            
+            if (!error && data.success) {
+                const selects = ['imageEventId', 'uploadEventId'];
+                selects.forEach(selectId => {
+                    const select = document.getElementById(selectId);
+                    select.innerHTML = '<option value="">Select Event</option>';
+                    data.data.forEach(event => {
+                        const option = document.createElement('option');
+                        option.value = event.id;
+                        option.textContent = `${event.id} - ${event.eventtitle}`;
+                        select.appendChild(option);
+                    });
+                });
+            }
+        }
+
+        // Auto-load data on page load
+        setTimeout(() => {
+            getAllEvents();
+            getAllEventImages();
+        }, 500);
+    </script>
+</body>
+</html>