Hi pablomgd98,

The style for logo in app/components/Header/header-jss.js around line 248

'& img': {
      marginRight: 10,
      width: 30
    },

Regards.

Hello, thanks for the answer. I have a problem, when I make changes to the style sheet or for example changing the message in the “banne” section from its location, I save the changes and look, the changes are not made and yet they are perfectly saved

Hi pablomgd98,

For text message please change from /app/translations/en.json (Example for english) And about styling, after saving the files, theres should be in browser console like

[HMR] App is up to date.
[HMR] bundle rebuilding

But if the style not still changing, maybe that’s been overridden by another class, you can add !important or adjust the selector name.

Hope this can help.

Regards.

Hi sendanapp,

Thanks for purchasing.

Thats will be easier to investigate if you share a screenshoot. As I know the overlaping label to line is the normal from material-design for focus or filled textbox with outlined type https://material-ui.com/components/text-fields/

About primereact, mostly components in this template uses material-ui and jss. I haven’t try primereact, but it should can be installed, but it cannot replaces material-ui at once. So to change the style, need to adjust every pages and components(including props and style).

Feel free if you have any further queries.

Regards.

Hey, Pls find a sample screenshot as required.

https://drive.google.com/file/d/1I4LPJxw3y5zkujlZNx3UAYwCZRFq3Pn0/view?usp=sharing

and code for it.

<Grid item xs={12} sm={4}> <MuiPickersUtilsProvider utils={MomentUtils}> <KeyboardDatePicker autoOk={true} required disablePast={false} id="deed_date" name="deed_date" label={"Deed date"} disableFuture fullWidth inputVariant="outlined" format="YYYY/MM/DD" placeholder="01/01/2099" value={data['deed_date'] || ""} onChange={(e) => handleDateChange(e, 'deed_date')} animateYearScrolling={false} /> </MuiPickersUtilsProvider> </Grid>

Hi sendanapp,

It because there’s empty string if value undefinded. Please try change the value props if undefined to null

value={data['deed_date'] || null}

Hope this can help.

Regards.

Hi pablomgd98,

Thats error mean the you’ve another application that running in same port 3000. Please change to another available port. In example change to port 3001 in server/port.js

module.exports = parseInt(argv.port || process.env.PORT || '3001'

Hope this can help.

And if you have time, could you share more about M1 error, like error log or something.

The comment is public, you also can message privately here https://themeforest.net/user/ilhammeidi And I will reply via email.

Regards.

Yes, but when I execute de npm install, the folder node_modules dissapear….

The problem is that when I run npm install the folder is created and when it gives the error in the terminal, the folder disappears

Hi pablomgd98,

If the error is same about ngrok, please try to remove ngrok in package.json list, then npm install again. After that install ngrok separately npm install ngrok@3.4.0 or the latest version 4.0.1.

Or try some options like in previous message. I’m not sure what happen in your machine, if possible please try to install in different computer or platform.

Regards.

Hi vmobee,

Thanks for purchasing.

The build only create production code, for images and server config are still in root project. So it need to deploy all folders including builds/ public/ and servers/

Feel free if you have any further queries.

Regards.

The complete code is like this:

import axios from ‘axios’; import { logOut } from ’@/util/auth’;

export default function apiClient(nonApiRoute = false) { // let baseURL= `http://localhost:8000${nonApiRoute ? ’’ : ’/api’}`, const api = axios.create({ baseURL: `http://localhost:8000${nonApiRoute ? ’’ : ’/api’}`, withCredentials: true, }); }

api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      logOut();
);

return Promise.reject({ status: 401, errors: ['Unauthorized'] });
  }
},

if (error.response?.status === 422) {
  let errors = Object.values(error?.response?.data?.errors || {});
}

return Promise.reject({
  status: 422,
  errorsRaw: errors,
  errors: errors.reduce((error) => error),
});

console.error(error);

return Promise.reject({
  status: error.response?.status,
  errors: ['Oops!'],
});

return api;

Also if I want to use laravel sanctum/csrf-cookie for my authentication, is there a easy way to keep the redux-saga form like use firebase auth?

Hi hefei93,

About eslint-error, please this guide https://eslint.org/docs/rules/prefer-promise-reject-errors then adjust it if possible. You can also disable/enable eslint here https://ilhammeidi.github.io/enlite-docs/#eslint

About laravel sanctum I haven’t try before, but this function seems like firebase auth. This template provide the static auth redux-form like http://enlite.ux-maestro.com/login and http://enlite.ux-maestro.com/register. So you can use without firebase. There are the codes app/components/Forms/LoginForm.js, app/components/Forms/RegisterForm.js and The containers app/containers/Pages/Users/

Hope this can help.

Regards.

Hi bikramaditya,

Thanks for visiting my portfolio.

This template doesn’t have feature to read personal user mail (gmail, yahoo, etc). The difference between email is static-email using static data, and firebase-email using real data from database from firebase.

Regards.

Hi hefei93,

Thanks for the appreciations.

Here’s the guide for scrollbar styling https://css-tricks.com/the-current-state-of-styling-scrollbars/ Example like in /app/components/SidebarBig/sidebarBig-jss.js

For spinner it uses gif image that you can download from https://icons8.com/preloaders/en/circular And default material component http://enlite.ux-maestro.com/app/ui/progress

Regards.

Hi hefei93,

To check login condition, you can get state from reducer. /app/redux/modules/authReducer.js, loggedIn

Like example in app/containers/Templates/Dashboard.js with props isAuthenticated

And for login redirection you can use <Redirect /> from react -router-dom like in app/containers/Session/withAuthorizationRouter.js

Regards.

Hi hefei93,

Thanks for purchasing.

To integrate with php laravel we suggest to use laravel as API in separated server and react.js as front-end side. Here’s the article to support you

part: 1 https://code.tutsplus.com/tutorials/build-a-react-app-with-laravel-restful-backend-part-1-laravel-5-api--cms-29442

paert: 2 https://code.tutsplus.com/tutorials/build-a-react-app-with-laravel-backend-part-2-react--cms-29443

Feel free if you have any further queries.

Regards.

Hi hefei93,

I didn’t fix anything since 2 months ago. Maybe it’s about extraction url param. For redirection please check the routh path in routing Application.js. Then the next url param will be extracted in app/redux/modules/authSagas.js The code should be like this

function getUrlVars() {
  const vars = {};
  const parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { // eslint-disable-line
    vars[key] = value;
  });
  return vars;
}

To use in many pages, please try to wrap in app/containers/App/index.js In example for all dashboard pages,

<Route path="/app" component={withAuthorizationRouter(Application)} />

Regards.

Hello ilhammeidi, Thank you for the response. The wrapping of withAuthorizationRouter works well to wrap Application.

The route redirect after login is not getting the correct url seems like because the loginWithEmailSaga(payload) in authSagas.js. I changed it to

if (getUrlVars().next) { // Redirect to next route yield history.push(/*”/app/” + */getUrlVars().next); } else {

After that it seems to work fine. Can you please verify this is correct?

Thank you

hefei93

Hi, yes that’s correct. And thanks for reported issue, I will update it soon.

Hi ruioliveiravpa,

Thanks for purchasing.

Unfortunately I don’t have static HTML version. And for starter-project is in starter-project/ folder. That’s contain minimal components and page, and all of template uses JSS for styling.

Feel free if you have nay further queries.

Regards.

Youre welcome, and happy coding

Hi dtwhite1103,

Thanks for purchasing.

Unfortunately I don’t have the angular template. This template use react material-ui and this a similar framework for angular: https://material.angular.io/components/categories

Feel free if you have any further queries.

Regards.

Hi lcapitan84,

Thanks for purchasing.

About electron we haven’t try it before, but here’s reference that might can help you “medium.com/@brockhoff/using-electron-with-react-the-basics-e93f9761f86f”

Feel free if you have any further queries.

Regards.

Como puedo hacer para que la primer pagina que se abra sea la del login y no la LandingCorporate y que una vez logeado se redirija a la Application, Gracias

Hi lcapitan84,

To setup routes, please change the route ”/” with Login page:

// app/containers/App/index.js
<Route path="/" exact component={Auth} />

// app/containers/App/Auth.js
<Route path="/" component={Login} />

Then to redirect after login you can use history.push after authentication is valid, like in app/redux/modules/authSagas.js

history.push('/app');

Hope this can help.

Best regards.

ALso give me required nodejs packages names to use only COmponents and Styles for Tables/Inputs etc.

Hi iwebw_admin,

Thanks for purchasing.

This template is recommended to use with redux, but it possible to take out the components, containers, and styling only.

Please try to copy the main components, you can use starter-project which lighter

1. Components: app/components/ All components is necessary for Dashboard page

2. Containers: app/containers/

- Routing: app/containers/App/index.js

- UI Redux: app/containers/App/ThemeWrapper.js

- Dashboard template: app/containers/Templates/Dashboard.js and app/containers/Templates/layouts/*.js

For reducer state You can hardcoded the props value and use void function () => {} for test. And latter you need to create adjustment by use local state and set function by following /app/redux/modules/uiReducer.js initialState and each action type

3. Style: app/styles/ - MaterialUI Custom: app/styles/theme/applicationTheme.js - The rest is scss for vendor plugin styling and color palette

4. Image and assets: /public/ - Images & favicons

Also please check template structure diagram https://ilhammeidi.github.io/enlite-docs/#code_basic

For external UI components and styling references: - Material UI https://material-ui.com/ - JSS (CSS in JS) https://cssinjs.org/

For tables and input require:

"dependencies": {
   "@date-io/date-fns": "^1.3.11",
  "@date-io/moment": "1.3.8",
  "@material-ui/core": "^4.7.0",
  "@material-ui/icons": "^4.5.1",
  "@material-ui/lab": "^4.0.0-alpha.33",
  "@material-ui/pickers": "^3.2.8",
  "autosuggest-highlight": "^3.1.1",
  "classnames": "^2.2.6",
  "date-fns": "2.1.0",
  "downshift": "^1.31.12",
  "jss": "^10.0.0",
  "jss-rtl": "^0.3.0",
  "keycode": "^2.2.0",
  "mui-datatables": "^2.13.1",
  "prop-types": "15.7.2",
  "rcolor": "^1.0.1",
  "react": "16.8.6",
  "react-calendar": "^2.17.4",
  "react-clock": "^2.3.0",
  "react-dom": "16.8.6",
  "react-ionicons": "^2.1.6",
  "react-jss": "^10.0.0",
  "react-number-format": "^3.3.4",
  "react-select": "^3.0.4",
  "react-text-mask": "^5.3.2",
  "reselect": "4.0.0",
}

"devDependencies": {
  "css-loader": "3.4.2",
  "node-sass": "^4.14.0",
  "sass-loader": "^7.1.0",
  "sass-material-colors": "0.0.5",
  "style-loader": "0.23.1",
}

Hope this can help.

Regards.

Thanks for quick reply. Appreciated. Will check and update accordingly.

Hi tommyquiko,

Terimakasih telah membeli Enlite Prime.

Untuk di live server yang menggunakan https seharusnya akan auto update jika tab browser di close kemudian re-open lagi websitenya. Silahkan pastikan untuk tidak cache sw.js di htaccess-nya. Secara default file di build/.htaccess setalah npm run build adalah:

<IfModule mod_headers.c>
  # Do not cache sw.js, required for offline-first updates.
  <FilesMatch "sw\.js$">
    Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform" 
    Header set Pragma "no-cache" 
  </FilesMatch>
</IfModule>

Sementara untuk clear cache di local server paling secara manual, seperti di docs https://ilhammeidi.github.io/enlite-docs/#deploy

Anda juga dapat menonaktifkan cache offline. Silakan ikuti https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/general/remove.md ini

Dan berikut artikel tentang cara kerja Service Worker https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps

Semoga bisa membantu. Silahkan jika memiliki pertanyaan lebih lanjut.

Salam.

Hi hasanzia1993,

This issue about offline-access feature. So after deploy, please close the browser tab and re-open again, the code should be updated. If not please check in your htaccess (by default is in build/.htaccess). Please make sure to do not cache the sw.js

<IfModule mod_headers.c>
  # Do not cache sw.js, required for offline-first updates.
  <FilesMatch "sw\.js$">
    Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform" 
    Header set Pragma "no-cache" 
  </FilesMatch>
</IfModule>

You can also disable the offline cache. Please follow this https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/general/remove.md

And here’s article about how service worker works https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps

Regards.

Hi 1019apps,

Thanks for purchasing.

I think maybe it because you access APIs Locally. Here’s the article about CORS issue in browser https://www.thepolyglotdeveloper.com/2014/08/bypass-cors-errors-testing-apis-locally/

Hope this can help. Feel free if you have any further queries.

Regards.

Hi tommyquiko,

Terimakasih telah membeli Enlite Prime.

Mungkin bisa coba ditambahkan timeout di containernya pada saat submit seperti ini.

app/containers/Pages/UsersFullstack/Login.js

useEffect(() => {
    setTimeout(() => {
      if (valueForm) {
        console.log(`You submitted:\n\n${valueForm}`);
        handleLogin(valueForm.get('email'), valueForm.get('password')); // eslint-disable-line
      }
    }, 100)
  }, [valueForm]);

Semoga membantu dan silahkan jika memiliki pertanyaan lebih lanjut.

Salam.