Init DEMO

.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

.env

@@ -0,0 +1,2 @@
+PORT=3000
+CHOKIDAR_USEPOLLING=true

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+package-lock.json
+
+# 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*

CHANGELOG.md

@@ -0,0 +1,68 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+#### [3.2.1](https://github.com/coreui/coreui-free-react-admin-template/compare/3.2.0...3.2.1)
+
+> 30 March 2021
+
+- chore: dependencies update - closes #294 [`#294`](https://github.com/coreui/coreui-free-react-admin-template/issues/294)
+
+### [3.2.0](https://github.com/coreui/coreui-free-react-admin-template/compare/3.1.1...3.2.0)
+
+> 14 December 2020
+
+- fix(BrandButtons): minor temp fixes with stylings [`f0c0585`](https://github.com/coreui/coreui-free-react-admin-template/commit/f0c05858329430c9487bdcfcf36d0aa98f60776d)
+- refactor: polyfills cleanup [`9522ade`](https://github.com/coreui/coreui-free-react-admin-template/commit/9522ade1f1eb2c5a26d5208fe6e44be803123bd2)
+- chore: 3.2.0 release for React 17 [`9d5ba97`](https://github.com/coreui/coreui-free-react-admin-template/commit/9d5ba97b4d7ab7d2adbb09b8a2c74d4f00fadbcc)
+- test: refactor, import temp update [`f3f91c5`](https://github.com/coreui/coreui-free-react-admin-template/commit/f3f91c5d721754a2dac26143f312415c94c7ed68)
+- chore: React 17 and dependencies update [`f6a710f`](https://github.com/coreui/coreui-free-react-admin-template/commit/f6a710ffd6996c9b6b026b8eebed6ff390757fe1)
+- fix(_nav): no anonymous default export [`ed83c9a`](https://github.com/coreui/coreui-free-react-admin-template/commit/ed83c9a3d4199b8c6566a6e01396cdcbca80cf42)
+
+#### [3.1.1](https://github.com/coreui/coreui-free-react-admin-template/compare/3.1.0...3.1.1)
+
+> 26 November 2020
+
+- chore: dependencies update [`5b70904`](https://github.com/coreui/coreui-free-react-admin-template/commit/5b70904d8f22f61a71def3306ea96ad640573c39)
+- chore: add changelog [`de605cc`](https://github.com/coreui/coreui-free-react-admin-template/commit/de605cc1aadec9fb066625c6bc7b656590efc7bb)
+- chore: limit changelog to version 3 [`6ac9a1d`](https://github.com/coreui/coreui-free-react-admin-template/commit/6ac9a1d094d4d293ddacb3f3562216a98be8e129)
+- chore: add migration docs [`b661344`](https://github.com/coreui/coreui-free-react-admin-template/commit/b661344485a38404b8c2b1326e3a4258009b071c)
+- chore: changelog update [`f9f1927`](https://github.com/coreui/coreui-free-react-admin-template/commit/f9f19274f046cf5f11f68d6c7eb7ae04c553f219)
+- chore: .gitignore cleanup [`ba21e00`](https://github.com/coreui/coreui-free-react-admin-template/commit/ba21e001944322fb48e43264719b94368c589732)
+- chore: 3.1.1 release [`081b957`](https://github.com/coreui/coreui-free-react-admin-template/commit/081b957291a8020e3d2e3b42c1f0a1455a49c524)
+
+#### [3.1.0](https://github.com/coreui/coreui-free-react-admin-template/compare/3.0.0...3.1.0)
+
+> 12 August 2020
+
+- docs(readme): CoreUI react theme setup with laravel tutorial link add into readme [`#226`](https://github.com/coreui/coreui-free-react-admin-template/pull/226)
+- fix: fix template testing [`68ce41d`](https://github.com/coreui/coreui-free-react-admin-template/commit/68ce41db6831d6995121766a5771dc9d667cc61a)
+- chore: 3.1.0 release - update dependencies [`92f55b8`](https://github.com/coreui/coreui-free-react-admin-template/commit/92f55b8cdfd748a9e72649d5da62b93015a1c8e6)
+- refactor: add reusable folder with DocsLink component [`eef84db`](https://github.com/coreui/coreui-free-react-admin-template/commit/eef84dbbd770c7253080a6f69443c40e4fecefd2)
+- feat: add CSwitch examples to forms [`b31e452`](https://github.com/coreui/coreui-free-react-admin-template/commit/b31e452fd0ea736763d3032d7204cd478863b505)
+- refactor: add CIcon example in _nav.js [`be5d1f0`](https://github.com/coreui/coreui-free-react-admin-template/commit/be5d1f0618f981f18c45be87afb56c4409bd3389)
+
+### [3.0.0](https://github.com/coreui/coreui-free-react-admin-template/compare/v2.6.1...3.0.0)
+
+> 17 June 2020
+
+- feat: update template to version 3 [`cc79542`](https://github.com/coreui/coreui-free-react-admin-template/commit/cc795425bbf610873fcdf6938b5fb0aba49a4d97)
+- refactor: update folder casing to kebab-case [`75138b0`](https://github.com/coreui/coreui-free-react-admin-template/commit/75138b0d0340cc21d58bcc2f800f042f86e54346)
+- refactor: temporarily delete views folder [`cb4433a`](https://github.com/coreui/coreui-free-react-admin-template/commit/cb4433a3e33cb943bc1f47199110ead28fab517b)
+- docs: README update [`188e0b1`](https://github.com/coreui/coreui-free-react-admin-template/commit/188e0b1c09fd7d47dc87d0410303ae43e8ee79de)
+- chore: clear packages [`e236aad`](https://github.com/coreui/coreui-free-react-admin-template/commit/e236aad4ab0129e3611adfc2127670da64696e54)
+- fix: delete obsolete files, fix logos [`f479a5d`](https://github.com/coreui/coreui-free-react-admin-template/commit/f479a5dc72bb5bb75b95a4b904d1c350be8fe7bc)
+- chore: 3.0.0-beta.1 release [`d940f92`](https://github.com/coreui/coreui-free-react-admin-template/commit/d940f92ef741d7eab021af4fbcf385823c80421a)
+- fix: fix accordion, delete aside [`0e6506e`](https://github.com/coreui/coreui-free-react-admin-template/commit/0e6506ea3303ca30bc21ba2bcf3717a3f009dc8c)
+- refactor: optimize icon bundle size, update icons [`9fed168`](https://github.com/coreui/coreui-free-react-admin-template/commit/9fed168a534b88cb27371d6364b922418a5a13b4)
+- refacotor: template updates [`1df8c15`](https://github.com/coreui/coreui-free-react-admin-template/commit/1df8c15030d45779f6adc5031153eaff09701d97)
+- refactor: turn logos extensions from svg to js [`8c0deee`](https://github.com/coreui/coreui-free-react-admin-template/commit/8c0deeed169267155323a5b6bdbbdfaf8a856a41)
+- refactor: rename containers from 'Default' to 'The', small fixes [`bfc79da`](https://github.com/coreui/coreui-free-react-admin-template/commit/bfc79da4039dd534ee49b4526978f7b949cea90b)
+- refactor: update icons to version 2, rtl fixes [`8e4fbc2`](https://github.com/coreui/coreui-free-react-admin-template/commit/8e4fbc2aa8786b00a004282260c52986e1cd2430)
+- fix: delete unneded icons, aside, fix readme.md [`1ee0561`](https://github.com/coreui/coreui-free-react-admin-template/commit/1ee05619ba15d050b73df21c8d1347e8329942d5)
+- chore: 3.0.0 version release - update dependencies [`fd5236d`](https://github.com/coreui/coreui-free-react-admin-template/commit/fd5236d47340b336bf641041cbf6d48ec8b1081a)
+- feat: add query parameters to Users view [`98f8b67`](https://github.com/coreui/coreui-free-react-admin-template/commit/98f8b677edb96f9175b7d4c20370c3d6744543bd)
+- docs: add license [`db85786`](https://github.com/coreui/coreui-free-react-admin-template/commit/db85786be465fdb7a84b7337dbe876afc5e957bc)
+- chore: update react.md [`5aa0cc3`](https://github.com/coreui/coreui-free-react-admin-template/commit/5aa0cc3ce15c841032cd75392418cfeb2e4d094f)
+- docs: README cleanup [`82a4351`](https://github.com/coreui/coreui-free-react-admin-template/commit/82a4351daa6c8d452e19c7141dbadecc3f721c1b)
+- fix: fix Icons views [`1777a09`](https://github.com/coreui/coreui-free-react-admin-template/commit/1777a092f6444497120e85c8852a1e4779640e71)

HEAD

@@ -0,0 +1 @@
+ref: refs/heads/master

ISSUE_TEMPLATE.md

@@ -0,0 +1,20 @@
+Before opening an issue:
+
+- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-react-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)
+- Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs
+
+
+When asking general "how to" questions:
+
+- Please do not open an issue here
+
+When reporting a bug, include:
+
+- Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
+- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera, Android Browser)
+- Reduced test cases and potential fixes using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)
+
+When suggesting a feature, include:
+
+- As much detail as possible for what we should add and why it's important to CoreUI Admin Template
+- Relevant links to prior art, screenshots, or live demos whenever possible

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 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.

REACT.md

@@ -0,0 +1,19 @@
+# CoreUI React version
+
+## Intro 
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
+
+It uses Sass (with .scss). The styles are loaded at the template level with `node-sass-chokidar` css preprocessor
+
+Dependencies are handled by **npm**.
+
+## Usage
+`npm i` - to install dependencies
+
+## Sctipts 
+`npm start` for developing (it runs webpack-dev-server)  
+`npm run build` to run a dev build  
+
+## See also
+[Create-React-App](CRA.md)
+[Readme](./README.md)

README.md

@@ -0,0 +1,177 @@
+[![@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 next][npm-next]][npm]
+
+[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-next]: https://img.shields.io/npm/v/@coreui/react/next.png?style=flat-square
+[npm]: https://www.npmjs.com/package/@coreui/react
+
+# CoreUI Free React Admin Template v3
+
+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)
+* [Installation](#installation)
+* [Basic usage](#create-react-app)
+* [What's included](#whats-included)
+* [Documentation](#documentation)
+* [Versioning](#versioning)
+* [Creators](#creators)
+* [Community](#community)
+* [Copyright and License](#copyright-and-license)
+
+## Versions
+
+* [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)
+* [CoreUI Free Angular 9+ Admin Template](https://github.com/coreui/coreui-free-angular-admin-template)
+* [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template)
+* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)
+* [CoreUI Free Laravel Admin Template](https://github.com/coreui/coreui-free-laravel-admin-template)
+* [CoreUI Free Vue.js + Laravel Admin Template](https://github.com/coreui/coreui-free-vue-laravel-admin-template)
+
+## CoreUI Pro
+
+**Only customers with [Enterpise Membership Plan](https://coreui.io/pro/#buy) have access to private github CoreUI Pro repository.**
+
+* 💪  [CoreUI Pro Bootstrap Admin Template](https://coreui.io/pro/)
+* 💪  [CoreUI Pro Angular 9+ Admin Template](https://coreui.io/pro/angular)
+* 💪  [CoreUI Pro React Admin Template](https://coreui.io/pro/react)
+* 💪  [CoreUI Pro Vue Admin Template](https://coreui.io/pro/vue)
+* 💪  [CoreUI Pro Laravel Admin Template](https://coreui.io/pro/laravel/)
+* 💪  [CoreUI Pro Vue.js + Laravel Admin Template](https://coreui.io/pro/vue-laravel/)
+
+## Installation
+
+### Clone repo
+
+``` bash
+# clone the repo
+$ git clone https://github.com/coreui/coreui-free-react-admin-template.git my-project
+
+# go into app's directory
+$ cd my-project
+
+# checkout stable version
+$ git checkout master
+
+# install app's dependencies
+$ npm install
+```
+
+### Copy and Paste
+
+Copy all your files to your project folder and then,
+
+``` bash
+# go into app's directory
+$ cd my-project
+
+# install app's dependencies
+$ npm install
+```
+
+## Create React App
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
+
+see also:
+[CRA docs](https://create-react-app.dev/docs/getting-started)
+
+### Basic usage
+
+``` bash
+# dev server with hot reload at http://localhost:3000
+$ npm 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
+```
+
+## 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-React#v3.0.0
+├── public/          #static files
+│   └── index.html   #html template
+│
+├── src/             #project root
+│   ├── assets/      #assets - js icons object
+│   ├── containers/  #container source - template layout
+|   │   ├── _nav.js  #sidebar config
+|   │   └── ...      
+│   ├── scss/        #user scss/css source
+│   ├── views/       #views source
+│   ├── App.js
+│   ├── App.test.js
+│   ├── polyfill.js
+│   ├── index.js
+│   ├── routes.js    #routes config
+│   └── store.js     #template state example 
+│
+└── package.json
+```
+
+## Documentation
+
+The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/)
+
+### :film_strip: How to setup coreui react theme in laravel. Video tutorial available [here](https://youtu.be/HVVpbpNUJ8M)
+
+## 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**
+* <https://twitter.com/lukaszholeczek>
+* <https://github.com/mrholek>
+* <https://github.com/coreui>
+
+**CoreUI team**
+* https://github.com/orgs/coreui/people
+
+## 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/).
+
+
+## Copyright and License
+
+copyright 2020 creativeLabs Łukasz Holeczek.   
+
+ 
+Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/master/LICENSE).
+There is only one limitation you can't can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI. In past we faced some problems with persons who tried to sell CoreUI based templates.
+
+## Support CoreUI Development
+
+CoreUI is an MIT licensed open source project and 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 [CoreUI Pro Version](https://coreui.io/pro/).
+
+We're also open to conversations regarding custom sponsorship / consulting arrangements. Get in touch on [Twitter](https://twitter.com/lukaszholeczek).

config

@@ -0,0 +1,13 @@
+[core]
+	repositoryformatversion = 0
+	filemode = false
+	bare = true
+	symlinks = false
+	ignorecase = true
+[submodule]
+	active = .
+[remote "origin"]
+	url = http://176.104.105.124:3000/safet.purkovic/PDFEngineDemoUI
+[branch "master"]
+	remote = origin
+	merge = refs/heads/master

description

@@ -0,0 +1 @@
+Unnamed repository; edit this file 'description' to name the repository.

hooks/applypatch-msg.sample

@@ -0,0 +1,15 @@
+#!/bin/sh
+#
+# An example hook script to check the commit log message taken by
+# applypatch from an e-mail message.
+#
+# The hook should exit with non-zero status after issuing an
+# appropriate message if it wants to stop the commit.  The hook is
+# allowed to edit the commit message file.
+#
+# To enable this hook, rename this file to "applypatch-msg".
+
+. git-sh-setup
+commitmsg="$(git rev-parse --git-path hooks/commit-msg)"
+test -x "$commitmsg" && exec "$commitmsg" ${1+"$@"}
+:

hooks/commit-msg.sample

@@ -0,0 +1,24 @@
+#!/bin/sh
+#
+# An example hook script to check the commit log message.
+# Called by "git commit" with one argument, the name of the file
+# that has the commit message.  The hook should exit with non-zero
+# status after issuing an appropriate message if it wants to stop the
+# commit.  The hook is allowed to edit the commit message file.
+#
+# To enable this hook, rename this file to "commit-msg".
+
+# Uncomment the below to add a Signed-off-by line to the message.
+# Doing this in a hook is a bad idea in general, but the prepare-commit-msg
+# hook is more suited to it.
+#
+# SOB=$(git var GIT_AUTHOR_IDENT | sed -n 's/^\(.*>\).*$/Signed-off-by: \1/p')
+# grep -qs "^$SOB" "$1" || echo "$SOB" >> "$1"
+
+# This example catches duplicate Signed-off-by lines.
+
+test "" = "$(grep '^Signed-off-by: ' "$1" |
+	 sort | uniq -c | sed -e '/^[ 	]*1[ 	]/d')" || {
+	echo >&2 Duplicate Signed-off-by lines.
+	exit 1
+}

hooks/fsmonitor-watchman.sample

@@ -0,0 +1,173 @@
+#!/usr/bin/perl
+
+use strict;
+use warnings;
+use IPC::Open2;
+
+# An example hook script to integrate Watchman
+# (https://facebook.github.io/watchman/) with git to speed up detecting
+# new and modified files.
+#
+# The hook is passed a version (currently 2) and last update token
+# formatted as a string and outputs to stdout a new update token and
+# all files that have been modified since the update token. Paths must
+# be relative to the root of the working tree and separated by a single NUL.
+#
+# To enable this hook, rename this file to "query-watchman" and set
+# 'git config core.fsmonitor .git/hooks/query-watchman'
+#
+my ($version, $last_update_token) = @ARGV;
+
+# Uncomment for debugging
+# print STDERR "$0 $version $last_update_token\n";
+
+# Check the hook interface version
+if ($version ne 2) {
+	die "Unsupported query-fsmonitor hook version '$version'.\n" .
+	    "Falling back to scanning...\n";
+}
+
+my $git_work_tree = get_working_dir();
+
+my $retry = 1;
+
+my $json_pkg;
+eval {
+	require JSON::XS;
+	$json_pkg = "JSON::XS";
+	1;
+} or do {
+	require JSON::PP;
+	$json_pkg = "JSON::PP";
+};
+
+launch_watchman();
+
+sub launch_watchman {
+	my $o = watchman_query();
+	if (is_work_tree_watched($o)) {
+		output_result($o->{clock}, @{$o->{files}});
+	}
+}
+
+sub output_result {
+	my ($clockid, @files) = @_;
+
+	# Uncomment for debugging watchman output
+	# open (my $fh, ">", ".git/watchman-output.out");
+	# binmode $fh, ":utf8";
+	# print $fh "$clockid\n@files\n";
+	# close $fh;
+
+	binmode STDOUT, ":utf8";
+	print $clockid;
+	print "\0";
+	local $, = "\0";
+	print @files;
+}
+
+sub watchman_clock {
+	my $response = qx/watchman clock "$git_work_tree"/;
+	die "Failed to get clock id on '$git_work_tree'.\n" .
+		"Falling back to scanning...\n" if $? != 0;
+
+	return $json_pkg->new->utf8->decode($response);
+}
+
+sub watchman_query {
+	my $pid = open2(\*CHLD_OUT, \*CHLD_IN, 'watchman -j --no-pretty')
+	or die "open2() failed: $!\n" .
+	"Falling back to scanning...\n";
+
+	# In the query expression below we're asking for names of files that
+	# changed since $last_update_token but not from the .git folder.
+	#
+	# To accomplish this, we're using the "since" generator to use the
+	# recency index to select candidate nodes and "fields" to limit the
+	# output to file names only. Then we're using the "expression" term to
+	# further constrain the results.
+	if (substr($last_update_token, 0, 1) eq "c") {
+		$last_update_token = "\"$last_update_token\"";
+	}
+	my $query = <<"	END";
+		["query", "$git_work_tree", {
+			"since": $last_update_token,
+			"fields": ["name"],
+			"expression": ["not", ["dirname", ".git"]]
+		}]
+	END
+
+	# Uncomment for debugging the watchman query
+	# open (my $fh, ">", ".git/watchman-query.json");
+	# print $fh $query;
+	# close $fh;
+
+	print CHLD_IN $query;
+	close CHLD_IN;
+	my $response = do {local $/; <CHLD_OUT>};
+
+	# Uncomment for debugging the watch response
+	# open ($fh, ">", ".git/watchman-response.json");
+	# print $fh $response;
+	# close $fh;
+
+	die "Watchman: command returned no output.\n" .
+	"Falling back to scanning...\n" if $response eq "";
+	die "Watchman: command returned invalid output: $response\n" .
+	"Falling back to scanning...\n" unless $response =~ /^\{/;
+
+	return $json_pkg->new->utf8->decode($response);
+}
+
+sub is_work_tree_watched {
+	my ($output) = @_;
+	my $error = $output->{error};
+	if ($retry > 0 and $error and $error =~ m/unable to resolve root .* directory (.*) is not watched/) {
+		$retry--;
+		my $response = qx/watchman watch "$git_work_tree"/;
+		die "Failed to make watchman watch '$git_work_tree'.\n" .
+		    "Falling back to scanning...\n" if $? != 0;
+		$output = $json_pkg->new->utf8->decode($response);
+		$error = $output->{error};
+		die "Watchman: $error.\n" .
+		"Falling back to scanning...\n" if $error;
+
+		# Uncomment for debugging watchman output
+		# open (my $fh, ">", ".git/watchman-output.out");
+		# close $fh;
+
+		# Watchman will always return all files on the first query so
+		# return the fast "everything is dirty" flag to git and do the
+		# Watchman query just to get it over with now so we won't pay
+		# the cost in git to look up each individual file.
+		my $o = watchman_clock();
+		$error = $output->{error};
+
+		die "Watchman: $error.\n" .
+		"Falling back to scanning...\n" if $error;
+
+		output_result($o->{clock}, ("/"));
+		$last_update_token = $o->{clock};
+
+		eval { launch_watchman() };
+		return 0;
+	}
+
+	die "Watchman: $error.\n" .
+	"Falling back to scanning...\n" if $error;
+
+	return 1;
+}
+
+sub get_working_dir {
+	my $working_dir;
+	if ($^O =~ 'msys' || $^O =~ 'cygwin') {
+		$working_dir = Win32::GetCwd();
+		$working_dir =~ tr/\\/\//;
+	} else {
+		require Cwd;
+		$working_dir = Cwd::cwd();
+	}
+
+	return $working_dir;
+}

hooks/post-update.sample

@@ -0,0 +1,8 @@
+#!/bin/sh
+#
+# An example hook script to prepare a packed repository for use over
+# dumb transports.
+#
+# To enable this hook, rename this file to "post-update".
+
+exec git update-server-info

hooks/pre-applypatch.sample

@@ -0,0 +1,14 @@
+#!/bin/sh
+#
+# An example hook script to verify what is about to be committed
+# by applypatch from an e-mail message.
+#
+# The hook should exit with non-zero status after issuing an
+# appropriate message if it wants to stop the commit.
+#
+# To enable this hook, rename this file to "pre-applypatch".
+
+. git-sh-setup
+precommit="$(git rev-parse --git-path hooks/pre-commit)"
+test -x "$precommit" && exec "$precommit" ${1+"$@"}
+:

hooks/pre-commit.sample

@@ -0,0 +1,49 @@
+#!/bin/sh
+#
+# An example hook script to verify what is about to be committed.
+# Called by "git commit" with no arguments.  The hook should
+# exit with non-zero status after issuing an appropriate message if
+# it wants to stop the commit.
+#
+# To enable this hook, rename this file to "pre-commit".
+
+if git rev-parse --verify HEAD >/dev/null 2>&1
+then
+	against=HEAD
+else
+	# Initial commit: diff against an empty tree object
+	against=$(git hash-object -t tree /dev/null)
+fi
+
+# If you want to allow non-ASCII filenames set this variable to true.
+allownonascii=$(git config --type=bool hooks.allownonascii)
+
+# Redirect output to stderr.
+exec 1>&2
+
+# Cross platform projects tend to avoid non-ASCII filenames; prevent
+# them from being added to the repository. We exploit the fact that the
+# printable range starts at the space character and ends with tilde.
+if [ "$allownonascii" != "true" ] &&
+	# Note that the use of brackets around a tr range is ok here, (it's
+	# even required, for portability to Solaris 10's /usr/bin/tr), since
+	# the square bracket bytes happen to fall in the designated range.
+	test $(git diff --cached --name-only --diff-filter=A -z $against |
+	  LC_ALL=C tr -d '[ -~]\0' | wc -c) != 0
+then
+	cat <<\EOF
+Error: Attempt to add a non-ASCII file name.
+
+This can cause problems if you want to work with people on other platforms.
+
+To be portable it is advisable to rename the file.
+
+If you know what you are doing you can disable this check using:
+
+  git config hooks.allownonascii true
+EOF
+	exit 1
+fi
+
+# If there are whitespace errors, print the offending file names and fail.
+exec git diff-index --check --cached $against --

hooks/pre-merge-commit.sample

@@ -0,0 +1,13 @@
+#!/bin/sh
+#
+# An example hook script to verify what is about to be committed.
+# Called by "git merge" with no arguments.  The hook should
+# exit with non-zero status after issuing an appropriate message to
+# stderr if it wants to stop the merge commit.
+#
+# To enable this hook, rename this file to "pre-merge-commit".
+
+. git-sh-setup
+test -x "$GIT_DIR/hooks/pre-commit" &&
+        exec "$GIT_DIR/hooks/pre-commit"
+:

hooks/pre-push.sample

@@ -0,0 +1,53 @@
+#!/bin/sh
+
+# An example hook script to verify what is about to be pushed.  Called by "git
+# push" after it has checked the remote status, but before anything has been
+# pushed.  If this script exits with a non-zero status nothing will be pushed.
+#
+# This hook is called with the following parameters:
+#
+# $1 -- Name of the remote to which the push is being done
+# $2 -- URL to which the push is being done
+#
+# If pushing without using a named remote those arguments will be equal.
+#
+# Information about the commits which are being pushed is supplied as lines to
+# the standard input in the form:
+#
+#   <local ref> <local oid> <remote ref> <remote oid>
+#
+# This sample shows how to prevent push of commits where the log message starts
+# with "WIP" (work in progress).
+
+remote="$1"
+url="$2"
+
+zero=$(git hash-object --stdin </dev/null | tr '[0-9a-f]' '0')
+
+while read local_ref local_oid remote_ref remote_oid
+do
+	if test "$local_oid" = "$zero"
+	then
+		# Handle delete
+		:
+	else
+		if test "$remote_oid" = "$zero"
+		then
+			# New branch, examine all commits
+			range="$local_oid"
+		else
+			# Update to existing branch, examine new commits
+			range="$remote_oid..$local_oid"
+		fi
+
+		# Check for WIP commit
+		commit=$(git rev-list -n 1 --grep '^WIP' "$range")
+		if test -n "$commit"
+		then
+			echo >&2 "Found WIP commit in $local_ref, not pushing"
+			exit 1
+		fi
+	fi
+done
+
+exit 0

hooks/pre-rebase.sample

@@ -0,0 +1,169 @@
+#!/bin/sh
+#
+# Copyright (c) 2006, 2008 Junio C Hamano
+#
+# The "pre-rebase" hook is run just before "git rebase" starts doing
+# its job, and can prevent the command from running by exiting with
+# non-zero status.
+#
+# The hook is called with the following parameters:
+#
+# $1 -- the upstream the series was forked from.
+# $2 -- the branch being rebased (or empty when rebasing the current branch).
+#
+# This sample shows how to prevent topic branches that are already
+# merged to 'next' branch from getting rebased, because allowing it
+# would result in rebasing already published history.
+
+publish=next
+basebranch="$1"
+if test "$#" = 2
+then
+	topic="refs/heads/$2"
+else
+	topic=`git symbolic-ref HEAD` ||
+	exit 0 ;# we do not interrupt rebasing detached HEAD
+fi
+
+case "$topic" in
+refs/heads/??/*)
+	;;
+*)
+	exit 0 ;# we do not interrupt others.
+	;;
+esac
+
+# Now we are dealing with a topic branch being rebased
+# on top of master.  Is it OK to rebase it?
+
+# Does the topic really exist?
+git show-ref -q "$topic" || {
+	echo >&2 "No such branch $topic"
+	exit 1
+}
+
+# Is topic fully merged to master?
+not_in_master=`git rev-list --pretty=oneline ^master "$topic"`
+if test -z "$not_in_master"
+then
+	echo >&2 "$topic is fully merged to master; better remove it."
+	exit 1 ;# we could allow it, but there is no point.
+fi
+
+# Is topic ever merged to next?  If so you should not be rebasing it.
+only_next_1=`git rev-list ^master "^$topic" ${publish} | sort`
+only_next_2=`git rev-list ^master           ${publish} | sort`
+if test "$only_next_1" = "$only_next_2"
+then
+	not_in_topic=`git rev-list "^$topic" master`
+	if test -z "$not_in_topic"
+	then
+		echo >&2 "$topic is already up to date with master"
+		exit 1 ;# we could allow it, but there is no point.
+	else
+		exit 0
+	fi
+else
+	not_in_next=`git rev-list --pretty=oneline ^${publish} "$topic"`
+	/usr/bin/perl -e '
+		my $topic = $ARGV[0];
+		my $msg = "* $topic has commits already merged to public branch:\n";
+		my (%not_in_next) = map {
+			/^([0-9a-f]+) /;
+			($1 => 1);
+		} split(/\n/, $ARGV[1]);
+		for my $elem (map {
+				/^([0-9a-f]+) (.*)$/;
+				[$1 => $2];
+			} split(/\n/, $ARGV[2])) {
+			if (!exists $not_in_next{$elem->[0]}) {
+				if ($msg) {
+					print STDERR $msg;
+					undef $msg;
+				}
+				print STDERR " $elem->[1]\n";
+			}
+		}
+	' "$topic" "$not_in_next" "$not_in_master"
+	exit 1
+fi
+
+<<\DOC_END
+
+This sample hook safeguards topic branches that have been
+published from being rewound.
+
+The workflow assumed here is:
+
+ * Once a topic branch forks from "master", "master" is never
+   merged into it again (either directly or indirectly).
+
+ * Once a topic branch is fully cooked and merged into "master",
+   it is deleted.  If you need to build on top of it to correct
+   earlier mistakes, a new topic branch is created by forking at
+   the tip of the "master".  This is not strictly necessary, but
+   it makes it easier to keep your history simple.
+
+ * Whenever you need to test or publish your changes to topic
+   branches, merge them into "next" branch.
+
+The script, being an example, hardcodes the publish branch name
+to be "next", but it is trivial to make it configurable via
+$GIT_DIR/config mechanism.
+
+With this workflow, you would want to know:
+
+(1) ... if a topic branch has ever been merged to "next".  Young
+    topic branches can have stupid mistakes you would rather
+    clean up before publishing, and things that have not been
+    merged into other branches can be easily rebased without
+    affecting other people.  But once it is published, you would
+    not want to rewind it.
+
+(2) ... if a topic branch has been fully merged to "master".
+    Then you can delete it.  More importantly, you should not
+    build on top of it -- other people may already want to
+    change things related to the topic as patches against your
+    "master", so if you need further changes, it is better to
+    fork the topic (perhaps with the same name) afresh from the
+    tip of "master".
+
+Let's look at this example:
+
+		   o---o---o---o---o---o---o---o---o---o "next"
+		  /       /           /           /
+		 /   a---a---b A     /           /
+		/   /               /           /
+	       /   /   c---c---c---c B         /
+	      /   /   /             \         /
+	     /   /   /   b---b C     \       /
+	    /   /   /   /             \     /
+    ---o---o---o---o---o---o---o---o---o---o---o "master"
+
+
+A, B and C are topic branches.
+
+ * A has one fix since it was merged up to "next".
+
+ * B has finished.  It has been fully merged up to "master" and "next",
+   and is ready to be deleted.
+
+ * C has not merged to "next" at all.
+
+We would want to allow C to be rebased, refuse A, and encourage
+B to be deleted.
+
+To compute (1):
+
+	git rev-list ^master ^topic next
+	git rev-list ^master        next
+
+	if these match, topic has not merged in next at all.
+
+To compute (2):
+
+	git rev-list master..topic
+
+	if this is empty, it is fully merged to "master".
+
+DOC_END

hooks/pre-receive.sample

@@ -0,0 +1,24 @@
+#!/bin/sh
+#
+# An example hook script to make use of push options.
+# The example simply echoes all push options that start with 'echoback='
+# and rejects all pushes when the "reject" push option is used.
+#
+# To enable this hook, rename this file to "pre-receive".
+
+if test -n "$GIT_PUSH_OPTION_COUNT"
+then
+	i=0
+	while test "$i" -lt "$GIT_PUSH_OPTION_COUNT"
+	do
+		eval "value=\$GIT_PUSH_OPTION_$i"
+		case "$value" in
+		echoback=*)
+			echo "echo from the pre-receive-hook: ${value#*=}" >&2
+			;;
+		reject)
+			exit 1
+		esac
+		i=$((i + 1))
+	done
+fi

hooks/prepare-commit-msg.sample

@@ -0,0 +1,42 @@
+#!/bin/sh
+#
+# An example hook script to prepare the commit log message.
+# Called by "git commit" with the name of the file that has the
+# commit message, followed by the description of the commit
+# message's source.  The hook's purpose is to edit the commit
+# message file.  If the hook fails with a non-zero status,
+# the commit is aborted.
+#
+# To enable this hook, rename this file to "prepare-commit-msg".
+
+# This hook includes three examples. The first one removes the
+# "# Please enter the commit message..." help message.
+#
+# The second includes the output of "git diff --name-status -r"
+# into the message, just before the "git status" output.  It is
+# commented because it doesn't cope with --amend or with squashed
+# commits.
+#
+# The third example adds a Signed-off-by line to the message, that can
+# still be edited.  This is rarely a good idea.
+
+COMMIT_MSG_FILE=$1
+COMMIT_SOURCE=$2
+SHA1=$3
+
+/usr/bin/perl -i.bak -ne 'print unless(m/^. Please enter the commit message/..m/^#$/)' "$COMMIT_MSG_FILE"
+
+# case "$COMMIT_SOURCE,$SHA1" in
+#  ,|template,)
+#    /usr/bin/perl -i.bak -pe '
+#       print "\n" . `git diff --cached --name-status -r`
+# 	 if /^#/ && $first++ == 0' "$COMMIT_MSG_FILE" ;;
+#  *) ;;
+# esac
+
+# SOB=$(git var GIT_COMMITTER_IDENT | sed -n 's/^\(.*>\).*$/Signed-off-by: \1/p')
+# git interpret-trailers --in-place --trailer "$SOB" "$COMMIT_MSG_FILE"
+# if test -z "$COMMIT_SOURCE"
+# then
+#   /usr/bin/perl -i.bak -pe 'print "\n" if !$first_line++' "$COMMIT_MSG_FILE"
+# fi

hooks/push-to-checkout.sample

@@ -0,0 +1,78 @@
+#!/bin/sh
+
+# An example hook script to update a checked-out tree on a git push.
+#
+# This hook is invoked by git-receive-pack(1) when it reacts to git
+# push and updates reference(s) in its repository, and when the push
+# tries to update the branch that is currently checked out and the
+# receive.denyCurrentBranch configuration variable is set to
+# updateInstead.
+#
+# By default, such a push is refused if the working tree and the index
+# of the remote repository has any difference from the currently
+# checked out commit; when both the working tree and the index match
+# the current commit, they are updated to match the newly pushed tip
+# of the branch. This hook is to be used to override the default
+# behaviour; however the code below reimplements the default behaviour
+# as a starting point for convenient modification.
+#
+# The hook receives the commit with which the tip of the current
+# branch is going to be updated:
+commit=$1
+
+# It can exit with a non-zero status to refuse the push (when it does
+# so, it must not modify the index or the working tree).
+die () {
+	echo >&2 "$*"
+	exit 1
+}
+
+# Or it can make any necessary changes to the working tree and to the
+# index to bring them to the desired state when the tip of the current
+# branch is updated to the new commit, and exit with a zero status.
+#
+# For example, the hook can simply run git read-tree -u -m HEAD "$1"
+# in order to emulate git fetch that is run in the reverse direction
+# with git push, as the two-tree form of git read-tree -u -m is
+# essentially the same as git switch or git checkout that switches
+# branches while keeping the local changes in the working tree that do
+# not interfere with the difference between the branches.
+
+# The below is a more-or-less exact translation to shell of the C code
+# for the default behaviour for git's push-to-checkout hook defined in
+# the push_to_deploy() function in builtin/receive-pack.c.
+#
+# Note that the hook will be executed from the repository directory,
+# not from the working tree, so if you want to perform operations on
+# the working tree, you will have to adapt your code accordingly, e.g.
+# by adding "cd .." or using relative paths.
+
+if ! git update-index -q --ignore-submodules --refresh
+then
+	die "Up-to-date check failed"
+fi
+
+if ! git diff-files --quiet --ignore-submodules --
+then
+	die "Working directory has unstaged changes"
+fi
+
+# This is a rough translation of:
+#
+#   head_has_history() ? "HEAD" : EMPTY_TREE_SHA1_HEX
+if git cat-file -e HEAD 2>/dev/null
+then
+	head=HEAD
+else
+	head=$(git hash-object -t tree --stdin </dev/null)
+fi
+
+if ! git diff-index --quiet --cached --ignore-submodules $head --
+then
+	die "Working directory has staged changes"
+fi
+
+if ! git read-tree -u -m "$commit"
+then
+	die "Could not update working tree to new HEAD"
+fi

hooks/update.sample

@@ -0,0 +1,128 @@
+#!/bin/sh
+#
+# An example hook script to block unannotated tags from entering.
+# Called by "git receive-pack" with arguments: refname sha1-old sha1-new
+#
+# To enable this hook, rename this file to "update".
+#
+# Config
+# ------
+# hooks.allowunannotated
+#   This boolean sets whether unannotated tags will be allowed into the
+#   repository.  By default they won't be.
+# hooks.allowdeletetag
+#   This boolean sets whether deleting tags will be allowed in the
+#   repository.  By default they won't be.
+# hooks.allowmodifytag
+#   This boolean sets whether a tag may be modified after creation. By default
+#   it won't be.
+# hooks.allowdeletebranch
+#   This boolean sets whether deleting branches will be allowed in the
+#   repository.  By default they won't be.
+# hooks.denycreatebranch
+#   This boolean sets whether remotely creating branches will be denied
+#   in the repository.  By default this is allowed.
+#
+
+# --- Command line
+refname="$1"
+oldrev="$2"
+newrev="$3"
+
+# --- Safety check
+if [ -z "$GIT_DIR" ]; then
+	echo "Don't run this script from the command line." >&2
+	echo " (if you want, you could supply GIT_DIR then run" >&2
+	echo "  $0 <ref> <oldrev> <newrev>)" >&2
+	exit 1
+fi
+
+if [ -z "$refname" -o -z "$oldrev" -o -z "$newrev" ]; then
+	echo "usage: $0 <ref> <oldrev> <newrev>" >&2
+	exit 1
+fi
+
+# --- Config
+allowunannotated=$(git config --type=bool hooks.allowunannotated)
+allowdeletebranch=$(git config --type=bool hooks.allowdeletebranch)
+denycreatebranch=$(git config --type=bool hooks.denycreatebranch)
+allowdeletetag=$(git config --type=bool hooks.allowdeletetag)
+allowmodifytag=$(git config --type=bool hooks.allowmodifytag)
+
+# check for no description
+projectdesc=$(sed -e '1q' "$GIT_DIR/description")
+case "$projectdesc" in
+"Unnamed repository"* | "")
+	echo "*** Project description file hasn't been set" >&2
+	exit 1
+	;;
+esac
+
+# --- Check types
+# if $newrev is 0000...0000, it's a commit to delete a ref.
+zero=$(git hash-object --stdin </dev/null | tr '[0-9a-f]' '0')
+if [ "$newrev" = "$zero" ]; then
+	newrev_type=delete
+else
+	newrev_type=$(git cat-file -t $newrev)
+fi
+
+case "$refname","$newrev_type" in
+	refs/tags/*,commit)
+		# un-annotated tag
+		short_refname=${refname##refs/tags/}
+		if [ "$allowunannotated" != "true" ]; then
+			echo "*** The un-annotated tag, $short_refname, is not allowed in this repository" >&2
+			echo "*** Use 'git tag [ -a | -s ]' for tags you want to propagate." >&2
+			exit 1
+		fi
+		;;
+	refs/tags/*,delete)
+		# delete tag
+		if [ "$allowdeletetag" != "true" ]; then
+			echo "*** Deleting a tag is not allowed in this repository" >&2
+			exit 1
+		fi
+		;;
+	refs/tags/*,tag)
+		# annotated tag
+		if [ "$allowmodifytag" != "true" ] && git rev-parse $refname > /dev/null 2>&1
+		then
+			echo "*** Tag '$refname' already exists." >&2
+			echo "*** Modifying a tag is not allowed in this repository." >&2
+			exit 1
+		fi
+		;;
+	refs/heads/*,commit)
+		# branch
+		if [ "$oldrev" = "$zero" -a "$denycreatebranch" = "true" ]; then
+			echo "*** Creating a branch is not allowed in this repository" >&2
+			exit 1
+		fi
+		;;
+	refs/heads/*,delete)
+		# delete branch
+		if [ "$allowdeletebranch" != "true" ]; then
+			echo "*** Deleting a branch is not allowed in this repository" >&2
+			exit 1
+		fi
+		;;
+	refs/remotes/*,commit)
+		# tracking branch
+		;;
+	refs/remotes/*,delete)
+		# delete tracking branch
+		if [ "$allowdeletebranch" != "true" ]; then
+			echo "*** Deleting a tracking branch is not allowed in this repository" >&2
+			exit 1
+		fi
+		;;
+	*)
+		# Anything else (is there anything else?)
+		echo "*** Update hook: unknown type of update to ref $refname of type $newrev_type" >&2
+		exit 1
+		;;
+esac
+
+# --- Finished
+exit 0

info/exclude

@@ -0,0 +1,6 @@
+# git ls-files --others --exclude-from=.git/info/exclude
+# Lines that start with '#' are comments.
+# For a project mostly in C, the following would be a good set of
+# exclude patterns (uncomment them if you want to use them):
+# *.[oa]
+# *~

jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "include": ["src"]
+}

migration.md

@@ -0,0 +1,34 @@
+# Migration from version 2
+
+Migration from version 2 must be performed manually because the components library `@coreui/coreui-react` has been completely rewritten.
+
+The docs of the new components are available [here](https://coreui.io/react/docs/)
+
+The good news is that most probably it will be sufficient to migrate layout components (Sidebar, Header, Footer, Aside) and `Switch` component
+
+The best way to do a migration is:
+1. Install `@coreui/coreui-react` v3
+2. Make a copy of the current `containers` folder
+2. Paste [containers](https://github.com/coreui/coreui-free-react-admin-template/tree/master/src/containers) folder from v3 template to project
+3. Correct routing paths
+4. Add previous content to new template layout components
+5. Replace `Switch` components with `CSwitch`
+
+Layout components/ corresponding components in version 3
+- Aside -> CSidebar (with prop aside={true})
+- AsideToggler -> CToggler
+- Breadcrumb -> CBreadcrumbRouter
+- Footer -> CFooter
+- Header -> CHeader
+- HeaderDropdown -> CDropdown
+- NavbarBrand -> CSidebarBrand
+- Sidebar -> CSidebar
+- SidebarFooter -> CSidebarFooter
+- SidebarForm -> CSidebarForm
+- SidebarHeader -> CSidebarHeader
+- SidebarMinimizer -> CSidebarMinimizer
+- SidebarNav -> CSidebarNav + CSidebarNavDropdown + CSidebarNavItem
+- SidebarToggler -> CSidebarToggler
+- Switch -> CSwitch
+
+After the migration is done, you can start using new components of `@coreui/coreui-react` v3 library.

objects/8b/608318f20c04a4b4c6d8e3c6097cd747196a1f

@@ -0,0 +1,2 @@
+x
m�Ë
+à E»ö+f_5%»ÒÏÐq’JL,vÒïïkUèêpçÌëT'\ˆ@¶ÒMØ5Êú`�¬e‹Ú�¨0ôÖò�–Âí|Íîn"®n{Yò#"¿{1ŹڈO m•mumàø:•?i¦çÈä`˜ß'·P•2ºôÇ—-rt	¾²xLˆ;

package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@coreui/coreui-free-react-admin-template",
+  "version": "3.2.1",
+  "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
+  "author": {
+    "name": "CoreUI",
+    "url": "https://coreui.io",
+    "github": "https://github.com/coreui",
+    "twitter": "https://twitter.com/core_ui"
+  },
+  "contributors": [
+    {
+      "name": "CoreUI Team",
+      "url": "https://github.com/orgs/coreui/people"
+    }
+  ],
+  "homepage": ".",
+  "copyright": "Copyright 2017-2020 creativeLabs Łukasz Holeczek",
+  "license": "MIT",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
+  },
+  "dependencies": {
+    "@coreui/chartjs": "^2.0.0",
+    "@coreui/coreui": "^3.4.0",
+    "@coreui/icons": "^2.0.0",
+    "@coreui/icons-react": "^1.1.0",
+    "@coreui/react": "^3.4.6",
+    "@coreui/react-chartjs": "^1.1.0",
+    "@coreui/utils": "^1.3.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
+    "classnames": "^2.2.6",
+    "core-js": "^3.9.1",
+    "enzyme": "^3.11.0",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-app-polyfill": "^2.0.0",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.3",
+    "react-router-dom": "^5.2.0",
+    "redux": "^4.0.5",
+    "sass": "^1.32.8"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.14",
+    "auto-changelog": "~2.2.1",
+    "react-scripts": "^4.0.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "test:cov": "npm test -- --coverage --watchAll=false",
+    "test:debug": "react-scripts --inspect-brk test --runInBand",
+    "eject": "react-scripts eject",
+    "changelog": "auto-changelog --starting-version 3.0.0 --commit-limit false --hide-credit"
+  },
+  "bugs": {
+    "url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 10",
+    "not op_mini all"
+  ],
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!**/*index.js",
+      "!src/serviceWorker.js",
+      "!src/polyfill.js"
+    ]
+  },
+  "engines": {
+    "node": ">=10",
+    "npm": ">=6"
+  }
+}

packed-refs

@@ -0,0 +1,2 @@
+# pack-refs with: peeled fully-peeled sorted 
+8b608318f20c04a4b4c6d8e3c6097cd747196a1f refs/heads/master

public/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+* CoreUI Free - React.js Admin Template
+* @version v3.2.0
+* @link https://coreui.io/pro/react/
+* Copyright (c) 2020 creativeLabs Łukasz Holeczek
+* License MIT
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="CoreUI for React - Open Source Bootstrap Admin Template">
+    <meta name="author" content="Łukasz Holeczek">
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React">
+    <title>CoreUI Free React.js Admin Template</title>
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

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"
+}

src/App.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { HashRouter, Route, Switch } from 'react-router-dom';
+import './scss/style.scss';
+
+const loading = (
+  <div className="pt-3 text-center">
+    <div className="sk-spinner sk-spinner-pulse"></div>
+  </div>
+)
+
+// Containers
+const TheLayout = React.lazy(() => import('./containers/TheLayout'));
+
+// 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'));
+
+class App extends Component {
+
+  render() {
+    return (
+      <HashRouter>
+          <React.Suspense fallback={loading}>
+            <Switch>
+              <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
+              <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
+              <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
+              <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
+              <Route path="/" name="Home" render={props => <TheLayout {...props}/>} />
+            </Switch>
+          </React.Suspense>
+      </HashRouter>
+    );
+  }
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { shallow } from 'enzyme/build'
+import App from './App'
+import ChartLineSimple from './views/charts/ChartLineSimple'
+import Dashboard from './views/dashboard/Dashboard.js'
+
+
+it('mounts App without crashing', () => {
+  const wrapper = shallow(<App/>)
+  wrapper.unmount()
+})
+
+it('mounts Dashboard without crashing', () => {
+  const wrapper = shallow(<Dashboard/>)
+  wrapper.unmount()
+})
+
+it('mounts Charts without crashing', () => {
+  const wrapper = shallow(<ChartLineSimple/> )
+  wrapper.unmount()
+})

src/assets/icons/index.js

@@ -0,0 +1,261 @@
+import { sygnet } from './sygnet'
+import { logo } from './logo'
+import { logoNegative } from './logo-negative'
+
+import {
+  cibSkype,
+  cibFacebook,
+  cibTwitter,
+  cibLinkedin,
+  cibFlickr,
+  cibTumblr,
+  cibXing,
+  cibGithub,
+  cibStackoverflow,
+  cibYoutube,
+  cibDribbble,
+  cibInstagram,
+  cibPinterest,
+  cibVk,
+  cibYahoo,
+  cibBehance,
+  cibReddit,
+  cibVimeo,
+  cibCcMastercard,
+  cibCcVisa,
+  cibStripe,
+  cibPaypal,
+  cibGooglePay,
+  cibCcAmex
+} from '@coreui/icons'
+import {
+  cifUs,
+  cifBr,
+  cifIn,
+  cifFr,
+  cifEs,
+  cifPl
+} from '@coreui/icons'
+import {
+  cilAlignCenter,
+  cilAlignLeft,
+  cilAlignRight,
+  cilApplicationsSettings,
+  cilArrowRight,
+  cilArrowTop,
+  cilAsterisk,
+  cilBan,
+  cilBasket,
+  cilBell,
+  cilBold,
+  cilBookmark,
+  cilCalculator,
+  cilCalendar,
+  cilCloudDownload,
+  cilChartPie,
+  cilCheck,
+  cilChevronBottom,
+  cilChevronLeft,
+  cilChevronRight,
+  cilChevronTop,
+  cilCircle,
+  cilCheckCircle,
+  cilCode,
+  cilCommentSquare,
+  cilCreditCard,
+  cilCursor,
+  cilCursorMove,
+  cilDrop,
+  cilDollar,
+  cilEnvelopeClosed,
+  cilEnvelopeLetter,
+  cilEnvelopeOpen,
+  cilEuro,
+  cilGlobeAlt,
+  cilGrid,
+  cilFile,
+  cilFullscreen,
+  cilFullscreenExit,
+  cilGraph,
+  cilHome,
+  cilInbox,
+  cilIndentDecrease,
+  cilIndentIncrease,
+  cilInputPower,
+  cilItalic,
+  cilJustifyCenter,
+  cilJustifyLeft,
+  cilLaptop,
+  cilLayers,
+  cilLightbulb,
+  cilList,
+  cilListNumbered,
+  cilListRich,
+  cilLocationPin,
+  cilLockLocked,
+  cilMagnifyingGlass,
+  cilMap,
+  cilMoon,
+  cilNotes,
+  cilOptions,
+  cilPaperclip,
+  cilPaperPlane,
+  cilPencil,
+  cilPeople,
+  cilPhone,
+  cilPrint,
+  cilPuzzle,
+  cilSave,
+  cilScrubber,
+  cilSettings,
+  cilShare,
+  cilShareAll,
+  cilShareBoxed,
+  cilShieldAlt,
+  cilSpeech,
+  cilSpeedometer,
+  cilSpreadsheet,
+  cilStar,
+  cilSun,
+  cilTags,
+  cilTask,
+  cilTrash,
+  cilUnderline,
+  cilUser,
+  cilUserFemale,
+  cilUserFollow,
+  cilUserUnfollow,
+  cilX,
+  cilXCircle,
+  cilWarning
+} from '@coreui/icons'
+
+export const icons = Object.assign({}, {
+  sygnet,
+  logo,
+  logoNegative
+}, {
+  cilAlignCenter,
+  cilAlignLeft,
+  cilAlignRight,
+  cilApplicationsSettings,
+  cilArrowRight,
+  cilArrowTop,
+  cilAsterisk,
+  cilBan,
+  cilBasket,
+  cilBell,
+  cilBold,
+  cilBookmark,
+  cilCalculator,
+  cilCalendar,
+  cilCloudDownload,
+  cilChartPie,
+  cilCheck,
+  cilChevronBottom,
+  cilChevronLeft,
+  cilChevronRight,
+  cilChevronTop,
+  cilCircle,
+  cilCheckCircle,
+  cilCode,
+  cilCommentSquare,
+  cilCreditCard,
+  cilCursor,
+  cilCursorMove,
+  cilDrop,
+  cilDollar,
+  cilEnvelopeClosed,
+  cilEnvelopeLetter,
+  cilEnvelopeOpen,
+  cilEuro,
+  cilGlobeAlt,
+  cilGrid,
+  cilFile,
+  cilFullscreen,
+  cilFullscreenExit,
+  cilGraph,
+  cilHome,
+  cilInbox,
+  cilIndentDecrease,
+  cilIndentIncrease,
+  cilInputPower,
+  cilItalic,
+  cilJustifyCenter,
+  cilJustifyLeft,
+  cilLaptop,
+  cilLayers,
+  cilLightbulb,
+  cilList,
+  cilListNumbered,
+  cilListRich,
+  cilLocationPin,
+  cilLockLocked,
+  cilMagnifyingGlass,
+  cilMap,
+  cilMoon,
+  cilNotes,
+  cilOptions,
+  cilPaperclip,
+  cilPaperPlane,
+  cilPencil,
+  cilPeople,
+  cilPhone,
+  cilPrint,
+  cilPuzzle,
+  cilSave,
+  cilScrubber,
+  cilSettings,
+  cilShare,
+  cilShareAll,
+  cilShareBoxed,
+  cilShieldAlt,
+  cilSpeech,
+  cilSpeedometer,
+  cilSpreadsheet,
+  cilStar,
+  cilSun,
+  cilTags,
+  cilTask,
+  cilTrash,
+  cilUnderline,
+  cilUser,
+  cilUserFemale,
+  cilUserFollow,
+  cilUserUnfollow,
+  cilX,
+  cilXCircle,
+  cilWarning
+}, {
+  cifUs,
+  cifBr,
+  cifIn,
+  cifFr,
+  cifEs,
+  cifPl
+}, {
+  cibSkype,
+  cibFacebook,
+  cibTwitter,
+  cibLinkedin,
+  cibFlickr,
+  cibTumblr,
+  cibXing,
+  cibGithub,
+  cibStackoverflow,
+  cibYoutube,
+  cibDribbble,
+  cibInstagram,
+  cibPinterest,
+  cibVk,
+  cibYahoo,
+  cibBehance,
+  cibReddit,
+  cibVimeo,
+  cibCcMastercard,
+  cibCcVisa,
+  cibStripe,
+  cibPaypal,
+  cibGooglePay,
+  cibCcAmex
+})

src/assets/icons/logo-negative.js

@@ -0,0 +1,30 @@
+export const logoNegative = ['608 134', `
+  <title>coreui react pro logo</title>
+  <g>
+    <g style="fill:#80d0ff;">
+      <path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
+      <path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
+      <path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
+      <path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
+      <path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
+      <path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
+      <path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
+      <path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
+    </g>
+
+    <g style="fill:#fff;">
+      <g>
+        <path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
+        <path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
+      </g>
+      <g>
+        <path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
+        <path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
+        <path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
+        <path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
+        <path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
+        <rect x="307.835" y="46" width="8" height="38" rx="1"/>
+      </g>
+    </g>
+  </g>
+`]

src/assets/icons/logo.js

@@ -0,0 +1,29 @@
+export const logo = ['608 134', `
+  <title>coreui react pro</title>
+  <g>
+    <g style="fill:#00a1ff">
+      <path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
+      <path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
+      <path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
+      <path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
+      <path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
+      <path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
+      <path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
+      <path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
+    </g>
+    <g style="fill:#3c4b64">
+      <g>
+        <path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
+        <path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
+      </g>
+      <g>
+        <path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
+        <path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
+        <path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
+        <path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
+        <path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
+        <rect x="307.835" y="46" width="8" height="38" rx="1"/>
+      </g>
+    </g>
+  </g>
+`]

src/assets/icons/sygnet.js

@@ -0,0 +1,9 @@
+export const sygnet = ['160 160', `
+  <title>coreui logo</title>
+  <g>
+    <g style="fill:#fff;">
+      <path d="M125,47.091,86,24.5743a12,12,0,0,0-12,0L35,47.091a12.0336,12.0336,0,0,0-6,10.3923v45.0334a12.0335,12.0335,0,0,0,6,10.3923l39,22.5166a11.9993,11.9993,0,0,0,12,0l39-22.5166a12.0335,12.0335,0,0,0,6-10.3923V57.4833A12.0336,12.0336,0,0,0,125,47.091Zm-2,55.4257a4,4,0,0,1-2,3.464L82,128.4974a4,4,0,0,1-4,0L39,105.9807a4,4,0,0,1-2-3.464V57.4833a4,4,0,0,1,2-3.4641L78,31.5025a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
+      <path d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>
+    </g>
+  </g>
+`]

src/containers/TheContent.js

@@ -0,0 +1,46 @@
+import React, { Suspense } from 'react'
+import {
+  Redirect,
+  Route,
+  Switch
+} from 'react-router-dom'
+import { CContainer, CFade } from '@coreui/react'
+
+// routes config
+import routes from '../routes'
+  
+const loading = (
+  <div className="pt-3 text-center">
+    <div className="sk-spinner sk-spinner-pulse"></div>
+  </div>
+)
+
+const TheContent = () => {
+  return (
+    <main className="c-main">
+      <CContainer fluid>
+        <Suspense fallback={loading}>
+          <Switch>
+            {routes.map((route, idx) => {
+              return route.component && (
+                <Route
+                  key={idx}
+                  path={route.path}
+                  exact={route.exact}
+                  name={route.name}
+                  render={props => (
+                    <CFade>
+                      <route.component {...props} />
+                    </CFade>
+                  )} />
+              )
+            })}
+            <Redirect from="/" to="/dashboard" />
+          </Switch>
+        </Suspense>
+      </CContainer>
+    </main>
+  )
+}
+
+export default React.memo(TheContent)

src/containers/TheFooter.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { CFooter } from '@coreui/react'
+
+const TheFooter = () => {
+  return (
+    <CFooter fixed={false}>
+      <div>
+        <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">CoreUI</a>
+        <span className="ml-1">&copy; 2020 creativeLabs.</span>
+      </div>
+      <div className="mfs-auto">
+        <span className="mr-1">Powered by</span>
+        <a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">CoreUI for React</a>
+      </div>
+    </CFooter>
+  )
+}
+
+export default React.memo(TheFooter)

src/containers/TheHeader.js

@@ -0,0 +1,100 @@
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+  CHeader,
+  CToggler,
+  CHeaderBrand,
+  CHeaderNav,
+  CHeaderNavItem,
+  CHeaderNavLink,
+  CSubheader,
+  CBreadcrumbRouter,
+  CLink
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+// routes config
+import routes from '../routes'
+
+import { 
+  TheHeaderDropdown,
+  TheHeaderDropdownMssg,
+  TheHeaderDropdownNotif,
+  TheHeaderDropdownTasks
+}  from './index'
+
+const TheHeader = () => {
+  const dispatch = useDispatch()
+  const sidebarShow = useSelector(state => state.sidebarShow)
+
+  const toggleSidebar = () => {
+    const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
+    dispatch({type: 'set', sidebarShow: val})
+  }
+
+  const toggleSidebarMobile = () => {
+    const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
+    dispatch({type: 'set', sidebarShow: val})
+  }
+
+  return (
+    <CHeader withSubheader>
+      <CToggler
+        inHeader
+        className="ml-md-3 d-lg-none"
+        onClick={toggleSidebarMobile}
+      />
+      <CToggler
+        inHeader
+        className="ml-3 d-md-down-none"
+        onClick={toggleSidebar}
+      />
+      <CHeaderBrand className="mx-auto d-lg-none" to="/">
+        <CIcon name="logo" height="48" alt="Logo"/>
+      </CHeaderBrand>
+
+      <CHeaderNav className="d-md-down-none mr-auto">
+        <CHeaderNavItem className="px-3" >
+          <CHeaderNavLink to="/dashboard">Dashboard</CHeaderNavLink>
+        </CHeaderNavItem>
+        <CHeaderNavItem  className="px-3">
+          <CHeaderNavLink to="/users">Users</CHeaderNavLink>
+        </CHeaderNavItem>
+        <CHeaderNavItem className="px-3">
+          <CHeaderNavLink>Settings</CHeaderNavLink>
+        </CHeaderNavItem>
+      </CHeaderNav>
+
+      <CHeaderNav className="px-3">
+        <TheHeaderDropdownNotif/>
+        <TheHeaderDropdownTasks/>
+        <TheHeaderDropdownMssg/>
+        <TheHeaderDropdown/>
+      </CHeaderNav>
+
+      <CSubheader className="px-3 justify-content-between">
+        <CBreadcrumbRouter 
+          className="border-0 c-subheader-nav m-0 px-0 px-md-3" 
+          routes={routes} 
+        />
+          <div className="d-md-down-none mfe-2 c-subheader-nav">
+            <CLink className="c-subheader-nav-link"href="#">
+              <CIcon name="cil-speech" alt="Settings" />
+            </CLink>
+            <CLink 
+              className="c-subheader-nav-link" 
+              aria-current="page" 
+              to="/dashboard"
+            >
+              <CIcon name="cil-graph" alt="Dashboard" />&nbsp;Dashboard
+            </CLink>
+            <CLink className="c-subheader-nav-link" href="#">
+              <CIcon name="cil-settings" alt="Settings" />&nbsp;Settings
+            </CLink>
+          </div>
+      </CSubheader>
+    </CHeader>
+  )
+}
+
+export default TheHeader

src/containers/TheHeaderDropdown.js

@@ -0,0 +1,92 @@
+import React from 'react'
+import {
+  CBadge,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CImg
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+const TheHeaderDropdown = () => {
+  return (
+    <CDropdown
+      inNav
+      className="c-header-nav-items mx-2"
+      direction="down"
+    >
+      <CDropdownToggle className="c-header-nav-link" caret={false}>
+        <div className="c-avatar">
+          <CImg
+            src={'avatars/6.jpg'}
+            className="c-avatar-img"
+            alt="admin@bootstrapmaster.com"
+          />
+        </div>
+      </CDropdownToggle>
+      <CDropdownMenu className="pt-0" placement="bottom-end">
+        <CDropdownItem
+          header
+          tag="div"
+          color="light"
+          className="text-center"
+        >
+          <strong>Account</strong>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-bell" className="mfe-2" />
+          Updates
+          <CBadge color="info" className="mfs-auto">42</CBadge>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-envelope-open" className="mfe-2" />
+          Messages
+          <CBadge color="success" className="mfs-auto">42</CBadge>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-task" className="mfe-2" />
+          Tasks
+          <CBadge color="danger" className="mfs-auto">42</CBadge>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-comment-square" className="mfe-2" />
+          Comments
+          <CBadge color="warning" className="mfs-auto">42</CBadge>
+        </CDropdownItem>
+        <CDropdownItem
+          header
+          tag="div"
+          color="light"
+          className="text-center"
+        >
+          <strong>Settings</strong>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-user" className="mfe-2" />Profile
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-settings" className="mfe-2" />
+          Settings
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-credit-card" className="mfe-2" />
+          Payments
+          <CBadge color="secondary" className="mfs-auto">42</CBadge>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-file" className="mfe-2" />
+          Projects
+          <CBadge color="primary" className="mfs-auto">42</CBadge>
+        </CDropdownItem>
+        <CDropdownItem divider />
+        <CDropdownItem>
+          <CIcon name="cil-lock-locked" className="mfe-2" />
+          Lock Account
+        </CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
+
+export default TheHeaderDropdown

src/containers/TheHeaderDropdownMssg.js

@@ -0,0 +1,127 @@
+import React from 'react'
+import {
+  CBadge,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CImg
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+const TheHeaderDropdownMssg = () => {
+  const itemsCount = 4
+  return (
+    <CDropdown
+      inNav
+      className="c-header-nav-item mx-2"
+      direction="down"
+    >
+      <CDropdownToggle className="c-header-nav-link" caret={false}>
+        <CIcon name="cil-envelope-open" /><CBadge shape="pill" color="info">{itemsCount}</CBadge>
+      </CDropdownToggle>
+      <CDropdownMenu className="pt-0" placement="bottom-end">
+        <CDropdownItem
+          header
+          tag="div"
+          color="light"
+        >
+          <strong>You have {itemsCount} messages</strong>
+        </CDropdownItem>
+        <CDropdownItem href="#">
+          <div className="message">
+            <div className="pt-3 mr-3 float-left">
+              <div className="c-avatar">
+                <CImg
+                  src={'avatars/7.jpg'}
+                  className="c-avatar-img"
+                  alt="admin@bootstrapmaster.com"
+                />
+                <span className="c-avatar-status bg-success"></span>
+              </div>
+            </div>
+            <div>
+              <small className="text-muted">John Doe</small>
+              <small className="text-muted float-right mt-1">Just now</small>
+            </div>
+            <div className="text-truncate font-weight-bold">
+              <span className="fa fa-exclamation text-danger"></span> Important message
+            </div>
+            <div className="small text-muted text-truncate">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+            </div>
+          </div>
+        </CDropdownItem>
+
+        <CDropdownItem href="#">
+          <div className="message">
+            <div className="pt-3 mr-3 float-left">
+              <div className="c-avatar">
+                <CImg
+                  src={'avatars/6.jpg'}
+                  className="c-avatar-img"
+                  alt="admin@bootstrapmaster.com"
+                />
+                <span className="c-avatar-status bg-warning"></span>
+              </div>
+            </div>
+            <div>
+              <small className="text-muted">Jane Dovve</small>
+              <small className="text-muted float-right mt-1">5 minutes ago</small>
+            </div>
+            <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+            </div>
+          </div>
+        </CDropdownItem>
+
+        <CDropdownItem href="#">
+          <div className="message">
+            <div className="pt-3 mr-3 float-left">
+              <div className="c-avatar">
+                <CImg
+                  src={'avatars/5.jpg'}
+                  className="c-avatar-img"
+                  alt="admin@bootstrapmaster.com"
+                />
+                <span className="c-avatar-status bg-danger"></span>
+              </div>
+            </div>
+            <div>
+              <small className="text-muted">Janet Doe</small>
+              <small className="text-muted float-right mt-1">1:52 PM</small>
+            </div>
+            <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+            </div>
+          </div>
+        </CDropdownItem>
+
+        <CDropdownItem href="#">
+          <div className="message">
+            <div className="pt-3 mr-3 float-left">
+              <div className="c-avatar">
+                <CImg
+                  src={'avatars/4.jpg'}
+                  className="c-avatar-img"
+                  alt="admin@bootstrapmaster.com"
+                />
+                <span className="c-avatar-status bg-info"></span>
+              </div>
+            </div>
+            <div>
+              <small className="text-muted">Joe Doe</small>
+              <small className="text-muted float-right mt-1">4:03 AM</small>
+            </div>
+            <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+            </div>
+          </div>
+        </CDropdownItem>
+        <CDropdownItem href="#" className="text-center border-top"><strong>View all messages</strong></CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
+
+export default TheHeaderDropdownMssg

src/containers/TheHeaderDropdownNotif.js

@@ -0,0 +1,70 @@
+import React from 'react'
+import {
+  CBadge,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CProgress
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+const TheHeaderDropdownNotif = () => {
+  const itemsCount = 5
+  return (
+    <CDropdown
+      inNav
+      className="c-header-nav-item mx-2"
+    >
+      <CDropdownToggle className="c-header-nav-link" caret={false}>
+        <CIcon name="cil-bell"/>
+        <CBadge shape="pill" color="danger">{itemsCount}</CBadge>
+      </CDropdownToggle>
+      <CDropdownMenu  placement="bottom-end" className="pt-0">
+        <CDropdownItem
+          header
+          tag="div"
+          className="text-center"
+          color="light"
+        >
+          <strong>You have {itemsCount} notifications</strong>
+        </CDropdownItem>
+        <CDropdownItem><CIcon name="cil-user-follow" className="mr-2 text-success" /> New user registered</CDropdownItem>
+        <CDropdownItem><CIcon name="cil-user-unfollow" className="mr-2 text-danger" /> User deleted</CDropdownItem>
+        <CDropdownItem><CIcon name="cil-chart-pie" className="mr-2 text-info" /> Sales report is ready</CDropdownItem>
+        <CDropdownItem><CIcon name="cil-basket" className="mr-2 text-primary" /> New client</CDropdownItem>
+        <CDropdownItem><CIcon name="cil-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem>
+        <CDropdownItem
+          header
+          tag="div"
+          color="light"
+        >
+          <strong>Server</strong>
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="text-uppercase mb-1">
+            <small><b>CPU Usage</b></small>
+          </div>
+          <CProgress size="xs" color="info" value={25} />
+          <small className="text-muted">348 Processes. 1/4 Cores.</small>
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="text-uppercase mb-1">
+            <small><b>Memory Usage</b></small>
+          </div>
+          <CProgress size="xs" color="warning" value={70} />
+          <small className="text-muted">11444GB/16384MB</small>
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="text-uppercase mb-1">
+            <small><b>SSD 1 Usage</b></small>
+          </div>
+          <CProgress size="xs" color="danger" value={90} />
+          <small className="text-muted">243GB/256GB</small>
+        </CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
+
+export default TheHeaderDropdownNotif

src/containers/TheHeaderDropdownTasks.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import {
+  CBadge,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CProgress
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+const TheHeaderDropdownTasks = () => {
+  const itemsCount = 5
+  return (
+    <CDropdown
+      inNav
+      className="c-header-nav-item mx-2"
+    >
+      <CDropdownToggle className="c-header-nav-link" caret={false}>
+        <CIcon name="cil-list" />
+        <CBadge shape="pill" color="warning">{itemsCount}</CBadge>
+      </CDropdownToggle>
+      <CDropdownMenu placement="bottom-end" className="pt-0">
+        <CDropdownItem
+          header
+          tag="div"
+          className="text-center"
+          color="light"
+        >
+          <strong>You have {itemsCount} pending tasks</strong>
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="small mb-1">Upgrade NPM &amp; Bower <span
+            className="float-right"><strong>0%</strong></span></div>
+          <CProgress size="xs" color="info" value={0} />
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="small mb-1">ReactJS Version <span className="float-right"><strong>25%</strong></span></div>
+          <CProgress size="xs" color="danger" value={25} />
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="small mb-1">VueJS Version <span className="float-right"><strong>50%</strong></span></div>
+          <CProgress size="xs" color="warning" value={50} />
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="small mb-1">Add new layouts <span className="float-right"><strong>75%</strong></span></div>
+          <CProgress size="xs" color="info" value={75} />
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="small mb-1">Angular 2 Cli Version <span className="float-right"><strong>100%</strong></span></div>
+          <CProgress size="xs" color="success" value={100} />
+        </CDropdownItem>
+        <CDropdownItem className="text-center border-top"><strong>View all tasks</strong></CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
+
+export default TheHeaderDropdownTasks

src/containers/TheLayout.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import {
+  TheContent,
+  TheSidebar,
+  TheFooter,
+  TheHeader
+} from './index'
+
+const TheLayout = () => {
+
+  return (
+    <div className="c-app c-default-layout">
+      <TheSidebar/>
+      <div className="c-wrapper">
+        <TheHeader/>
+        <div className="c-body">
+          <TheContent/>
+        </div>
+        <TheFooter/>
+      </div>
+    </div>
+  )
+}
+
+export default TheLayout

src/containers/TheSidebar.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+  CCreateElement,
+  CSidebar,
+  CSidebarBrand,
+  CSidebarNav,
+  CSidebarNavDivider,
+  CSidebarNavTitle,
+  CSidebarMinimizer,
+  CSidebarNavDropdown,
+  CSidebarNavItem,
+} from '@coreui/react'
+
+import CIcon from '@coreui/icons-react'
+
+// sidebar nav config
+import navigation from './_nav'
+
+const TheSidebar = () => {
+  const dispatch = useDispatch()
+  const show = useSelector(state => state.sidebarShow)
+
+  return (
+    <CSidebar
+      show={show}
+      onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
+    >
+      <CSidebarBrand className="d-md-down-none" to="/">
+        <CIcon
+          className="c-sidebar-brand-full"
+          name="logo-negative"
+          height={35}
+        />
+        <CIcon
+          className="c-sidebar-brand-minimized"
+          name="sygnet"
+          height={35}
+        />
+      </CSidebarBrand>
+      <CSidebarNav>
+
+        <CCreateElement
+          items={navigation}
+          components={{
+            CSidebarNavDivider,
+            CSidebarNavDropdown,
+            CSidebarNavItem,
+            CSidebarNavTitle
+          }}
+        />
+      </CSidebarNav>
+      <CSidebarMinimizer className="c-d-md-down-none"/>
+    </CSidebar>
+  )
+}
+
+export default React.memo(TheSidebar)

src/containers/_nav.js

@@ -0,0 +1,412 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+
+const _nav =  [
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Show number rows',
+    to: '/DemoComponent1',
+    // icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
+    badge: {
+      color: 'info',
+      text: '',
+    }
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'DemoComponent2',
+    to: '/DemoComponent2',
+    // icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
+    badge: {
+      color: 'info',
+      text: '',
+    }
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'DemoComponent3',
+    to: '/DemoComponent3',
+    // icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
+    badge: {
+      color: 'info',
+      text: '',
+    }
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'DemoComponent4',
+    to: '/DemoComponent4',
+    // icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
+    badge: {
+      color: 'info',
+      text: '',
+    }
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'DemoComponent5',
+    to: '/DemoComponent5',
+    // icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
+    badge: {
+      color: 'info',
+      text: '',
+    }
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Table header on every page',
+    to: '/DemoComponent6',
+    // icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
+    badge: {
+      color: 'info',
+      text: '',
+    }
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Print logo in header on every page',
+    to: '/DemoComponent7',
+    // icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
+    badge: {
+      color: 'info',
+      text: '',
+    }
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'If element cannot fit on page',
+    to: '/DemoComponent8',
+    // icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
+    badge: {
+      color: 'info',
+      text: '',
+    }
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Set custom paper format and margins',
+    to: '/DemoComponent9',
+    // icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
+    badge: {
+      color: 'info',
+      text: '',
+    }
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Export single widget',
+    to: '/DemoComponent10',
+    // icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
+    badge: {
+      color: 'info',
+      text: '',
+    }
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Dashboard',
+    to: '/dashboard',
+    icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
+    badge: {
+      color: 'info',
+      text: '',
+    }
+  },
+  {
+    _tag: 'CSidebarNavTitle',
+    _children: ['Theme']
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Colors',
+    to: '/theme/colors',
+    icon: 'cil-drop',
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Typography',
+    to: '/theme/typography',
+    icon: 'cil-pencil',
+  },
+  {
+    _tag: 'CSidebarNavTitle',
+    _children: ['Components']
+  },
+  {
+    _tag: 'CSidebarNavDropdown',
+    name: 'Base',
+    route: '/base',
+    icon: 'cil-puzzle',
+    _children: [
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Breadcrumb',
+        to: '/base/breadcrumbs',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Cards',
+        to: '/base/cards',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Carousel',
+        to: '/base/carousels',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Collapse',
+        to: '/base/collapses',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Forms',
+        to: '/base/forms',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Jumbotron',
+        to: '/base/jumbotrons',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'List group',
+        to: '/base/list-groups',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Navs',
+        to: '/base/navs',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Navbars',
+        to: '/base/navbars',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Pagination',
+        to: '/base/paginations',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Popovers',
+        to: '/base/popovers',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Progress',
+        to: '/base/progress-bar',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Switches',
+        to: '/base/switches',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Tables',
+        to: '/base/tables',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Tabs',
+        to: '/base/tabs',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Tooltips',
+        to: '/base/tooltips',
+      },
+    ],
+  },
+  {
+    _tag: 'CSidebarNavDropdown',
+    name: 'Buttons',
+    route: '/buttons',
+    icon: 'cil-cursor',
+    _children: [
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Buttons',
+        to: '/buttons/buttons',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Brand buttons',
+        to: '/buttons/brand-buttons',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Buttons groups',
+        to: '/buttons/button-groups',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Dropdowns',
+        to: '/buttons/button-dropdowns',
+      }
+    ],
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Charts',
+    to: '/charts',
+    icon: 'cil-chart-pie'
+  },
+  {
+    _tag: 'CSidebarNavDropdown',
+    name: 'Icons',
+    route: '/icons',
+    icon: 'cil-star',
+    _children: [
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'CoreUI Free',
+        to: '/icons/coreui-icons',
+        badge: {
+          color: 'success',
+          text: 'NEW',
+        },
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'CoreUI Flags',
+        to: '/icons/flags',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'CoreUI Brands',
+        to: '/icons/brands',
+      },
+    ],
+  },
+  {
+    _tag: 'CSidebarNavDropdown',
+    name: 'Notifications',
+    route: '/notifications',
+    icon: 'cil-bell',
+    _children: [
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Alerts',
+        to: '/notifications/alerts',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Badges',
+        to: '/notifications/badges',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Modal',
+        to: '/notifications/modals',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Toaster',
+        to: '/notifications/toaster'
+      }
+    ]
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Widgets',
+    to: '/widgets',
+    icon: 'cil-calculator',
+    badge: {
+      color: 'info',
+      text: 'NEW',
+    },
+  },
+  {
+    _tag: 'CSidebarNavDivider'
+  },
+  {
+    _tag: 'CSidebarNavTitle',
+    _children: ['Extras'],
+  },
+  {
+    _tag: 'CSidebarNavDropdown',
+    name: 'Pages',
+    route: '/pages',
+    icon: 'cil-star',
+    _children: [
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Login',
+        to: '/login',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Register',
+        to: '/register',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Error 404',
+        to: '/404',
+      },
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Error 500',
+        to: '/500',
+      },
+    ],
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Disabled',
+    icon: 'cil-ban',
+    badge: {
+      color: 'secondary',
+      text: 'NEW',
+    },
+    addLinkClass: 'c-disabled',
+    'disabled': true
+  },
+  {
+    _tag: 'CSidebarNavDivider',
+    className: 'm-2'
+  },
+  {
+    _tag: 'CSidebarNavTitle',
+    _children: ['Labels']
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Label danger',
+    to: '',
+    icon: {
+      name: 'cil-star',
+      className: 'text-danger'
+    },
+    label: true
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Label info',
+    to: '',
+    icon: {
+      name: 'cil-star',
+      className: 'text-info'
+    },
+    label: true
+  },
+  {
+    _tag: 'CSidebarNavItem',
+    name: 'Label warning',
+    to: '',
+    icon: {
+      name: 'cil-star',
+      className: 'text-warning'
+    },
+    label: true
+  },
+  {
+    _tag: 'CSidebarNavDivider',
+    className: 'm-2'
+  }
+]
+
+export default _nav

src/containers/index.js

@@ -0,0 +1,21 @@
+import TheContent from './TheContent'
+import TheFooter from './TheFooter'
+import TheHeader from './TheHeader'
+import TheHeaderDropdown from './TheHeaderDropdown'
+import TheHeaderDropdownMssg from './TheHeaderDropdownMssg'
+import TheHeaderDropdownNotif from './TheHeaderDropdownNotif'
+import TheHeaderDropdownTasks from './TheHeaderDropdownTasks'
+import TheLayout from './TheLayout'
+import TheSidebar from './TheSidebar'
+
+export {
+  TheContent,
+  TheFooter,
+  TheHeader,
+  TheHeaderDropdown,
+  TheHeaderDropdownMssg,
+  TheHeaderDropdownNotif,
+  TheHeaderDropdownTasks,
+  TheLayout,
+  TheSidebar
+}

src/index.js

@@ -0,0 +1,27 @@
+import 'react-app-polyfill/ie11'; // For IE 11 support
+import 'react-app-polyfill/stable';
+import 'core-js';
+import './polyfill'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+import { icons } from './assets/icons'
+
+import { Provider } from 'react-redux'
+import store from './store'
+
+React.icons = icons
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App/>
+  </Provider>,
+  document.getElementById('root')
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+serviceWorker.unregister();

src/polyfill.js

@@ -0,0 +1,63 @@
+/*
+* required polyfills
+*/
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import "core-js";
+// import 'core-js/features/symbol'
+// import 'core-js/features/object'
+// import 'core-js/features/function'
+// import 'core-js/features/parse-int'
+// import 'core-js/features/parse-float'
+// import 'core-js/features/number'
+// import 'core-js/features/math'
+// import 'core-js/features/string'
+// import 'core-js/features/date'
+// import 'core-js/features/array'
+// import 'core-js/features/regexp'
+// import 'core-js/features/map'
+// import 'core-js/features/weak-map'
+// import 'core-js/features/set'
+// import 'core-js/features/set/map';
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/features/reflect';
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+// import 'core-js/features/reflect'
+
+// CustomEvent() constructor functionality in IE9, IE10, IE11
+(function () {
+
+  if ( typeof window.CustomEvent === "function" ) return false
+
+  function CustomEvent ( event, params ) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined }
+    var evt = document.createEvent( 'CustomEvent' )
+    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail )
+    return evt
+  }
+
+  CustomEvent.prototype = window.Event.prototype
+
+  window.CustomEvent = CustomEvent
+})()
+
+if (!Element.prototype.matches) {
+  Element.prototype.matches =
+    Element.prototype.msMatchesSelector ||
+    Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (Element.prototype.matches.call(el, s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}

src/reusable/DocsLink.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { CLink } from '@coreui/react'
+
+const DocsLink = props => {
+  const {
+    name,
+    text,
+    ...rest
+  } = props
+
+  const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
+
+  return (
+    <div className="card-header-actions">
+      <CLink 
+        {...rest}
+        href={href}
+        rel="noreferrer noopener" 
+        target="_blank" 
+        className="card-header-action"  
+      >
+        <small className="text-muted">{ text || 'docs' }</small>
+      </CLink>
+    </div>
+  )
+}
+
+export default React.memo(DocsLink)

src/reusable/index.js

@@ -0,0 +1,5 @@
+import DocsLink from './DocsLink'
+
+export {
+  DocsLink
+}

src/routes.js

@@ -0,0 +1,108 @@
+import React from 'react';
+
+const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster'));
+const Tables = React.lazy(() => import('./views/base/tables/Tables'));
+
+const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs'));
+const Cards = React.lazy(() => import('./views/base/cards/Cards'));
+const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'));
+const Collapses = React.lazy(() => import('./views/base/collapses/Collapses'));
+const BasicForms = React.lazy(() => import('./views/base/forms/BasicForms'));
+
+const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons'));
+const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'));
+const Navbars = React.lazy(() => import('./views/base/navbars/Navbars'));
+const Navs = React.lazy(() => import('./views/base/navs/Navs'));
+const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations'));
+const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'));
+const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar'));
+const Switches = React.lazy(() => import('./views/base/switches/Switches'));
+
+const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'));
+const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'));
+const BrandButtons = React.lazy(() => import('./views/buttons/brand-buttons/BrandButtons'));
+const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns'));
+const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups'));
+const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons'));
+const Charts = React.lazy(() => import('./views/charts/Charts'));
+const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'));
+
+const DemoComponent1 = React.lazy(() => import('./views/demoComponent/DemoComponent1'));
+const DemoComponent2 = React.lazy(() => import('./views/demoComponent/DemoComponent2'));
+const DemoComponent3 = React.lazy(() => import('./views/demoComponent/DemoComponent3'));
+const DemoComponent4 = React.lazy(() => import('./views/demoComponent/DemoComponent4'));
+const DemoComponent5 = React.lazy(() => import('./views/demoComponent/DemoComponent5'));
+const DemoComponent6 = React.lazy(() => import('./views/demoComponent/DemoComponent6'));
+const DemoComponent7 = React.lazy(() => import('./views/demoComponent/DemoComponent7'));
+const DemoComponent8 = React.lazy(() => import('./views/demoComponent/DemoComponent8'));
+const DemoComponent9 = React.lazy(() => import('./views/demoComponent/DemoComponent9'));
+const DemoComponent10 = React.lazy(() => import('./views/demoComponent/DemoComponent10'));
+
+const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons'));
+const Flags = React.lazy(() => import('./views/icons/flags/Flags'));
+const Brands = React.lazy(() => import('./views/icons/brands/Brands'));
+const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts'));
+const Badges = React.lazy(() => import('./views/notifications/badges/Badges'));
+const Modals = React.lazy(() => import('./views/notifications/modals/Modals'));
+const Colors = React.lazy(() => import('./views/theme/colors/Colors'));
+const Typography = React.lazy(() => import('./views/theme/typography/Typography'));
+const Widgets = React.lazy(() => import('./views/widgets/Widgets'));
+const Users = React.lazy(() => import('./views/users/Users'));
+const User = React.lazy(() => import('./views/users/User'));
+
+const routes = [
+  { path: '/', exact: true, name: 'Home' },
+  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
+
+  { path: '/DemoComponent1', name: 'DemoComponent1', component: DemoComponent1 },
+  { path: '/DemoComponent2', name: 'DemoComponent', component: DemoComponent2 },
+  { path: '/DemoComponent3', name: 'DemoComponent', component: DemoComponent3 },
+  { path: '/DemoComponent4', name: 'DemoComponent', component: DemoComponent4 },
+  { path: '/DemoComponent5', name: 'DemoComponent', component: DemoComponent5 },
+  { path: '/DemoComponent6', name: 'DemoComponent', component: DemoComponent6 },
+  { path: '/DemoComponent7', name: 'DemoComponent', component: DemoComponent7 },
+  { path: '/DemoComponent8', name: 'DemoComponent', component: DemoComponent8 },
+  { path: '/DemoComponent9', name: 'DemoComponent', component: DemoComponent9 },
+  { path: '/DemoComponent10', name: 'DemoComponent', component: DemoComponent10 },
+
+  { path: '/theme', name: 'Theme', component: Colors, exact: true },
+  { path: '/theme/colors', name: 'Colors', component: Colors },
+  { path: '/theme/typography', name: 'Typography', component: Typography },
+  { path: '/base', name: 'Base', component: Cards, exact: true },
+  { path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
+  { path: '/base/cards', name: 'Cards', component: Cards },
+  { path: '/base/carousels', name: 'Carousel', component: Carousels },
+  { path: '/base/collapses', name: 'Collapse', component: Collapses },
+  { path: '/base/forms', name: 'Forms', component: BasicForms },
+  { path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
+  { path: '/base/list-groups', name: 'List Groups', component: ListGroups },
+  { path: '/base/navbars', name: 'Navbars', component: Navbars },
+  { path: '/base/navs', name: 'Navs', component: Navs },
+  { path: '/base/paginations', name: 'Paginations', component: Paginations },
+  { path: '/base/popovers', name: 'Popovers', component: Popovers },
+  { path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar },
+  { path: '/base/switches', name: 'Switches', component: Switches },
+  { path: '/base/tables', name: 'Tables', component: Tables },
+  { path: '/base/tabs', name: 'Tabs', component: Tabs },
+  { path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
+  { path: '/buttons', name: 'Buttons', component: Buttons, exact: true },
+  { path: '/buttons/buttons', name: 'Buttons', component: Buttons },
+  { path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns },
+  { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
+  { path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons },
+  { path: '/charts', name: 'Charts', component: Charts },
+  { path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
+  { path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
+  { path: '/icons/flags', name: 'Flags', component: Flags },
+  { path: '/icons/brands', name: 'Brands', component: Brands },
+  { path: '/notifications', name: 'Notifications', component: Alerts, exact: true },
+  { path: '/notifications/alerts', name: 'Alerts', component: Alerts },
+  { path: '/notifications/badges', name: 'Badges', component: Badges },
+  { path: '/notifications/modals', name: 'Modals', component: Modals },
+  { path: '/notifications/toaster', name: 'Toaster', component: Toaster },
+  { path: '/widgets', name: 'Widgets', component: Widgets },
+  { path: '/users', exact: true,  name: 'Users', component: Users },
+  { path: '/users/:id', exact: true, name: 'User Details', component: User }
+];
+
+export default routes;

src/scss/_custom.scss

@@ -0,0 +1 @@
+// Here you can add other styles

src/scss/_fixes.scss

@@ -0,0 +1,16 @@
+// todo: disabled button styles
+button {
+  &:disabled {
+    cursor: default;
+  }
+  &.disabled {
+    cursor: default;
+  }
+}
+
+// todo: brand button icon margin
+.btn-brand:not(:only-child) {
+  .c-icon {
+    margin-top: 0 !important;
+  }
+}

src/scss/_variables.scss

@@ -0,0 +1 @@
+// Variable overrides

src/scss/style.scss

@@ -0,0 +1,11 @@
+// If you want to override variables do it here
+@import "variables";
+
+// Import CoreUI styles
+@import "~@coreui/coreui/scss/coreui.scss";
+
+// Some temp fixes
+@import "fixes";
+
+// If you want to add something do it here
+@import "custom";

src/serviceWorker.js

@@ -0,0 +1,127 @@
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://goo.gl/SC7cgQ'
+          );
+        });
+      } else {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the old content will have been purged and
+              // the fresh content will have been added to the cache.
+              // It's the perfect time to display a "New content is
+              // available; please refresh." message in your web app.
+              console.log('New content is available; please refresh.');
+
+              // Execute callback
+              if (config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      if (
+        response.status === 404 ||
+        response.headers.get('content-type').indexOf('javascript') === -1
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}

src/setupTests.js

@@ -0,0 +1,15 @@
+import {configure} from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+
+configure({adapter: new Adapter()});
+
+if (global.document) {
+  document.createRange = () => ({
+    setStart: () => {},
+    setEnd: () => {},
+    commonAncestorContainer: {
+      nodeName: 'BODY',
+      ownerDocument: document,
+    },
+  });
+}

src/store.js

@@ -0,0 +1,17 @@
+import { createStore } from 'redux'
+
+const initialState = {
+  sidebarShow: 'responsive'
+}
+
+const changeState = (state = initialState, { type, ...rest }) => {
+  switch (type) {
+    case 'set':
+      return {...state, ...rest }
+    default:
+      return state
+  }
+}
+
+const store = createStore(changeState)
+export default store

src/views/base/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import {
+  CBreadcrumb,
+  CBreadcrumbItem,
+  CBreadcrumbRouter,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CLink,
+  CCol,
+  CRow
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+import routes from '../../../routes'
+
+const Breadcrumbs = () => {
+  return (
+    <CRow>
+      <CCol xs="12">
+        <CCard>
+          <CCardHeader>
+            Bootstrap Breadcrumb
+            <DocsLink name="CBreadcrumb"/>
+          </CCardHeader>
+          <CCardBody>
+            <h6>CBreadcrumbRouter wrapper component</h6>
+            <CBreadcrumbRouter routes={routes}/>
+            <h6>Manual</h6>
+            <CBreadcrumb>
+              <CBreadcrumbItem>
+                <CLink>Home</CLink>
+              </CBreadcrumbItem>
+              <CBreadcrumbItem active>Library</CBreadcrumbItem>
+            </CBreadcrumb>
+            <CBreadcrumb>
+              <CBreadcrumbItem>
+                <CLink>Home</CLink>
+              </CBreadcrumbItem>
+              <CBreadcrumbItem>
+                <CLink>Library</CLink>
+              </CBreadcrumbItem>
+              <CBreadcrumbItem active>Data</CBreadcrumbItem>
+            </CBreadcrumb>
+            <CBreadcrumb>
+              <CBreadcrumbItem>
+                <CLink>Home</CLink>
+              </CBreadcrumbItem>
+              <CBreadcrumbItem>
+                <CLink>Library</CLink>
+              </CBreadcrumbItem>
+              <CBreadcrumbItem>
+                <CLink>Data</CLink>
+              </CBreadcrumbItem>
+              <CBreadcrumbItem active>
+                <span>Bootstrap</span>
+              </CBreadcrumbItem>
+            </CBreadcrumb>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default Breadcrumbs

src/views/base/cards/Cards.js

@@ -0,0 +1,414 @@
+import React from 'react'
+import {
+  CBadge,
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardHeader,
+  CCol,
+  CRow,
+  CCollapse,
+  CFade,
+  CSwitch,
+  CLink
+} from  '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { DocsLink } from 'src/reusable'
+
+
+const Cards = () => {
+  const [collapsed, setCollapsed] = React.useState(true)
+  const [showCard, setShowCard] = React.useState(true)
+
+  return (
+    <>
+      <CRow>
+        <CCol xs="12" sm="6" md="4">
+          <CCard>
+            <CCardHeader>
+              Card title
+              <DocsLink name="CCard"/>
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+            <CCardFooter>Card footer</CCardFooter>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard>
+            <CCardHeader>
+              Card with icon
+              <div className="card-header-actions">
+                <CIcon name="cil-check" className="float-right"/>
+              </div>
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard>
+            <CCardHeader>
+              Card with switch
+              <div className="card-header-actions">
+                <CSwitch className={'float-right mb-0'} color={'info'} defaultChecked size={'sm'} tabIndex="0" />
+              </div>
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard>
+            <CCardHeader>
+              Card with label
+              <div className="card-header-actions">
+                <CBadge color="success" className="float-right">Success</CBadge>
+              </div>
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard>
+            <CCardHeader>
+              Card with label
+              <div className="card-header-actions">
+                <CBadge shape="pill" color="danger" className="float-right">42</CBadge>
+              </div>
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol xs="12" sm="6" md="4">
+          <CCard borderColor="primary">
+            <CCardHeader>
+              Card outline primary
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard borderColor="secondary">
+            <CCardHeader>
+              Card outline secondary
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard borderColor="success">
+            <CCardHeader>
+              Card outline success
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard borderColor="info">
+            <CCardHeader>
+              Card outline info
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard borderColor="warning">
+            <CCardHeader>
+              Card outline warning
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard borderColor="danger">
+            <CCardHeader>
+              Card outline danger
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+
+      <CRow>
+        <CCol xs="12" sm="6" md="4">
+          <CCard accentColor="primary">
+            <CCardHeader>
+              Card with accent
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard accentColor="secondary">
+            <CCardHeader>
+              Card with accent
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard accentColor="success">
+            <CCardHeader>
+              Card with accent
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard accentColor="info">
+            <CCardHeader>
+              Card with accent
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard accentColor="warning">
+            <CCardHeader>
+              Card with accent
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard accentColor="danger">
+            <CCardHeader>
+              Card with accent
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol xs="12" sm="6" md="4">
+          <CCard color="primary" className="text-white text-center">
+            <CCardBody>
+              <blockquote className="card-bodyquote">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+              </blockquote>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard color="success" className="text-white text-center">
+            <CCardBody>
+              <blockquote className="card-bodyquote">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+              </blockquote>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard color="info" className="text-white text-center">
+            <CCardBody>
+              <blockquote className="card-bodyquote">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+              </blockquote>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard color="warning" className="text-white text-center">
+            <CCardBody>
+              <blockquote className="card-bodyquote">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+              </blockquote>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard color="danger" className="text-white text-center">
+            <CCardBody>
+              <blockquote className="card-bodyquote">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+              </blockquote>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard color="primary" className="text-white text-center">
+            <CCardBody>
+              <blockquote className="card-bodyquote">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+              </blockquote>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol xs="12" sm="6" md="4">
+          <CCard color="primary" className="text-white">
+            <CCardHeader>
+              Card title
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard color="success" className="text-white">
+            <CCardHeader>
+              Card title
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard color="info" className="text-white">
+            <CCardHeader>
+              Card title
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard color="warning" className="text-white">
+            <CCardHeader>
+              Card title
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CCard color="gradient-secondary">
+            <CCardHeader>
+              Card title - gradient
+            </CCardHeader>
+            <CCardBody>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" sm="6" md="4">
+          <CFade in={showCard}>
+            <CCard>
+              <CCardHeader>
+                Card actions
+                <div className="card-header-actions">
+                  <CLink className="card-header-action">
+                    <CIcon name="cil-settings" />
+                  </CLink>
+                  <CLink className="card-header-action" onClick={() => setCollapsed(!collapsed)}>
+                    <CIcon name={collapsed ? 'cil-chevron-bottom':'cil-chevron-top'} />
+                  </CLink>
+                  <CLink className="card-header-action" onClick={() => setShowCard(false)}>
+                    <CIcon name="cil-x-circle" />
+                  </CLink>
+                </div>
+              </CCardHeader>
+              <CCollapse show={collapsed}>
+                <CCardBody>
+                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                  laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                </CCardBody>
+              </CCollapse>
+            </CCard>
+          </CFade>
+        </CCol>
+      </CRow>
+    </>
+  )
+}
+
+export default Cards

src/views/base/carousels/Carousels.js

@@ -0,0 +1,141 @@
+import React, { useState } from 'react'
+import {
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCarousel,
+  CCarouselCaption,
+  CCarouselControl,
+  CCarouselIndicators,
+  CCarouselInner,
+  CCarouselItem,
+  CCol,
+  CRow 
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+const slides = [
+  'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+  'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+  'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+]
+
+const Carousels = () => {
+  const [activeIndex] = useState(1)
+
+  return (
+    <CRow>
+      <CCol xs="12" xl="6">
+        <CCard>
+          <CCardHeader>
+            Carousel with controls
+            <DocsLink name="CCarousel"/>
+          </CCardHeader>
+          <CCardBody>
+            <CCarousel>
+              <CCarouselInner>
+                <CCarouselItem>
+                  <img className="d-block w-100" src={slides[0]} alt="slide 1"/>
+                </CCarouselItem>
+                <CCarouselItem>
+                  <img className="d-block w-100" src={slides[1]} alt="slide 2"/>
+                </CCarouselItem>
+                <CCarouselItem>
+                  <img className="d-block w-100" src={slides[2]} alt="slide 3"/>
+                </CCarouselItem>
+              </CCarouselInner>
+              <CCarouselControl direction="prev"/>
+              <CCarouselControl direction="next"/>
+            </CCarousel>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" xl="6">
+        <CCard>
+          <CCardHeader>
+            Carousel with controls, indicators and caption
+          </CCardHeader>
+          <CCardBody>
+            <CCarousel activeIndex={activeIndex}>
+              <CCarouselIndicators/>
+              <CCarouselInner>
+                <CCarouselItem>
+                  <img className="d-block w-100" src={slides[0]} alt="slide 1"/>
+                  <CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
+                </CCarouselItem>
+                <CCarouselItem>
+                  <img className="d-block w-100" src={slides[1]} alt="slide 2"/>
+                  <CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
+                </CCarouselItem>
+                <CCarouselItem>
+                  <img className="d-block w-100" src={slides[2]} alt="slide 3"/>
+                  <CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
+                </CCarouselItem>
+              </CCarouselInner>
+              <CCarouselControl direction="prev"/>
+              <CCarouselControl direction="next"/>
+            </CCarousel>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" xl="6">
+        <CCard>
+          <CCardHeader>
+            Carousel animation
+          </CCardHeader>
+          <CCardBody>
+            <CCarousel animate>
+              <CCarouselIndicators/>
+              <CCarouselInner>
+                <CCarouselItem>
+                  <img className="d-block w-100" src={slides[0]} alt="slide 1"/>
+                  <CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
+                </CCarouselItem>
+                <CCarouselItem>
+                  <img className="d-block w-100" src={slides[1]} alt="slide 2"/>
+                  <CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
+                </CCarouselItem>
+                <CCarouselItem>
+                  <img className="d-block w-100" src={slides[2]} alt="slide 3"/>
+                  <CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
+                </CCarouselItem>
+              </CCarouselInner>
+              <CCarouselControl direction="prev"/>
+              <CCarouselControl direction="next"/>
+            </CCarousel>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" xl="6">
+        <CCard>
+          <CCardHeader>
+            Carousel animation with autoSlide
+          </CCardHeader>
+          <CCardBody>
+            <CCarousel animate autoSlide={3000}>
+              <CCarouselIndicators/>
+              <CCarouselInner>
+                <CCarouselItem>
+                  <img className="d-block w-100" src={slides[0]} alt="slide 1"/>
+                  <CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
+                </CCarouselItem>
+                <CCarouselItem>
+                  <img className="d-block w-100" src={slides[1]} alt="slide 2"/>
+                  <CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
+                </CCarouselItem>
+                <CCarouselItem>
+                  <img className="d-block w-100" src={slides[2]} alt="slide 3"/>
+                  <CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
+                </CCarouselItem>
+              </CCarouselInner>
+              <CCarouselControl direction="prev"/>
+              <CCarouselControl direction="next"/>
+            </CCarousel>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default Carousels

src/views/base/collapses/Collapses.js

@@ -0,0 +1,220 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardHeader,
+  CCol,
+  CCollapse,
+  CFade,
+  CRow 
+} from '@coreui/react';
+import { DocsLink } from 'src/reusable'
+
+const Collapses = () => {
+
+  const [collapse, setCollapse] = useState(false)
+  const [collapseMulti, setCollapseMulti] = useState([false, false])
+  const [accordion, setAccordion] = useState(1)
+  const [fade, setFade] = useState(true)
+
+  const toggle = (e) => {
+    setCollapse(!collapse)
+    e.preventDefault()
+  }
+
+  const toggleMulti = (type) => {
+    let newCollapse = collapseMulti.slice()
+    switch (type) {
+      case "left":
+        newCollapse[0] = !collapseMulti[0];
+        break;
+      case "right":
+        newCollapse[1] = !collapseMulti[1];
+        break;
+      case "both":
+        newCollapse[0] = !collapseMulti[0];
+        newCollapse[1] = !collapseMulti[1];
+        break;
+      default:
+    }
+    setCollapseMulti(newCollapse)
+  }
+
+  const toggleFade = () => {
+    setFade(!fade)
+  }
+
+  return (
+    <CRow>
+      <CCol xl="6">
+        <CCard>
+          <CCardHeader>
+            Collapse
+            <DocsLink name="CCollapse"/>
+          </CCardHeader>
+          <CCollapse show={collapse}>
+            <CCardBody>
+              <p>
+                Anim pariatur cliche reprehenderit,
+                enim eiusmod high life accusamus terry richardson ad squid. Nihil
+                anim keffiyeh helvetica, craft beer labore wes anderson cred
+                nesciunt sapiente ea proident.
+              </p>
+              <p>
+                Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean
+                elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras
+                ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus.
+                Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis
+                sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis
+                purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non
+                augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget
+                faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
+                vehicula sagittis elit leo id nisi.
+              </p>
+            </CCardBody>
+          </CCollapse>
+          <CCardFooter>
+            <CButton
+              color="primary"
+              onClick={toggle}
+              className={'mb-1'}
+            >Toggling button</CButton>
+          </CCardFooter>
+        </CCard>
+
+        <CCard>
+          <CCardHeader>
+            Collapse
+            <small> multi target</small>
+          </CCardHeader>
+            <CCardBody>
+              <p>
+                <CButton color="primary" onClick={()=>{toggleMulti('left')}}>
+                  Left</CButton>{' '}
+                <CButton color="primary" onClick={()=>{toggleMulti('right')}}>
+                  Right</CButton>{' '}
+                <CButton color="primary" onClick={()=>{toggleMulti('both')}}>
+                  Both</CButton>{' '}
+              </p>
+              <CRow>
+                <CCol>
+                  <CCollapse show={collapseMulti[0]}>
+                    <CCard>
+                      <CCardBody>
+                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+                      </CCardBody>
+                    </CCard>
+                  </CCollapse>
+                </CCol>
+                <CCol className="col-sm-12 col-md-6">
+                  <CCollapse show={collapseMulti[1]}>
+                    <CCard>
+                      <CCardBody>
+                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+                      </CCardBody>
+                    </CCard>
+                  </CCollapse>
+                </CCol>
+              </CRow>
+            </CCardBody>
+        </CCard>
+
+        <hr/>
+
+        <CCard>
+          <CCardHeader>
+            Fade
+            <DocsLink name="CFade"/>
+          </CCardHeader>
+          <CCardBody>
+            <CFade timeout={300} in={fade} tag="h5" className="mt-3">
+              This content will fade in and out as the button is pressed...
+            </CFade>
+          </CCardBody>
+          <CCardFooter>
+            <CButton color="primary" onClick={toggleFade}>Toggle Fade</CButton>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol xl="6">
+        <CCard>
+          <CCardHeader>
+            Collapse
+            <small> accordion</small>
+          </CCardHeader>
+          <CCardBody>
+            <div id="accordion">
+              <CCard className="mb-0">
+                <CCardHeader id="headingOne">
+                  <CButton 
+                    block 
+                    color="link" 
+                    className="text-left m-0 p-0" 
+                    onClick={() => setAccordion(accordion === 0 ? null : 0)}
+                  >
+                    <h5 className="m-0 p-0">Collapsible Group Item #1</h5>
+                  </CButton>
+                </CCardHeader>
+                <CCollapse show={accordion === 0}>
+                  <CCardBody>
+                    1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                    cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                    on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                    nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                    beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
+                  </CCardBody>
+                </CCollapse>
+              </CCard>
+              <CCard className="mb-0">
+                <CCardHeader id="headingTwo">
+                  <CButton 
+                    block 
+                    color="link" 
+                    className="text-left m-0 p-0" 
+                    onClick={() => setAccordion(accordion === 1 ? null : 1)}
+                  >
+                    <h5 className="m-0 p-0">Collapsible Group Item #2</h5>
+                  </CButton>
+                </CCardHeader>
+                <CCollapse show={accordion === 1}>
+                  <CCardBody>
+                    2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                    cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                    on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                    nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                    beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
+                  </CCardBody>
+                </CCollapse>
+              </CCard>
+              <CCard className="mb-0">
+                <CCardHeader id="headingThree">
+                  <CButton 
+                    block 
+                    color="link" 
+                    className="text-left m-0 p-0" 
+                    onClick={() => setAccordion(accordion === 2 ? null : 2)}
+                  >
+                    <h5 className="m-0 p-0">Collapsible Group Item #3</h5>
+                  </CButton>
+                </CCardHeader>
+                <CCollapse show={accordion === 2}>
+                  <CCardBody>
+                    3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                    cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                    on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                    nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                    beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus labore sustainable VHS.
+                  </CCardBody>
+                </CCollapse>
+              </CCard>
+            </div>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default Collapses

src/views/base/index.js

@@ -0,0 +1,20 @@
+import Breadcrumbs from './Breadcrumbs';
+import Cards from './Cards';
+import Carousels from './Carousels';
+import Collapses from './Collapses';
+import Dropdowns from './Dropdowns';
+import Jumbotrons from './Jumbotrons';
+import ListGroups from './ListGroups';
+import Navbars from './Navbars';
+import Navs from './Navs';
+import Paginations from './Paginations';
+import Popovers from './Popovers';
+import ProgressBar from './ProgressBar';
+import Switches from './Switches';
+import Tabs from './Tabs';
+import Tooltips from './Tooltips';
+
+export {
+  Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Switches, Tabs, Tooltips, Paginations,
+};
+

src/views/base/jumbotrons/Jumbotrons.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CContainer,
+  CJumbotron,
+  CRow,
+  CEmbed,
+  CEmbedItem
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+const Jumbotrons = () => {
+
+  return (
+    <>
+      <CRow>
+        <CCol>
+          <CCard>
+            <CCardHeader>
+              Jumbotron
+              <DocsLink name="CJumbotron"/>
+            </CCardHeader>
+            <CCardBody>
+              <CJumbotron className="border">
+                <h1 className="display-3">Hello, world!</h1>
+                <p className="lead">This is a simple hero unit, a simple Jumbotron - style component for calling extra
+                  attention to featured content or information.</p>
+                <hr className="my-2" />
+                <p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
+                <p className="lead">
+                  <CButton color="primary" size="lg">Learn More</CButton>
+                </p>
+              </CJumbotron>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol>
+          <CCard>
+            <CCardHeader>
+              Jumbotron
+              <small> fluid</small>
+            </CCardHeader>
+            <CCardBody>
+              <CJumbotron fluid>
+                <CContainer fluid>
+                  <h1 className="display-3">Fluid jumbotron</h1>
+                  <p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
+                </CContainer>
+              </CJumbotron>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol>
+          <CCard>
+            <CCardHeader>
+              Embed
+            </CCardHeader>
+            <CCardBody>
+              <CEmbed>
+                <CEmbedItem src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"/>
+              </CEmbed>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+    </>
+  )
+}
+
+export default Jumbotrons

src/views/base/list-groups/ListGroups.js

@@ -0,0 +1,273 @@
+import React, { useState } from 'react'
+import {
+  CBadge,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CListGroup,
+  CListGroupItem,
+  CRow,
+  CTabContent,
+  CTabPane
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+
+const ListGroups = () => {
+  const [activeTab, setActiveTab] = useState(1)
+
+  return (
+    <>
+      <CRow>
+        <CCol sm="12" xl="6">
+
+          <CCard>
+            <CCardHeader>
+              List group
+              <DocsLink name="CListGroup"/>
+            </CCardHeader>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem>Cras justo odio</CListGroupItem>
+                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+                <CListGroupItem>Morbi leo risus</CListGroupItem>
+                <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+                <CListGroupItem>Vestibulum at eros</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
+          </CCard>
+
+        </CCol>
+        <CCol sm="12" xl="6">
+          <CCard>
+            <CCardHeader>
+              List group links
+              <small> with first item active and last item disabled</small>
+            </CCardHeader>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem href="#" active>Cras justo odio</CListGroupItem>
+                <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
+                <CListGroupItem href="#">Morbi leo risus</CListGroupItem>
+                <CListGroupItem href="#">Porta ac consectetur ac</CListGroupItem>
+                <CListGroupItem href="#" disabled>Vestibulum at eros</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+
+      <CRow>
+        <CCol sm="12" xl="6">
+
+          <CCard>
+            <CCardHeader>
+              List group
+              <small> contextual classes</small>
+            </CCardHeader>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+                <CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
+                <CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
+                <CListGroupItem color="success">This is a success list group item</CListGroupItem>
+                <CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
+                <CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
+                <CListGroupItem color="info">This is a info list group item</CListGroupItem>
+                <CListGroupItem color="light">This is a light list group item</CListGroupItem>
+                <CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
+          </CCard>
+
+        </CCol>
+        <CCol sm="12" xl="6">
+
+          <CCard>
+            <CCardHeader>
+              List group
+              <small> contextual classes with .action</small>
+            </CCardHeader>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem action>Dapibus ac facilisis in</CListGroupItem>
+                <CListGroupItem action color="primary">This is a primary list group item</CListGroupItem>
+                <CListGroupItem action color="secondary">This is a secondary list group item</CListGroupItem>
+                <CListGroupItem action color="success">This is a success list group item</CListGroupItem>
+                <CListGroupItem action color="danger">This is a danger list group item</CListGroupItem>
+                <CListGroupItem action color="warning">This is a warning list group item</CListGroupItem>
+                <CListGroupItem action color="info">This is a info list group item</CListGroupItem>
+                <CListGroupItem action color="light">This is a light list group item</CListGroupItem>
+                <CListGroupItem action color="dark">This is a dark list group item</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
+          </CCard>
+
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol sm="12" xl="6">
+          <CCard>
+            <CCardHeader>
+              List group
+              <small> accent</small>
+            </CCardHeader>
+            <CCardBody>
+              <CListGroup accent>
+                <CListGroupItem accent="primary">This is a primary list group item</CListGroupItem>
+                <CListGroupItem accent="secondary">This is a secondary list group item</CListGroupItem>
+                <CListGroupItem accent="success">This is a success list group item</CListGroupItem>
+                <CListGroupItem accent="danger">This is a danger list group item</CListGroupItem>
+                <CListGroupItem accent="warning">This is a warning list group item</CListGroupItem>
+                <CListGroupItem accent="info">This is a info list group item</CListGroupItem>
+                <CListGroupItem accent="light">This is a light list group item</CListGroupItem>
+                <CListGroupItem accent="dark">This is a dark list group item</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol sm="12" xl="6">
+          <CCard>
+            <CCardHeader>
+              List group
+              <small> accent with color</small>
+            </CCardHeader>
+            <CCardBody>
+              <CListGroup accent>
+                <CListGroupItem accent="primary" color="primary">This is a primary list group item</CListGroupItem>
+                <CListGroupItem accent="secondary" color="secondary">This is a secondary list group item</CListGroupItem>
+                <CListGroupItem accent="success" color="success">This is a success list group item</CListGroupItem>
+                <CListGroupItem accent="danger" color="danger">This is a danger list group item</CListGroupItem>
+                <CListGroupItem accent="warning" color="warning">This is a warning list group item</CListGroupItem>
+                <CListGroupItem accent="info" color="info">This is a info list group item</CListGroupItem>
+                <CListGroupItem accent="light" color="light">This is a light list group item</CListGroupItem>
+                <CListGroupItem accent="dark" color="dark">This is a dark list group item</CListGroupItem>
+              </CListGroup>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol sm="12" xl="6">
+          <CCard>
+            <CCardHeader>
+              List group
+              <small> with badges</small>
+            </CCardHeader>
+            <CCardBody>
+              <CListGroup>
+                <CListGroupItem className="justify-content-between">
+                  Cras justo odio
+                  <CBadge className="float-right" shape="pill" color="primary">14</CBadge>
+                </CListGroupItem>
+                <CListGroupItem className="justify-content-between">
+                  Dapibus ac facilisis in
+                  <CBadge className="float-right" shape="pill" color="primary">2</CBadge>
+                </CListGroupItem>
+                <CListGroupItem className="justify-content-between">
+                  Morbi leo risus
+                  <CBadge className="float-right" shape="pill" color="primary">1</CBadge>
+                </CListGroupItem>
+              </CListGroup>
+            </CCardBody>
+          </CCard>
+
+        </CCol>
+        <CCol sm="12" xl="6">
+
+          <CCard>
+            <CCardHeader>
+              List group
+              <small> custom content</small>
+            </CCardHeader>
+            <CCardBody>
+
+              <CListGroup>
+                <CListGroupItem action active>
+                  <h5 className="d-flex w-100 justify-content-between">
+                    List group item heading
+                    <small>3 days ago</small>
+                  </h5>
+                  <div className="mb-1">
+                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+                    <small>Donec id elit non mi porta.</small>
+                  </div>
+                </CListGroupItem>
+                <CListGroupItem action>
+                  <h5>List group item heading</h5>
+                  <div>
+                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+                  </div>
+                  <small>Small.</small>
+                </CListGroupItem>
+                <CListGroupItem action>
+                  <h5>List group item heading</h5>
+                  <div>
+                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+                  </div>
+                  <small>Small.</small>
+                </CListGroupItem>
+              </CListGroup>
+
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol>
+          <CCard>
+            <CCardHeader>
+              List group
+              <small> tab Javascript plugin</small>
+            </CCardHeader>
+            <CCardBody>
+              <CRow>
+                <CCol xs="4">
+                  <CListGroup id="list-tab" role="tablist">
+                    <CListGroupItem onClick={() => setActiveTab(0)} action active={activeTab === 0} >Home</CListGroupItem>
+                    <CListGroupItem onClick={() => setActiveTab(1)} action active={activeTab === 1} >Profile</CListGroupItem>
+                    <CListGroupItem onClick={() => setActiveTab(2)} action active={activeTab === 2} >Messages</CListGroupItem>
+                    <CListGroupItem onClick={() => setActiveTab(3)} action active={activeTab === 3} >Settings</CListGroupItem>
+                  </CListGroup>
+                </CCol>
+                <CCol xs="8">
+                  <CTabContent>
+                    <CTabPane active={activeTab === 0} >
+                      <p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt
+                        nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
+                        tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip
+                        eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
+                    </CTabPane>
+                    <CTabPane active={activeTab === 1}>
+                      <p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia
+                        dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt
+                        anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum
+                        reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
+                    </CTabPane>
+                    <CTabPane active={activeTab === 2}>
+                      <p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris
+                        nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur
+                        est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
+                        deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla
+                        laborum elit adipisicing pariatur cillum.</p>
+                    </CTabPane>
+                    <CTabPane active={activeTab === 3}>
+                      <p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna
+                        sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore
+                        aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco
+                        nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor
+                        eiusmod eu pariatur culpa mollit in irure.</p>
+                    </CTabPane>
+                  </CTabContent>
+                </CCol>
+              </CRow>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+    </>
+  )
+}
+
+export default ListGroups

src/views/base/navbars/Navbars.js

@@ -0,0 +1,203 @@
+import React, { useState } from 'react'
+import {
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCollapse,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CNavbar,
+  CNavbarNav,
+  CNavbarBrand,
+  CNavbarText,
+  CToggler,
+  CNavLink,
+  CDropdown,
+  CForm,
+  CInput,
+  CButton,
+  CImg
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+const CNavbars = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isOpenDropdown, setIsOpenDropdown] = useState(false)
+  const [navbarText, setNavbarText] = useState(false)
+
+  return (
+    <>
+
+      <CCard>
+        <CCardHeader>
+          CNavbar
+          <DocsLink name="CNavbar"/>
+        </CCardHeader>
+        <CCardBody>
+          <CNavbar expandable="sm" color="info" >
+            <CToggler inNavbar onClick={() => setIsOpen(!isOpen)}/>
+            <CNavbarBrand>
+              NavbarBrand
+            </CNavbarBrand>
+            <CCollapse show={isOpen} navbar>
+              <CNavbarNav>
+                <CNavLink>Home</CNavLink>
+                <CNavLink>Link</CNavLink>
+              </CNavbarNav>
+              <CNavbarNav className="ml-auto">
+                <CForm inline>
+                  <CInput
+                    className="mr-sm-2"
+                    placeholder="Search"
+                    size="sm"
+                  />
+                  <CButton color="light" className="my-2 my-sm-0" type="submit">Search</CButton>
+                </CForm>
+                <CDropdown
+                  inNav
+                >
+                  <CDropdownToggle color="primary">
+                    Lang
+                  </CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem>EN</CDropdownItem>
+                    <CDropdownItem>ES</CDropdownItem>
+                    <CDropdownItem>RU</CDropdownItem>
+                    <CDropdownItem>FA</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+                <CDropdown
+                  inNav
+                >
+                  <CDropdownToggle color="primary">
+                    User
+                  </CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem>Account</CDropdownItem>
+                    <CDropdownItem>Settings</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+              </CNavbarNav>
+            </CCollapse>
+          </CNavbar>
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          CNavbar brand
+        </CCardHeader>
+        <CCardBody>
+          <CNavbar color="faded" light>
+            <CNavbarBrand>
+              <CImg
+                src="https://placekitten.com/g/30/30"
+                className="d-inline-block align-top"
+                alt="CoreuiVue"
+              />
+              CoreUI React
+            </CNavbarBrand>
+          </CNavbar>
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          CNavbar text
+        </CCardHeader>
+        <CCardBody>
+          <CNavbar toggleable="sm" light color="light">
+            <CToggler
+              inNavbar
+              onClick={()=>{ setNavbarText(!navbarText)}}
+            />
+            <CNavbarBrand>NavbarBrand</CNavbarBrand>
+            <CCollapse show={navbarText}>
+              <CNavbarNav>
+                <CNavbarText>Navbar text</CNavbarText>
+              </CNavbarNav>
+            </CCollapse>
+          </CNavbar>
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          CNavbar dropdown
+        </CCardHeader>
+        <CCardBody>
+          <CNavbar expandable="false" color="primary" >
+            <CToggler inNavbar onClick={()=>{setIsOpenDropdown(!isOpenDropdown)}} />
+            <CCollapse show={isOpenDropdown} navbar>
+              <CNavbarNav>
+                <CNavLink>Home</CNavLink>
+                <CNavLink>Link</CNavLink>
+                <CDropdown
+                  inNav
+                >
+                  <CDropdownToggle color="primary">
+                    Lang
+                  </CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem>EN</CDropdownItem>
+                    <CDropdownItem>ES</CDropdownItem>
+                    <CDropdownItem>RU</CDropdownItem>
+                    <CDropdownItem>FA</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+                <CDropdown
+                  inNav
+                >
+                  <CDropdownToggle color="primary">
+                    User
+                  </CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem>Account</CDropdownItem>
+                    <CDropdownItem>Settings</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+              </CNavbarNav>
+            </CCollapse>
+          </CNavbar>
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          CNavbar form
+        </CCardHeader>
+        <CCardBody>
+          <CNavbar light color="light">
+            <CForm inline>
+              <CInput
+                className="mr-sm-2"
+                placeholder="Search"
+                size="sm"
+              />
+              <CButton color="outline-success" className="my-2 my-sm-0" type="submit">Search</CButton>
+            </CForm>
+          </CNavbar>
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          CNavbar input group
+        </CCardHeader>
+        <CCardBody>
+          <CNavbar light color="light">
+            <CForm inline>
+              <CInput
+                className="mr-sm-2"
+                placeholder="Username"
+              />
+            </CForm>
+          </CNavbar>
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
+
+export default CNavbars

src/views/base/navs/Navs.js

@@ -0,0 +1,308 @@
+import React from 'react'
+import {
+  CRow,
+  CCol,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CNav,
+  CNavItem,
+  CNavLink
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+const Navs = () => {
+  return (
+    <>
+      <CRow>
+        <CCol xs="6">
+          <CCard>
+            <CCardHeader>
+              Navs
+              <DocsLink name="CNav"/>
+            </CCardHeader>
+            <CCardBody>
+              <small>List Based</small>
+              <CNav>
+                <CNavItem>
+                  <CNavLink active>Active</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink disabled>Link</CNavLink>
+                </CNavItem>
+              </CNav>
+              <hr />
+              <small>Link Based</small>
+              <CNav>
+                <CNavLink>Active</CNavLink>
+                <CNavLink>Link</CNavLink>
+                <CNavLink>Link</CNavLink>
+                <CNavLink disabled>Disabled</CNavLink>
+              </CNav>
+              <hr />
+              <small>Link Base</small>
+              <CNav className="justify-content-center">
+                <CNavLink>Active</CNavLink>
+                <CNavLink>Link</CNavLink>
+                <CNavLink>Link</CNavLink>
+                <CNavLink disabled>Disabled</CNavLink>
+              </CNav>
+              <hr />
+              <small>Link Based</small>
+              <CNav className="justify-content-end">
+                <CNavLink>Active</CNavLink>
+                <CNavLink>Link</CNavLink>
+                <CNavLink>Link</CNavLink>
+                <CNavLink disabled>Disabled</CNavLink>
+              </CNav>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="3">
+          <CCard>
+            <CCardHeader>
+              Navs
+              <small> vertical / links</small>
+            </CCardHeader>
+            <CCardBody>
+              <CNav vertical>
+                <CNavLink className="nav-item">Active</CNavLink>
+                <CNavLink>Link</CNavLink>
+                <CNavLink>Link</CNavLink>
+                <CNavLink disabled>Disabled</CNavLink>
+              </CNav>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="3">
+          <CCard>
+            <CCardHeader>
+              Navs
+              <small> vertical / list</small>
+            </CCardHeader>
+            <CCardBody>
+              <CNav vertical>
+                <CNavItem>
+                  <CNavLink>Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>Another Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink disabled>Disabled Link</CNavLink>
+                </CNavItem>
+              </CNav>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+
+      <CRow>
+        <CCol xs="6">
+          <CCard>
+            <CCardHeader>
+              Navs
+              <small> tabs</small>
+            </CCardHeader>
+            <CCardBody>
+              <CNav variant="tabs">
+                <CNavLink active>Active</CNavLink>
+                <CNavLink>Link</CNavLink>
+                <CNavLink>Link</CNavLink>
+                <CNavLink disabled>Disabled</CNavLink>
+              </CNav>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="6">
+          <CCard>
+            <CCardHeader>
+              Navs
+              <small> pills</small>
+            </CCardHeader>
+            <CCardBody>
+              <CNav variant="pills">
+                <CNavItem>
+                  <CNavLink active>Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink disabled>Disabled</CNavLink>
+                </CNavItem>
+              </CNav>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol xs="12">
+          <CCard>
+            <CCardHeader>
+              Navs
+              <small> fill and justify</small>
+            </CCardHeader>
+            <CCardBody>
+              <CNav fill variant="pills">
+                <CNavItem>
+                  <CNavLink active>Active</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>Longer nav link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink disabled>Disabled</CNavLink>
+                </CNavItem>
+              </CNav>
+
+              <hr />
+
+              <CNav fill variant="pills">
+                <CNavLink active className="nav-item">Active</CNavLink>
+                <CNavLink className="nav-item">Link</CNavLink>
+                <CNavLink className="nav-item">Link</CNavLink>
+                <CNavLink className="nav-item" disabled>Disabled</CNavLink>
+              </CNav>
+
+              <hr />
+
+              <CNav justified variant="pills">
+                <CNavItem>
+                  <CNavLink active>Active</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>Longer nav link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink disabled>Disabled</CNavLink>
+                </CNavItem>
+              </CNav>
+
+              <hr />
+
+              <CNav justified variant="pills">
+                <CNavLink className="nav-item" active>Active</CNavLink>
+                <CNavLink className="nav-item">Link</CNavLink>
+                <CNavLink className="nav-item">Link</CNavLink>
+                <CNavLink className="nav-item" disabled>Disabled</CNavLink>
+              </CNav>
+
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+
+      <CRow>
+        <CCol xs="12">
+          <CCard>
+            <CCardHeader>
+              Navs
+              <small> with flex</small>
+            </CCardHeader>
+            <CCardBody>
+              <CNav variant="pills" className="flex-sm-row">
+                  <CNavLink className="flex-sm-fill text-sm-center" active>Active</CNavLink>
+                  <CNavLink className="flex-sm-fill text-sm-center">Link</CNavLink>
+                  <CNavLink className="flex-sm-fill text-sm-center">Link</CNavLink>
+                  <CNavLink className="flex-sm-fill text-sm-center" disabled>Disabled</CNavLink>
+              </CNav>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+
+      <CRow>
+
+        <CCol xs="6">
+          <CCard>
+            <CCardHeader>
+              Navs
+              <small> tabs with dropdowns</small>
+            </CCardHeader>
+            <CCardBody>
+              <CNav variant="tabs">
+                <CNavItem>
+                  <CNavLink active>Link</CNavLink>
+                </CNavItem>
+                <CDropdown inNav>
+                  <CDropdownToggle caret>
+                    Dropdown
+                  </CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem>Action</CDropdownItem>
+                    <CDropdownItem>Another action</CDropdownItem>
+                    <CDropdownItem>Something else here</CDropdownItem>
+                    <CDropdownItem divider />
+                    <CDropdownItem>Separated link</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+                <CNavItem>
+                  <CNavLink>Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink disabled>Disabled</CNavLink>
+                </CNavItem>
+              </CNav>
+            </CCardBody>
+          </CCard>
+        </CCol>
+
+        <CCol xs="6">
+          <CCard>
+            <CCardHeader>
+              Navs
+              <small> pills with dropdowns</small>
+            </CCardHeader>
+            <CCardBody>
+              <CNav variant="pills">
+                <CNavItem>
+                  <CNavLink active>Link</CNavLink>
+                </CNavItem>
+                <CDropdown inNav>
+                  <CDropdownToggle caret>
+                    Dropdown
+                  </CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem>Action</CDropdownItem>
+                    <CDropdownItem>Another action</CDropdownItem>
+                    <CDropdownItem>Something else here</CDropdownItem>
+                    <CDropdownItem divider />
+                    <CDropdownItem>Separated link</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+                <CNavItem>
+                  <CNavLink>Link</CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink disabled>Disabled</CNavLink>
+                </CNavItem>
+              </CNav>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+    </>
+  )
+}
+
+export default Navs

src/views/base/paginations/Pagnations.js

@@ -0,0 +1,93 @@
+import React, { useState } from 'react'
+import {
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CPagination
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+
+const Paginations = () => {
+  const [currentPage, setCurrentPage] = useState(2)
+
+  return (
+    <>
+      <CCard>
+        <CCardHeader>
+          Pagination
+          <DocsLink name="CPagination"/>
+        </CCardHeader>
+        <CCardBody>
+          <h6>Default</h6>
+          <CPagination
+            activePage={currentPage}
+            pages={10}
+            onActivePageChange={setCurrentPage}
+          />
+          <br></br>
+
+          <h6>Small</h6>
+          <CPagination
+            size="sm"
+            activePage={currentPage}
+            pages={10}
+            onActivePageChange={setCurrentPage}
+          />
+          <br></br>
+
+          <div className="d-md-down-none">
+            <h6>Large</h6>
+            <CPagination
+              size="lg"
+              activePage={currentPage}
+              pages={10}
+              onActivePageChange={setCurrentPage}
+            />
+            <br></br>
+          </div>
+
+          <div>currentPage: {currentPage}</div>
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardHeader>
+          <strong> Pagination </strong>
+          <small>alignment</small>
+        </CCardHeader>
+        <CCardBody>
+          <h6>Left alignment (default)</h6>
+          <CPagination
+            activePage={currentPage}
+            pages={10}
+            onActivePageChange={setCurrentPage}
+          />
+          <br></br>
+
+          <h6>Center alignment</h6>
+          <CPagination
+            align="center"
+            addListClass="some-class"
+            activePage={currentPage}
+            pages={10}
+            onActivePageChange={setCurrentPage}
+          />
+          <br></br>
+
+          <h6>Right (end) alignment</h6>
+          <CPagination
+            align="end"
+            activePage={currentPage}
+            pages={10}
+            onActivePageChange={setCurrentPage}
+          />
+          <br></br>
+
+          <div>currentPage: {currentPage}</div>
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
+
+export default Paginations

src/views/base/popovers/Popovers.js

@@ -0,0 +1,101 @@
+import React from 'react'
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CPopover,
+  CRow,
+  CCol,
+  CLink
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+const Popovers = () => {
+  const placements = [
+    'top-start', 'top', 'top-end',
+    'bottom-start', 'bottom', 'bottom-end',
+    'right-start', 'right', 'right-end',
+    'left-start', 'left', 'left-end'
+  ]
+
+  return (
+    <>
+      <CCard>
+        <CCardHeader>
+          Popovers
+          <DocsLink name="CPopover"/>
+        </CCardHeader>
+        <CCardBody>
+          {/*eslint-disable-next-line*/}
+
+          <p className="text-muted">
+            Hover over the links below to see popover:
+          </p>
+
+          <p className="muted">
+            Tight pants next level keffiyeh
+            <CPopover header="Popover header" content="Popover text">
+              <CLink> you probably </CLink>
+            </CPopover>
+              haven't heard of them.
+            Photo booth beard raw denim letterpress vegan messenger
+            bag stumptown. Farm-to-table seitan, mcsweeney's fixie
+            sustainable quinoa 8-bit american apparel
+            <CPopover header="Popover header" content="Popover text">
+              <CLink> have a </CLink>
+            </CPopover>
+            terry richardson vinyl chambray. Beard stumptown,
+            cardigans banh mi lomo thundercats. Tofu biodiesel
+            williamsburg marfa, four loko mcsweeney''s cleanse
+            vegan chambray. A really ironic artisan
+            <CPopover header="Popover header" content="Popover text">
+              <CLink> whatever keytar </CLink>
+            </CPopover>
+            scenester farm-to-table banksy Austin
+            <CPopover header="Popover header" content="Popover text">
+              <CLink> twitter handle </CLink>
+            </CPopover>
+
+            freegan cred raw denim single-origin coffee viral.
+          </p>
+        </CCardBody>
+      </CCard>
+
+      <hr/>
+
+      <CCard>
+        <CCardHeader>
+          Popovers
+          <small> placement</small>
+        </CCardHeader>
+        <CCardBody>
+          <div className="my-3">
+            <CRow>
+              {placements.map(placement => {
+                return (<CCol
+                  md="4"
+                  className="py-4 text-center"
+                  key={placement}
+                >
+                  <CPopover header="Popover header"
+                    content={`Popover with placement: ${placement}`}
+                    placement={placement}
+                    interactive={true}
+                    trigger="click"
+                  >
+                    <CButton color="primary">
+                      { placement }
+                    </CButton>
+                  </CPopover>
+                </CCol>)
+              })}
+            </CRow>
+          </div>
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
+
+export default Popovers

src/views/base/progress-bar/ProgressBar.js

@@ -0,0 +1,99 @@
+import React from 'react'
+import {
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CProgress,
+  CProgressBar
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+const ProgressBar = () => {
+  return (
+    <>
+      <CCard>
+        <CCardHeader>
+          Progress
+          <DocsLink name="CProgressBar"/>
+        </CCardHeader>
+        <CCardBody>
+          <CProgress className="mb-3" />
+          <CProgress value={25} className="mb-3" />
+          <CProgress value={50} className="mb-3" />
+          <CProgress value={75} className="mb-3" />
+          <CProgress value={100} className="mb-3" />
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardHeader>
+          Progress
+          <small> labels</small>
+        </CCardHeader>
+        <CCardBody>
+          <CProgress value={25.3746472} showPercentage precision={2} className="mb-3"/>
+          <CProgress value={50.45} showValue className="mb-3"/>
+          <CProgress value={15} max={20} showPercentage className="mb-3"/>
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardHeader>
+          Progress
+          <small> heights</small>
+        </CCardHeader>
+        <CCardBody>
+          <CProgress value={25} className="mb-3" style={{height: "3px"}}/>
+          <CProgress value={25} className="mb-3" style={{height: "30px"}}/>
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardHeader>
+          Progress
+          <small> backgrounds</small>
+        </CCardHeader>
+        <CCardBody>
+          <CProgress color="success" value="25" className="mb-3" />
+          <CProgress color="info" value={50} className="mb-3" />
+          <CProgress color="warning" value={75} className="mb-3" />
+          <CProgress color="danger" value="100" className="mb-3" />
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardHeader>
+          Progress
+          <small> multiple bar</small>
+        </CCardHeader>
+        <CCardBody>
+          <CProgress size="xs">
+            <CProgressBar value={10}/>
+            <CProgressBar color="success" value={30}/>
+            <CProgressBar color="danger" value={20}/>
+          </CProgress>
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardHeader>
+          Progress
+          <small> striped</small>
+        </CCardHeader>
+        <CCardBody>
+          <CProgress striped value={2 * 5} className="mb-3" />
+          <CProgress striped color="success" value={25} className="mb-3" />
+          <CProgress striped color="info" value={50} className="mb-3" />
+          <CProgress striped color="warning" value={75} className="mb-3" />
+          <CProgress striped color="danger" value={100} className="mb-3" />
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardHeader>
+          Progress
+          <small> animated</small>
+        </CCardHeader>
+        <CCardBody>
+          <CProgress animated value={75} className="mb-3" />
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
+
+export default ProgressBar

src/views/base/switches/Switches.js

@@ -0,0 +1,485 @@
+import React from 'react'
+import {
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CRow,
+  CSwitch
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+const Switches = () => {
+  return (
+    <CRow>
+      <CCol xs="12" md="12">
+        <CCard>
+          <CCardHeader>
+            3d Switch
+            <DocsLink name="CSwitch"/>
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked onChange={(e)=>console.log(e.target.checked)}/>
+            <CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'}  />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch default
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} color={'primary'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'secondary'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'success'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'warning'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'info'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'danger'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch default - pills
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+
+      <CCol md="12">
+        <h4>Outline</h4>
+      </CCol>
+
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch outline
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} color={'primary'} variant="outline" defaultChecked />
+            <CSwitch className={'mx-1'} color={'secondary'} variant="outline" defaultChecked />
+            <CSwitch className={'mx-1'} color={'success'} variant="outline" defaultChecked />
+            <CSwitch className={'mx-1'} color={'warning'} variant="outline" defaultChecked />
+            <CSwitch className={'mx-1'} color={'info'} variant="outline" defaultChecked />
+            <CSwitch className={'mx-1'} color={'danger'} variant="outline" defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch outline pills
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant="outline" defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant="outline" defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant="outline" defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant="outline" defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant="outline" defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant="outline" defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+
+      <CCol md="12">
+        <h4>Opposite</h4>
+      </CCol>
+
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch outline alternative
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} color={'primary'} variant="opposite" defaultChecked />
+            <CSwitch className={'mx-1'} color={'secondary'} variant="opposite" defaultChecked />
+            <CSwitch className={'mx-1'} color={'success'} variant="opposite" defaultChecked />
+            <CSwitch className={'mx-1'} color={'warning'} variant="opposite" defaultChecked />
+            <CSwitch className={'mx-1'} color={'info'} variant="opposite" defaultChecked />
+            <CSwitch className={'mx-1'} color={'danger'} variant="opposite" defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch outline alternative - pills
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant={'opposite'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant={'opposite'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant={'opposite'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant={'opposite'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant={'opposite'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant={'opposite'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+
+      <CCol md="12">
+        <h4>With text</h4>
+      </CCol>
+
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch with text
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch with text pills
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch with text outline
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch with text outline pills
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch with text outline alternative
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch with text outline alternative pills
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+
+      <CCol md="12">
+        <h4>With icon</h4>
+      </CCol>
+
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch with text
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch with text pills
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch with text outline
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch with text outline pills
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch with text outline alternative
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            Switch with text outline alternative pills
+
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
+          </CCardBody>
+        </CCard>
+      </CCol>
+
+      <CCol md="12">
+        <h4>Disabled</h4>
+      </CCol>
+
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            3d Switch
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked disabled />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked disabled />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked disabled />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked disabled />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked disabled />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked disabled />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked disabled />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked disabled />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} disabled />
+          </CCardBody>
+        </CCard>
+      </CCol>
+
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            3d Switch
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} color={'primary'} defaultChecked variant="opposite" />
+            <CSwitch className={'mx-1'} color={'secondary'} defaultChecked variant="opposite" />
+            <CSwitch className={'mx-1'} color={'success'} defaultChecked variant="opposite" />
+            <CSwitch className={'mx-1'} color={'warning'} defaultChecked variant="opposite" />
+            <CSwitch className={'mx-1'} color={'info'} defaultChecked variant="opposite" />
+            <CSwitch className={'mx-1'} color={'danger'} defaultChecked variant="opposite" />
+            <CSwitch className={'mx-1'} color={'light'} defaultChecked variant="opposite" />
+            <CSwitch className={'mx-1'} color={'dark'} defaultChecked variant="opposite" />
+            <CSwitch className={'mx-1'} color={'primary'} variant="opposite" disabled />
+          </CCardBody>
+        </CCard>
+      </CCol>
+
+      <CCol md="12">
+        <h4>3D</h4>
+      </CCol>
+
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            3d Switch
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6">
+        <CCard>
+          <CCardHeader>
+            3d Switch
+          </CCardHeader>
+          <CCardBody>
+            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'} />
+            <CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
+            <CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
+            <CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
+            <CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
+            <CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
+            <CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
+            <CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
+            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'}/>
+          </CCardBody>
+        </CCard>
+      </CCol>
+
+      <CCol md="12">
+        <h4>Sizes</h4>
+      </CCol>
+
+      <CCol xs="12">
+        <CCard>
+          <CCardHeader>
+            Sizes
+          </CCardHeader>
+          <CCardBody className="p-0">
+            <table className="table table-hover table-striped table-align-middle mb-0">
+              <thead>
+              <tr>
+                <th>Size</th>
+                <th>Example</th>
+                <th>Props</th>
+              </tr>
+              </thead>
+              <tbody>
+              <tr>
+                <td>
+                  Large
+                </td>
+                <td>
+                  <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked size={'lg'} />
+                </td>
+                <td>
+                  Add <code>size={'lg'}</code>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  Normal
+                </td>
+                <td>
+                  <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked  />
+                </td>
+                <td>
+                  -
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  Small
+                </td>
+                <td>
+                  <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked size={'sm'} />
+                </td>
+                <td>
+                  Add <code>size={'sm'}</code>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default Switches

src/views/base/tables/Tables.js

@@ -0,0 +1,214 @@
+import React from 'react'
+import {
+  CBadge,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CDataTable,
+  CRow
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+import usersData from '../../users/UsersData'
+
+const getBadge = status => {
+  switch (status) {
+    case 'Active': return 'success'
+    case 'Inactive': return 'secondary'
+    case 'Pending': return 'warning'
+    case 'Banned': return 'danger'
+    default: return 'primary'
+  }
+}
+const fields = ['name','registered', 'role', 'status']
+
+const Tables = () => {
+  return (
+    <>
+      <CRow>
+        <CCol xs="12" lg="6">
+          <CCard>
+            <CCardHeader>
+              Simple Table
+              <DocsLink name="CModal"/>
+            </CCardHeader>
+            <CCardBody>
+            <CDataTable
+              items={usersData}
+              fields={fields}
+              itemsPerPage={5}
+              pagination
+              scopedSlots = {{
+                'status':
+                  (item)=>(
+                    <td>
+                      <CBadge color={getBadge(item.status)}>
+                        {item.status}
+                      </CBadge>
+                    </td>
+                  )
+
+              }}
+            />
+            </CCardBody>
+          </CCard>
+        </CCol>
+
+        <CCol xs="12" lg="6">
+          <CCard>
+            <CCardHeader>
+              Striped Table
+            </CCardHeader>
+            <CCardBody>
+            <CDataTable
+              items={usersData}
+              fields={fields}
+              striped
+              itemsPerPage={5}
+              pagination
+              scopedSlots = {{
+                'status':
+                  (item)=>(
+                    <td>
+                      <CBadge color={getBadge(item.status)}>
+                        {item.status}
+                      </CBadge>
+                    </td>
+                  )
+
+              }}
+            />
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+
+      <CRow>
+
+        <CCol xs="12" lg="6">
+          <CCard>
+            <CCardHeader>
+              Condensed Table
+            </CCardHeader>
+            <CCardBody>
+            <CDataTable
+              items={usersData}
+              fields={fields}
+              size="sm"
+              itemsPerPage={5}
+              pagination
+              scopedSlots = {{
+                'status':
+                  (item)=>(
+                    <td>
+                      <CBadge color={getBadge(item.status)}>
+                        {item.status}
+                      </CBadge>
+                    </td>
+                  )
+
+              }}
+            />
+            </CCardBody>
+          </CCard>
+        </CCol>
+
+        <CCol xs="12" lg="6">
+          <CCard>
+            <CCardHeader>
+              Bordered Table
+            </CCardHeader>
+            <CCardBody>
+            <CDataTable
+              items={usersData}
+              fields={fields}
+              bordered
+              itemsPerPage={5}
+              pagination
+              scopedSlots = {{
+                'status':
+                  (item)=>(
+                    <td>
+                      <CBadge color={getBadge(item.status)}>
+                        {item.status}
+                      </CBadge>
+                    </td>
+                  )
+
+              }}
+            />
+            </CCardBody>
+          </CCard>
+        </CCol>
+
+      </CRow>
+
+      <CRow>
+        <CCol>
+          <CCard>
+            <CCardHeader>
+              Combined All Table
+            </CCardHeader>
+            <CCardBody>
+            <CDataTable
+              items={usersData}
+              fields={fields}
+              hover
+              striped
+              bordered
+              size="sm"
+              itemsPerPage={10}
+              pagination
+              scopedSlots = {{
+                'status':
+                  (item)=>(
+                    <td>
+                      <CBadge color={getBadge(item.status)}>
+                        {item.status}
+                      </CBadge>
+                    </td>
+                  )
+              }}
+            />
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+        <CRow>
+        <CCol>
+          <CCard>
+            <CCardHeader>
+              Combined All dark Table
+            </CCardHeader>
+            <CCardBody>
+            <CDataTable
+              items={usersData}
+              fields={fields}
+              dark
+              hover
+              striped
+              bordered
+              size="sm"
+              itemsPerPage={10}
+              pagination
+              scopedSlots = {{
+                'status':
+                  (item)=>(
+                    <td>
+                      <CBadge color={getBadge(item.status)}>
+                        {item.status}
+                      </CBadge>
+                    </td>
+                  )
+              }}
+            />
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+    </>
+  )
+}
+
+export default Tables

src/views/base/tabs/Tabs.js

@@ -0,0 +1,190 @@
+import React, { useState } from 'react'
+import {
+  CCol,
+  CNav,
+  CNavItem,
+  CNavLink,
+  CRow,
+  CTabContent,
+  CTabPane,
+  CCard,
+  CCardBody,
+  CTabs,
+  CCardHeader
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { DocsLink } from 'src/reusable'
+
+const Tabs = () => {
+  const [active, setActive] = useState(1)
+  const lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.'
+
+  return (
+    <CRow>
+      <CCol xs="12" md="6" className="mb-4">
+        <CCard>
+          <CCardHeader>
+            Index indentifiers
+            <DocsLink name="CTabs"/>
+          </CCardHeader>
+          <CCardBody>
+            <CTabs>
+              <CNav variant="tabs">
+                <CNavItem>
+                  <CNavLink>
+                    Home
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>
+                    Profile
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>
+                    Messages
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
+              <CTabContent>
+                <CTabPane>
+                  {`1. ${lorem}`}
+                </CTabPane>
+                <CTabPane>
+                  {`2. ${lorem}`}
+                </CTabPane>
+                <CTabPane>
+                  {`3. ${lorem}`}
+                </CTabPane>
+              </CTabContent>
+            </CTabs>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" md="6" className="mb-4">
+        <CCard>
+          <CCardHeader>
+            Id indentifiers
+          </CCardHeader>
+          <CCardBody>
+            <CTabs activeTab="home">
+              <CNav variant="tabs">
+                <CNavItem>
+                  <CNavLink data-tab="home">
+                    Home
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink data-tab="profile">
+                    Profile
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink data-tab="messages">
+                    Messages
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
+              <CTabContent>
+                <CTabPane data-tab="home">
+                  {`1. ${lorem}`}
+                </CTabPane>
+                <CTabPane data-tab="profile">
+                  {`2. ${lorem}`}
+                </CTabPane>
+                <CTabPane data-tab="messages">
+                  {`3. ${lorem}`}
+                </CTabPane>
+              </CTabContent>
+            </CTabs>
+          </CCardBody>
+        </CCard>
+      </CCol>
+
+      <CCol xs="12" md="6" className="mb-4">
+        <CCard>
+          <CCardHeader>
+            No fade animation tabs
+          </CCardHeader>
+          <CCardBody>
+            <CTabs>
+              <CNav variant="tabs">
+                <CNavItem>
+                  <CNavLink>
+                    <CIcon name="cil-calculator" />
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>
+                    <CIcon name="cil-basket" />
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>
+                    <CIcon name="cil-chart-pie"/>
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
+              <CTabContent fade={false}>
+                <CTabPane>
+                  {`1. ${lorem}`}
+                </CTabPane>
+                <CTabPane>
+                  {`2. ${lorem}`}
+                </CTabPane>
+                <CTabPane>
+                  {`3. ${lorem}`}
+                </CTabPane>
+              </CTabContent>
+            </CTabs>
+          </CCardBody>
+        </CCard>
+      </CCol>
+
+      <CCol xs="12" md="6" className="mb-4">
+        <CCard>
+          <CCardHeader>
+            Controlled tabs
+          </CCardHeader>
+          <CCardBody>
+            <CTabs activeTab={active} onActiveTabChange={idx => setActive(idx)}>
+              <CNav variant="tabs">
+                <CNavItem>
+                  <CNavLink>
+                    <CIcon name="cil-calculator" />
+                    { active === 0 && ' Home'}
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>
+                    <CIcon name="cil-basket" />
+                    { active === 1 && ' Profile'}
+                  </CNavLink>
+                </CNavItem>
+                <CNavItem>
+                  <CNavLink>
+                    <CIcon name="cil-chart-pie"/>
+                    { active === 2 && ' Messages'}
+                  </CNavLink>
+                </CNavItem>
+              </CNav>
+              <CTabContent>
+                <CTabPane>
+                  {`1. ${lorem}`}
+                </CTabPane>
+                <CTabPane>
+                  {`2. ${lorem}`}
+                </CTabPane>
+                <CTabPane>
+                  {`3. ${lorem}`}
+                </CTabPane>
+              </CTabContent>
+            </CTabs>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default Tabs

src/views/base/tooltips/Tooltips.js

@@ -0,0 +1,99 @@
+import React from 'react'
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CTooltip,
+  CRow,
+  CCol,
+  CLink
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+const Tooltips = () => {
+  const placements = [
+    'top-start', 'top', 'top-end',
+    'bottom-start', 'bottom', 'bottom-end',
+    'right-start', 'right', 'right-end',
+    'left-start', 'left', 'left-end'
+  ]
+
+  return (
+    <>
+      <CCard>
+        <CCardHeader>
+          Tooltips
+          <DocsLink name="CTooltip"/>
+        </CCardHeader>
+        <CCardBody>
+          {/*eslint-disable-next-line*/}
+
+          <p className="text-muted">
+            Hover over the links below to see tooltips:
+          </p>
+
+          <p className="muted">
+            Tight pants next level keffiyeh
+            <CTooltip content="Tooltip text">
+              <CLink> you probably </CLink>
+            </CTooltip>
+              haven't heard of them.
+            Photo booth beard raw denim letterpress vegan messenger
+            bag stumptown. Farm-to-table seitan, mcsweeney's fixie
+            sustainable quinoa 8-bit american apparel
+            <CTooltip content="Tooltip text">
+              <CLink> have a </CLink>
+            </CTooltip>
+            terry richardson vinyl chambray. Beard stumptown,
+            cardigans banh mi lomo thundercats. Tofu biodiesel
+            williamsburg marfa, four loko mcsweeney''s cleanse
+            vegan chambray. A really ironic artisan
+            <CTooltip content="Tooltip text">
+              <CLink> whatever keytar </CLink>
+            </CTooltip>
+            scenester farm-to-table banksy Austin
+            <CTooltip content="Tooltip text">
+              <CLink> twitter handle </CLink>
+            </CTooltip>
+
+            freegan cred raw denim single-origin coffee viral.
+          </p>
+        </CCardBody>
+      </CCard>
+
+      <hr/>
+
+      <CCard>
+        <CCardHeader>
+          Tooltips
+          <small> placement</small>
+        </CCardHeader>
+        <CCardBody>
+          <div className="my-3">
+            <CRow>
+              {placements.map(placement => {
+                return (<CCol
+                  md="4"
+                  className="py-4 text-center"
+                  key={placement}
+                >
+                  <CTooltip
+                    content={`Tooltip with placement: ${placement}`}
+                    placement={placement}
+                  >
+                    <CButton color="primary">
+                      { placement }
+                    </CButton>
+                  </CTooltip>
+                </CCol>)
+              })}
+            </CRow>
+          </div>
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
+
+export default Tooltips;

src/views/buttons/brand-buttons/BrandButtons.js

@@ -0,0 +1,167 @@
+import React from 'react'
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CRow
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+const BrandButtons = () => {
+  return (
+    <CRow>
+      <CCol xs="12">
+        <CCard>
+          <CCardHeader>
+            Brand button
+          </CCardHeader>
+          <CCardBody>
+            <h6>Size Small
+              <small> <code>size="sm"</code></small>
+            </h6>
+            <p>
+              <CButton size="sm" className="btn-facebook btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-facebook" /><span className="mfs-2">Facebook</span></CButton>
+              <CButton size="sm" className="btn-twitter btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-twitter" /><span className="mfs-2">Twitter</span></CButton>
+              <CButton size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-linkedin" /><span className="mfs-2">LinkedIn</span></CButton>
+              <CButton size="sm" className="btn-flickr btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-flickr" /><span className="mfs-2">Flickr</span></CButton>
+              <CButton size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-tumblr" /><span className="mfs-2">Tumblr</span></CButton>
+              <CButton size="sm" className="btn-xing btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-xing" /><span className="mfs-2">Xing</span></CButton>
+              <CButton size="sm" className="btn-github btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-github" /><span className="mfs-2">Github</span></CButton>
+              <CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-stackoverflow" /><span className="mfs-2">StackOverflow</span></CButton>
+              <CButton size="sm" className="btn-youtube btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-youtube" /><span className="mfs-2">YouTube</span></CButton>
+              <CButton size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-dribbble" /><span className="mfs-2">Dribbble</span></CButton>
+              <CButton size="sm" className="btn-instagram btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-instagram" /><span className="mfs-2">Instagram</span></CButton>
+              <CButton size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-pinterest" /><span className="mfs-2">Pinterest</span></CButton>
+              <CButton size="sm" className="btn-vk btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-vk" /><span className="mfs-2">VK</span></CButton>
+              <CButton size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-yahoo" /><span className="mfs-2">Yahoo</span></CButton>
+              <CButton size="sm" className="btn-behance btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-behance" /><span className="mfs-2">Behance</span></CButton>
+              <CButton size="sm" className="btn-reddit btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-reddit" /><span className="mfs-2">Reddit</span></CButton>
+              <CButton size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-vimeo" /><span className="mfs-2">Vimeo</span></CButton>
+            </p>
+            <h6>Size Normal</h6>
+            <p>
+              <CButton className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /><span className="mfs-2">Facebook</span></CButton>
+              <CButton className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /><span className="mfs-2">Twitter</span></CButton>
+              <CButton className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /><span className="mfs-2">LinkedIn</span></CButton>
+              <CButton className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /><span className="mfs-2">Flickr</span></CButton>
+              <CButton className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /><span className="mfs-2">Tumblr</span></CButton>
+              <CButton className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span className="mfs-2">Xing</span></CButton>
+              <CButton className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /><span className="mfs-2">Github</span></CButton>
+              <CButton className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /><span className="mfs-2">StackOverflow</span></CButton>
+              <CButton className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /><span className="mfs-2">YouTube</span></CButton>
+              <CButton className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span className="mfs-2">Dribbble</span></CButton>
+              <CButton className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /><span className="mfs-2">Instagram</span></CButton>
+              <CButton className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /><span className="mfs-2">Pinterest</span></CButton>
+              <CButton className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /><span className="mfs-2">VK</span></CButton>
+              <CButton className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /><span className="mfs-2">Yahoo</span></CButton>
+              <CButton className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /><span className="mfs-2">Behance</span></CButton>
+              <CButton className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /><span className="mfs-2">Reddit</span></CButton>
+              <CButton className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /><span className="mfs-2">Vimeo</span></CButton>
+            </p>
+            <h6>Size Large
+              <small> <code>size="lg"</code></small>
+            </h6>
+            <p>
+              <CButton size="lg" className="btn-facebook btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-facebook" /><span className="mfs-2">Facebook</span></CButton>
+              <CButton size="lg" className="btn-twitter btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-twitter" /><span className="mfs-2">Twitter</span></CButton>
+              <CButton size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-linkedin" /><span className="mfs-2">LinkedIn</span></CButton>
+              <CButton size="lg" className="btn-flickr btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-flickr" /><span className="mfs-2">Flickr</span></CButton>
+              <CButton size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-tumblr" /><span className="mfs-2">Tumblr</span></CButton>
+              <CButton size="lg" className="btn-xing btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-xing" /><span className="mfs-2">Xing</span></CButton>
+              <CButton size="lg" className="btn-github btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-github" /><span className="mfs-2">Github</span></CButton>
+              <CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-stackoverflow" /><span className="mfs-2">StackOverflow</span></CButton>
+              <CButton size="lg" className="btn-youtube btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-youtube" /><span className="mfs-2">YouTube</span></CButton>
+              <CButton size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-dribbble" /><span className="mfs-2">Dribbble</span></CButton>
+              <CButton size="lg" className="btn-instagram btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-instagram" /><span className="mfs-2">Instagram</span></CButton>
+              <CButton size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-pinterest" /><span className="mfs-2">Pinterest</span></CButton>
+              <CButton size="lg" className="btn-vk btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-vk" /><span className="mfs-2">VK</span></CButton>
+              <CButton size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-yahoo" /><span className="mfs-2">Yahoo</span></CButton>
+              <CButton size="lg" className="btn-behance btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-behance" /><span className="mfs-2">Behance</span></CButton>
+              <CButton size="lg" className="btn-reddit btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-reddit" /><span className="mfs-2">Reddit</span></CButton>
+              <CButton size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-vimeo" /><span className="mfs-2">Vimeo</span></CButton>
+            </p>
+          </CCardBody>
+        </CCard>
+      </CCol>
+
+      <CCol xs="12">
+        <CCard>
+          <CCardHeader>
+            Brand button
+            <small> only icons</small>
+          </CCardHeader>
+          <CCardBody>
+            <h6>Size Small
+              <small> <code>size="sm"</code></small>
+            </h6>
+            <p>
+              <CButton size="sm" className="btn-facebook btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-facebook" /></CButton>
+              <CButton size="sm" className="btn-twitter btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-twitter" /></CButton>
+              <CButton size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-linkedin" /></CButton>
+              <CButton size="sm" className="btn-flickr btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-flickr" /></CButton>
+              <CButton size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-tumblr" /></CButton>
+              <CButton size="sm" className="btn-xing btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-xing" /></CButton>
+              <CButton size="sm" className="btn-github btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-github" /></CButton>
+              <CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-stackoverflow" /></CButton>
+              <CButton size="sm" className="btn-youtube btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-youtube" /></CButton>
+              <CButton size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-dribbble" /></CButton>
+              <CButton size="sm" className="btn-instagram btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-instagram" /></CButton>
+              <CButton size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-pinterest" /></CButton>
+              <CButton size="sm" className="btn-vk btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-vk" /></CButton>
+              <CButton size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-yahoo" /></CButton>
+              <CButton size="sm" className="btn-behance btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-behance" /></CButton>
+              <CButton size="sm" className="btn-reddit btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-reddit" /></CButton>
+              <CButton size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-vimeo" /></CButton>
+            </p>
+            <h6>Size Normal</h6>
+            <p>
+              <CButton className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /></CButton>
+              <CButton className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /></CButton>
+              <CButton className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /></CButton>
+              <CButton className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /></CButton>
+              <CButton className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /></CButton>
+              <CButton className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /></CButton>
+              <CButton className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /></CButton>
+              <CButton className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /></CButton>
+              <CButton className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /></CButton>
+              <CButton className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /></CButton>
+              <CButton className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /></CButton>
+              <CButton className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /></CButton>
+              <CButton className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /></CButton>
+              <CButton className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /></CButton>
+              <CButton className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /></CButton>
+              <CButton className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /></CButton>
+              <CButton className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /></CButton>
+            </p>
+            <h6>Size Large
+              <small> <code>size="lg"</code></small>
+            </h6>
+            <p>
+              <CButton size="lg" className="btn-facebook btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-facebook" /></CButton>
+              <CButton size="lg" className="btn-twitter btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-twitter" /></CButton>
+              <CButton size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-linkedin" /></CButton>
+              <CButton size="lg" className="btn-flickr btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-flickr" /></CButton>
+              <CButton size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-tumblr" /></CButton>
+              <CButton size="lg" className="btn-xing btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-xing" /></CButton>
+              <CButton size="lg" className="btn-github btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-github" /></CButton>
+              <CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-stackoverflow" /></CButton>
+              <CButton size="lg" className="btn-youtube btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-youtube" /></CButton>
+              <CButton size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-dribbble" /></CButton>
+              <CButton size="lg" className="btn-instagram btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-instagram" /></CButton>
+              <CButton size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-pinterest" /></CButton>
+              <CButton size="lg" className="btn-vk btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-vk" /></CButton>
+              <CButton size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-yahoo" /></CButton>
+              <CButton size="lg" className="btn-behance btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-behance" /></CButton>
+              <CButton size="lg" className="btn-reddit btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-reddit" /></CButton>
+              <CButton size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-vimeo" /></CButton>
+            </p>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default BrandButtons

src/views/buttons/button-dropdowns/ButtonDropdowns.js

@@ -0,0 +1,425 @@
+import React from 'react'
+import {
+  CButton,
+  CForm,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownHeader,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CRow,
+  CFormGroup,
+  CLabel,
+  CInput,
+  CInputCheckbox
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+const ButtonDropdowns = () => {
+  return (
+    <CRow>
+      <CCol xs="12">
+        <CCard>
+          <CCardHeader>
+            Dropdowns
+            <DocsLink name="CDropdown"/>
+          </CCardHeader>
+          <CCardBody>
+
+            <CDropdown className="m-1">
+              <CDropdownToggle>
+                Dropdown button
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr/>
+
+            <CDropdown className="m-1 btn-group">
+              <CDropdownToggle color="primary">
+                Primary
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1 btn-group">
+              <CDropdownToggle color="secondary">
+                Secondary
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1 btn-group">
+              <CDropdownToggle color="success">
+                Success
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1 btn-group">
+              <CDropdownToggle color="info">
+                Info
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1 btn-group">
+              <CDropdownToggle color="warning">
+                Warning
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1 btn-group">
+              <CDropdownToggle color="danger">
+                Danger
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr/>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="primary">
+                Primary
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="secondary">
+                Secondary
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="success">
+                Success
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="info">
+                Info
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="warning">
+                Warning
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="danger">
+                Danger
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr/>
+
+            <CDropdown className="m-1" size="lg">
+              <CDropdownToggle color="secondary">
+                Large button
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            {' '}
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="secondary" size="lg">
+                Large split button
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr/>
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary" size="sm">
+                Small button
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            {' '}
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary" size="sm" split>
+                Small split button
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr/>
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary">
+                Dropup button
+              </CDropdownToggle>
+              <CDropdownMenu placement="top">
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="secondary">
+                Split dropup
+              </CDropdownToggle>
+              <CDropdownMenu placement="top">
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+          </CCardBody>
+        </CCard>
+        <CCard>
+          <CCardHeader>
+            Menus
+          </CCardHeader>
+          <CCardBody>
+
+            <CDropdown className="m-1 d-inline-block">
+              <CDropdownToggle color="secondary">
+                Direction Up
+              </CDropdownToggle>
+              <CDropdownMenu placement="top">
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <CDropdown className="m-1 d-inline-block">
+              <CDropdownToggle color="secondary">
+                Direction Left
+              </CDropdownToggle>
+              <CDropdownMenu placement="left">
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <CDropdown className="m-1 d-inline-block">
+              <CDropdownToggle color="secondary">
+                Direction Right
+              </CDropdownToggle>
+              <CDropdownMenu placement="right">
+                <CDropdownHeader>Header</CDropdownHeader>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <CDropdown className="m-1 d-inline-block">
+              <CDropdownToggle color="secondary">
+                Default Down
+              </CDropdownToggle>
+              <CDropdownMenu
+                placement="bottom"
+                modifiers={[{name: 'flip', enabled: false }]}
+              >
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr />
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary">
+                This dropdown{'\''}s menu is right-aligned
+              </CDropdownToggle>
+              <CDropdownMenu placement="right">
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr />
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary">
+                Dropdown with header
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr />
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary">
+                Dropdown with divider
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr />
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary">
+                Dropdown with disabled item
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem disabled>Disabled Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr />
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="info">
+                Dropdown with form
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CForm className="px-4 py-3" >
+                  <CFormGroup>
+                    <CLabel htmlFor="exampleDropdownFormEmail1">Email address</CLabel>
+                    <CInput className="form-control" id="exampleDropdownFormEmail1" type="email" placeholder="email@example.com" autoComplete="email"/>
+                  </CFormGroup>
+                  <CFormGroup>
+                    <CLabel htmlFor="exampleDropdownFormPassword1">Password</CLabel>
+                    <CInput className="form-control" id="exampleDropdownFormPassword1" type="password" placeholder="Password" autoComplete="current-password"/>
+                  </CFormGroup>
+                  <CFormGroup variant="custom-checkbox" className="form-group">
+                    <CInputCheckbox custom id="exampleDropdownFormCheckbox1" />
+                    <CLabel variant="custom-checkbox" htmlFor="exampleDropdownFormCheckbox1">Remember me</CLabel>
+                  </CFormGroup>
+                  <CFormGroup className="mt-2">
+                    <CButton color="primary" type="submit">Sign in</CButton>
+                  </CFormGroup>
+                </CForm>
+                <CDropdownDivider/>
+                <CDropdownItem to="/register" >Register</CDropdownItem>
+                <CDropdownItem>Forgot password?</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default ButtonDropdowns

src/views/buttons/button-groups/ButtonGroups.js

@@ -0,0 +1,197 @@
+import React from 'react'
+import {
+  CButton,
+  CDropdown,
+  CButtonGroup,
+  CButtonToolbar,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CInput,
+  CInputGroup,
+  CInputGroupPrepend,
+  CInputGroupText,
+  CRow,
+  CCallout
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
+const ButtonGroups = () => {
+  return (
+    <CRow>
+      <CCol md="6">
+        <CCard>
+          <CCardHeader>
+            Callout
+            <DocsLink name="CCallout"/>
+          </CCardHeader>
+          <CCardBody>
+            <CCallout color="primary">
+              Callout
+            </CCallout>
+          </CCardBody>
+        </CCard>
+
+        <CCard>
+          <CCardHeader>
+            Button Group
+            <DocsLink name="-Button/#CButtonGroup"/>
+          </CCardHeader>
+          <CCardBody>
+            <CButtonGroup>
+              <CButton color="secondary">Left</CButton>
+              <CButton color="secondary">Middle</CButton>
+              <CButton color="secondary">Right</CButton>
+            </CButtonGroup>
+          </CCardBody>
+        </CCard>
+
+        <CCard>
+          <CCardHeader>
+            Button Group
+            <small> toolbar</small>
+          </CCardHeader>
+          <CCardBody>
+            <CButtonToolbar className="mb-3">
+              <CButtonGroup className="mr-2">
+                <CButton color="secondary">1</CButton>
+                <CButton color="secondary">2</CButton>
+                <CButton color="secondary">3</CButton>
+                <CButton color="secondary">4</CButton>
+              </CButtonGroup>
+              <CButtonGroup className="mr-2">
+                <CButton color="secondary">5</CButton>
+                <CButton color="secondary">6</CButton>
+                <CButton color="secondary">7</CButton>
+              </CButtonGroup>
+              <CButtonGroup>
+                <CButton color="secondary">8</CButton>
+              </CButtonGroup>
+            </CButtonToolbar>
+            <CButtonToolbar className="mb-3">
+              <CButtonGroup className="mr-2">
+                <CButton color="secondary">1</CButton>
+                <CButton color="secondary">2</CButton>
+                <CButton color="secondary">3</CButton>
+                <CButton color="secondary">4</CButton>
+              </CButtonGroup>
+              <CInputGroup>
+                <CInputGroupPrepend>
+                  <CInputGroupText>@</CInputGroupText>
+                </CInputGroupPrepend>
+                <CInput placeholder="Input group example" />
+              </CInputGroup>
+            </CButtonToolbar>
+            <CButtonToolbar justify="between">
+              <CButtonGroup>
+                <CButton color="secondary">1</CButton>
+                <CButton color="secondary">2</CButton>
+                <CButton color="secondary">3</CButton>
+                <CButton color="secondary">4</CButton>
+              </CButtonGroup>
+              <CInputGroup>
+                <CInputGroupPrepend>
+                  <CInputGroupText>@</CInputGroupText>
+                </CInputGroupPrepend>
+                <CInput placeholder="Input group example" />
+              </CInputGroup>
+            </CButtonToolbar>
+          </CCardBody>
+        </CCard>
+
+        <CCard>
+          <CCardHeader>
+            Button Group
+            <small> vertical variation</small>
+          </CCardHeader>
+          <CCardBody>
+            <CButtonGroup vertical>
+              <CButton color="secondary">1</CButton>
+              <CButton color="secondary">2</CButton>
+              <CButton color="secondary">3</CButton>
+            </CButtonGroup>
+          </CCardBody>
+        </CCard>
+
+      </CCol>
+      <CCol md={6}>
+
+        <CCard>
+          <CCardHeader>
+            Button Group
+            <small> sizing</small>
+          </CCardHeader>
+          <CCardBody>
+            <CButtonGroup size="lg">
+              <CButton color="secondary">Left</CButton>
+              <CButton color="secondary">Middle</CButton>
+              <CButton color="secondary">Right</CButton>
+            </CButtonGroup>
+            <br /><br />
+            <CButtonGroup>
+              <CButton color="secondary">Left</CButton>
+              <CButton color="secondary">Middle</CButton>
+              <CButton color="secondary">Right</CButton>
+            </CButtonGroup>
+            <br /><br />
+            <CButtonGroup size="sm">
+              <CButton color="secondary">Left</CButton>
+              <CButton color="secondary">Middle</CButton>
+              <CButton color="secondary">Right</CButton>
+            </CButtonGroup>
+          </CCardBody>
+        </CCard>
+
+        <CCard>
+          <CCardHeader>
+            Button Group
+            <small> nestingccc</small>
+          </CCardHeader>
+          <CCardBody>
+            <CButtonGroup>
+              <CButton color="secondary">1</CButton>
+              <CButton color="secondary">2</CButton>
+              <CDropdown color="secondary">
+                <CDropdownToggle caret color="secondary">
+                  Dropdown
+                </CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem>Dropdown Link</CDropdownItem>
+                  <CDropdownItem>Dropdown Link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </CButtonGroup>
+          </CCardBody>
+        </CCard>
+
+        <CCard>
+          <CCardHeader>
+            Button Group
+            <small> vertical</small>
+          </CCardHeader>
+          <CCardBody>
+            <CButtonGroup vertical>
+              <CButton color="secondary">1</CButton>
+              <CButton color="secondary">2</CButton>
+              <CDropdown>
+                <CDropdownToggle color="secondary" caret>
+                  Dropdown
+                </CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem>Dropdown Link</CDropdownItem>
+                  <CDropdownItem>Dropdown Link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </CButtonGroup>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default ButtonGroups

src/views/buttons/buttons/Buttons.js

@@ -0,0 +1,676 @@
+import React from 'react'
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CRow
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { DocsLink } from 'src/reusable'
+
+const Buttons = () => {
+  return (
+    <>
+      <CCard>
+        <CCardHeader>
+          Standard Buttons
+          <DocsLink name="-Button"/>
+        </CCardHeader>
+        <CCardBody>
+          <CRow className="align-items-center">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Normal
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="primary">Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="secondary">Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="success">Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="warning">Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="danger">Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="info">Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="light">Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="dark">Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="link">Link</CButton>
+            </CCol>
+          </CRow>
+          <CRow className="align-items-center mt-3">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Active State
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block color="primary" aria-pressed="true">Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block color="secondary" aria-pressed="true">Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block color="success" aria-pressed="true">Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block color="warning" aria-pressed="true">Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block color="danger" aria-pressed="true">Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block color="info" aria-pressed="true">Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block color="light" aria-pressed="true">Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block color="dark" aria-pressed="true">Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block color="link" aria-pressed="true">Link</CButton>
+            </CCol>
+          </CRow>
+          <CRow className="align-items-center mt-3">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Disabled
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="primary" disabled>Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="secondary" disabled>Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="success" disabled>Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="warning" disabled>Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="danger" disabled>Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="info" disabled>Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="light" disabled>Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="dark" disabled>Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block color="link" disabled>Link</CButton>
+            </CCol>
+          </CRow>
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardHeader>
+          variant="outline" Buttons
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            With <code>outline</code> prop.
+          </p>
+          <CRow className="align-items-center">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Normal
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="primary">Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="secondary">Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="success">Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="warning">Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="danger">Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="info">Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="light">Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="dark">Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
+          </CRow>
+          <CRow className="align-items-center mt-3">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Active State
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" active color="primary" aria-pressed="true">Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" active color="secondary" aria-pressed="true">Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" active color="success" aria-pressed="true">Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" active color="warning" aria-pressed="true">Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" active color="danger" aria-pressed="true">Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" active color="info" aria-pressed="true">Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" active color="light" aria-pressed="true">Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" active color="dark" aria-pressed="true">Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
+          </CRow>
+          <CRow className="align-items-center mt-3">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Disabled
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="primary" disabled>Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="success" disabled>Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="warning" disabled>Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="danger" disabled>Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="info" disabled>Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="light" disabled>Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="outline" color="dark" disabled>Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
+          </CRow>
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardHeader>
+          variant="ghost" Buttons
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            Use <code>.btn-ghost-*</code> class for variant="ghost" buttons.
+          </p>
+          <CRow className="align-items-center">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Normal
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="primary">Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="secondary">Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="success">Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="warning">Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="danger">Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="info">Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="light">Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="dark">Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
+          </CRow>
+          <CRow className="align-items-center mt-3">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Active State
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block active variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block active variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block active variant="ghost" color="success" aria-pressed="true">Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block active variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block active variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block active variant="ghost" color="info" aria-pressed="true">Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block active variant="ghost" color="light" aria-pressed="true">Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block active variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
+          </CRow>
+          <CRow className="align-items-center mt-3">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Disabled
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="primary" disabled>Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="success" disabled>Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="warning" disabled>Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="danger" disabled>Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="info" disabled>Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="light" disabled>Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block variant="ghost" color="dark" disabled>Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
+          </CRow>
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardHeader>
+          Square Buttons
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            Use <code>.btn-square</code> class for square buttons.
+          </p>
+          <CRow className="align-items-center">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Normal
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="primary">Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="secondary">Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="success">Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="warning">Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="danger">Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="info">Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="light">Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="dark">Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="link">Link</CButton>
+            </CCol>
+          </CRow>
+          <CRow className="align-items-center mt-3">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Active State
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="square" color="primary" aria-pressed="true">Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="square" color="secondary" aria-pressed="true">Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="square" color="success" aria-pressed="true">Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="square" color="warning" aria-pressed="true">Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="square" color="danger" aria-pressed="true">Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="square" color="info" aria-pressed="true">Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="square" color="light" aria-pressed="true">Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="square" color="dark" aria-pressed="true">Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="square" color="link" aria-pressed="true">Link</CButton>
+            </CCol>
+          </CRow>
+          <CRow className="align-items-center mt-3">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Disabled
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="primary" disabled>Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="secondary" disabled>Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="success" disabled>Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="warning" disabled>Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="danger" disabled>Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="info" disabled>Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="light" disabled>Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="dark" disabled>Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="square" color="link" disabled>Link</CButton>
+            </CCol>
+          </CRow>
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardHeader>
+          Pill Buttons
+        </CCardHeader>
+        <CCardBody>
+          <p>
+            Use <code>.btn-pill</code> class for pill buttons.
+          </p>
+          <CRow className="align-items-center">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Normal
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="primary" className="">Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="secondary">Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="success">Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="warning">Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="danger">Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="info">Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="light">Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="dark">Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="link">Link</CButton>
+            </CCol>
+          </CRow>
+          <CRow className="align-items-center mt-3">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Active State
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="pill" color="primary" aria-pressed="true">Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="pill" color="secondary" aria-pressed="true">Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="pill" color="success" aria-pressed="true">Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="pill" color="warning" aria-pressed="true">Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="pill" color="danger" aria-pressed="true">Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="pill" color="info" aria-pressed="true">Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="pill" color="light" aria-pressed="true">Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="pill" color="dark" aria-pressed="true">Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton active block shape="pill" color="link" aria-pressed="true">Link</CButton>
+            </CCol>
+          </CRow>
+          <CRow className="align-items-center mt-3">
+            <CCol col="12" xl className="mb-3 mb-xl-0">
+              Disabled
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="primary" disabled>Primary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="secondary" disabled>Secondary</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="success" disabled>Success</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="warning" disabled>Warning</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="danger" disabled>Danger</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="info" disabled>Info</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="light" disabled>Light</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="dark" disabled>Dark</CButton>
+            </CCol>
+            <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+              <CButton block shape="pill" color="link" disabled>Link</CButton>
+            </CCol>
+          </CRow>
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          Sizes
+        </CCardHeader>
+        <CCardBody>
+          <p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
+          <CRow className="align-items-center">
+            <CCol col="2" xl className="mb-3 mb-xl-0">
+              Small
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton color="primary" size="sm">Standard Button</CButton>
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton color="secondary" variant="outline" size="sm">Outline Button</CButton>
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton size="sm" variant="ghost" color="ghost">Ghost Button</CButton>
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton shape="square" color="warning" size="sm">Square Button</CButton>
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton shape="pill" color="danger" size="sm">Pill Button</CButton>
+            </CCol>
+          </CRow>
+          <CRow className="align-items-center mt-3">
+            <CCol col="2" xl className="mb-3 mb-xl-0">
+              Normal
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton color="primary">Standard Button</CButton>
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton variant="outline" color="secondary" >Outline Button</CButton>
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton variant="ghost" color="success">Ghost Button</CButton>
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton shape="square" color="warning">Square Button</CButton>
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton shape="pill" color="danger">Pill Button</CButton>
+            </CCol>
+          </CRow>
+          <CRow className="align-items-center mt-3">
+            <CCol col="2" xl className="mb-3 mb-xl-0">
+              Large
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton color="primary" size="lg">Standard Button</CButton>
+            </CCol>
+            <CCol col="2"className="mb-3 mb-xl-0 text-center">
+              <CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton shape="square" color="warning" size="lg">Square Button</CButton>
+            </CCol>
+            <CCol col="2" className="mb-3 mb-xl-0 text-center">
+              <CButton shape="pill" color="danger" size="lg">Pill Button</CButton>
+            </CCol>
+          </CRow>
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          With Icons
+        </CCardHeader>
+        <CCardBody>
+          <CRow className="align-items-center mt-3">
+            <CCol col="2" className="text-center mt-3">
+              <CButton color="primary">
+                Standard Button
+              </CButton>
+            </CCol>
+            <CCol col="2" className="text-center mt-3">
+              <CButton color="secondary" variant='outline'>
+                <CIcon name="cil-lightbulb" />Outline Button
+              </CButton>
+            </CCol>
+            <CCol col="2" className="text-center mt-3">
+              <CButton variant="ghost" color="success">
+                <CIcon name="cil-lightbulb" />Ghost Button
+              </CButton>
+            </CCol>
+            <CCol col="2" className="text-center mt-3">
+              <CButton shape="square" color="warning">
+                <CIcon name="cil-lightbulb" />Square Button
+              </CButton>
+            </CCol>
+            <CCol col="2" className="text-center mt-3">
+              <CButton shape="pill" color="danger">
+                <CIcon name="cil-lightbulb" />Pill Button
+              </CButton>
+            </CCol>
+          </CRow>
+        </CCardBody>
+      </CCard>
+      <CRow>
+        <CCol xs="12" md="6">
+          <CCard>
+            <CCardHeader>
+              Block Level Buttons
+            </CCardHeader>
+            <CCardBody>
+              <p>Add prop <code>block</code></p>
+              <CButton color="secondary" size="lg" block>Block level button</CButton>
+              <CButton color="primary" size="lg" block>Block level button</CButton>
+              <CButton color="success" size="lg" block>Block level button</CButton>
+              <CButton color="info" size="lg" block>Block level button</CButton>
+              <CButton color="warning" size="lg" block>Block level button</CButton>
+              <CButton color="danger" size="lg" block>Block level button</CButton>
+              <CButton color="link" size="lg" block>Block level button</CButton>
+            </CCardBody>
+          </CCard>
+        </CCol>
+        <CCol xs="12" md="6">
+          <CCard>
+            <CCardHeader>
+              Block Level Buttons
+            </CCardHeader>
+            <CCardBody>
+              <p>Add prop <code>block</code></p>
+              <CButton variant="outline" color="secondary" size="lg" block>Block level button</CButton>
+              <CButton variant="outline" color="primary" size="lg" block>Block level button</CButton>
+              <CButton variant="outline" color="success" size="lg" block>Block level button</CButton>
+              <CButton variant="outline" color="info" size="lg" block>Block level button</CButton>
+              <CButton variant="outline" color="warning" size="lg" block>Block level button</CButton>
+              <CButton variant="outline" color="danger" size="lg" block>Block level button</CButton>
+              <CButton variant="ghost" color="info" size="lg" block>Block level button</CButton>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+    </>
+  )
+}
+
+export default Buttons

src/views/buttons/index.js

@@ -0,0 +1,8 @@
+import ButtonDropdowns from './ButtonDropdowns'
+import ButtonGroups from './ButtonGroups'
+import Buttons from './Buttons'
+import BrandButtons from './BrandButtons'
+
+export {
+  ButtonDropdowns, ButtonGroups, Buttons, BrandButtons
+}

src/views/charts/ChartBarSimple.js

@@ -0,0 +1,75 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { getColor } from '@coreui/utils'
+import { CChartBar } from '@coreui/react-chartjs'
+
+const ChartBarSimple = props => {
+
+  const {
+    backgroundColor,
+    pointHoverBackgroundColor,
+    dataPoints,
+    label,
+    pointed,
+    ...attributes
+  } = props
+
+  const defaultDatasets = (()=>{
+    return [
+      {
+        data: dataPoints,
+        backgroundColor: getColor(backgroundColor),
+        pointHoverBackgroundColor: getColor(pointHoverBackgroundColor),
+        label: label,
+        barPercentage: 0.5,
+        categoryPercentage: 1
+      }
+    ]
+  })()
+
+  const defaultOptions = (()=>{
+    return {
+      maintainAspectRatio: false,
+      legend: {
+        display: false
+      },
+      scales: {
+        xAxes: [{
+          display: false
+        }],
+        yAxes: [{
+          display: false
+        }]
+      }
+    }
+  })()
+
+  // render
+  return (
+    <CChartBar
+      {...attributes}
+      datasets={defaultDatasets}
+      options={defaultOptions}
+      labels={label}
+    />
+  )
+}
+
+ChartBarSimple.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.string,
+  //
+  backgroundColor: PropTypes.string,
+  pointHoverBackgroundColor: PropTypes.string,
+  dataPoints: PropTypes.array,
+  label: PropTypes.string,
+  pointed: PropTypes.bool
+};
+
+ChartBarSimple.defaultProps = {
+  backgroundColor: 'rgba(0,0,0,.2)',
+  dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
+  label: 'Sales'
+};
+
+export default ChartBarSimple

src/views/charts/ChartLineSimple.js

@@ -0,0 +1,152 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { getColor, deepObjectsMerge } from '@coreui/utils'
+import { CChartLine } from '@coreui/react-chartjs'
+
+const ChartLineSimple = props => {
+
+  const {
+    borderColor,
+    backgroundColor,
+    pointHoverBackgroundColor,
+    dataPoints,
+    label,
+    pointed,
+    ...attributes
+  } = props
+
+  const pointHoverColor = (()=>{
+    if (pointHoverBackgroundColor) {
+      return pointHoverBackgroundColor
+    } else if (backgroundColor !== 'transparent') {
+      return backgroundColor
+    }
+    return borderColor
+  })()
+
+  const defaultDatasets = (()=>{
+    return [
+      {
+        data: dataPoints,
+        borderColor: getColor(borderColor),
+        backgroundColor: getColor(backgroundColor),
+        pointBackgroundColor: getColor(pointHoverColor),
+        pointHoverBackgroundColor: getColor(pointHoverColor),
+        label
+      }
+    ]
+  })()
+
+  const pointedOptions = (()=>{
+    return {
+      scales: {
+        xAxes: [
+          {
+            offset: true,
+            gridLines: {
+              color: 'transparent',
+              zeroLineColor: 'transparent'
+            },
+            ticks: {
+              fontSize: 2,
+              fontColor: 'transparent'
+            }
+          }
+        ],
+        yAxes: [
+          {
+            display: false,
+            ticks: {
+              display: false,
+              min: Math.min.apply(Math, dataPoints) - 5,
+              max: Math.max.apply(Math, dataPoints) + 5
+            }
+          }
+        ]
+      },
+      elements: {
+        line: {
+          borderWidth: 1
+        },
+        point: {
+          radius: 4,
+          hitRadius: 10,
+          hoverRadius: 4
+        }
+      }
+    }
+  })()
+
+  const straightOptions = (()=>{
+    return {
+      scales: {
+        xAxes: [{
+          display: false
+        }],
+        yAxes: [{
+          display: false
+        }]
+      },
+      elements: {
+        line: {
+          borderWidth: 2
+        },
+        point: {
+          radius: 0,
+          hitRadius: 10,
+          hoverRadius: 4
+        }
+      }
+    }
+  })()
+
+  const defaultOptions = (()=>{
+    const options = pointed ? pointedOptions : straightOptions
+      return Object.assign({}, options, {
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        }
+      })
+  })()
+
+  const computedDatasets = (() => {
+    return deepObjectsMerge(defaultDatasets, attributes.datasets || {})
+  })()
+
+  const computedOptions = (() => {
+    return deepObjectsMerge(defaultOptions, attributes.options || {})
+  })()
+
+  // render
+
+  return (
+    <CChartLine
+      {...attributes}
+      datasets={computedDatasets}
+      options={computedOptions}
+      labels={label}
+    />
+  )
+}
+
+ChartLineSimple.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.string,
+  //
+  borderColor: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  pointHoverBackgroundColor: PropTypes.string,
+  dataPoints: PropTypes.array,
+  label: PropTypes.string,
+  pointed: PropTypes.bool
+};
+
+ChartLineSimple.defaultProps = {
+  borderColor: 'rgba(255,255,255,.55)',
+  backgroundColor: 'transparent',
+  dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
+  label: 'Sales'
+};
+
+export default ChartLineSimple

src/views/charts/Charts.js

@@ -0,0 +1,215 @@
+import React from 'react'
+import {
+  CCard,
+  CCardBody,
+  CCardGroup,
+  CCardHeader
+} from '@coreui/react'
+import {
+  CChartBar,
+  CChartLine,
+  CChartDoughnut,
+  CChartRadar,
+  CChartPie,
+  CChartPolarArea
+} from '@coreui/react-chartjs'
+import { DocsLink } from 'src/reusable'
+
+const Charts = () => {
+
+  return (
+    <CCardGroup columns className = "cols-2" >
+      <CCard>
+        <CCardHeader>
+          Bar Chart
+          <DocsLink href="http://www.chartjs.org"/>
+        </CCardHeader>
+        <CCardBody>
+          <CChartBar
+            datasets={[
+              {
+                label: 'GitHub Commits',
+                backgroundColor: '#f87979',
+                data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+              }
+            ]}
+            labels="months"
+            options={{
+              tooltips: {
+                enabled: true
+              }
+            }}
+          />
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          Doughnut Chart
+        </CCardHeader>
+        <CCardBody>
+          <CChartDoughnut
+            datasets={[
+              {
+                backgroundColor: [
+                  '#41B883',
+                  '#E46651',
+                  '#00D8FF',
+                  '#DD1B16'
+                ],
+                data: [40, 20, 80, 10]
+              }
+            ]}
+            labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
+            options={{
+              tooltips: {
+                enabled: true
+              }
+            }}
+          />
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          Line Chart
+        </CCardHeader>
+        <CCardBody>
+          <CChartLine
+            datasets={[
+              {
+                label: 'Data One',
+                backgroundColor: 'rgb(228,102,81,0.9)',
+                data: [30, 39, 10, 50, 30, 70, 35]
+              },
+              {
+                label: 'Data Two',
+                backgroundColor: 'rgb(0,216,255,0.9)',
+                data: [39, 80, 40, 35, 40, 20, 45]
+              }
+            ]}
+            options={{
+              tooltips: {
+                enabled: true
+              }
+            }}
+            labels="months"
+          />
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          Pie Chart
+        </CCardHeader>
+        <CCardBody>
+          <CChartPie
+            datasets={[
+              {
+                backgroundColor: [
+                  '#41B883',
+                  '#E46651',
+                  '#00D8FF',
+                  '#DD1B16'
+                ],
+                data: [40, 20, 80, 10]
+              }
+            ]}
+            labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
+            options={{
+              tooltips: {
+                enabled: true
+              }
+            }}
+          />
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          Polar Area Chart
+        </CCardHeader>
+        <CCardBody>
+          <CChartPolarArea
+            datasets={[
+              {
+                label: 'My First dataset',
+                backgroundColor: 'rgba(179,181,198,0.2)',
+                pointBackgroundColor: 'rgba(179,181,198,1)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: 'rgba(179,181,198,1)',
+                pointHoverBorderColor: 'rgba(179,181,198,1)',
+                data: [65, 59, 90, 81, 56, 55, 40]
+              },
+              {
+                label: 'My Second dataset',
+                backgroundColor: 'rgba(255,99,132,0.2)',
+                pointBackgroundColor: 'rgba(255,99,132,1)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: 'rgba(255,99,132,1)',
+                pointHoverBorderColor: 'rgba(255,99,132,1)',
+                data: [28, 48, 40, 19, 96, 27, 100]
+              }
+            ]}
+            options={{
+              aspectRatio: 1.5,
+              tooltips: {
+                enabled: true
+              }
+            }}
+            labels={[
+              'Eating', 'Drinking', 'Sleeping', 'Designing',
+              'Coding', 'Cycling', 'Running'
+            ]}
+          />
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          Radar Chart
+        </CCardHeader>
+        <CCardBody>
+          <CChartRadar
+            datasets={[
+              {
+                label: '2019',
+                backgroundColor: 'rgba(179,181,198,0.2)',
+                borderColor: 'rgba(179,181,198,1)',
+                pointBackgroundColor: 'rgba(179,181,198,1)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: '#fff',
+                pointHoverBorderColor: 'rgba(179,181,198,1)',
+                tooltipLabelColor: 'rgba(179,181,198,1)',
+                data: [65, 59, 90, 81, 56, 55, 40]
+              },
+              {
+                label: '2020',
+                backgroundColor: 'rgba(255,99,132,0.2)',
+                borderColor: 'rgba(255,99,132,1)',
+                pointBackgroundColor: 'rgba(255,99,132,1)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: '#fff',
+                pointHoverBorderColor: 'rgba(255,99,132,1)',
+                tooltipLabelColor: 'rgba(255,99,132,1)',
+                data: [28, 48, 40, 19, 96, 27, 100]
+              }
+            ]}
+            options={{
+              aspectRatio: 1.5,
+              tooltips: {
+                enabled: true
+              }
+            }}
+            labels={[
+              'Eating', 'Drinking', 'Sleeping', 'Designing',
+              'Coding', 'Cycling', 'Running'
+            ]}
+          />
+        </CCardBody>
+      </CCard>
+    </CCardGroup>
+  )
+}
+
+export default Charts

src/views/charts/MainChartExample.js

@@ -0,0 +1,101 @@
+import React from 'react'
+import { CChartLine } from '@coreui/react-chartjs'
+import { getStyle, hexToRgba } from '@coreui/utils'
+
+const brandSuccess = getStyle('success') || '#4dbd74'
+const brandInfo = getStyle('info') || '#20a8d8'
+const brandDanger = getStyle('danger') || '#f86c6b'
+
+const MainChartExample = attributes => {
+  const random = (min, max)=>{
+    return Math.floor(Math.random() * (max - min + 1) + min)
+  }
+
+  const defaultDatasets = (()=>{
+    let elements = 27
+    const data1 = []
+    const data2 = []
+    const data3 = []
+    for (let i = 0; i <= elements; i++) {
+      data1.push(random(50, 200))
+      data2.push(random(80, 100))
+      data3.push(65)
+    }
+    return [
+      {
+        label: 'My First dataset',
+        backgroundColor: hexToRgba(brandInfo, 10),
+        borderColor: brandInfo,
+        pointHoverBackgroundColor: brandInfo,
+        borderWidth: 2,
+        data: data1
+      },
+      {
+        label: 'My Second dataset',
+        backgroundColor: 'transparent',
+        borderColor: brandSuccess,
+        pointHoverBackgroundColor: brandSuccess,
+        borderWidth: 2,
+        data: data2
+      },
+      {
+        label: 'My Third dataset',
+        backgroundColor: 'transparent',
+        borderColor: brandDanger,
+        pointHoverBackgroundColor: brandDanger,
+        borderWidth: 1,
+        borderDash: [8, 5],
+        data: data3
+      }
+    ]
+  })()
+
+  const defaultOptions = (()=>{
+    return {
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            gridLines: {
+              drawOnChartArea: false
+            }
+          }],
+          yAxes: [{
+            ticks: {
+              beginAtZero: true,
+              maxTicksLimit: 5,
+              stepSize: Math.ceil(250 / 5),
+              max: 250
+            },
+            gridLines: {
+              display: true
+            }
+          }]
+        },
+        elements: {
+          point: {
+            radius: 0,
+            hitRadius: 10,
+            hoverRadius: 4,
+            hoverBorderWidth: 3
+          }
+        }
+      }
+    }
+  )()
+
+  // render
+  return (
+    <CChartLine
+      {...attributes}
+      datasets={defaultDatasets}
+      options={defaultOptions}
+      labels={['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']}
+    />
+  )
+}
+
+
+export default MainChartExample

src/views/dashboard/Dashboard.js

@@ -0,0 +1,788 @@
+import React, { lazy } from 'react'
+import {
+  CBadge,
+  CButton,
+  CButtonGroup,
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardHeader,
+  CCol,
+  CProgress,
+  CRow,
+  CCallout
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import PDFEngine from 'PDFEngine'
+
+import MainChartExample from '../charts/MainChartExample.js'
+
+const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
+const WidgetsBrand = lazy(() => import('../widgets/WidgetsBrand.js'))
+
+const Dashboard = () => {
+  return (
+    <>
+      <WidgetsDropdown/>
+      <CCard  code="br-isolatedlandscape">
+        <CCardBody>
+          <CRow>
+            <CCol sm="5">
+              <h4 id="traffic" className="card-title mb-0">Traffic</h4>
+              <div className="small text-muted">November 2017</div>
+            </CCol>
+            <CCol sm="7" className="d-none d-md-block">
+              <CButton color="primary" className="float-right">
+                <CIcon name="cil-cloud-download" />
+              </CButton>
+              <CButtonGroup className="float-right mr-3">
+                {
+                  ['Day', 'Month', 'Year'].map(value => (
+                    <CButton
+                      color="outline-secondary"
+                      key={value}
+                      className="mx-0"
+                      active={value === 'Month'}
+                    >
+                      {value}
+                    </CButton>
+                  ))
+                }
+              </CButtonGroup>
+            </CCol>
+          </CRow>
+          <MainChartExample style={{ height: '300px', marginTop: '40px' }} />
+        </CCardBody>
+        <CCardFooter code="br-hide">
+          <CRow className="text-center">
+            <CCol md sm="12" className="mb-sm-2 mb-0">
+              <div className="text-muted">Visits</div>
+              <strong>29.703 Users (40%)</strong>
+              <CProgress
+                className="progress-xs mt-2"
+                precision={1}
+                color="success"
+                value={40}
+              />
+            </CCol>
+            <CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
+              <div className="text-muted">Unique</div>
+              <strong>24.093 Users (20%)</strong>
+              <CProgress
+                className="progress-xs mt-2"
+                precision={1}
+                color="info"
+                value={40}
+              />
+            </CCol>
+            <CCol md sm="12" className="mb-sm-2 mb-0">
+              <div className="text-muted">Pageviews</div>
+              <strong>78.706 Views (60%)</strong>
+              <CProgress
+                className="progress-xs mt-2"
+                precision={1}
+                color="warning"
+                value={40}
+              />
+            </CCol>
+            <CCol md sm="12" className="mb-sm-2 mb-0">
+              <div className="text-muted">New Users</div>
+              <strong>22.123 Users (80%)</strong>
+              <CProgress
+                className="progress-xs mt-2"
+                precision={1}
+                color="danger"
+                value={40}
+              />
+            </CCol>
+            <CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
+              <div className="text-muted">Bounce Rate</div>
+              <strong>Average Rate (40.15%)</strong>
+              <CProgress
+                className="progress-xs mt-2"
+                precision={1}
+                value={40}
+              />
+            </CCol>
+          </CRow>
+        </CCardFooter>
+      </CCard>
+
+
+      <WidgetsBrand withCharts />
+
+      <CRow>
+        <CCol>
+          <CCard>
+            <CCardHeader code="br-hide">
+              Traffic {' & '} Sales
+            </CCardHeader>
+            <CCardBody>
+              <CRow>
+                <CCol xs="12" md="6" xl="6">
+
+                  <CRow>
+                    <CCol sm="6">
+                      <CCallout color="info">
+                        <small className="text-muted">New Clients</small>
+                        <br />
+                        <strong className="h4">9,123</strong>
+                      </CCallout>
+                    </CCol>
+                    <CCol sm="6">
+                      <CCallout color="danger">
+                        <small className="text-muted">Recurring Clients</small>
+                        <br />
+                        <strong className="h4">22,643</strong>
+                      </CCallout>
+                    </CCol>
+                  </CRow>
+
+                  <hr className="mt-0" />
+
+                  <div className="progress-group mb-4">
+                    <div className="progress-group-prepend">
+                      <span className="progress-group-text">
+                        Monday
+                      </span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="info" value="34" />
+                      <CProgress className="progress-xs" color="danger" value="78" />
+                    </div>
+                  </div>
+                  <div className="progress-group mb-4">
+                    <div className="progress-group-prepend">
+                      <span className="progress-group-text">
+                        Tuesday
+                      </span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="info" value="56" />
+                      <CProgress className="progress-xs" color="danger" value="94" />
+                    </div>
+                  </div>
+                  <div className="progress-group mb-4">
+                    <div className="progress-group-prepend">
+                      <span className="progress-group-text">
+                        Wednesday
+                      </span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="info" value="12" />
+                      <CProgress className="progress-xs" color="danger" value="67" />
+                    </div>
+                  </div>
+                  <div className="progress-group mb-4">
+                    <div className="progress-group-prepend">
+                      <span className="progress-group-text">
+                        Thursday
+                      </span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="info" value="43" />
+                      <CProgress className="progress-xs" color="danger" value="91" />
+                    </div>
+                  </div>
+                  <div className="progress-group mb-4">
+                    <div className="progress-group-prepend">
+                      <span className="progress-group-text">
+                        Friday
+                      </span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="info" value="22" />
+                      <CProgress className="progress-xs" color="danger" value="73" />
+                    </div>
+                  </div>
+                  <div className="progress-group mb-4">
+                    <div className="progress-group-prepend">
+                      <span className="progress-group-text">
+                        Saturday
+                      </span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="info" value="53" />
+                      <CProgress className="progress-xs" color="danger" value="82" />
+                    </div>
+                  </div>
+                  <div className="progress-group mb-4">
+                    <div className="progress-group-prepend">
+                      <span className="progress-group-text">
+                        Sunday
+                      </span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="info" value="9" />
+                      <CProgress className="progress-xs" color="danger" value="69" />
+                    </div>
+                  </div>
+                  <div className="legend text-center">
+                    <small>
+                      <sup className="px-1"><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
+                      New clients
+                      &nbsp;
+                      <sup className="px-1"><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
+                      Recurring clients
+                    </small>
+                  </div>
+                </CCol>
+
+                <CCol xs="12" md="6" xl="6">
+
+                  <CRow>
+                    <CCol sm="6">
+                      <CCallout color="warning">
+                        <small className="text-muted">Pageviews</small>
+                        <br />
+                        <strong className="h4">78,623</strong>
+                      </CCallout>
+                    </CCol>
+                    <CCol sm="6">
+                      <CCallout color="success">
+                        <small className="text-muted">Organic</small>
+                        <br />
+                        <strong className="h4">49,123</strong>
+                      </CCallout>
+                    </CCol>
+                  </CRow>
+
+                  <hr className="mt-0" />
+
+                  <div className="progress-group mb-4">
+                    <div className="progress-group-header">
+                      <CIcon className="progress-group-icon" name="cil-user" />
+                      <span className="title">Male</span>
+                      <span className="ml-auto font-weight-bold">43%</span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="warning" value="43" />
+                    </div>
+                  </div>
+                  <div className="progress-group mb-5">
+                    <div className="progress-group-header">
+                      <CIcon className="progress-group-icon" name="cil-user-female" />
+                      <span className="title">Female</span>
+                      <span className="ml-auto font-weight-bold">37%</span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="warning" value="37" />
+                    </div>
+                  </div>
+                  <div className="progress-group">
+                    <div className="progress-group-header">
+                      <CIcon className="progress-group-icon" name="cil-globe-alt" />
+                      <span className="title">Organic Search</span>
+                      <span className="ml-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="success" value="56" />
+                    </div>
+                  </div>
+
+
+                  <div className="progress-group">
+                    <div className="progress-group-header">
+                      <CIcon name="cib-facebook" className="progress-group-icon" />
+                      <span className="title">Facebook</span>
+                      <span className="ml-auto font-weight-bold">51,223 <span className="text-muted small">(15%)</span></span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="success" value="15" />
+                    </div>
+                  </div>
+                  <div className="progress-group">
+                    <div className="progress-group-header">
+                      <CIcon name="cib-twitter" className="progress-group-icon" />
+                      <span className="title">Twitter</span>
+                      <span className="ml-auto font-weight-bold">37,564 <span className="text-muted small">(11%)</span></span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="success" value="11" />
+                    </div>
+                  </div>
+                  <div className="progress-group">
+                    <div className="progress-group-header">
+                      <CIcon name="cib-linkedin" className="progress-group-icon" />
+                      <span className="title">LinkedIn</span>
+                      <span className="ml-auto font-weight-bold">27,319 <span className="text-muted small">(8%)</span></span>
+                    </div>
+                    <div className="progress-group-bars">
+                      <CProgress className="progress-xs" color="success" value="8" />
+                    </div>
+                  </div>
+                  <div className="divider text-center">
+                    <CButton color="link" size="sm" className="text-muted">
+                      <CIcon name="cil-options" />
+                    </CButton>
+                  </div>
+
+                </CCol>
+              </CRow>
+              <div code="br-hidechildren">
+                <br />
+                <button onClick={PDFEngine}>Test</button>
+                <button>Test button 2</button>
+                <p className="br-color">Title</p>
+                <p className="br-color">first row</p>
+                <table className="table table-hover table-outline mb-0 d-sm-table br-bordercolor" >
+                  <thead className="thead-light">
+                    <tr>
+                      <th className="text-center"><CIcon name="cil-people" /></th>
+                      <th>User</th>
+                      <th className="text-center">Country</th>
+                      <th>Usage</th>
+                      <th className="text-center">Payment Method</th>
+                      <th>Activity</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td className="text-center">
+                        <div className="c-avatar">
+                          <img src={'avatars/1.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
+                          <span className="c-avatar-status bg-success"></span>
+                        </div>
+                      </td>
+                      <td>
+                        <div>Yiorgos Avraamu</div>
+                        <div className="small text-muted">
+                          <span>New</span> | Registered: Jan 1, 2015
+                        </div>
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cif-us" title="us" id="us" />
+                      </td>
+                      <td>
+                        <div className="clearfix">
+                          <div className="float-left">
+                            <strong>50%</strong>
+                          </div>
+                          <div className="float-right">
+                            <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+                          </div>
+                        </div>
+                        <CProgress className="progress-xs" color="success" value="50" />
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cib-cc-mastercard" />
+                      </td>
+                      <td>
+                        <div className="small text-muted">Last login</div>
+                        <strong>10 sec ago</strong>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="text-center">
+                        <div className="c-avatar">
+                          <img src={'avatars/2.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
+                          <span className="c-avatar-status bg-danger"></span>
+                        </div>
+                      </td>
+                      <td>
+                        <div>Avram Tarasios</div>
+                        <div className="small text-muted">
+
+                          <span>Recurring</span> | Registered: Jan 1, 2015
+                        </div>
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cif-br" title="br" id="br" />
+                      </td>
+                      <td>
+                        <div className="clearfix">
+                          <div className="float-left">
+                            <strong>10%</strong>
+                          </div>
+                          <div className="float-right">
+                            <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+                          </div>
+                        </div>
+                        <CProgress className="progress-xs" color="info" value="10" />
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cib-cc-visa" />
+                      </td>
+                      <td>
+                        <div className="small text-muted">Last login</div>
+                        <strong>5 minutes ago</strong>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="text-center">
+                        <div className="c-avatar">
+                          <img src={'avatars/3.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
+                          <span className="c-avatar-status bg-warning"></span>
+                        </div>
+                      </td>
+                      <td>
+                        <div>Quintin Ed</div>
+                        <div className="small text-muted">
+                          <span>New</span> | Registered: Jan 1, 2015
+                        </div>
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cif-in" title="in" id="in" />
+                      </td>
+                      <td>
+                        <div className="clearfix">
+                          <div className="float-left">
+                            <strong>74%</strong>
+                          </div>
+                          <div className="float-right">
+                            <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+                          </div>
+                        </div>
+                        <CProgress className="progress-xs" color="warning" value="74" />
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cib-stripe" />
+                      </td>
+                      <td>
+                        <div className="small text-muted">Last login</div>
+                        <strong>1 hour ago</strong>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="text-center">
+                        <div className="c-avatar">
+                          <img src={'avatars/4.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
+                          <span className="c-avatar-status bg-secondary"></span>
+                        </div>
+                      </td>
+                      <td>
+                        <div>Enéas Kwadwo</div>
+                        <div className="small text-muted">
+                          <span>New</span> | Registered: Jan 1, 2015
+                        </div>
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cif-fr" title="fr" id="fr" />
+                      </td>
+                      <td>
+                        <div className="clearfix">
+                          <div className="float-left">
+                            <strong>98%</strong>
+                          </div>
+                          <div className="float-right">
+                            <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+                          </div>
+                        </div>
+                        <CProgress className="progress-xs" color="danger" value="98" />
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cib-paypal" />
+                      </td>
+                      <td>
+                        <div className="small text-muted">Last login</div>
+                        <strong>Last month</strong>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="text-center">
+                        <div className="c-avatar">
+                          <img src={'avatars/5.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
+                          <span className="c-avatar-status bg-success"></span>
+                        </div>
+                      </td>
+                      <td>
+                        <div>Agapetus Tadeáš</div>
+                        <div className="small text-muted">
+                          <span>New</span> | Registered: Jan 1, 2015
+                        </div>
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cif-es" title="es" id="es" />
+                      </td>
+                      <td>
+                        <div className="clearfix">
+                          <div className="float-left">
+                            <strong>22%</strong>
+                          </div>
+                          <div className="float-right">
+                            <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+                          </div>
+                        </div>
+                        <CProgress className="progress-xs" color="info" value="22" />
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cib-google-pay" />
+                      </td>
+                      <td>
+                        <div className="small text-muted">Last login</div>
+                        <strong>Last week</strong>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="text-center">
+                        <div className="c-avatar">
+                          <img src={'avatars/6.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
+                          <span className="c-avatar-status bg-danger"></span>
+                        </div>
+                      </td>
+                      <td>
+                        <div>Friderik Dávid</div>
+                        <div className="small text-muted">
+                          <span>New</span> | Registered: Jan 1, 2015
+                        </div>
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cif-pl" title="pl" id="pl" />
+                      </td>
+                      <td>
+                        <div className="clearfix">
+                          <div className="float-left">
+                            <strong>43%</strong>
+                          </div>
+                          <div className="float-right">
+                            <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+                          </div>
+                        </div>
+                        <CProgress className="progress-xs" color="success" value="43" />
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cib-cc-amex" />
+                      </td>
+                      <td>
+                        <div className="small text-muted">Last login</div>
+                        <strong>Yesterday</strong>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+
+                <table className="table">
+                  <thead className="thead-light">
+                    <tr>
+                      <th className="text-center"><CIcon name="cil-people" /></th>
+                      <th>User</th>
+                      <th className="text-center">Country</th>
+                      <th>Usage</th>
+                      <th className="text-center">Payment Method</th>
+                      <th>Activity</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td className="text-center">
+                        <div className="c-avatar">
+                          <img src={'avatars/1.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
+                          <span className="c-avatar-status bg-success"></span>
+                        </div>
+                      </td>
+                      <td>
+                        <div>Yiorgos Avraamu</div>
+                        <div className="small text-muted">
+                          <span>New</span> | Registered: Jan 1, 2015
+                        </div>
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cif-us" title="us" id="us" />
+                      </td>
+                      <td>
+                        <div className="clearfix">
+                          <div className="float-left">
+                            <strong>50%</strong>
+                          </div>
+                          <div className="float-right">
+                            <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+                          </div>
+                        </div>
+                        <CProgress className="progress-xs" color="success" value="50" />
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cib-cc-mastercard" />
+                      </td>
+                      <td>
+                        <div className="small text-muted">Last login</div>
+                        <strong>10 sec ago</strong>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="text-center">
+                        <div className="c-avatar">
+                          <img src={'avatars/2.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
+                          <span className="c-avatar-status bg-danger"></span>
+                        </div>
+                      </td>
+                      <td>
+                        <div>Avram Tarasios</div>
+                        <div className="small text-muted">
+
+                          <span>Recurring</span> | Registered: Jan 1, 2015
+                        </div>
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cif-br" title="br" id="br" />
+                      </td>
+                      <td>
+                        <div className="clearfix">
+                          <div className="float-left">
+                            <strong>10%</strong>
+                          </div>
+                          <div className="float-right">
+                            <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+                          </div>
+                        </div>
+                        <CProgress className="progress-xs" color="info" value="10" />
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cib-cc-visa" />
+                      </td>
+                      <td>
+                        <div className="small text-muted">Last login</div>
+                        <strong>5 minutes ago</strong>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="text-center">
+                        <div className="c-avatar">
+                          <img src={'avatars/3.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
+                          <span className="c-avatar-status bg-warning"></span>
+                        </div>
+                      </td>
+                      <td>
+                        <div>Quintin Ed</div>
+                        <div className="small text-muted">
+                          <span>New</span> | Registered: Jan 1, 2015
+                        </div>
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cif-in" title="in" id="in" />
+                      </td>
+                      <td>
+                        <div className="clearfix">
+                          <div className="float-left">
+                            <strong>74%</strong>
+                          </div>
+                          <div className="float-right">
+                            <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+                          </div>
+                        </div>
+                        <CProgress className="progress-xs" color="warning" value="74" />
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cib-stripe" />
+                      </td>
+                      <td>
+                        <div className="small text-muted">Last login</div>
+                        <strong>1 hour ago</strong>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="text-center">
+                        <div className="c-avatar">
+                          <img src={'avatars/4.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
+                          <span className="c-avatar-status bg-secondary"></span>
+                        </div>
+                      </td>
+                      <td>
+                        <div>Enéas Kwadwo</div>
+                        <div className="small text-muted">
+                          <span>New</span> | Registered: Jan 1, 2015
+                        </div>
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cif-fr" title="fr" id="fr" />
+                      </td>
+                      <td>
+                        <div className="clearfix">
+                          <div className="float-left">
+                            <strong>98%</strong>
+                          </div>
+                          <div className="float-right">
+                            <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+                          </div>
+                        </div>
+                        <CProgress className="progress-xs" color="danger" value="98" />
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cib-paypal" />
+                      </td>
+                      <td>
+                        <div className="small text-muted">Last login</div>
+                        <strong>Last month</strong>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="text-center">
+                        <div className="c-avatar">
+                          <img src={'avatars/5.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
+                          <span className="c-avatar-status bg-success"></span>
+                        </div>
+                      </td>
+                      <td>
+                        <div>Agapetus Tadeáš</div>
+                        <div className="small text-muted">
+                          <span>New</span> | Registered: Jan 1, 2015
+                        </div>
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cif-es" title="es" id="es" />
+                      </td>
+                      <td>
+                        <div className="clearfix">
+                          <div className="float-left">
+                            <strong>22%</strong>
+                          </div>
+                          <div className="float-right">
+                            <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+                          </div>
+                        </div>
+                        <CProgress className="progress-xs" color="info" value="22" />
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cib-google-pay" />
+                      </td>
+                      <td>
+                        <div className="small text-muted">Last login</div>
+                        <strong>Last week</strong>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="text-center">
+                        <div className="c-avatar">
+                          <img src={'avatars/6.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
+                          <span className="c-avatar-status bg-danger"></span>
+                        </div>
+                      </td>
+                      <td>
+                        <div>Friderik Dávid</div>
+                        <div className="small text-muted">
+                          <span>New</span> | Registered: Jan 1, 2015
+                        </div>
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cif-pl" title="pl" id="pl" />
+                      </td>
+                      <td>
+                        <div className="clearfix">
+                          <div className="float-left">
+                            <strong>43%</strong>
+                          </div>
+                          <div className="float-right">
+                            <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+                          </div>
+                        </div>
+                        <CProgress className="progress-xs" color="success" value="43" />
+                      </td>
+                      <td className="text-center">
+                        <CIcon height={25} name="cib-cc-amex" />
+                      </td>
+                      <td>
+                        <div className="small text-muted">Last login</div>
+                        <strong>Yesterday</strong>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+    </>
+  )
+}
+
+export default Dashboard