Hi,

Thanks for your purchase.

There was an error on the MUI side for a while and we improved the pagination implementation on our end while making the switch to MUI v9 with the new version.

Could you tell me the version of Gogo you have? I can try to share a solution based on your version to make it look like the demo version similar to this one: https://gogo-vite.crealeaf.com/applications/drive/files You might find the version around the start of the package.json file.

Versione 7.9.0..

Non sapevo ci fossero in vendita versioni più aggiornate, l’ho acquistato da poco.

Grazie, Simone

Hi,

Here is the steps to solve the issue:

1. Change the data-grid-pagination.tsx file with the below code: import { PaginationItem, TablePagination, TablePaginationProps } from "@mui/material"; import MuiPagination from "@mui/material/Pagination"; import { gridPageCountSelector, gridPaginationModelSelector, useGridApiContext, useGridSelector, } from "@mui/x-data-grid"; import NiChevronDownSmall from "@/icons/nexture/ni-chevron-down-small"; import NiChevronLeftSmall from "@/icons/nexture/ni-chevron-left-small"; import NiChevronRightSmall from "@/icons/nexture/ni-chevron-right-small"; import { cn } from "@/lib/utils"; function Pagination({ page, onPageChange, className, }: Pick<TablePaginationProps, "page" | "onPageChange" | "className">) { const apiRef = useGridApiContext(); const pageCount = useGridSelector(apiRef, gridPageCountSelector); return ( <MuiPagination variant="text" size="small" className={className} count={pageCount as number} page={page + 1} onChange={(event, newPage) => { onPageChange(event as never, newPage - 1); }} renderItem={(item) => ( <PaginationItem slots={{ previous: () => { return <NiChevronLeftSmall size="small" />; }, next: () => { return <NiChevronRightSmall size="small" />; }, }} {...item} /> )} /> ); } export default function DataGridPagination(props: any) { return ( <TablePagination {...props} component="div" ActionsComponent={Pagination} slotProps={{ displayedRows: { className: "hidden!" }, spacer: { className: "flex-none" }, toolbar: { className: "px-0 flex justify-end" }, selectLabel: { className: "hidden!", }, select: { IconComponent: () => { return ( <NiChevronDownSmall size="medium" className="pointer-events-none absolute end-1"></NiChevronDownSmall> ); }, className: "hidden!", }, }} /> ); } function PaginationFullPage({ page, onPageChange, className, }: Pick<TablePaginationProps, "page" | "onPageChange" | "className">) { const apiRef = useGridApiContext(); const pageCount = useGridSelector(apiRef, gridPageCountSelector); return ( <MuiPagination variant="text" size="small" className={className} count={pageCount as number} page={page + 1} onChange={(event, newPage) => { onPageChange(event as never, newPage - 1); }} renderItem={(item) => ( <PaginationItem slots={{ previous: () => { return <NiChevronLeftSmall size="small" />; }, next: () => { return <NiChevronRightSmall size="small" />; }, }} {...item} /> )} /> ); } export function DataGridPaginationFullPage(props: any) { const apiRef = useGridApiContext(); const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector); return ( <TablePagination {...props} component="div" ActionsComponent={(props) => { return <PaginationFullPage {...props} className={cn("surface-standard")} />; }} rowsPerPage={paginationModel.pageSize} page={paginationModel.page} labelRowsPerPage="Rows" rowsPerPageOptions={[10, 25, 50, 100]} labelDisplayedRows={({ from, to, count }) => `${from}-${to} of ${count === -1 ? `more than ${to}` : count}`} onRowsPerPageChange={(event) => { const newSize = parseInt(event.target.value, 10); apiRef.current.setPageSize(newSize); }} slotProps={{ spacer: { className: "flex-none" }, toolbar: { className: "px-0 flex" }, select: { IconComponent: () => { return ( <NiChevronDownSmall size="medium" className="pointer-events-none absolute end-1"></NiChevronDownSmall> ); }, }, }} /> ); }

2. Add the below CSS block in data-grid.css file at the end of the file and before the last closing curly braces so it will be inside the @layer definition.

/* Pagination Styles */ .MuiDataGrid-root.full-page .MuiTablePagination-toolbar { @apply relative; .MuiTablePagination-selectLabel { @apply text-text-secondary order-1 ml-auto text-sm; } .MuiTablePagination-select.MuiSelect-root { @apply text-text-secondary order-2 me-1.5 text-sm; } .MuiInputBase-input { @apply text-sm; } .MuiTablePagination-displayedRows { @apply text-text-secondary border-grey-200 order-3 border-s ps-4 text-sm; } .MuiPagination-root { @apply absolute; } }

Please let us know if this does not solve the issue. Cheers.

Hi,

I am not really sure how that works. I know there are some wordpress themes that use paid wordpress plugins, but don’t know how they do it. You might try asking to Envato or maybe look into the forums.

Cheers.

Hi,

I want to give you an offer. We have almost finished our backend and want to use your template for UI.

I can give you 15% royalty/sale after launch.

Do you accept this offer?

Thanks.

Thanks for the offer, but I think we will pass.

Partnerships of this type tend to get complicated, and we prefer the ease of mind over extra earnings.

Best of luck with your project.

Hi,

I don’t think we will work on additional landing pages any time soon since the main focus of the template is the dashboard part.

Cheers.

Hi,

Thank you, glad to hear you liked the new version.

MUI has much more components in its free tier and it is frequently updated. On top of that, Tailwind is much more popular than Bootstrap and it works really well with MUI.

All in all, I don’t think we will work on a Bootstrap version.

All the best.

Hi,

Thank you, glad to hear you like the template.

The homepage design and code are included in the template. You can use them anyway you like to create yours. We included the homepage in Version 7.5.0. If you have an older version, please download the newest one to access it.

We can work on a freelance contract if you need customization or additional modules for the homepage, and the UX improvements of the application. You can reach us from the contact form in our profile: https://themeforest.net/user/coloredstrategies, or email us at support@crealeaf.com.

All the best.

Hi,

We recently updated the template. We also switched to another cloud provider to automate our deployment, so the older website became an extra cost for us. All in all, as you notice, it is no longer in use.

I tried the older version to see if I could help you anyway. After downgrading Node(16.3.0) and NPM , it runs and builds. I can send you both the sources and the build version so you might deploy somewhere and continue using it.

There is one issue that I don’t have a quick solution. We had an API to fill our listing pages, and we no longer have access to it. So, a few listing pages are not working. It can be solved by replacing the API with static JSON. There are 4 pages affected by it.

If you are interested, please email us at support@crealeaf.com so I can send you the files.

Cheers.

Hi,

MUI comes with lots of components in its free plan and you don’t need a subscription to use them. You might check out the features on their pricing page and if you don’t use those premium features, for example, you might make the data-grid work with the import { DataGrid } from ”@mui/x-data-grid”; And you can remove the line starts with “LicenseInfo.setLicenseKey”.

The other components of MUI-X are mostly available for the Free tier as well. Here is the page to check the features: https://mui.com/pricing/

Hi,

Yeap, will look into it. Thanks!

Hi,

We found a library that works well with MUI and included it. We will publish an update but here is how it works in case you don’t want to wait for it.

npm install mui-one-time-password-input import { MuiOtpInput } from "mui-one-time-password-input"; import { FormEvent, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { Box, Button, Divider, FormLabel, Paper, Typography } from "@mui/material"; import Logo from "@/components/logo/logo"; export default function Page() { const navigate = useNavigate(); const handleSubmit = (event: FormEvent) => { event.preventDefault(); navigate("/"); }; const [otp, setOtp] = useState(""); const handleChange = (newValue: string) => { setOtp(newValue); }; return ( <Box className="bg-waves flex min-h-screen w-full items-center justify-center bg-cover bg-center p-4"> <Paper elevation={3} className="bg-background-paper shadow-darker-xs w-lg max-w-full rounded-4xl py-14"> <Box className="flex flex-col gap-4 px-8 sm:px-14"> <Box className="flex flex-col"> <Box className="mb-14 flex justify-center"> <Logo classNameMobile="hidden" /> </Box> <Box className="flex flex-col gap-10"> <Box className="flex flex-col"> <Typography variant="h1" component="h1" className="mb-2"> Verification </Typography> <Typography variant="body1" className="text-text-primary"> Please enter your 6 digit code that sent to your email address. </Typography> </Box> <Box className="flex flex-col gap-5"> <Box component={"form"} onSubmit={handleSubmit} className="flex flex-col"> <Box className="flex flex-col"> <FormLabel component="label">Verification Code</FormLabel> <MuiOtpInput value={otp} onChange={handleChange} length={6} TextFieldsProps={{ size: "small", variant: "standard", className: "outlined" }} className="gap-1 md:gap-2" /> </Box> <Box className="flex flex-col gap-2"> <Button type="submit" variant="contained" className="mb-4"> Continue </Button> </Box> <Typography variant="body2" className="text-text-secondary"> By clicking Continue, Sign in with Google, or Sign in with GitHub, you agree to the{" "} <Link target="_blank" to="/auth/terms-and-conditions" className="link-primary link-underline-hover"> Terms and Conditions </Link>{" "} and{" "} <Link target="_blank" to="/auth/privacy-policy" className="link-primary link-underline-hover"> Privacy Policy </Link> . </Typography> </Box> </Box> <Divider className="text-text-secondary my-0 text-sm"></Divider> <Box className="flex flex-col"> <Typography variant="h6" component="h6"> Did not get the code? </Typography> <Typography variant="body1" className="text-text-secondary"> If you have not received the code, please{" "} <Link to="/auth/get-verification" className="link-primary link-underline-hover"> resend </Link> . </Typography> </Box> </Box> </Box> </Box> </Paper> </Box> ); }

That is the whole set-verification page. Here is the part with only the new component:

import { MuiOtpInput } from "mui-one-time-password-input"; const [otp, setOtp] = useState(""); const handleChange = (newValue: string) => { setOtp(newValue); }; <MuiOtpInput value={otp} onChange={handleChange} length={6} TextFieldsProps={{ size: "small", variant: "standard", className: "outlined" }} className="gap-1 md:gap-2" />

Hi,

It must be a caching issue.

Please clean the local storage and try again. You can find it in Chrome Dev Tools under the Application tab and in the Storage tab in Firefox Dev Tools.

You can also use the incognito mode to verify it is cache related.

Cheers.

Hi,

There is no mechanism to make a license exchange. Here is how we can solve it:

1- Please create a refund request for the one you don’t want here: https://themeforest.net/refund_requests/new It will arrive us and we will approve it.

2- Then, you can buy the one you want.

Cheers.

Hi,

Thanks for the purchase.

There should be a file named gogo-vite-design.fig in downloaded zip. The designs are in there and it is required to be dragged on Figma. Here is a frame that explains it: https://www.figma.com/design/IfNcwqMO9Rzh27ClqB6aon/Prod-Gogo-Next-Vite-Design?node-id=9242-153816&t=1WqKW33KZbq3xYOz-4

I will add it to the FAQ section as well.

Hi there,

Thank you for your interest in Gogo.

I don’t think it is a good idea to use Gogo with Vue since Gogo is built on top of the MUI library, which is deeply dependent on React.

All the best.

Hi,

You can use the “MUI Tel Input plugin”, which works very well with MUI for phone input. It’s quite similar to “react-phone-input-2” and fully compatible with MUI.

https://viclafouch.github.io/mui-tel-input/

Hi there,

Doing great and hope you are as well.

The issue you had is strange. The first link you sent is a very old version, and we should have probably redirected it to the new one. Where did you come by it? All the links in the template detail page are directed to the second and up-to-date link you sent, as far as I know. https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383

The new version you have is much better. It is React 19, while the old one is React 17, and 4 years old. One thing the new version does not have is the applications, and we have been working on it for a while, and we are almost ready to publish it. We made 3 applications: AI Chat, AI Content, and Drive. It should be up in a day or two. We also added 3 more dashboard layouts and improved Figma a lot.

We can send you the old one as well, but it is really old, and it will not even build. The designs are in Photoshop if I remember correctly If you want that, please send us a message via the form on our profile page so we can send a reply with the template link: https://themeforest.net/user/coloredstrategies

Please let us know how you want to proceed.

Cheers.

Hi! I am great as well.

First of all, thank you for you fast response.

I’m impressed by the quality of you work.

I’ve found the old version template in a blog post with several others templates. It was some kind of review of them.

Unfortunately, I couldn’t find the blog post right now. But I remember googling for “react dashboard template gogo” and I’ve found the following link:

https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://gogo-react.coloredstrategies.com/&ved=2ahUKEwiC3Oi_qfmQAxUhD7kGHcatAHwQFnoECB8QAQ&usg=AOvVaw0pUNeNPnTROBQF0_uNUri0

The link then sent me to the old version. It all happened yesterday (I’m not able to find the blog post because 1) I searched a lot of templates and 2) I used my computer, at home, unaccessible right now.

That said, yes, please, I want that older version. I found it amazing. The current one is amazing as well, but I am interested in getting some features of the old one (I understand I will have to “make it work” on my own).

I will try to send you me message via the form on my profile.

Thank you so much.

Just replied your email with the link.

Thank you for the details and your understanding. We will do the redirecting to prevent any future problems.

Cheers.

Thanks for the update let me check

meanwhile can you help me what should i add in the

@mui/x-data-grid-pro. license key

Hi,

MUI comes with lots of components in its free plan. You might check out the features on their pricing page and if you don’t use those premium features, you might make the data-grid work with the import { DataGrid } from "@mui/x-data-grid";

Their MUI-X components are mostly available for the Free tier, but advanced features require a license as you can see by expanding the features on the table below the page here: https://mui.com/pricing/

Hi,

I am not able to reproduce the issue. I navigated to the link, clicked outside, the menu did not close, and clicked on an empty part of the menu, then clicked outside again, and the menu stayed.

The menu works differently in different resolutions. 1440px and 960px are the breakpoints. Could you share your screen resolution and the browser?

Hi,

What you explained “navigated to the link, clicked outside, the menu did not close, and clicked on an empty part of the menu, then clicked outside again, and the menu stayed.” is exactly my problem, I want that if the left menu is opened and you click outside, it should close it but that it isn’t happening. I have the same result in firefox and chrome, resolution 1792×1120.

Hi,

Now I got it. The menu changes its state based on the screen resolution and by default set to stay open above xl(1440px).

You might increase that value so the menu would stay open when the screen size is bigger. You can change it in layout-context.tsx file by updating secondaryBreakpoint: “xl” to secondaryBreakpoint: “3xl”. 3xl is 1900px, so it will stay open above it.

There is no “always-closed” config for it, but if you want it, you can create a new breakpoint with a huge value and set secondaryBreakpoint value to that. Here are the files that need to change: - mui-extend.ts: Search for BreakpointOverrides and add "10xl": true; - types.ts: Search for Screens and add "10xl": string; - tailwind.config.ts: Search for screens: and add "10xl": "10000px", - theme-provider.tsx: Search for breakpoints: and add "10xl": 10000, - layout-context.tsx: Search for secondaryBreakpoint and set it to "10xl". For a faster solution, you can remove the logic in the use-menu.ts file useScreenEffect with the comment ”// Handle secondary breakpoint changes if configured” and add the below. It should work. // Handle secondary breakpoint changes if configured useScreenEffect(secondaryBreakpoint || "2xl", () => { if (secondaryDefault !== false) { setSecondaryDefault(false); } });

Cheers.

Hi,

It can work, but requires some time. The react-router needs to be removed in favor of Nextjs’s own router, and there are also some parts that need to be added or removed to make Nextjs work without issues.

We have a Nextjs version here if you are interested: https://themeforest.net/item/piaf-vuejs-admin-dashboard/23160320

Hi,

We are working on the applications section and putting in some work for additional dashboards. After them, we will work on the RTL version.

Cheers.

Hi,

Unfortunately it is only React.

Cheers.