commit a99165e4d7815dd032b1ea8c9f64d29e320a6149 Author: artwork21c Date: Tue Dec 30 16:48:25 2025 +0900 최초 commit/push diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..a8afcba --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,11 @@ +# https://github.com/browserslist/browserslist#readme + +[production] +>0.2% +not dead +not op_mini all + +[development] +last 1 chrome version +last 1 firefox version +last 1 safari version diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..54e4850 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +# Editor configuration, see http://editorconfig.org +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..205021e --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Enforce Unix newlines +* text=auto eol=lf diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e080cd5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules +package-lock.json +yarn.lock + +# testing +/coverage + +# production +/build + +# misc +.eslintcache +.DS_Store +.idea +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..567609b --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +build/ diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..66f90b9 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,7 @@ +module.exports = { + semi: false, + trailingComma: 'all', + singleQuote: true, + printWidth: 100, + tabWidth: 2, +} diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..650acfe --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,19 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Start: Local (npm script)", + "type": "node", + "request": "launch", + "runtimeExecutable": "npm", + "runtimeArgs": [ + "run", + "start" + ], + "console": "integratedTerminal", + "env": { + "NODE_ENV": "local" + } + } + ] +} \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..433069c --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2025 creativeLabs Łukasz Holeczek. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..1bff672 --- /dev/null +++ b/README.md @@ -0,0 +1,243 @@ +# CoreUI Free React Admin Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%React%204%20Admin%20Template%20&url=https://coreui.io&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue) + +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT) +[![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui) +[![npm package][npm-coreui-badge]][npm-coreui] +[![NPM downloads][npm-coreui-download]][npm-coreui] +[![@coreui react](https://img.shields.io/badge/@coreui%20-react-lightgrey.svg?style=flat-square)](https://github.com/coreui/react) +[![npm package][npm-coreui-react-badge]][npm-coreui-react] +[![NPM downloads][npm-coreui-react-download]][npm-coreui-react] + +[npm-coreui]: https://www.npmjs.com/package/@coreui/coreui +[npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square +[npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square +[npm-coreui-react]: https://www.npmjs.com/package/@coreui/react +[npm-coreui-react-badge]: https://img.shields.io/npm/v/@coreui/react.png?style=flat-square +[npm-coreui-react-download]: https://img.shields.io/npm/dm/@coreui/react.svg?style=flat-square +[npm]: https://www.npmjs.com/package/@coreui/react + +[![Bootstrap Admin Template](https://assets.coreui.io/products/coreui-free-bootstrap-admin-template-light-dark.webp)](https://coreui.io/product/free-react-admin-template/) + +CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all! + +## Table of Contents + +* [Versions](#versions) +* [CoreUI PRO](#coreui-pro) +* [CoreUI PRO React Admin Templates](#coreui-pro-react-admin-templates) +* [Quick Start](#quick-start) +* [Installation](#installation) +* [Basic usage](#basic-usage) +* [What's included](#whats-included) +* [Documentation](#documentation) +* [Components](#components) +* [Versioning](#versioning) +* [Creators](#creators) +* [Community](#community) +* [Support CoreUI Development](#support-coreui-development) +* [Copyright and License](#copyright-and-license) + +## Versions + +* [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template) +* [CoreUI Free Angular Admin Template](https://github.com/coreui/coreui-free-angular-admin-template) +* [CoreUI Free React.js Admin Template (Vite)](https://github.com/coreui/coreui-free-react-admin-template) +* [CoreUI Free React.js Admin Template (Create React App)](https://github.com/coreui/coreui-free-react-admin-template-cra) +* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template) + +## CoreUI PRO + +* 💪 [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/) +* 💪 [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/) +* 💪 [CoreUI PRO Next.js Admin Template](https://coreui.io/product/next-js-dashboard-template/) +* 💪 [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/) +* 💪 [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/) + +## CoreUI PRO React Admin Templates + +| Default Theme | Light Theme | +| --- | --- | +| [![CoreUI PRO React Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=default) | [![CoreUI PRO React Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=light)| + +| Modern Theme | Bright Theme | +| --- | --- | +| [![CoreUI PRO React Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=modern) | [![CoreUI PRO React Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=bright)| + +## Quick Start + +- [Download the latest release](https://github.com/coreui/coreui-free-react-admin-template/archive/refs/heads/main.zip) +- Clone the repo: `git clone https://github.com/coreui/coreui-free-react-admin-template.git` + +### Installation + +``` bash +$ npm install +``` + +or + +``` bash +$ yarn install +``` + +### Basic usage + +``` bash +# dev server with hot reload at http://localhost:3000 +$ npm start +``` + +or + +``` bash +# dev server with hot reload at http://localhost:3000 +$ yarn start +``` + +Navigate to [http://localhost:3000](http://localhost:3000). The app will automatically reload if you change any of the source files. + +#### Build + +Run `build` to build the project. The build artifacts will be stored in the `build/` directory. + +```bash +# build for production with minification +$ npm run build +``` + +or + +```bash +# build for production with minification +$ yarn build +``` + +## What's included + +Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this: + +``` +coreui-free-react-admin-template +├── public/ # static files +│ ├── favicon.ico +│ └── manifest.json +│ +├── src/ # project root +│ ├── assets/ # images, icons, etc. +│ ├── components/ # common components - header, footer, sidebar, etc. +│ ├── layouts/ # layout containers +│ ├── scss/ # scss styles +│ ├── views/ # application views +│ ├── _nav.js # sidebar navigation config +│ ├── App.js +│ ├── index.js +│ ├── routes.js # routes config +│ └── store.js # template state example +│ +├── index.html # html template +├── ... +├── package.json +├── ... +└── vite.config.mjs # vite config +``` + +## Documentation + +The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/docs/templates/installation/) + +## Components + +CoreUI React.js Admin Templates are built on top of CoreUI and CoreUI PRO UI components libraries, including all of these components. + +- [React Accordion](https://coreui.io/react/docs/components/accordion/) +- [React Alert](https://coreui.io/react/docs/components/alert/) +- [React Autocomplete](https://coreui.io/react/docs/forms/autocomplete/) **PRO** +- [React Avatar](https://coreui.io/react/docs/components/avatar/) +- [React Badge](https://coreui.io/react/docs/components/badge/) +- [React Breadcrumb](https://coreui.io/react/docs/components/breadcrumb/) +- [React Button](https://coreui.io/react/docs/components/button/) +- [React Button Group](https://coreui.io/react/docs/components/button-group/) +- [React Callout](https://coreui.io/react/docs/components/callout/) +- [React Card](https://coreui.io/react/docs/components/card/) +- [React Carousel](https://coreui.io/react/docs/components/carousel/) +- [React Checkbox](https://coreui.io/react/docs/forms/checkbox/) +- [React Close Button](https://coreui.io/react/docs/components/close-button/) +- [React Collapse](https://coreui.io/react/docs/components/collapse/) +- [React Date Picker](https://coreui.io/react/docs/forms/date-picker/) **PRO** +- [React Date Range Picker](https://coreui.io/react/docs/forms/date-range-picker/) **PRO** +- [React Dropdown](https://coreui.io/react/docs/components/dropdown/) +- [React Floating Labels](https://coreui.io/react/docs/forms/floating-labels/) +- [React Footer](https://coreui.io/react/docs/components/footer/) +- [React Header](https://coreui.io/react/docs/components/header/) +- [React Image](https://coreui.io/react/docs/components/image/) +- [React Input](https://coreui.io/react/docs/forms/input/) +- [React Input Group](https://coreui.io/react/docs/forms/input-group/) +- [React List Group](https://coreui.io/react/docs/components/list-group/) +- [React Loading Button](https://coreui.io/react/docs/components/loading-button/) **PRO** +- [React Modal](https://coreui.io/react/docs/components/modal/) +- [React Multi Select](https://coreui.io/react/docs/forms/multi-select/) **PRO** +- [React Navs & Tabs](https://coreui.io/react/docs/components/navs-tabs/) +- [React Navbar](https://coreui.io/react/docs/components/navbar/) +- [React Offcanvas](https://coreui.io/react/docs/components/offcanvas/) +- [React One Time Password Input](https://coreui.io/react/docs/forms/one-time-password-input/) **PRO** +- [React Pagination](https://coreui.io/react/docs/components/pagination/) +- [React Password Input](https://coreui.io/react/docs/forms/password-input/) **PRO** +- [React Placeholder](https://coreui.io/react/docs/components/placeholder/) +- [React Popover](https://coreui.io/react/docs/components/popover/) +- [React Progress](https://coreui.io/react/docs/components/progress/) +- [React Radio](https://coreui.io/react/docs/forms/radio/) +- [React Range](https://coreui.io/react/docs/forms/range/) +- [React Range Slider](https://coreui.io/react/docs/forms/range-slider/) **PRO** +- [React Rating](https://coreui.io/react/docs/forms/rating/) +- [React Select](https://coreui.io/react/docs/forms/select/) +- [React Sidebar](https://coreui.io/react/docs/components/sidebar/) +- [React Smart Pagination](https://coreui.io/react/docs/components/smart-pagination/) **PRO** +- [React Smart Table](https://coreui.io/react/docs/components/smart-table/) **PRO** +- [React Spinner](https://coreui.io/react/docs/components/spinner/) +- [React Stepper](https://coreui.io/react/docs/forms/stepper/) **PRO** +- [React Switch](https://coreui.io/react/docs/forms/switch/) +- [React Table](https://coreui.io/react/docs/components/table/) +- [React Textarea](https://coreui.io/react/docs/forms/textarea/) +- [React Time Picker](https://coreui.io/react/docs/forms/time-picker/) **PRO** +- [React Toast](https://coreui.io/react/docs/components/toast/) +- [React Tooltip](https://coreui.io/react/docs/components/tooltip/) + +## Versioning + +For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/). + +See [the Releases section of our project](https://github.com/coreui/coreui-free-react-admin-template/releases) for changelogs for each release version. + +## Creators + +**Łukasz Holeczek** + +* +* + +**Andrzej Kopański** + +* + +**CoreUI Team** + +* +* +* + +## Community + +Get updates on CoreUI's development and chat with the project maintainers and community members. + +- Follow [@core_ui on Twitter](https://twitter.com/core_ui). +- Read and subscribe to [CoreUI Blog](https://coreui.ui/blog/). + +## Support CoreUI Development + +CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=react&src=github-coreui-free-react-admin-template) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/). + +## Copyright and License + +copyright 2025 creativeLabs Łukasz Holeczek. + +Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE). \ No newline at end of file diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000..b0b0042 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,39 @@ +import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended' +import eslintPluginReact from 'eslint-plugin-react' +import eslintPluginReactHooks from 'eslint-plugin-react-hooks' +import globals from 'globals' + +export default [ + { ignores: ['eslint.config.mjs'] }, + { + ...eslintPluginReact.configs.flat.recommended, + ...eslintPluginReact.configs.flat['jsx-runtime'], + files: ['src/**/*.{js,jsx}'], + plugins: { + eslintPluginReact, + 'react-hooks': eslintPluginReactHooks, + }, + languageOptions: { + globals: { + ...globals.browser, + ...globals.node, + }, + ecmaVersion: 'latest', + sourceType: 'module', + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + }, + }, + settings: { + react: { + version: 'detect', + }, + }, + rules: { + ...eslintPluginReactHooks.configs.recommended.rules, + }, + }, + eslintPluginPrettierRecommended, +] diff --git a/index.html b/index.html new file mode 100644 index 0000000..2c0a7f1 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + + + + + CoreUI Free React.js Admin Template + + + + + +
+ + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..fccb0ae --- /dev/null +++ b/package.json @@ -0,0 +1,55 @@ +{ + "name": "@coreui/coreui-free-react-admin-template", + "version": "5.5.0", + "description": "CoreUI Free React Admin Template", + "homepage": ".", + "bugs": { + "url": "https://github.com/coreui/coreui-free-react-admin-template/issues" + }, + "repository": { + "type": "git", + "url": "git@github.com:coreui/coreui-free-react-admin-template.git" + }, + "license": "MIT", + "author": "The CoreUI Team (https://github.com/orgs/coreui/people)", + "scripts": { + "build": "vite build", + "lint": "eslint", + "serve": "vite preview", + "start": "vite" + }, + "dependencies": { + "@coreui/chartjs": "^4.1.0", + "@coreui/coreui": "^5.5.0", + "@coreui/icons": "^3.0.1", + "@coreui/icons-react": "^2.3.0", + "@coreui/react": "^5.9.2", + "@coreui/react-chartjs": "^3.0.0", + "@coreui/utils": "^2.0.2", + "@popperjs/core": "^2.11.8", + "chart.js": "^4.5.1", + "classnames": "^2.5.1", + "core-js": "^3.47.0", + "prop-types": "^15.8.1", + "react": "^19.2.3", + "react-dom": "^19.2.3", + "react-redux": "^9.2.0", + "react-router-dom": "^7.11.0", + "redux": "5.0.1", + "simplebar-react": "^3.3.2" + }, + "devDependencies": { + "@vitejs/plugin-react": "^5.1.2", + "autoprefixer": "^10.4.23", + "eslint": "^9.39.2", + "eslint-config-prettier": "^10.1.8", + "eslint-plugin-prettier": "^5.5.4", + "eslint-plugin-react": "^7.37.5", + "eslint-plugin-react-hooks": "^7.0.1", + "globals": "^16.5.0", + "postcss": "^8.5.6", + "prettier": "3.7.4", + "sass": "^1.97.0", + "vite": "^7.3.0" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..bf08304 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..1ca1724 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "CoreUI-React", + "name": "CoreUI-React sample", + "icons": [ + { + "src": "./assets/img/favicon.png", + "sizes": "100x100", + "type": "image/png" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..f5b2239 --- /dev/null +++ b/src/App.js @@ -0,0 +1,59 @@ +import React, { Suspense, useEffect } from 'react' +import { HashRouter, Route, Routes } from 'react-router-dom' +import { useSelector } from 'react-redux' + +import { CSpinner, useColorModes } from '@coreui/react' +import './scss/style.scss' + +// We use those styles to show code examples, you should remove them in your application. +import './scss/examples.scss' + +// Containers +const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout')) + +// Pages +const Login = React.lazy(() => import('./views/pages/login/Login')) +const Register = React.lazy(() => import('./views/pages/register/Register')) +const Page404 = React.lazy(() => import('./views/pages/page404/Page404')) +const Page500 = React.lazy(() => import('./views/pages/page500/Page500')) + +const App = () => { + const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme') + const storedTheme = useSelector((state) => state.theme) + + useEffect(() => { + const urlParams = new URLSearchParams(window.location.href.split('?')[1]) + const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0] + if (theme) { + setColorMode(theme) + } + + if (isColorModeSet()) { + return + } + + setColorMode(storedTheme) + }, []) // eslint-disable-line react-hooks/exhaustive-deps + + return ( + + + + + } + > + + } /> + } /> + } /> + } /> + } /> + + + + ) +} + +export default App diff --git a/src/_nav.js b/src/_nav.js new file mode 100644 index 0000000..43fd900 --- /dev/null +++ b/src/_nav.js @@ -0,0 +1,99 @@ +import React from 'react' +import CIcon from '@coreui/icons-react' +import { + cilBell, + cilBrowser, + cilBoatAlt, + cilCalculator, + cilChartPie, + cilCursor, + cilDescription, + cilDrop, + cilExternalLink, + cilNotes, + cilPencil, + cilPuzzle, + cilSpeedometer, + cilStar, +} from '@coreui/icons' +import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react' + +const _nav = [ + { + component: CNavItem, + name: 'Dashboard', + to: '/dashboard', + icon: , + badge: { + color: 'info', + text: 'NEW', + }, + }, + { + component: CNavTitle, + name: 'Theme', + }, + { + component: CNavItem, + name: 'Colors', + to: '/theme/colors', + icon: , + }, + { + component: CNavItem, + name: 'Typography', + to: '/theme/typography', + icon: , + }, + { + component: CNavTitle, + name: 'Extras', + }, + { + component: CNavGroup, + name: 'Pages', + icon: , + items: [ + { + component: CNavItem, + name: 'Login', + to: '/login', + }, + { + component: CNavItem, + name: 'Register', + to: '/register', + }, + { + component: CNavItem, + name: 'Error 404', + to: '/404', + }, + { + component: CNavItem, + name: 'Error 500', + to: '/500', + }, + ], + }, + { + component: CNavItem, + name: 'Demo', + href: 'https://coreui.io/demos/react/5.5/free/?theme=light#/dashboard', + icon: , + }, + { + component: CNavItem, + name: 'Docs', + href: 'https://coreui.io/react/docs/templates/installation/', + icon: , + }, + { + component: CNavItem, + name: 'Src', + href: 'https://github.com/coreui/coreui-free-react-admin-template', + icon: , + }, +] + +export default _nav diff --git a/src/assets/brand/logo.js b/src/assets/brand/logo.js new file mode 100644 index 0000000..63961c6 --- /dev/null +++ b/src/assets/brand/logo.js @@ -0,0 +1,18 @@ +export const logo = [ + '599 116', + ` + + + + + + + + + + + + + + `, +] diff --git a/src/assets/brand/sygnet.js b/src/assets/brand/sygnet.js new file mode 100644 index 0000000..53c3c45 --- /dev/null +++ b/src/assets/brand/sygnet.js @@ -0,0 +1,7 @@ +export const sygnet = [ + '102 115', + ` + + + `, +] diff --git a/src/assets/images/angular.jpg b/src/assets/images/angular.jpg new file mode 100644 index 0000000..5044811 Binary files /dev/null and b/src/assets/images/angular.jpg differ diff --git a/src/assets/images/avatars/1.jpg b/src/assets/images/avatars/1.jpg new file mode 100644 index 0000000..8b5f809 Binary files /dev/null and b/src/assets/images/avatars/1.jpg differ diff --git a/src/assets/images/avatars/2.jpg b/src/assets/images/avatars/2.jpg new file mode 100644 index 0000000..161eeef Binary files /dev/null and b/src/assets/images/avatars/2.jpg differ diff --git a/src/assets/images/avatars/3.jpg b/src/assets/images/avatars/3.jpg new file mode 100644 index 0000000..53ecc54 Binary files /dev/null and b/src/assets/images/avatars/3.jpg differ diff --git a/src/assets/images/avatars/4.jpg b/src/assets/images/avatars/4.jpg new file mode 100644 index 0000000..a6ee3c7 Binary files /dev/null and b/src/assets/images/avatars/4.jpg differ diff --git a/src/assets/images/avatars/5.jpg b/src/assets/images/avatars/5.jpg new file mode 100644 index 0000000..c38baee Binary files /dev/null and b/src/assets/images/avatars/5.jpg differ diff --git a/src/assets/images/avatars/6.jpg b/src/assets/images/avatars/6.jpg new file mode 100644 index 0000000..57bbf96 Binary files /dev/null and b/src/assets/images/avatars/6.jpg differ diff --git a/src/assets/images/avatars/7.jpg b/src/assets/images/avatars/7.jpg new file mode 100644 index 0000000..dfc20b7 Binary files /dev/null and b/src/assets/images/avatars/7.jpg differ diff --git a/src/assets/images/avatars/8.jpg b/src/assets/images/avatars/8.jpg new file mode 100644 index 0000000..4e8b48d Binary files /dev/null and b/src/assets/images/avatars/8.jpg differ diff --git a/src/assets/images/avatars/9.jpg b/src/assets/images/avatars/9.jpg new file mode 100644 index 0000000..f690e78 Binary files /dev/null and b/src/assets/images/avatars/9.jpg differ diff --git a/src/assets/images/components.webp b/src/assets/images/components.webp new file mode 100644 index 0000000..dfdee46 Binary files /dev/null and b/src/assets/images/components.webp differ diff --git a/src/assets/images/icons.webp b/src/assets/images/icons.webp new file mode 100644 index 0000000..b5ca82d Binary files /dev/null and b/src/assets/images/icons.webp differ diff --git a/src/assets/images/react.jpg b/src/assets/images/react.jpg new file mode 100644 index 0000000..a1fe5a7 Binary files /dev/null and b/src/assets/images/react.jpg differ diff --git a/src/assets/images/vue.jpg b/src/assets/images/vue.jpg new file mode 100644 index 0000000..d7b3964 Binary files /dev/null and b/src/assets/images/vue.jpg differ diff --git a/src/components/AppBreadcrumb.js b/src/components/AppBreadcrumb.js new file mode 100644 index 0000000..d37de8c --- /dev/null +++ b/src/components/AppBreadcrumb.js @@ -0,0 +1,51 @@ +import React from 'react' +import { useLocation } from 'react-router-dom' + +import routes from '../routes' + +import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' + +const AppBreadcrumb = () => { + const currentLocation = useLocation().pathname + + const getRouteName = (pathname, routes) => { + const currentRoute = routes.find((route) => route.path === pathname) + return currentRoute ? currentRoute.name : false + } + + const getBreadcrumbs = (location) => { + const breadcrumbs = [] + location.split('/').reduce((prev, curr, index, array) => { + const currentPathname = `${prev}/${curr}` + const routeName = getRouteName(currentPathname, routes) + routeName && + breadcrumbs.push({ + pathname: currentPathname, + name: routeName, + active: index + 1 === array.length ? true : false, + }) + return currentPathname + }) + return breadcrumbs + } + + const breadcrumbs = getBreadcrumbs(currentLocation) + + return ( + + Home + {breadcrumbs.map((breadcrumb, index) => { + return ( + + {breadcrumb.name} + + ) + })} + + ) +} + +export default React.memo(AppBreadcrumb) diff --git a/src/components/AppContent.js b/src/components/AppContent.js new file mode 100644 index 0000000..b9a39ef --- /dev/null +++ b/src/components/AppContent.js @@ -0,0 +1,33 @@ +import React, { Suspense } from 'react' +import { Navigate, Route, Routes } from 'react-router-dom' +import { CContainer, CSpinner } from '@coreui/react' + +// routes config +import routes from '../routes' + +const AppContent = () => { + return ( + + }> + + {routes.map((route, idx) => { + return ( + route.element && ( + } + /> + ) + ) + })} + } /> + + + + ) +} + +export default React.memo(AppContent) diff --git a/src/components/AppFooter.js b/src/components/AppFooter.js new file mode 100644 index 0000000..217c5a0 --- /dev/null +++ b/src/components/AppFooter.js @@ -0,0 +1,23 @@ +import React from 'react' +import { CFooter } from '@coreui/react' + +const AppFooter = () => { + return ( + +
+ + CoreUI + + © 2025 creativeLabs. +
+ + + ) +} + +export default React.memo(AppFooter) diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js new file mode 100644 index 0000000..4db98af --- /dev/null +++ b/src/components/AppHeader.js @@ -0,0 +1,131 @@ +import React, { useEffect, useRef } from 'react' +import { NavLink } from 'react-router-dom' +import { useSelector, useDispatch } from 'react-redux' +import { + CContainer, + CDropdown, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CHeader, + CHeaderNav, + CHeaderToggler, + CNavLink, + CNavItem, + useColorModes, +} from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { + cilBell, + cilContrast, + cilEnvelopeOpen, + cilList, + cilMenu, + cilMoon, + cilSun, +} from '@coreui/icons' + +import { AppBreadcrumb } from './index' +import { AppHeaderDropdown } from './header/index' + +const AppHeader = () => { + const headerRef = useRef() + const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme') + + const dispatch = useDispatch() + const sidebarShow = useSelector((state) => state.sidebarShow) + + useEffect(() => { + const handleScroll = () => { + headerRef.current && + headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0) + } + + document.addEventListener('scroll', handleScroll) + return () => document.removeEventListener('scroll', handleScroll) + }, []) + + return ( + + + dispatch({ type: 'set', sidebarShow: !sidebarShow })} + style={{ marginInlineStart: '-14px' }} + > + + + + + + + + + + + + + + + + + + + + + + + +
  • +
    +
    • + + + {colorMode === 'dark' ? ( + + ) : colorMode === 'auto' ? ( + + ) : ( + + )} + + + setColorMode('light')} + > + Light + + setColorMode('dark')} + > + Dark + + setColorMode('auto')} + > + Auto + + + +
  • +
    +
    • + +     +     +     + ) +} + +export default AppHeader diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js new file mode 100644 index 0000000..021cb52 --- /dev/null +++ b/src/components/AppSidebar.js @@ -0,0 +1,59 @@ +import React from 'react' +import { useSelector, useDispatch } from 'react-redux' + +import { + CCloseButton, + CSidebar, + CSidebarBrand, + CSidebarFooter, + CSidebarHeader, + CSidebarToggler, +} from '@coreui/react' +import CIcon from '@coreui/icons-react' + +import { AppSidebarNav } from './AppSidebarNav' + +import { logo } from 'src/assets/brand/logo' +import { sygnet } from 'src/assets/brand/sygnet' + +// sidebar nav config +import navigation from '../_nav' + +const AppSidebar = () => { + const dispatch = useDispatch() + const unfoldable = useSelector((state) => state.sidebarUnfoldable) + const sidebarShow = useSelector((state) => state.sidebarShow) + + return ( + { + dispatch({ type: 'set', sidebarShow: visible }) + }} + > + + + + + + dispatch({ type: 'set', sidebarShow: false })} + /> + + + + dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })} + /> + + + ) +} + +export default React.memo(AppSidebar) diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js new file mode 100644 index 0000000..7583abf --- /dev/null +++ b/src/components/AppSidebarNav.js @@ -0,0 +1,73 @@ +import React from 'react' +import { NavLink } from 'react-router-dom' +import PropTypes from 'prop-types' + +import SimpleBar from 'simplebar-react' +import 'simplebar-react/dist/simplebar.min.css' + +import { CBadge, CNavLink, CSidebarNav } from '@coreui/react' + +export const AppSidebarNav = ({ items }) => { + const navLink = (name, icon, badge, indent = false) => { + return ( + <> + {icon + ? icon + : indent && ( + + + + )} + {name && name} + {badge && ( + + {badge.text} + + )} + + ) + } + + const navItem = (item, index, indent = false) => { + const { component, name, badge, icon, ...rest } = item + const Component = component + return ( + + {rest.to || rest.href ? ( + + {navLink(name, icon, badge, indent)} + + ) : ( + navLink(name, icon, badge, indent) + )} + + ) + } + + const navGroup = (item, index) => { + const { component, name, icon, items, to, ...rest } = item + const Component = component + return ( + + {items?.map((item, index) => + item.items ? navGroup(item, index) : navItem(item, index, true), + )} + + ) + } + + return ( + + {items && + items.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))} + + ) +} + +AppSidebarNav.propTypes = { + items: PropTypes.arrayOf(PropTypes.any).isRequired, +} diff --git a/src/components/DocsComponents.js b/src/components/DocsComponents.js new file mode 100644 index 0000000..b0968b8 --- /dev/null +++ b/src/components/DocsComponents.js @@ -0,0 +1,46 @@ +import PropTypes from 'prop-types' +import React from 'react' + +import ComponentsImg from 'src/assets/images/components.webp' + +const DocsComponents = (props) => ( +
    +
    +
    + CoreUI PRO hexagon +
    +
    + Our Admin Panel isn’t just a mix of third-party components. It’s{' '} + + the only open-source React dashboard built on a professional, enterprise-grade UI + Components Library + + . This component is part of this library, and we present only the basic usage of it here. To + explore extended examples, detailed API documentation, and customization options, refer to + our docs. +
    + +
    +
    +) + +DocsComponents.propTypes = { + href: PropTypes.string, +} + +export default DocsComponents diff --git a/src/components/DocsExample.js b/src/components/DocsExample.js new file mode 100644 index 0000000..2adedad --- /dev/null +++ b/src/components/DocsExample.js @@ -0,0 +1,43 @@ +import PropTypes from 'prop-types' +import React from 'react' +import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { cilCode, cilMediaPlay } from '@coreui/icons' + +const DocsExample = (props) => { + const { children, href, tabContentClassName } = props + + const _href = `https://coreui.io/react/docs/${href}` + + return ( +
    + + + + + Preview + + + + + + Code + + + + + + {children} + + +
    + ) +} + +DocsExample.propTypes = { + children: PropTypes.node, + href: PropTypes.string, + tabContentClassName: PropTypes.string, +} + +export default React.memo(DocsExample) diff --git a/src/components/DocsIcons.js b/src/components/DocsIcons.js new file mode 100644 index 0000000..e3fab60 --- /dev/null +++ b/src/components/DocsIcons.js @@ -0,0 +1,31 @@ +import React from 'react' + +import IconsImg from 'src/assets/images/icons.webp' + +const DocsIcons = () => ( +
    +
    +
    + CoreUI Icons +
    +
    + CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, + and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You + can use them in your digital products for web or mobile app. For more information please + visit our documentation. +
    + +
    +
    +) + +export default DocsIcons diff --git a/src/components/DocsLink.js b/src/components/DocsLink.js new file mode 100644 index 0000000..7c72aa1 --- /dev/null +++ b/src/components/DocsLink.js @@ -0,0 +1,31 @@ +import PropTypes from 'prop-types' +import React from 'react' +import { CLink } from '@coreui/react' + +const DocsLink = (props) => { + const { href, name, text, ...rest } = props + + const _href = name ? `https://coreui.io/react/docs/components/${name}` : href + + return ( +
    + + {text || 'docs'} + +
    + ) +} + +DocsLink.propTypes = { + href: PropTypes.string, + name: PropTypes.string, + text: PropTypes.string, +} + +export default React.memo(DocsLink) diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js new file mode 100644 index 0000000..30c0df8 --- /dev/null +++ b/src/components/header/AppHeaderDropdown.js @@ -0,0 +1,96 @@ +import React from 'react' +import { + CAvatar, + CBadge, + CDropdown, + CDropdownDivider, + CDropdownHeader, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, +} from '@coreui/react' +import { + cilBell, + cilCreditCard, + cilCommentSquare, + cilEnvelopeOpen, + cilFile, + cilLockLocked, + cilSettings, + cilTask, + cilUser, +} from '@coreui/icons' +import CIcon from '@coreui/icons-react' + +import avatar8 from './../../assets/images/avatars/8.jpg' + +const AppHeaderDropdown = () => { + return ( + + + + + + Account + + + Updates + + 42 + + + + + Messages + + 42 + + + + + Tasks + + 42 + + + + + Comments + + 42 + + + Settings + + + Profile + + + + Settings + + + + Payments + + 42 + + + + + Projects + + 42 + + + + + + Lock Account + + + + ) +} + +export default AppHeaderDropdown diff --git a/src/components/header/index.js b/src/components/header/index.js new file mode 100644 index 0000000..bf8af6c --- /dev/null +++ b/src/components/header/index.js @@ -0,0 +1,3 @@ +import AppHeaderDropdown from './AppHeaderDropdown' + +export { AppHeaderDropdown } diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..93fb52c --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,23 @@ +import AppBreadcrumb from './AppBreadcrumb' +import AppContent from './AppContent' +import AppFooter from './AppFooter' +import AppHeader from './AppHeader' +import AppHeaderDropdown from './header/AppHeaderDropdown' +import AppSidebar from './AppSidebar' +import DocsComponents from './DocsComponents' +import DocsIcons from './DocsIcons' +import DocsLink from './DocsLink' +import DocsExample from './DocsExample' + +export { + AppBreadcrumb, + AppContent, + AppFooter, + AppHeader, + AppHeaderDropdown, + AppSidebar, + DocsComponents, + DocsIcons, + DocsLink, + DocsExample, +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..11d6e86 --- /dev/null +++ b/src/index.js @@ -0,0 +1,13 @@ +import React from 'react' +import { createRoot } from 'react-dom/client' +import { Provider } from 'react-redux' +import 'core-js' + +import App from './App' +import store from './store' + +createRoot(document.getElementById('root')).render( + + + , +) diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js new file mode 100644 index 0000000..19fbf22 --- /dev/null +++ b/src/layout/DefaultLayout.js @@ -0,0 +1,19 @@ +import React from 'react' +import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index' + +const DefaultLayout = () => { + return ( +
    + +
    + +
    + +
    + +
    +
    + ) +} + +export default DefaultLayout diff --git a/src/routes.js b/src/routes.js new file mode 100644 index 0000000..ad97fbb --- /dev/null +++ b/src/routes.js @@ -0,0 +1,15 @@ +import React from 'react' + +const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard')) +const Colors = React.lazy(() => import('./views/theme/colors/Colors')) +const Typography = React.lazy(() => import('./views/theme/typography/Typography')) + +const routes = [ + { path: '/', exact: true, name: 'Home' }, + { path: '/dashboard', name: 'Dashboard', element: Dashboard }, + { path: '/theme', name: 'Theme', element: Colors, exact: true }, + { path: '/theme/colors', name: 'Colors', element: Colors }, + { path: '/theme/typography', name: 'Typography', element: Typography }, +] + +export default routes diff --git a/src/scss/examples.scss b/src/scss/examples.scss new file mode 100644 index 0000000..83e43f3 --- /dev/null +++ b/src/scss/examples.scss @@ -0,0 +1,116 @@ +/* stylelint-disable scss/selector-no-redundant-nesting-selector */ +@use "@coreui/coreui/scss/variables" as * with ( + $enable-deprecation-messages: false +); +@use "@coreui/coreui/scss/mixins/breakpoints" as *; +@use "@coreui/coreui/scss/mixins/color-mode" as *; + +.example { + &:not(:first-child) { + margin-top: 1.5rem; + } + + .tab-content { + background-color: var(--#{$prefix}tertiary-bg); + } + + & + p { + margin-top: 1.5rem; + } + + // Components examples + .preview { + + p { + margin-top: 2rem; + } + + > .form-control { + + .form-control { + margin-top: .5rem; + } + } + + > .nav + .nav, + > .alert + .alert, + > .navbar + .navbar, + > .progress + .progress { + margin-top: 1rem; + } + + > .dropdown-menu { + position: static; + display: block; + } + + > :last-child { + margin-bottom: 0; + } + + // Images + > svg + svg, + > img + img { + margin-left: .5rem; + } + + // Buttons + .col > .btn, + .col-auto > .btn, + > .btn, + > .btn-group { + margin: .25rem .125rem; + } + > .btn-toolbar + .btn-toolbar { + margin-top: .5rem; + } + + // List groups + > .list-group { + max-width: 400px; + } + + > [class*="list-group-horizontal"] { + max-width: 100%; + } + + // Navbars + .fixed-top, + .sticky-top { + position: static; + margin: -1rem -1rem 1rem; + } + + .fixed-bottom { + position: static; + margin: 1rem -1rem -1rem; + } + + @include media-breakpoint-up(sm) { + .fixed-top, + .sticky-top { + margin: -1.5rem -1.5rem 1rem; + } + .fixed-bottom { + margin: 1rem -1.5rem -1.5rem; + } + } + + // Pagination + .pagination { + margin-top: .5rem; + margin-bottom: .5rem; + } + + .docs-example-modal { + .modal { + position: static; + display: block; + } + } + } +} + +@include color-mode(dark) { + .example .tab-content { + background-color: var(--#{$prefix}secondary-bg); + } +} diff --git a/src/scss/style.scss b/src/scss/style.scss new file mode 100644 index 0000000..6b8f2b2 --- /dev/null +++ b/src/scss/style.scss @@ -0,0 +1,67 @@ +@use "@coreui/coreui/scss/coreui" as * with ( + $enable-deprecation-messages: false, +); +@use "@coreui/chartjs/scss/coreui-chartjs"; +@use "vendors/simplebar"; + +body { + background-color: var(--cui-tertiary-bg); +} + +.wrapper { + width: 100%; + padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0); + will-change: auto; + @include transition(padding .15s); +} + +.header > .container-fluid, +.sidebar-header { + min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list +} + +.sidebar-brand-full { + margin-left: 3px; +} + +.sidebar-header { + .nav-underline-border { + --cui-nav-underline-border-link-padding-x: 1rem; + --cui-nav-underline-border-gap: 0; + } + + .nav-link { + display: flex; + align-items: center; + min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list + } +} + +.sidebar-toggler { + margin-inline-start: auto; +} + +.sidebar-narrow, +.sidebar-narrow-unfoldable:not(:hover) { + .sidebar-toggler { + margin-inline-end: auto; + } +} + +.header > .container-fluid + .container-fluid { + min-height: 3rem; +} + +.footer { + min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list +} + +@include color-mode(dark) { + body { + background-color: var(--cui-dark-bg-subtle); + } + + .footer { + --cui-footer-bg: var(--cui-body-bg); + } +} diff --git a/src/scss/vendors/simplebar.scss b/src/scss/vendors/simplebar.scss new file mode 100644 index 0000000..59c81b8 --- /dev/null +++ b/src/scss/vendors/simplebar.scss @@ -0,0 +1,5 @@ +.simplebar-content { + display: flex; + flex-direction: column; + min-height: 100%; +} diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..8ad30da --- /dev/null +++ b/src/store.js @@ -0,0 +1,18 @@ +import { legacy_createStore as createStore } from 'redux' + +const initialState = { + sidebarShow: true, + theme: 'light', +} + +const changeState = (state = initialState, { type, ...rest }) => { + switch (type) { + case 'set': + return { ...state, ...rest } + default: + return state + } +} + +const store = createStore(changeState) +export default store diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js new file mode 100644 index 0000000..82ddd12 --- /dev/null +++ b/src/views/dashboard/Dashboard.js @@ -0,0 +1,211 @@ +import React from 'react' +import classNames from 'classnames' + +import { + CAvatar, + CButton, + CButtonGroup, + CCard, + CCardBody, + CCardFooter, + CCardHeader, + CCol, + CProgress, + CRow, + CTable, + CTableBody, + CTableDataCell, + CTableHead, + CTableHeaderCell, + CTableRow, +} from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { + cibCcAmex, + cibCcApplePay, + cibCcMastercard, + cibCcPaypal, + cibCcStripe, + cibCcVisa, + cibGoogle, + cibFacebook, + cibLinkedin, + cifBr, + cifEs, + cifFr, + cifIn, + cifPl, + cifUs, + cibTwitter, + cilCloudDownload, + cilPeople, + cilUser, + cilUserFemale, +} from '@coreui/icons' + +import avatar1 from 'src/assets/images/avatars/1.jpg' +import avatar2 from 'src/assets/images/avatars/2.jpg' +import avatar3 from 'src/assets/images/avatars/3.jpg' +import avatar4 from 'src/assets/images/avatars/4.jpg' +import avatar5 from 'src/assets/images/avatars/5.jpg' +import avatar6 from 'src/assets/images/avatars/6.jpg' + +import MainChart from './MainChart' + +const Dashboard = () => { + const tableExample = [ + { + avatar: { src: avatar1, status: 'success' }, + user: { + name: 'Yiorgos Avraamu', + new: true, + registered: 'Jan 1, 2023', + }, + country: { name: 'USA', flag: cifUs }, + usage: { + value: 50, + period: 'Jun 11, 2023 - Jul 10, 2023', + color: 'success', + }, + payment: { name: 'Mastercard', icon: cibCcMastercard }, + activity: '10 sec ago', + }, + { + avatar: { src: avatar2, status: 'danger' }, + user: { + name: 'Avram Tarasios', + new: false, + registered: 'Jan 1, 2023', + }, + country: { name: 'Brazil', flag: cifBr }, + usage: { + value: 22, + period: 'Jun 11, 2023 - Jul 10, 2023', + color: 'info', + }, + payment: { name: 'Visa', icon: cibCcVisa }, + activity: '5 minutes ago', + }, + { + avatar: { src: avatar3, status: 'warning' }, + user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' }, + country: { name: 'India', flag: cifIn }, + usage: { + value: 74, + period: 'Jun 11, 2023 - Jul 10, 2023', + color: 'warning', + }, + payment: { name: 'Stripe', icon: cibCcStripe }, + activity: '1 hour ago', + }, + { + avatar: { src: avatar4, status: 'secondary' }, + user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' }, + country: { name: 'France', flag: cifFr }, + usage: { + value: 98, + period: 'Jun 11, 2023 - Jul 10, 2023', + color: 'danger', + }, + payment: { name: 'PayPal', icon: cibCcPaypal }, + activity: 'Last month', + }, + { + avatar: { src: avatar5, status: 'success' }, + user: { + name: 'Agapetus Tadeáš', + new: true, + registered: 'Jan 1, 2023', + }, + country: { name: 'Spain', flag: cifEs }, + usage: { + value: 22, + period: 'Jun 11, 2023 - Jul 10, 2023', + color: 'primary', + }, + payment: { name: 'Google Wallet', icon: cibCcApplePay }, + activity: 'Last week', + }, + { + avatar: { src: avatar6, status: 'danger' }, + user: { + name: 'Friderik Dávid', + new: true, + registered: 'Jan 1, 2023', + }, + country: { name: 'Poland', flag: cifPl }, + usage: { + value: 43, + period: 'Jun 11, 2023 - Jul 10, 2023', + color: 'success', + }, + payment: { name: 'Amex', icon: cibCcAmex }, + activity: 'Last week', + }, + ] + + return ( + <> + + Traffic {' & '} Sales + + + + + + + + User + + Country + + Usage + + Payment Method + + Activity + + + + {tableExample.map((item, index) => ( + + + + + +
    {item.user.name}
    +
    + {item.user.new ? 'New' : 'Recurring'} | Registered:{' '} + {item.user.registered} +
    +     + + + + +
    +
    {item.usage.value}%
    +
    + {item.usage.period} +
    +
    + +     + + + + +
    Last login
    +
    {item.activity}
    +     +     + ))} +     +     +     +     + + ) +} + +export default Dashboard diff --git a/src/views/dashboard/MainChart.js b/src/views/dashboard/MainChart.js new file mode 100644 index 0000000..98b7eec --- /dev/null +++ b/src/views/dashboard/MainChart.js @@ -0,0 +1,137 @@ +import React, { useEffect, useRef } from 'react' + +import { CChartLine } from '@coreui/react-chartjs' +import { getStyle } from '@coreui/utils' + +const MainChart = () => { + const chartRef = useRef(null) + + useEffect(() => { + const handleColorSchemeChange = () => { + if (chartRef.current) { + setTimeout(() => { + chartRef.current.options.scales.x.grid.borderColor = getStyle( + '--cui-border-color-translucent', + ) + chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent') + chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color') + chartRef.current.options.scales.y.grid.borderColor = getStyle( + '--cui-border-color-translucent', + ) + chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent') + chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color') + chartRef.current.update() + }) + } + } + + document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange) + return () => + document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange) + }, [chartRef]) + + const random = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min + + return ( + <> + + + ) +} + +export default MainChart diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js new file mode 100644 index 0000000..1b2ee0b --- /dev/null +++ b/src/views/pages/login/Login.js @@ -0,0 +1,86 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import { + CButton, + CCard, + CCardBody, + CCardGroup, + CCol, + CContainer, + CForm, + CFormInput, + CInputGroup, + CInputGroupText, + CRow, +} from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { cilLockLocked, cilUser } from '@coreui/icons' + +const Login = () => { + return ( +
    + + + + + + + +

    Login

    +

    Sign In to your account

    + + + + + + + + + + + + + + + + Login + + + + + Forgot password? + + + +     +     +     + + +
    +

    Sign up

    +

    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +

    + + + Register Now! + + +
    +     +     +     +     +     +     +
    + ) +} + +export default Login diff --git a/src/views/pages/page404/Page404.js b/src/views/pages/page404/Page404.js new file mode 100644 index 0000000..d7fe9a0 --- /dev/null +++ b/src/views/pages/page404/Page404.js @@ -0,0 +1,41 @@ +import React from 'react' +import { + CButton, + CCol, + CContainer, + CFormInput, + CInputGroup, + CInputGroupText, + CRow, +} from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { cilMagnifyingGlass } from '@coreui/icons' + +const Page404 = () => { + return ( +
    + + + +
    +

    404

    +

    Oops! You{"'"}re lost.

    +

    + The page you are looking for was not found. +

    +
    + + + + + + Search + +     +     +     +
    + ) +} + +export default Page404 diff --git a/src/views/pages/page500/Page500.js b/src/views/pages/page500/Page500.js new file mode 100644 index 0000000..ea11a0c --- /dev/null +++ b/src/views/pages/page500/Page500.js @@ -0,0 +1,41 @@ +import React from 'react' +import { + CButton, + CCol, + CContainer, + CFormInput, + CInputGroup, + CInputGroupText, + CRow, +} from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { cilMagnifyingGlass } from '@coreui/icons' + +const Page500 = () => { + return ( +
    + + + + +

    500

    +

    Houston, we have a problem!

    +

    + The page you are looking for is temporarily unavailable. +

    +     + + + + + + Search + +     +     +     +
    + ) +} + +export default Page500 diff --git a/src/views/pages/register/Register.js b/src/views/pages/register/Register.js new file mode 100644 index 0000000..d78b24c --- /dev/null +++ b/src/views/pages/register/Register.js @@ -0,0 +1,71 @@ +import React from 'react' +import { + CButton, + CCard, + CCardBody, + CCol, + CContainer, + CForm, + CFormInput, + CInputGroup, + CInputGroupText, + CRow, +} from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { cilLockLocked, cilUser } from '@coreui/icons' + +const Register = () => { + return ( +
    + + + + + + +

    Register

    +

    Create your account

    + + + + + + + + @ + + + + + + + + + + + + + + +
    + Create Account +
    +     +     +     +     +     +     +
    + ) +} + +export default Register diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js new file mode 100644 index 0000000..ef844e1 --- /dev/null +++ b/src/views/theme/colors/Colors.js @@ -0,0 +1,91 @@ +import React, { useEffect, useState, createRef } from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' +import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react' +import { rgbToHex } from '@coreui/utils' +import { DocsLink } from 'src/components' + +const ThemeView = () => { + const [color, setColor] = useState('rgb(255, 255, 255)') + const ref = createRef() + + useEffect(() => { + const el = ref.current.parentNode.firstChild + const varColor = window.getComputedStyle(el).getPropertyValue('background-color') + setColor(varColor) + }, [ref]) + + return ( + + + + + + + + + + + +
    HEX:{rgbToHex(color)}
    RGB:{color}
    + ) +} + +const ThemeColor = ({ className, children }) => { + const classes = classNames(className, 'theme-color w-75 rounded mb-3') + return ( + +
    + {children} + +     + ) +} + +ThemeColor.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +} + +const Colors = () => { + return ( + <> + + + Theme colors + + + + + +
    Brand Primary Color
    +     + +
    Brand Secondary Color
    +     + +
    Brand Success Color
    +     + +
    Brand Danger Color
    +     + +
    Brand Warning Color
    +     + +
    Brand Info Color
    +     + +
    Brand Light Color
    +     + +
    Brand Dark Color
    +     +     +     +     + + ) +} + +export default Colors diff --git a/src/views/theme/typography/Typography.js b/src/views/theme/typography/Typography.js new file mode 100644 index 0000000..1cae4f6 --- /dev/null +++ b/src/views/theme/typography/Typography.js @@ -0,0 +1,229 @@ +import React from 'react' +import { CCard, CCardHeader, CCardBody } from '@coreui/react' +import { DocsLink } from 'src/components' + +const Typography = () => { + return ( + <> + + + Headings + + + +

    + Documentation and examples for Bootstrap typography, including global settings, + headings, body text, lists, and more. +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    HeadingExample
    +

    + <h1></h1> +

    +     		+ h1. Bootstrap heading +
    +

    + <h2></h2> +

    +     		+ h2. Bootstrap heading +
    +

    + <h3></h3> +

    +     		+ h3. Bootstrap heading +
    +

    + <h4></h4> +

    +     		+ h4. Bootstrap heading +
    +

    + <h5></h5> +

    +     		+ h5. Bootstrap heading +
    +

    + <h6></h6> +

    +     		+ h6. Bootstrap heading +
    +     +     + + Headings + +

    + .h1 through + .h6 + classes are also available, for when you want to match the font styling of a heading but + cannot use the associated HTML element. +

    +
    +

    h1. Bootstrap heading

    +

    h2. Bootstrap heading

    +

    h3. Bootstrap heading

    +

    h4. Bootstrap heading

    +

    h5. Bootstrap heading

    +

    h6. Bootstrap heading

    +
    +     +     + +
    Display headings
    +
    +

    + Traditional heading elements are designed to work best in the meat of your page content. + When you need a heading to stand out, consider using a display heading + —a larger, slightly more opinionated heading style. +

    +
    + + + + + + + + + + + + + + + +
    + Display 1 +
    + Display 2 +
    + Display 3 +
    + Display 4 +
    +
    +
    +     + + Inline text elements + +

    + Traditional heading elements are designed to work best in the meat of your page content. + When you need a heading to stand out, consider using a display heading + —a larger, slightly more opinionated heading style. +

    +
    +

    + You can use the mark tag to highlight text. +

    +

    + This line of text is meant to be treated as deleted text. +

    +

    + This line of text is meant to be treated as no longer accurate. +

    +

    + This line of text is meant to be treated as an addition to the document. +

    +

    + This line of text will render as underlined +

    +

    + This line of text is meant to be treated as fine print. +

    +

    + This line rendered as bold text. +

    +

    + This line rendered as italicized text. +

    +
    +     +     + + Description list alignment + +

    + Align terms and descriptions horizontally by using our grid system’s predefined classes + (or semantic mixins). For longer terms, you can optionally add a{' '} + .text-truncate class to truncate the text + with an ellipsis. +

    +
    +
    +
    Description lists
    +
    A description list is perfect for defining terms.
    + +
    Euismod
    +
    +

    + Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. +

    +

    Donec id elit non mi porta gravida at eget metus.

    +
    + +
    Malesuada porta
    +
    Etiam porta sem malesuada magna mollis euismod.
    + +
    Truncated term is truncated
    +
    + Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut + fermentum massa justo sit amet risus. +
    + +
    Nesting
    +
    +
    +
    Nested definition list
    +
    + Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. +
    +
    +
    +
    +
    +     +     + + ) +} + +export default Typography diff --git a/vite.config.mjs b/vite.config.mjs new file mode 100644 index 0000000..dc050f7 --- /dev/null +++ b/vite.config.mjs @@ -0,0 +1,50 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import path from 'node:path' +import autoprefixer from 'autoprefixer' + +export default defineConfig(() => { + return { + base: './', + build: { + outDir: 'build', + }, + css: { + postcss: { + plugins: [ + autoprefixer({}), // add options if needed + ], + }, + }, + esbuild: { + loader: 'jsx', + include: /src\/.*\.jsx?$/, + exclude: [], + }, + optimizeDeps: { + force: true, + esbuildOptions: { + loader: { + '.js': 'jsx', + }, + }, + }, + plugins: [react()], + resolve: { + alias: [ + { + find: 'src/', + replacement: `${path.resolve(__dirname, 'src')}/`, + }, + ], + extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss'], + }, + server: { + host: '0.0.0.0', + port: 3000, + proxy: { + // https://vitejs.dev/config/server-options.html + }, + }, + } +})