adrianhajdin · October 12, 2024 17:25 · mdanassaif · Feb 23, 2023 · shanghanrun · Mar 1, 2023
diff --git a/App.css b/App.css
 @import url('https://cdn.syncfusion.com/ej2/material.css');

 .sidebar {
  box-shadow: rgb(113 122 131 / 11%) 0px 7px 30px 0px;
 }
 .nav-item,
 .navbar {
  z-index: 10000;
 }
 @media  screen and (max-width:800px) {
  .sidebar{
    z-index: 10000000;
  }
 }

 .e-dlg-center-center, .e-quick-popup-wrapper.e-device{
  z-index: 1000000 !important;
 }

 ::-webkit-scrollbar {
  width: 6px;
 }
 ::-webkit-scrollbar-thumb {
  background-color: rgb(216, 216, 216);
  border-radius: 40px;
 }
 ::-webkit-scrollbar-track {
  background-color: transparent;
 }

 /* color-picker style  */

 #preview {
  background: transparent
    url('https://ej2.syncfusion.com/react/demos/src/color-picker/images/pen.png')
    no-repeat;
  display: inline-block;
  height: 80px;
  margin: 10px 0;
  min-width: 300px;
  max-width: 600px;
  background-color: #008000;
 }

 .e-input-group:not(.e-float-icon-left), .e-input-group.e-success:not(.e-float-icon-left), .e-input-group.e-warning:not(.e-float-icon-left), .e-input-group.e-error:not(.e-float-icon-left), .e-input-group.e-control-wrapper:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){
  border: none;
 }
diff --git a/craco.config.js b/craco.config.js
 // craco.config.js
 module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  };
diff --git a/index.css b/index.css
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

 body {
    margin: 0;
    padding:0;
    font-family: "Open Sans", sans-serif;
 }

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/index.jsx (components) b/index.jsx (components)
 export { default as Button } from './Button';
 export { default as ThemeSettings } from './ThemeSettings';
 export { default as Sidebar } from './Sidebar';
 export { default as Navbar } from './Navbar';
 export { default as Footer } from './Footer';
 export { default as Cart } from './Cart';
 export { default as Chat } from './Chat';
 export { default as Notification } from './Notification';
 export { default as UserProfile } from './UserProfile';
 export { default as SparkLine } from './Charts/SparkLine';
 export { default as LineChart } from './Charts/LineChart';
 export { default as Stacked } from './Charts/Stacked';
 export { default as Pie } from './Charts/Pie';
 export { default as ChartsHeader } from './ChartsHeader';
 export { default as Header } from './Header';

diff --git a/index.jsx (pages) b/index.jsx (pages)
 export { default as Ecommerce } from './Ecommerce';
 export { default as Kanban } from './Kanban';
 export { default as Orders } from './Orders';
 export { default as Employees } from './Employees';
 export { default as Editor } from './Editor';
 export { default as Customers } from './Customers';
 export { default as ColorPicker } from './ColorPicker';
 export { default as Calendar } from './Calendar';
 export { default as Area } from './Charts/Area';
 export { default as Bar } from './Charts/Bar';
 export { default as ColorMapping } from './Charts/ColorMapping';
 export { default as Financial } from './Charts/Financial';
 export { default as Line } from './Charts/Line';
 export { default as Pie } from './Charts/Pie';
 export { default as Pyramid } from './Charts/Pyramid';
 export { default as Stacked } from './Charts/Stacked';

diff --git a/package.json b/package.json
 {
  "name": "project_syncfusion_dashboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@syncfusion/ej2": "^19.4.48",
    "@syncfusion/ej2-react-calendars": "^19.4.48",
    "@syncfusion/ej2-react-charts": "^19.4.50",
    "@syncfusion/ej2-react-dropdowns": "^19.4.52",
    "@syncfusion/ej2-react-grids": "^19.4.50",
    "@syncfusion/ej2-react-inputs": "^19.4.52",
    "@syncfusion/ej2-react-kanban": "^19.4.48",
    "@syncfusion/ej2-react-popups": "^19.4.52",
    "@syncfusion/ej2-react-richtexteditor": "^19.4.50",
    "@syncfusion/ej2-react-schedule": "^19.4.50",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.6",
    "tailwindcss": "^3.0.19"
  }
 }
diff --git a/SparkLine.jsx b/SparkLine.jsx
 import React from 'react';
 import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';

 class SparkLine extends React.PureComponent {
  render() {
    const { id, height, width, color, data, type, currentColor } = this.props;

    return (
      <SparklineComponent
        id={id}
        height={height}
        width={width}
        lineWidth={1}
        valueType="Numeric"
        fill={color}
        border={{ color: currentColor, width: 2 }}
        tooltipSettings={{
          visible: true,
          // eslint-disable-next-line no-template-curly-in-string
          format: '${x} : data ${yval}',
          trackLineSettings: {
            visible: true,
          },
        }}
        markerSettings={{ visible: ['All'], size: 2.5, fill: currentColor }}
        dataSource={data}
        xName="x"
        yName="yval"
        type={type}
      >
        <Inject services={[SparklineTooltip]} />
      </SparklineComponent>
    );
  }
 }

 export default SparkLine;
diff --git a/tailwind.config.js b/tailwind.config.js
 module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: 'class',
  theme: {
    fontFamily: {
      display: ['Open Sans', 'sans-serif'],
      body: ['Open Sans', 'sans-serif'],
    },
    extend: {
      fontSize: {
        14: '14px',
      },
      backgroundColor: {
        'main-bg': '#FAFBFB',
        'main-dark-bg': '#20232A',
        'secondary-dark-bg': '#33373E',
        'light-gray': '#F7F7F7',
        'half-transparent': 'rgba(0, 0, 0, 0.5)',
      },
      borderWidth: {
        1: '1px',
      },
      borderColor: {
        color: 'rgba(0, 0, 0, 0.1)',
      },
      width: {
        400: '400px',
        760: '760px',
        780: '780px',
        800: '800px',
        1000: '1000px',
        1200: '1200px',
        1400: '1400px',
      },
      height: {
        80: '80px',
      },
      minHeight: {
        590: '590px',
      },
      backgroundImage: {
        'hero-pattern':
          "url('https://demos.wrappixel.com/premium-admin-templates/react/flexy-react/main/static/media/welcome-bg-2x-svg.25338f53.svg')",
      },
    },
  },
  plugins: [],
 };
	@import url('https://cdn.syncfusion.com/ej2/material.css');

	.sidebar {
	box-shadow: rgb(113 122 131 / 11%) 0px 7px 30px 0px;
	}
	.nav-item,
	.navbar {
	z-index: 10000;
	}
	@media screen and (max-width:800px) {
	.sidebar{
	z-index: 10000000;
	}
	}

	.e-dlg-center-center, .e-quick-popup-wrapper.e-device{
	z-index: 1000000 !important;
	}

	::-webkit-scrollbar {
	width: 6px;
	}
	::-webkit-scrollbar-thumb {
	background-color: rgb(216, 216, 216);
	border-radius: 40px;
	}
	::-webkit-scrollbar-track {
	background-color: transparent;
	}

	/* color-picker style */

	#preview {
	background: transparent
	url('https://ej2.syncfusion.com/react/demos/src/color-picker/images/pen.png')
	no-repeat;
	display: inline-block;
	height: 80px;
	margin: 10px 0;
	min-width: 300px;
	max-width: 600px;
	background-color: #008000;
	}

	.e-input-group:not(.e-float-icon-left), .e-input-group.e-success:not(.e-float-icon-left), .e-input-group.e-warning:not(.e-float-icon-left), .e-input-group.e-error:not(.e-float-icon-left), .e-input-group.e-control-wrapper:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){
	border: none;
	}
	// craco.config.js
	module.exports = {
	style: {
	postcss: {
	plugins: [
	require('tailwindcss'),
	require('autoprefixer'),
	],
	},
	},
	};
	@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

	body {
	margin: 0;
	padding:0;
	font-family: "Open Sans", sans-serif;
	}

	@tailwind base;
	@tailwind components;
	@tailwind utilities;
	export { default as Button } from './Button';
	export { default as ThemeSettings } from './ThemeSettings';
	export { default as Sidebar } from './Sidebar';
	export { default as Navbar } from './Navbar';
	export { default as Footer } from './Footer';
	export { default as Cart } from './Cart';
	export { default as Chat } from './Chat';
	export { default as Notification } from './Notification';
	export { default as UserProfile } from './UserProfile';
	export { default as SparkLine } from './Charts/SparkLine';
	export { default as LineChart } from './Charts/LineChart';
	export { default as Stacked } from './Charts/Stacked';
	export { default as Pie } from './Charts/Pie';
	export { default as ChartsHeader } from './ChartsHeader';
	export { default as Header } from './Header';
	export { default as Ecommerce } from './Ecommerce';
	export { default as Kanban } from './Kanban';
	export { default as Orders } from './Orders';
	export { default as Employees } from './Employees';
	export { default as Editor } from './Editor';
	export { default as Customers } from './Customers';
	export { default as ColorPicker } from './ColorPicker';
	export { default as Calendar } from './Calendar';
	export { default as Area } from './Charts/Area';
	export { default as Bar } from './Charts/Bar';
	export { default as ColorMapping } from './Charts/ColorMapping';
	export { default as Financial } from './Charts/Financial';
	export { default as Line } from './Charts/Line';
	export { default as Pie } from './Charts/Pie';
	export { default as Pyramid } from './Charts/Pyramid';
	export { default as Stacked } from './Charts/Stacked';
	{
	"name": "project_syncfusion_dashboard",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
	"@syncfusion/ej2": "^19.4.48",
	"@syncfusion/ej2-react-calendars": "^19.4.48",
	"@syncfusion/ej2-react-charts": "^19.4.50",
	"@syncfusion/ej2-react-dropdowns": "^19.4.52",
	"@syncfusion/ej2-react-grids": "^19.4.50",
	"@syncfusion/ej2-react-inputs": "^19.4.52",
	"@syncfusion/ej2-react-kanban": "^19.4.48",
	"@syncfusion/ej2-react-popups": "^19.4.52",
	"@syncfusion/ej2-react-richtexteditor": "^19.4.50",
	"@syncfusion/ej2-react-schedule": "^19.4.50",
	"react": "^17.0.2",
	"react-dom": "^17.0.2",
	"react-icons": "^4.3.1",
	"react-router-dom": "^6.2.1",
	"react-scripts": "5.0.0"
	},
	"scripts": {
	"start": "react-scripts start",
	"build": "react-scripts build",
	"test": "react-scripts test",
	"eject": "react-scripts eject"
	},
	"browserslist": {
	"production": [
	">0.2%",
	"not dead",
	"not op_mini all"
	],
	"development": [
	"last 1 chrome version",
	"last 1 firefox version",
	"last 1 safari version"
	]
	},
	"devDependencies": {
	"autoprefixer": "^10.4.2",
	"postcss": "^8.4.6",
	"tailwindcss": "^3.0.19"
	}
	}
	import React from 'react';
	import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';

	class SparkLine extends React.PureComponent {
	render() {
	const { id, height, width, color, data, type, currentColor } = this.props;

	return (
	<SparklineComponent
	id={id}
	height={height}
	width={width}
	lineWidth={1}
	valueType="Numeric"
	fill={color}
	border={{ color: currentColor, width: 2 }}
	tooltipSettings={{
	visible: true,
	// eslint-disable-next-line no-template-curly-in-string
	format: '${x} : data ${yval}',
	trackLineSettings: {
	visible: true,
	},
	}}
	markerSettings={{ visible: ['All'], size: 2.5, fill: currentColor }}
	dataSource={data}
	xName="x"
	yName="yval"
	type={type}
	>
	<Inject services={[SparklineTooltip]} />
	</SparklineComponent>
	);
	}
	}

	export default SparkLine;
	module.exports = {
	content: ['./src/*/.{js,jsx,ts,tsx}'],
	darkMode: 'class',
	theme: {
	fontFamily: {
	display: ['Open Sans', 'sans-serif'],
	body: ['Open Sans', 'sans-serif'],
	},
	extend: {
	fontSize: {
	14: '14px',
	},
	backgroundColor: {
	'main-bg': '#FAFBFB',
	'main-dark-bg': '#20232A',
	'secondary-dark-bg': '#33373E',
	'light-gray': '#F7F7F7',
	'half-transparent': 'rgba(0, 0, 0, 0.5)',
	},
	borderWidth: {
	1: '1px',
	},
	borderColor: {
	color: 'rgba(0, 0, 0, 0.1)',
	},
	width: {
	400: '400px',
	760: '760px',
	780: '780px',
	800: '800px',
	1000: '1000px',
	1200: '1200px',
	1400: '1400px',
	},
	height: {
	80: '80px',
	},
	minHeight: {
	590: '590px',
	},
	backgroundImage: {
	'hero-pattern':
	"url('https://demos.wrappixel.com/premium-admin-templates/react/flexy-react/main/static/media/welcome-bg-2x-svg.25338f53.svg')",
	},
	},
	},
	plugins: [],
	};