adminforth 1.21.0-next.11 → 1.21.0-next.12

package/commands/createCustomComponent/configUpdater.js

@@ -205,3 +205,282 @@ export async function updateResourceConfig(resourceId, columnName, fieldType, co
         throw new Error(`Failed to update resource file ${path.basename(filePath)}: ${error.message}`);
     }
 }
+
+
+export async function injectLoginComponent(indexFilePath, componentPath) {
+    console.log(chalk.dim(`Reading file: ${indexFilePath}`));
+    const content = await fs.readFile(indexFilePath, 'utf-8');
+    const ast = recast.parse(content, {
+        parser: typescriptParser,
+    });
+
+    let updated = false;
+
+    recast.visit(ast, {
+        visitNewExpression(path) {
+            if (
+                n.Identifier.check(path.node.callee) &&
+                path.node.callee.name === 'AdminForth' &&
+                path.node.arguments.length > 0 &&
+                n.ObjectExpression.check(path.node.arguments[0])
+            ) {
+                const configObject = path.node.arguments[0];
+
+                let customizationProp = configObject.properties.find(
+                    p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === 'customization'
+                );
+
+                if (!customizationProp) {
+                    const customizationObj = b.objectExpression([]);
+                    customizationProp = b.objectProperty(b.identifier('customization'), customizationObj);
+                    configObject.properties.push(customizationProp);
+                    console.log(chalk.dim(`Added missing 'customization' property.`));
+                }
+
+                const customizationValue = customizationProp.value;
+                if (!n.ObjectExpression.check(customizationValue)) return false;
+
+                let loginPageInjections = customizationValue.properties.find(
+                    p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === 'loginPageInjections'
+                );
+
+                if (!loginPageInjections) {
+                    const injectionsObj = b.objectExpression([]);
+                    loginPageInjections = b.objectProperty(b.identifier('loginPageInjections'), injectionsObj);
+                    customizationValue.properties.push(loginPageInjections);
+                    console.log(chalk.dim(`Added missing 'loginPageInjections'.`));
+                }
+
+                const injectionsValue = loginPageInjections.value;
+                if (!n.ObjectExpression.check(injectionsValue)) return false;
+
+                let underInputsProp = injectionsValue.properties.find(
+                    p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === 'underInputs'
+                );
+
+                if (underInputsProp) {
+                    underInputsProp.value = b.stringLiteral(componentPath);
+                    console.log(chalk.dim(`Updated 'underInputs' to ${componentPath}`));
+                } else {
+                    injectionsValue.properties.push(
+                        b.objectProperty(b.identifier('underInputs'), b.stringLiteral(componentPath))
+                    );
+                    console.log(chalk.dim(`Added 'underInputs': ${componentPath}`));
+                }
+
+                updated = true;
+                this.abort();
+            }
+            return false;
+        }
+    });
+
+    if (!updated) {
+        throw new Error(`Could not find AdminForth configuration in file: ${indexFilePath}`);
+    }
+
+    const outputCode = recast.print(ast).code;
+    await fs.writeFile(indexFilePath, outputCode, 'utf-8');
+    console.log(chalk.green(`✅ Successfully updated login injection in: ${indexFilePath}`));
+}
+
+
+export async function injectGlobalComponent(indexFilePath, injectionType, componentPath) {
+    console.log(chalk.dim(`Reading file: ${indexFilePath}`));
+    const content = await fs.readFile(indexFilePath, 'utf-8');
+    const ast = recast.parse(content, {
+        parser: typescriptParser,
+    });
+
+    let updated = false;
+    
+    console.log(JSON.stringify(injectionType));
+    recast.visit(ast, {
+        visitNewExpression(path) {
+            if (
+                n.Identifier.check(path.node.callee) &&
+                path.node.callee.name === 'AdminForth' &&
+                path.node.arguments.length > 0 &&
+                n.ObjectExpression.check(path.node.arguments[0])
+            ) {
+                const configObject = path.node.arguments[0];
+
+                let customizationProp = configObject.properties.find(
+                    p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === 'customization'
+                );
+
+                if (!customizationProp) {
+                    const customizationObj = b.objectExpression([]);
+                    customizationProp = b.objectProperty(b.identifier('customization'), customizationObj);
+                    configObject.properties.push(customizationProp);
+                    console.log(chalk.dim(`Added missing 'customization' property.`));
+                }
+
+                const customizationValue = customizationProp.value;
+                if (!n.ObjectExpression.check(customizationValue)) return false;
+
+                let globalInjections = customizationValue.properties.find(
+                    p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === 'globalInjections'
+                );
+
+                if (!globalInjections) {
+                    const injectionsObj = b.objectExpression([]);
+                    globalInjections = b.objectProperty(b.identifier('globalInjections'), injectionsObj);
+                    customizationValue.properties.push(globalInjections);
+                    console.log(chalk.dim(`Added missing 'globalInjections'.`));
+                }
+
+                const injectionsValue = globalInjections.value;
+                if (!n.ObjectExpression.check(injectionsValue)) return false;
+                console.log(JSON.stringify(injectionType));
+                let injectionProp = injectionsValue.properties.find(
+                    p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === injectionType
+                );
+                if (injectionProp) {
+                    const currentValue = injectionProp.value;
+          
+                    if (n.ArrayExpression.check(currentValue)) {
+                      currentValue.elements.push(b.stringLiteral(componentPath));
+                      console.log(chalk.dim(`Added '${componentPath}' to existing array in '${injectionType}'`));
+                    } else if (n.StringLiteral.check(currentValue)) {
+                      injectionProp.value = b.arrayExpression([
+                        b.stringLiteral(currentValue.value),
+                        b.stringLiteral(componentPath)
+                      ]);
+                      console.log(chalk.dim(`Converted '${injectionType}' from string to array and added '${componentPath}'`));
+                    } else {
+                      throw new Error(`Unsupported value type for '${injectionType}'. Must be string or array.`);
+                    }
+                  } else {
+                    injectionsValue.properties.push(
+                      b.objectProperty(
+                        b.identifier(injectionType),
+                        b.arrayExpression([b.stringLiteral(componentPath)])
+                      )
+                    );
+                    console.log(chalk.dim(`Added new array for '${injectionType}' with '${componentPath}'`));
+                  }
+          
+                  updated = true;
+                  this.abort();
+                }
+                return false;
+              }
+    });
+
+    if (!updated) {
+        throw new Error(`Could not find AdminForth configuration in file: ${indexFilePath}`);
+    }
+
+    const outputCode = recast.print(ast).code;
+    await fs.writeFile(indexFilePath, outputCode, 'utf-8');
+    console.log(chalk.green(`✅ Successfully updated global injection '${injectionType}' in: ${indexFilePath}`));
+}
+
+export async function updateCrudInjectionConfig(resourceId, crudType, injectionPosition, componentPathForConfig, isThin) {
+    const filePath = await findResourceFilePath(resourceId);
+    console.log(chalk.dim(`Attempting to update resource CRUD injection: ${filePath}`));
+  
+    let content;
+    try {
+      content = await fs.readFile(filePath, 'utf-8');
+    } catch (error) {
+      console.error(chalk.red(`❌ Error reading resource file: ${filePath}`));
+      throw new Error(`Could not read resource file ${filePath}.`);
+    }
+  
+    try {
+      const ast = recast.parse(content, {
+        parser: typescriptParser
+      });
+  
+      let updateApplied = false;
+  
+      recast.visit(ast, {
+        visitExportDefaultDeclaration(path) {
+          const declaration = path.node.declaration;
+          let objectExpressionNode = null;
+  
+          if (n.TSAsExpression.check(declaration) && n.ObjectExpression.check(declaration.expression)) {
+            objectExpressionNode = declaration.expression;
+          } else if (n.ObjectExpression.check(declaration)) {
+            objectExpressionNode = declaration;
+          }
+  
+          if (!objectExpressionNode) {
+            console.warn(chalk.yellow(`Warning: Default export in ${filePath} is not an ObjectExpression. Skipping update.`));
+            return false;
+          }
+  
+          const getOrCreateObjectProp = (obj, propName) => {
+            let prop = obj.properties.find(p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === propName);
+            if (!prop) {
+              const newObject = b.objectExpression([]);
+              prop = b.objectProperty(b.identifier(propName), newObject);
+              obj.properties.push(prop);
+            }
+            return prop.value;
+          };
+  
+          const options = getOrCreateObjectProp(objectExpressionNode, 'options');
+          if (!n.ObjectExpression.check(options)) return false;
+  
+          const pageInjections = getOrCreateObjectProp(options, 'pageInjections');
+          if (!n.ObjectExpression.check(pageInjections)) return false;
+  
+          let crudProp = pageInjections.properties.find(p =>
+            n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === crudType
+          );
+  
+          if (!crudProp) {
+            crudProp = b.objectProperty(
+              b.identifier(crudType),
+              b.objectExpression([])
+            );
+            pageInjections.properties.push(crudProp);
+          }
+  
+          const crudValue = crudProp.value;
+          if (!n.ObjectExpression.check(crudValue)) return false;
+  
+          let injectionProp = crudValue.properties.find(p =>
+            n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === injectionPosition
+          );
+  
+          const newInjectionObject = b.objectExpression([
+            b.objectProperty(b.identifier('file'), b.stringLiteral(componentPathForConfig)),
+            b.objectProperty(
+              b.identifier('meta'),
+              b.objectExpression([
+                b.objectProperty(b.identifier('thinEnoughToShrinkTable'), b.booleanLiteral(!!isThin)),
+              ])
+            ),
+          ]);
+          
+          if (injectionProp) {
+            injectionProp.value = newInjectionObject;
+            console.log(chalk.dim(`Updated '${injectionPosition}' injection for '${crudType}'.`));
+          } else {
+            crudValue.properties.push(b.objectProperty(b.identifier(injectionPosition), newInjectionObject));
+            console.log(chalk.dim(`Added '${injectionPosition}' injection for '${crudType}'.`));
+          }
+  
+          updateApplied = true;
+          this.abort();
+          return false;
+        }
+      });
+  
+      if (!updateApplied) {
+        throw new Error(`Could not inject CRUD component in resource ${resourceId}.`);
+      }
+  
+      const outputCode = recast.print(ast).code;
+      await fs.writeFile(filePath, outputCode, 'utf-8');
+      console.log(chalk.dim(`✅ Successfully updated CRUD injection in resource file: ${filePath}`));
+  
+    } catch (error) {
+      console.error(chalk.red(`❌ Error processing resource file: ${filePath}`));
+      throw new Error(`Failed to inject CRUD component in ${path.basename(filePath)}: ${error.message}`);
+    }
+  }

package/commands/createCustomComponent/fileGenerator.js

@@ -1,4 +1,5 @@
 import fs from 'fs/promises';
+import fsSync from 'fs';
 import path from 'path';
 import chalk from 'chalk';
 import Handlebars from 'handlebars';
@@ -16,22 +17,30 @@ async function renderHBSTemplate(templatePath, data) {
 }
 
 async function generateVueContent(fieldType, { resource, column }) {
-  const componentName = `${resource.label}${column.label}${fieldType.charAt(0).toUpperCase() + fieldType.slice(1)}`;
-  const columnName = column.name;
+  const hasColumn = !!column;
+  const componentName = hasColumn
+    ? `${resource.label}${column.label}${fieldType.charAt(0).toUpperCase() + fieldType.slice(1)}`
+    : `${resource.label}${fieldType.charAt(0).toUpperCase() + fieldType.slice(1)}`;
+
   const resourceId = resource.resourceId;
 
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
-  const templatePath = path.join(__dirname, 'templates', 'customFields', `${fieldType}.vue.hbs`);
+
+  const templatePath = hasColumn
+    ? path.join(__dirname, 'templates', 'customFields', `${fieldType}.vue.hbs`)
+    : path.join(__dirname, 'templates', 'customCrud', `${fieldType}.vue.hbs`);
 
   console.log(chalk.dim(`Using template: ${templatePath}`));
 
   const context = {
     componentName,
-    columnName,
     resourceId,
     resource,
-    column
+    ...(hasColumn && {
+      column,
+      columnName: column.name,
+    }),
   };
 
   try {
@@ -43,6 +52,7 @@ async function generateVueContent(fieldType, { resource, column }) {
   }
 }
 
+
 export async function generateComponentFile(componentFileName, fieldType, context, config) {
 
   const customDirRelative = 'custom';
@@ -50,7 +60,10 @@ export async function generateComponentFile(componentFileName, fieldType, contex
   const projectRoot = process.cwd();
   const customDirPath = path.resolve(projectRoot, customDirRelative);
   const absoluteComponentPath = path.resolve(customDirPath, componentFileName);
-
+  if (fsSync.existsSync(absoluteComponentPath)) {
+    console.log(chalk.yellow(`⚠️ Component file already exists: ${absoluteComponentPath}`));
+    return {"alreadyExists": true, "path": absoluteComponentPath}
+  }
   try {
     await fs.mkdir(customDirPath, { recursive: true });
     console.log(chalk.dim(`Ensured custom directory exists: ${customDirPath}`));
@@ -60,7 +73,7 @@ export async function generateComponentFile(componentFileName, fieldType, contex
     await fs.writeFile(absoluteComponentPath, fileContent, 'utf-8');
     console.log(chalk.green(`✅ Generated component file: ${absoluteComponentPath}`));
 
-    return absoluteComponentPath;
+    return {"alreadyExists": false, "path": absoluteComponentPath}
 
   } catch (error) {
     console.error(chalk.red(`❌ Error creating component file at ${absoluteComponentPath}:`));
@@ -70,3 +83,66 @@ export async function generateComponentFile(componentFileName, fieldType, contex
     throw error;
   }
 }
+
+export async function generateCrudInjectionComponent(componentFileName, crudType, context, config) {
+  const customDirRelative = 'custom';
+  const projectRoot = process.cwd();
+  const customDirPath = path.resolve(projectRoot, customDirRelative);
+  const absoluteComponentPath = path.resolve(customDirPath, componentFileName);
+
+  if (fsSync.existsSync(absoluteComponentPath)) {
+    console.log(chalk.yellow(`⚠️ Component file already exists: ${absoluteComponentPath}`));
+    return { alreadyExists: true, path: absoluteComponentPath };
+  }
+
+  try {
+    await fs.mkdir(customDirPath, { recursive: true });
+    console.log(chalk.dim(`Ensured custom directory exists: ${customDirPath}`));
+
+    const fileContent = await generateVueContent(crudType, context);
+
+    await fs.writeFile(absoluteComponentPath, fileContent, 'utf-8');
+    console.log(chalk.green(`✅ Generated component file: ${absoluteComponentPath}`));
+
+    return { alreadyExists: false, path: absoluteComponentPath };
+  } catch (error) {
+    console.error(chalk.red(`❌ Error creating component file at ${absoluteComponentPath}:`));
+    throw error;
+  }
+}
+
+export async function generateLoginOrGlobalComponentFile(componentFileName, injectionType, context) {
+  const customDirRelative = 'custom';
+  const projectRoot = process.cwd();
+  const customDirPath = path.resolve(projectRoot, customDirRelative);
+  const absoluteComponentPath = path.resolve(customDirPath, componentFileName);
+
+  if (fsSync.existsSync(absoluteComponentPath)) {
+    console.log(chalk.yellow(`⚠️ Component file already exists: ${absoluteComponentPath}`));
+    return { alreadyExists: true, path: absoluteComponentPath };
+  }
+
+  try {
+    await fs.mkdir(customDirPath, { recursive: true });
+    console.log(chalk.dim(`Ensured custom directory exists: ${customDirPath}`));
+
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = path.dirname(__filename);
+    let templatePath;
+    if (injectionType === 'afterLogin') {
+      templatePath = path.join(__dirname, 'templates', 'login', `${injectionType}.vue.hbs`);
+    } else {
+      templatePath = path.join(__dirname, 'templates', 'global', `${injectionType}.vue.hbs`);
+    }
+
+    const fileContent = await renderHBSTemplate(templatePath, context);
+
+    await fs.writeFile(absoluteComponentPath, fileContent, 'utf-8');
+    console.log(chalk.green(`✅ Generated login injection component: ${absoluteComponentPath}`));
+
+    return { alreadyExists: false, path: absoluteComponentPath };
+  } catch (error) {
+    console.error(chalk.red(`❌ Error creating login component at ${absoluteComponentPath}`));
+    throw error;
+  }
+}

package/commands/createCustomComponent/main.js

@@ -1,10 +1,17 @@
-import { select, confirm, Separator } from '@inquirer/prompts';
-import chalk from 'chalk';
-import path from 'path'; // Import path
+import { select, Separator, search, input } from '@inquirer/prompts';
+import chalk from 'chalk';// Import path
+import path from 'path';
 import { loadAdminForthConfig } from './configLoader.js'; // Helper to load config
-import { generateComponentFile } from './fileGenerator.js'; // Helper to create the .vue file
-import { updateResourceConfig } from './configUpdater.js'; // Helper to modify resource .ts file
-// import { openFileInIde } from './ideHelper.js'; // Helper to open file
+import { generateComponentFile, generateLoginOrGlobalComponentFile, generateCrudInjectionComponent } from './fileGenerator.js'; // Helper to create the .vue file
+import { updateResourceConfig, injectLoginComponent, injectGlobalComponent, updateCrudInjectionConfig } from './configUpdater.js'; // Helper to modify resource .ts file
+
+function sanitizeLabel(input){
+  return input
+    .replace(/[^a-zA-Z0-9\s]/g, '')
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) 
+    .join('');
+}
 
 export default async function createComponent(args) {
   console.log('This command will help you to generate boilerplate for component.\n');
@@ -64,13 +71,23 @@ async function handleFieldComponentCreation(config, resources) {
   const selectedResource = resources.find(r => r.resourceId === resourceId);
   console.log(chalk.grey(`Selected ❯ 🔤 Custom fields ❯ ${fieldType} ❯ ${selectedResource.label}`));
 
-  const columnName = await select({
-      message: 'Select column for which you want to create component:',
-      choices: [
-          ...selectedResource.columns.map(c => ({ name: `${c.label} ${chalk.grey(`${c.name}`)}`, value: c.name })),
-          new Separator(),
-          { name: '🔙 BACK', value: '__BACK__' },
-      ]
+  const columnName = await search({
+    message: 'Select column for which you want to create component:',
+    source: async (input) => {
+      const searchTerm = input ? input.toLowerCase() : '';
+
+      const filteredColumns = selectedResource.columns.filter(c => {
+        const label = c.label || ''; 
+        const name = c.name || '';
+        return label.toLowerCase().includes(searchTerm) || name.toLowerCase().includes(searchTerm);
+      });
+
+      return [
+        ...filteredColumns.map(c => ({ name: `${c.label} ${chalk.grey(`${c.name}`)}`, value: c.name })),
+        new Separator(),
+        { name: '🔙 BACK', value: '__BACK__' },
+      ];
+    },
   });
   if (columnName === '__BACK__') return handleFieldComponentCreation(config, resources); // Pass config back
 
@@ -79,60 +96,226 @@ async function handleFieldComponentCreation(config, resources) {
    console.log(chalk.dim(`One-line alternative: |adminforth component fields.${fieldType}.${resourceId}.${columnName}|`));
 
 
-  const existingComponentPath = null;
-
-  if (existingComponentPath) {
-    const action = await select({
-        message: 'You already have a component for this field, open it in editor?',
-        choices: [
-            { name: '✏️ Open in IDE', value: 'open' },
-            { name: '🔙 BACK', value: '__BACK__' },
-            { name: '🚪 Exit', value: '__EXIT__' },
-        ]
-    });
-    if (action === 'open') {
-        // await openFileInIde(existingComponentPath); // Needs absolute path
-        console.log(`Opening ${existingComponentPath}... (Implementation needed)`);
-    } else if (action === '__BACK__') {
-        return handleFieldComponentCreation(config, resources); // Pass config back
-    } else {
-        process.exit(0);
+  const safeResourceLabel = sanitizeLabel(selectedResource.label)
+  const safeColumnLabel = sanitizeLabel(selectedColumn.label)
+  const componentFileName = `${safeResourceLabel}${safeColumnLabel}${fieldType.charAt(0).toUpperCase() + fieldType.slice(1)}.vue`; // e.g., UserEmailShow.vue
+  const componentPathForConfig = `@@/${componentFileName}`; // Path relative to custom dir for config
+
+  
+  try {
+    const { alreadyExists, path: absoluteComponentPath } = await generateComponentFile(
+      componentFileName,
+      fieldType,
+      { resource: selectedResource, column: selectedColumn },
+      config
+    );
+    if (!alreadyExists) {
+      console.log(chalk.dim(`Component generation successful: ${absoluteComponentPath}`));
+
+      await updateResourceConfig(selectedResource.resourceId, columnName, fieldType, componentPathForConfig);
+      console.log(
+        chalk.bold.greenBright('You can now open the component in your IDE:'),
+        chalk.underline.cyanBright(absoluteComponentPath)
+      );
+    }
+    process.exit(0);
+}catch (error) {
+  console.error(error);
+  console.error(chalk.red('\n❌ Component creation failed. Please check the errors above.'));
+  process.exit(1);
+}
+}
+
+async function handleCrudPageInjectionCreation(config, resources) {
+  console.log(chalk.grey('Selected ❯ 📄 CRUD Page Injection'));
+
+  const crudType = await select({
+    message: 'What view do you want to inject a custom component into?',
+    choices: [
+      { name: '🔸 list', value: 'list' },
+      { name: '📃 show', value: 'show' },
+      { name: '✏️ edit', value: 'edit' },
+      { name: '➕ create', value: 'create' },
+      new Separator(),
+      { name: '🔙 BACK', value: '__BACK__' },
+    ],
+  });
+  if (crudType === '__BACK__') return createComponent([]);
+
+  console.log(chalk.grey(`Selected ❯ 📄 CRUD Page Injection ❯ ${crudType}`));
+
+  const resourceId = await select({
+    message: 'Select resource for which you want to inject the component:',
+    choices: [
+      ...resources.map(r => ({ name: `${r.label} ${chalk.grey(`${r.resourceId}`)}`, value: r.resourceId })),
+      new Separator(),
+      { name: '🔙 BACK', value: '__BACK__' },
+    ],
+  });
+  if (resourceId === '__BACK__') return handleCrudPageInjectionCreation(config, resources);
+
+  const selectedResource = resources.find(r => r.resourceId === resourceId);
+  console.log(chalk.grey(`Selected ❯ 📄 CRUD Page Injection ❯ ${crudType} ❯ ${selectedResource.label}`));
+
+  const injectionPosition = await select({
+    message: 'Where exactly do you want to inject the component?',
+    choices: [
+      { name: '⬆️ Before Breadcrumbs', value: 'beforeBreadcrumbs' },
+      { name: '⬇️ After Breadcrumbs', value: 'afterBreadcrumbs' },
+      { name: '📄 After Page', value: 'bottom' },
+      { name: '⋯ threeDotsDropdownItems', value: 'threeDotsDropdownItems' },
+      new Separator(),
+      { name: '🔙 BACK', value: '__BACK__' },
+    ],
+  });
+  if (injectionPosition === '__BACK__') return handleCrudPageInjectionCreation(config, resources);
+
+  const isThin = await select({
+    message: 'Will this component be thin enough to fit on the same page with list (so list will still shrink)?',
+    choices: [
+      { name: 'Yes', value: true },
+      { name: 'No', value: false },
+    ],
+  });
+
+  const safeResourceLabel = sanitizeLabel(selectedResource.label)
+  const componentFileName = `${safeResourceLabel}${crudType.charAt(0).toUpperCase() + crudType.slice(1)}${injectionPosition.charAt(0).toUpperCase() + injectionPosition.slice(1)}.vue`;
+  const componentPathForConfig = `@@/${componentFileName}`;
+
+  try {
+    const { alreadyExists, path: absoluteComponentPath } = await generateCrudInjectionComponent(
+      componentFileName,
+      injectionPosition,
+      { resource: selectedResource },
+      config
+    );
+
+    if (!alreadyExists) {
+      console.log(chalk.dim(`Component generation successful: ${absoluteComponentPath}`));
+
+      await updateCrudInjectionConfig(
+        selectedResource.resourceId,
+        crudType,
+        injectionPosition,
+        componentPathForConfig,
+        isThin
+      );
+      console.log(
+        chalk.bold.greenBright('You can now open the component in your IDE:'),
+        chalk.underline.cyanBright(absoluteComponentPath)
+      );
     }
-  } else {
-    const safeResourceLabel = selectedResource.label.replace(/[^a-zA-Z0-9]/g, '');
-    const safeColumnLabel = selectedColumn.label.replace(/[^a-zA-Z0-9]/g, '');
-    const componentFileName = `${safeResourceLabel}${safeColumnLabel}${fieldType.charAt(0).toUpperCase() + fieldType.slice(1)}.vue`; // e.g., UserEmailShow.vue
-    const componentPathForConfig = `@@/${componentFileName}`; // Path relative to custom dir for config
-
-    let absoluteComponentPath;
-    try {
-        absoluteComponentPath = await generateComponentFile(
-            componentFileName,
-            fieldType,
-            { resource: selectedResource, column: selectedColumn },
-            config
-        );
-        console.log(chalk.dim(`Component generation successful: ${absoluteComponentPath}`));
-
-        await updateResourceConfig(selectedResource.resourceId, columnName, fieldType, componentPathForConfig);
-        console.log(chalk.green(`\n✅ Successfully created component ${componentPathForConfig} and updated configuration.`));
-
-        const openNow = await confirm({
-            message: 'Open the new component file in your IDE?',
-            default: true
-        });
-        if (openNow) {  // await openFileInIde(absoluteComponentPath); // Use the absolute path here
-           console.log(`Opening ${absoluteComponentPath}... (Implementation needed)`);
-        }
-
-    } catch (error) {
-        console.error(chalk.red('\n❌ Component creation failed. Please check the errors above.'));
-        process.exit(1);
+    process.exit(0);
+  } catch (error) {
+    console.error(error);
+    console.error(chalk.red('\n❌ Component creation failed. Please check the errors above.'));
+    process.exit(1);
+  }
+}
+
+
+async function handleLoginPageInjectionCreation(config) { 
+  console.log('Selected ❯ 🔐 Login page injections');
+  const injectionType = await select({
+    message: 'Select injection type:',
+    choices: [
+      { name: 'After Login and password inputs', value: 'afterLogin' },
+      { name: '🔙 BACK', value: '__BACK__' },
+    ],
+  });
+  if (injectionType === '__BACK__') return createComponent([]);
+
+  console.log(chalk.grey(`Selected ❯ 🔐 Login page injections ❯ ${injectionType}`));
+
+  const reason = await input({
+    message: 'What will you need component for? (enter name)',
+  });
+
+  console.log(chalk.grey(`Selected ❯ 🔐 Login page injections ❯ ${injectionType} ❯ ${reason}`));
+
+
+  try {
+    const safeName = sanitizeLabel(reason)
+    const componentFileName = `CustomLogin${safeName}.vue`;
+  
+    const context = { reason };
+  
+    const { alreadyExists, path: absoluteComponentPath } = await generateLoginOrGlobalComponentFile(
+      componentFileName,
+      injectionType,
+      context
+    );
+    if (!alreadyExists) {
+      console.log(chalk.dim(`Component generation successful: ${absoluteComponentPath}`));
+      const configFilePath = path.resolve(process.cwd(), 'index.ts');
+      console.log(chalk.dim(`Injecting component: ${configFilePath}, ${componentFileName}`));
+      await injectLoginComponent(configFilePath, `@@/${componentFileName}`);
+      
+      console.log(
+        chalk.bold.greenBright('You can now open the component in your IDE:'),
+        chalk.underline.cyanBright(absoluteComponentPath)
+      );
     }
+    process.exit(0);
+  }catch (error) {
+    console.error(error);
+    console.error(chalk.red('\n❌ Component creation failed. Please check the errors above.'));
+    process.exit(1);
   }
+  
 }
 
-// --- TODO: Implement similar handlers for other component types (pass config) ---
-async function handleCrudPageInjectionCreation(config, resources) { console.log('CRUD Page Injection creation not implemented yet.'); }
-async function handleLoginPageInjectionCreation(config) { console.log('Login Page Injection creation not implemented yet.'); }
-async function handleGlobalInjectionCreation(config) { console.log('Global Injection creation not implemented yet.'); }
+async function handleGlobalInjectionCreation(config) {
+  console.log('Selected ❯ 🌍 Global page injections');
+
+  const injectionType = await select({
+    message: 'Select global injection type:',
+    choices: [
+      { name: 'User Menu', value: 'userMenu' },
+      { name: 'Header', value: 'header' },
+      { name: 'Sidebar', value: 'sidebar' },
+      { name: 'Every Page Bottom', value: 'everyPageBottom' },
+      { name: '🔙 BACK', value: '__BACK__' },
+    ],
+  });
+
+  if (injectionType === '__BACK__') return createComponent([]);
+
+  console.log(chalk.grey(`Selected ❯ 🌍 Global page injections ❯ ${injectionType}`));
+
+  const reason = await input({
+    message: 'What will you need the component for? (enter name)',
+  });
+
+  console.log(chalk.grey(`Selected ❯ 🌍 Global page injections ❯ ${injectionType} ❯ ${reason}`));
+
+  try {
+    const safeName = sanitizeLabel(reason)
+    const componentFileName = `CustomGlobal${safeName}.vue`;
+
+    const context = { reason };
+
+    const { alreadyExists, path: absoluteComponentPath } = await generateLoginOrGlobalComponentFile(
+      componentFileName,
+      injectionType,
+      context
+    );
+    if (!alreadyExists) {
+      console.log(chalk.dim(`Component generation successful: ${absoluteComponentPath}`));
+
+      const configFilePath = path.resolve(process.cwd(), 'index.ts');
+      
+      await injectGlobalComponent(configFilePath, injectionType, `@@/${componentFileName}`);
+
+      console.log(
+        chalk.bold.greenBright('You can now open the component in your IDE:'),
+        chalk.underline.cyanBright(absoluteComponentPath)
+      );
+    }
+    process.exit(0);
+  } catch (error) {
+    console.error(error);
+    console.error(chalk.red('\n❌ Component creation failed. Please check the errors above.'));
+    process.exit(1);
+  }
+}

package/commands/createCustomComponent/templates/customCrud/afterBreadcrumbs.vue.hbs

@@ -0,0 +1,30 @@
+<template>
+  <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
+    <button
+      type="button"
+      @click="handleClick"
+      class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800"
+    >
+      Example
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import adminforth from '@/adminforth';
+
+const { t } = useI18n();
+
+onMounted(() => {
+  // Logic on mount if needed
+});
+
+function handleClick() {
+  adminforth.alert({
+    message: t('Confirmed'),
+    variant: 'success',
+  });
+}
+</script>

package/commands/createCustomComponent/templates/customCrud/beforeBreadcrumbs.vue.hbs

@@ -0,0 +1,30 @@
+<template>
+  <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
+    <button
+      type="button"
+      @click="handleClick"
+      class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800"
+    >
+      Example
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import adminforth from '@/adminforth';
+
+const { t } = useI18n();
+
+onMounted(() => {
+  // Logic on mount if needed
+});
+
+function handleClick() {
+  adminforth.alert({
+    message: t('Confirmed'),
+    variant: 'success',
+  });
+}
+</script>

package/commands/createCustomComponent/templates/customCrud/bottom.vue.hbs

@@ -0,0 +1,61 @@
+<template>
+  <div class="overflow-auto p-4">
+    <table class="min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
+      <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <tr>
+          <th scope="col" class="px-6 py-3" v-for="header in headers" :key="header">
+            {{ header }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="row in rows"
+          :key="row.id"
+          class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+        >
+          <td class="px-6 py-4" v-for="cell in row.cells" :key="cell">
+            {{ cell }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+const headers = [
+  'ID',
+  'Name',
+  'Email',
+  'Phone',
+  'Address',
+  'City',
+  'Country',
+  'Company',
+  'Position',
+  'Status',
+];
+
+const rows = Array.from({ length: 50 }, (_, i) => ({
+  id: i + 1,
+  cells: [
+    i + 1,
+    `Name ${i + 1}`,
+    `user${i + 1}@example.com`,
+    `+1-555-010${i.toString().padStart(2, '0')}`,
+    `Address ${i + 1}`,
+    `City ${i + 1}`,
+    `Country ${i + 1}`,
+    `Company ${i + 1}`,
+    `Position ${i + 1}`,
+    i % 2 === 0 ? 'Active' : 'Inactive',
+  ],
+}));
+
+onMounted(() => {
+  console.log('Table mounted. Rows:', rows.length);
+});
+</script>

package/commands/createCustomComponent/templates/customCrud/threeDotsDropdownItems.vue.hbs

@@ -0,0 +1,55 @@
+<template>
+  <div class="flex flex-col p-4 space-y-2">
+    <button
+      v-for="item in menuItems"
+      :key="item.label"
+      @click="item.action"
+      class="w-full text-left text-sm px-4 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"
+    >
+      {{ t(item.label) }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import adminforth from '@/adminforth';
+import { onMounted } from 'vue';
+
+const { t } = useI18n();
+
+const menuItems = [
+  {
+    label: 'Show Success Alert',
+    action: () => {
+      adminforth.alert({
+        message: t('Success Alert'),
+        variant: 'success',
+      });
+    },
+  },
+  {
+    label: 'Show Warning Alert',
+    action: () => {
+      adminforth.alert({
+        message: t('Warning Alert'),
+        variant: 'warning',
+      });
+    },
+  },
+  {
+    label: 'Show Error Alert',
+    action: () => {
+      adminforth.alert({
+        message: t('Error Alert'),
+        variant: 'danger',
+      });
+    },
+  },
+];
+
+onMounted(() => {
+  // Logic on mount if needed
+});
+
+</script>

package/commands/createCustomComponent/templates/global/everyPageBottom.vue.hbs

@@ -0,0 +1,11 @@
+<template>
+  <div class="flex items-center justify-center text-gray-900 dark:text-gray-400 p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
+    {{reason}}
+  </div>
+</template>
+
+<script setup>
+    defineProps({
+        reason: String
+    });
+</script>

package/commands/createCustomComponent/templates/global/header.vue.hbs

@@ -0,0 +1,11 @@
+<template>
+  <div class="text-center text-gray-500 text-sm mt-4">
+    {{reason}}
+  </div>
+</template>
+
+<script setup>
+    defineProps({
+        reason: String
+    });
+</script>

package/commands/createCustomComponent/templates/global/sidebar.vue.hbs

@@ -0,0 +1,11 @@
+<template>
+  <div class="display-flex justify-center text-lightSidebarIcons text-center dark:text-darkSidebarIcons">
+    {{reason}}
+  </div>
+</template>
+
+<script setup>
+    defineProps({
+        reason: String
+    });
+</script>

package/commands/createCustomComponent/templates/global/userMenu.vue.hbs

@@ -0,0 +1,11 @@
+<template>
+  <div class="text-center text-gray-500 text-sm mt-4">
+    {{reason}}
+  </div>
+</template>
+
+<script setup>
+    defineProps({
+        reason: String
+    });
+</script>

package/commands/createCustomComponent/templates/login/afterLogin.vue.hbs

@@ -0,0 +1,12 @@
+<template>
+  <div class="text-center text-gray-500 text-sm mt-4">
+    {{reason}}
+  </div>
+</template>
+
+<script setup>
+    defineProps({
+        reason: String
+    });
+</script>
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.21.0-next.11",
+  "version": "1.21.0-next.12",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",