BugPulse-V1

.gitignore

@@ -1,3 +1,8 @@
 node_modules/
 */node_modules/
 */build/
+
+**/node_modules/
+**/build/
+.DS_Store
+.env

backend/src/db/api/bugs.js

@@ -2,6 +2,8 @@ const db = require('../models');
 const FileDBApi = require('./file');
 const crypto = require('crypto');
 const Utils = require('../utils');
+const { applyTenantScope } = require('./tenantScope');
+
 
 const Sequelize = db.Sequelize;
 const Op = Sequelize.Op;
@@ -295,12 +297,10 @@ module.exports = class BugsDBApi {
     const currentPage = +filter.page;
 
     const user = (options && options.currentUser) || null;
-    const userCompanies = (user && user.companies?.id) || null;
+    const userCompanies = user?.companies?.id || null;
-
+    // Apply company filter only for users without full access
-    if (userCompanies) {
+    if (!globalAccess && userCompanies) {
-      if (options?.currentUser?.companiesId) {
+      where.companiesId = userCompanies;
-        where.companiesId = options.currentUser.companiesId;
-      }
     }
 
     offset = currentPage * limit;

backend/src/db/api/companies.js

@@ -2,6 +2,8 @@ const db = require('../models');
 const FileDBApi = require('./file');
 const crypto = require('crypto');
 const Utils = require('../utils');
+const { applyTenantScope } = require('./tenantScope');
+
 
 const Sequelize = db.Sequelize;
 const Op = Sequelize.Op;
@@ -162,12 +164,10 @@ module.exports = class CompaniesDBApi {
     const currentPage = +filter.page;
 
     const user = (options && options.currentUser) || null;
-    const userCompanies = (user && user.companies?.id) || null;
+    const userCompanies = user?.companies?.id || null;
-
+    // Apply company filter only for users without full (global) access
-    if (userCompanies) {
+    if (!globalAccess && userCompanies) {
-      if (options?.currentUser?.companiesId) {
+      where.companiesId = userCompanies;
-        where.companiesId = options.currentUser.companiesId;
-      }
     }
 
     offset = currentPage * limit;

backend/src/db/api/modules.js

@@ -2,6 +2,8 @@ const db = require('../models');
 const FileDBApi = require('./file');
 const crypto = require('crypto');
 const Utils = require('../utils');
+const { applyTenantScope } = require('./tenantScope');
+
 
 const Sequelize = db.Sequelize;
 const Op = Sequelize.Op;
@@ -172,16 +174,8 @@ module.exports = class ModulesDBApi {
     const limit = filter.limit || 0;
     let offset = 0;
     let where = {};
-    const currentPage = +filter.page;
+    applyTenantScope(where, globalAccess, options);
 
-    const user = (options && options.currentUser) || null;
-    const userCompanies = (user && user.companies?.id) || null;
-
-    if (userCompanies) {
-      if (options?.currentUser?.companiesId) {
-        where.companiesId = options.currentUser.companiesId;
-      }
-    }
 
     offset = currentPage * limit;
 

backend/src/db/api/projects.js

@@ -2,6 +2,8 @@ const db = require('../models');
 const FileDBApi = require('./file');
 const crypto = require('crypto');
 const Utils = require('../utils');
+const { applyTenantScope } = require('./tenantScope');
+
 
 const Sequelize = db.Sequelize;
 const Op = Sequelize.Op;
@@ -164,14 +166,11 @@ module.exports = class ProjectsDBApi {
     let offset = 0;
     let where = {};
     const currentPage = +filter.page;
-
     const user = (options && options.currentUser) || null;
-    const userCompanies = (user && user.companies?.id) || null;
+    const userCompanies = user?.companies?.id || null;
-
+    // Apply company filter only for users without full (global) access
-    if (userCompanies) {
+    if (!globalAccess && userCompanies) {
-      if (options?.currentUser?.companiesId) {
+      where.companiesId = userCompanies;
-        where.companiesId = options.currentUser.companiesId;
-      }
     }
 
     offset = currentPage * limit;

backend/src/db/api/projects.js.temp

@@ -0,0 +1,337 @@
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+const { applyTenantScope } = require('./tenantScope');
+
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class ProjectsDBApi {
+  static async create(data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const projects = await db.projects.create(
+      {
+        id: data.id || undefined,
+
+        name: data.name || null,
+        created_on: data.created_on || null,
+        importHash: data.importHash || null,
+        createdById: currentUser.id,
+        updatedById: currentUser.id,
+      },
+      { transaction },
+    );
+
+    await projects.setCompanies(data.companies || null, {
+      transaction,
+    });
+
+    return projects;
+  }
+
+  static async bulkImport(data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    // Prepare data - wrapping individual data transformations in a map() method
+    const projectsData = data.map((item, index) => ({
+      id: item.id || undefined,
+
+      name: item.name || null,
+      created_on: item.created_on || null,
+      importHash: item.importHash || null,
+      createdById: currentUser.id,
+      updatedById: currentUser.id,
+      createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+    // Bulk create items
+    const projects = await db.projects.bulkCreate(projectsData, {
+      transaction,
+    });
+
+    // For each item created, replace relation files
+
+    return projects;
+  }
+
+  static async update(id, data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+    const globalAccess = currentUser.app_role?.globalAccess;
+
+    const projects = await db.projects.findByPk(id, {}, { transaction });
+
+    const updatePayload = {};
+
+    if (data.name !== undefined) updatePayload.name = data.name;
+
+    if (data.created_on !== undefined)
+      updatePayload.created_on = data.created_on;
+
+    updatePayload.updatedById = currentUser.id;
+
+    await projects.update(updatePayload, { transaction });
+
+    if (data.companies !== undefined) {
+      await projects.setCompanies(
+        data.companies,
+
+        { transaction },
+      );
+    }
+
+    return projects;
+  }
+
+  static async deleteByIds(ids, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const projects = await db.projects.findAll({
+      where: {
+        id: {
+          [Op.in]: ids,
+        },
+      },
+      transaction,
+    });
+
+    await db.sequelize.transaction(async (transaction) => {
+      for (const record of projects) {
+        await record.update({ deletedBy: currentUser.id }, { transaction });
+      }
+      for (const record of projects) {
+        await record.destroy({ transaction });
+      }
+    });
+
+    return projects;
+  }
+
+  static async remove(id, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const projects = await db.projects.findByPk(id, options);
+
+    await projects.update(
+      {
+        deletedBy: currentUser.id,
+      },
+      {
+        transaction,
+      },
+    );
+
+    await projects.destroy({
+      transaction,
+    });
+
+    return projects;
+  }
+
+  static async findBy(where, options) {
+    const transaction = (options && options.transaction) || undefined;
+
+    const projects = await db.projects.findOne({ where }, { transaction });
+
+    if (!projects) {
+      return projects;
+    }
+
+    const output = projects.get({ plain: true });
+
+    output.bugs_project = await projects.getBugs_project({
+      transaction,
+    });
+
+    output.modules_project = await projects.getModules_project({
+      transaction,
+    });
+
+    output.companies = await projects.getCompanies({
+      transaction,
+    });
+
+    return output;
+  }
+
+  static async findAll(filter, globalAccess, options) {
+    const limit = filter.limit || 0;
+    let offset = 0;
+    let where = {};
+    const currentPage = +filter.page;
+    applyTenantScope(where, globalAccess, options);
+      where.companiesId = userCompanies;
+    }
+
+    offset = currentPage * limit;
+
+    const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+      {
+        model: db.companies,
+        as: 'companies',
+      },
+    ];
+
+    if (filter) {
+      if (filter.id) {
+        where = {
+          ...where,
+          ['id']: Utils.uuid(filter.id),
+        };
+      }
+
+      if (filter.name) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('projects', 'name', filter.name),
+        };
+      }
+
+      if (filter.created_onRange) {
+        const [start, end] = filter.created_onRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            created_on: {
+              ...where.created_on,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            created_on: {
+              ...where.created_on,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+
+      if (filter.active !== undefined) {
+        where = {
+          ...where,
+          active: filter.active === true || filter.active === 'true',
+        };
+      }
+
+      if (filter.companies) {
+        const listItems = filter.companies.split('|').map((item) => {
+          return Utils.uuid(item);
+        });
+
+        where = {
+          ...where,
+          companiesId: { [Op.or]: listItems },
+        };
+      }
+
+      if (filter.createdAtRange) {
+        const [start, end] = filter.createdAtRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            ['createdAt']: {
+              ...where.createdAt,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            ['createdAt']: {
+              ...where.createdAt,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+    }
+
+    if (globalAccess) {
+      delete where.companiesId;
+    }
+
+    const queryOptions = {
+      where,
+      include,
+      distinct: true,
+      order:
+        filter.field && filter.sort
+          ? [[filter.field, filter.sort]]
+          : [['createdAt', 'desc']],
+      transaction: options?.transaction,
+      logging: console.log,
+    };
+
+    if (!options?.countOnly) {
+      queryOptions.limit = limit ? Number(limit) : undefined;
+      queryOptions.offset = offset ? Number(offset) : undefined;
+    }
+
+    try {
+      const { rows, count } = await db.projects.findAndCountAll(queryOptions);
+
+      return {
+        rows: options?.countOnly ? [] : rows,
+        count: count,
+      };
+    } catch (error) {
+      console.error('Error executing query:', error);
+      throw error;
+    }
+  }
+
+  static async findAllAutocomplete(
+    query,
+    limit,
+    offset,
+    globalAccess,
+    organizationId,
+  ) {
+    let where = {};
+
+    if (!globalAccess && organizationId) {
+      where.organizationId = organizationId;
+    }
+
+    if (query) {
+      where = {
+        [Op.or]: [
+          { ['id']: Utils.uuid(query) },
+          Utils.ilike('projects', 'name', query),
+        ],
+      };
+    }
+
+    const records = await db.projects.findAll({
+      attributes: ['id', 'name'],
+      where,
+      limit: limit ? Number(limit) : undefined,
+      offset: offset ? Number(offset) : undefined,
+      orderBy: [['name', 'ASC']],
+    });
+
+    return records.map((record) => ({
+      id: record.id,
+      label: record.name,
+    }));
+  }
+};

backend/src/db/api/status_history.js

@@ -2,6 +2,8 @@ const db = require('../models');
 const FileDBApi = require('./file');
 const crypto = require('crypto');
 const Utils = require('../utils');
+const { applyTenantScope } = require('./tenantScope');
+
 
 const Sequelize = db.Sequelize;
 const Op = Sequelize.Op;
@@ -185,12 +187,10 @@ module.exports = class Status_historyDBApi {
     const currentPage = +filter.page;
 
     const user = (options && options.currentUser) || null;
-    const userCompanies = (user && user.companies?.id) || null;
+    const userCompanies = user?.companies?.id || null;
-
+    // Apply company filter only for users without full access
-    if (userCompanies) {
+    if (!globalAccess && userCompanies) {
-      if (options?.currentUser?.companiesId) {
+      where.companiesId = userCompanies;
-        where.companiesId = options.currentUser.companiesId;
-      }
     }
 
     offset = currentPage * limit;

backend/src/db/api/sub_modules.js

@@ -2,6 +2,8 @@ const db = require('../models');
 const FileDBApi = require('./file');
 const crypto = require('crypto');
 const Utils = require('../utils');
+const { applyTenantScope } = require('./tenantScope');
+
 
 const Sequelize = db.Sequelize;
 const Op = Sequelize.Op;
@@ -174,14 +176,11 @@ module.exports = class Sub_modulesDBApi {
     let offset = 0;
     let where = {};
     const currentPage = +filter.page;
-
     const user = (options && options.currentUser) || null;
-    const userCompanies = (user && user.companies?.id) || null;
+    const userCompanies = user?.companies?.id || null;
-
+    // Apply company filter only for users without full (global) access
-    if (userCompanies) {
+    if (!globalAccess && userCompanies) {
-      if (options?.currentUser?.companiesId) {
+      where.companiesId = userCompanies;
-        where.companiesId = options.currentUser.companiesId;
-      }
     }
 
     offset = currentPage * limit;

backend/src/db/api/tenantScope.js

@@ -0,0 +1,9 @@
+// Helper to apply tenant (company) scoping in findAll methods
+function applyTenantScope(where, globalAccess, options) {
+  const userCompany = options?.currentUser?.companies?.id || null;
+  if (!globalAccess && userCompany) {
+    where.companiesId = userCompany;
+  }
+}
+
+module.exports = { applyTenantScope };

backend/src/db/api/users.js

@@ -2,6 +2,8 @@ const db = require('../models');
 const FileDBApi = require('./file');
 const crypto = require('crypto');
 const Utils = require('../utils');
+const { applyTenantScope } = require('./tenantScope');
+
 
 const bcrypt = require('bcrypt');
 const config = require('../../config');
@@ -319,12 +321,10 @@ module.exports = class UsersDBApi {
     const currentPage = +filter.page;
 
     const user = (options && options.currentUser) || null;
-    const userCompanies = (user && user.companies?.id) || null;
+    const userCompanies = user?.companies?.id || null;
-
+    // Apply company filter only for users without full (global) access
-    if (userCompanies) {
+    if (!globalAccess && userCompanies) {
-      if (options?.currentUser?.companiesId) {
+      where.companiesId = userCompanies;
-        where.companiesId = options.currentUser.companiesId;
-      }
     }
 
     offset = currentPage * limit;

frontend/src/components/Projects/configureProjectsCols.tsx

@@ -36,8 +36,9 @@ export const loadColumns = async (
   }
 
   const hasUpdatePermission = hasPermission(user, 'UPDATE_PROJECTS');
+  const globalAccess = user?.app_role?.globalAccess || false;
 
-  return [
+  const columns: any[] = [
     {
       field: 'name',
       headerName: 'Name',
@@ -46,45 +47,52 @@ export const loadColumns = async (
       filterable: false,
       headerClassName: 'datagrid--header',
       cellClassName: 'datagrid--cell',
-
       editable: hasUpdatePermission,
     },
-
     {
       field: 'created_on',
-      headerName: 'CreatedOn',
+      headerName: 'Created On',
       flex: 1,
       minWidth: 120,
       filterable: false,
       headerClassName: 'datagrid--header',
       cellClassName: 'datagrid--cell',
-
       editable: hasUpdatePermission,
-
       type: 'dateTime',
-      valueGetter: (params: GridValueGetterParams) =>
+      valueGetter: (params: GridValueGetterParams) => new Date(params.row.created_on),
-        new Date(params.row.created_on),
     },
-
     {
       field: 'actions',
       type: 'actions',
       minWidth: 30,
       headerClassName: 'datagrid--header',
       cellClassName: 'datagrid--cell',
-      getActions: (params: GridRowParams) => {
+      getActions: (params: GridRowParams) => [
-        return [
+        <div key={params?.row?.id}>
-          <div key={params?.row?.id}>
+          <ListActionsPopover
-            <ListActionsPopover
+            onDelete={onDelete}
-              onDelete={onDelete}
+            itemId={params?.row?.id}
-              itemId={params?.row?.id}
+            pathEdit={`/projects/projects-edit/?id=${params?.row?.id}`}
-              pathEdit={`/projects/projects-edit/?id=${params?.row?.id}`}
+            pathView={`/projects/projects-view/?id=${params?.row?.id}`}
-              pathView={`/projects/projects-view/?id=${params?.row?.id}`}
+            hasUpdatePermission={hasUpdatePermission}
-              hasUpdatePermission={hasUpdatePermission}
+          />
-            />
+        </div>,
-          </div>,
+      ],
-        ];
-      },
     },
   ];
+
+  // Insert Company column for Super Admin users
+  if (globalAccess) {
+    columns.splice(columns.length - 1, 0, {
+      field: 'companies',
+      headerName: 'Company',
+      flex: 1,
+      minWidth: 150,
+      valueGetter: (params: GridValueGetterParams) => params.row.companies?.name || '',
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+    });
+  }
+
+  return columns;
 };

frontend/src/pages/_app.tsx

@@ -15,6 +15,7 @@ import 'intro.js/introjs.css';
 import { appWithTranslation } from 'next-i18next';
 import '../i18n';
 import IntroGuide from '../components/IntroGuide';
+import html2canvas from 'html2canvas';
 import {
   appSteps,
   landingSteps,
@@ -79,9 +80,8 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
 
       if (event.data === 'getScreenshot') {
         try {
-          const html2canvas = (await import('html2canvas')).default;
+          const canvasElement = await html2canvas(document.body, { useCORS: true });
-          const canvas = await html2canvas(document.body, { useCORS: true });
+          const url = canvasElement.toDataURL('image/jpeg', 0.8);
-          const url = canvas.toDataURL('image/jpeg', 0.8);
           event.source?.postMessage({ iframeScreenshot: url }, event.origin);
         } catch (e) {
           console.error('html2canvas failed', e);

frontend/src/pages/_app.tsx.temp

@@ -0,0 +1,192 @@
+import React from 'react';
+import type { AppProps } from 'next/app';
+import type { ReactElement, ReactNode } from 'react';
+import type { NextPage } from 'next';
+import Head from 'next/head';
+import { store } from '../stores/store';
+import { Provider } from 'react-redux';
+import '../css/main.css';
+import axios from 'axios';
+import { baseURLApi } from '../config';
+import { useRouter } from 'next/router';
+import ErrorBoundary from '../components/ErrorBoundary';
+import DevModeBadge from '../components/DevModeBadge';
+import 'intro.js/introjs.css';
+import { appWithTranslation } from 'next-i18next';
+import '../i18n';
+import IntroGuide from '../components/IntroGuide';
+import html2canvas from 'html2canvas';
+import {
+  appSteps,
+  landingSteps,
+  loginSteps,
+  usersSteps,
+  rolesSteps,
+} from '../stores/introSteps';
+
+// Initialize axios
+axios.defaults.baseURL = process.env.NEXT_PUBLIC_BACK_API
+  ? process.env.NEXT_PUBLIC_BACK_API
+  : baseURLApi;
+
+axios.defaults.headers.common['Content-Type'] = 'application/json';
+
+export type NextPageWithLayout<P = Record<string, unknown>, IP = P> = NextPage<
+  P,
+  IP
+> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  // Use the layout defined at the page level, if available
+  const getLayout = Component.getLayout || ((page) => page);
+  const router = useRouter();
+  const [stepsEnabled, setStepsEnabled] = React.useState(false);
+  const [stepName, setStepName] = React.useState('');
+  const [steps, setSteps] = React.useState([]);
+
+  axios.interceptors.request.use(
+    (config) => {
+      const token = localStorage.getItem('token');
+
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      } else {
+        delete config.headers.Authorization;
+      }
+
+      return config;
+    },
+    (error) => {
+      return Promise.reject(error);
+    },
+  );
+
+  // TODO: Remove this code in future releases
+  React.useEffect(() => {
+    const handleMessage = async (event: MessageEvent) => {
+      if (event.data === 'getLocation') {
+        event.source?.postMessage(
+          { iframeLocation: window.location.pathname },
+          event.origin,
+        );
+        return;
+      }
+
+      if (event.data === 'getScreenshot') {
+          const canvasElement = await html2canvas(document.body, { useCORS: true });
+          const url = canvasElement.toDataURL('image/jpeg', 0.8);
+          event.source?.postMessage({ iframeScreenshot: url }, event.origin);
+        } catch (e) {
+          console.error('html2canvas failed', e);
+          event.source?.postMessage({ iframeScreenshot: null }, event.origin);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  React.useEffect(() => {
+    const isCompleted = (stepKey: string) => {
+      return localStorage.getItem(`completed_${stepKey}`) === 'true';
+    };
+    if (router.pathname === '/login' && !isCompleted('loginSteps')) {
+      setSteps(loginSteps);
+      setStepName('loginSteps');
+      setStepsEnabled(true);
+    } else if (router.pathname === '/' && !isCompleted('landingSteps')) {
+      setSteps(landingSteps);
+      setStepName('landingSteps');
+      setStepsEnabled(true);
+    } else if (router.pathname === '/dashboard' && !isCompleted('appSteps')) {
+      setTimeout(() => {
+        setSteps(appSteps);
+        setStepName('appSteps');
+        setStepsEnabled(true);
+      }, 1000);
+    } else if (
+      router.pathname === '/users/users-list' &&
+      !isCompleted('usersSteps')
+    ) {
+      setTimeout(() => {
+        setSteps(usersSteps);
+        setStepName('usersSteps');
+        setStepsEnabled(true);
+      }, 1000);
+    } else if (
+      router.pathname === '/roles/roles-list' &&
+      !isCompleted('rolesSteps')
+    ) {
+      setTimeout(() => {
+        setSteps(rolesSteps);
+        setStepName('rolesSteps');
+        setStepsEnabled(true);
+      }, 1000);
+    } else {
+      setSteps([]);
+      setStepsEnabled(false);
+    }
+  }, [router.pathname]);
+
+  const handleExit = () => {
+    setStepsEnabled(false);
+  };
+
+  const title = 'Bug reporting solution';
+  const description = 'Bug reporting solution generated by Flatlogic';
+  const url = 'https://flatlogic.com/';
+  const image = `https://flatlogic.com/logo.svg`;
+  const imageWidth = '1920';
+  const imageHeight = '960';
+
+  return (
+    <Provider store={store}>
+      {getLayout(
+        <>
+          <Head>
+            <meta name='description' content={description} />
+
+            <meta property='og:url' content={url} />
+            <meta property='og:site_name' content='https://flatlogic.com/' />
+            <meta property='og:title' content={title} />
+            <meta property='og:description' content={description} />
+            <meta property='og:image' content={image} />
+            <meta property='og:image:type' content='image/png' />
+            <meta property='og:image:width' content={imageWidth} />
+            <meta property='og:image:height' content={imageHeight} />
+
+            <meta property='twitter:card' content='summary_large_image' />
+            <meta property='twitter:title' content={title} />
+            <meta property='twitter:description' content={description} />
+            <meta property='twitter:image:src' content={image} />
+            <meta property='twitter:image:width' content={imageWidth} />
+            <meta property='twitter:image:height' content={imageHeight} />
+
+            <link rel='icon' href='/favicon.svg' />
+          </Head>
+
+          <ErrorBoundary>
+            <Component {...pageProps} />
+          </ErrorBoundary>
+          <IntroGuide
+            steps={steps}
+            stepsName={stepName}
+            stepsEnabled={stepsEnabled}
+            onExit={handleExit}
+          />
+          {(process.env.NODE_ENV === 'development' ||
+            process.env.NODE_ENV === 'dev_stage') && <DevModeBadge />}
+        </>,
+      )}
+    </Provider>
+  );
+}
+
+export default appWithTranslation(MyApp);