133 comments found.
Hi,
I was not getting the inner pages from the purchased theme.
please provide the inner page – with the inner pages it was difficult for us to complete the development.
kindly provide your valuable support on it
Hi,
Thank you for reaching out. I’d be happy to help, but I need some clarification on what you mean by “inner pages.” Could you please provide more details or specify which particular pages or elements you are referring to? This will assist me in better understanding your request and providing the support you need.
Looking forward to your response.
Hi,
Thank you for this beautiful theme. We explore your files and we are facing a small issue with it.
The theme overview indicated compatibility with both JAVASCRIPT and TYPESCRIPT version. However, upon inspecting the downloaded files, I only found TYPESCRIPT version, and there were no JAVASCRIPT version included.
Please share the JAVA SCRIPT version and FIGMA file.
Hi,
I sincerely apologize for the delayed response, and I appreciate your understanding.
Thank you for your recent purchase. We have noted your request to send the JS version to leftforcode@gmail.com. Rest assured, we will promptly send you the requested JS version. If you have any further questions or need additional assistance, feel free to let us know.
Once again, we apologize for any inconvenience, and we appreciate your patience.
Best regards
Are you going to update the theme to Vite 4 anytime soon, please?
Vite 5
Hi,
Yes, we will upgrade the dependencies in the next version along with other major updates.
Hi, can I use this template without redux? also are there graphics files that come with it, e.g. figma etc? thank you
Hi dsputnik,
Firstly, I would like to sincerely apologize for the delayed response. I appreciate your patience.
Regarding your question, the template is designed with Redux to manage standard data like menu lists and active theme colors. While it uses Redux by default, you can certainly make adjustments to replace Redux with another state management library if needed.
As for design files, currently, we provide XD files for the Rubick theme variants. Unfortunately, Figma files are not included at the moment.
If you have any further questions or need assistance with anything else, feel free to ask. Thank you for considering our template!
Best regards, Left4code
Hi, I purchased your product recently, could you send me the JS version? I will send the request to leftforcode@gmail.com, I await your response.
Hi,
I sincerely apologize for the delayed response, and I appreciate your understanding.
Thank you for your recent purchase. We have noted your request to send the JS version to leftforcode@gmail.com. Rest assured, we will promptly send you the requested JS version. If you have any further questions or need additional assistance, feel free to let us know.
Once again, we apologize for any inconvenience, and we appreciate your patience.
Best regards
I sent them an email on October 2nd requesting.
Hi,
Thank you for your email. We have responded, please check your inbox for our reply. If you have any further questions or need additional assistance, feel free to reach out. Best regards.
where is xd file ?
Hi,
I sincerely apologize for the delayed response. I appreciate your inquiry. Regarding your question about the XD design file, please note that the XD design file is only available for the Rubick version of the template.
If you have any further questions or if there’s anything else I can assist you with, please feel free to let me know.
Thank you for your understanding.
Best regards
Hi, I purchased your product recently, could you send me the JS version? I will send the request to leftforcode@gmail.com, I await your response.
Hi,
I sincerely apologize for the delay in response. Thank you for reaching out. To assist you with the JS version, please send your request to leftforcode@gmail.com. I appreciate your understanding and patience.
If you have any further questions or if there’s anything else I can help you with, please feel free to let me know.
Best regards
Hello, how can I disable the animation when switching pages, the ease in from bottom to top, I am unable to find that
Thanks in advance
Hi,
I sincerely apologize for the delayed response. To disable the page transition animation, please follow these steps:
1. Open the file ”/src/assets/css/components/_intro.css”. 2. Remove the specified line to disable the animation.
// Line 61
@import "./components/_intro.css";
If you encounter any difficulties or need further assistance, feel free to ask. Thank you for your patience and understanding.
Best regards
Hi, I have some questions for you. I’m currently deploying to a Cloudflare server, I’ve made changes to my vite.config.ts file as shown below. How can I deploy with HTTPS?
import { defineConfig } from “vite”; import react from ”@vitejs/plugin-react”; import basicSsl from ’@vitejs/plugin-basic-ssl’ import path from “path”;
// https://vitejs.dev/config/ let __dirname: any; export default defineConfig({ build: { commonjsOptions: { include: [“tailwind.config.js”, “node_modules/**”], }, }, optimizeDeps: { include: [“tailwind-config”], }, plugins: [ react(), basicSsl() ], resolve: { alias: { “tailwind-config”: path.resolve(__dirname, ”./tailwind.config.js”), }, }, server: { host: true, https: true, port: 3001 }, define: { _global: ‘({})’ } });
When i deploy, i get this error: Uncaught SyntaxError: Invalid or unexpected token (at index.5b8973c9.js:30:37472)
Hi,
I appreciate your patience, and I apologize for any inconvenience you’ve encountered. Regarding your deployment issue, I’d like to clarify that the deployment process, especially on specific servers like Cloudflare, falls outside the scope of our official support.
However, I’ll do my best to assist you with any questions related to the installation process and issues within the project or its libraries. In response to the error you’re facing (Uncaught SyntaxError), it seems to be related to a problem in the generated JavaScript file (index.5b8973c9.js). To better understand and address this issue, could you provide more details or share the relevant code snippet from that part of your project?
Thank you for your understanding, and I’m here to help to the best of my ability.
Best regards
Hello Do you have any javascript version of this theme ? i got only typescript version Thanks
Hi,
I sincerely apologize for the delay in my response. If you are looking for the JavaScript version of the theme and have received the TypeScript version, kindly send a request to our support team via email at leftforcode@gmail.com. They will assist you promptly with the correct version.
Thank you for your understanding, and I appreciate your patience.
Best regards
Is it possible to convert this to React Inertia? Can your team give guidance regarding this too?
Hi,
I sincerely apologize for the delayed response.
I regret to inform you that integrating this template with Inertia.js is not within the scope of our support. We currently do not provide guidance or support for such customizations.
If you have any other questions or if there’s anything else I can assist you with within the supported features, please feel free to let me know.
Thank you for your understanding.
Best regards
Hi, just want to ask if this theme can be implement to nextjs? tq
Hi,
I sincerely apologize for the delayed response.
Yes, our theme is compatible with Next.js. Some key plugins, like HeadlessUI, already support Next.js. However, you may need to make adjustments for other plugins. If you encounter any specific issues or need guidance on implementation, please don’t hesitate to ask, and I’ll be happy to assist you.
Thank you for your understanding.
Best regards
I am getting error while running yarn build in Enigma v2.0.1
Node Version – v18.16.1 Yarn Version – 1.22.19
Error is listed below:
❯ yarn build yarn run v1.22.19 $ tsc && vite build src/base-components/Litepicker/litepicker.ts:5:11 – error TS2430: Interface ‘Picker’ incorrectly extends interface ‘Litepicker’. Types of property ‘on’ are incompatible. Type ‘((event: string, cb: (startDate: { dateInstance: Date; }, endDate: { dateInstance: Date; }) => void) => {}) | undefined’ is not assignable to type ‘(eventName: string | symbol, listener: (...args: any[]) => void) => this’. Type ‘undefined’ is not assignable to type ‘(eventName: string | symbol, listener: (...args: any[]) => void) => this’.
5 interface Picker extends Litepicker { ~~~~
Found 1 error in src/base-components/Litepicker/litepicker.ts:5
Hi usrivastava92,
I apologize for the error you’re encountering while running the build command. Based on the provided error message, it appears that there is an issue with the interface declaration in the litepicker.ts file, specifically with the Picker interface extending the Litepicker interface.
However, we couldn’t reproduce the issue on our end, which leads us to believe that there might be some modifications or customizations made to the Litepicker interface in your codebase. Could you please provide us with the code snippet from the litepicker.ts file, specifically the declaration of the Picker interface? This will help us further investigate the issue and provide you with an accurate solution.
Thank you for your cooperation, and we look forward to assisting you in resolving this issue.
Best regards, Left4code Team
Hi, im stuck trying to apply this emplate to my NextJS app, doy you have any recomendation or solution for me. Thanks a lot
Hello,
Thank you for reaching out to us. We understand that you’re facing difficulties applying the template to your Next.js app, and we’re here to help.
To integrate the template with your Next.js app, here are a few recommendations:
1. Ensure that you have a basic understanding of Next.js and its project structure. Familiarize yourself with the Next.js documentation to understand how to set up and configure your Next.js app.
2. Review the template documentation and any specific instructions provided by the template author. Check if there are any specific steps or considerations mentioned for integrating the template with Next.js.
3. Start by copying the necessary template files into your Next.js project. Make sure to retain the folder structure and file names as specified in the template.
4. Update any necessary configurations or dependencies in your Next.js app to align with the requirements of the template. This may include installing additional packages or configuring Next.js plugins.
5. Adapt the template components and styles to fit into your Next.js app’s structure. You may need to adjust paths, import statements, and any framework-specific code to ensure compatibility.
6. Test your Next.js app with the integrated template. Check for any console errors, warnings, or visual inconsistencies. Use the development tools provided by Next.js to debug and troubleshoot any issues that arise.
7. Reach out to the template author or consult their documentation or support channels for any template-specific questions or issues you encounter during the integration process. They will have the most comprehensive knowledge of the template and can provide guidance tailored to your specific situation.
Remember to back up your Next.js app before making any major changes or integrations to ensure you can revert back if needed.
We hope these recommendations help you successfully integrate the template into your Next.js app. If you have any further questions or need additional assistance, please don’t hesitate to reach out.
Best regards, Left4code Team
Hello, Please how can I add text alignment feature to the classic editor?
Hello,
Thank you for your request. We apologize for the inconvenience caused by the delay in our response. We appreciate your patience.
To enable the text alignment feature in your current build, please follow these steps:
Install the CKEditor 5 Classic Editor package from the following link:
1. Install the CKEditor 5 Classic Editor package by visiting the following link.https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-classic
2. Install the “text alignment” package to enable the alignment options:
https://www.npmjs.com/package/@ckeditor/ckeditor5-alignment
Once you have installed these packages, modify the file ”/src/base-components/Ckeditor/ClassicEditor/index.tsx” as follows:
Locate the configuration section for the CKEditor 5 Classic Editor in the file.
Add the “alignment” plugin to the list of plugins used by the editor.
Save the file and rebuild your project.
The text alignment feature will now be available in your CKEditor 5 Classic Editor, allowing you to align your text as needed.
For more examples and detailed instructions, please refer to the official documentation for CKEditor 5.
If you require further assistance, feel free to ask.
Hello, I think the new typescript version and the new react types version break this template ( typescript 5.1.3 & ”@types/react”: “^18.2.8” )
Hello, please i am using the react version of the admin template, I am having difficulty of preloading the TomSelect component, how can i in useEffect load an array of selected items into the TomSelect component so that on load of the page it shows the items as selected.
Hello,
Thank you for reaching out to our customer support team. We understand that you are using the React version of our admin template and facing difficulty in preloading the TomSelect component.
To preload an array of selected items into a select element using React’s useEffect hook, you can set the selected attribute on the corresponding options. Here’s an example of how you can achieve that:
import React, { useState } from 'react';
import TomSelect from "../../base-components/TomSelect";
type Option = {
value: string;
label: string;
};
const options: Option[] = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
function Main() {
const [selectedOption, setSelectedOption] = useState("1");
return (
<div>
<label htmlFor="select">Select an option:</label>
<TomSelect
id="select"
value={selectedOption}
onChange={setSelectedOption}
>
<option value="">Select an option</option>
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TomSelect>
{selectedOption && (
<div>
Selected option: {selectedOption.label} ({selectedOption.value})
</div>
)}
</div>
);
};
export default Main;
If you need any further assistance, feel free to ask!
also in ClassicEditor i cant seem to get the parameters parsed into the onChange event e.g. <ClassicEditor className=”form-control w-full” value={coursei.questions[index].question} onChange={(e) => handleQuestionChange(index, e.target.value)} /> i this example i cant get the e.taget.value and the index parameter i passed into the function. i know that in other places i used it, i didnt have to do the arrow function thing but in this particular scenario, how can i pass stuff on change and still get them
I am yet to implement the solution you provided but i came across another issue with the ClassicEditor, if i use it in a loop to display data collected from a fellow ClassicEditor, all the ClassicEditors in that loop shows the same value and of which all the time its the value of the last item in the loop that all of them displays, can you please help?
also for the TomSelect solution you provided, it works well when its for single select, how about when its a multiple select?
Hi there,
Thank you for your reply,
For multiple select, you can easily enable multiple selection by using an array for the state, like this.
const [selectMultiple, setSelectMultiple] = useState(["1", "3"]);
Also, make sure to set the multiple property of TomSelect to enable the multiple select functionality.
<TomSelect
value={selectMultiple}
onChange={setSelectMultiple}
options={{
placeholder: "Select your favorite actors",
}}
className="w-full"
multiple
>
<option value="1">Leonardo DiCaprio</option>
<option value="2">Johnny Deep</option>
<option value="3">Robert Downey, Jr</option>
<option value="4">Samuel L. Jackson</option>
<option value="5">Morgan Freeman</option>
</TomSelect>
Since `ClassicEditor` is a custom component and not a standard HTML element, you can easily retrieve the value from the editor using the following approach.
<ClassicEditor
value={editorData}
onChange={(e) => {
console.log(e);
}}
/>
Here’s an example of using the ClassicEditor component in a loop based on a state array:
import { useState } from "react";
import { ClassicEditor } from "../../base-components/Ckeditor";
interface TextAreaItem {
id: string;
value: string;
}
function Main() {
const [textAreas, setTextAreas] = useState<TextAreaItem[]>([
{ id: "1", value: "a" },
{ id: "2", value: "b" },
{ id: "3", value: "c" },
]);
const handleTextAreaChange = (id: string, value: string) => {
setTextAreas((prevTextAreas) =>
prevTextAreas.map((item) => (item.id === id ? { ...item, value } : item))
);
};
return (
<>
<div>
{JSON.stringify(textAreas)}
{textAreas.map((item) => (
<ClassicEditor
key={item.id}
value={item.value}
onChange={(e) => handleTextAreaChange(item.id, e)}
/>
))}
</div>
</>
);
}
export default Main;
If you have any more questions, feel free to ask. I’m here to help!
It didnt still solve the issue, see the google doc with images showing the problem i am facing wit the ckEditor https://docs.google.com/document/d/124Vx6EAECYlLzsqCqkxH2x9pMGHVdJJXPLb4AHCkHf8/edit?usp=sharing
Hi,
Thank you for reaching out and sharing the Google Doc with images showcasing the issue you’re experiencing with the CKEditor.
We understand that you’re still encountering difficulties despite our previous testing. We apologize for any inconvenience caused. In order to assist you more effectively, could you please provide us with a step-by-step guide to reproduce the issue you’re facing? This will allow us to understand the problem more thoroughly and work towards finding a solution.
Your cooperation and detailed explanation will greatly help us in diagnosing and resolving the issue. We are committed to ensuring your satisfaction and providing you with a functional CKEditor.
Please let us know the specific steps you take and any relevant information regarding the issue. We will carefully review the details you provide and strive to find a prompt resolution.
If you have any further questions or need additional assistance, please don’t hesitate to ask. We’re here to support you.
Thank you for your patience and understanding.
Best regards, Left4code Team
Hi,
Can you please let me know that is this template supports javascript? as i only see typescript when i downloaded. I need jsx files if you can provide me.
Thanks,
Hello,
Thank you for your inquiry. We apologize for any confusion caused. While the template primarily uses TypeScript, we can provide you with the JavaScript version as per your request.
Please provide us with your email address in the comments below or send a request to our email address at leftforcode@gmail.com, and we will send you the JavaScript version promptly.
If you have any further questions or need additional assistance, please don’t hesitate to let us know.
Thank you, Left4code
I have sent an email to the mentioned email id. Please send me the javascript version asap.
Hi Team, Please send me Js version of the template to my email id. I have already sent an email to leftforcode@gmail.com .
Hello,
Thank you for your request. We apologize for the inconvenience caused by the delay in our response. We appreciate your patience.
We have received your email requesting the JS version of the template. We are pleased to inform you that the file has been sent to your email.
If you have any further questions or need additional assistance, please feel free to reach out to us. We are here to help.
Thank you for choosing our services.
Best regards, Left4code
hello, I have purchased the item based on the fact that the XD design file is included in the files, however, I found that the xd file is very outdated and does not have almost all essential elements available currently in the coded dashboard.
Can you please asset and provide access to the latest XD design file?
Hello,
Thank you for reaching out to us. We’re sorry for any inconvenience caused by the outdated XD design file. We understand that you were expecting the latest version to be included, and we apologize for any confusion.
Regarding the XD design file, we’d like to clarify that it was the most recent version available at the time of your purchase. However, please keep in mind that the XD design file is provided as a bonus and may not include all the elements and updates found in the coded dashboard.
We appreciate your understanding in this matter. If you have any specific design-related questions or need assistance with any other aspect of the template, please feel free to let us know. We’re here to help.
Thank you for your understanding.
Best regards, Left4code Team
Hello, I’m a buyer who purchased your template, and I am a Korean developer 
I’m writing to ask for your help because I have a question about your template.
First of all, thank you for your support. Your template is really helpful in our development. Also, due to your template, our development period has been shortened a lot.
What I want to ask is about “base-component”. I do not modify the contents of the base-component at all. This is because it is the perfect component for the template you or your company specified. However, even though there is no history of package version changes, the build may fail intermittently as shown below.
I’m sure this is a library dependency issue, but it’s true that it takes a lot of time to analyze the exact cause. And, I’m new to TS, and may not be good enough to proceed with some debugging.
──────────────────────────────────────────────────── Q. Could you please analyze the issue below? Q. When the issue below occurs, if there is a way to analyze the problem most efficiently, could you share it? ────────────────────────────────────────────────────
I am attaching the build error below, so please check it.
──────────────────────────────────────────────────── - PATH ./src/base-components/Headless/Tab/index.tsx - Build Log & Error Msg $ npm run build
> myproject-react@1.0.1 build > tsc && vite build
src/base-components/Headless/Tab/index.tsx:31:10 – error TS2322: Type ‘{ children: Element; style?: any; color?: any; id?: any; lang?: any; ‘aria-activedescendant’?: any; ‘aria-atomic’?: any; ‘aria-autocomplete’?: any; ‘aria-busy’?: any; ‘aria-checked’?: any; ‘aria-colcount’?: any; ... 207 more …; className: string; }’ is not assignable to type ‘DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>’. Type ‘{ children: Element; style?: any; color?: any; id?: any; lang?: any; ‘aria-activedescendant’?: any; ‘aria-atomic’?: any; ‘aria-autocomplete’?: any; ‘aria-busy’?: any; ‘aria-checked’?: any; ‘aria-colcount’?: any; ... 207 more …; className: string; }’ is not assignable to type ‘ClassAttributes<HTMLLIElement>’. Types of property ‘ref’ are incompatible. Type ‘Ref<HTMLElement> | undefined’ is not assignable to type ‘LegacyRef<HTMLLIElement> | undefined’. Type ‘RefObject<HTMLElement>’ is not assignable to type ‘LegacyRef<HTMLLIElement> | undefined’. Type ‘RefObject<HTMLElement>’ is not assignable to type ‘RefObject<HTMLLIElement>’. Type ‘HTMLElement’ is missing the following properties from type ‘HTMLLIElement’: type, value
31
li ~~
Found 1 error in src/base-components/Headless/Tab/index.tsx:31 ────────────────────────────────────────────────────
Hello,
Thank you for reaching out, and we appreciate your support as a buyer of our template. We’re delighted to hear that our template has been valuable in your development process and has helped to shorten your project timeline.
In regards to your question about the “base-component,” we recently made an update to address a typing issue that occurred due to a recent update in HeadlessUI. We have released an update to resolve this issue, ensuring that you can continue using the latest version of HeadlessUI. To apply the latest update, please update or add the following files:
- ”/src/base-components/Headless”
- ”/package.json”
Rest assured, our team is dedicated to assisting you in resolving this issue as quickly as possible. We value your patience and cooperation. If you have any further questions or concerns, please don’t hesitate to let us know. We’re here to provide the support you need.
Best regards, Left4code Team
