Update various configuration files, components, and assets; enhance notification system and API endpoints; improve documentation and styles across the application.

server/api/devtool/config/add-custom-theme.js

@@ -0,0 +1,90 @@
+import fs from "fs";
+import path from "path";
+
+export default defineEventHandler(async (event) => {
+  const method = getMethod(event);
+
+  if (method !== "POST") {
+    return {
+      statusCode: 405,
+      message: "Method not allowed",
+    };
+  }
+
+  try {
+    const body = await readBody(event);
+    const { themeName, themeCSS } = body;
+
+    if (!themeName || !themeCSS) {
+      return {
+        statusCode: 400,
+        message: "Theme name and CSS are required",
+      };
+    }
+
+    // Validate theme name (alphanumeric and hyphens only)
+    if (!/^[a-zA-Z0-9-_]+$/.test(themeName)) {
+      return {
+        statusCode: 400,
+        message: "Theme name can only contain letters, numbers, hyphens, and underscores",
+      };
+    }
+
+    // Path to theme.css file
+    const themeCSSPath = path.join(process.cwd(), 'assets', 'style', 'css', 'base', 'theme.css');
+
+    // Check if theme.css exists
+    if (!fs.existsSync(themeCSSPath)) {
+      return {
+        statusCode: 404,
+        message: "theme.css file not found",
+      };
+    }
+
+    // Read current theme.css content
+    let currentContent = fs.readFileSync(themeCSSPath, 'utf8');
+
+    // Check if theme already exists
+    const themePattern = new RegExp(`html\\[data-theme="${themeName}"\\]`, 'g');
+    if (themePattern.test(currentContent)) {
+      return {
+        statusCode: 409,
+        message: `Theme "${themeName}" already exists`,
+      };
+    }
+
+    // Format the new theme CSS
+    const formattedThemeCSS = themeCSS.trim();
+    
+    // Ensure the CSS starts with the correct selector if not provided
+    let finalThemeCSS;
+    if (!formattedThemeCSS.includes(`html[data-theme="${themeName}"]`)) {
+      finalThemeCSS = `html[data-theme="${themeName}"] {\n${formattedThemeCSS}\n}`;
+    } else {
+      finalThemeCSS = formattedThemeCSS;
+    }
+
+    // Add the new theme to the end of the file
+    const newContent = currentContent + '\n\n' + finalThemeCSS + '\n';
+
+    // Write the updated content back to the file
+    fs.writeFileSync(themeCSSPath, newContent, 'utf8');
+
+    return {
+      statusCode: 200,
+      message: "Custom theme added successfully",
+      data: {
+        themeName,
+        success: true
+      },
+    };
+
+  } catch (error) {
+    console.error("Add custom theme error:", error);
+    return {
+      statusCode: 500,
+      message: "Internal server error",
+      error: error.message,
+    };
+  }
+}); 

server/api/devtool/config/env.js

@@ -0,0 +1,22 @@
+import fs from "fs";
+import path from "path";
+
+export default defineEventHandler(async (event) => {
+  // Get .env file, parse and return
+  const envFile = path.join(process.cwd(), ".env");
+
+  if (!fs.existsSync(envFile)) {
+    return {
+      statusCode: 404,
+      message: "File not found",
+    };
+  }
+
+  const env = fs.readFileSync(envFile, "utf-8");
+
+  return {
+    statusCode: 200,
+    message: "Success",
+    data: env,
+  };
+});

server/api/devtool/config/loading-logo.js

@@ -0,0 +1,44 @@
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+export default defineEventHandler(async (event) => {
+  const method = getMethod(event);
+
+  try {
+    if (method === "GET") {
+      // Get only the loading logo and site name for faster loading
+      const settings = await prisma.site_settings.findFirst({
+        select: {
+          siteLoadingLogo: true,
+          siteName: true,
+        },
+        orderBy: { settingID: "desc" },
+      });
+
+      return {
+        statusCode: 200,
+        message: "Success",
+        data: {
+          siteLoadingLogo: settings?.siteLoadingLogo || '',
+          siteName: settings?.siteName || 'corradAF',
+        },
+      };
+    }
+
+    return {
+      statusCode: 405,
+      message: "Method not allowed",
+    };
+  } catch (error) {
+    console.error("Loading logo API error:", error);
+    
+    return {
+      statusCode: 500,
+      message: "Internal server error",
+      error: error.message,
+    };
+  } finally {
+    await prisma.$disconnect();
+  }
+}); 

server/api/devtool/config/site-settings.js

@@ -0,0 +1,217 @@
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+export default defineEventHandler(async (event) => {
+  const method = getMethod(event);
+
+  try {
+    if (method === "GET") {
+      // Get site settings
+      let settings = await prisma.site_settings.findFirst({
+        orderBy: { settingID: "desc" },
+      });
+
+      // If no settings exist, create default ones
+      if (!settings) {
+        settings = await prisma.site_settings.create({
+          data: {
+            siteName: "corradAF",
+            siteDescription: "corradAF Base Project",
+            themeMode: "biasa",
+            showSiteNameInHeader: true,
+            seoRobots: "index, follow",
+            seoTwitterCard: "summary_large_image",
+            settingCreatedDate: new Date(),
+            settingModifiedDate: new Date(),
+          },
+        });
+      }
+
+      // Transform data to match new structure
+      const transformedSettings = {
+        siteName: settings.siteName || "corradAF",
+        siteNameFontSize: settings.siteNameFontSize || 18,
+        siteDescription: settings.siteDescription || "corradAF Base Project",
+        siteLogo: settings.siteLogo || "",
+        siteLoadingLogo: settings.siteLoadingLogo || "",
+        siteFavicon: settings.siteFavicon || "",
+        siteLoginLogo: settings.siteLoginLogo || "",
+        showSiteNameInHeader: settings.showSiteNameInHeader !== false,
+        customCSS: settings.customCSS || "",
+        selectedTheme: settings.themeMode || "biasa", // Use themeMode as selectedTheme
+        customThemeFile: settings.customThemeFile || "",
+        currentFont: settings.currentFont || "",
+        fontSource: settings.fontSource || "",
+        // SEO fields
+        seoTitle: settings.seoTitle || "",
+        seoDescription: settings.seoDescription || "",
+        seoKeywords: settings.seoKeywords || "",
+        seoAuthor: settings.seoAuthor || "",
+        seoOgImage: settings.seoOgImage || "",
+        seoTwitterCard: settings.seoTwitterCard || "summary_large_image",
+        seoCanonicalUrl: settings.seoCanonicalUrl || "",
+        seoRobots: settings.seoRobots || "index, follow",
+        seoGoogleAnalytics: settings.seoGoogleAnalytics || "",
+        seoGoogleTagManager: settings.seoGoogleTagManager || "",
+        seoFacebookPixel: settings.seoFacebookPixel || ""
+      };
+
+      return {
+        statusCode: 200,
+        message: "Success",
+        data: transformedSettings,
+      };
+    }
+
+    if (method === "POST") {
+      let body;
+      try {
+        body = await readBody(event);
+      } catch (bodyError) {
+        console.error("Error reading request body:", bodyError);
+        return {
+          statusCode: 400,
+          message: "Invalid request body",
+          error: bodyError.message,
+        };
+      }
+
+      // Validate required fields
+      if (!body || typeof body !== 'object') {
+        return {
+          statusCode: 400,
+          message: "Request body must be a valid JSON object",
+        };
+      }
+
+      // Check if settings exist
+      const existingSettings = await prisma.site_settings.findFirst();
+
+      // Prepare data for database (use themeMode instead of selectedTheme)
+      // Filter out undefined values to avoid database errors
+      const dbData = {};
+      
+      // Only add fields that are not undefined
+      if (body.siteName !== undefined) dbData.siteName = body.siteName;
+      if (body.siteNameFontSize !== undefined) dbData.siteNameFontSize = body.siteNameFontSize;
+      if (body.siteDescription !== undefined) dbData.siteDescription = body.siteDescription;
+      if (body.siteLogo !== undefined) dbData.siteLogo = body.siteLogo;
+      if (body.siteLoadingLogo !== undefined) dbData.siteLoadingLogo = body.siteLoadingLogo;
+      if (body.siteFavicon !== undefined) dbData.siteFavicon = body.siteFavicon;
+      if (body.siteLoginLogo !== undefined) dbData.siteLoginLogo = body.siteLoginLogo;
+      if (body.showSiteNameInHeader !== undefined) dbData.showSiteNameInHeader = body.showSiteNameInHeader;
+      if (body.customCSS !== undefined) dbData.customCSS = body.customCSS;
+      if (body.selectedTheme !== undefined) dbData.themeMode = body.selectedTheme;
+      if (body.customThemeFile !== undefined) dbData.customThemeFile = body.customThemeFile;
+      if (body.currentFont !== undefined) dbData.currentFont = body.currentFont;
+      if (body.fontSource !== undefined) dbData.fontSource = body.fontSource;
+      if (body.seoTitle !== undefined) dbData.seoTitle = body.seoTitle;
+      if (body.seoDescription !== undefined) dbData.seoDescription = body.seoDescription;
+      if (body.seoKeywords !== undefined) dbData.seoKeywords = body.seoKeywords;
+      if (body.seoAuthor !== undefined) dbData.seoAuthor = body.seoAuthor;
+      if (body.seoOgImage !== undefined) dbData.seoOgImage = body.seoOgImage;
+      if (body.seoTwitterCard !== undefined) dbData.seoTwitterCard = body.seoTwitterCard;
+      if (body.seoCanonicalUrl !== undefined) dbData.seoCanonicalUrl = body.seoCanonicalUrl;
+      if (body.seoRobots !== undefined) dbData.seoRobots = body.seoRobots;
+      if (body.seoGoogleAnalytics !== undefined) dbData.seoGoogleAnalytics = body.seoGoogleAnalytics;
+      if (body.seoGoogleTagManager !== undefined) dbData.seoGoogleTagManager = body.seoGoogleTagManager;
+      if (body.seoFacebookPixel !== undefined) dbData.seoFacebookPixel = body.seoFacebookPixel;
+      
+      dbData.settingModifiedDate = new Date();
+
+      let settings;
+      if (existingSettings) {
+        // Update existing settings
+        settings = await prisma.site_settings.update({
+          where: { settingID: existingSettings.settingID },
+          data: dbData,
+        });
+      } else {
+        // Create new settings
+        settings = await prisma.site_settings.create({
+          data: {
+            ...dbData,
+            settingCreatedDate: new Date(),
+          },
+        });
+      }
+
+      // Transform response to match new structure
+      const transformedSettings = {
+        siteName: settings.siteName || "corradAF",
+        siteNameFontSize: settings.siteNameFontSize || 18,
+        siteDescription: settings.siteDescription || "corradAF Base Project",
+        siteLogo: settings.siteLogo || "",
+        siteLoadingLogo: settings.siteLoadingLogo || "",
+        siteFavicon: settings.siteFavicon || "",
+        siteLoginLogo: settings.siteLoginLogo || "",
+        showSiteNameInHeader: settings.showSiteNameInHeader !== false,
+        customCSS: settings.customCSS || "",
+        selectedTheme: settings.themeMode || "biasa", // Use themeMode as selectedTheme
+        customThemeFile: settings.customThemeFile || "",
+        currentFont: settings.currentFont || "",
+        fontSource: settings.fontSource || "",
+        // SEO fields
+        seoTitle: settings.seoTitle || "",
+        seoDescription: settings.seoDescription || "",
+        seoKeywords: settings.seoKeywords || "",
+        seoAuthor: settings.seoAuthor || "",
+        seoOgImage: settings.seoOgImage || "",
+        seoTwitterCard: settings.seoTwitterCard || "summary_large_image",
+        seoCanonicalUrl: settings.seoCanonicalUrl || "",
+        seoRobots: settings.seoRobots || "index, follow",
+        seoGoogleAnalytics: settings.seoGoogleAnalytics || "",
+        seoGoogleTagManager: settings.seoGoogleTagManager || "",
+        seoFacebookPixel: settings.seoFacebookPixel || ""
+      };
+
+      return {
+        statusCode: 200,
+        message: "Settings updated successfully",
+        data: transformedSettings,
+      };
+    }
+
+    return {
+      statusCode: 405,
+      message: "Method not allowed",
+    };
+  } catch (error) {
+    console.error("Site settings API error:", error);
+    
+    // Provide more specific error messages
+    if (error.code === 'P2002') {
+      return {
+        statusCode: 400,
+        message: "Duplicate entry error",
+        error: error.message,
+      };
+    }
+    
+    if (error.code === 'P2025') {
+      return {
+        statusCode: 404,
+        message: "Record not found",
+        error: error.message,
+      };
+    }
+    
+    if (error.code && error.code.startsWith('P')) {
+      return {
+        statusCode: 400,
+        message: "Database error",
+        error: error.message,
+        code: error.code,
+      };
+    }
+
+    return {
+      statusCode: 500,
+      message: "Internal server error",
+      error: error.message,
+    };
+  } finally {
+    await prisma.$disconnect();
+  }
+}); 

server/api/devtool/config/upload-file.js

@@ -0,0 +1,134 @@
+import fs from "fs";
+import path from "path";
+import { v4 as uuidv4 } from "uuid";
+
+export default defineEventHandler(async (event) => {
+  const method = getMethod(event);
+
+  if (method !== "POST") {
+    return {
+      statusCode: 405,
+      message: "Method not allowed",
+    };
+  }
+
+  try {
+    const form = await readMultipartFormData(event);
+    
+    if (!form || form.length === 0) {
+      return {
+        statusCode: 400,
+        message: "No file uploaded",
+      };
+    }
+
+    const file = form[0];
+    const fileType = form.find(field => field.name === 'type')?.data?.toString() || 'logo';
+    
+    // Validate file type
+    const allowedTypes = {
+      logo: ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/svg+xml'],
+      'loading-logo': ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/svg+xml'],
+      'login-logo': ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/svg+xml'],
+      favicon: ['image/x-icon', 'image/vnd.microsoft.icon', 'image/png'],
+      'og-image': ['image/jpeg', 'image/jpg', 'image/png'],
+      theme: ['text/css', 'application/octet-stream']
+    };
+
+    if (!allowedTypes[fileType] || !allowedTypes[fileType].includes(file.type)) {
+      return {
+        statusCode: 400,
+        message: `Invalid file type for ${fileType}. Allowed types: ${allowedTypes[fileType].join(', ')}`,
+      };
+    }
+
+    let uploadDir, fileUrl;
+    
+    // Determine upload directory based on file type
+    if (fileType === 'theme') {
+      // Theme files go to assets/style/css
+      uploadDir = path.join(process.cwd(), 'assets', 'style', 'css');
+      if (!fs.existsSync(uploadDir)) {
+        fs.mkdirSync(uploadDir, { recursive: true });
+      }
+      
+      // Generate unique filename for theme
+      const fileExtension = path.extname(file.filename || '');
+      const uniqueFilename = `custom-theme-${uuidv4()}${fileExtension}`;
+      const filePath = path.join(uploadDir, uniqueFilename);
+      
+      // Save file
+      fs.writeFileSync(filePath, file.data);
+      
+      // Return relative path for theme files
+      fileUrl = `/assets/style/css/${uniqueFilename}`;
+    } else {
+      // Logo, loading-logo, favicon, and og-image files go to public/uploads
+      uploadDir = path.join(process.cwd(), 'public', 'uploads', 'site-settings');
+      if (!fs.existsSync(uploadDir)) {
+        fs.mkdirSync(uploadDir, { recursive: true });
+      }
+
+      const fileExtension = path.extname(file.filename || '');
+      let baseFilename;
+
+      switch (fileType) {
+        case 'logo':
+          baseFilename = 'site-logo';
+          break;
+        case 'loading-logo':
+          baseFilename = 'loading-logo';
+          break;
+        case 'login-logo':
+          baseFilename = 'login-logo';
+          break;
+        case 'favicon':
+          baseFilename = 'favicon';
+          break;
+        case 'og-image':
+          baseFilename = 'og-image';
+          break;
+        default:
+          // This case should ideally not be reached if fileType is validated earlier
+          // and is one of the image types.
+          // However, as a fallback, use the fileType itself or a generic name.
+          // For safety, and to avoid using uuidv4 for these specific types as requested,
+          // we should ensure this path isn't taken for the specified image types.
+          // If an unexpected fileType gets here, it might be better to error or use a UUID.
+          // For now, we'll stick to the primary requirement of fixed names for specified types.
+          // If we need UUID for other non-logo image types, that logic can be added.
+          // console.warn(`Unexpected fileType received: ${fileType} for non-theme upload.`);
+          // For simplicity, if it's an image type not explicitly handled, it will get a name like 'unknown-type.ext'
+          baseFilename = fileType; 
+      }
+      
+      const filenameWithExt = `${baseFilename}${fileExtension}`;
+      const filePath = path.join(uploadDir, filenameWithExt);
+
+      // Save file (overwrites if exists)
+      fs.writeFileSync(filePath, file.data);
+
+      // Return file URL
+      fileUrl = `/uploads/site-settings/${filenameWithExt}`;
+    }
+
+    return {
+      statusCode: 200,
+      message: "File uploaded successfully",
+      data: {
+        filename: path.basename(fileUrl),
+        url: fileUrl,
+        type: fileType,
+        size: file.data.length,
+      },
+    };
+
+  } catch (error) {
+    console.error("Upload error:", error);
+    return {
+      statusCode: 500,
+      message: "Internal server error",
+      error: error.message,
+    };
+  }
+});