├── public
└── _redirects
├── .gitignore
├── src
├── images
│ ├── favicon.png
│ ├── screenshot.png
│ ├── screenshot2.png
│ ├── screenshot3.png
│ ├── screenshot4.png
│ ├── screenshot5.png
│ ├── user-36-01.jpg
│ ├── user-36-02.jpg
│ ├── user-36-03.jpg
│ ├── user-36-04.jpg
│ ├── user-36-05.jpg
│ ├── user-36-06.jpg
│ ├── user-36-07.jpg
│ ├── user-36-08.jpg
│ ├── user-36-09.jpg
│ ├── user-avatar-32.png
│ ├── icon-01.svg
│ ├── icon-02.svg
│ └── icon-03.svg
├── css
│ ├── style.css
│ ├── tailwind.config.js
│ └── additional-styles
│ │ ├── utility-patterns.css
│ │ └── flatpickr.css
├── main.jsx
├── partials
│ ├── SidebarLinkGroup.jsx
│ ├── Banner.jsx
│ ├── dashboard
│ │ ├── DashboardCard04.jsx
│ │ ├── DashboardCard06.jsx
│ │ ├── DashboardAvatars.jsx
│ │ ├── DashboardCard09.jsx
│ │ ├── DashboardCard11.jsx
│ │ ├── DashboardCard08.jsx
│ │ ├── WelcomeBanner.jsx
│ │ ├── DashboardCard05.jsx
│ │ ├── DashboardCard10.jsx
│ │ ├── DashboardCard01.jsx
│ │ ├── DashboardCard02.jsx
│ │ ├── DashboardCard03.jsx
│ │ ├── DashboardCard13.jsx
│ │ ├── DashboardCard07.jsx
│ │ └── DashboardCard12.jsx
│ └── Header.jsx
├── App.jsx
├── utils
│ ├── Utils.js
│ ├── ThemeContext.jsx
│ ├── Info.jsx
│ └── Transition.jsx
├── favicon.svg
├── components
│ ├── Datepicker.jsx
│ ├── ThemeToggle.jsx
│ ├── DropdownEditMenu.jsx
│ ├── Tooltip.jsx
│ ├── DropdownProfile.jsx
│ ├── DateSelect.jsx
│ ├── DropdownHelp.jsx
│ ├── DropdownNotifications.jsx
│ ├── DropdownFilter.jsx
│ └── ModalSearch.jsx
├── charts
│ ├── ChartjsConfig.jsx
│ ├── LineChart01.jsx
│ ├── BarChart02.jsx
│ ├── DoughnutChart.jsx
│ ├── BarChart03.jsx
│ ├── RealtimeChart.jsx
│ ├── LineChart02.jsx
│ └── BarChart01.jsx
└── pages
│ └── Dashboard.jsx
├── postcss.config.cjs
├── vite.config.js
├── package.json
├── index.html
├── CHANGELOG.md
└── README.md
/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
--------------------------------------------------------------------------------
/src/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/favicon.png
--------------------------------------------------------------------------------
/src/images/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/screenshot.png
--------------------------------------------------------------------------------
/src/images/screenshot2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/screenshot2.png
--------------------------------------------------------------------------------
/src/images/screenshot3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/screenshot3.png
--------------------------------------------------------------------------------
/src/images/screenshot4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/screenshot4.png
--------------------------------------------------------------------------------
/src/images/screenshot5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/screenshot5.png
--------------------------------------------------------------------------------
/src/images/user-36-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/user-36-01.jpg
--------------------------------------------------------------------------------
/src/images/user-36-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/user-36-02.jpg
--------------------------------------------------------------------------------
/src/images/user-36-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/user-36-03.jpg
--------------------------------------------------------------------------------
/src/images/user-36-04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/user-36-04.jpg
--------------------------------------------------------------------------------
/src/images/user-36-05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/user-36-05.jpg
--------------------------------------------------------------------------------
/src/images/user-36-06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/user-36-06.jpg
--------------------------------------------------------------------------------
/src/images/user-36-07.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/user-36-07.jpg
--------------------------------------------------------------------------------
/src/images/user-36-08.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/user-36-08.jpg
--------------------------------------------------------------------------------
/src/images/user-36-09.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/user-36-09.jpg
--------------------------------------------------------------------------------
/src/images/user-avatar-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Daniel-16/market-hub/HEAD/src/images/user-avatar-32.png
--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = ({ env }) => ({
2 | plugins: [
3 | require('tailwindcss')({
4 | config: './src/css/tailwind.config.js'
5 | }),
6 | require('autoprefixer')()
7 | ],
8 | })
--------------------------------------------------------------------------------
/src/css/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');
2 |
3 | @import 'tailwindcss/base';
4 | @import 'tailwindcss/components';
5 |
6 | /* Additional styles */
7 | @import 'additional-styles/utility-patterns.css';
8 | @import 'additional-styles/flatpickr.css';
9 |
10 | @import 'tailwindcss/utilities';
11 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import { BrowserRouter as Router } from 'react-router-dom';
4 | import ThemeProvider from './utils/ThemeContext';
5 | import App from './App';
6 |
7 | ReactDOM.createRoot(document.getElementById('root')).render(
8 |
9 |
10 |
11 |
13 |
14 |
15 | );
16 |
--------------------------------------------------------------------------------
/src/partials/SidebarLinkGroup.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | function SidebarLinkGroup({
4 | children,
5 | activecondition,
6 | }) {
7 |
8 | const [open, setOpen] = useState(activecondition);
9 |
10 | const handleClick = () => {
11 | setOpen(!open);
12 | }
13 |
14 | return (
15 |
16 | {children(handleClick, open)}
17 |
18 | );
19 | }
20 |
21 | export default SidebarLinkGroup;
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import postcss from './postcss.config.cjs'
3 | import react from '@vitejs/plugin-react'
4 |
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | define: {
8 | 'process.env': process.env
9 | },
10 | css: {
11 | postcss,
12 | },
13 | plugins: [react()],
14 | resolve: {
15 | alias: [
16 | {
17 | find: /^~.+/,
18 | replacement: (val) => {
19 | return val.replace(/^~/, "");
20 | },
21 | },
22 | ],
23 | },
24 | build: {
25 | commonjsOptions: {
26 | transformMixedEsModules: true,
27 | }
28 | }
29 | })
30 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import {
3 | Routes,
4 | Route,
5 | useLocation
6 | } from 'react-router-dom';
7 |
8 | import './css/style.css';
9 |
10 | import './charts/ChartjsConfig';
11 |
12 | // Import pages
13 | import Dashboard from './pages/Dashboard';
14 |
15 | function App() {
16 |
17 | const location = useLocation();
18 |
19 | useEffect(() => {
20 | document.querySelector('html').style.scrollBehavior = 'auto'
21 | window.scroll({ top: 0 })
22 | document.querySelector('html').style.scrollBehavior = ''
23 | }, [location.pathname]); // triggered on route change
24 |
25 | return (
26 | <>
27 |
28 |
30 |
31 | );
32 | }
33 |
34 | export default App;
35 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "admin-dashboard",
3 | "version": "0.1.0",
4 | "type": "module",
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "vite build",
8 | "preview": "vite preview"
9 | },
10 | "dependencies": {
11 | "@tailwindcss/forms": "^0.5.7",
12 | "chart.js": "^4.4.1",
13 | "chartjs-adapter-moment": "^1.0.1",
14 | "moment": "^2.29.4",
15 | "react": "^18.2.0",
16 | "react-dom": "^18.2.0",
17 | "react-flatpickr": "^3.10.13",
18 | "react-router-dom": "^6.20.1",
19 | "react-transition-group": "^4.4.5"
20 | },
21 | "devDependencies": {
22 | "@types/react": "^18.2.48",
23 | "@vitejs/plugin-react": "^4.2.1",
24 | "autoprefixer": "^10.4.16",
25 | "postcss": "^8.4.32",
26 | "tailwindcss": "^3.3.6",
27 | "vite": "^5.0.6"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/utils/Utils.js:
--------------------------------------------------------------------------------
1 | import resolveConfig from 'tailwindcss/resolveConfig';
2 |
3 | export const tailwindConfig = () => {
4 | // Tailwind config
5 | return resolveConfig('./src/css/tailwind.config.js')
6 | }
7 |
8 | export const hexToRGB = (h) => {
9 | let r = 0;
10 | let g = 0;
11 | let b = 0;
12 | if (h.length === 4) {
13 | r = `0x${h[1]}${h[1]}`;
14 | g = `0x${h[2]}${h[2]}`;
15 | b = `0x${h[3]}${h[3]}`;
16 | } else if (h.length === 7) {
17 | r = `0x${h[1]}${h[2]}`;
18 | g = `0x${h[3]}${h[4]}`;
19 | b = `0x${h[5]}${h[6]}`;
20 | }
21 | return `${+r},${+g},${+b}`;
22 | };
23 |
24 | export const formatValue = (value) => Intl.NumberFormat('en-US', {
25 | style: 'currency',
26 | currency: 'USD',
27 | maximumSignificantDigits: 3,
28 | notation: 'compact',
29 | }).format(value);
30 |
--------------------------------------------------------------------------------
/src/images/icon-01.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
11 |
13 |
14 |
15 |
17 |
20 |
--------------------------------------------------------------------------------
/src/images/icon-02.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
11 |
13 |
14 |
15 |
17 |
20 |
--------------------------------------------------------------------------------
/src/images/icon-03.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
11 |
13 |
14 |
15 |
17 |
20 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Admin Dashboard
8 |
17 |
18 |
21 | You need to enable JavaScript to run this app.
22 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # CHANGELOG.md
2 |
3 | ## [2.1.0] - 2023-12-08
4 |
5 | - Update Vite to 5
6 | - Update other dependencies
7 |
8 | ## [2.0.1] - 2023-10-04
9 |
10 | - Dependencies update
11 |
12 | ## [2.0.0] - 2023-06-01
13 |
14 | - Dark version added
15 |
16 | ## [1.7.4] - 2023-04-11
17 |
18 | - Update dependencies
19 |
20 | ## [1.7.3] - 2023-02-13
21 |
22 | - Further sidebar color improvements
23 |
24 | ## [1.7.2] - 2023-02-13
25 |
26 | - Update dependencies
27 | - Improve sidebar icons color logic
28 |
29 | ## [1.7.0] - 2022-08-30
30 |
31 | - Update sidebar
32 | - Fix mobile menu issue
33 |
34 | ## [1.6.0] - 2022-07-15
35 |
36 | - Replace Sass with CSS files
37 | - Update dependencies
38 | - Update React to v18
39 |
40 | ## [1.3.1] - 2022-01-27
41 |
42 | - Fix tailwind.config.js file
43 |
44 | ## [1.3.0] - 2022-01-25
45 |
46 | - Replace CRA (Create React App) with Vite
47 | - Remove Craco
48 | - Update dependencies
49 |
50 | ## [1.2.0] - 2021-12-13
51 |
52 | - Update Tailwind 3
53 | - Several improvements
54 |
55 | ## [1.1.1] - 2021-11-23
56 |
57 | - Alignment issue## [1.1.1] - 2021-11-23
58 |
59 | - Alignment issue
60 |
61 | ## [1.1.0] - 2021-11-15
62 |
63 | - Update dependencies
64 | - Enable Tailwind JIT
65 | - Add expandable / collapsible sidebar feature
66 |
67 | ## [1.0.0] - 2021-04-20
68 |
69 | First release
--------------------------------------------------------------------------------
/src/utils/ThemeContext.jsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext, useState, useEffect } from 'react';
2 |
3 | const ThemeContext = createContext({
4 | currentTheme: 'light',
5 | changeCurrentTheme: () => {},
6 | });
7 |
8 | export default function ThemeProvider({children}) {
9 | const persistedTheme = localStorage.getItem('theme');
10 | const [theme, setTheme] = useState(persistedTheme || 'light');
11 |
12 | const changeCurrentTheme = (newTheme) => {
13 | setTheme(newTheme);
14 | localStorage.setItem('theme', newTheme);
15 | };
16 |
17 | useEffect(() => {
18 | document.documentElement.classList.add('[&_*]:!transition-none');
19 | if (theme === 'light') {
20 | document.documentElement.classList.remove('dark');
21 | document.documentElement.style.colorScheme = 'light';
22 | } else {
23 | document.documentElement.classList.add('dark');
24 | document.documentElement.style.colorScheme = 'dark';
25 | }
26 |
27 | const transitionTimeout = setTimeout(() => {
28 | document.documentElement.classList.remove('[&_*]:!transition-none');
29 | }, 1);
30 |
31 | return () => clearTimeout(transitionTimeout);
32 | }, [theme]);
33 |
34 | return {children} ;
35 | }
36 |
37 | export const useThemeProvider = () => useContext(ThemeContext);
--------------------------------------------------------------------------------
/src/favicon.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
9 |
10 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Admin Dashboard
2 |
3 | This is a modern and customizable admin dashboard built with Tailwind CSS and React. It features a clean and intuitive design, making it easy to manage your application's data and settings. This is basically a front end project
4 |
5 | [Project Demo](https://dan-codes-admin-dashboard.vercel.app/)
6 |
7 | 
8 |
9 | 
10 |
11 | 
12 |
13 | 
14 |
15 | 
16 |
17 | ## Features
18 |
19 | - Tailwind CSS for styling
20 | - React for state management and interactivity
21 | - Fully responsive design
22 | - Easy to customize to match your brand
23 | - Modular design for easy maintenance
24 |
25 | ## Getting Started
26 |
27 | 1. Clone the repository:
28 |
29 | ```
30 | git clone https://github.com/Daniel-16/admin-dashboard.git
31 | ```
32 |
33 | 2. Install the dependencies:
34 |
35 | ```
36 | npm install
37 | ```
38 |
39 | 3. Start the development server
40 |
41 | ```
42 | npm run dev
43 | ```
44 |
45 | 4. Open your browser and navigate to http://localhost:5173 to see the dashboard.
46 |
47 | ## Customization
48 |
49 | You can easily customize the dashboard to match your brand by editing the `tailwind.config.js` file. You can also change the colors, fonts, and other styles by editing the `styles.css` file.
50 |
51 | ## Contributing
52 |
53 | Contributions are welcome! Create a new branch for edits and create a pull request.
54 |
55 | ## License
56 |
57 | This project is licensed under the MIT License.
58 |
--------------------------------------------------------------------------------
/src/utils/Info.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import Transition from './Transition';
3 |
4 | function Info({
5 | children,
6 | className,
7 | containerClassName
8 | }) {
9 |
10 | const [infoOpen, setInfoOpen] = useState(false);
11 |
12 | return (
13 | setInfoOpen(true)}
16 | onMouseLeave={() => setInfoOpen(false)}
17 | onFocus={() => setInfoOpen(true)}
18 | onBlur={() => setInfoOpen(false)}
19 | >
20 |
e.preventDefault()}
25 | >
26 |
27 |
29 |
30 |
31 |
42 | {children}
43 |
44 |
45 |
17 |
18 |
19 |
setBannerOpen(false) }>
20 | Close
21 |
22 |
24 |
25 |
26 |
42 |
43 | Direct VS Indirect
44 |
45 | {/* Chart built with Chart.js 3 */}
46 | {/* Change the height attribute to adjust the chart height */}
47 |
49 | );
50 | }
51 |
52 | export default DashboardCard04;
53 |
--------------------------------------------------------------------------------
/src/partials/dashboard/DashboardCard06.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import DoughnutChart from "../../charts/DoughnutChart";
3 |
4 | // Import utilities
5 | import { tailwindConfig } from "../../utils/Utils";
6 |
7 | function DashboardCard06() {
8 | const chartData = {
9 | labels: ["United States", "Italy", "Nigeria", "United Kingdom", "Others"],
10 | datasets: [
11 | {
12 | label: "Top Countries",
13 | data: [30, 15, 25, 20, 10],
14 | backgroundColor: [
15 | tailwindConfig().theme.colors.indigo[500],
16 | tailwindConfig().theme.colors.blue[400],
17 | tailwindConfig().theme.colors.indigo[800],
18 | tailwindConfig().theme.colors.red[800],
19 | tailwindConfig().theme.colors.green[800],
20 | ],
21 | hoverBackgroundColor: [
22 | tailwindConfig().theme.colors.indigo[600],
23 | tailwindConfig().theme.colors.blue[500],
24 | tailwindConfig().theme.colors.indigo[900],
25 | tailwindConfig().theme.colors.red[900],
26 | tailwindConfig().theme.colors.green[900],
27 | ],
28 | borderWidth: 0,
29 | },
30 | ],
31 | };
32 |
33 | return (
34 |
35 |
36 |
37 | Top Countries
38 |
39 |
40 | {/* Chart built with Chart.js 3 */}
41 | {/* Change the height attribute to adjust the chart height */}
42 |
44 | );
45 | }
46 |
47 | export default DashboardCard06;
48 |
--------------------------------------------------------------------------------
/src/partials/dashboard/DashboardAvatars.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import User01 from '../../images/user-36-01.jpg';
4 | import User02 from '../../images/user-36-02.jpg';
5 | import User03 from '../../images/user-36-03.jpg';
6 | import User04 from '../../images/user-36-04.jpg';
7 |
8 | function DashboardAvatars() {
9 | return (
10 |
11 |
12 |
16 |
17 |
21 |
22 |
26 |
27 |
31 |
32 |
33 | Add new user
34 |
35 |
37 |
38 |
39 |
40 | );
41 | }
42 |
43 | export default DashboardAvatars;
44 |
--------------------------------------------------------------------------------
/src/components/ThemeToggle.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useThemeProvider } from '../utils/ThemeContext';
3 |
4 | export default function ThemeToggle() {
5 | const { currentTheme, changeCurrentTheme } = useThemeProvider();
6 |
7 | return (
8 |
9 |
changeCurrentTheme(currentTheme === 'light' ? 'dark' : 'light')}
16 | />
17 |
21 |
22 |
28 |
29 |
38 | Switch to light / dark version
39 |
40 |
43 |
49 |
50 |
51 |
+$6,796
52 |
-34%
53 |
54 |
55 | {/* Chart built with Chart.js 3 */}
56 |
57 | {/* Change the height attribute to adjust the chart height */}
58 |
60 |
38 |
setDropdownOpen(!dropdownOpen)}
47 | aria-expanded={dropdownOpen}
48 | >
49 | Menu
50 |
51 |
55 |
56 |
69 | setDropdownOpen(true)} onBlur={() => setDropdownOpen(false)}>
70 | {children}
71 |
72 |
73 |
57 |
58 | Reason for Refunds
59 |
60 |
66 | {/* Chart built with Chart.js 3 */}
67 |
68 | {/* Change the height attribute to adjust the chart height */}
69 |
71 |
setTooltipOpen(true)}
68 | onMouseLeave={() => setTooltipOpen(false)}
69 | onFocus={() => setTooltipOpen(true)}
70 | onBlur={() => setTooltipOpen(false)}
71 | >
72 |
e.preventDefault()}>
73 |
74 |
76 |
77 |
78 |
89 | {children}
90 |
91 |
92 |
14 |
15 |
16 | {/* Header: Left side */}
17 |
18 | {/* Hamburger button */}
19 | {
24 | e.stopPropagation();
25 | setSidebarOpen(!sidebarOpen);
26 | }}
27 | >
28 | Open sidebar
29 |
30 |
34 |
35 |
36 |
37 | {/* Header: Right side */}
38 |
39 |
40 |
{
45 | e.stopPropagation();
46 | setSearchModalOpen(true);
47 | }}
48 | aria-controls="search-modal"
49 | >
50 | Search
51 |
52 |
61 |
62 |
63 |
64 |
65 |
66 |
67 | {/* Divider */}
68 |
69 |
70 |
71 |
72 |
74 | );
75 | }
76 |
77 | export default Header;
78 |
--------------------------------------------------------------------------------
/src/charts/LineChart01.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect, useState } from 'react';
2 | import { useThemeProvider } from '../utils/ThemeContext';
3 |
4 | import { chartColors } from './ChartjsConfig';
5 | import {
6 | Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
7 | } from 'chart.js';
8 | import 'chartjs-adapter-moment';
9 |
10 | // Import utilities
11 | import { formatValue } from '../utils/Utils';
12 |
13 | Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip);
14 |
15 | function LineChart01({
16 | data,
17 | width,
18 | height
19 | }) {
20 |
21 | const [chart, setChart] = useState(null)
22 | const canvas = useRef(null);
23 | const { currentTheme } = useThemeProvider();
24 | const darkMode = currentTheme === 'dark';
25 | const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor, chartAreaBg } = chartColors;
26 |
27 | useEffect(() => {
28 | const ctx = canvas.current;
29 | // eslint-disable-next-line no-unused-vars
30 | const newChart = new Chart(ctx, {
31 | type: 'line',
32 | data: data,
33 | options: {
34 | chartArea: {
35 | backgroundColor: darkMode ? chartAreaBg.dark : chartAreaBg.light,
36 | },
37 | layout: {
38 | padding: 20,
39 | },
40 | scales: {
41 | y: {
42 | display: false,
43 | beginAtZero: true,
44 | },
45 | x: {
46 | type: 'time',
47 | time: {
48 | parser: 'MM-DD-YYYY',
49 | unit: 'month',
50 | },
51 | display: false,
52 | },
53 | },
54 | plugins: {
55 | tooltip: {
56 | callbacks: {
57 | title: () => false, // Disable tooltip title
58 | label: (context) => formatValue(context.parsed.y),
59 | },
60 | bodyColor: darkMode ? tooltipBodyColor.dark : tooltipBodyColor.light,
61 | backgroundColor: darkMode ? tooltipBgColor.dark : tooltipBgColor.light,
62 | borderColor: darkMode ? tooltipBorderColor.dark : tooltipBorderColor.light,
63 | },
64 | legend: {
65 | display: false,
66 | },
67 | },
68 | interaction: {
69 | intersect: false,
70 | mode: 'nearest',
71 | },
72 | maintainAspectRatio: false,
73 | resizeDelay: 200,
74 | },
75 | });
76 | setChart(newChart);
77 | return () => newChart.destroy();
78 | // eslint-disable-next-line react-hooks/exhaustive-deps
79 | }, []);
80 |
81 | useEffect(() => {
82 | if (!chart) return;
83 |
84 | if (darkMode) {
85 | chart.options.chartArea.backgroundColor = chartAreaBg.dark;
86 | chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.dark;
87 | chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.dark;
88 | chart.options.plugins.tooltip.borderColor = tooltipBorderColor.dark;
89 | } else {
90 | chart.options.chartArea.backgroundColor = chartAreaBg.light;
91 | chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.light;
92 | chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.light;
93 | chart.options.plugins.tooltip.borderColor = tooltipBorderColor.light;
94 | }
95 | chart.update('none');
96 | }, [currentTheme]);
97 |
98 | return (
99 |
92 |
93 | Sales Over Time (all stores)
94 |
95 | {/* Chart built with Chart.js 3 */}
96 | {/* Change the height attribute to adjust the chart height */}
97 |
99 | );
100 | }
101 |
102 | export default DashboardCard08;
103 |
--------------------------------------------------------------------------------
/src/css/additional-styles/utility-patterns.css:
--------------------------------------------------------------------------------
1 | /* Typography */
2 | .h1 {
3 | @apply text-4xl font-extrabold tracking-tighter;
4 | }
5 |
6 | .h2 {
7 | @apply text-3xl font-extrabold tracking-tighter;
8 | }
9 |
10 | .h3 {
11 | @apply text-3xl font-extrabold;
12 | }
13 |
14 | .h4 {
15 | @apply text-2xl font-extrabold tracking-tight;
16 | }
17 |
18 | @screen md {
19 | .h1 {
20 | @apply text-5xl;
21 | }
22 |
23 | .h2 {
24 | @apply text-4xl;
25 | }
26 | }
27 |
28 | /* Buttons */
29 | .btn,
30 | .btn-lg,
31 | .btn-sm,
32 | .btn-xs {
33 | @apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded leading-5 shadow-sm transition duration-150 ease-in-out;
34 | }
35 |
36 | .btn {
37 | @apply px-3 py-2;
38 | }
39 |
40 | .btn-lg {
41 | @apply px-4 py-3;
42 | }
43 |
44 | .btn-sm {
45 | @apply px-2 py-1;
46 | }
47 |
48 | .btn-xs {
49 | @apply px-2 py-0.5;
50 | }
51 |
52 | /* Forms */
53 | input[type="search"]::-webkit-search-decoration,
54 | input[type="search"]::-webkit-search-cancel-button,
55 | input[type="search"]::-webkit-search-results-button,
56 | input[type="search"]::-webkit-search-results-decoration {
57 | -webkit-appearance: none;
58 | }
59 |
60 | .form-input,
61 | .form-textarea,
62 | .form-multiselect,
63 | .form-select,
64 | .form-checkbox,
65 | .form-radio {
66 | @apply bg-white dark:bg-slate-900/30 border focus:ring-0 focus:ring-offset-0 dark:disabled:bg-slate-700/30 dark:disabled:border-slate-700 dark:disabled:hover:border-slate-700;
67 | }
68 |
69 | .form-input,
70 | .form-textarea,
71 | .form-multiselect,
72 | .form-select,
73 | .form-checkbox {
74 | @apply rounded;
75 | }
76 |
77 | .form-input,
78 | .form-textarea,
79 | .form-multiselect,
80 | .form-select {
81 | @apply text-sm text-slate-800 dark:text-slate-100 leading-5 py-2 px-3 border-slate-200 hover:border-slate-300 focus:border-slate-300 dark:border-slate-700 dark:hover:border-slate-600 dark:focus:border-slate-600 shadow-sm;
82 | }
83 |
84 | .form-input,
85 | .form-textarea {
86 | @apply placeholder-slate-400 dark:placeholder-slate-500;
87 | }
88 |
89 | .form-select {
90 | @apply pr-10;
91 | }
92 |
93 | .form-checkbox,
94 | .form-radio {
95 | @apply text-indigo-500 checked:bg-indigo-500 dark:checked:border-transparent border border-slate-300 focus:border-indigo-300 dark:border-slate-700 dark:focus:border-indigo-500/50;
96 | }
97 |
98 | /* Switch element */
99 | .form-switch {
100 | @apply relative select-none;
101 | width: 44px;
102 | }
103 |
104 | .form-switch label {
105 | @apply block overflow-hidden cursor-pointer h-6 rounded-full;
106 | }
107 |
108 | .form-switch label > span:first-child {
109 | @apply absolute block rounded-full;
110 | width: 20px;
111 | height: 20px;
112 | top: 2px;
113 | left: 2px;
114 | right: 50%;
115 | transition: all .15s ease-out;
116 | }
117 |
118 | .form-switch input[type="checkbox"]:checked + label {
119 | @apply bg-indigo-500;
120 | }
121 |
122 | .form-switch input[type="checkbox"]:checked + label > span:first-child {
123 | left: 22px;
124 | }
125 |
126 | .form-switch input[type="checkbox"]:disabled + label {
127 | @apply cursor-not-allowed bg-slate-100 dark:bg-slate-700/20 border border-slate-200 dark:border-slate-700;
128 | }
129 |
130 | .form-switch input[type="checkbox"]:disabled + label > span:first-child {
131 | @apply bg-slate-400 dark:bg-slate-600;
132 | }
133 |
134 | /* Chrome, Safari and Opera */
135 | .no-scrollbar::-webkit-scrollbar {
136 | display: none;
137 | }
138 |
139 | .no-scrollbar {
140 | -ms-overflow-style: none; /* IE and Edge */
141 | scrollbar-width: none; /* Firefox */
142 | }
--------------------------------------------------------------------------------
/src/utils/Transition.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect, useContext } from 'react';
2 | import { CSSTransition as ReactCSSTransition } from 'react-transition-group';
3 |
4 | const TransitionContext = React.createContext({
5 | parent: {},
6 | })
7 |
8 | function useIsInitialRender() {
9 | const isInitialRender = useRef(true);
10 | useEffect(() => {
11 | isInitialRender.current = false;
12 | }, [])
13 | return isInitialRender.current;
14 | }
15 |
16 | function CSSTransition({
17 | show,
18 | enter = '',
19 | enterStart = '',
20 | enterEnd = '',
21 | leave = '',
22 | leaveStart = '',
23 | leaveEnd = '',
24 | appear,
25 | unmountOnExit,
26 | tag = 'div',
27 | children,
28 | ...rest
29 | }) {
30 | const enterClasses = enter.split(' ').filter((s) => s.length);
31 | const enterStartClasses = enterStart.split(' ').filter((s) => s.length);
32 | const enterEndClasses = enterEnd.split(' ').filter((s) => s.length);
33 | const leaveClasses = leave.split(' ').filter((s) => s.length);
34 | const leaveStartClasses = leaveStart.split(' ').filter((s) => s.length);
35 | const leaveEndClasses = leaveEnd.split(' ').filter((s) => s.length);
36 | const removeFromDom = unmountOnExit;
37 |
38 | function addClasses(node, classes) {
39 | classes.length && node.classList.add(...classes);
40 | }
41 |
42 | function removeClasses(node, classes) {
43 | classes.length && node.classList.remove(...classes);
44 | }
45 |
46 | const nodeRef = React.useRef(null);
47 | const Component = tag;
48 |
49 | return (
50 | {
56 | nodeRef.current.addEventListener('transitionend', done, false)
57 | }}
58 | onEnter={() => {
59 | if (!removeFromDom) nodeRef.current.style.display = null;
60 | addClasses(nodeRef.current, [...enterClasses, ...enterStartClasses])
61 | }}
62 | onEntering={() => {
63 | removeClasses(nodeRef.current, enterStartClasses)
64 | addClasses(nodeRef.current, enterEndClasses)
65 | }}
66 | onEntered={() => {
67 | removeClasses(nodeRef.current, [...enterEndClasses, ...enterClasses])
68 | }}
69 | onExit={() => {
70 | addClasses(nodeRef.current, [...leaveClasses, ...leaveStartClasses])
71 | }}
72 | onExiting={() => {
73 | removeClasses(nodeRef.current, leaveStartClasses)
74 | addClasses(nodeRef.current, leaveEndClasses)
75 | }}
76 | onExited={() => {
77 | removeClasses(nodeRef.current, [...leaveEndClasses, ...leaveClasses])
78 | if (!removeFromDom) nodeRef.current.style.display = 'none';
79 | }}
80 | >
81 | {children}
82 |
83 | )
84 | }
85 |
86 | function Transition({ show, appear, ...rest }) {
87 | const { parent } = useContext(TransitionContext);
88 | const isInitialRender = useIsInitialRender();
89 | const isChild = show === undefined;
90 |
91 | if (isChild) {
92 | return (
93 |
111 |
113 | )
114 | }
115 |
116 | export default Transition;
--------------------------------------------------------------------------------
/src/partials/dashboard/WelcomeBanner.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 |
3 | function WelcomeBanner() {
4 | const [greet, setGreet] = useState("");
5 | useEffect(() => {
6 | greetUser();
7 | }, []);
8 |
9 | function greetUser() {
10 | const date = new Date();
11 | const hours = date.getHours();
12 | const minutes = date.getMinutes();
13 | if (hours >= 0 && hours < 12) {
14 | setGreet("Good Morning");
15 | console.log("Morning");
16 | } else if (hours >= 12 && hours <= 16) {
17 | setGreet("Good Afternoon");
18 | console.log("Afternoon");
19 | } else {
20 | setGreet("Good Evening");
21 | console.log("Evening");
22 | }
23 | console.log(hours, minutes);
24 | }
25 | return (
26 |
27 | {/* Background illustration */}
28 |
32 |
33 |
34 |
38 |
41 |
48 |
51 |
52 |
53 |
54 |
55 |
57 |
64 |
65 |
66 |
68 |
75 |
76 |
77 |
79 |
86 |
87 |
88 |
89 |
90 | {/* Content */}
91 |
92 |
93 | {greet}, John Doe. 👋
94 |
95 |
96 | Here is what’s happening with your projects today:
97 |
98 |
99 |
90 |
91 | Real Time Value
92 |
93 |
94 |
95 |
96 | {/* Chart built with Chart.js 3 */}
97 | {/* Change the height attribute to adjust the chart height */}
98 |
99 |
41 |
setDropdownOpen(!dropdownOpen)}
46 | aria-expanded={dropdownOpen}
47 | >
48 |
56 |
57 | Dan-Codes Inc.
58 |
59 |
63 |
65 |
67 |
68 |
80 | setDropdownOpen(true)}
83 | onBlur={() => setDropdownOpen(false)}
84 | >
85 |
86 |
87 | Dan-Codes Inc.
88 |
89 |
90 | Administrator
91 |
92 |
93 |
94 |
95 |
103 |
104 |
112 |
113 |
115 |
56 |
59 |
60 |
61 | {/* Table */}
62 |
63 |
64 | {/* Table header */}
65 |
66 |
67 |
68 | Name
69 |
70 |
71 | Email
72 |
73 |
74 | Spent
75 |
76 |
77 | Country
78 |
79 |
80 |
81 | {/* Table body */}
82 |
83 | {
84 | customers.map(customer => {
85 | return (
86 |
87 |
88 |
89 |
90 |
91 |
92 |
{customer.name}
93 |
95 |
96 | {customer.email}
97 |
98 |
99 | {customer.spent}
100 |
101 |
102 | {customer.location}
103 |
104 |
105 | )
106 | })
107 | }
108 |
109 |
110 |
111 |
112 |
113 |
114 |
58 |
setDropdownOpen(!dropdownOpen)}
64 | aria-expanded={dropdownOpen}
65 | >
66 |
67 |
68 |
70 | {options[selected].period}
71 |
72 |
73 |
75 |
76 |
87 | setDropdownOpen(true)}
91 | onBlur={() => setDropdownOpen(false)}
92 | >
93 | {
94 | options.map(option => {
95 | return (
96 |
{ setSelected(option.id); setDropdownOpen(false); }}
101 | >
102 |
103 |
105 | {option.period}
106 |
107 | )
108 | })
109 | }
110 |
112 |
28 | {/* Sidebar */}
29 |
30 |
31 | {/* Content area */}
32 |
33 | {/* Site header */}
34 |
35 |
36 |
37 |
38 | {/* Welcome banner */}
39 |
40 |
41 | {/* Dashboard actions */}
42 |
43 | {/* Left: Avatars */}
44 |
45 |
46 | {/* Right: Actions */}
47 |
48 | {/* Filter button */}
49 |
50 | {/* Datepicker built with flatpickr */}
51 |
52 | {/* Add view button */}
53 |
54 |
58 |
60 | Add view
61 |
62 |
63 |
64 |
65 | {/* Cards */}
66 |
67 |
93 |
95 |
96 |
37 |
setDropdownOpen(!dropdownOpen)}
42 | aria-expanded={dropdownOpen}
43 | >
44 | Need help?
45 |
46 |
48 |
49 |
50 |
60 | setDropdownOpen(true)}
63 | onBlur={() => setDropdownOpen(false)}
64 | >
65 |
Need help?
66 |
67 |
68 |
74 |
77 | Documentation
78 |
79 |
80 |
81 |
87 |
89 | Support Site
90 |
91 |
92 |
93 |
99 |
101 | Contact us
102 |
103 |
104 |
105 |
107 |
90 |
91 |
92 | {/* Icon */}
93 |
96 |
97 |
104 |
105 |
112 |
113 |
120 |
121 |
122 |
123 | Dan-Codes Plus
124 |
125 |
126 | Sales
127 |
128 |
129 |
130 | $24,780
131 |
132 |
133 | +49%
134 |
135 |
136 |
137 | {/* Chart built with Chart.js 3 */}
138 |
139 | {/* Change the height attribute to adjust the chart height */}
140 |
142 |
90 |
91 |
92 | {/* Icon */}
93 |
96 |
97 |
104 |
105 |
112 |
113 |
120 |
121 |
122 |
123 | Dan-Codes Advanced
124 |
125 |
126 | Sales
127 |
128 |
129 |
130 | $17,489
131 |
132 |
133 | -14%
134 |
135 |
136 |
137 | {/* Chart built with Chart.js 3 */}
138 |
139 | {/* Change the height attribute to adjust the chart height */}
140 |
142 |
90 |
91 |
92 | {/* Icon */}
93 |
96 |
97 |
104 |
105 |
112 |
113 |
120 |
121 |
122 |
123 | Dan-Codes Professional
124 |
125 |
126 | Sales
127 |
128 |
129 |
130 | $9,962
131 |
132 |
133 | +49%
134 |
135 |
136 |
137 | {/* Chart built with Chart.js 3 */}
138 |
139 | {/* Change the height attribute to adjust the chart height */}
140 |
142 |
131 |
132 |
134 |
137 |
37 |
setDropdownOpen(!dropdownOpen)}
42 | aria-expanded={dropdownOpen}
43 | >
44 | Notifications
45 |
46 |
49 |
50 |
51 |
52 |
62 | setDropdownOpen(true)}
65 | onBlur={() => setDropdownOpen(false)}
66 | >
67 |
Notifications
68 |
69 |
70 | 📣 Edit your information in a swipe Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.
76 | Feb 12, 2021
77 |
78 |
79 |
80 | 📣 Edit your information in a swipe Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.
86 | Feb 9, 2021
87 |
88 |
89 |
90 | 🚀Say goodbye to paper receipts! Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.
96 | Jan 24, 2020
97 |
98 |
99 |
100 |
102 |
36 |
setDropdownOpen(!dropdownOpen)}
41 | aria-expanded={dropdownOpen}
42 | >
43 | Filter
44 |
46 |
48 |
49 |
62 |
63 |
Filters
64 |
102 |
103 |
104 |
105 |
106 | Clear
107 |
108 |
109 |
110 | setDropdownOpen(false)}
113 | onBlur={() => setDropdownOpen(false)}
114 | >
115 | Apply
116 |
117 |
118 |
119 |
120 |
122 |
155 |
156 |
158 |
162 |
179 |
180 |
181 |
182 | $57.81
183 |
184 |
188 |
189 |
191 |
193 |
194 | );
195 | }
196 |
197 | export default RealtimeChart;
198 |
--------------------------------------------------------------------------------
/src/css/additional-styles/flatpickr.css:
--------------------------------------------------------------------------------
1 | @import 'flatpickr/dist/flatpickr.min.css';
2 |
3 | /* Customise flatpickr */
4 | * {
5 | --calendarPadding: 24px;
6 | --daySize: 36px;
7 | --daysWidth: calc(var(--daySize)*7);
8 | }
9 |
10 | @keyframes fpFadeInDown {
11 | from {
12 | opacity: 0;
13 | transform: translate3d(0, -8px, 0);
14 | }
15 | to {
16 | opacity: 1;
17 | transform: translate3d(0, 0, 0);
18 | }
19 | }
20 |
21 | .flatpickr-calendar {
22 | border: inherit;
23 | @apply bg-white dark:bg-slate-800 rounded shadow-lg border border-slate-200 dark:border-slate-700 left-1/2;
24 | margin-left: calc(calc(var(--daysWidth) + calc(var(--calendarPadding)*2))*0.5*-1);
25 | padding: var(--calendarPadding);
26 | width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
27 | }
28 |
29 | @screen lg {
30 | .flatpickr-calendar {
31 | @apply left-0 right-auto;
32 | margin-left: 0;
33 | }
34 | }
35 |
36 | .flatpickr-right.flatpickr-calendar {
37 | @apply right-0 left-auto;
38 | margin-left: 0;
39 | }
40 |
41 | .flatpickr-calendar.animate.open {
42 | animation: fpFadeInDown 200ms ease-out;
43 | }
44 |
45 | .flatpickr-calendar.static {
46 | position: absolute;
47 | top: calc(100% + 4px);
48 | }
49 |
50 | .flatpickr-calendar.static.open {
51 | z-index: 20;
52 | }
53 |
54 | .flatpickr-days {
55 | width: var(--daysWidth);
56 | }
57 |
58 | .dayContainer {
59 | width: var(--daysWidth);
60 | min-width: var(--daysWidth);
61 | max-width: var(--daysWidth);
62 | }
63 |
64 | .flatpickr-day {
65 | @apply bg-slate-50 dark:bg-slate-700/20 text-sm font-medium text-slate-600 dark:text-slate-100;
66 | max-width: var(--daySize);
67 | height: var(--daySize);
68 | line-height: var(--daySize);
69 | }
70 |
71 | .flatpickr-day,
72 | .flatpickr-day.prevMonthDay,
73 | .flatpickr-day.nextMonthDay {
74 | border: none;
75 | }
76 |
77 | .flatpickr-day.flatpickr-disabled,
78 | .flatpickr-day.flatpickr-disabled:hover,
79 | .flatpickr-day.prevMonthDay,
80 | .flatpickr-day.nextMonthDay,
81 | .flatpickr-day.notAllowed,
82 | .flatpickr-day.notAllowed.prevMonthDay,
83 | .flatpickr-day.notAllowed.nextMonthDay {
84 | @apply bg-transparent;
85 | }
86 |
87 | .flatpickr-day,
88 | .flatpickr-day.prevMonthDay,
89 | .flatpickr-day.nextMonthDay,
90 | .flatpickr-day.selected.startRange,
91 | .flatpickr-day.startRange.startRange,
92 | .flatpickr-day.endRange.startRange,
93 | .flatpickr-day.selected.endRange,
94 | .flatpickr-day.startRange.endRange,
95 | .flatpickr-day.endRange.endRange,
96 | .flatpickr-day.selected.startRange.endRange,
97 | .flatpickr-day.startRange.startRange.endRange,
98 | .flatpickr-day.endRange.startRange.endRange {
99 | border-radius: 0;
100 | }
101 |
102 | .flatpickr-day.flatpickr-disabled,
103 | .flatpickr-day.flatpickr-disabled:hover,
104 | .flatpickr-day.prevMonthDay,
105 | .flatpickr-day.nextMonthDay,
106 | .flatpickr-day.notAllowed,
107 | .flatpickr-day.notAllowed.prevMonthDay,
108 | .flatpickr-day.notAllowed.nextMonthDay {
109 | @apply text-slate-400 dark:text-slate-500;
110 | }
111 |
112 | .rangeMode .flatpickr-day {
113 | margin: 0;
114 | }
115 |
116 | .flatpickr-day.selected,
117 | .flatpickr-day.startRange,
118 | .flatpickr-day.endRange,
119 | .flatpickr-day.selected.inRange,
120 | .flatpickr-day.startRange.inRange,
121 | .flatpickr-day.endRange.inRange,
122 | .flatpickr-day.selected:focus,
123 | .flatpickr-day.startRange:focus,
124 | .flatpickr-day.endRange:focus,
125 | .flatpickr-day.selected:hover,
126 | .flatpickr-day.startRange:hover,
127 | .flatpickr-day.endRange:hover,
128 | .flatpickr-day.selected.prevMonthDay,
129 | .flatpickr-day.startRange.prevMonthDay,
130 | .flatpickr-day.endRange.prevMonthDay,
131 | .flatpickr-day.selected.nextMonthDay,
132 | .flatpickr-day.startRange.nextMonthDay,
133 | .flatpickr-day.endRange.nextMonthDay {
134 | @apply bg-indigo-500 text-indigo-50;
135 | }
136 |
137 | .flatpickr-day.inRange,
138 | .flatpickr-day.prevMonthDay.inRange,
139 | .flatpickr-day.nextMonthDay.inRange,
140 | .flatpickr-day.today.inRange,
141 | .flatpickr-day.prevMonthDay.today.inRange,
142 | .flatpickr-day.nextMonthDay.today.inRange,
143 | .flatpickr-day:hover,
144 | .flatpickr-day.prevMonthDay:hover,
145 | .flatpickr-day.nextMonthDay:hover,
146 | .flatpickr-day:focus,
147 | .flatpickr-day.prevMonthDay:focus,
148 | .flatpickr-day.nextMonthDay:focus,
149 | .flatpickr-day.today:hover,
150 | .flatpickr-day.today:focus {
151 | @apply bg-indigo-400 text-indigo-50;
152 | }
153 |
154 | .flatpickr-day.inRange,
155 | .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
156 | .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
157 | .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
158 | box-shadow: none;
159 | }
160 |
161 | .flatpickr-months {
162 | align-items: center;
163 | margin-top: -8px;
164 | margin-bottom: 6px;
165 | }
166 |
167 | .flatpickr-months .flatpickr-prev-month,
168 | .flatpickr-months .flatpickr-next-month {
169 | position: static;
170 | height: auto;
171 | @apply text-slate-600 hover:text-slate-900 dark:text-slate-500 dark:hover:text-slate-300;
172 | }
173 |
174 | .flatpickr-months .flatpickr-prev-month svg,
175 | .flatpickr-months .flatpickr-next-month svg {
176 | width: 7px;
177 | height: 11px;
178 | }
179 |
180 | .flatpickr-months .flatpickr-prev-month:hover svg,
181 | .flatpickr-months .flatpickr-next-month:hover svg {
182 | @apply fill-current;
183 | }
184 |
185 | .flatpickr-months .flatpickr-prev-month {
186 | margin-left: -10px;
187 | }
188 |
189 | .flatpickr-months .flatpickr-next-month {
190 | margin-right: -10px;
191 | }
192 |
193 | .flatpickr-months .flatpickr-month {
194 | @apply text-slate-800 dark:text-slate-100;
195 | height: auto;
196 | line-height: inherit;
197 | }
198 |
199 | .flatpickr-current-month {
200 | @apply text-sm font-medium;
201 | position: static;
202 | height: auto;
203 | width: auto;
204 | left: auto;
205 | padding: 0;
206 | }
207 |
208 | .flatpickr-current-month span.cur-month {
209 | @apply font-medium m-0;
210 | }
211 |
212 | .flatpickr-current-month span.cur-month:hover {
213 | background: none;
214 | }
215 |
216 | .flatpickr-current-month input.cur-year {
217 | font-weight: inherit;
218 | box-shadow: none !important;
219 | }
220 |
221 | .numInputWrapper:hover {
222 | background: none;
223 | }
224 |
225 | .numInputWrapper span {
226 | display: none;
227 | }
228 |
229 | span.flatpickr-weekday {
230 | @apply text-slate-400 dark:text-slate-500 font-medium text-xs;
231 | }
232 |
233 | .flatpickr-calendar.arrowTop::before,
234 | .flatpickr-calendar.arrowTop::after,
235 | .flatpickr-calendar.arrowBottom::before,
236 | .flatpickr-calendar.arrowBottom::after {
237 | display: none;
238 | }
--------------------------------------------------------------------------------
/src/charts/LineChart02.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect, useState } from 'react';
2 | import { useThemeProvider } from '../utils/ThemeContext';
3 |
4 | import { chartColors } from './ChartjsConfig';
5 | import {
6 | Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
7 | } from 'chart.js';
8 | import 'chartjs-adapter-moment';
9 |
10 | // Import utilities
11 | import { tailwindConfig, formatValue } from '../utils/Utils';
12 |
13 | Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip);
14 |
15 | function LineChart02({
16 | data,
17 | width,
18 | height
19 | }) {
20 |
21 | const [chart, setChart] = useState(null)
22 | const canvas = useRef(null);
23 | const legend = useRef(null);
24 | const { currentTheme } = useThemeProvider();
25 | const darkMode = currentTheme === 'dark';
26 | const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors;
27 |
28 | useEffect(() => {
29 | const ctx = canvas.current;
30 | // eslint-disable-next-line no-unused-vars
31 | const newChart = new Chart(ctx, {
32 | type: 'line',
33 | data: data,
34 | options: {
35 | layout: {
36 | padding: 20,
37 | },
38 | scales: {
39 | y: {
40 | border: {
41 | display: false,
42 | },
43 | beginAtZero: true,
44 | ticks: {
45 | maxTicksLimit: 5,
46 | callback: (value) => formatValue(value),
47 | color: darkMode ? textColor.dark : textColor.light,
48 | },
49 | grid: {
50 | color: darkMode ? gridColor.dark : gridColor.light,
51 | },
52 | },
53 | x: {
54 | type: 'time',
55 | time: {
56 | parser: 'MM-DD-YYYY',
57 | unit: 'month',
58 | displayFormats: {
59 | month: 'MMM YY',
60 | },
61 | },
62 | border: {
63 | display: false,
64 | },
65 | grid: {
66 | display: false,
67 | },
68 | ticks: {
69 | autoSkipPadding: 48,
70 | maxRotation: 0,
71 | color: darkMode ? textColor.dark : textColor.light,
72 | },
73 | },
74 | },
75 | plugins: {
76 | legend: {
77 | display: false,
78 | },
79 | tooltip: {
80 | callbacks: {
81 | title: () => false, // Disable tooltip title
82 | label: (context) => formatValue(context.parsed.y),
83 | },
84 | bodyColor: darkMode ? tooltipBodyColor.dark : tooltipBodyColor.light,
85 | backgroundColor: darkMode ? tooltipBgColor.dark : tooltipBgColor.light,
86 | borderColor: darkMode ? tooltipBorderColor.dark : tooltipBorderColor.light,
87 | },
88 | },
89 | interaction: {
90 | intersect: false,
91 | mode: 'nearest',
92 | },
93 | maintainAspectRatio: false,
94 | resizeDelay: 200,
95 | },
96 | plugins: [
97 | {
98 | id: 'htmlLegend',
99 | afterUpdate(c, args, options) {
100 | const ul = legend.current;
101 | if (!ul) return;
102 | // Remove old legend items
103 | while (ul.firstChild) {
104 | ul.firstChild.remove();
105 | }
106 | // Reuse the built-in legendItems generator
107 | const items = c.options.plugins.legend.labels.generateLabels(c);
108 | items.slice(0, 2).forEach((item) => {
109 | const li = document.createElement('li');
110 | li.style.marginLeft = tailwindConfig().theme.margin[3];
111 | // Button element
112 | const button = document.createElement('button');
113 | button.style.display = 'inline-flex';
114 | button.style.alignItems = 'center';
115 | button.style.opacity = item.hidden ? '.3' : '';
116 | button.onclick = () => {
117 | c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex));
118 | c.update();
119 | };
120 | // Color box
121 | const box = document.createElement('span');
122 | box.style.display = 'block';
123 | box.style.width = tailwindConfig().theme.width[3];
124 | box.style.height = tailwindConfig().theme.height[3];
125 | box.style.borderRadius = tailwindConfig().theme.borderRadius.full;
126 | box.style.marginRight = tailwindConfig().theme.margin[2];
127 | box.style.borderWidth = '3px';
128 | box.style.borderColor = c.data.datasets[item.datasetIndex].borderColor;
129 | box.style.pointerEvents = 'none';
130 | // Label
131 | const label = document.createElement('span');
132 | label.classList.add('text-slate-500', 'dark:text-slate-400');
133 | label.style.fontSize = tailwindConfig().theme.fontSize.sm[0];
134 | label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight;
135 | const labelText = document.createTextNode(item.text);
136 | label.appendChild(labelText);
137 | li.appendChild(button);
138 | button.appendChild(box);
139 | button.appendChild(label);
140 | ul.appendChild(li);
141 | });
142 | },
143 | },
144 | ],
145 | });
146 | setChart(newChart);
147 | return () => newChart.destroy();
148 | // eslint-disable-next-line react-hooks/exhaustive-deps
149 | }, []);
150 |
151 | useEffect(() => {
152 | if (!chart) return;
153 |
154 | if (darkMode) {
155 | chart.options.scales.x.ticks.color = textColor.dark;
156 | chart.options.scales.y.ticks.color = textColor.dark;
157 | chart.options.scales.y.grid.color = gridColor.dark;
158 | chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.dark;
159 | chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.dark;
160 | chart.options.plugins.tooltip.borderColor = tooltipBorderColor.dark;
161 | } else {
162 | chart.options.scales.x.ticks.color = textColor.light;
163 | chart.options.scales.y.ticks.color = textColor.light;
164 | chart.options.scales.y.grid.color = gridColor.light;
165 | chart.options.plugins.tooltip.bodyColor = tooltipBodyColor.light;
166 | chart.options.plugins.tooltip.backgroundColor = tooltipBgColor.light;
167 | chart.options.plugins.tooltip.borderColor = tooltipBorderColor.light;
168 | }
169 | chart.update('none');
170 | }, [currentTheme]);
171 |
172 | return (
173 |
174 |
175 |
176 |
177 |
$1,482
178 |
-22%
179 |
180 |
183 |
184 |
187 |
189 |
190 | );
191 | }
192 |
193 | export default LineChart02;
--------------------------------------------------------------------------------
/src/partials/dashboard/DashboardCard13.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function DashboardCard13() {
4 | return (
5 |
6 |
9 |
10 | {/* Card content */}
11 | {/* "Today" group */}
12 |
13 |
16 |
17 | {/* Item */}
18 |
19 |
24 |
25 |
26 |
32 |
33 | -$49.88
34 |
35 |
36 |
38 | {/* Item */}
39 |
40 |
45 |
46 |
47 |
53 |
54 | +249.88
55 |
56 |
57 |
59 | {/* Item */}
60 |
61 |
66 |
67 |
68 |
73 |
74 | +99.99
75 |
76 |
77 |
79 | {/* Item */}
80 |
81 |
86 |
87 |
88 |
93 |
94 | +1,200.88
95 |
96 |
97 |
99 | {/* Item */}
100 |
101 |
106 |
107 |
108 |
114 |
115 | +$99.99
116 |
117 |
118 |
120 | {/* Item */}
121 |
122 |
127 |
128 |
129 |
135 |
136 | -$49.88
137 |
138 |
139 |
141 |
142 |
143 |
144 |
194 |
197 |
198 |
200 |
201 | );
202 | }
203 |
204 | export default BarChart01;
205 |
--------------------------------------------------------------------------------
/src/partials/dashboard/DashboardCard07.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function DashboardCard07() {
4 | return (
5 |
6 |
9 |
10 | {/* Table */}
11 |
12 |
13 | {/* Table header */}
14 |
15 |
16 |
17 | Source
18 |
19 |
20 | Visitors
21 |
22 |
23 | Revenues
24 |
25 |
26 | Sales
27 |
28 |
29 | Conversion
30 |
31 |
32 |
33 | {/* Table body */}
34 |
35 | {/* Row */}
36 |
37 |
38 |
39 |
40 |
46 |
Github.com
47 |
49 |
50 | 2.4K
51 |
52 |
53 | $3,877
54 |
55 |
56 | 267
57 |
58 |
59 | 4.7%
60 |
61 |
62 | {/* Row */}
63 |
64 |
65 |
66 |
67 |
74 |
Twitter
75 |
77 |
78 | 2.2K
79 |
80 |
81 | $3,426
82 |
83 |
84 | 249
85 |
86 |
87 | 4.4%
88 |
89 |
90 | {/* Row */}
91 |
92 |
93 |
94 |
95 |
102 |
Google (organic)
103 |
105 |
106 | 2.0K
107 |
108 |
109 | $2,444
110 |
111 |
112 | 224
113 |
114 |
115 | 4.2%
116 |
117 |
118 | {/* Row */}
119 |
120 |
121 |
122 |
123 |
130 |
Vimeo.com
131 |
133 |
134 | 1.9K
135 |
136 |
137 | $2,236
138 |
139 |
140 | 220
141 |
142 |
143 | 4.2%
144 |
145 |
146 | {/* Row */}
147 |
148 |
149 |
150 |
151 |
157 |
Indiehackers.com
158 |
160 |
161 | 1.7K
162 |
163 |
164 | $2,034
165 |
166 |
167 | 204
168 |
169 |
170 | 3.9%
171 |
172 |
173 |
174 |
175 |
176 |
177 |
6 |
9 |
10 | {/* Card content */}
11 | {/* "Today" group */}
12 |
13 |
16 |
17 | {/* Item */}
18 |
19 |
24 |
43 |
44 | {/* Item */}
45 |
46 |
51 |
70 |
71 | {/* Item */}
72 |
73 |
78 |
96 |
97 |
98 |
99 | {/* "Yesterday" group */}
100 |
101 |
104 |
105 | {/* Item */}
106 |
107 |
112 |
130 |
131 | {/* Item */}
132 |
133 |
138 |
157 |
158 |
159 |
160 |
161 |
67 |
71 | {/* Search form */}
72 |
96 |
97 | {/* Recent searches */}
98 |
99 |
Recent searches
100 |
101 |
102 |
111 |
113 | Form Builder - 23 hours on-demand video
114 |
115 |
116 |
117 |
126 |
128 | Access Mosaic on mobile and TV
129 |
130 |
131 |
132 |
141 |
143 | Product Update - Q4 2021
144 |
145 |
146 |
147 |
156 |
158 | Master Digital Marketing Strategy course
159 |
160 |
161 |
162 |
171 |
173 | Dedicated forms for products
174 |
175 |
176 |
177 |
186 |
188 | Product Update - Q4 2021
189 |
190 |
191 |
192 |
193 | {/* Recent pages */}
194 |
195 |
Recent pages
196 |
197 |
198 |
207 |
209 |
210 | Messages -{' '}
211 | Conversation / … / Mike Mills
212 |
213 |
214 |
215 |
216 |
225 |
227 |
228 | Messages -{' '}
229 | Conversation / … / Eva Patrick
230 |
231 |
232 |
233 |
234 |
235 |
236 |
238 |
239 | );
240 | }
241 |
242 | export default ModalSearch;
243 |
--------------------------------------------------------------------------------