├── .env
├── .env.template
├── public
├── robots.txt
├── logo.jpg
├── intro.png
├── favicon.ico
├── logo192.png
├── logo512.png
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── manifest.json
└── index.html
├── postcss.config.js
├── src
├── components
│ ├── Typography
│ │ ├── Title.js
│ │ ├── HelperText.js
│ │ ├── ErrorText.js
│ │ └── Subtitle.js
│ ├── CalendarView
│ │ ├── util.js
│ │ └── index.js
│ ├── Input
│ │ ├── SearchBar.js
│ │ ├── ToogleInput.js
│ │ ├── InputText.js
│ │ ├── TextAreaInput.js
│ │ └── SelectBox.js
│ └── Cards
│ │ └── TitleCard.js
├── containers
│ ├── SuspenseContent.js
│ ├── Layout.js
│ ├── ModalLayout.js
│ ├── SidebarSubmenu.js
│ ├── PageContent.js
│ ├── LeftSidebar.js
│ ├── RightSidebar.js
│ └── Header.js
├── setupTests.js
├── App.test.js
├── pages
│ ├── Login.js
│ ├── Register.js
│ ├── DocFeatures.js
│ ├── DocComponents.js
│ ├── GettingStarted.js
│ ├── ForgotPassword.js
│ ├── protected
│ │ ├── Leads.js
│ │ ├── Charts.js
│ │ ├── Team.js
│ │ ├── Bills.js
│ │ ├── Calendar.js
│ │ ├── Dashboard.js
│ │ ├── Transactions.js
│ │ ├── Integration.js
│ │ ├── ProfileSettings.js
│ │ ├── 404.js
│ │ ├── Welcome.js
│ │ └── Blank.js
│ └── Documentation.js
├── reportWebVitals.js
├── utils
│ ├── globalConstantUtil.js
│ └── dummyData.js
├── app
│ ├── store.js
│ ├── init.js
│ └── auth.js
├── features
│ ├── common
│ │ ├── components
│ │ │ ├── NotificationBodyRightDrawer.js
│ │ │ └── ConfirmationModalBody.js
│ │ ├── rightDrawerSlice.js
│ │ ├── headerSlice.js
│ │ └── modalSlice.js
│ ├── calendar
│ │ ├── CalendarEventsBodyRightDrawer.js
│ │ └── index.js
│ ├── user
│ │ ├── components
│ │ │ └── TemplatePointers.js
│ │ ├── LandingIntro.js
│ │ ├── Login.js
│ │ ├── Register.js
│ │ └── ForgotPassword.js
│ ├── dashboard
│ │ ├── components
│ │ │ ├── AmountStats.js
│ │ │ ├── PageStats.js
│ │ │ ├── DashboardStats.js
│ │ │ ├── LineChart.js
│ │ │ ├── BarChart.js
│ │ │ ├── UserChannels.js
│ │ │ ├── DoughnutChart.js
│ │ │ └── DashboardTopBar.js
│ │ └── index.js
│ ├── documentation
│ │ ├── DocGettingStarted.js
│ │ ├── components
│ │ │ ├── DocComponentsNav.js
│ │ │ ├── FeaturesNav.js
│ │ │ ├── GettingStartedNav.js
│ │ │ ├── DocComponentsContent.js
│ │ │ ├── FeaturesContent.js
│ │ │ └── GettingStartedContent.js
│ │ ├── DocFeatures.js
│ │ └── DocComponents.js
│ ├── leads
│ │ ├── leadSlice.js
│ │ ├── components
│ │ │ └── AddLeadModalBody.js
│ │ └── index.js
│ ├── charts
│ │ ├── components
│ │ │ ├── LineChart.js
│ │ │ ├── BarChart.js
│ │ │ ├── ScatterChart.js
│ │ │ ├── StackBarChart.js
│ │ │ ├── DoughnutChart.js
│ │ │ └── PieChart.js
│ │ └── index.js
│ ├── settings
│ │ ├── profilesettings
│ │ │ └── index.js
│ │ ├── billing
│ │ │ └── index.js
│ │ └── team
│ │ │ └── index.js
│ ├── integration
│ │ └── index.js
│ └── transactions
│ │ └── index.js
├── App.css
├── index.css
├── index.js
├── App.js
├── routes
│ ├── index.js
│ └── sidebar.js
└── logo.svg
├── .gitignore
├── tailwind.config.js
├── LICENSE.md
├── package.json
└── README.md
/.env:
--------------------------------------------------------------------------------
1 | REACT_APP_BASE_URL=https://reqres.in/
2 |
--------------------------------------------------------------------------------
/.env.template:
--------------------------------------------------------------------------------
1 | REACT_APP_BASE_URL=https://reqres.in/
2 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robbins23/daisyui-admin-dashboard-template/HEAD/public/logo.jpg
--------------------------------------------------------------------------------
/public/intro.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robbins23/daisyui-admin-dashboard-template/HEAD/public/intro.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robbins23/daisyui-admin-dashboard-template/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robbins23/daisyui-admin-dashboard-template/HEAD/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robbins23/daisyui-admin-dashboard-template/HEAD/public/logo512.png
--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robbins23/daisyui-admin-dashboard-template/HEAD/public/favicon-16x16.png
--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robbins23/daisyui-admin-dashboard-template/HEAD/public/favicon-32x32.png
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 |
6 | },
7 | }
8 |
--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robbins23/daisyui-admin-dashboard-template/HEAD/public/apple-touch-icon.png
--------------------------------------------------------------------------------
/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robbins23/daisyui-admin-dashboard-template/HEAD/public/android-chrome-192x192.png
--------------------------------------------------------------------------------
/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robbins23/daisyui-admin-dashboard-template/HEAD/public/android-chrome-512x512.png
--------------------------------------------------------------------------------
/src/components/Typography/Title.js:
--------------------------------------------------------------------------------
1 | function Title({className, children}){
2 | return(
3 | {children}
4 | )
5 | }
6 |
7 | export default Title
--------------------------------------------------------------------------------
/src/components/Typography/HelperText.js:
--------------------------------------------------------------------------------
1 | function HelperText({className, children}){
2 | return(
3 | {children}
4 | )
5 | }
6 |
7 | export default HelperText
--------------------------------------------------------------------------------
/src/components/Typography/ErrorText.js:
--------------------------------------------------------------------------------
1 | function ErrorText({styleClass, children}){
2 | return(
3 | {children}
4 | )
5 | }
6 |
7 | export default ErrorText
--------------------------------------------------------------------------------
/src/components/Typography/Subtitle.js:
--------------------------------------------------------------------------------
1 | function Subtitle({styleClass, children}){
2 | return(
3 | {children}
4 | )
5 | }
6 |
7 | export default Subtitle
--------------------------------------------------------------------------------
/src/containers/SuspenseContent.js:
--------------------------------------------------------------------------------
1 | function SuspenseContent(){
2 | return(
3 |
4 | Loading...
5 |
6 | )
7 | }
8 |
9 | export default SuspenseContent
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render();
6 | const linkElement = screen.getByText(/learn react/i);
7 | expect(linkElement).toBeInTheDocument();
8 | });
9 |
--------------------------------------------------------------------------------
/src/pages/Login.js:
--------------------------------------------------------------------------------
1 | import {useState, useRef} from 'react'
2 | import {Link} from 'react-router-dom'
3 | import Login from '../features/user/Login'
4 |
5 | function ExternalPage(){
6 |
7 |
8 | return(
9 |
10 |
11 |
12 | )
13 | }
14 |
15 | export default ExternalPage
--------------------------------------------------------------------------------
/src/pages/Register.js:
--------------------------------------------------------------------------------
1 | import {useState, useRef} from 'react'
2 | import {Link} from 'react-router-dom'
3 | import Register from '../features/user/Register'
4 |
5 | function ExternalPage(){
6 |
7 |
8 | return(
9 |
10 |
11 |
12 | )
13 | }
14 |
15 | export default ExternalPage
--------------------------------------------------------------------------------
/src/pages/DocFeatures.js:
--------------------------------------------------------------------------------
1 | import {useState, useRef} from 'react'
2 | import {Link} from 'react-router-dom'
3 | import DocFeatures from '../features/documentation/DocFeatures'
4 |
5 | function ExternalPage(){
6 |
7 |
8 | return(
9 |
10 |
11 |
12 | )
13 | }
14 |
15 | export default ExternalPage
--------------------------------------------------------------------------------
/src/pages/DocComponents.js:
--------------------------------------------------------------------------------
1 | import {useState, useRef} from 'react'
2 | import {Link} from 'react-router-dom'
3 | import DocComponents from '../features/documentation/DocComponents'
4 |
5 | function ExternalPage(){
6 |
7 |
8 | return(
9 |
10 |
11 |
12 | )
13 | }
14 |
15 | export default ExternalPage
--------------------------------------------------------------------------------
/src/pages/GettingStarted.js:
--------------------------------------------------------------------------------
1 | import {useState, useRef} from 'react'
2 | import {Link} from 'react-router-dom'
3 | import DocGettingStarted from '../features/documentation/DocGettingStarted'
4 |
5 | function ExternalPage(){
6 |
7 |
8 | return(
9 |
10 |
11 |
12 | )
13 | }
14 |
15 | export default ExternalPage
--------------------------------------------------------------------------------
/src/pages/ForgotPassword.js:
--------------------------------------------------------------------------------
1 | import {useState, useRef} from 'react'
2 | import {Link} from 'react-router-dom'
3 | import ForgotPassword from '../features/user/ForgotPassword'
4 | import Login from '../features/user/Login'
5 |
6 | function ExternalPage(){
7 |
8 |
9 | return(
10 |
11 |
12 |
13 | )
14 | }
15 |
16 | export default ExternalPage
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | .env.development2.local
21 |
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | "./src/**/*.{js,jsx,ts,tsx}",
5 | "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"
6 | ],
7 | darkMode: ["class", '[data-theme="dark"]'],
8 | theme: {
9 | extend: {},
10 | },
11 | plugins: [require("@tailwindcss/typography"), require("daisyui")],
12 | daisyui: {
13 | themes: ["light", "dark"],
14 | },
15 |
16 | }
17 |
--------------------------------------------------------------------------------
/src/pages/protected/Leads.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useDispatch } from 'react-redux'
3 | import { setPageTitle } from '../../features/common/headerSlice'
4 | import Leads from '../../features/leads'
5 |
6 | function InternalPage(){
7 | const dispatch = useDispatch()
8 |
9 | useEffect(() => {
10 | dispatch(setPageTitle({ title : "Leads"}))
11 | }, [])
12 |
13 |
14 | return(
15 |
16 | )
17 | }
18 |
19 | export default InternalPage
--------------------------------------------------------------------------------
/src/pages/protected/Charts.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useDispatch } from 'react-redux'
3 | import Charts from '../../features/charts'
4 | import { setPageTitle } from '../../features/common/headerSlice'
5 |
6 | function InternalPage(){
7 | const dispatch = useDispatch()
8 |
9 | useEffect(() => {
10 | dispatch(setPageTitle({ title : "Analytics"}))
11 | }, [])
12 |
13 |
14 | return(
15 |
16 | )
17 | }
18 |
19 | export default InternalPage
--------------------------------------------------------------------------------
/src/pages/protected/Team.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useDispatch } from 'react-redux'
3 | import { setPageTitle } from '../../features/common/headerSlice'
4 | import Team from '../../features/settings/team'
5 |
6 | function InternalPage(){
7 | const dispatch = useDispatch()
8 |
9 | useEffect(() => {
10 | dispatch(setPageTitle({ title : "Team Members"}))
11 | }, [])
12 |
13 |
14 | return(
15 |
16 | )
17 | }
18 |
19 | export default InternalPage
--------------------------------------------------------------------------------
/src/pages/protected/Bills.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useDispatch } from 'react-redux'
3 | import { setPageTitle } from '../../features/common/headerSlice'
4 | import Billing from '../../features/settings/billing'
5 |
6 | function InternalPage(){
7 | const dispatch = useDispatch()
8 |
9 | useEffect(() => {
10 | dispatch(setPageTitle({ title : "Bills"}))
11 | }, [])
12 |
13 |
14 | return(
15 |
16 | )
17 | }
18 |
19 | export default InternalPage
--------------------------------------------------------------------------------
/src/pages/protected/Calendar.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useDispatch } from 'react-redux'
3 | import { setPageTitle } from '../../features/common/headerSlice'
4 | import Calendar from '../../features/calendar'
5 |
6 | function InternalPage(){
7 | const dispatch = useDispatch()
8 |
9 | useEffect(() => {
10 | dispatch(setPageTitle({ title : "Calendar"}))
11 | }, [])
12 |
13 |
14 | return(
15 |
16 | )
17 | }
18 |
19 | export default InternalPage
--------------------------------------------------------------------------------
/src/utils/globalConstantUtil.js:
--------------------------------------------------------------------------------
1 |
2 | module.exports = Object.freeze({
3 | MODAL_BODY_TYPES : {
4 | USER_DETAIL : "USER_DETAIL",
5 | LEAD_ADD_NEW : "LEAD_ADD_NEW",
6 | CONFIRMATION : "CONFIRMATION",
7 | DEFAULT : "",
8 | },
9 |
10 | RIGHT_DRAWER_TYPES : {
11 | NOTIFICATION : "NOTIFICATION",
12 | CALENDAR_EVENTS : "CALENDAR_EVENTS",
13 | },
14 |
15 | CONFIRMATION_MODAL_CLOSE_TYPES : {
16 | LEAD_DELETE : "LEAD_DELETE",
17 | },
18 | });
19 |
--------------------------------------------------------------------------------
/src/pages/protected/Dashboard.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useDispatch } from 'react-redux'
3 | import { setPageTitle } from '../../features/common/headerSlice'
4 | import Dashboard from '../../features/dashboard/index'
5 |
6 | function InternalPage(){
7 | const dispatch = useDispatch()
8 |
9 | useEffect(() => {
10 | dispatch(setPageTitle({ title : "Dashboard"}))
11 | }, [])
12 |
13 |
14 | return(
15 |
16 | )
17 | }
18 |
19 | export default InternalPage
--------------------------------------------------------------------------------
/src/pages/protected/Transactions.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useDispatch } from 'react-redux'
3 | import { setPageTitle } from '../../features/common/headerSlice'
4 | import Transactions from '../../features/transactions'
5 |
6 | function InternalPage(){
7 | const dispatch = useDispatch()
8 |
9 | useEffect(() => {
10 | dispatch(setPageTitle({ title : "Transactions"}))
11 | }, [])
12 |
13 |
14 | return(
15 |
16 | )
17 | }
18 |
19 | export default InternalPage
--------------------------------------------------------------------------------
/src/pages/protected/Integration.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useDispatch } from 'react-redux'
3 | import { setPageTitle } from '../../features/common/headerSlice'
4 | import Integration from '../../features/integration'
5 |
6 | function InternalPage(){
7 |
8 | const dispatch = useDispatch()
9 |
10 | useEffect(() => {
11 | dispatch(setPageTitle({ title : "Integrations"}))
12 | }, [])
13 |
14 | return(
15 |
16 | )
17 | }
18 |
19 | export default InternalPage
--------------------------------------------------------------------------------
/src/app/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit'
2 | import headerSlice from '../features/common/headerSlice'
3 | import modalSlice from '../features/common/modalSlice'
4 | import rightDrawerSlice from '../features/common/rightDrawerSlice'
5 | import leadsSlice from '../features/leads/leadSlice'
6 |
7 | const combinedReducer = {
8 | header : headerSlice,
9 | rightDrawer : rightDrawerSlice,
10 | modal : modalSlice,
11 | lead : leadsSlice
12 | }
13 |
14 | export default configureStore({
15 | reducer: combinedReducer
16 | })
--------------------------------------------------------------------------------
/src/pages/protected/ProfileSettings.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useDispatch } from 'react-redux'
3 | import { setPageTitle } from '../../features/common/headerSlice'
4 | import ProfileSettings from '../../features/settings/profilesettings'
5 |
6 | function InternalPage(){
7 | const dispatch = useDispatch()
8 |
9 | useEffect(() => {
10 | dispatch(setPageTitle({ title : "Settings"}))
11 | }, [])
12 |
13 |
14 | return(
15 |
16 | )
17 | }
18 |
19 | export default InternalPage
--------------------------------------------------------------------------------
/src/app/init.js:
--------------------------------------------------------------------------------
1 | import axios from "axios"
2 |
3 | const initializeApp = () => {
4 |
5 | // Setting base URL for all API request via axios
6 | axios.defaults.baseURL = process.env.REACT_APP_BASE_URL
7 |
8 |
9 | if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
10 | // dev code
11 |
12 |
13 |
14 | } else {
15 | // Prod build code
16 |
17 |
18 |
19 | // Removing console.log from prod
20 | console.log = () => {};
21 |
22 |
23 | // init analytics here
24 | }
25 |
26 | }
27 |
28 | export default initializeApp
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "DashWind",
3 | "name": "DashWind",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/CalendarView/util.js:
--------------------------------------------------------------------------------
1 | const moment = require("moment");
2 |
3 | module.exports = Object.freeze({
4 | CALENDAR_EVENT_STYLE : {
5 | "BLUE" : "bg-blue-200 dark:bg-blue-600 dark:text-blue-100",
6 | "GREEN" : "bg-green-200 dark:bg-green-600 dark:text-green-100",
7 | "PURPLE" : "bg-purple-200 dark:bg-purple-600 dark:text-purple-100",
8 | "ORANGE" : "bg-orange-200 dark:bg-orange-600 dark:text-orange-100",
9 | "PINK" : "bg-pink-200 dark:bg-pink-600 dark:text-pink-100",
10 | "MORE" : "hover:underline cursor-pointer font-medium "
11 | }
12 |
13 |
14 | });
15 |
--------------------------------------------------------------------------------
/src/features/common/components/NotificationBodyRightDrawer.js:
--------------------------------------------------------------------------------
1 | function NotificationBodyRightDrawer(){
2 | return(
3 | <>
4 | {
5 | [...Array(15)].map((_, i) => {
6 | return
7 | {i % 2 === 0 ? `Your sales has increased by 30% yesterday` : `Total likes for instagram post - New launch this week, has crossed 100k `}
8 |
9 | })
10 | }
11 |
12 | )
13 | }
14 |
15 | export default NotificationBodyRightDrawer
--------------------------------------------------------------------------------
/src/features/calendar/CalendarEventsBodyRightDrawer.js:
--------------------------------------------------------------------------------
1 | import { CALENDAR_EVENT_STYLE } from "../../components/CalendarView/util"
2 |
3 | const THEME_BG = CALENDAR_EVENT_STYLE
4 |
5 | function CalendarEventsBodyRightDrawer({filteredEvents}){
6 | return(
7 | <>
8 | {
9 | filteredEvents.map((e, k) => {
10 | return
11 | {e.title}
12 |
13 | })
14 | }
15 |
16 | )
17 | }
18 |
19 | export default CalendarEventsBodyRightDrawer
--------------------------------------------------------------------------------
/src/components/Input/SearchBar.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | import React, { useEffect } from 'react'
4 |
5 | function SearchBar({searchText, styleClass, placeholderText, setSearchText}) {
6 |
7 |
8 |
9 | const updateSearchInput = (value) => {
10 | setSearchText(value)
11 | }
12 |
13 | return (
14 |
15 |
16 | updateSearchInput(e.target.value)} className="input input-sm input-bordered w-full max-w-xs" />
17 |
18 |
Admin Dashboard Starter Kit
5 | ✓ Light/dark mode toggle
6 | ✓ Redux toolkit and other utility libraries configured
7 | ✓ Calendar, Modal, Sidebar components
8 | ✓ User-friendly documentation
9 | ✓ Daisy UI components, Tailwind CSS support
10 |
11 | )
12 | }
13 |
14 | export default TemplatePointers
--------------------------------------------------------------------------------
/src/pages/protected/404.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useDispatch } from 'react-redux'
3 | import { setPageTitle } from '../../features/common/headerSlice'
4 | import FaceFrownIcon from '@heroicons/react/24/solid/FaceFrownIcon'
5 |
6 | function InternalPage(){
7 |
8 | const dispatch = useDispatch()
9 |
10 | useEffect(() => {
11 | dispatch(setPageTitle({ title : ""}))
12 | }, [])
13 |
14 | return(
15 |
16 |
17 |
18 |
19 |
404 - Not Found
20 |
21 |
22 |
15 |
19 |
20 | )
21 | }
22 |
23 |
24 | export default ToogleInput
25 |
--------------------------------------------------------------------------------
/src/pages/protected/Welcome.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useDispatch } from 'react-redux'
3 | import { setPageTitle } from '../../features/common/headerSlice'
4 | import {Link} from 'react-router-dom'
5 | import TemplatePointers from '../../features/user/components/TemplatePointers'
6 |
7 | function InternalPage(){
8 |
9 | const dispatch = useDispatch()
10 |
11 | useEffect(() => {
12 | dispatch(setPageTitle({ title : ""}))
13 | }, [])
14 |
15 | return(
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
17 |
18 |
19 |
20 |
Blank Page
21 |
22 |
23 |
15 |
18 | updateInputValue(e.target.value)}className="input input-bordered w-full " />
19 |
20 | )
21 | }
22 |
23 |
24 | export default InputText
--------------------------------------------------------------------------------
/src/components/Input/TextAreaInput.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react"
2 |
3 |
4 | function TextAreaInput({labelTitle, labelStyle, type, containerStyle, defaultValue, placeholder, updateFormValue, updateType}){
5 |
6 | const [value, setValue] = useState(defaultValue)
7 |
8 | const updateInputValue = (val) => {
9 | setValue(val)
10 | updateFormValue({updateType, value : val})
11 | }
12 |
13 | return(
14 |
15 |
18 |
19 |
20 | )
21 | }
22 |
23 |
24 | export default TextAreaInput
--------------------------------------------------------------------------------
/src/features/dashboard/components/AmountStats.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | function AmountStats({}){
4 | return(
5 |
6 |
7 |
Amount to be Collected
8 |
$25,600
9 |
10 |
11 |
12 |
13 |
14 |
15 |
Cash in hand
16 |
$5,600
17 |
18 |
19 |
20 |
21 |
9 |
10 |
11 |
12 |
DashWind
13 |
14 |
15 |
16 | {/* Importing pointers component */}
17 |
18 |
19 |
20 |
21 |
22 |
8 |
9 |
10 |
11 |
12 |
13 |
Total Likes
14 |
25.6K
15 |
21% more than last month
16 |
17 |
18 |
19 |
20 |
21 |
22 |
Page Views
23 |
2.6M
24 |
14% more than last month
25 |
26 |
7 |
8 | {/* Title for Card */}
9 |
10 | {title}
11 |
12 | {/* Top side button, show only if present */}
13 | {
14 | TopSideButtons && {TopSideButtons}
15 | }
16 |
17 |
18 |
19 |
20 | {/** Card Body */}
21 |
22 | {children}
23 |
24 |
13 |
14 |
{icon}
15 |
{title}
16 |
{value}
17 |
{description}
18 |
19 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
22 | - Components
23 |
24 | {
25 | navs.map((n, k) => {
26 | return(
27 | - scrollToSection(k)} className={n.isActive ? "bordered" : ""}>{n.name}
28 | )
29 | })
30 | }
31 |
32 | )
33 | }
34 |
35 | export default DocComponentsNav
--------------------------------------------------------------------------------
/src/features/leads/leadSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
2 | import axios from 'axios'
3 |
4 |
5 |
6 | export const getLeadsContent = createAsyncThunk('/leads/content', async () => {
7 | const response = await axios.get('/api/users?page=2', {})
8 | return response.data;
9 | })
10 |
11 | export const leadsSlice = createSlice({
12 | name: 'leads',
13 | initialState: {
14 | isLoading: false,
15 | leads : []
16 | },
17 | reducers: {
18 |
19 |
20 | addNewLead: (state, action) => {
21 | let {newLeadObj} = action.payload
22 | state.leads = [...state.leads, newLeadObj]
23 | },
24 |
25 | deleteLead: (state, action) => {
26 | let {index} = action.payload
27 | state.leads.splice(index, 1)
28 | }
29 | },
30 |
31 | extraReducers: {
32 | [getLeadsContent.pending]: state => {
33 | state.isLoading = true
34 | },
35 | [getLeadsContent.fulfilled]: (state, action) => {
36 | state.leads = action.payload.data
37 | state.isLoading = false
38 | },
39 | [getLeadsContent.rejected]: state => {
40 | state.isLoading = false
41 | },
42 | }
43 | })
44 |
45 | export const { addNewLead, deleteLead } = leadsSlice.actions
46 |
47 | export default leadsSlice.reducer
--------------------------------------------------------------------------------
/src/features/documentation/DocFeatures.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react"
2 | import { useDispatch } from "react-redux"
3 | import TitleCard from "../../components/Cards/TitleCard"
4 | import { setPageTitle, showNotification } from "../common/headerSlice"
5 | import GettingStartedNav from "./components/GettingStartedNav"
6 | import ReadMe from "./components/GettingStartedContent"
7 | import GettingStartedContent from "./components/GettingStartedContent"
8 | import FeaturesNav from "./components/FeaturesNav"
9 | import FeaturesContent from "./components/FeaturesContent"
10 |
11 |
12 |
13 | function Features(){
14 |
15 | const dispatch = useDispatch()
16 |
17 | useEffect(() => {
18 | dispatch(setPageTitle({ title : "Documentation"}))
19 | }, [])
20 |
21 |
22 | return(
23 | <>
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
26 | {message}
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | )
38 | }
39 |
40 | export default ConfirmationModalBody
--------------------------------------------------------------------------------
/src/features/dashboard/components/BarChart.js:
--------------------------------------------------------------------------------
1 | import {
2 | Chart as ChartJS,
3 | CategoryScale,
4 | LinearScale,
5 | BarElement,
6 | Title,
7 | Tooltip,
8 | Legend,
9 | } from 'chart.js';
10 | import { Bar } from 'react-chartjs-2';
11 | import TitleCard from '../../../components/Cards/TitleCard';
12 |
13 | ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
14 |
15 | function BarChart(){
16 |
17 | const options = {
18 | responsive: true,
19 | plugins: {
20 | legend: {
21 | position: 'top',
22 | }
23 | },
24 | };
25 |
26 | const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
27 |
28 | const data = {
29 | labels,
30 | datasets: [
31 | {
32 | label: 'Store 1',
33 | data: labels.map(() => { return Math.random() * 1000 + 500 }),
34 | backgroundColor: 'rgba(255, 99, 132, 1)',
35 | },
36 | {
37 | label: 'Store 2',
38 | data: labels.map(() => { return Math.random() * 1000 + 500 }),
39 | backgroundColor: 'rgba(53, 162, 235, 1)',
40 | },
41 | ],
42 | };
43 |
44 | return(
45 |
46 |
47 |
48 |
49 | )
50 | }
51 |
52 |
53 | export default BarChart
--------------------------------------------------------------------------------
/src/features/charts/components/BarChart.js:
--------------------------------------------------------------------------------
1 | import {
2 | Chart as ChartJS,
3 | CategoryScale,
4 | LinearScale,
5 | BarElement,
6 | Title,
7 | Tooltip,
8 | Legend,
9 | } from 'chart.js';
10 | import { Bar } from 'react-chartjs-2';
11 | import TitleCard from '../../../components/Cards/TitleCard';
12 |
13 | ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
14 |
15 | function BarChart(){
16 |
17 | const options = {
18 | responsive: true,
19 | plugins: {
20 | legend: {
21 | position: 'top',
22 | }
23 | },
24 | };
25 |
26 | const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
27 |
28 | const data = {
29 | labels,
30 | datasets: [
31 | {
32 | label: 'Store 1',
33 | data: labels.map(() => { return Math.random() * 1000 + 500 }),
34 | backgroundColor: 'rgba(255, 99, 132, 1)',
35 | },
36 | {
37 | label: 'Store 2',
38 | data: labels.map(() => { return Math.random() * 1000 + 500 }),
39 | backgroundColor: 'rgba(53, 162, 235, 1)',
40 | },
41 | ],
42 | };
43 |
44 | return(
45 |
46 |
47 |
48 |
49 | )
50 | }
51 |
52 |
53 | export default BarChart
--------------------------------------------------------------------------------
/src/app/auth.js:
--------------------------------------------------------------------------------
1 | import axios from "axios"
2 |
3 | const checkAuth = () => {
4 | /* Getting token value stored in localstorage, if token is not present we will open login page
5 | for all internal dashboard routes */
6 | const TOKEN = localStorage.getItem("token")
7 | const PUBLIC_ROUTES = ["login", "forgot-password", "register", "documentation"]
8 |
9 | const isPublicPage = PUBLIC_ROUTES.some( r => window.location.href.includes(r))
10 |
11 | if(!TOKEN && !isPublicPage){
12 | window.location.href = '/login'
13 | return;
14 | }else{
15 | axios.defaults.headers.common['Authorization'] = `Bearer ${TOKEN}`
16 |
17 | axios.interceptors.request.use(function (config) {
18 | // UPDATE: Add this code to show global loading indicator
19 | document.body.classList.add('loading-indicator');
20 | return config
21 | }, function (error) {
22 | return Promise.reject(error);
23 | });
24 |
25 | axios.interceptors.response.use(function (response) {
26 | // UPDATE: Add this code to hide global loading indicator
27 | document.body.classList.remove('loading-indicator');
28 | return response;
29 | }, function (error) {
30 | document.body.classList.remove('loading-indicator');
31 | return Promise.reject(error);
32 | });
33 | return TOKEN
34 | }
35 | }
36 |
37 | export default checkAuth
--------------------------------------------------------------------------------
/src/features/documentation/components/FeaturesNav.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react"
2 |
3 | function FeaturesNav({activeIndex}){
4 |
5 | const SECTION_NAVS = [
6 | {name : "Authentication", isActive : activeIndex === 1 ? true : false},
7 | {name : "Sidebar", isActive : false},
8 | {name : "Add New Page", isActive : false},
9 | {name : "Right sidebar", isActive : false},
10 | {name : "Themes", isActive : false},
11 | {name : "Modal", isActive : false},
12 | {name : "Notification", isActive : false},
13 | ]
14 | const [navs, setNavs] = useState(SECTION_NAVS)
15 |
16 | const scrollToSection = (currentIndex) => {
17 | setNavs(navs.map((n, k) => {
18 | if(k === currentIndex)return {...n, isActive : true}
19 | else return {...n, isActive : false}
20 | }))
21 | document.getElementById('feature'+(currentIndex+1)).scrollIntoView({behavior: 'smooth' })
22 | }
23 |
24 | return(
25 |
26 | - Features
27 |
28 | {
29 | navs.map((n, k) => {
30 | return(
31 | - scrollToSection(k)} className={n.isActive ? "bordered" : ""}>{n.name}
32 | )
33 | })
34 | }
35 |
36 | )
37 | }
38 |
39 | export default FeaturesNav
--------------------------------------------------------------------------------
/src/features/documentation/components/GettingStartedNav.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react"
2 |
3 | function GettingStartedNav({activeIndex}){
4 |
5 | const SECTION_NAVS = [
6 | {name : "Introduction", isActive : activeIndex === 1 ? true : false},
7 | {name : "How to Use", isActive : false},
8 | {name : "Tailwind CSS", isActive : false},
9 | {name : "Daisy UI", isActive : false},
10 | {name : "Chart JS", isActive : false},
11 | {name : "Redux Toolkit", isActive : false},
12 | {name : "Hero Icons", isActive : false},
13 | {name : "Project Structure", isActive : false},
14 | ]
15 | const [navs, setNavs] = useState(SECTION_NAVS)
16 |
17 | const scrollToSection = (currentIndex) => {
18 | setNavs(navs.map((n, k) => {
19 | if(k === currentIndex)return {...n, isActive : true}
20 | else return {...n, isActive : false}
21 | }))
22 | document.getElementById('getstarted'+(currentIndex+1)).scrollIntoView({behavior: 'smooth' })
23 | }
24 |
25 | return(
26 |
27 | - Getting Started
28 |
29 | {
30 | navs.map((n, k) => {
31 | return(
32 | - scrollToSection(k)} className={n.isActive ? "bordered" : ""}>{n.name}
33 | )
34 | })
35 | }
36 |
37 | )
38 | }
39 |
40 | export default GettingStartedNav
--------------------------------------------------------------------------------
/src/features/charts/components/ScatterChart.js:
--------------------------------------------------------------------------------
1 | import {
2 | Chart as ChartJS,
3 | Filler,
4 | ArcElement,
5 | Tooltip,
6 | Legend,
7 | } from 'chart.js';
8 | import { Scatter } from 'react-chartjs-2';
9 | import TitleCard from '../../../components/Cards/TitleCard';
10 |
11 | ChartJS.register(ArcElement, Tooltip, Legend,
12 | Tooltip,
13 | Filler,
14 | Legend);
15 |
16 | function ScatterChart(){
17 |
18 | const options = {
19 | scales: {
20 | y: {
21 | beginAtZero: true,
22 | },
23 | },
24 | };
25 |
26 | const data = {
27 | datasets: [
28 | {
29 | label: 'Orders > 1k',
30 | data: Array.from({ length: 100 }, () => ({
31 | x: Math.random() * 11,
32 | y: Math.random() * 31,
33 | })),
34 | backgroundColor: 'rgba(255, 99, 132, 1)',
35 | },
36 | {
37 | label: 'Orders > 2K',
38 | data: Array.from({ length: 100 }, () => ({
39 | x: Math.random() * 12,
40 | y: Math.random() * 12,
41 | })),
42 | backgroundColor: 'rgba(0, 0, 255, 1)',
43 | },
44 | ],
45 | };
46 |
47 | return(
48 |
49 |
50 |
51 | )
52 | }
53 |
54 |
55 | export default ScatterChart
--------------------------------------------------------------------------------
/src/components/Input/SelectBox.js:
--------------------------------------------------------------------------------
1 |
2 | import axios from 'axios'
3 | import capitalize from 'capitalize-the-first-letter'
4 | import React, { useState, useEffect } from 'react'
5 | import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon'
6 |
7 |
8 | function SelectBox(props){
9 |
10 | const {labelTitle, labelDescription, defaultValue, containerStyle, placeholder, labelStyle, options, updateType, updateFormValue} = props
11 |
12 | const [value, setValue] = useState(defaultValue || "")
13 |
14 |
15 | const updateValue = (newValue) =>{
16 | updateFormValue({updateType, value : newValue})
17 | setValue(newValue)
18 | }
19 |
20 |
21 | return (
22 |
23 |
28 |
29 |
37 |
18 |
19 | {/** Route header */}
20 |
setIsExpanded(!isExpanded)}>
21 | {icon} {name}
22 |
23 |
24 |
25 | {/** Submenu list */}
26 |
27 |
28 | {
29 | submenu.map((m, k) => {
30 | return(
31 | -
32 |
33 | {m.icon} {m.name}
34 | {
35 | location.pathname == m.path ? () : null
37 | }
38 |
39 |
40 | )
41 | })
42 | }
43 |
44 |
45 |
