Discussion on Enlite Prime - React Admin Dashboard Template For Full-Stack Developer

Discussion on Enlite Prime - React Admin Dashboard Template For Full-Stack Developer

Cart 815 sales
Well Documented

ilhammeidi supports this item

Supported

This author's response time can be up to 1 business day.

238 comments found.

Hi, How to start project with Restful Api ?

Thanks.

Hi khairurrijal31,

Terimaksih telah membeli Enlite Prime.

Untuk backend API bisa di dalam Component nya. Yaitu menggunakan function componentDidMount atau useEffect

Berikut referensinya https://ichi.pro/id/bagaimana-mengambil-data-dari-api-menggunakan-useeffect-react-hook-126453162297458 https://medium.com/@ri7nz/3-cara-fetch-data-di-reactjs-aaa064ccf5e9

Salam.

Why doesn’t one level menu change to active after clicking it in the big sidebar navigation layout?

Hi Narayananbtech,

There’s an issue, I will check and update it soon.

Regards.

Hi Narayananbtech,

Here’s the update.

- Add the single menu that redirect to new page in app/api/ui/menu.js Example for localhost:3000/app/blank-single
{
    key: 'blank_single',
    name: 'Blank Page',
    icon: 'ion-ios-document-outline',
    linkParent: '/app/blank-single',
  }
- In /app/components/SidebarBig/MainMenuBig.js add this function
const handleLoadSingleMenu = () => {
    setSelectedMenu([]);
    closeDrawer();
  };
- in /app/components/SidebarBig/MainMenuBig.js update the last ButtonBase in const getMenus function
const getMenus = menuArray => menuArray.map((item, index) => {
   if (item.key === 'menu_levels') {
      ...
   }
  if (item.child) {
    ...
  }
  return (
      <ButtonBase
        ...
        activeClassName={classes.active}
        onClick={() => handleLoadSingleMenu(item.key)}
      >
        ...
      </ButtonBase>
    );
}
- In reducer app/redux/modules/ui.js update CLOSE_MENU and OPEN_SUBMENU action.
case CLOSE_MENU:
  mutableState.set('subMenuOpen', List([]));

case OPEN_SUBMENU:
  const path = action.initialLocation.split('/'); 
  if (path.length <= 3) {
    mutableState.set('sidebarOpen', false);
  }

I will make a patch for this in next update.

Hope this can help.

Regards.

Hi, Thanks for the amazing template. Recently I have purchased this template and started customization for my project. I’m using authReducer state to detect whether the user login or not but if the user reloads the page reducer state also reset. so I’m not able to detect login status. I would like to know a better approach while using this template. I have two solutions either I can store it in local storage so that I can check the login condition when the page refresh. and another approach is using store subscribe logic combine with local storage. can you confirm which is the best way to check if the user refreshes the page? Is there any logic that you predefined in this template to keep auth reducer state after reloading the page?

Hi Narayananbtech,

Thanks for purchasing and the appreciation.

You can use local storage for simple response auth, but for more advance with complex data you can use subscribe with local storage.

Feel free if you have any further queries.

Regards.

Hi ilhammeidi,

I need help with login page, i put an image on left side page, here is the result:

http://dev-admin.sandaliaria.com.br/

The problem is… depending on internet connection the image show big before adjust on screen, to you simulate it is recommend put in slow internet connection in Google chrome dev tools, you will see the left side image with a womam show big before auto adjust.

Can you help me fix that ?

Hi,

I think it’s not about connection, I saw the page has 2 background images, that from inline style style="background-image: url("/96176a9ced1e45480d1ce15b89f14490.jpg");" and from external style background-image: url(http://dev-admin.sandaliaria.com.br/a7ad8c403e23c32488df4016d5f13188.jpg);

Here’s the images: http://dev-admin.sandaliaria.com.br/a7ad8c403e23c32488df4016d5f13188.jpg and http://dev-admin.sandaliaria.com.br/96176a9ced1e45480d1ce15b89f14490.jpg

It’s look like connection problem, because the second image was inlined style, so it loaded later. You can use one background only by replacing with the second image in external jss style.

Regards.

Hello,

I’m looking to set another parameter in authReducer, for example, “verified” as part of firebase auth process. So I add it to state, default null. Then set up saga action, constant and reducer accordingly.

Logic: If firebase auth is successful, verifyUser* saga gets the user.email property and validates email via axios API to check if the user is “active” server side. API tested, returns true or false.

The idea is instead of validating “loggedIn” flag in withAuthorizationRouter, I then validate that “verified” is set to true. This is successful upon login.

However following any page refreshes, SYNC_USER saga is called, it seems to reset state to null. The page then of course goes into the loading state, while withAuthorizationRouter waits for a boolean value.

I assumed “verified” would be inherited in SYNC_USER reducer from …state . (Perhaps my understanding is wrong?).

Observations: In Redux tools, I notice a LOCATION_CHANGE action followed by null values.

Any idea what I could be doing wrong, spent 3 full days on it. I have a work around for now, so not urgent. Just need to resolve this for my own understanding – and cleaner code.

Hope this is clear.

Thank you!

K

Hi krlwbstr,

By default after page reload the state will resets to default value because redux state only handle front-end side.

With firebase, the basic user data should be synced in local storage as IndexedDB. But If you create custom state like “verified”, you need to flag in local storage.

I think need to create relation between logged user from firebaseAuth and “verifyUser”. It’s like add another role in firebaseAuth https://firebase.google.com/docs/auth/admin/custom-claims#set_and_validate_custom_user_claims_via_the_admin_sdk

Or another way is to put the “verified” status in local storage https://felixgerschau.com/react-localstorage/

Hope this can help.

Regards.

Hello,

I’ve followed the auth steps firebase and the app (build running as prod ) still allows direct access to app .

Could you advise what I may have missed.

Thanks. K

Fixed, found answer in previous comment!

index.js:

import withAuthorizationRouter from ’../Session/withAuthorizationRouter’; <Route path=”/app” component={withAuthorizationRouter(Application)} />

For others reading, I wanted the entire app locked down so did it at index level. You can wrap withAuthorizationRouter on specific route components in Application.js if preferred.

Thanks, K

Hi krlwbstr,

Thanks for purchasing.

Yes you can use withAuthorizationRouter.

Just for info, in the demo it’s not used as top level routes to make visitor easier to access other pages.

Feel free if you have any further queries.

Regards.

Hello, thank you for your work!

Please assist if possible: I have an existing project. What is best option of starting using your work in the existing code base?

i already found that you answered that before, no need to reply :)

This is the audit report after running npm install

70 vulnerabilities (14 low, 31 moderate, 24 high, 1 critical)

This is the audit report after running npm audit fix

71 vulnerabilities (14 low, 31 moderate, 25 high, 1 critical)

Hi karelcardona,

This template has been updated. You can download in your themforest account. That should be no critical and high vulnerabilities.

And there’s a few low and medium vulnerabilities that cannot be fixed because webpack version. If it still not proper for you, you can raise the refund.

Regards.

Thank you very much for the update . This is a great script

all the best

Your’e welcome. And I hope you can adjust the review rating.

Since your’e support has been expired maybe I can’t help much, so I offer you to submit a refund request.

Regards.

Hello, I know my support has expired, but please how do I get data like lat lng or center from google maps Drawing Manager with onCircleComplete function

Hi,

To get center for circle you can use getCenter(). Here’e the complete method and props name https://tomchentw.github.io/react-google-maps/#circle

And here’s some additional docs for google maps API

https://developers.google.com/maps/documentation/javascript/examples/circle-simple?hl=en https://developers.google.com/maps/documentation/javascript/examples/rectangle-event?hl=en

Regards.

Hello,

Firstly, love the Enlite 16 dashboard theme. It’s fantastic!

Just been getting stuck into React over the last month so fairly new to it – please bear with me. Also trying to make sense of Redux!

Anyway, I’ve followed the instructions and have the app running in the browser but keep getting hundreds of messages in the console relating to various modules such as the following

“DevTools failed to load source map: Could not load content for webpack://%5Bname%5D/node_modules/@material-ui/pickers/dist/material-ui-pickers.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME”

Was wondering what the “%5Bname%5D” is, the 5B and 5D translate into “[” and “]” – so looks malformed, but I have no idea how to fix! Have just purchased extended support in the hope you can help.

Thank you, Karl

Hi Karl,

Thanks for purchasing and the appreciation.

Don’t worry about that. Means the browser try to get source map from packages from node_modules/. But mostly 3rd party packages doesn’t have(include) the source map in distribution version.

You can ignore or hide it by open Developer Tools, go to “Settings” for Developer Tools, then uncheck Enable JavaScript Sourcemaps under the “Sources” settings.

Here’s the detail https://stackoverflow.com/questions/35002087/disable-source-maps-in-chrome-devtools

Feel free if you have any further queries.

Regards.

Hi ilhammeidi,

I have an another issue here is the same from @sendanapp, i have a Dialog componente, and… inside that Dialog i have the Select component, when the select componente stay on the bottom of the dialog the dropdown is not visible correctly, i will send a image:

Here is the issue: https://ibb.co/mGBhFYg Here is the expected: https://ibb.co/52QZGBB

Thanks

Hi,

Here’s the styling:

  autocompleteRoot: {
    paddingTop: theme.spacing(3),
  },
  autocompleteTag: {
    padding: '0 !important'
  }

and component

<Autocomplete
        classes={{
          inputRoot: classes.autocompleteRoot,
          tag: classes.autocompleteTag,
        }}
       {...rest code}
      />

Kind regards.

HI ilhammeidi,

Thanks for your answer, now its working, but still need some styles, look at the result… https://ibb.co/rKhNf3B Thanks…

1. When the select is multiple, and when i fill the entire row with the tags the dropdown arrow go to bottom left, how can i keep in rigth side ?

Here the screenshoot: https://ibb.co/W39NLcD
I need somthing like this: https://ibb.co/HBX6dvC

2. When the select is not multiple the space between label and value is to big, how can i adjust it ?

Here screenshot: https://ibb.co/tXD7Q7J

The padding top is theme.padding(3), but when its a single select the blank space is to big.

Thanks again.

Hi,

1. For this issue I can’t reproduce, I’m not sure maybe you’ve made styling modification before. So in Autocomplete element you can add additional class for arrow icon endAdornment: classes.arrow

<Autocomplete
        classes={{
          {...rest code},
          endAdornment: classes.arrow
        }}
       {...rest code}
      />

And here’s the style

arrow: {
    top: 'calc(50% - 34px)'
    right: 0
    position: 'absolute',
  }

2. Please use the classes.autocompleteRoot, and classes.autocompleteTag, for multiple autocomplete only not for all autocomplete types

Regards.

Hi ilhammeidi,

I trying to build the project but the build lock on 92% and some seconds after that o got message: JavaScript heap out of memory

Can you help me ?

Hi,

This template default need RAM 2 – 2.5 gb to compile production build. Then maybe need more if you add more pages or components.

Regards.

Hey, Issue with select dropdown items positions, When dropdown at the bottom of the screen , list should be populated on up side as it’s getting hidden if the dropdown is the bottom element of the page.

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

Hi sendanapp,

Thanks for the reported issue.

For autocomplete with selectbox please use the latest practice from the latest Material UI docs (version ^4.11) https://material-ui.com/components/autocomplete/#combo-box It use material-ui/lab so it should be more flexible.

I will update this template in next update.

Regards.

Hey, I am using the react-select customized as given in example, Can u pls look how to fix that.

Hi sendanapp,

Please try to use default menu from react-select. Example in /app/containers/Forms/demos/SelectSuggestions.js<

Remove custom menu
const components = {
  Control,
  // Menu,  => remove this
  MultiValue,
  NoOptionsMessage,
  Option,
  Placeholder,
  SingleValue,
  ValueContainer,
};
Add styles in selectStyles
const selectStyles = {
    //...rest code
    menu: (provided) => ({
      ...provided,
      background: theme.palette.background.paper
    })
  };
Finally add menuPlacement=”auto” Also add maxMenuHeight if needed
<Select
   menuPlacement="auto" 
   maxMenuHeight={200}

Regards.

Purchase code : 2f53dcf4-1d4e-4417-8976-48ad74e57113 – 13 Oct 2020 REGULAR LICENSE

Hi,

We are facing issue in integrating one npm package(pdftron – https://www.pdftron.com/documentation/web/get-started/npm/) in Enlite Prime react template (https://themeforest.net/item/enlite-prime-reactjs-fullstack-website-template/23803960?gclid=Cj0KCQjw0K-HBhDDARIsAFJ6UGi8d5txHeyV0DKp9BoqEpk_b3QTGgFFpcB6eFBxF5f4iConZp1UIg8aApjVEALw_wcB)

This package works locally fine but when we try to build the app and upload the build to cloud, pdftron module not working. The main reason of this issue is webpack configuration issue which is not supporting pdftron npm package.

So we need your help in integrating the pdftron npm package in Enlite Prime React template.

PDFTron https://www.pdftron.com Enlite Prime – React Admin Dashboard Template For Full-Stack Developer https://themeforest.net

Hi ajayzharotia,

Thanks for purchasing.

Regarding the pdftron docs above on step.2, please copy the static assets to public/ folder in root project not inside build/ filder.

And then for usage (step.3), please change the path to /webviewer just without /public

WebViewer({
  path: '/webviewer',
 // rest code

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

Regards.

Hi, in safari browser i am not able to see the Sidebar. BigSidebar is showing properly but Sidebar is not. This problem is also in your demo link. please let me know how it can be fixed.

Hi darshanjain07,

Thanks for reported issue.

To fix it in app/components/Sidebar/sidebar-jss.js in drawer: line:12 adjust the code bellow

drawer: {
    width: drawerWidth,
    '& > div': {
      position: 'relative',
      border: 'none',
      background: 'none'
    }
  },

Hope this can help. I will make a patch for this issue in the next update.

Regards.

I’m about to buy your template. Wondering if it’s possible to run build for IIS. When I go for npm run build it generates me a static build with broken links to files. Tried to update package.json with “homepage”: ”.” what normally helps. Can you advice how to prepare a build for IIS?

Him

Thanks for visiting my portfolio. I haven’t try with IIS. I recommend to use this template in node server by following the documentation. Because if running as static sites, there’s maybe some issue like routing and caching.

Hi there,

I bought the app .my code – f18caf62-985d-484a-afc4-96737a6672b9

Post installation the code is failing when i do npm run build:dll and npm start is giving blank page.

Hi msnimbal,

Thanks for purchasing.

The npm run build:dll will automatic running after npm install, or by manually after install new package.

Please try some options bellow before run npm install.

- Delete node_module/ folder then npm install again

- Clear node cache with npm cache clean --force to verify and clean up your npm. Then try npm install again

Feel free if you have any further queries.

Regards.

thank. you. it. worked

Hi there,

Am planning. to buy this template, I would like to know if the application can do CRUD to firebase?

Thanks, Manju

Hi msnimbal,

Thanks for visiting our portfolio. Enlite Prime uses firebas for authentication and sample apps. Please check the demo and sample-project for detail.

Regards.

Hi thanks for making this nice template. i am getting a issue in redux form. as i am not able to upload photos. i am new in react. i tried so many things but after submitting the form, file field is coming with blank object other fields are showing values, but file field not. please help.

my purchase code: b60b10c9-0e05-4d8b-b971-74e69d260db2

Thanks, ilhammeidi for your reply. issue is resolved. i am facing another issue i.e i want to run my app in sub-directory like “http://example.com/myfolder”. i tried to add <base href=”/myfolder/”> and added homepage: “http://example.com/myfolder”. and tried to build the app. but nothing is working for me. I am using nginx server, i also added the location path in nginx default config file. ...could you plz help me

Hi darshanjain07,

By default this template all assets paths will point to the main domain. If you want to deploy with subfolders, you need to change the path to src = ”/file.js” to be src = ”./file.js”

So in internals/webpack/webpack.prod.babel.js
// line: 20 - In the output add a public path './'
output: {
  publicPath: './'
}

// line: 96 - In OfflinePlugin set relativePaths to true
new OfflinePlugin({
  relativePaths: true,
)}

After running the npm run build, please to make sure build/index.html and build/sw.js should be the path to src = "./ file.js".

For other static assets such as the favicon and images in app/index.html, the path must be changed manually.

If there are still problems, I recommend using the subdomain dashboard.example.com because like in the demo example, so far there have been no problems using a subdomain.

Regards.

Thanks its working :)

Hi, I just purchased a license and failed to add it in a existing Project. I just want to use components and styles,

It gives me tones of error. do you solve issues remotely and hourly paid. or I can’t complete with this great theme. I reach to the edge of the road. Regards

If yes please contact me by email aljamhi2008@gmail,com

Hi aljamhi2008,

About the support I’m not available for hire and only available via comment or private message in https://themeforest.net/user/ilhammeidi

Also for this case I sent to your mail to open discuss.

Regards.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey