adrianhajdin / project_syncfusion_dashboard

This is a code repository for the corresponding YouTube video. In this tutorial we are going to build and deploy a an admin dashboard app using React.js and Syncfusion

Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More

🌟 Become a top 1% Next.js 13 developer in only one course

🚀 Land your dream programming job in 6 months

Introduction

This is a code repository for the corresponding video tutorial.

If you want to get a finished, highly customizable Material UI version of a similar dashboard, check out Flexy React Material Dashboard.

Launch your development career with project-based coaching - https://www.jsmastery.pro

project_syncfusion_dashboard's Issues

Seup Issues

I'm having setup problems.

Kindly advice.

Thank you.

Tailwind BackgroundImage

The backgroundImage defined in the tailwind.configs.js is rendering a plain white image. This is the background rendered with the 'bg-hero-pattern' className. Should be the colorful lady at a desk image that is shown in the tutorial.

backgroundImage: {
'hero-pattern':
"url('https://i.ibb.co/MkvLDfb/Rectangle-4389.png')",
},

Al cerrar las notificaciones, user profile, cart, chat obtengo una pantalla vacia

Problems with syncfusion

I have followed the steps in the video tutorial in this project to install syncfusion.

Now I have tried to implement the TooltipComponent and it gives me the following error:

"This application was built using a trial version of Syncfusion Essential Studio. Please include a valid license to permanently remove this license validation message. You can also obtain a free 30 day evaluation license to temporarily remove this message during the evaluation period. Please refer to this help topic for more information."

I've searched for the solution but I can't figure it out. I didn't know that syncfusion was paid. Will I have an alternative to use it for free?

Its giving the below error when starting the application

No Settings Pop-up

TooltipComponent is not working for me:{

Any help, please.

many components are listed as not defined..

export 'MultiSelect' (imported as 'MultiSelect') was not found in '@syncfusion/ej2-dropdowns'

export 'DropDownList' (imported as 'DropDownList') was not found in '@syncfusion/ej2-dropdowns' (module has no exports)

'TimePicker' (imported as 'TimePicker') was not found in '@syncfusion/ej2-calendars' (module has no exports)

etc...

I simply downloaded and installed it with peer deps.

Financial chart doesn't work

It's the Financial Component here, I can't see the hilo line on the chart.
Is anyone can help please?

import {
	ChartComponent,
	SeriesCollectionDirective,
	SeriesDirective,
	HiloSeries,
	Tooltip,
	DateTime,
	Zoom,
	Logarithmic,
	Crosshair,
	Inject,
} from "@syncfusion/ej2-react-charts";
import {
	financialChartData,
	FinancialPrimaryXAxis,
	FinancialPrimaryYAxis,
} from "../../data/dummy";
import { useStateContext } from "../../contexts/ContextProvider";
import { ChartsHeader } from "../../components";

const date1 = new Date("2017, 1, 1");

function filterValue(value) {
	if (value.x >= date1) {
		return value.x, value.high, value.low;
	}
}
const returnValue = financialChartData.filter(filterValue);

const Financial = () => {
	const { currentMode } = useStateContext();
	return (
		<div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl">
			<ChartsHeader category="Financial" title="AAPL Historical" />
			<div className="w-full">
				<ChartComponent
					id="charts"
					crosshair={{ enable: true, lineType: "Vertical", line: { width: 0 } }}
					primaryXAxis={FinancialPrimaryXAxis}
					primaryYAxis={FinancialPrimaryYAxis}
					chartArea={{ border: { width: 0 } }}
					background={currentMode === "Dark" ? "#33373E" : "#fff"}
					style={{ textAlign: "center" }}
					tooltip={{ enable: true, shared: true }}
				>
					<Inject
						services={[
							HiloSeries,
							Tooltip,
							DateTime,
							Zoom,
							Logarithmic,
							Crosshair,
						]}
					/>
					<SeriesCollectionDirective>
						<SeriesDirective
							datasource={returnValue}
							type="Hilo"
							xName="x"
							low="low"
							high="high"
							name="Apple Inc"
							yName="low"
						/>
					</SeriesCollectionDirective>
				</ChartComponent>
			</div>
		</div>
	);
};

export default Financial;

The Cart cannot be viewed completely when the screen is at 100% and the cart is also not scrollable so the place order button cannot be viewed when the screen is at 100% which is the default screen size.

Lost styles

Hey there!
Looks like some styles code is missing for count of unreaded messages - https://prnt.sc/B1L-hCFJB0AK
I think it can be fixed in tailwind.config.js

_redirect for netlify

When reloading on netlify it shows Page not found. This can be solved using redirects file in the public folder

Syntax error

^

SyntaxError: Unexpected token '<'

Sparkline Component doesn't work

I dont have the Sparkline line on the Ecommerce view, anyone knows why?

GoPrimitiveDot Component doesn't work

I've imported the GoPrimitiveDot component from react-icons/go to use it as the tutorial said, but it seems it doesn't exist in the previous folder. I guess there's a problem in depandecies version or something like that.

Mode changes are lost during refresh

In the ContextProvider.js file, the colorMode and the themeMode are stored in the localStorage. However, if the user reloads the site those changes are lost due to the hardcoded default settings.

Not Working in next

https://github.com/TheSwordBreaker/cool-react-dashboard

grid component scroll issue

When I scroll the screen the grid on the page does not go under the sidebar, rather slides on top of the sidebar. please have a look in the screenshot.

Sparkline Component

I used **Last Version SparkLine code ** and i faced this issue :
Cannot read properties of undefined (reading 'x')
Anyone Helps me !!
check the image :
(https://user-images.githubusercontent.com/68381041/202911170-375f387b-3d7b-4adf-a9e6-fc64fb4729da.png)

Settings Icon Creating Issue

The settings icon which was included at the start of the video is not appearing in the bottom right corner of the screen instead it's appearing in the top left corner of the screen.

I've used the exact code as shown in the video and as given in the GitHub repository. Kindly look at my code and suggest to me how I can sort this issue.

i Dont have banner

this banner dont work for me no idea why

I try also downloand your files and just paste to my project and dont work also no idea why

Building issue (npm run build -> Failed to compile.)

Appreciate the works so beautiful.

I just pulled the project without any changes ( I only did "npm install" after pull), unfortunatelly I cannot "npm run build" this project.

First error:

I tried to fix it by executing the instruction of the error.

Then I just get the error without any description or details why it 'failed to compile.'..

How to fix this ^?

No banner

At 1:42, I am not getting that banner! Where should I import that?

Tailwind not working

I've tried multiple of things to make it work, but seems like tailwind isn't connecting to my project. Any fixes ?

cart component close button not visible