├── .commitlintrc ├── .editorconfig ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ └── issue_template.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .npmrc ├── .storybook ├── main.ts └── preview.tsx ├── .versionrc ├── .vscode ├── extensions.json └── launch.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── biome.json ├── bun.lockb ├── jest.config.js ├── jest.setup.js ├── next-env.d.ts ├── next.config.js ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── logo.png ├── mock │ └── products.json ├── site.webmanifest └── static │ ├── icons │ ├── .gitkeep │ ├── icon-128x128.png │ ├── icon-16x16.png │ ├── icon-192x192.png │ ├── icon-32x32.png │ └── icon-512x512.png │ ├── images │ ├── .gitkeep │ ├── img-email.svg │ ├── og.png │ └── powered-by-vercel.svg │ ├── sounds │ └── .gitkeep │ └── videos │ └── .gitkeep ├── renovate.json ├── src ├── app │ ├── (auth) │ │ ├── layout.module.css │ │ ├── layout.tsx │ │ ├── login │ │ │ └── page.tsx │ │ └── register │ │ │ └── page.tsx │ ├── (dashboard) │ │ └── dashboard │ │ │ ├── chart │ │ │ └── page.tsx │ │ │ ├── form │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ ├── page.tsx │ │ │ ├── settings │ │ │ └── page.tsx │ │ │ └── table │ │ │ └── page.tsx │ ├── layout.tsx │ ├── opengraph-image.png │ ├── page.tsx │ ├── provider.tsx │ ├── robots.ts │ └── twitter-image.png ├── components │ ├── Auth │ │ ├── LoginForm.tsx │ │ └── RegisterForm.tsx │ ├── Dashboard │ │ ├── BalanceCard.tsx │ │ ├── BalanceChart.tsx │ │ ├── Dashboard.module.css │ │ ├── DashboardContent.tsx │ │ ├── OverviewCard.tsx │ │ ├── ProfileCard.tsx │ │ ├── TransactionCard.tsx │ │ └── WelcomeCard.tsx │ ├── DirectionSwitcher │ │ └── DirectionSwitcher.tsx │ ├── Footer │ │ ├── Footer.module.css │ │ ├── Footer.stories.tsx │ │ └── Footer.tsx │ ├── Form │ │ ├── SimpleForm.tsx │ │ └── UploadForm.tsx │ ├── Headers │ │ ├── AdminHeader.module.css │ │ ├── AdminHeader.stories.tsx │ │ └── AdminHeader.tsx │ ├── Landing │ │ ├── CTASection.module.css │ │ ├── CTASection.tsx │ │ ├── FAQSection.module.css │ │ ├── FAQSection.tsx │ │ ├── FeatureSection.module.css │ │ ├── FeaturesSection.tsx │ │ ├── Header.module.css │ │ ├── Header.tsx │ │ ├── HeroSection.module.css │ │ ├── HeroSection.tsx │ │ ├── LandingContainer.module.css │ │ ├── LandingContainer.tsx │ │ ├── PricingSection.module.css │ │ ├── PricingSection.tsx │ │ ├── SocialProofSection.module.css │ │ └── SocialProofSection.tsx │ ├── Logo │ │ ├── Logo.module.css │ │ ├── Logo.stories.tsx │ │ └── Logo.tsx │ ├── Navbar │ │ ├── NavLinksGroup.module.css │ │ ├── NavLinksGroup.stories.tsx │ │ ├── NavLinksGroup.tsx │ │ ├── Navbar.module.css │ │ ├── Navbar.stories.tsx │ │ └── Navbar.tsx │ ├── OGImage │ │ └── OGImage.tsx │ ├── PageContainer │ │ ├── PageContainer.stories.tsx │ │ └── PageContainer.tsx │ ├── StatsGroup │ │ ├── StatsGroup.stories.tsx │ │ ├── StatsGroup.tsx │ │ ├── index.tsx │ │ └── mock.ts │ ├── Table │ │ ├── PaginationTable.tsx │ │ └── SimpleTable.tsx │ ├── ThemeSwitcher │ │ └── ThemeSwitcher.tsx │ └── UserButton │ │ ├── UserButton.module.css │ │ ├── UserButton.stories.tsx │ │ └── UserButton.tsx ├── config │ └── index.ts ├── hooks │ └── use-custom-table.ts ├── scripts │ ├── babel.config.js │ └── wdyr.ts ├── services │ └── products │ │ ├── index.ts │ │ └── types.ts ├── styles │ ├── fonts.ts │ └── theme.ts ├── types │ └── nav-item.ts └── utils │ └── .gitkeep └── tsconfig.json /.commitlintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@commitlint/config-conventional" 4 | ], 5 | "rules": { 6 | "type-enum": [ 7 | 2, 8 | "always", 9 | [ 10 | "feat", 11 | "fix", 12 | "refactor", 13 | "style", 14 | "docs", 15 | "chore", 16 | "test", 17 | "revert" 18 | ] 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | indent_style = tab 8 | indent_size = 2 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | # github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | # patreon: # Replace with a single Patreon username 5 | # open_collective: # Replace with a single Open Collective username 6 | # ko_fi: # Replace with a single Ko-fi username 7 | # tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | # community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | # liberapay: # Replace with a single Liberapay username 10 | # issuehunt: # Replace with a single IssueHunt username 11 | # otechie: # Replace with a single Otechie username 12 | # lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/issue_template.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: ISSUE_TEMPLATE 3 | about: Issue template 4 | title: "\U0001F41B" 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | 12 | ## Expected Behavior 13 | 14 | 15 | 16 | ## Current Behavior 17 | 18 | 19 | 20 | ## Possible Solution 21 | 22 | 23 | 24 | ## Steps to Reproduce (for bugs) 25 | 26 | 27 | 1. 28 | 2. 29 | 3. 30 | 4. 31 | 32 | ## Context 33 | 34 | 35 | 36 | ## Your Environment 37 | 38 | * Version used: 39 | * Environment name and version (e.g. Chrome 39, node.js 5.4): 40 | * Operating System and version (desktop or mobile): 41 | * Link to your project: 42 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Description 4 | 5 | 6 | ## Related Issue 7 | 8 | 9 | 10 | 11 | 12 | ## Motivation and Context 13 | 14 | 15 | ## How Has This Been Tested? 16 | 17 | 18 | 19 | 20 | ## Screenshots (if appropriate): 21 | 22 | ## Types of changes 23 | 24 | - [ ] Bug fix (non-breaking change which fixes an issue) 25 | - [ ] New feature (non-breaking change which adds functionality) 26 | - [ ] Breaking change (fix or feature that would cause existing functionality to change) 27 | 28 | ## Checklist: 29 | 30 | 31 | - [ ] My code follows the code style of this project. 32 | - [ ] My change requires a change to the documentation. 33 | - [ ] I have updated the documentation accordingly. 34 | - [ ] I have read the **CONTRIBUTING** document. 35 | -------------------------------------------------------------------------------- /.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 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # pwa 37 | public/*.js 38 | public/*.map 39 | 40 | # sitemap 41 | public/robots.txt 42 | public/sitemap.xml 43 | public/sitemap-0.xml 44 | 45 | # partytown 46 | public/~partytown 47 | 48 | .env 49 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install commitlint --edit $1 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | bun lint-staged 5 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers=true 2 | strict-peer-dependencies=false 3 | legacy-peer-deps=true 4 | -------------------------------------------------------------------------------- /.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from "@storybook/nextjs"; 2 | const config: StorybookConfig = { 3 | stories: ["../src/**/*.(stories|story).@(js|jsx|ts|tsx)"], 4 | addons: [ 5 | "@storybook/addon-essentials", 6 | "storybook-dark-mode", 7 | "@storybook/addon-styling", 8 | ], 9 | framework: { 10 | name: "@storybook/nextjs", 11 | options: {}, 12 | }, 13 | }; 14 | export default config; 15 | -------------------------------------------------------------------------------- /.storybook/preview.tsx: -------------------------------------------------------------------------------- 1 | import "@mantine/core/styles.css"; 2 | // biome-ignore lint/style/useImportType: 3 | import React from "react"; 4 | import { useEffect } from "react"; 5 | import { addons } from "@storybook/preview-api"; 6 | import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode"; 7 | import { MantineProvider, useMantineColorScheme } from "@mantine/core"; 8 | 9 | const channel = addons.getChannel(); 10 | 11 | function ColorSchemeWrapper({ children }: { children: React.ReactNode }) { 12 | const { setColorScheme } = useMantineColorScheme(); 13 | const handleColorScheme = (value: boolean) => 14 | setColorScheme(value ? "dark" : "light"); 15 | 16 | useEffect(() => { 17 | channel.on(DARK_MODE_EVENT_NAME, handleColorScheme); 18 | return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme); 19 | }, [channel]); 20 | 21 | return <>{children}; 22 | } 23 | 24 | export const decorators = [ 25 | (renderStory: any) => ( 26 | {renderStory()} 27 | ), 28 | (renderStory: any) => {renderStory()}, 29 | ]; 30 | -------------------------------------------------------------------------------- /.versionrc: -------------------------------------------------------------------------------- 1 | { 2 | "types": [ 3 | { 4 | "type": "feat", 5 | "section": "Features" 6 | }, 7 | { 8 | "type": "fix", 9 | "section": "Bug Fixes" 10 | }, 11 | { 12 | "type": "refactor", 13 | "section": "Improvements" 14 | }, 15 | { 16 | "type": "style", 17 | "section": "Styles" 18 | }, 19 | { 20 | "type": "docs", 21 | "section": "Documentation" 22 | }, 23 | { 24 | "type": "chore", 25 | "section": "Chores", 26 | "hidden": true 27 | }, 28 | { 29 | "type": "test", 30 | "section": "Tests", 31 | "hidden": true 32 | }, 33 | { 34 | "type": "revert", 35 | "section": "Reverts", 36 | "hidden": true 37 | } 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "formulahendry.auto-complete-tag", 4 | "aaron-bond.better-comments", 5 | "mikestead.dotenv", 6 | "EditorConfig.EditorConfig", 7 | "usernamehw.errorlens", 8 | "dbaeumer.vscode-eslint", 9 | "esbenp.prettier-vscode", 10 | "meganrogge.template-string-converter" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Next.js: debug server-side", 6 | "type": "node-terminal", 7 | "request": "launch", 8 | "command": "npm run dev" 9 | }, 10 | { 11 | "name": "Next.js: debug client-side (Edge)", 12 | "type": "pwa-msedge", 13 | "request": "launch", 14 | "url": "http://localhost:3000" 15 | }, 16 | { 17 | "name": "Next.js: debug client-side (Chrome)", 18 | "type": "pwa-chrome", 19 | "request": "launch", 20 | "url": "http://localhost:3000" 21 | }, 22 | { 23 | "name": "Next.js: debug full stack", 24 | "type": "node-terminal", 25 | "request": "launch", 26 | "command": "npm run dev", 27 | "console": "integratedTerminal", 28 | "serverReadyAction": { 29 | "pattern": "started server on .+, url: (https?://.+)", 30 | "uriFormat": "%s", 31 | "action": "debugWithChrome" 32 | } 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Joshua Lee 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 | Mantine Admin 8 |

9 | 10 | 11 |

12 | Mantine Admin Banner 13 |

14 |

15 | 💻 A Modern Dashboard with Next.js.! 16 |

17 | 18 | --- 19 | 20 | 21 |

22 | 23 | License MIT 24 | 25 |
26 | Open Source 27 | Made with TypeScript 28 | Built with Love 29 |
30 | 31 | Powered by Vercel 32 | 33 |

34 | 35 | --- 36 | 37 |

38 | 39 | Bugs 40 | Maintainability Rating 41 | Quality Gate Status 42 | Reliability Rating 43 | Security Rating 44 | Vulnerabilities 45 | 46 | 47 | Renovate 48 | 49 |

50 | 51 | --- 52 | 53 | 54 | 55 | ## 🚀 [Demo →](https://mantine-admin.vercel.app) 56 | 57 | Deploy your own copy of this template in just a few clicks! 58 | 59 |
60 | 61 | Deploy to Vercel 62 | 63 | 64 | 65 | 66 | ## 📖 Introduction 67 | 68 | This template have a bunch of folders, code examples and configurations. Feel free to edit or remove them, including this README! 69 | 70 | **Customize and enjoy!** 71 | 72 | 73 | 74 | ## 🌟 Features 75 | 76 | This project features all the latest tools and good practices in web development! 77 | 78 | ### Framework 79 | 80 | - ⚛️ **[Next.js](https://nextjs.org)** – A complete React framework for hybrid and server rendering 81 | 82 | ### Data Fetching 83 | 84 | - 🌴 **[ky](https://github.com/sindresorhus/ky)** - Tiny and elegant HTTP client based on the browser Fetch API 85 | - ✳️ **[React Query](https://tanstack.com/query)** – Hooks for fetching, caching and updating asynchronous data in React 86 | 87 | ### State Management and Hooks 88 | 89 | - 🐻 **[Zustand](https://zustand-demo.pmnd.rs)** – A small, fast and scalable bearbones state-management solution using simplified flux principles 90 | - 👍 **[react-use](https://github.com/streamich/react-use)** – Collection of essential React Hooks 91 | 92 | ### Design System and Animations 93 | 94 | - 🎨 **[Mantine-UI](https://mantine.dev)** – A simple, modular and accessible component library that gives you the building blocks to build your React applications 95 | - ✨ **[Tabler Icons](https://tabler-icons-react.vercel.app)** – A collection of popular icons to React projects 96 | 97 | ### Form Validation 98 | 99 | - 📋 **[React Hook Form](https://react-hook-form.com)** – Performant, flexible and extensible forms with easy-to-use validation 100 | - 🚨 **[Zod](https://zod.dev)** – TypeScript-first schema validation with static type inference 101 | 102 | ### Tests 103 | 104 | - 🃏 **[Jest](https://jestjs.io)** – A delightful JavaScript Testing Framework with a focus on simplicity 105 | - 🐙 **[Testing Library](https://testing-library.com)** – Simple and complete testing utilities that encourage good testing practices 106 | 107 | ### Design Patterns 108 | 109 | - ⛔ **[ESLint](https://eslint.org)** – Find and fix problems in your JavaScript code 110 | - 🎀 **[Prettier](https://prettier.io)** – An opinionated code formatter, supporting multiple languages and code editors 111 | - 🐺 **[Husky](https://github.com/typicode/husky)** – Modern native Git hooks made easy 112 | - 💩 **[lint-staged](https://github.com/okonet/lint-staged)** – Run linters against staged git files and don't let 💩 slip into your code base 113 | - 📓 **[commitlint](https://commitlint.js.org)** – Helps your team adhering to a commit convention 114 | - 🏷️ **[Standard Version](https://github.com/conventional-changelog/standard-version)** – A utility for versioning using semver and CHANGELOG generation powered by Conventional Commits 115 | 116 | ### Analysis 117 | 118 | - 🕵🏻‍♂️ **[why-did-you-render](https://github.com/welldone-software/why-did-you-render)** (optional) – Notify you about potentially avoidable re-renders 119 | 120 | 121 | 122 | ## ▶️ Getting Started 123 | 124 | ### 📙 Creating a New Repository on GitHub 125 | 126 | 1. Click on "**Use this template**" button 127 | 2. Configure your new repository and click on "**Create repository from template**" button 128 | 3. Now you can clone the generated repository to your local machine: 129 | 130 | ```bash 131 | $ git clone https://github.com//.git 132 | ``` 133 | 134 | ### 🛠️ Installation 135 | 136 | Before you can start developing your super application, you need to install the project's dependencies. 137 | 138 | Move yourself to the root of the project: 139 | 140 | ```bash 141 | $ cd 142 | ``` 143 | 144 | > For the next steps, choose a package manager of your choice and change the commands contained in the `package.json` scripts. See their documentation for more information: 145 | > 146 | > - [PNPM](https://pnpm.io/pt/cli/add)(Recommand) 147 | > - [NPM](https://docs.npmjs.com/cli/v6/commands) 148 | 149 | Install all dependencies of the project: 150 | 151 | ```bash 152 | # PNPM 153 | $ pnpm install 154 | # NPM 155 | $ npm install 156 | ``` 157 | 158 | ### ⌨️ Development 159 | 160 | Once all dependencies have been installed, you can run the local development server: 161 | 162 | ```bash 163 | # PNPM 164 | $ pnpm dev 165 | # NPM 166 | $ npm run dev 167 | ``` 168 | 169 | Now just code! 170 | 171 | ### 🖥️ Production 172 | 173 | After applying the changes, you can generate a build to test and/or deploy to your production environment. 174 | 175 | Make a production build: 176 | 177 | ```bash 178 | # PNPM 179 | $ pnpm build 180 | # NPM 181 | $ npm run build 182 | ``` 183 | 184 | And then run the build: 185 | 186 | ```bash 187 | # PNPM 188 | $ pnpm start 189 | # NPM 190 | $ npm start 191 | ``` 192 | 193 |
194 | View more commands you can use 195 | 196 |

Lint

197 | 198 | ```bash 199 | # PNPM 200 | $ pnpm run lint 201 | # NPM 202 | $ npm run lint 203 | ``` 204 | 205 |

Lint and Fix

206 | 207 | ```bash 208 | # PNPM 209 | $ pnpm run lint:fix 210 | # NPM 211 | $ npm run lint:fix 212 | ``` 213 | 214 |

Test

215 | 216 | ```bash 217 | # PNPM 218 | $ pnpm run test # or pnpm run test:watch 219 | # NPM 220 | $ npm run test # or npm run test:watch 221 | ``` 222 | 223 |

Type Checking

224 | 225 | ```bash 226 | # PNPM 227 | $ pnpm run type-check 228 | # NPM 229 | $ npm run type-check 230 | ``` 231 | 232 |

Format

233 | 234 | ```bash 235 | # PNPM 236 | $ pnpm run format 237 | # NPM 238 | $ npm run format 239 | ``` 240 | 241 |

Interactive Update Tool

242 | 243 | ```bash 244 | # PNPM 245 | $ pnpm run up 246 | # NPM 247 | $ npm run up 248 | ``` 249 | 250 |

Update All Dependencies

251 | 252 | ```bash 253 | # PNPM 254 | $ pnpm run up-latest 255 | # NPM 256 | $ npm run up-latest 257 | ``` 258 | 259 |

Release As Major Version

260 | 261 | ```bash 262 | # PNPM 263 | $ pnpm run release-as-major 264 | # NPM 265 | $ npm run release-as-major 266 | ``` 267 | 268 |

Release As Minor Version

269 | 270 | ```bash 271 | # PNPM 272 | $ pnpm run release-as-minor 273 | # NPM 274 | $ npm run release-as-minor 275 | ``` 276 | 277 |

Release As Patch Version

278 | 279 | ```bash 280 | # PNPM 281 | $ pnpm run release-as-patch 282 | # NPM 283 | $ npm run release-as-patch 284 | ``` 285 | 286 |

Publish Release

287 | 288 | ```bash 289 | # PNPM 290 | $ pnpm run push-release 291 | # NPM 292 | $ npm run push-release 293 | ``` 294 | 295 |

Get Updates From Remote and Maintain Current Changes

296 | 297 | ```bash 298 | # PNPM 299 | $ pnpm run pull 300 | # NPM 301 | $ npm run pull 302 | ``` 303 | 304 |
305 | 306 | ### ⚙️ Extra Configurations 307 | 308 |
309 | Why Did You Render 310 | 311 |

How to Activate

312 | 313 | Put the `babel.config.js` file (located in the path `src/scripts`) in the project root and delete `.babelrc` file. 314 | 315 | Uncomment the `wdyr` import line on `pages/_app.tsx`. 316 | 317 | That's it! Now you can monitore React re-renders! 318 | 319 |

How to Uninstall

320 | 321 | Just delete the `babel.config.js` and `wdyr.ts` files, remove `wdyr` import line on `pages/_app.tsx` and uninstall it: 322 | 323 | ```bash 324 | # PNPM 325 | $ pnpm uninstall @welldone-software/why-did-you-render 326 | # NPM 327 | $ npm uninstall @welldone-software/why-did-you-render 328 | ``` 329 | 330 |
331 | 332 | 333 | 334 | ## 📁 File Tree 335 | 336 | See below the file tree to understand the project structure. 337 | 338 |
339 | View file tree 340 | 341 | > Folders and files marked with (`**`) are optional, so you can delete then. 342 | 343 | ```txt 344 | 📂 mantine-admin/ 345 | ┣ 📂 .github/ # GitHub's folder configs ** 346 | ┣ 📂 .husky/ # Husky's folder 347 | ┃ ┣ 📃 commit-msg # Commitlint git hook 348 | ┃ ┗ 📃 pre-commit # Lint-staged git hook 349 | ┣ 📂 .vscode/ # VSCode's workspace ** 350 | ┣ 📂 public/ # Public folder 351 | ┃ ┣ 📂 static/ # Static files folder ** 352 | ┃ ┃ ┣ 📂 icons/ # Icons folder ** 353 | ┃ ┃ ┣ 📂 images/ # Images folder ** 354 | ┃ ┃ ┣ 📂 sounds/ # Sounds folder ** 355 | ┃ ┃ ┗ 📂 videos/ # Videos folder ** 356 | ┃ ┣ 📂 docs/ # Documentation folder ** 357 | ┃ ┃ ┣ 📂 demo/ # Demonstrations project ** 358 | ┃ ┃ ┗ 📂 translations/ # Translations folder ** 359 | ┃ ┣ 📃 favicon.ico # Icon tab browser 360 | ┣ 📂 src/ 361 | ┃ ┣ 📂 app/ # App pages 362 | ┃ ┣ 📂 components/ # App Components 363 | ┃ ┃ ┗ 📂 Motion/ # Mantine-UI components ** 364 | ┃ ┣ 📂 hooks/ # React Hooks ** 365 | ┃ ┃ ┗ 📃 useFetch.ts # SWR fetch hook (optional) ** 366 | ┃ ┣ 📂 interfaces/ # TypeScript Interfaces 367 | ┃ ┣ 📂 scripts/ # Additional scripts ** 368 | ┃ ┃ ┣ 📃 babel.config.js # Babel config with WDYR ** 369 | ┃ ┃ ┗ 📃 wdyr.ts # WDYR file ** 370 | ┃ ┣ 📂 services/ # Services 371 | ┃ ┃ ┗ 📂 users/ 372 | ┃ ┃ ┣ 📃 index.ts # React Query Configuration 373 | ┃ ┃ ┗ 📃 keys.ts # React Query Key 374 | ┃ ┣ 📂 stores/ # Zustand stores 375 | ┃ ┣ 📂 styles/ # Styles folder 376 | ┃ ┃ ┣ 📃 bgImages.ts # SVG background images ** 377 | ┃ ┃ ┗ 📃 theme.ts # Mantine-UI theme 378 | ┃ ┗ 📂 utils/ # Useful functions ** 379 | ┣ 📃 .babelrc # Default Babel config 380 | ┣ 📃 .editorconfig # Editor config 381 | ┣ 📃 .eslintignore # ESLint ignore 382 | ┣ 📃 .eslintrc # ESLint config 383 | ┣ 📃 .gitignore # Git ignore 384 | ┣ 📃 .versionrc # Versioning config 385 | ┣ 📃 .commitlintrc # Commitlint config 386 | ┣ 📃 jest.config.js # Jest config 387 | ┣ 📃 jest.setup.js # Jest setup 388 | ┣ 📃 LICENSE # License of the project 389 | ┣ 📃 next-env.d.ts # Next.js types to TypeScript 390 | ┣ 📃 next.config.js # Next.js config 391 | ┣ 📃 .prettierrc # Prettier config 392 | ┣ 📃 README.md # Main README 393 | ┣ 📃 renovate.json # Renovate Bot config ** 394 | ┣ 📃 tsconfig.json # TypeScript config 395 | ``` 396 | 397 |
398 | 399 | 400 | 401 | ## 📜 License 402 | 403 | Although you don't have to, if you reuse this template for your projects I would appreciate it if you would **credit me and provide a link to my GitHub profile in the footer of your project**. Thanks! 404 | 405 | This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) page for details. 406 | 407 | 408 | 409 | --- 410 | 411 | ### ⭐ Give a star to maintain this project! 412 | 413 | ### ❤️ Thanks for your attention! 414 | 415 | ### 👨‍💻 Good Hacking! 416 | 417 | --- 418 | -------------------------------------------------------------------------------- /biome.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@biomejs/biome/configuration_schema.json", 3 | "organizeImports": { 4 | "ignore": [".next"], 5 | "enabled": true 6 | }, 7 | "linter": { 8 | "ignore": [".next", "components/ui"], 9 | "rules": { 10 | "correctness": { 11 | "useExhaustiveDependencies": "off" 12 | }, 13 | "suspicious": { 14 | "noArrayIndexKey": "off", 15 | "noExplicitAny": "off" 16 | }, 17 | "a11y": { 18 | "noSvgWithoutTitle": "off" 19 | } 20 | } 21 | }, 22 | "formatter": { 23 | "ignore": [".next", "components/ui"], 24 | "indentStyle": "space", 25 | "enabled": true 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/bun.lockb -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | const nextJest = require("next/jest"); 2 | 3 | const createJestConfig = nextJest({ 4 | dir: "./", 5 | }); 6 | 7 | /** @type {import('@jest/types').Config.InitialOptions} */ 8 | const customJestConfig = { 9 | setupFilesAfterEnv: ["/jest.setup.js"], 10 | testPathIgnorePatterns: ["/node_modules/", "/.next/"], 11 | transformIgnorePatterns: ["/node_modules/"], 12 | testEnvironment: "jest-environment-jsdom", 13 | }; 14 | 15 | module.exports = createJestConfig(customJestConfig); 16 | -------------------------------------------------------------------------------- /jest.setup.js: -------------------------------------------------------------------------------- 1 | // Optional: configure or set up a testing framework before each test. 2 | // If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js` 3 | 4 | // Used for __tests__/testing-library.js 5 | // Learn more: https://github.com/testing-library/jest-dom 6 | import "@testing-library/jest-dom/extend-expect"; 7 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | swcMinify: true, 4 | experimental: { 5 | optimizePackageImports: ["@mantine/core", "@mantine/hooks"], 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mantine-admin", 3 | "version": "1.0.0", 4 | "author": "Joshua Lee ", 5 | "description": "A Modern Admin Dashboard made with Mantine/React/NextJS!", 6 | "lint-staged": { 7 | ".": ["bun run lint"] 8 | }, 9 | "husky": { 10 | "hooks": { 11 | "pre-commit": "lint-staged" 12 | } 13 | }, 14 | "scripts": { 15 | "dev": "next dev", 16 | "start": "next start", 17 | "build": "next build", 18 | "lint": "biome lint", 19 | "format": "biome format --write .", 20 | "test": "jest", 21 | "test:watch": "jest --watch", 22 | "type-check": "tsc --noEmit", 23 | "release": "standard-version", 24 | "release-as-major": "bun run release --release-as major", 25 | "release-as-minor": "bun run release --release-as minor", 26 | "release-as-patch": "bun run release --release-as patch", 27 | "push-release": "git push --follow-tags origin main", 28 | "pull": "git rebase origin main -i", 29 | "pre-commit": "bun run lint", 30 | "prepare": "husky install", 31 | "storybook": "storybook dev -p 6006", 32 | "build-storybook": "storybook build" 33 | }, 34 | "dependencies": { 35 | "@hookform/resolvers": "3.3.4", 36 | "@mantine/core": "^7.11.1", 37 | "@mantine/dates": "^7.11.1", 38 | "@mantine/dropzone": "^7.11.1", 39 | "@mantine/hooks": "^7.11.1", 40 | "@mantine/modals": "^7.11.1", 41 | "@mantine/notifications": "^7.11.1", 42 | "@mantine/nprogress": "^7.11.1", 43 | "@tabler/icons-react": "^2.47.0", 44 | "@tanstack/react-query": "5.18.1", 45 | "@tanstack/react-table": "^8.19.2", 46 | "@vercel/analytics": "^1.3.1", 47 | "chart.js": "^4.4.3", 48 | "dayjs": "^1.11.11", 49 | "ky": "^1.4.0", 50 | "mantine-react-table": "2.0.0-alpha.5", 51 | "next": "14.1.0", 52 | "react": "18.2.0", 53 | "react-chartjs-2": "^5.2.0", 54 | "react-dom": "18.2.0", 55 | "react-hook-form": "7.50.0", 56 | "react-use": "17.5.0", 57 | "stylis-plugin-rtl": "^2.1.1", 58 | "zod": "^3.23.8", 59 | "zustand": "4.5.0" 60 | }, 61 | "devDependencies": { 62 | "@commitlint/cli": "18.6.0", 63 | "@commitlint/config-conventional": "18.6.0", 64 | "@storybook/addon-essentials": "^7.6.20", 65 | "@storybook/addon-interactions": "^7.6.20", 66 | "@storybook/addon-links": "^7.6.20", 67 | "@storybook/blocks": "^7.6.20", 68 | "@storybook/nextjs": "^7.6.20", 69 | "@storybook/preview-api": "^7.6.20", 70 | "@storybook/react": "^7.6.20", 71 | "@storybook/testing-library": "^0.2.2", 72 | "@testing-library/dom": "9.3.4", 73 | "@testing-library/jest-dom": "6.4.1", 74 | "@testing-library/react": "14.2.1", 75 | "@testing-library/user-event": "14.5.2", 76 | "@types/jest": "29.5.12", 77 | "@types/node": "20.11.16", 78 | "@types/react": "18.2.52", 79 | "husky": "9.0.10", 80 | "jest": "29.7.0", 81 | "jest-environment-jsdom": "29.7.0", 82 | "lint-staged": "15.2.1", 83 | "postcss": "^8.4.39", 84 | "postcss-preset-mantine": "^1.15.0", 85 | "postcss-simple-vars": "^7.0.1", 86 | "standard-version": "9.5.0", 87 | "storybook": "^7.6.20", 88 | "storybook-dark-mode": "^3.0.3", 89 | "typescript": "5.3.3" 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | "postcss-preset-mantine": {}, 4 | "postcss-simple-vars": { 5 | variables: { 6 | "mantine-breakpoint-xs": "36em", 7 | "mantine-breakpoint-sm": "48em", 8 | "mantine-breakpoint-md": "62em", 9 | "mantine-breakpoint-lg": "75em", 10 | "mantine-breakpoint-xl": "88em", 11 | }, 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/public/favicon.ico -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/public/logo.png -------------------------------------------------------------------------------- /public/mock/products.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | { 4 | "id": "1000", 5 | "code": "f230fh0g3", 6 | "name": "Bamboo Watch", 7 | "description": "Product Description", 8 | "image": "bamboo-watch.jpg", 9 | "price": 65, 10 | "category": "Accessories", 11 | "quantity": 24, 12 | "inventoryStatus": "INSTOCK", 13 | "rating": 5 14 | }, 15 | { 16 | "id": "1001", 17 | "code": "nvklal433", 18 | "name": "Black Watch", 19 | "description": "Product Description", 20 | "image": "black-watch.jpg", 21 | "price": 72, 22 | "category": "Accessories", 23 | "quantity": 61, 24 | "inventoryStatus": "INSTOCK", 25 | "rating": 4 26 | }, 27 | { 28 | "id": "1002", 29 | "code": "zz21cz3c1", 30 | "name": "Blue Band", 31 | "description": "Product Description", 32 | "image": "blue-band.jpg", 33 | "price": 79, 34 | "category": "Fitness", 35 | "quantity": 2, 36 | "inventoryStatus": "LOWSTOCK", 37 | "rating": 3 38 | }, 39 | { 40 | "id": "1003", 41 | "code": "244wgerg2", 42 | "name": "Blue T-Shirt", 43 | "description": "Product Description", 44 | "image": "blue-t-shirt.jpg", 45 | "price": 29, 46 | "category": "Clothing", 47 | "quantity": 25, 48 | "inventoryStatus": "INSTOCK", 49 | "rating": 5 50 | }, 51 | { 52 | "id": "1004", 53 | "code": "h456wer53", 54 | "name": "Bracelet", 55 | "description": "Product Description", 56 | "image": "bracelet.jpg", 57 | "price": 15, 58 | "category": "Accessories", 59 | "quantity": 73, 60 | "inventoryStatus": "INSTOCK", 61 | "rating": 4 62 | }, 63 | { 64 | "id": "1005", 65 | "code": "av2231fwg", 66 | "name": "Brown Purse", 67 | "description": "Product Description", 68 | "image": "brown-purse.jpg", 69 | "price": 120, 70 | "category": "Accessories", 71 | "quantity": 0, 72 | "inventoryStatus": "OUTOFSTOCK", 73 | "rating": 4 74 | }, 75 | { 76 | "id": "1006", 77 | "code": "bib36pfvm", 78 | "name": "Chakra Bracelet", 79 | "description": "Product Description", 80 | "image": "chakra-bracelet.jpg", 81 | "price": 32, 82 | "category": "Accessories", 83 | "quantity": 5, 84 | "inventoryStatus": "LOWSTOCK", 85 | "rating": 3 86 | }, 87 | { 88 | "id": "1007", 89 | "code": "mbvjkgip5", 90 | "name": "Galaxy Earrings", 91 | "description": "Product Description", 92 | "image": "galaxy-earrings.jpg", 93 | "price": 34, 94 | "category": "Accessories", 95 | "quantity": 23, 96 | "inventoryStatus": "INSTOCK", 97 | "rating": 5 98 | }, 99 | { 100 | "id": "1008", 101 | "code": "vbb124btr", 102 | "name": "Game Controller", 103 | "description": "Product Description", 104 | "image": "game-controller.jpg", 105 | "price": 99, 106 | "category": "Electronics", 107 | "quantity": 2, 108 | "inventoryStatus": "LOWSTOCK", 109 | "rating": 4 110 | }, 111 | { 112 | "id": "1009", 113 | "code": "cm230f032", 114 | "name": "Gaming Set", 115 | "description": "Product Description", 116 | "image": "gaming-set.jpg", 117 | "price": 299, 118 | "category": "Electronics", 119 | "quantity": 63, 120 | "inventoryStatus": "INSTOCK", 121 | "rating": 3 122 | }, 123 | { 124 | "id": "1010", 125 | "code": "plb34234v", 126 | "name": "Gold Phone Case", 127 | "description": "Product Description", 128 | "image": "gold-phone-case.jpg", 129 | "price": 24, 130 | "category": "Accessories", 131 | "quantity": 0, 132 | "inventoryStatus": "OUTOFSTOCK", 133 | "rating": 4 134 | }, 135 | { 136 | "id": "1011", 137 | "code": "4920nnc2d", 138 | "name": "Green Earbuds", 139 | "description": "Product Description", 140 | "image": "green-earbuds.jpg", 141 | "price": 89, 142 | "category": "Electronics", 143 | "quantity": 23, 144 | "inventoryStatus": "INSTOCK", 145 | "rating": 4 146 | }, 147 | { 148 | "id": "1012", 149 | "code": "250vm23cc", 150 | "name": "Green T-Shirt", 151 | "description": "Product Description", 152 | "image": "green-t-shirt.jpg", 153 | "price": 49, 154 | "category": "Clothing", 155 | "quantity": 74, 156 | "inventoryStatus": "INSTOCK", 157 | "rating": 5 158 | }, 159 | { 160 | "id": "1013", 161 | "code": "fldsmn31b", 162 | "name": "Grey T-Shirt", 163 | "description": "Product Description", 164 | "image": "grey-t-shirt.jpg", 165 | "price": 48, 166 | "category": "Clothing", 167 | "quantity": 0, 168 | "inventoryStatus": "OUTOFSTOCK", 169 | "rating": 3 170 | }, 171 | { 172 | "id": "1014", 173 | "code": "waas1x2as", 174 | "name": "Headphones", 175 | "description": "Product Description", 176 | "image": "headphones.jpg", 177 | "price": 175, 178 | "category": "Electronics", 179 | "quantity": 8, 180 | "inventoryStatus": "LOWSTOCK", 181 | "rating": 5 182 | }, 183 | { 184 | "id": "1015", 185 | "code": "vb34btbg5", 186 | "name": "Light Green T-Shirt", 187 | "description": "Product Description", 188 | "image": "light-green-t-shirt.jpg", 189 | "price": 49, 190 | "category": "Clothing", 191 | "quantity": 34, 192 | "inventoryStatus": "INSTOCK", 193 | "rating": 4 194 | }, 195 | { 196 | "id": "1016", 197 | "code": "k8l6j58jl", 198 | "name": "Lime Band", 199 | "description": "Product Description", 200 | "image": "lime-band.jpg", 201 | "price": 79, 202 | "category": "Fitness", 203 | "quantity": 12, 204 | "inventoryStatus": "INSTOCK", 205 | "rating": 3 206 | }, 207 | { 208 | "id": "1017", 209 | "code": "v435nn85n", 210 | "name": "Mini Speakers", 211 | "description": "Product Description", 212 | "image": "mini-speakers.jpg", 213 | "price": 85, 214 | "category": "Clothing", 215 | "quantity": 42, 216 | "inventoryStatus": "INSTOCK", 217 | "rating": 4 218 | }, 219 | { 220 | "id": "1018", 221 | "code": "09zx9c0zc", 222 | "name": "Painted Phone Case", 223 | "description": "Product Description", 224 | "image": "painted-phone-case.jpg", 225 | "price": 56, 226 | "category": "Accessories", 227 | "quantity": 41, 228 | "inventoryStatus": "INSTOCK", 229 | "rating": 5 230 | }, 231 | { 232 | "id": "1019", 233 | "code": "mnb5mb2m5", 234 | "name": "Pink Band", 235 | "description": "Product Description", 236 | "image": "pink-band.jpg", 237 | "price": 79, 238 | "category": "Fitness", 239 | "quantity": 63, 240 | "inventoryStatus": "INSTOCK", 241 | "rating": 4 242 | }, 243 | { 244 | "id": "1020", 245 | "code": "r23fwf2w3", 246 | "name": "Pink Purse", 247 | "description": "Product Description", 248 | "image": "pink-purse.jpg", 249 | "price": 110, 250 | "category": "Accessories", 251 | "quantity": 0, 252 | "inventoryStatus": "OUTOFSTOCK", 253 | "rating": 4 254 | }, 255 | { 256 | "id": "1021", 257 | "code": "pxpzczo23", 258 | "name": "Purple Band", 259 | "description": "Product Description", 260 | "image": "purple-band.jpg", 261 | "price": 79, 262 | "category": "Fitness", 263 | "quantity": 6, 264 | "inventoryStatus": "LOWSTOCK", 265 | "rating": 3 266 | }, 267 | { 268 | "id": "1022", 269 | "code": "2c42cb5cb", 270 | "name": "Purple Gemstone Necklace", 271 | "description": "Product Description", 272 | "image": "purple-gemstone-necklace.jpg", 273 | "price": 45, 274 | "category": "Accessories", 275 | "quantity": 62, 276 | "inventoryStatus": "INSTOCK", 277 | "rating": 4 278 | }, 279 | { 280 | "id": "1023", 281 | "code": "5k43kkk23", 282 | "name": "Purple T-Shirt", 283 | "description": "Product Description", 284 | "image": "purple-t-shirt.jpg", 285 | "price": 49, 286 | "category": "Clothing", 287 | "quantity": 2, 288 | "inventoryStatus": "LOWSTOCK", 289 | "rating": 5 290 | }, 291 | { 292 | "id": "1024", 293 | "code": "lm2tny2k4", 294 | "name": "Shoes", 295 | "description": "Product Description", 296 | "image": "shoes.jpg", 297 | "price": 64, 298 | "category": "Clothing", 299 | "quantity": 0, 300 | "inventoryStatus": "INSTOCK", 301 | "rating": 4 302 | }, 303 | { 304 | "id": "1025", 305 | "code": "nbm5mv45n", 306 | "name": "Sneakers", 307 | "description": "Product Description", 308 | "image": "sneakers.jpg", 309 | "price": 78, 310 | "category": "Clothing", 311 | "quantity": 52, 312 | "inventoryStatus": "INSTOCK", 313 | "rating": 4 314 | }, 315 | { 316 | "id": "1026", 317 | "code": "zx23zc42c", 318 | "name": "Teal T-Shirt", 319 | "description": "Product Description", 320 | "image": "teal-t-shirt.jpg", 321 | "price": 49, 322 | "category": "Clothing", 323 | "quantity": 3, 324 | "inventoryStatus": "LOWSTOCK", 325 | "rating": 3 326 | }, 327 | { 328 | "id": "1027", 329 | "code": "acvx872gc", 330 | "name": "Yellow Earbuds", 331 | "description": "Product Description", 332 | "image": "yellow-earbuds.jpg", 333 | "price": 89, 334 | "category": "Electronics", 335 | "quantity": 35, 336 | "inventoryStatus": "INSTOCK", 337 | "rating": 3 338 | }, 339 | { 340 | "id": "1028", 341 | "code": "tx125ck42", 342 | "name": "Yoga Mat", 343 | "description": "Product Description", 344 | "image": "yoga-mat.jpg", 345 | "price": 20, 346 | "category": "Fitness", 347 | "quantity": 15, 348 | "inventoryStatus": "INSTOCK", 349 | "rating": 5 350 | }, 351 | { 352 | "id": "1029", 353 | "code": "gwuby345v", 354 | "name": "Yoga Set", 355 | "description": "Product Description", 356 | "image": "yoga-set.jpg", 357 | "price": 20, 358 | "category": "Fitness", 359 | "quantity": 25, 360 | "inventoryStatus": "INSTOCK", 361 | "rating": 8 362 | } 363 | ] 364 | } 365 | -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Mantine Admin", 3 | "short_name": "Mantine Admin", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /public/static/icons/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/public/static/icons/.gitkeep -------------------------------------------------------------------------------- /public/static/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/public/static/icons/icon-128x128.png -------------------------------------------------------------------------------- /public/static/icons/icon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/public/static/icons/icon-16x16.png -------------------------------------------------------------------------------- /public/static/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/public/static/icons/icon-192x192.png -------------------------------------------------------------------------------- /public/static/icons/icon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/public/static/icons/icon-32x32.png -------------------------------------------------------------------------------- /public/static/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/public/static/icons/icon-512x512.png -------------------------------------------------------------------------------- /public/static/images/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/public/static/images/.gitkeep -------------------------------------------------------------------------------- /public/static/images/img-email.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/static/images/og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/public/static/images/og.png -------------------------------------------------------------------------------- /public/static/images/powered-by-vercel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/static/sounds/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/public/static/sounds/.gitkeep -------------------------------------------------------------------------------- /public/static/videos/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/public/static/videos/.gitkeep -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "enabled": true, 3 | "schedule": ["before 3am on Monday"], 4 | "extends": [ 5 | "config:base", 6 | ":pinVersions", 7 | ":separateMultipleMajorReleases", 8 | ":combinePatchMinorReleases", 9 | ":automergePatch", 10 | ":automergeMinor", 11 | ":pinSkipCi", 12 | "group:allNonMajor" 13 | ], 14 | "assignees": ["gmatthewsfeuer"], 15 | "packageRules": [ 16 | { 17 | "matchUpdateTypes": ["minor", "patch", "pin", "digest"], 18 | "automerge": true 19 | }, 20 | { 21 | "matchDepTypes": ["devDependencies"], 22 | "automerge": true 23 | }, 24 | { 25 | "extends": "monorepo:nextjs", 26 | "groupName": "nextjs monorepo" 27 | }, 28 | { 29 | "extends": "monorepo:chakra-ui", 30 | "groupName": "chakra-ui monorepo" 31 | }, 32 | { 33 | "extends": "monorepo:emotion", 34 | "groupName": "emotion monorepo" 35 | }, 36 | { 37 | "extends": "packages:linters", 38 | "groupName": "linters" 39 | }, 40 | { 41 | "extends": "packages:test", 42 | "groupName": "test packages" 43 | }, 44 | { 45 | "extends": "monorepo:typescript-eslint", 46 | "groupName": "typescript-eslint monorepo" 47 | }, 48 | { 49 | "groupName": "definitelyTyped", 50 | "matchPackagePrefixes": ["@types/"] 51 | } 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /src/app/(auth)/layout.module.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | width: 100%; 3 | height: 100vh; 4 | color: lightdark(var(--mantine-colors-dark), var(--mantine-colors-white)); 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | -------------------------------------------------------------------------------- /src/app/(auth)/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Anchor, Box, Text, Title } from "@mantine/core"; 2 | import classes from "./layout.module.css"; 3 | 4 | interface Props { 5 | children: React.ReactNode; 6 | } 7 | 8 | export default function AuthLayout({ children }: Props) { 9 | return ( 10 | 11 | 12 | Mantine Admin 13 | 14 | 15 | Don't have an account?{" "} 16 | 17 | Sign Up 18 | 19 | 20 | {children} 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/app/(auth)/login/page.tsx: -------------------------------------------------------------------------------- 1 | import { LoginForm } from "@/components/Auth/LoginForm"; 2 | 3 | export default function Login() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/(auth)/register/page.tsx: -------------------------------------------------------------------------------- 1 | import { RegisterForm } from "@/components/Auth/RegisterForm"; 2 | 3 | export default function Register() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/(dashboard)/dashboard/chart/page.tsx: -------------------------------------------------------------------------------- 1 | import { PageContainer } from "@/components/PageContainer/PageContainer"; 2 | 3 | export default function Chart() { 4 | return Chart; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/(dashboard)/dashboard/form/page.tsx: -------------------------------------------------------------------------------- 1 | import { SimpleForm } from "@/components/Form/SimpleForm"; 2 | import { PageContainer } from "@/components/PageContainer/PageContainer"; 3 | 4 | export default function Form() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/app/(dashboard)/dashboard/layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { 4 | AppShell, 5 | Burger, 6 | Text, 7 | useMantineColorScheme, 8 | useMantineTheme, 9 | } from "@mantine/core"; 10 | import { useDisclosure } from "@mantine/hooks"; 11 | import { AdminHeader } from "@/components/Headers/AdminHeader"; 12 | import { Navbar } from "@/components/Navbar/Navbar"; 13 | import { navLinks } from "@/config"; 14 | 15 | interface Props { 16 | children: React.ReactNode; 17 | } 18 | 19 | export default function DashboardLayout({ children }: Props) { 20 | const [opened, { toggle }] = useDisclosure(); 21 | const { colorScheme } = useMantineColorScheme(); 22 | const theme = useMantineTheme(); 23 | 24 | const bg = 25 | colorScheme === "dark" ? theme.colors.dark[7] : theme.colors.gray[0]; 26 | 27 | return ( 28 | 35 | 36 | 38 | 39 | 48 | } 49 | /> 50 | 51 | {children} 52 | 53 | 54 | CopyRight © 2023 Jotyy 55 | 56 | 57 | 58 | ); 59 | } 60 | -------------------------------------------------------------------------------- /src/app/(dashboard)/dashboard/page.tsx: -------------------------------------------------------------------------------- 1 | import { DashboardContent } from "@/components/Dashboard/DashboardContent"; 2 | import { PageContainer } from "@/components/PageContainer/PageContainer"; 3 | 4 | export default function Dashboard() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/app/(dashboard)/dashboard/settings/page.tsx: -------------------------------------------------------------------------------- 1 | import { PageContainer } from "@/components/PageContainer/PageContainer"; 2 | 3 | export default function Settings() { 4 | return Settings; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/(dashboard)/dashboard/table/page.tsx: -------------------------------------------------------------------------------- 1 | import { PageContainer } from "@/components/PageContainer/PageContainer"; 2 | import { PaginationTable } from "@/components/Table/PaginationTable"; 3 | import { SimpleTable } from "@/components/Table/SimpleTable"; 4 | 5 | export default function TablePage() { 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import "@mantine/core/styles.css"; 2 | import "mantine-react-table/styles.css"; 3 | 4 | import { 5 | ColorSchemeScript, 6 | DirectionProvider, 7 | MantineProvider, 8 | } from "@mantine/core"; 9 | import { ModalsProvider } from "@mantine/modals"; 10 | import { Notifications } from "@mantine/notifications"; 11 | import { Analytics } from "@vercel/analytics/react"; 12 | import { inter } from "@/styles/fonts"; 13 | import { theme } from "@/styles/theme"; 14 | import { AppProvider } from "./provider"; 15 | 16 | export const metadata = { 17 | metadataBase: new URL("https://mantine-admin.vercel.app/"), 18 | title: { default: "Mantine Admin", template: "%s | Mantine Admin" }, 19 | description: "A Modern Dashboard with Next.js.", 20 | keywords: [ 21 | "Next.js", 22 | "Mantine", 23 | "Admin", 24 | "Template", 25 | "Admin Template", 26 | "Admin Dashboard", 27 | "Admin Panel", 28 | "Admin UI", 29 | ], 30 | authors: [ 31 | { 32 | name: "jotyy", 33 | url: "https://jotyy.vercel.app", 34 | }, 35 | ], 36 | creator: "jotyy", 37 | manifest: "https://mantine-admin.vercel.app/site.webmanifest", 38 | }; 39 | 40 | export default function RootLayout({ 41 | children, 42 | }: { children: React.ReactNode }) { 43 | return ( 44 | 45 | 46 | 47 | 51 | 52 | 53 | 54 | 55 | 56 | {children} 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | ); 65 | } 66 | -------------------------------------------------------------------------------- /src/app/opengraph-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotyy/Mantine-Admin/8b6f5dcdda08d355b9bb91a0355303ff18593995/src/app/opengraph-image.png -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import { Footer } from "@/components/Footer/Footer"; 2 | import { Features } from "@/components/Landing/FeaturesSection"; 3 | import { Header } from "@/components/Landing/Header"; 4 | import { HeroSection } from "@/components/Landing/HeroSection"; 5 | import { LandingContainer } from "@/components/Landing/LandingContainer"; 6 | import { PricingSection } from "@/components/Landing/PricingSection"; 7 | import { SocialProofSection } from "@/components/Landing/SocialProofSection"; 8 | import { FAQSection } from "@/components/Landing/FAQSection"; 9 | import { CTASection } from "@/components/Landing/CTASection"; 10 | 11 | export default function Page() { 12 | return ( 13 | 14 |
30 | 31 | 32 | 33 | 34 | 35 | 36 |