@admin-layout/gluestack-ui-mobile 9.0.4-alpha.0 → 9.0.4-alpha.102

package/src/utils/generateMobileNavigations.ts

@@ -5,6 +5,7 @@ import { fileURLToPath } from 'url';
 import { createRequire } from 'module';
 import { exec as execCallback } from 'child_process';
 import { getSortedNavigations } from '@common-stack/client-react/lib/route/react-navigation/get-navigation-utils.js';
+import { performCopyOperations } from '@common-stack/rollup-vite-utils/lib/preStartup/configLoader/configLoader.js';
 import { getReplacedRouteConfig } from './getReplacedRouteConfig.js';
 const require = createRequire(import.meta.url);
 const __filename = fileURLToPath(import.meta.url);
@@ -22,14 +23,7 @@ const mainRoutesJsFileName = 'mainRoutes.js';
 const mainAppFileName = 'index.js';
 
 type IGenerateMobileNavigationsProps = {
-    appDirPath: string;
-    modules: any;
-    initialRouteName?: string;
-    unauthenticatedComponentPath?: string;
-    customTabBarPath?: string;
-    customDrawerPath?: string;
-    customHeaderPath?: string;
-    i18Options: any;
+    configFilePath: any;
 };
 
 export const readJsonFile = (filePath) => {
@@ -69,35 +63,46 @@ export const getLayoutConfig = async () => {
 };
 
 export class GenerateMobileNavigations {
-    #layoutSettings: any = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
-    #appDirPath: string;
+    #configFileData: any = {};
+    #configFilePath: any;
+    #appPath: string = 'app';
+    #isDefaultPackagePathMobileRoot: boolean;
+    #mobileStackPath: string = 'mobile-stack-react';
+    //#layoutSettings: any = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
+    #appDirPath: any;
     #modules: any;
+    #initialRouteNameRootStack: string;
     #initialRouteName: string;
     #unauthenticatedComponentPath: string;
     #customTabBarPath: string;
     #customDrawerPath: string;
     #customHeaderPath: string;
     #i18Options: any;
+    #iconsRepository: string;
+
+    constructor({ configFilePath }: IGenerateMobileNavigationsProps) {
+        this.#configFilePath = configFilePath;
+        const config = this.#readConfigFile(configFilePath);
+        this.#configFileData = config;
+        // this.#layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
+        this.#appPath = config?.commonPaths?.appPath ?? 'app';
+        this.#isDefaultPackagePathMobileRoot = config?.mobileConfig?.isDefaultPackagePathMobileRoot ?? false;
+        this.#iconsRepository = config?.iconsRepository ?? '';
+        this.#mobileStackPath = config?.mobileStackPath ?? 'mobile-stack-react';
+        this.#appDirPath = path.join(path.dirname(configFilePath), this.#appPath);
+        this.#modules = config?.modules ?? [];
+        this.#initialRouteName = config?.mobileConfig?.initialRouteName ?? '';
+        this.#initialRouteNameRootStack = config?.mobileConfig?.initialRouteNameRootStack ?? 'MainStack';
+        this.#unauthenticatedComponentPath = config?.mobileConfig?.unauthenticatedComponentPath ?? '';
+        this.#customTabBarPath = config?.mobileConfig?.customTabBarPath ?? '';
+        this.#customDrawerPath = config?.mobileConfig?.customDrawerPath ?? '';
+        this.#customHeaderPath = config?.mobileConfig?.customHeaderPath ?? '';
+        this.#i18Options = config?.i18n ?? {};
+    }
 
-    constructor({
-        appDirPath,
-        modules,
-        initialRouteName = '',
-        unauthenticatedComponentPath = null,
-        customTabBarPath = null,
-        customDrawerPath = null,
-        customHeaderPath = null,
-        i18Options = {},
-    }: IGenerateMobileNavigationsProps) {
-        this.#layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
-        this.#appDirPath = appDirPath;
-        this.#modules = modules;
-        this.#initialRouteName = initialRouteName;
-        this.#unauthenticatedComponentPath = unauthenticatedComponentPath;
-        this.#customTabBarPath = customTabBarPath;
-        this.#customDrawerPath = customDrawerPath;
-        this.#customHeaderPath = customHeaderPath;
-        this.#i18Options = i18Options;
+    #readConfigFile(configFilePath: any) {
+        const jsonData = fs.readFileSync(configFilePath, 'utf-8');
+        return JSON.parse(jsonData);
     }
 
     async #readJsonFile(filePath) {
@@ -154,10 +159,20 @@ export class GenerateMobileNavigations {
 
     async #getModulesRouteConfig({ modules }) {
         const allFilteredRoutes = [];
+        let pkgFile;
         for (const pkg of modules) {
-            const pkgPath = require.resolve(pkg);
-            const pkgDirPath = path.dirname(pkgPath);
-            const pkgFile = path.join(pkgDirPath, 'routes.json');
+            if (this.#isDefaultPackagePathMobileRoot) {
+                const pkgRootFilePath = path.join(
+                    path.join(path.dirname(this.#configFilePath), 'node_modules/lib'),
+                    pkg,
+                );
+                pkgFile = path.join(pkgRootFilePath, 'routes.json');
+            } else {
+                const pkgPath = require.resolve(pkg);
+                const pkgDirPath = path.dirname(pkgPath);
+                pkgFile = path.join(pkgDirPath, 'routes.json');
+            }
+
             if (fs.existsSync(pkgFile)) {
                 const fileModuleJSON: any = await readJsonFile(pkgFile);
                 if (fileModuleJSON) {
@@ -193,14 +208,16 @@ export class GenerateMobileNavigations {
         return value;
     }
 
-    async #generateAppRoutesJson({ appDirPath }) {
-        const parentDirPath = path.dirname(appDirPath);
+    async #generateAppRoutesJson() {
+        const appDirPath = this.#appDirPath;
+        const parentDirPath = path.dirname(this.#configFileData?.mobileConfig?.computeFilePath ?? this.#configFilePath);
         const parentDirName = path.basename(parentDirPath);
         const appDirName = path.basename(appDirPath);
         // const tsFile = 'src/compute.ts';
         // const outputDir = 'src/app';
         const tsFile = `${parentDirName}/compute.ts`;
-        const outputDir = `${parentDirName}/${appDirName}`;
+        // const outputDir = `${parentDirName}/${appDirName}`;
+        const outputDir = `${appDirName}`;
         const tscCommand = `tsc ${tsFile} --outDir ${outputDir} --target es6 --module esnext --jsx react  --allowSyntheticDefaultImports true --moduleResolution node --esModuleInterop true --forceConsistentCasingInFileNames true  --skipLibCheck true`;
         const mainRoutesJsFile = path.join(appDirPath, '/compute.js');
         const mainRoutesMjsFile = path.join(appDirPath, '/compute.mjs');
@@ -216,13 +233,12 @@ export class GenerateMobileNavigations {
                 const noWhitespaceJsData = noCommentsData.replace(/\s+/g, '');
                 if (noWhitespaceJsData?.length == 0) {
                     const outPutDirName = path.dirname(outputFile);
-                    const isDirCreated = await this.#makeDir(outPutDirName);
-                    if (isDirCreated) {
-                        const writeFileResponse = await this.#writeFile(outputFile, JSON.stringify(allFilteredRoutes));
-                        if (writeFileResponse) {
-                            return true;
-                        } else return false;
-                    } else return false;
+                    try {
+                        await this.#makeDir(outPutDirName);
+                        await this.#writeFile(outputFile, JSON.stringify(allFilteredRoutes));
+                    } catch (error) {
+                        console.log('Error directory/file create', error);
+                    }
                 } else {
                     const newFilePath = mainRoutesJsFile.replace('.js', '.mjs');
                     const renameFileResponse = await this.#renameFile(mainRoutesJsFile, newFilePath);
@@ -242,46 +258,45 @@ export class GenerateMobileNavigations {
                                         return { [routConfig.path]: routConfig };
                                     }) ?? [];
                                 allFilteredRoutes.push(...newRoutes);
-                                const writeFileResponse = await this.#writeFile(
-                                    outputFile,
-                                    JSON.stringify(allFilteredRoutes, null, 2),
-                                );
-
-                                if (writeFileResponse) {
-                                    fs.unlinkSync(mainRoutesMjsFile);
-                                    return true;
-                                } else return false;
+                                try {
+                                    const writeFileResponse = await this.#writeFile(
+                                        outputFile,
+                                        JSON.stringify(allFilteredRoutes, null, 2),
+                                    );
+
+                                    if (writeFileResponse) fs.unlinkSync(mainRoutesMjsFile);
+                                } catch (error) {
+                                    console.log('Error creating main routes file', error);
+                                }
                             }
-                        } else return false;
-                    } else return false;
+                        }
+                    }
                 }
             } else {
                 const outPutDirName = path.dirname(outputFile);
-                const isDirCreated = await this.#makeDir(outPutDirName);
-                if (isDirCreated) {
-                    const writeFileResponse = await this.#writeFile(outputFile, JSON.stringify(allFilteredRoutes));
-                    if (writeFileResponse) {
-                        return true;
-                    } else return false;
-                } else return false;
+                try {
+                    await this.#makeDir(outPutDirName);
+                    await this.#writeFile(outputFile, JSON.stringify(allFilteredRoutes));
+                } catch (error) {
+                    console.log('Error creating main routes file', error);
+                }
             }
             // return true;
         } catch (error) {
             console.error(`exec error: ${error.message}`);
             const outPutDirName = path.dirname(outputFile);
-            const isDirCreated = await this.#makeDir(outPutDirName);
-            if (isDirCreated) {
-                const writeFileResponse = await this.#writeFile(outputFile, JSON.stringify(allFilteredRoutes));
-                if (writeFileResponse) {
-                    return true;
-                } else return false;
-            } else return false;
+            try {
+                await this.#makeDir(outPutDirName);
+                await this.#writeFile(outputFile, JSON.stringify(allFilteredRoutes));
+            } catch (error) {
+                console.log('Error creating main routes file', error);
+            }
         }
     }
 
     async #generateImportStatements({ modules, initialRouteName }) {
         try {
-            const layoutSettings = this.#layoutSettings;
+            const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
             const layoutConfigFileData = await this.#getLayoutConfig();
             const hostRouteConfig = layoutConfigFileData['host-bottom'];
             const hostRouteKey = Object.keys(hostRouteConfig)[1];
@@ -401,7 +416,7 @@ export class GenerateMobileNavigations {
 
     async #generateMainRoutesFile({ initialRouteName, i18Options }) {
         try {
-            const layoutSettings = this.#layoutSettings;
+            const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
             const layoutConfigFileData = await this.#getLayoutConfig();
             const hostRouteConfig = layoutConfigFileData['host-bottom'];
             const hostRouteKey = Object.keys(hostRouteConfig)[1];
@@ -469,8 +484,24 @@ export class GenerateMobileNavigations {
                         const appReplacedRouteConfig = replacedRouteConfig ? Object.keys(replacedRouteConfig)?.map((k)=>({[k]:replacedRouteConfig[k]})) : [];
 
                         if (appReplacedRouteConfig) {
-                        const hostRouteConfig = appReplacedRouteConfig?.map((obj)=> Object.fromEntries(Object.entries(obj)?.filter(([key,val])=>key === '/' || key.startsWith('//'+layoutSettings.hostLayout))))?.filter(value => Object.keys(value).length !== 0)??[];
-                        const layoutRouteConfig = appReplacedRouteConfig?.map((obj)=> Object.fromEntries(Object.entries(obj)?.filter(([key,val])=>key === '/' || !key.startsWith('//'+layoutSettings.hostLayout))))?.filter(value => Object.keys(value).length !== 0)??[];
+                                  const hostRouteConfig = appReplacedRouteConfig.filter(item => {
+                                        return Object.keys(item).some(key =>
+                                        key === "/" ||
+                                        (key.startsWith("//" + layoutSettings.hostLayout) || key.startsWith("//:orgName/" + layoutSettings.hostLayout))
+                                        );
+                                    })?.filter((value) => Object.keys(value).length !== 0) ?? [];
+
+
+                                    const layoutRouteConfig = appReplacedRouteConfig.filter(item => {
+                                        return Object.keys(item).some(key =>
+                                        key === "/" ||
+                                        (!key.startsWith("//" + layoutSettings.hostLayout) && !key.startsWith("//:orgName/" + layoutSettings.hostLayout))
+                                        );
+                                    })?.filter((value) => Object.keys(value).length !== 0) ?? [];
+
+
+                        // const hostRouteConfig = appReplacedRouteConfig?.map((obj)=> Object.fromEntries(Object.entries(obj)?.filter(([key,val])=>key === '/' || key.startsWith('//'+layoutSettings.hostLayout))))?.filter(value => Object.keys(value).length !== 0)??[];
+                        // const layoutRouteConfig = appReplacedRouteConfig?.map((obj)=> Object.fromEntries(Object.entries(obj)?.filter(([key,val])=>key === '/' || !key.startsWith('//'+layoutSettings.hostLayout))))?.filter(value => Object.keys(value).length !== 0)??[];
                         const featureRouteConfig = defaultSettings?.layout == 'host-bottom' ? hostRouteConfig:layoutRouteConfig;
                         features.routeConfig = featureRouteConfig;
                         setMainFeatures(features);
@@ -517,7 +548,6 @@ export class GenerateMobileNavigations {
             return { appFeatures };
         } catch (err) {
             console.error('Error:', err);
-            return false;
         }
     }
 
@@ -525,12 +555,11 @@ export class GenerateMobileNavigations {
         const mainRoutesFile = path.join(appDirPath, `/${mainRoutesJsFileName}`);
         const imports: any = await this.#generateMainRoutesFile({ initialRouteName, i18Options });
         const { appFeatures } = imports;
-        if (appFeatures) {
-            const writeFileResponse = await this.#writeFile(mainRoutesFile, appFeatures);
-            if (writeFileResponse) return true;
-            else return false;
+        try {
+            await this.#writeFile(mainRoutesFile, appFeatures);
+        } catch (err) {
+            console.error('Error generating main routes:', err);
         }
-        return false;
     }
 
     async #generateAppFile({ initialRouteName, i18Options }) {
@@ -589,7 +618,6 @@ export class GenerateMobileNavigations {
             return { appFeatures };
         } catch (err) {
             console.error('Error:', err);
-            return false;
         }
     }
 
@@ -597,18 +625,17 @@ export class GenerateMobileNavigations {
         const mainRoutesFile = path.join(appDirPath, `/${mainAppFileName}`);
         const imports: any = await this.#generateAppFile({ initialRouteName, i18Options });
         const { appFeatures } = imports;
-        if (appFeatures) {
-            const writeFileResponse = await this.#writeFile(mainRoutesFile, appFeatures);
-            if (writeFileResponse) return true;
-            else return false;
+        try {
+            await this.#writeFile(mainRoutesFile, appFeatures);
+        } catch (err) {
+            console.error('Error generating app:', err);
         }
-        return false;
     }
 
     async #generateStackNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
         const mainRoutes = path.join(appDirPath, `/${mainRoutesFileName}`);
         const stackDirPath = path.join(appDirPath, `/${stacksDirPath}`);
-        const layoutSettings = this.#layoutSettings;
+        const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         const layoutConfigFileData = await this.#getLayoutConfig();
         const layoutType = layoutSettings?.layout || 'bottom';
         const layoutRouteConfig = layoutConfigFileData[layoutType];
@@ -711,7 +738,12 @@ export class GenerateMobileNavigations {
                 }}}}
              >{(props) => <AuthWrapper 
                        auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
-                       component={<Component${moduleNumber} {...props}   />}
+                       authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                       extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                       component={<Component${moduleNumber} {...props} 
+                           permissions={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                           extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                          />}
                        ${
                            pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
                                ? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
@@ -765,17 +797,17 @@ export class GenerateMobileNavigations {
             moduleRender = `export default ({Stack,...rest}) => { return (<>${moduleContent}</>)}`;
         }
         stackNavigator = importStatements + '\n' + moduleRender;
-        if (stackNavigator) {
-            let stackNavigation = stackNavigator;
-            stackNavigation = prettier.format(stackNavigation, { parser: 'babel' });
-            const stackDirName = path.dirname(stackDirPath);
+        let stackNavigation = stackNavigator;
+        stackNavigation = prettier.format(stackNavigation, { parser: 'babel' });
+        const stackDirName = path.dirname(stackDirPath);
+        try {
             const isDirCreated = await this.#makeDir(stackDirName);
             if (isDirCreated) {
-                const writeFileResponse = await this.#writeFile(stackDirPath, stackNavigation);
-                if (writeFileResponse) return true;
-                else return false;
-            } else return false;
-        } else return false;
+                await this.#writeFile(stackDirPath, stackNavigation);
+            }
+        } catch (error) {
+            console.log('Error generating stack navigation', error);
+        }
     }
 
     async #generateDrawerNavigationsFile({ drawerConfig, unauthenticatedComponentPath, drawerDirPath }) {
@@ -793,6 +825,7 @@ export class GenerateMobileNavigations {
 
         importStatements += `import * as React from 'react';\n`;
         importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
+        importStatements += `import DynamicIcons from '@app/selectiveIcons';\n`;
 
         if (unauthenticatedComponentPath)
             importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
@@ -838,11 +871,36 @@ export class GenerateMobileNavigations {
                   initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
                   options={{...${options},...{${
                 pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
-                    ? `drawerIcon: ({ color, size }) => <${pkgRouteConfig?.icon?.name} name="${
-                          pkgRouteConfig?.icon?.props?.name ?? 'home'
-                      }" size={${pkgRouteConfig?.icon?.props?.size ?? `size`}} color={${
-                          pkgRouteConfig?.icon?.props?.color ?? 'color'
-                      }} />,`
+                    ? `drawerIcon: ({ color }) => { 
+                    const focused = color === '${pkgRouteConfig?.props?.options?.tabBarActiveTintColor}' ? true : false;
+                     const SelectedIcon = DynamicIcons('${pkgRouteConfig?.icon?.name}');
+                     return (<SelectedIcon 
+                      {...{
+                        ...${JSON.stringify({ ...(pkgRouteConfig?.icon?.props || {}) })},
+                        ...{
+                          color:focused ? ${
+                              JSON.stringify(
+                                  pkgRouteConfig?.icon?.props?.color ??
+                                      pkgRouteConfig?.props?.options?.tabBarActiveTintColor,
+                              ) ?? 'black'
+                          }
+                                        :${
+                                            JSON.stringify(pkgRouteConfig?.props?.options?.tabBarInactiveTintColor) ??
+                                            'grey'
+                                        },
+                          stroke:focused ? ${
+                              JSON.stringify(
+                                  pkgRouteConfig?.icon?.props?.color ??
+                                      pkgRouteConfig?.props?.options?.tabBarActiveTintColor,
+                              ) ?? 'black'
+                          }
+                                        :${
+                                            JSON.stringify(pkgRouteConfig?.props?.options?.tabBarInactiveTintColor) ??
+                                            'grey'
+                                        }
+                        }
+                     }}
+                     />)},`
                     : ''
             }
                   ${
@@ -856,7 +914,12 @@ export class GenerateMobileNavigations {
                   }}}}
                 >{(props) => <AuthWrapper 
                            auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
-                           component={<Component${moduleNumber} {...props}   />}
+                           authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                           extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                           component={<Component${moduleNumber} {...props}
+                             permissions={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                             extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                              />}
                            ${
                                pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
                                    ? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
@@ -883,10 +946,10 @@ export class GenerateMobileNavigations {
                            }
                             />}</Drawer.Screen>`;
         }
-        if (icons && icons?.length) {
-            const uniqueIcons = [...new Set(icons.split(','))].join(',');
-            importStatements += `import { ${uniqueIcons} } from '@expo/vector-icons';\n`;
-        }
+        // if (icons && icons?.length) {
+        //     const uniqueIcons = [...new Set(icons.split(','))].join(',');
+        //     importStatements += `import Icons from '@expo/vector-icons';\n`;
+        // }
 
         if (customHeaderPaths && customHeaderPaths?.length) {
             const uniqueHeaderNames = [...new Set(customHeaderNames.split(','))]?.filter((str) => str?.length);
@@ -913,20 +976,18 @@ export class GenerateMobileNavigations {
 
         moduleRender = `export default ({Drawer,...rest}) => { return (<>${moduleContent}</>)}`;
         moduleNavigation = importStatements + '\n' + moduleRender;
-
         const drawerNavigator = moduleNavigation;
-        if (drawerNavigator) {
-            let drawerNavigation = drawerNavigator;
-            drawerNavigation = prettier.format(drawerNavigation, { parser: 'babel' });
-            const drawerDirName = path.dirname(drawerDirPath);
+        let drawerNavigation = drawerNavigator;
+        drawerNavigation = prettier.format(drawerNavigation, { parser: 'babel' });
+        const drawerDirName = path.dirname(drawerDirPath);
+        try {
             const isDirCreated = await this.#makeDir(drawerDirName);
             if (isDirCreated) {
-                const writeFileResponse = await this.#writeFile(drawerDirPath, drawerNavigation);
-                if (writeFileResponse) return true;
-                else return false;
-            } else return false;
+                await this.#writeFile(drawerDirPath, drawerNavigation);
+            }
+        } catch (error) {
+            console.log('Error generating drawer navigation file', error);
         }
-        return false;
     }
 
     async #generateDrawerNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
@@ -934,7 +995,7 @@ export class GenerateMobileNavigations {
         const drawerDirPath = path.join(appDirPath, `/${drawerFilePath}`);
         const hostDirPath = path.join(appDirPath, `/${hostDrawerFilePath}`);
 
-        const layoutSettings = this.#layoutSettings;
+        const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         const layoutConfigFileData = await this.#getLayoutConfig();
         const layoutType = 'side';
         const layoutRouteConfig = layoutConfigFileData[layoutType];
@@ -972,31 +1033,32 @@ export class GenerateMobileNavigations {
                 return a?.props?.options?.priority - b?.props?.options?.priority;
             }) ?? [];
 
-        if (layoutSettings?.layout == 'side') {
-            if (drawerConfig) {
-                const drawerNavigation = await this.#generateDrawerNavigationsFile({
-                    drawerConfig: drawerConfig,
-                    unauthenticatedComponentPath,
-                    drawerDirPath: drawerDirPath,
-                });
-                if (drawerNavigation)
+        try {
+            if (layoutSettings?.layout == 'side') {
+                if (drawerConfig) {
                     await this.#generateDrawerNavigationsFile({
-                        drawerConfig: hostDrawerConfig,
+                        drawerConfig: drawerConfig,
                         unauthenticatedComponentPath,
-                        drawerDirPath: hostDirPath,
+                        drawerDirPath: drawerDirPath,
                     });
-                return true;
-            } else {
-                if (hostDrawerConfig) {
-                    const isDrawerGenerated = await this.#generateDrawerNavigationsFile({
+                    await this.#generateDrawerNavigationsFile({
                         drawerConfig: hostDrawerConfig,
                         unauthenticatedComponentPath,
                         drawerDirPath: hostDirPath,
                     });
-                    return isDrawerGenerated;
-                } else return false;
+                } else {
+                    if (hostDrawerConfig) {
+                        await this.#generateDrawerNavigationsFile({
+                            drawerConfig: hostDrawerConfig,
+                            unauthenticatedComponentPath,
+                            drawerDirPath: hostDirPath,
+                        });
+                    }
+                }
             }
-        } else return false;
+        } catch (error) {
+            console.log('Error generating drawer navigation', error);
+        }
     }
 
     async #generateBottomTabNavigationsFile({
@@ -1020,6 +1082,7 @@ export class GenerateMobileNavigations {
 
         importStatements += `import * as React from 'react';\n`;
         importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
+        importStatements += `import DynamicIcons from '@app/selectiveIcons';\n`;
 
         if (unauthenticatedComponentPath)
             importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
@@ -1059,10 +1122,12 @@ export class GenerateMobileNavigations {
             }
 
             const options = JSON.stringify(
-                {
-                    ...pkgRouteConfig?.props?.options,
-                    headerShown: mixLayout ? false : pkgRouteConfig?.props?.options?.headerShown,
-                } || { headerShown: mixLayout ? false : true },
+                pkgRouteConfig?.props?.options
+                    ? {
+                          ...pkgRouteConfig.props.options,
+                          headerShown: mixLayout ? false : pkgRouteConfig.props.options.headerShown,
+                      }
+                    : { headerShown: mixLayout ? false : true },
             );
             importStatements += `import Component${moduleNumber} from '${pkgRouteConfig.componentPath}';\n`;
             moduleContent += `<Tab.Screen
@@ -1072,11 +1137,37 @@ export class GenerateMobileNavigations {
           initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
           options={{...${options},...{${
                 pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
-                    ? `tabBarIcon: ({ color }) => <${pkgRouteConfig?.icon?.name} name="${
-                          pkgRouteConfig?.icon?.props?.name ?? 'home'
-                      }" size={${pkgRouteConfig?.icon?.props?.size ?? 24}} color={${
-                          pkgRouteConfig?.icon?.props?.color ?? 'color'
-                      }} />`
+                    ? `tabBarIcon: ({ color }) => { 
+                    const focused = color === '${pkgRouteConfig?.props?.options?.tabBarActiveTintColor}' ? true : false;
+                     const SelectedIcon = DynamicIcons('${pkgRouteConfig?.icon?.name}');
+                     return (<SelectedIcon 
+                     {...{
+                        ...${JSON.stringify({ ...(pkgRouteConfig?.icon?.props || {}) })},
+                        ...{
+                          color:focused ? ${
+                              JSON.stringify(
+                                  pkgRouteConfig?.icon?.props?.color ??
+                                      pkgRouteConfig?.props?.options?.tabBarActiveTintColor,
+                              ) ?? 'black'
+                          }
+                                        :${
+                                            JSON.stringify(pkgRouteConfig?.props?.options?.tabBarInactiveTintColor) ??
+                                            'grey'
+                                        },
+                          stroke:focused ? ${
+                              JSON.stringify(
+                                  pkgRouteConfig?.icon?.props?.color ??
+                                      pkgRouteConfig?.props?.options?.tabBarActiveTintColor,
+                              ) ?? 'black'
+                          }
+                                        :${
+                                            JSON.stringify(pkgRouteConfig?.props?.options?.tabBarInactiveTintColor) ??
+                                            'grey'
+                                        }
+                        }
+                     }}
+                     
+                     />)}`
                     : ''
             }
            ${
@@ -1091,7 +1182,12 @@ export class GenerateMobileNavigations {
            }}}
         >{(props) => <AuthWrapper 
                        auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
-                       component={<Component${moduleNumber} {...props}   />}
+                       authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                       extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                       component={<Component${moduleNumber} {...props}
+                           permissions={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                           extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                       />}
                        ${
                            pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
                                ? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
@@ -1120,10 +1216,10 @@ export class GenerateMobileNavigations {
         </Tab.Screen>`;
         }
 
-        if (icons && icons?.length) {
-            const uniqueIcons = [...new Set(icons.split(','))].join(',');
-            importStatements += `import { ${uniqueIcons} } from '@expo/vector-icons';\n`;
-        }
+        // if (icons && icons?.length) {
+        //     const uniqueIcons = [...new Set(icons.split(','))].join(',');
+        //     importStatements += `import { ${uniqueIcons} } from '@expo/vector-icons';\n`;
+        // }
 
         if (customHeaderPaths && customHeaderPaths?.length) {
             const uniqueHeaderNames = [...new Set(customHeaderNames.split(','))]?.filter((str) => str?.length);
@@ -1151,18 +1247,17 @@ export class GenerateMobileNavigations {
         moduleRender = `export default ({Tab,...rest}) => { return (<>${moduleContent}</>)}`;
         moduleNavigation = importStatements + '\n' + moduleRender;
         const bottomTabNavigator = moduleNavigation;
-        if (bottomTabNavigator) {
-            let bottomTabNavigation = bottomTabNavigator;
-            bottomTabNavigation = prettier.format(bottomTabNavigation, { parser: 'babel' });
-            const bottomDirName = path.dirname(bottomDirPath);
+        let bottomTabNavigation = bottomTabNavigator;
+        bottomTabNavigation = prettier.format(bottomTabNavigation, { parser: 'babel' });
+        const bottomDirName = path.dirname(bottomDirPath);
+        try {
             const isDirCreated = await this.#makeDir(bottomDirName);
             if (isDirCreated) {
-                const writeFileResponse = await this.#writeFile(bottomDirPath, bottomTabNavigation);
-                if (writeFileResponse) return true;
-                else return false;
-            } else return false;
+                await this.#writeFile(bottomDirPath, bottomTabNavigation);
+            }
+        } catch (error) {
+            console.log('Error generating bottom tab navigation file', error);
         }
-        return false;
     }
 
     async #generateBottomTabNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
@@ -1170,7 +1265,7 @@ export class GenerateMobileNavigations {
         const bottomDirPath = path.join(appDirPath, `/${bottomFilePath}`);
         const hostBottomDirPath = path.join(appDirPath, `/${hostBottomFilePath}`);
 
-        const layoutSettings = this.#layoutSettings;
+        const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         const layoutConfigFileData = await this.#getLayoutConfig();
         const layoutType = layoutSettings?.layout ?? 'bottom';
         const layoutRouteConfig = layoutConfigFileData[layoutType];
@@ -1210,34 +1305,35 @@ export class GenerateMobileNavigations {
                 if (b?.props?.options?.priority === undefined) return -1;
                 return a?.props?.options?.priority - b?.props?.options?.priority;
             }) ?? [];
-        if (layoutType == 'bottom' || layoutType == 'mixSide') {
-            if (bottomTabConfig) {
-                const drawerNavigation = await this.#generateBottomTabNavigationsFile({
-                    bottomTabConfig: bottomTabConfig,
-                    unauthenticatedComponentPath,
-                    bottomDirPath: bottomDirPath,
-                    mixLayout,
-                });
-                if (drawerNavigation)
+        try {
+            if (layoutType == 'bottom' || layoutType == 'mixSide') {
+                if (bottomTabConfig) {
                     await this.#generateBottomTabNavigationsFile({
-                        bottomTabConfig: hostBottomTabConfig,
+                        bottomTabConfig: bottomTabConfig,
                         unauthenticatedComponentPath,
-                        bottomDirPath: hostBottomDirPath,
+                        bottomDirPath: bottomDirPath,
                         mixLayout,
                     });
-                return true;
-            } else {
-                if (hostBottomTabConfig) {
-                    const isHostGenerated = await this.#generateBottomTabNavigationsFile({
+                    await this.#generateBottomTabNavigationsFile({
                         bottomTabConfig: hostBottomTabConfig,
                         unauthenticatedComponentPath,
                         bottomDirPath: hostBottomDirPath,
                         mixLayout,
                     });
-                    return isHostGenerated;
-                } else return false;
+                } else {
+                    if (hostBottomTabConfig) {
+                        await this.#generateBottomTabNavigationsFile({
+                            bottomTabConfig: hostBottomTabConfig,
+                            unauthenticatedComponentPath,
+                            bottomDirPath: hostBottomDirPath,
+                            mixLayout,
+                        });
+                    }
+                }
             }
-        } else return false;
+        } catch (error) {
+            console.log('Error generating bottom tab navigation', error);
+        }
     }
 
     async #generateBottomTabDrawerNavigations({ appDirPath, modules, initialRouteName, unauthenticatedComponentPath }) {
@@ -1247,7 +1343,7 @@ export class GenerateMobileNavigations {
         const drawerDirPath = path.join(appDirPath, `/${drawerFilePath}`);
         const hostDirPath = path.join(appDirPath, `/${hostDrawerFilePath}`);
 
-        const layoutSettings = this.#layoutSettings;
+        const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         const layoutConfigFileData = await this.#getLayoutConfig();
         const layoutType = layoutSettings?.layout ?? 'bottom';
         const layoutRouteConfig = layoutConfigFileData[layoutType];
@@ -1310,52 +1406,57 @@ export class GenerateMobileNavigations {
                 }) ?? [];
 
         if (bottomTabConfig) {
-            const drawerNavigation = await this.#generateBottomTabNavigationsFile({
-                bottomTabConfig: bottomTabConfig,
-                unauthenticatedComponentPath,
-                bottomDirPath: bottomDirPath,
-                mixLayout,
-            });
-            if (drawerNavigation)
+            try {
                 await this.#generateBottomTabNavigationsFile({
-                    bottomTabConfig: hostBottomTabConfig,
+                    bottomTabConfig: bottomTabConfig,
                     unauthenticatedComponentPath,
-                    bottomDirPath: hostBottomDirPath,
+                    bottomDirPath: bottomDirPath,
                     mixLayout,
                 });
-            if (drawerConfig) {
-                const drawerNavigation = await this.#generateDrawerNavigationsFile({
-                    drawerConfig: drawerConfig,
+
+                await this.#generateBottomTabNavigationsFile({
+                    bottomTabConfig: hostBottomTabConfig,
                     unauthenticatedComponentPath,
-                    drawerDirPath: drawerDirPath,
+                    bottomDirPath: hostBottomDirPath,
+                    mixLayout,
                 });
-                if (drawerNavigation)
+                if (drawerConfig) {
+                    await this.#generateDrawerNavigationsFile({
+                        drawerConfig: drawerConfig,
+                        unauthenticatedComponentPath,
+                        drawerDirPath: drawerDirPath,
+                    });
                     await this.#generateDrawerNavigationsFile({
                         drawerConfig: hostDrawerConfig,
                         unauthenticatedComponentPath,
                         drawerDirPath: hostDirPath,
                     });
-                return true;
-            } else return true;
-        } else return false;
+                }
+            } catch (error) {
+                console.log('Error in generating drawer bottom tab navigation', error);
+            }
+        }
     }
 
     async #generateAppNavigationFile({ appDirPath, customTabBarPath, customDrawerPath, customHeaderPath }) {
         const navigationDirPath = path.join(appDirPath, `/${appNavigationFileName}`);
-        const layoutSettings = this.#layoutSettings;
+        const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         const layoutConfigFileData = await this.#getLayoutConfig();
         const layoutType = layoutSettings?.layout || 'bottom';
         const layoutRouteConfig = layoutConfigFileData[layoutType];
         const layoutRouteKey = Object.keys(layoutRouteConfig)[1];
         const appLayout = layoutRouteConfig[layoutRouteKey];
-
-        const initialRouteName =
-            layoutType === 'mixSide'
-                ? appLayout?.[appLayout?.key]?.props?.initialRouteName ?? 'MainStack.Layout.Home'
-                : appLayout?.props?.initialRouteName || 'MainStack.Home';
+        const initialRouteNameRootStack = this.#initialRouteNameRootStack;
+        const layoutInitialRouteName = this.#initialRouteName;
+        const initialRouteName = layoutInitialRouteName
+            ? layoutInitialRouteName
+            : layoutType === 'mixSide'
+            ? appLayout?.[appLayout?.key]?.props?.initialRouteName ?? 'MainStack.Layout.Home'
+            : appLayout?.props?.initialRouteName || 'MainStack.Home';
         const isShowTabs = layoutType === 'mixSide' || layoutType === 'bottom' ? true : false;
         const isShowDefalutHeader = layoutType === 'mixSide' ? true : false;
         const defaultHeaderProps = {
+            ...(layoutSettings || {}),
             showToggle: layoutSettings?.topLeftToggle || false,
             right: layoutSettings?.topRightSettingToggle || false,
         };
@@ -1407,7 +1508,11 @@ export class GenerateMobileNavigations {
                                  : ''
                          }
                          }})}
-                       ${customDrawerPath ? 'drawerContent={(props) => <CustomDrawerContent {...props} />}' : ''}
+                       ${
+                           customDrawerPath
+                               ? 'drawerContent={(props) => <CustomDrawerContent {...props} {...defaultHeaderProps || {}} />}'
+                               : ''
+                       }
                        >
                       {settings?.layout == 'host-bottom' ? hostDrawerNavigations({ Drawer }) : drawerNavigations({ Drawer })}
                      </Drawer.Navigator>
@@ -1556,7 +1661,7 @@ export class GenerateMobileNavigations {
         appComponent += `
          const AppNavigations = () => {
              return (
-                 <Stack.Navigator initialRouteName="${initialRouteName}">
+                 <Stack.Navigator initialRouteName="${initialRouteNameRootStack}">
                      <Stack.Screen
                          name="MainStack"
                          options={{ headerShown: false }}
@@ -1571,9 +1676,110 @@ export class GenerateMobileNavigations {
      `;
         appNavigation = importStatements + '\n' + rootComponent + '\n' + appComponent;
         appNavigation = prettier.format(appNavigation, { parser: 'babel' });
-        const writeFileResponse = await this.#writeFile(navigationDirPath, appNavigation);
-        if (writeFileResponse) return true;
-        else return false;
+        try {
+            await this.#writeFile(navigationDirPath, appNavigation);
+        } catch (error) {
+            console.log('Error in generating app navigationfile', error);
+        }
+    }
+
+    async #generateSelectiveIconsFile({ appDirPath, modules }) {
+        const mainRoutes = path.join(appDirPath, `/${mainRoutesFileName}`);
+        const modulesRouteConfig = await this.#getModulesRouteConfig({ modules: modules });
+        const mainRouteConfig = await this.#readJsonFile(mainRoutes);
+        const allRoutes = [...[mainRouteConfig ?? []], ...(modulesRouteConfig ?? [])];
+        let iconNames = [];
+        allRoutes?.flat(1)?.forEach((route) => {
+            const key = Object.keys(route)[0];
+            const value = route[key];
+            if (value?.icon && typeof value.icon === 'object') {
+                if (typeof value.icon.name === 'string') {
+                    if (!iconNames.includes(value.icon.name)) iconNames.push(value.icon.name);
+                }
+            } else if (value?.icon && typeof value.icon === 'string') {
+                if (!iconNames.includes(value.icon)) iconNames.push(value.icon);
+            }
+
+            if (value?.extraIcons && Array.isArray(value.extraIcons) && value?.extraIcons?.length > 0) {
+                value?.extraIcons?.map((icon) => {
+                    if (typeof icon === 'string') {
+                        if (!iconNames.includes(icon)) iconNames.push(icon);
+                    } else {
+                        console.warn(`Invalid icon type: ${typeof icon}`);
+                    }
+                });
+            } else if (value?.extraIcons && typeof value.extraIcons === 'string') {
+                if (!iconNames.includes(value.extraIcons)) iconNames.push(value.extraIcons);
+            }
+        });
+
+        const iconsRepository = this.#iconsRepository;
+        const expoIcons = [
+            'AntDesign',
+            'Entypo',
+            'EvilIcons',
+            'Feather',
+            'FontAwesome',
+            'FontAwesome5',
+            'Fontisto',
+            'Foundation',
+            'Ionicons',
+            'MaterialCommunityIcons',
+            'MaterialIcons',
+            'Octicons',
+            'SimpleLineIcons',
+            'Zocial',
+        ];
+
+        let content = `
+        function __variableDynamicIcon(icon) {
+        switch (icon) {
+      `;
+        iconNames.forEach((name) => {
+            let prefix, iconName;
+            if (name.includes('.')) {
+                [prefix, iconName] = name.split('.');
+            }
+            if (prefix && iconsRepository[prefix]) {
+                const importPath = iconsRepository[prefix].replace(
+                    '{iconName}',
+                    prefix === 'expo' ? iconName : iconName + '.native',
+                );
+                // prefix = prefix.charAt(0).toUpperCase() + prefix.slice(1).toLowerCase();
+                content += `
+                    case '${prefix + '.' + iconName}':
+                        return require('${importPath}')?.default;
+                    `;
+            } else {
+                content += `
+                    case '${name}':
+                        return ${
+                            expoIcons.includes(name)
+                                ? `require('@expo/vector-icons/${name}.js')?.default`
+                                : `require('@expo/vector-icons/FontAwesome.js')?.default;`
+                        };
+                    `;
+            }
+        });
+
+        content += `
+        default:
+          console.warn('Sorry, the icon named "', icon, '" could not be found in "@react-icon/all-files" and "@app/icons". Please check again.');
+          return require('@expo/vector-icons/FontAwesome.js')?.default;
+        }
+        }
+        export default function(icon) {
+        return __variableDynamicIcon(icon);
+        }
+      `;
+        const rootPath = process.cwd();
+        const fileName = `selectiveIcons.js`;
+        const newFilePath = path.join(rootPath, 'app', fileName);
+        // Ensure the directory exists
+        if (!fs.existsSync(path.dirname(newFilePath))) {
+            fs.mkdirSync(path.dirname(newFilePath), { recursive: true });
+        }
+        fs.writeFileSync(newFilePath, content, 'utf8');
     }
 
     async #setLayoutAndGenerateNavigation() {
@@ -1586,92 +1792,153 @@ export class GenerateMobileNavigations {
         const customHeaderPath = this.#customHeaderPath;
         const i18Options = this.#i18Options;
 
-        const layoutSettings = this.#layoutSettings;
+        const layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         const layoutConfigFileData = await this.#getLayoutConfig();
         const layoutType = layoutSettings?.layout || 'bottom';
-        const isAppRoutesGenerated = await this.#generateAppRoutesJson({ appDirPath });
-        if (isAppRoutesGenerated) {
-            // await this.#generateModulesTsFile({
-            //     appDirPath,
-            //     modules,
-            //     initialRouteName,
-            // });
+        try {
+            await this.#generateAppRoutesJson();
+            await this.#generateSelectiveIconsFile({ appDirPath, modules });
             await this.#generateMainRoutes({
                 appDirPath,
                 i18Options,
                 initialRouteName,
             });
-            const isAppFileGenerated = await this.#generateApp({
+            await this.#generateApp({
                 appDirPath,
                 i18Options,
                 initialRouteName,
             });
-            if (isAppFileGenerated) {
-                const isStackCreated = await this.#generateStackNavigations({
-                    appDirPath,
-                    modules,
-                    initialRouteName,
-                    unauthenticatedComponentPath,
-                });
-                if (isStackCreated) {
-                    if (layoutType == 'side') {
-                        const isDrawerGenerated = await this.#generateDrawerNavigations({
-                            appDirPath,
-                            modules,
-                            initialRouteName,
-                            unauthenticatedComponentPath,
-                        });
-                        if (isDrawerGenerated) {
-                            const appNavigationGenerated = await this.#generateAppNavigationFile({
-                                appDirPath,
-                                customTabBarPath,
-                                customDrawerPath,
-                                customHeaderPath,
-                            });
-                            if (appNavigationGenerated) return appNavigationGenerated;
-                            else return true;
-                        } else return false;
-                    } else if (layoutType == 'bottom' || layoutType == 'host-bottom') {
-                        const isBottomTabGenerated = await this.#generateBottomTabNavigations({
-                            appDirPath,
-                            modules,
-                            initialRouteName,
-                            unauthenticatedComponentPath,
-                        });
-                        if (isBottomTabGenerated) {
-                            const appNavigationGenerated = await this.#generateAppNavigationFile({
-                                appDirPath,
-                                customTabBarPath,
-                                customDrawerPath,
-                                customHeaderPath,
-                            });
-                            if (appNavigationGenerated) return appNavigationGenerated;
-                            else return true;
-                        } else return false;
-                    } else {
-                        const isBottomTabDrawerGenerated = await this.#generateBottomTabDrawerNavigations({
-                            appDirPath,
-                            modules,
-                            initialRouteName,
-                            unauthenticatedComponentPath,
-                        });
-                        if (isBottomTabDrawerGenerated) {
-                            const appNavigationGenerated = await this.#generateAppNavigationFile({
-                                appDirPath,
-                                customTabBarPath,
-                                customDrawerPath,
-                                customHeaderPath,
-                            });
-                            if (appNavigationGenerated) return appNavigationGenerated;
-                            else return true;
-                        } else return false;
-                    }
-                } else return false;
-            } else return false;
-        } else return false;
+
+            await this.#generateStackNavigations({
+                appDirPath,
+                modules,
+                initialRouteName,
+                unauthenticatedComponentPath,
+            });
+
+            if (layoutType == 'side') {
+                try {
+                    await this.#generateDrawerNavigations({
+                        appDirPath,
+                        modules,
+                        initialRouteName,
+                        unauthenticatedComponentPath,
+                    });
+                    await this.#generateAppNavigationFile({
+                        appDirPath,
+                        customTabBarPath,
+                        customDrawerPath,
+                        customHeaderPath,
+                    });
+                } catch (error) {
+                    console.log('Error in generating side navigation', error);
+                }
+            } else if (layoutType == 'bottom' || layoutType == 'host-bottom') {
+                try {
+                    await this.#generateBottomTabNavigations({
+                        appDirPath,
+                        modules,
+                        initialRouteName,
+                        unauthenticatedComponentPath,
+                    });
+                    await this.#generateAppNavigationFile({
+                        appDirPath,
+                        customTabBarPath,
+                        customDrawerPath,
+                        customHeaderPath,
+                    });
+                } catch (error) {
+                    console.log('Error in generating bottom navigation', error);
+                }
+            } else {
+                try {
+                    await this.#generateBottomTabDrawerNavigations({
+                        appDirPath,
+                        modules,
+                        initialRouteName,
+                        unauthenticatedComponentPath,
+                    });
+
+                    await this.#generateAppNavigationFile({
+                        appDirPath,
+                        customTabBarPath,
+                        customDrawerPath,
+                        customHeaderPath,
+                    });
+                } catch (error) {
+                    console.log('Error in generating drawer bottom navigation', error);
+                }
+            }
+        } catch (error) {
+            console.log('Error generating app navigations', error);
+        }
+    }
+
+    async #performCopyOperations() {
+        const config = this.#configFileData;
+        try {
+            await performCopyOperations(config);
+            await this.#setLayoutAndGenerateNavigation();
+        } catch (error) {
+            console.error('PerformCopyOperations error:', error);
+        }
+    }
+
+    async #deleteDirectoryRecursive(dirPath: any) {
+        if (fs.existsSync(dirPath)) {
+            const files = fs.readdirSync(dirPath);
+            for (const file of files) {
+                const curPath = path.join(dirPath, file);
+                if (fs.lstatSync(curPath).isDirectory()) {
+                    // Recursively delete subdirectories
+                    await this.#deleteDirectoryRecursive(curPath);
+                } else {
+                    // Delete files
+                    fs.unlinkSync(curPath);
+                }
+            }
+            // Delete the directory itself
+            fs.rmdirSync(dirPath);
+        }
+    }
+
+    async #createAppDirectory() {
+        const appDir = this.#appDirPath;
+
+        try {
+            // Check if the directory exists
+            if (fs.existsSync(appDir)) {
+                console.log('Directory exists. Recreating it...');
+                // Delete the directory and its contents
+                await this.#deleteDirectoryRecursive(appDir);
+            }
+
+            // Create the directory
+            fs.mkdirSync(appDir);
+            console.log('Directory created');
+            // Add 'app' to .gitignore if not already present
+            const gitignorePath = path.resolve(appDir, '.gitignore');
+            let gitignoreContent = '';
+            if (fs.existsSync(gitignorePath)) {
+                gitignoreContent = fs.readFileSync(gitignorePath, 'utf8');
+            } else {
+                fs.writeFileSync(gitignorePath, '');
+                console.log('Created .gitignore file');
+            }
+
+            if (!gitignoreContent.includes('*')) {
+                fs.appendFileSync(gitignorePath, '*\n');
+                console.log('Added "*" to .gitignore');
+            }
+            await this.#performCopyOperations();
+        } catch (error) {
+            console.error('Error creating app directory:', error);
+        }
     }
 
     async generateAppNavigations() {
-        return this.#setLayoutAndGenerateNavigation();
+        return this.#createAppDirectory();
     }
 }
+
+export default GenerateMobileNavigations;