├── .eslintrc.json ├── public ├── 01.png ├── 02.png ├── 03.png ├── 04.png ├── 05.png ├── favicon.ico └── vercel.svg ├── postcss.config.js ├── images ├── favicon.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 ├── pages ├── _app.js ├── api │ └── hello.js ├── index.js ├── category.js └── sub-category.js ├── tailwind.config.js ├── next.config.js ├── components ├── layout │ ├── Footer.js │ ├── header │ │ ├── LogOutButton.js │ │ ├── SearchBox.js │ │ ├── Notifications.js │ │ └── UserMenu.js │ ├── sidebar │ │ ├── Logo.js │ │ ├── SettingButton.js │ │ ├── NavItem.js │ │ └── Nav.js │ ├── Header.js │ ├── Sidebar.js │ └── Layout.js ├── category │ ├── Category.js │ ├── CategoryTitle.js │ └── CategoryTable.js ├── sub-category │ ├── SubCategory.js │ ├── SubCategoryTitle.js │ └── SubCategoryTable.js ├── common │ ├── PageComponentTitle.js │ └── Modal.js └── dashboard │ └── Dashboard.js ├── .gitignore ├── styles └── globals.css ├── utils └── outsideClick.js ├── package.json ├── README.md ├── .vscode └── settings.json └── LICENSE /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /public/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/public/01.png -------------------------------------------------------------------------------- /public/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/public/02.png -------------------------------------------------------------------------------- /public/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/public/03.png -------------------------------------------------------------------------------- /public/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/public/04.png -------------------------------------------------------------------------------- /public/05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/public/05.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/images/favicon.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /images/user-36-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/images/user-36-01.jpg -------------------------------------------------------------------------------- /images/user-36-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/images/user-36-02.jpg -------------------------------------------------------------------------------- /images/user-36-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/images/user-36-03.jpg -------------------------------------------------------------------------------- /images/user-36-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/images/user-36-04.jpg -------------------------------------------------------------------------------- /images/user-36-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/images/user-36-05.jpg -------------------------------------------------------------------------------- /images/user-36-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/images/user-36-06.jpg -------------------------------------------------------------------------------- /images/user-36-07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/images/user-36-07.jpg -------------------------------------------------------------------------------- /images/user-36-08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/images/user-36-08.jpg -------------------------------------------------------------------------------- /images/user-36-09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/images/user-36-09.jpg -------------------------------------------------------------------------------- /images/user-avatar-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss/HEAD/images/user-avatar-32.png -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | "./pages/**/*.{js,ts,jsx,tsx}", 4 | "./components/**/*.{js,ts,jsx,tsx}", 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | plugins: [], 10 | } 11 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | images:{ 5 | domains:['images.unsplash.com', 'via.placeholder.com', 'randomuser.me'], 6 | }, 7 | } 8 | 9 | module.exports = nextConfig 10 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Dashboard from '../components/dashboard/Dashboard'; 2 | import Layout from '../components/layout/Layout'; 3 | 4 | 5 | export default function Index() { 6 | return ( 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /pages/category.js: -------------------------------------------------------------------------------- 1 | import Category from '../components/category/Category'; 2 | import Layout from '../components/layout/Layout'; 3 | 4 | 5 | export default function categoryPage() { 6 | return ( 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /pages/sub-category.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/layout/Layout'; 2 | import SubCategory from '../components/sub-category/SubCategory'; 3 | 4 | 5 | export default function subCategoryPage() { 6 | return ( 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /components/layout/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer = () => { 4 | return ( 5 |
6 | {new Date().getFullYear()} @ copy & fun :) 7 |
8 | ); 9 | }; 10 | 11 | export default Footer; 12 | -------------------------------------------------------------------------------- /.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 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | # vercel 35 | .vercel 36 | 37 | .git.zip 38 | package-old.json 39 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | .rc-table-custom table { 7 | width: 100%; 8 | } 9 | 10 | li.js-li { 11 | display: inline-block; 12 | padding: 7px; 13 | font-size: 18px; 14 | } 15 | 16 | li.js-li.active { 17 | color: white; 18 | font-weight: 700; 19 | background: purple; 20 | border-radius: 6px; 21 | } 22 | 23 | ul.js-ul { 24 | margin-top: 12px; 25 | text-align: right; 26 | } 27 | 28 | .pure-modal .panel-heading { 29 | @apply bg-purple-600!important; 30 | } 31 | 32 | p.product-title { 33 | margin-top: 0px !important; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /utils/outsideClick.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | export default function OutsideClick(ref) { 4 | 5 | const [isClicked, setIsClicked] = useState(); 6 | 7 | //console.log("outside Ref", isClicked) 8 | useEffect(() => { 9 | function handleClickOutside(event) { 10 | if (ref.current && !ref.current.contains(event.target)) { 11 | setIsClicked(true); 12 | } else { 13 | setIsClicked(false); 14 | } 15 | } 16 | 17 | document.addEventListener("mousedown", handleClickOutside); 18 | return () => { 19 | document.removeEventListener("mousedown", handleClickOutside); 20 | }; 21 | }, [ref]); 22 | 23 | return isClicked; 24 | } 25 | -------------------------------------------------------------------------------- /components/layout/header/LogOutButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const LogOutButton = () => { 4 | return ( 5 | 11 | ); 12 | }; 13 | 14 | export default LogOutButton; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backend_admin_by_react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@heroicons/react": "^2.0.17", 13 | "next": "^14.0.3", 14 | "rc-table": "^7.32.1", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0", 17 | "react-js-pagination": "^3.0.2", 18 | "react-transition-group": "^4.4.5" 19 | }, 20 | "devDependencies": { 21 | "autoprefixer": "^10.4.2", 22 | "eslint": "8.10.0", 23 | "eslint-config-next": "^14.0.3", 24 | "postcss": "^8.4.8", 25 | "tailwindcss": "^3.0.23" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /components/layout/header/SearchBox.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const SearchBox = () => { 4 | return ( 5 |
6 | 9 | 10 |
11 | ); 12 | }; 13 | 14 | export default SearchBox; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NextJs Tailwind Admin Panle 2 | 3 | ## Simple NextJs Tailwind Admin Panel for starting background panel. you can add extra feature like as modal or other features. 4 | 5 | --- 6 | 7 | ## Sample Page One 8 | 9 | ## ![This is a alt text.](/public/01.png) 10 | 11 | # Sample Page Two 12 | 13 | ## ![This is a alt text.](/public/02.png) 14 | 15 | --- 16 | 17 | # Sample Page Three 18 | 19 | ## ![This is a alt text.](/public/03.png) 20 | 21 | --- 22 | 23 | # Sample Page Four 24 | 25 | ## ![This is a alt text.](/public/04.png) 26 | 27 | --- 28 | 29 | # Sample Page Five 30 | 31 | ## ![This is a alt text.](/public/05.png) 32 | 33 | --- 34 | 35 | ## Install 36 | 37 | npm install
38 | npm run dev 39 | 40 | --- 41 | 42 | ## Credits 43 | 44 | Inspired by https://codepen.io/azrikahar/pen/abZzaga 45 | -------------------------------------------------------------------------------- /components/layout/sidebar/Logo.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/link-passhref */ 2 | import Link from 'next/link'; 3 | import React from 'react'; 4 | 5 | const Logo = () => { 6 | return ( 7 | 8 | 9 | 10 | Company logo 11 | 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default Logo; -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.activeBackground": "#fbed80", 4 | "activityBar.activeBorder": "#06b9a5", 5 | "activityBar.background": "#fbed80", 6 | "activityBar.foreground": "#15202b", 7 | "activityBar.inactiveForeground": "#15202b99", 8 | "activityBarBadge.background": "#06b9a5", 9 | "activityBarBadge.foreground": "#15202b", 10 | "sash.hoverBorder": "#fbed80", 11 | "statusBar.background": "#f9e64f", 12 | "statusBar.foreground": "#15202b", 13 | "statusBarItem.hoverBackground": "#f7df1e", 14 | "statusBarItem.remoteBackground": "#f9e64f", 15 | "statusBarItem.remoteForeground": "#15202b", 16 | "titleBar.activeBackground": "#f9e64f", 17 | "titleBar.activeForeground": "#15202b", 18 | "titleBar.inactiveBackground": "#f9e64f99", 19 | "titleBar.inactiveForeground": "#15202b99", 20 | "commandCenter.border": "#15202b99" 21 | }, 22 | "peacock.color": "#f9e64f" 23 | } 24 | -------------------------------------------------------------------------------- /components/layout/Header.js: -------------------------------------------------------------------------------- 1 | import { MoonIcon } from '@heroicons/react/24/solid'; 2 | import React from 'react'; 3 | import LogOutButton from './header/LogOutButton'; 4 | import Notifications from './header/Notifications'; 5 | import SearchBox from './header/SearchBox'; 6 | import UserMenu from './header/UserMenu'; 7 | 8 | const Header = ({mobileNavsidebar, setMobileNavsidebar}) => { 9 | return ( 10 |
11 | 12 | setMobileNavsidebar(!mobileNavsidebar)}/> 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 |
21 |
22 |
23 | ); 24 | }; 25 | 26 | export default Header; -------------------------------------------------------------------------------- /components/category/Category.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PageComponentTitle from '../common/PageComponentTitle'; 3 | import CategoryTable from './CategoryTable'; 4 | 5 | const Category = () => { 6 | 7 | return ( 8 |
9 | 10 |
11 | 16 |
17 | 18 |
19 | 20 |
21 | 22 |
23 | 24 |
25 | 26 | 27 |
28 | ); 29 | }; 30 | 31 | export default Category; -------------------------------------------------------------------------------- /components/layout/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import OutsideClick from '../../utils/outsideClick'; 3 | import Nav from './sidebar/Nav'; 4 | import SettingButton from './sidebar/SettingButton'; 5 | import Logo from './sidebar/logo'; 6 | 7 | const Sidebar = ({mobileNavsidebar}) => { 8 | const sidebarRef = useRef(null); 9 | const sidebarOutsideClick = OutsideClick(sidebarRef); 10 | 11 | //console.log("sidebar Ref", sidebarRef) 12 | //console.log("sidebar Ref sidebarOutsideClick", sidebarOutsideClick) 13 | return ( 14 | 22 | ); 23 | }; 24 | 25 | export default Sidebar; -------------------------------------------------------------------------------- /components/sub-category/SubCategory.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PageComponentTitle from '../common/PageComponentTitle'; 3 | import SubCategoryTable from './SubCategoryTable'; 4 | 5 | const SubCategory = () => { 6 | return ( 7 |
8 | 9 |
10 | 15 |
16 | 17 |
18 | 19 |
20 | 21 |
22 | 23 |
24 | 25 | 26 |
27 | ); 28 | }; 29 | 30 | export default SubCategory; -------------------------------------------------------------------------------- /components/layout/header/Notifications.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Notifications = () => { 4 | return ( 5 | 13 | ); 14 | }; 15 | 16 | export default Notifications; -------------------------------------------------------------------------------- /images/icon-01.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/icon-02.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/icon-03.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 syed kamruzzaman 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /components/layout/Layout.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import React, { Fragment, useState } from "react"; 3 | import Footer from "./Footer"; 4 | import Header from "./Header"; 5 | import Sidebar from "./Sidebar"; 6 | 7 | const Layout = ({children, title="Sample Title"}) => { 8 | //console.log("layout", title) 9 | const [mobileNavsidebar, setMobileNavsidebar] = useState(false); 10 | 11 | 12 | 13 | return ( 14 | 15 | 16 | 17 | {title} 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 |
27 |
28 | {children} 29 |
30 | 31 |
32 |
33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | export default Layout; 40 | -------------------------------------------------------------------------------- /components/layout/sidebar/SettingButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const SettingButton = () => { 4 | return ( 5 |
6 | 13 |
14 | ); 15 | }; 16 | 17 | export default SettingButton; -------------------------------------------------------------------------------- /components/category/CategoryTitle.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Modal from "../common/Modal"; 3 | 4 | const CategoryTitle = () => { 5 | const [modal, setModal] = useState(false); 6 | return ( 7 | <> 8 |
9 |

Category

10 |

List, view and edit

11 |
12 | 13 |
14 | 34 | 35 |
36 | 37 | ); 38 | }; 39 | 40 | export default CategoryTitle; 41 | -------------------------------------------------------------------------------- /components/sub-category/SubCategoryTitle.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Modal from "../common/Modal"; 3 | 4 | const SubCategoryTitle = () => { 5 | const [modal, setModal] = useState(false); 6 | return ( 7 | <> 8 |
9 |

Category

10 |

List, view and edit

11 |
12 | 13 |
14 | 34 | 35 |
36 | 37 | ); 38 | }; 39 | 40 | export default SubCategoryTitle; 41 | -------------------------------------------------------------------------------- /components/common/PageComponentTitle.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Modal from './Modal'; 3 | 4 | const PageComponentTitle = ({title, titleDescription, buttonTitle}) => { 5 | const [modal, setModal] = useState(false); 6 | 7 | return ( 8 | <> 9 |
10 |

{title}

11 |

{titleDescription}

12 |
13 | 14 |
15 | 35 | 36 |
37 | 38 | ); 39 | }; 40 | 41 | export default PageComponentTitle; -------------------------------------------------------------------------------- /components/layout/sidebar/NavItem.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/link-passhref */ 2 | /* eslint-disable react/jsx-key */ 3 | import Link from 'next/link'; 4 | import React, { useEffect, useState } from 'react'; 5 | 6 | 7 | const NavItem = ({sidebarStatus, menuTitle, subMenu, subMenuArray, hrefLink, children}) => { 8 | const [subMenuToggleStatus, setSubMenuToggleStatus] = useState(false); 9 | const subMenuToggle = ()=>{ 10 | setSubMenuToggleStatus(!subMenuToggleStatus) 11 | } 12 | 13 | useEffect(()=>{ 14 | if(!sidebarStatus){ 15 | setSubMenuToggleStatus(false) 16 | } 17 | },[sidebarStatus]) 18 | //console.log('submenu', sidebarStatus) 19 | return ( 20 | <> 21 | 22 | 23 | {children} 24 | {menuTitle} 25 | {menuTitle} 26 | 27 | 28 | 29 | {/* Chile Menu */} 30 | {subMenu && ( 31 | 39 | )} 40 | 41 | 42 | 43 | ); 44 | }; 45 | 46 | export default NavItem; -------------------------------------------------------------------------------- /components/layout/header/UserMenu.js: -------------------------------------------------------------------------------- 1 | import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid'; 2 | import React, { useEffect, useRef, useState } from "react"; 3 | import OutsideClick from '../../../utils/outsideClick'; 4 | 5 | const UserMenu = () => { 6 | const [userMenuStatus, setUserMenuStatus] = useState(false) ; 7 | const buttonRef = useRef(null); 8 | const buttonOutsideClick = OutsideClick(buttonRef); 9 | 10 | const userMenuhandle =()=>{ 11 | setUserMenuStatus(!userMenuStatus) 12 | } 13 | 14 | useEffect(()=>{ 15 | if(buttonOutsideClick){ 16 | setUserMenuStatus(false) 17 | } 18 | },[buttonOutsideClick]) 19 | 20 | //console.log("userbutton", buttonOutsideClick) 21 | return ( 22 | 49 | ); 50 | }; 51 | 52 | export default UserMenu; 53 | -------------------------------------------------------------------------------- /components/layout/sidebar/Nav.js: -------------------------------------------------------------------------------- 1 | import { 2 | CloudIcon, DocumentIcon, FolderIcon 3 | } from "@heroicons/react/24/solid"; 4 | import React, { useEffect, useState } from "react"; 5 | import NavItem from "./NavItem"; 6 | 7 | const Nav = ({ sidebarOutsideClick }) => { 8 | const [sidebarStatus, setSidebarStatus] = useState(false); 9 | const [subMenuToggleStatus, setSubMenuToggleStatus] = useState(false); 10 | 11 | const sidebarClose = () => { 12 | setSidebarStatus(false); 13 | }; 14 | 15 | const sidebarOpen = () => { 16 | setSidebarStatus(true); 17 | }; 18 | 19 | const subMenuToggle = () => { 20 | setSubMenuToggleStatus(!subMenuToggleStatus); 21 | }; 22 | 23 | //if menu has chile menu then use seperate array 24 | const childMenu = [ 25 | { 26 | subMenuTitle: "child One", 27 | linkHref: "/" 28 | }, 29 | { 30 | subMenuTitle: "child Two", 31 | linkHref: "/" 32 | }, 33 | { 34 | subMenuTitle: "child Three", 35 | linkHref: "/" 36 | } 37 | ]; 38 | 39 | useEffect(() => { 40 | if (sidebarOutsideClick) { 41 | setSidebarStatus(false); 42 | } 43 | }, [sidebarOutsideClick]); 44 | //console.log("sidebar Nav", sidebarOutsideClick) 45 | return ( 46 | <> 47 | 82 | 83 | ); 84 | }; 85 | 86 | export default Nav; 87 | -------------------------------------------------------------------------------- /components/sub-category/SubCategoryTable.js: -------------------------------------------------------------------------------- 1 | import Table from 'rc-table'; 2 | import React, { useState } from 'react'; 3 | import Pagination from "react-js-pagination"; 4 | 5 | const SubCategoryTable = () => { 6 | const columns = [ 7 | { 8 | title: 'Name', 9 | dataIndex: 'name', 10 | key: 'name', 11 | width: 400, 12 | className:"text-white bg-gray-800 p-2 border-r-2 border-b-2", 13 | rowClassName:"bg-black-ripon" 14 | }, 15 | { 16 | title: 'Category', 17 | dataIndex: 'subCount', 18 | key: 'subCount', 19 | width: 400, 20 | className:"text-white bg-gray-600 p-2 border-r-2 border-b-2" 21 | }, 22 | { 23 | title: 'Total Product', 24 | dataIndex: 'productCount', 25 | key: 'productCount', 26 | width: 400, 27 | className:"text-white bg-gray-800 p-2 border-r-2 border-b-2" 28 | }, 29 | { 30 | title: 'Operations', 31 | dataIndex: '', 32 | key: 'operations', 33 | className:"text-white bg-gray-600 p-2 border-b-2", 34 | render: () => <>View | Edit | Delete, 35 | 36 | }, 37 | ]; 38 | 39 | const data = [ 40 | { id:'001',name: 'Jack', subCount: 28, productCount: 'some where' }, 41 | { id:'002',name: 'Rose', subCount: 36, productCount: 'some where' }, 42 | ]; 43 | 44 | //Pagination 45 | const [activePage, setActivePage] = useState(15) 46 | const handlePageChange = (pageNumber)=>{ 47 | setActivePage(pageNumber) 48 | } 49 | 50 | return ( 51 | <> 52 | data.id} className='bg-purple-700 p-4 w-full text-center rc-table-custom font-semibold '/> 53 | 67 | 68 | 69 | ); 70 | }; 71 | 72 | export default SubCategoryTable; -------------------------------------------------------------------------------- /components/category/CategoryTable.js: -------------------------------------------------------------------------------- 1 | import Table from 'rc-table'; 2 | import React, { useState } from 'react'; 3 | import Pagination from "react-js-pagination"; 4 | 5 | 6 | const CategoryTable = () => { 7 | const columns = [ 8 | { 9 | title: 'Name', 10 | dataIndex: 'name', 11 | key: 'name', 12 | width: 400, 13 | className:"text-white bg-gray-800 p-2 border-r-2 border-b-2", 14 | rowClassName:"bg-black-ripon" 15 | }, 16 | { 17 | title: 'Total Subcategory', 18 | dataIndex: 'subCount', 19 | key: 'subCount', 20 | width: 400, 21 | className:"text-white bg-gray-600 p-2 border-r-2 border-b-2" 22 | }, 23 | { 24 | title: 'Total Product', 25 | dataIndex: 'productCount', 26 | key: 'productCount', 27 | width: 400, 28 | className:"text-white bg-gray-800 p-2 border-r-2 border-b-2" 29 | }, 30 | { 31 | title: 'Operations', 32 | dataIndex: '', 33 | key: 'operations', 34 | className:"text-white bg-gray-600 p-2 border-b-2", 35 | render: () => <>View | Edit | Delete, 36 | 37 | }, 38 | ]; 39 | 40 | const data = [ 41 | { id:'001',name: 'Jack', subCount: 28, productCount: 'some where' }, 42 | { id:'002',name: 'Rose', subCount: 36, productCount: 'some where' }, 43 | ]; 44 | 45 | //Pagination 46 | const [activePage, setActivePage] = useState(15) 47 | const handlePageChange = (pageNumber)=>{ 48 | setActivePage(pageNumber) 49 | } 50 | 51 | return ( 52 | <> 53 |
data.id} className='bg-purple-700 p-4 w-full text-center rc-table-custom font-semibold '/> 54 | 68 | 69 | 70 | ); 71 | }; 72 | 73 | export default CategoryTable; -------------------------------------------------------------------------------- /components/common/Modal.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | 3 | const Modal = ({ modal, setModal, headerTitle }) => { 4 | const [selectedImage, setSelectedImage] = useState(); 5 | const [name, setName] = useState(""); 6 | const [category, setCategory] = useState(""); 7 | 8 | const imageChange = (e) => { 9 | if (e.target.files && e.target.files.length > 0) { 10 | setSelectedImage(e.target.files); 11 | } 12 | }; 13 | 14 | const removeSelectedImage = () => { 15 | setSelectedImage(); 16 | }; 17 | 18 | const handleSubmit = () => { 19 | // Reset modal state 20 | setModal(false); 21 | }; 22 | 23 | useEffect(() => { 24 | if (!modal) { 25 | setSelectedImage(); 26 | } 27 | }, [modal]); 28 | 29 | return ( 30 | <> 31 | {modal && ( 32 |
33 |
34 |
35 | 36 |
37 |

{headerTitle}

38 | 41 |
42 | 43 |
44 |
45 | 46 | setName(e.target.value)} 51 | /> 52 |
53 |
54 | 55 | 66 |
67 |
68 | 69 | 77 |
78 | {selectedImage && 79 | [...selectedImage].map((file, index) => ( 80 | 81 | ))} 82 |
83 | {selectedImage && ( 84 | 87 | )} 88 |
89 |
90 | 93 |
94 |
95 |
96 | 120 |
121 | )} 122 | 123 | ); 124 | }; 125 | 126 | export default Modal; 127 | -------------------------------------------------------------------------------- /components/dashboard/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Dashboard = () => { 4 | return ( 5 | <> 6 |
7 | 8 |
9 |
10 |

Dashboard

11 |

Mobile UX/UI Design course

12 |
13 |
14 | 20 | 26 |
27 |
28 |
29 |
30 |
31 | 34 |
35 |
36 | 62 37 | Students 38 |
39 |
40 |
41 |
42 | 45 |
46 |
47 | 6.8 48 | Average mark 49 |
50 |
51 |
52 |
53 | 56 |
57 |
58 | 9 59 | (14%) 60 | Underperforming students 61 |
62 |
63 |
64 |
65 | 68 |
69 |
70 | 83% 71 | Finished homeworks 72 |
73 |
74 |
75 |
76 | 77 |
78 |
The number of applied and left students per month
79 |
80 |
Chart
81 |
82 |
83 |
84 |
85 | 90 |
91 |
92 | 25 93 | Lections left 94 |
95 |
96 |
97 |
98 | 101 |
102 |
103 | 139 104 | Hours spent on lections 105 |
106 |
107 | 108 |
109 |
110 | Students by average mark 111 | 117 | {/* Refer here for full dropdown menu code: https://tailwindui.com/components/application-ui/elements/dropdowns */} 118 |
119 |
120 |
    121 |
  • 122 |
    123 | Annette Watson profile picture 124 |
    125 | Annette Watson 126 | 9.3 127 |
    • 128 |
  • 129 |
    130 | Calvin Steward profile picture 131 |
    132 | Calvin Steward 133 | 8.9 134 |
    • 135 |
  • 136 |
    137 | Ralph Richards profile picture 138 |
    139 | Ralph Richards 140 | 8.7 141 |
    • 142 |
  • 143 |
    144 | Bernard Murphy profile picture 145 |
    146 | Bernard Murphy 147 | 8.2 148 |
    • 149 |
  • 150 |
    151 | Arlene Robertson profile picture 152 |
    153 | Arlene Robertson 154 | 8.2 155 |
    • 156 |
  • 157 |
    158 | Jane Lane profile picture 159 |
    160 | Jane Lane 161 | 8.1 162 |
    • 163 |
  • 164 |
    165 | Pat Mckinney profile picture 166 |
    167 | Pat Mckinney 168 | 7.9 169 |
    • 170 |
  • 171 |
    172 | Norman Walters profile picture 173 |
    174 | Norman Walters 175 | 7.7 176 |
    • 177 |
178 |
179 |
180 |
181 |
Students by type of studying
182 |
183 |
Chart
184 |
185 |
186 |
187 | 188 |
189 | 190 | 191 | ); 192 | }; 193 | 194 | export default Dashboard; --------------------------------------------------------------------------------