From b26277a67f9f0fcdd7ba832b93f24b6b9048719d Mon Sep 17 00:00:00 2001
From: Viktor Kuzhelnyi <viktor@marketto.ru>
Date: Wed, 14 Sep 2022 16:13:51 +0500
Subject: [PATCH] add: dashboard page & other logic

---
 components/AsideMenu.tsx                  |  17 +-
 components/AsideMenuItem.tsx              |  53 +++-
 components/AsideMenuLayer.tsx             |  15 +-
 components/AsideMenuList.tsx              |   4 +-
 components/BaseButton.tsx                 |  44 ++--
 components/BaseButtons.tsx                |  25 +-
 components/BaseDivider.tsx                |   2 +-
 components/BaseIcon.tsx                   |  18 +-
 components/BaseLevel.tsx                  |  16 +-
 components/CardBox.tsx                    |  32 +--
 components/CardBoxClient.tsx              |  50 ++++
 components/CardBoxComponentBody.tsx       |   6 +-
 components/CardBoxComponentFooter.tsx     |   2 +-
 components/CardBoxTransaction.tsx         |  57 ++++
 components/CardBoxWIdget.tsx              |  61 +++++
 components/IconRounded.tsx                |  10 +-
 components/NavBar.tsx                     |   9 +-
 components/NavBarItem.tsx                 |  16 +-
 components/NavBarItemPlain.tsx            |  21 +-
 components/NavBarMenuList.tsx             |   9 +-
 components/NotificationBar.tsx            |  58 ++++
 components/NumberDynamic.tsx              |  52 ++++
 components/OverlayLayer.tsx               |  21 +-
 components/PillTag.tsx                    |  28 ++
 components/PillTagPlain.tsx               |  32 +++
 components/PillTagTrend.tsx               |  34 +++
 components/SectionBanner.tsx              |  14 +
 components/SectionBannerStarOnGitHub.tsx  |  26 ++
 components/SectionFullScreen.tsx          |   2 +-
 components/SectionTitleLineWithButton.tsx |   6 +-
 components/TableSampleClients.tsx         |  96 +++++++
 components/UserAvatar.tsx                 |  25 +-
 components/UserAvatarCurrentUser.tsx      |   4 +-
 components/charts/LineSample.tsx          |  37 +++
 components/charts/config.ts               |  54 ++++
 components/globals/DarkMode.tsx           |  17 +-
 components/globals/Style.tsx              |  17 +-
 components/justboil/Logo.tsx              |   2 +-
 components/layouts/Authenticated.tsx      |  37 +--
 hooks/sampleData.ts                       |  24 ++
 interfaces/index.ts                       |  72 +++--
 next.config.mjs                           |   8 -
 package-lock.json                         | 308 +++++++++++++---------
 package.json                              |  10 +-
 pages/_app.tsx                            |   2 +-
 pages/dashboard.tsx                       | 136 ++++++++++
 pages/{Error.tsx => error.tsx}            |   0
 pages/index.tsx                           |  80 ++++--
 postcss.config.js                         |   1 +
 public/data-sources/clients.json          |   1 +
 public/data-sources/history.json          |   1 +
 src/config.ts                             |   4 +-
 src/menuNavBar.ts                         |   2 +-
 src/stores/hooks.ts                       |   2 +-
 src/stores/mainSlice.ts                   |  16 +-
 src/stores/store.ts                       |   2 +-
 src/stores/styleSlice.ts                  |  53 ++--
 src/styles.ts                             |  20 +-
 styles/_checkbox-radio-switch.css         | 120 +++++----
 styles/_progress.css                      |  38 +--
 styles/_scrollbars.css                    |  96 +++----
 styles/_table.css                         |  92 +++----
 tailwind.config.js                        |   6 +-
 63 files changed, 1550 insertions(+), 573 deletions(-)
 create mode 100644 components/CardBoxClient.tsx
 create mode 100644 components/CardBoxTransaction.tsx
 create mode 100644 components/NotificationBar.tsx
 create mode 100644 components/NumberDynamic.tsx
 create mode 100644 components/PillTag.tsx
 create mode 100644 components/PillTagPlain.tsx
 create mode 100644 components/PillTagTrend.tsx
 create mode 100644 components/SectionBanner.tsx
 create mode 100644 components/SectionBannerStarOnGitHub.tsx
 create mode 100644 components/TableSampleClients.tsx
 create mode 100644 components/charts/LineSample.tsx
 create mode 100644 components/charts/config.ts
 create mode 100644 hooks/sampleData.ts
 create mode 100644 pages/dashboard.tsx
 rename pages/{Error.tsx => error.tsx} (100%)
 create mode 100644 public/data-sources/clients.json
 create mode 100644 public/data-sources/history.json

diff --git a/components/AsideMenu.tsx b/components/AsideMenu.tsx
index f32d31d..275a17a 100644
--- a/components/AsideMenu.tsx
+++ b/components/AsideMenu.tsx
@@ -1,21 +1,30 @@
 import React from 'react'
+import { MenuAsideItem } from '../interfaces'
 import AsideMenuLayer from './AsideMenuLayer'
 import OverlayLayer from './OverlayLayer'
 
+type Props = {
+  menu: MenuAsideItem[]
+  isAsideMobileExpanded: boolean
+  isAsideLgActive: boolean
+  onAsideLgClose: Function
+}
+
 export default function AsideMenu({
-  menu,
   isAsideMobileExpanded = false,
   isAsideLgActive = false,
-}) {
+  ...props
+}: Props) {
   return (
     <>
       <AsideMenuLayer
-        menu={menu}
+        menu={props.menu}
         className={`${isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0'} ${
           !isAsideLgActive ? 'lg:hidden xl:flex' : ''
         }`}
+        onAsideLgCloseClick={props.onAsideLgClose}
       />
-      {isAsideLgActive && <OverlayLayer zIndex="z-30" />}
+      {isAsideLgActive && <OverlayLayer zIndex="z-30" onClick={props.onAsideLgClose} />}
     </>
   )
 }
diff --git a/components/AsideMenuItem.tsx b/components/AsideMenuItem.tsx
index 21131d0..54e0697 100644
--- a/components/AsideMenuItem.tsx
+++ b/components/AsideMenuItem.tsx
@@ -1,5 +1,4 @@
-
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { mdiMinus, mdiPlus } from '@mdi/js'
 import BaseIcon from './BaseIcon'
 import Link from 'next/link'
@@ -7,25 +6,55 @@ import { getButtonColor } from '../src/colors'
 import AsideMenuList from './AsideMenuList'
 import { MenuAsideItem } from '../interfaces'
 import { useAppSelector } from '../src/stores/hooks'
+import { useRouter } from 'next/router'
 
 type Props = {
-  item: MenuAsideItem,
+  item: MenuAsideItem
   isDropdownList?: boolean
 }
 
-export default function AsideMenuItem({ item, isDropdownList = false }: Props) {
+const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
+  const [isLinkActive, setIsLinkActive] = useState(false)
   const [isDropdownActive, setIsDropdownActive] = useState(false)
+
   const asideMenuItemStyle = useAppSelector((state) => state.style.asideMenuItemStyle)
   const asideMenuDropdownStyle = useAppSelector((state) => state.style.asideMenuDropdownStyle)
+  const asideMenuItemActiveStyle = useAppSelector((state) => state.style.asideMenuItemActiveStyle)
+
+  const activeClassAddon = !item.color && isLinkActive ? asideMenuItemActiveStyle : ''
+
+  const { asPath, isReady } = useRouter()
+
+  useEffect(() => {
+    if (item.href && isReady) {
+      const linkPathName = new URL(item.href, location.href).pathname
+
+      const activePathname = new URL(asPath, location.href).pathname
+
+      if (linkPathName === activePathname) {
+        setIsLinkActive(true)
+      }
+    }
+  })
 
   const asideMenuItemInnerContents = (
     <>
-      {item.icon && <BaseIcon path={item.icon} className="flex-none" w="w-16" size="18" />}
-      <span className={`grow text-ellipsis line-clamp-1 ${item.menu ? '' : 'pr-12'}`}>
+      {item.icon && (
+        <BaseIcon path={item.icon} className={`flex-none ${activeClassAddon}`} w="w-16" size="18" />
+      )}
+      <span
+        className={`grow text-ellipsis line-clamp-1 ${
+          item.menu ? '' : 'pr-12'
+        } ${activeClassAddon}`}
+      >
         {item.label}
       </span>
       {item.menu && (
-        <BaseIcon path={isDropdownActive ? mdiMinus : mdiPlus} className="flex-none" w="w-12" />
+        <BaseIcon
+          path={isDropdownActive ? mdiMinus : mdiPlus}
+          className={`flex-none ${activeClassAddon}`}
+          w="w-12"
+        />
       )}
     </>
   )
@@ -41,11 +70,15 @@ export default function AsideMenuItem({ item, isDropdownList = false }: Props) {
   return (
     <li>
       {item.href && (
-        <Link href={item.href} target={item.target}>
+        <Link href={item.href} target={item.target} passHref>
           <a className={componentClass}>{asideMenuItemInnerContents}</a>
         </Link>
       )}
-      {!item.href && <div className={componentClass}>{asideMenuItemInnerContents}</div>}
+      {!item.href && (
+        <div className={componentClass} onClick={() => setIsDropdownActive(!isDropdownActive)}>
+          {asideMenuItemInnerContents}
+        </div>
+      )}
       {item.menu && (
         <AsideMenuList
           menu={item.menu}
@@ -58,3 +91,5 @@ export default function AsideMenuItem({ item, isDropdownList = false }: Props) {
     </li>
   )
 }
+
+export default AsideMenuItem
diff --git a/components/AsideMenuLayer.tsx b/components/AsideMenuLayer.tsx
index 3ddf6c9..b72ec0b 100644
--- a/components/AsideMenuLayer.tsx
+++ b/components/AsideMenuLayer.tsx
@@ -7,11 +7,12 @@ import { MenuAsideItem } from '../interfaces'
 import { useAppSelector } from '../src/stores/hooks'
 
 type Props = {
-  menu: MenuAsideItem[],
+  menu: MenuAsideItem[]
   className?: string
+  onAsideLgCloseClick: Function
 }
 
-export default function AsideMenuLayer({ menu, className='' }: Props) {
+export default function AsideMenuLayer({ menu, className = '', ...props }: Props) {
   const asideStyle = useAppSelector((state) => state.style.asideStyle)
   const asideBrandStyle = useAppSelector((state) => state.style.asideBrandStyle)
   const asideScrollbarsStyle = useAppSelector((state) => state.style.asideScrollbarsStyle)
@@ -24,6 +25,11 @@ export default function AsideMenuLayer({ menu, className='' }: Props) {
     isLogout: true,
   }
 
+  const handleAsideLgCloseClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    props.onAsideLgCloseClick()
+  }
+
   return (
     <aside
       className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}
@@ -37,7 +43,10 @@ export default function AsideMenuLayer({ menu, className='' }: Props) {
           <div className="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
             <b className="font-black">One</b>
           </div>
-          <button className="hidden lg:inline-block xl:hidden p-3">
+          <button
+            className="hidden lg:inline-block xl:hidden p-3"
+            onClick={handleAsideLgCloseClick}
+          >
             <BaseIcon path={mdiClose} />
           </button>
         </div>
diff --git a/components/AsideMenuList.tsx b/components/AsideMenuList.tsx
index 9b2e702..6e89833 100644
--- a/components/AsideMenuList.tsx
+++ b/components/AsideMenuList.tsx
@@ -3,8 +3,8 @@ import { MenuAsideItem } from '../interfaces'
 import AsideMenuItem from './AsideMenuItem'
 
 type Props = {
-  menu: MenuAsideItem[],
-  isDropdownList?: boolean,
+  menu: MenuAsideItem[]
+  isDropdownList?: boolean
   className?: string
 }
 
diff --git a/components/BaseButton.tsx b/components/BaseButton.tsx
index 0fd5596..8261152 100644
--- a/components/BaseButton.tsx
+++ b/components/BaseButton.tsx
@@ -5,20 +5,22 @@ import BaseIcon from './BaseIcon'
 import { ColorButtonKey } from '../interfaces'
 
 type Props = {
-  label?: string,
-  icon?: string,
-  iconSize?: string|number,
-  href?: string,
-  target?: string,
-  type?: string,
-  color?: ColorButtonKey,
-  className?: string,
-  asAnchor?: boolean,
-  small?: boolean,
-  outline?: boolean,
-  active?: boolean,
-  disabled?: boolean,
+  label?: string
+  icon?: string
+  iconSize?: string | number
+  href?: string
+  target?: string
+  type?: string
+  color?: ColorButtonKey
+  className?: string
+  asAnchor?: boolean
+  small?: boolean
+  outline?: boolean
+  active?: boolean
+  disabled?: boolean
   roundedFull?: boolean
+  isGrouped?: boolean
+  onClick?: Function
 }
 
 export default function BaseButton({
@@ -28,14 +30,16 @@ export default function BaseButton({
   href,
   target,
   type,
-  color='white',
-  className='',
+  color = 'white',
+  className = '',
   asAnchor = false,
   small = false,
   outline = false,
   active = false,
   disabled = false,
   roundedFull = false,
+  isGrouped = false,
+  onClick,
 }: Props) {
   const componentClass = [
     'inline-flex',
@@ -65,6 +69,10 @@ export default function BaseButton({
     componentClass.push(outline ? 'opacity-50' : 'opacity-70')
   }
 
+  if (isGrouped) {
+    componentClass.push('mr-3 last:mr-0 mb-3')
+  }
+
   const componentClassString = componentClass.join(' ')
 
   const componentChildren = (
@@ -77,16 +85,14 @@ export default function BaseButton({
   if (href && !disabled) {
     return (
       <Link href={href} target={target} passHref>
-        <a className={componentClassString}>
-          {componentChildren}
-        </a>
+        <a className={componentClassString}>{componentChildren}</a>
       </Link>
     )
   }
 
   return React.createElement(
     asAnchor ? 'a' : 'button',
-    { className: componentClassString, type: type ?? 'button', target, disabled },
+    { className: componentClassString, type: type ?? 'button', target, disabled, onClick },
     componentChildren
   )
 }
diff --git a/components/BaseButtons.tsx b/components/BaseButtons.tsx
index 4339d6e..8166c8e 100644
--- a/components/BaseButtons.tsx
+++ b/components/BaseButtons.tsx
@@ -1,19 +1,18 @@
-import React, { ReactNode } from 'react'
+import React, { Children, cloneElement, ReactNode } from 'react'
 
 type Props = {
-  type?: string,
-  mb?: string,
-  noWrap: boolean,
+  type?: string
+  mb?: string
+  noWrap?: boolean
   children: ReactNode
 }
 
-export default function BaseButtons({
-  type = 'justify-start',
-  mb = '-mb-3',
-  noWrap = false,
-  children,
-}: Props) {
-  const parentClass = `flex items-center ${type} ${mb} ${noWrap ? 'flex-nowrap' : 'flex-wrap'}`
-
-  return <div className={parentClass}>{children}</div>
+const BaseButtons = ({ type = 'justify-start', mb = '-mb-3', noWrap = false, children }: Props) => {
+  return (
+    <div className={`flex items-center ${type} ${mb} ${noWrap ? 'flex-nowrap' : 'flex-wrap'}`}>
+      {children}
+    </div>
+  )
 }
+
+export default BaseButtons
diff --git a/components/BaseDivider.tsx b/components/BaseDivider.tsx
index 6d2f00b..12addb1 100644
--- a/components/BaseDivider.tsx
+++ b/components/BaseDivider.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React from 'react'
 
 type Props = {
   navBar?: boolean
diff --git a/components/BaseIcon.tsx b/components/BaseIcon.tsx
index f5059dd..56ae5ff 100644
--- a/components/BaseIcon.tsx
+++ b/components/BaseIcon.tsx
@@ -1,14 +1,20 @@
-import React from "react"
+import React from 'react'
 
 type Props = {
-  path: string,
-  w?: string,
-  h?: string,
-  size?: string|number|null,
+  path: string
+  w?: string
+  h?: string
+  size?: string | number | null
   className?: string
 }
 
-export default function BaseIcon({ path, w = 'w-6', h = 'h-6', size=null, className='' }: Props) {
+export default function BaseIcon({
+  path,
+  w = 'w-6',
+  h = 'h-6',
+  size = null,
+  className = '',
+}: Props) {
   const iconSize = size ?? 16
 
   return (
diff --git a/components/BaseLevel.tsx b/components/BaseLevel.tsx
index 828040a..dc6e839 100644
--- a/components/BaseLevel.tsx
+++ b/components/BaseLevel.tsx
@@ -1,12 +1,18 @@
-import React, { ReactNode } from "react"
+import React, { ReactNode } from 'react'
 
 type Props = {
-  mobile?: boolean,
-  type?: string,
+  mobile?: boolean
+  type?: string
+  className?: string
   children?: ReactNode
 }
 
-export default function BaseLevel({ mobile = false, type = 'justify-between', children }: Props) {
+export default function BaseLevel({
+  mobile = false,
+  type = 'justify-between',
+  className = '',
+  children,
+}: Props) {
   const parentClass = `${type} items-center`
 
   const parentMobileClass = 'flex'
@@ -14,7 +20,7 @@ export default function BaseLevel({ mobile = false, type = 'justify-between', ch
   const parentBaseClass = 'block md:flex'
 
   return (
-    <div className={`${parentClass} ${mobile ? parentMobileClass : parentBaseClass}`}>
+    <div className={`${parentClass} ${className} ${mobile ? parentMobileClass : parentBaseClass}`}>
       {children}
     </div>
   )
diff --git a/components/CardBox.tsx b/components/CardBox.tsx
index 5dc270e..1c58d76 100644
--- a/components/CardBox.tsx
+++ b/components/CardBox.tsx
@@ -3,29 +3,31 @@ import CardBoxComponentBody from './CardBoxComponentBody'
 import CardBoxComponentFooter from './CardBoxComponentFooter'
 
 type Props = {
-  rounded?: string,
-  flex?: string,
-  className?: string,
-  hasComponentLayout?: boolean,
-  hasTable?: boolean,
-  isForm?: boolean,
-  isHoverable?: boolean,
-  isModal?: boolean,
-  children: ReactNode,
+  rounded?: string
+  flex?: string
+  className?: string
+  hasComponentLayout?: boolean
+  hasTable?: boolean
+  isForm?: boolean
+  isHoverable?: boolean
+  isModal?: boolean
+  children: ReactNode
   footer?: ReactNode
+  onClick?: Function
 }
 
 export default function CardBox({
   rounded = 'rounded-2xl',
   flex = 'flex-col',
   className = '',
-  hasComponentLayout=false,
-  hasTable=false,
-  isForm=false,
-  isHoverable=false,
-  isModal=false,
+  hasComponentLayout = false,
+  hasTable = false,
+  isForm = false,
+  isHoverable = false,
+  isModal = false,
   children,
   footer,
+  onClick,
 }: Props) {
   const componentClass = [
     'bg-white flex',
@@ -41,7 +43,7 @@ export default function CardBox({
 
   return React.createElement(
     isForm ? 'form' : 'div',
-    { className: componentClass.join(' ') },
+    { className: componentClass.join(' '), onClick },
     hasComponentLayout ? (
       children
     ) : (
diff --git a/components/CardBoxClient.tsx b/components/CardBoxClient.tsx
new file mode 100644
index 0000000..0adfe22
--- /dev/null
+++ b/components/CardBoxClient.tsx
@@ -0,0 +1,50 @@
+import { mdiTrendingDown, mdiTrendingNeutral, mdiTrendingUp } from '@mdi/js'
+import React from 'react'
+import { Client, ColorKey } from '../interfaces'
+import BaseLevel from './BaseLevel'
+import CardBox from './CardBox'
+import PillTag from './PillTag'
+import UserAvatar from './UserAvatar'
+
+type Props = {
+  client: Client
+}
+
+const CardBoxClient = (props: Props) => {
+  const pillColor = () => {
+    if (props.client.progress >= 60) {
+      return 'success'
+    }
+    if (props.client.progress >= 40) {
+      return 'warning'
+    }
+
+    return 'danger'
+  }
+
+  const pillIcon = {
+    success: mdiTrendingUp,
+    warning: mdiTrendingNeutral,
+    danger: mdiTrendingDown,
+  }[pillColor()]
+
+  return (
+    <CardBox className="mb-6 last:mb-0">
+      <BaseLevel>
+        <BaseLevel type="justify-start">
+          <UserAvatar className="w-12 h-12 mr-6" username={props.client.name} />
+          <div className="text-center md:text-left overflow-hidden">
+            <h4 className="text-xl text-ellipsis">{props.client.name}</h4>
+            <p className="text-gray-500 dark:text-slate-400">
+              {props.client.created} @ {props.client.login}
+            </p>
+          </div>
+        </BaseLevel>
+
+        <PillTag color={pillColor()} icon={pillIcon} label={`${props.client.progress}%`} />
+      </BaseLevel>
+    </CardBox>
+  )
+}
+
+export default CardBoxClient
diff --git a/components/CardBoxComponentBody.tsx b/components/CardBoxComponentBody.tsx
index 583040c..0be6338 100644
--- a/components/CardBoxComponentBody.tsx
+++ b/components/CardBoxComponentBody.tsx
@@ -1,10 +1,10 @@
-import React, { ReactNode } from "react"
+import React, { ReactNode } from 'react'
 
 type Props = {
-  noPadding?: boolean,
+  noPadding?: boolean
   children?: ReactNode
 }
 
-export default function CardBoxComponentBody({ noPadding=false, children }: Props) {
+export default function CardBoxComponentBody({ noPadding = false, children }: Props) {
   return <div className={`flex-1 ${noPadding ? '' : 'p-6'}`}>{children}</div>
 }
diff --git a/components/CardBoxComponentFooter.tsx b/components/CardBoxComponentFooter.tsx
index 0b7041e..ba07202 100644
--- a/components/CardBoxComponentFooter.tsx
+++ b/components/CardBoxComponentFooter.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react"
+import React, { ReactNode } from 'react'
 
 type Props = {
   children?: ReactNode
diff --git a/components/CardBoxTransaction.tsx b/components/CardBoxTransaction.tsx
new file mode 100644
index 0000000..53c2516
--- /dev/null
+++ b/components/CardBoxTransaction.tsx
@@ -0,0 +1,57 @@
+import { mdiCashMinus, mdiCashPlus, mdiCreditCard, mdiReceipt } from '@mdi/js'
+import React from 'react'
+import { ColorKey, Transaction } from '../interfaces'
+import BaseLevel from './BaseLevel'
+import CardBox from './CardBox'
+import IconRounded from './IconRounded'
+import PillTag from './PillTag'
+
+type Props = {
+  transaction: Transaction
+}
+
+const CardBoxTransaction = (props: Props) => {
+  const icon = {
+    withdraw: mdiCashMinus,
+    deposit: mdiCashPlus,
+    invoice: mdiReceipt,
+    payment: mdiCreditCard,
+  }[props.transaction.type]
+
+  const typeColor = () => {
+    switch (props.transaction.type) {
+      case 'withdraw':
+        return 'danger'
+      case 'deposit':
+        return 'success'
+      case 'invoice':
+        return 'warning'
+      case 'payment':
+        return 'info'
+    }
+  }
+
+  return (
+    <CardBox className="mb-6 last:mb-0">
+      <BaseLevel>
+        <BaseLevel type="justify-start">
+          <IconRounded icon={icon} color={typeColor()} className="md:mr-6" />
+          <div className="text-center space-y-1 md:text-left md:mr-6">
+            <h4 className="text-xl">{props.transaction.amount}</h4>
+            <p className="text-gray-500 dark:text-slate-400">
+              <b>{props.transaction.date}</b> via {props.transaction.business}
+            </p>
+          </div>
+        </BaseLevel>
+        <div className="text-center md:text-right space-y-2">
+          <p className="text-sm text-gray-500">{props.transaction.name}</p>
+          <div>
+            <PillTag color={typeColor()} label={props.transaction.type} small />
+          </div>
+        </div>
+      </BaseLevel>
+    </CardBox>
+  )
+}
+
+export default CardBoxTransaction
diff --git a/components/CardBoxWIdget.tsx b/components/CardBoxWIdget.tsx
index e69de29..120ee95 100644
--- a/components/CardBoxWIdget.tsx
+++ b/components/CardBoxWIdget.tsx
@@ -0,0 +1,61 @@
+import { mdiCog } from '@mdi/js'
+import React from 'react'
+import { ColorKey, TrendType } from '../interfaces'
+import { colorsText } from '../src/colors'
+import BaseButton from './BaseButton'
+import BaseIcon from './BaseIcon'
+import BaseLevel from './BaseLevel'
+import CardBox from './CardBox'
+import NumberDynamic from './NumberDynamic'
+import PillTagTrend from './PillTagTrend'
+
+type Props = {
+  number: number
+  numberPrefix?: string
+  numberSuffix?: string
+  icon: string
+  iconColor: ColorKey
+  label: string
+  trendLabel?: string
+  trendType?: TrendType
+  trendColor?: ColorKey
+}
+
+const CardBoxWidget = (props: Props) => {
+  return (
+    <CardBox>
+      {props.trendLabel && props.trendType && props.trendColor && (
+        <BaseLevel className="mb-3" mobile>
+          <PillTagTrend
+            label={props.trendLabel}
+            type={props.trendType}
+            color={props.trendColor}
+            small
+          />
+          <BaseButton icon={mdiCog} color="lightDark" small />
+        </BaseLevel>
+      )}
+      <BaseLevel mobile>
+        <div>
+          <h3 className="text-lg leading-tight text-gray-500 dark:text-slate-400">{props.label}</h3>
+          <h1 className="text-3xl leading-tight font-semibold">
+            {props.numberPrefix}
+            {props.number}
+            {props.numberSuffix}
+          </h1>
+        </div>
+        {props.icon && (
+          <BaseIcon
+            path={props.icon}
+            size="48"
+            w=""
+            h="h-16"
+            className={colorsText[props.iconColor]}
+          />
+        )}
+      </BaseLevel>
+    </CardBox>
+  )
+}
+
+export default CardBoxWidget
diff --git a/components/IconRounded.tsx b/components/IconRounded.tsx
index 16d30ec..f2343e4 100644
--- a/components/IconRounded.tsx
+++ b/components/IconRounded.tsx
@@ -4,11 +4,11 @@ import { colorsBgLight, colorsText } from '../src/colors'
 import BaseIcon from './BaseIcon'
 
 type Props = {
-  icon: string,
-  color: ColorKey,
-  w?: string,
-  h?: string,
-  bg?: boolean,
+  icon: string
+  color: ColorKey
+  w?: string
+  h?: string
+  bg?: boolean
   className?: string
 }
 
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 31cb638..22b9952 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -7,13 +7,12 @@ import NavBarMenuList from './NavBarMenuList'
 import { MenuNavBarItem } from '../interfaces'
 
 type Props = {
-  menu: MenuNavBarItem[],
-  handleMenuClick: Function,
-  className: string,
+  menu: MenuNavBarItem[]
+  className: string
   children: ReactNode
 }
 
-export default function NavBar({ menu, handleMenuClick, className='', children }: Props) {
+export default function NavBar({ menu, className = '', children }: Props) {
   const [isMenuNavBarActive, setIsMenuNavBarActive] = useState(false)
 
   const handleMenuNavBarToggleClick = (e: MouseEvent) => {
@@ -38,7 +37,7 @@ export default function NavBar({ menu, handleMenuClick, className='', children }
             isMenuNavBarActive ? 'block' : 'hidden'
           } max-h-screen-menu overflow-y-auto lg:overflow-visible absolute w-screen top-14 left-0 bg-gray-50 shadow-lg lg:w-auto lg:flex lg:static lg:shadow-none dark:bg-slate-800`}
         >
-          <NavBarMenuList menu={menu} onClick={handleMenuClick} />
+          <NavBarMenuList menu={menu} />
         </div>
       </div>
     </nav>
diff --git a/components/NavBarItem.tsx b/components/NavBarItem.tsx
index 0779ae6..08c1734 100644
--- a/components/NavBarItem.tsx
+++ b/components/NavBarItem.tsx
@@ -6,15 +6,17 @@ import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
 import UserAvatarCurrentUser from './UserAvatarCurrentUser'
 import NavBarMenuList from './NavBarMenuList'
-import { useAppSelector } from '../src/stores/hooks'
+import { useAppDispatch, useAppSelector } from '../src/stores/hooks'
 import { MenuNavBarItem } from '../interfaces'
+import { setDarkMode } from '../src/stores/styleSlice'
 
 type Props = {
-  item: MenuNavBarItem,
-  onClick: Function,
+  item: MenuNavBarItem
 }
 
-export default function NavBarItem({ item, onClick }: Props) {
+export default function NavBarItem({ item }: Props) {
+  const dispatch = useAppDispatch()
+
   const navBarItemLabelActiveColorStyle = useAppSelector(
     (state) => state.style.navBarItemLabelActiveColorStyle
   )
@@ -38,11 +40,11 @@ export default function NavBarItem({ item, onClick }: Props) {
 
   const handleMenuClick = (e: React.MouseEvent) => {
     if (item.menu) {
-      setIsDropdownActive(!isDropdownActive);
+      setIsDropdownActive(!isDropdownActive)
     }
 
-    if (onClick) {
-      onClick(e);
+    if (item.isToggleLightDark) {
+      dispatch(setDarkMode(null))
     }
   }
 
diff --git a/components/NavBarItemPlain.tsx b/components/NavBarItemPlain.tsx
index 6e85034..c1a888f 100644
--- a/components/NavBarItemPlain.tsx
+++ b/components/NavBarItemPlain.tsx
@@ -2,13 +2,18 @@ import React, { ReactNode } from 'react'
 import { useAppSelector } from '../src/stores/hooks'
 
 type Props = {
-  display?: string,
-  useMargin?: boolean,
-  children: ReactNode,
+  display?: string
+  useMargin?: boolean
+  children: ReactNode
   onClick?: Function
 }
 
-export default function NavBarItemPlain({ display = 'flex', useMargin = false, onClick, children }: Props) {
+export default function NavBarItemPlain({
+  display = 'flex',
+  useMargin = false,
+  onClick,
+  children,
+}: Props) {
   const navBarItemLabelStyle = useAppSelector((state) => state.style.navBarItemLabelStyle)
   const navBarItemLabelHoverStyle = useAppSelector((state) => state.style.navBarItemLabelHoverStyle)
 
@@ -19,9 +24,13 @@ export default function NavBarItemPlain({ display = 'flex', useMargin = false, o
 
   const handleClick = (e: React.MouseEvent) => {
     if (onClick) {
-      onClick(e);
+      onClick(e)
     }
   }
 
-  return <div className={`${classBase} ${classAddon}`} onClick={handleClick}>{children}</div>
+  return (
+    <div className={`${classBase} ${classAddon}`} onClick={handleClick}>
+      {children}
+    </div>
+  )
 }
diff --git a/components/NavBarMenuList.tsx b/components/NavBarMenuList.tsx
index dfe83e3..597d8d2 100644
--- a/components/NavBarMenuList.tsx
+++ b/components/NavBarMenuList.tsx
@@ -3,14 +3,15 @@ import { MenuNavBarItem } from '../interfaces'
 import NavBarItem from './NavBarItem'
 
 type Props = {
-  menu: MenuNavBarItem[],
-  onClick?: Function
+  menu: MenuNavBarItem[]
 }
 
-export default function NavBarMenuList({ menu, onClick }: Props) {
+export default function NavBarMenuList({ menu }: Props) {
   return (
     <>
-      {menu.map((item, index) => <NavBarItem key={index} item={item} onClick={onClick} />)}
+      {menu.map((item, index) => (
+        <NavBarItem key={index} item={item} />
+      ))}
     </>
   )
 }
diff --git a/components/NotificationBar.tsx b/components/NotificationBar.tsx
new file mode 100644
index 0000000..2ee6389
--- /dev/null
+++ b/components/NotificationBar.tsx
@@ -0,0 +1,58 @@
+import { mdiClose } from '@mdi/js'
+import React, { ReactNode, useState } from 'react'
+import { ColorKey } from '../interfaces'
+import { colorsBgLight, colorsOutline } from '../src/colors'
+import BaseButton from './BaseButton'
+import BaseIcon from './BaseIcon'
+import BaseLevel from './BaseLevel'
+
+type Props = {
+  color: ColorKey
+  icon?: string
+  outline?: boolean
+  children: ReactNode
+  button?: ReactNode
+}
+
+const NotificationBar = ({ outline = false, children, ...props }: Props) => {
+  const componentColorClass = outline ? colorsOutline[props.color] : colorsBgLight[props.color]
+
+  const [isDismissed, setIsDismissed] = useState(false)
+
+  const dismiss = (e: React.MouseEvent) => {
+    e.preventDefault()
+
+    setIsDismissed(true)
+  }
+
+  if (isDismissed) {
+    return null
+  }
+
+  return (
+    <div
+      className={`px-3 py-6 md:py-3 mb-6 last:mb-0 border rounded-lg transition-colors duration-150 ${componentColorClass}`}
+    >
+      <BaseLevel>
+        <div className="flex flex-col md:flex-row items-center">
+          {props.icon && (
+            <BaseIcon
+              path={props.icon}
+              w="w-10 md:w-5"
+              h="h-10 md:h-5"
+              size="24"
+              className="md:mr-2"
+            />
+          )}
+          <span className="text-center md:text-left md:py-2">{children}</span>
+        </div>
+        {props.button}
+        {!props.button && (
+          <BaseButton icon={mdiClose} color="white" onClick={dismiss} small roundedFull />
+        )}
+      </BaseLevel>
+    </div>
+  )
+}
+
+export default NotificationBar
diff --git a/components/NumberDynamic.tsx b/components/NumberDynamic.tsx
new file mode 100644
index 0000000..a0fb21f
--- /dev/null
+++ b/components/NumberDynamic.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react'
+import numeral from 'numeral'
+
+type Props = {
+  value: number
+  duration?: number
+  prefix?: string
+  suffix?: string
+}
+
+const NumberDynamic = ({ prefix = '', suffix = '', value, duration = 500 }: Props) => {
+  const [newValue, setNewValue] = useState(0)
+
+  const newValueFormatted = newValue < 1000 ? newValue : numeral(newValue).format('0,0')
+
+  const stepDurationMs = 25
+
+  const grow = (growIncrement: number) => {
+    const v = Math.ceil(newValue + growIncrement)
+
+    console.log(v)
+
+    if (v > value) {
+      setNewValue(value)
+      return false
+    }
+
+    setNewValue(v)
+
+    setTimeout(() => {
+      grow(growIncrement)
+    }, stepDurationMs)
+  }
+
+  const growInit = () => {
+    grow(value / (duration / stepDurationMs))
+  }
+
+  useEffect(() => {
+    growInit()
+  })
+
+  return (
+    <div>
+      {prefix}
+      {newValueFormatted}
+      {suffix}
+    </div>
+  )
+}
+
+export default NumberDynamic
diff --git a/components/OverlayLayer.tsx b/components/OverlayLayer.tsx
index 266c9c5..a5df794 100644
--- a/components/OverlayLayer.tsx
+++ b/components/OverlayLayer.tsx
@@ -2,20 +2,35 @@ import React, { ReactNode } from 'react'
 import { useAppSelector } from '../src/stores/hooks'
 
 type Props = {
-  zIndex?: string,
-  type?: string,
+  zIndex?: string
+  type?: string
   children?: ReactNode
+  onClick: Function
 }
 
-export default function OverlayLayer({ zIndex = 'z-50', type = 'flex', children }: Props) {
+export default function OverlayLayer({
+  zIndex = 'z-50',
+  type = 'flex',
+  children,
+  ...props
+}: Props) {
   const overlayStyle = useAppSelector((state) => state.style.overlayStyle)
 
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+
+    if (props.onClick) {
+      props.onClick(e)
+    }
+  }
+
   return (
     <div
       className={`${type} ${zIndex} items-center flex-col justify-center overflow-hidden fixed inset-0`}
     >
       <div
         className={`${overlayStyle} absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700`}
+        onClick={handleClick}
       ></div>
 
       {children}
diff --git a/components/PillTag.tsx b/components/PillTag.tsx
new file mode 100644
index 0000000..9648db1
--- /dev/null
+++ b/components/PillTag.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { ColorKey } from '../interfaces'
+import { colorsBgLight, colorsOutline } from '../src/colors'
+import PillTagPlain from './PillTagPlain'
+
+type Props = {
+  label?: string
+  color: ColorKey
+  icon?: string
+  small?: boolean
+  outline?: boolean
+}
+
+const PillTag = ({ small = false, outline = false, ...props }: Props) => {
+  const layoutClassName = small ? 'py-1 px-3' : 'py-1.5 px-4'
+  const colorClassName = outline ? colorsOutline[props.color] : colorsBgLight[props.color]
+
+  return (
+    <PillTagPlain
+      className={`border rounded-full ${layoutClassName} ${colorClassName}`}
+      icon={props.icon}
+      label={props.label}
+      small={small}
+    />
+  )
+}
+
+export default PillTag
diff --git a/components/PillTagPlain.tsx b/components/PillTagPlain.tsx
new file mode 100644
index 0000000..87a348a
--- /dev/null
+++ b/components/PillTagPlain.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import BaseIcon from './BaseIcon'
+
+type Props = {
+  label?: string
+  icon?: string
+  className?: string
+  small?: boolean
+}
+
+const PillTagPlain = ({ small = false, className = '', ...props }: Props) => {
+  return (
+    <div
+      className={`inline-flex items-center capitalize leading-none ${
+        small ? 'text-xs' : 'text-sm'
+      } ${className}`}
+    >
+      {props.icon && (
+        <BaseIcon
+          path={props.icon}
+          h="h-4"
+          w="w-4"
+          className={small ? 'mr-1' : 'mr-2'}
+          size={small ? 14 : null}
+        />
+      )}
+      {props.label && <span>{props.label}</span>}
+    </div>
+  )
+}
+
+export default PillTagPlain
diff --git a/components/PillTagTrend.tsx b/components/PillTagTrend.tsx
new file mode 100644
index 0000000..4a9a067
--- /dev/null
+++ b/components/PillTagTrend.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import {
+  mdiChevronUp,
+  mdiChevronDown,
+  mdiAlertCircleOutline,
+  mdiInformationOutline,
+  mdiCheckAll,
+  mdiCheckCircleOutline,
+  mdiAlertOutline,
+} from '@mdi/js'
+import { ColorKey, TrendType } from '../interfaces'
+import PillTag from './PillTag'
+
+type Props = {
+  label: string
+  type: TrendType
+  color: ColorKey
+  small?: boolean
+}
+
+const PillTagTrend = ({ small = false, ...props }: Props) => {
+  const trendIcon = {
+    up: mdiChevronUp,
+    down: mdiChevronDown,
+    success: mdiCheckCircleOutline,
+    danger: mdiAlertOutline,
+    warning: mdiAlertCircleOutline,
+    info: mdiInformationOutline,
+  }[props.type]
+
+  return <PillTag label={props.label} color={props.color} icon={trendIcon} small={small} />
+}
+
+export default PillTagTrend
diff --git a/components/SectionBanner.tsx b/components/SectionBanner.tsx
new file mode 100644
index 0000000..b66d6c3
--- /dev/null
+++ b/components/SectionBanner.tsx
@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react'
+
+type Props = {
+  className?: string
+  children: ReactNode
+}
+
+const SectionBanner = ({ className = '', children }: Props) => {
+  return (
+    <div className={`${className} rounded-2xl py-12 px-6 lg:px-12 text-center`}>{children}</div>
+  )
+}
+
+export default SectionBanner
diff --git a/components/SectionBannerStarOnGitHub.tsx b/components/SectionBannerStarOnGitHub.tsx
new file mode 100644
index 0000000..452efa3
--- /dev/null
+++ b/components/SectionBannerStarOnGitHub.tsx
@@ -0,0 +1,26 @@
+import { mdiGithub } from '@mdi/js'
+import React from 'react'
+import { gradientBgPinkRed } from '../src/colors'
+import BaseButton from './BaseButton'
+import SectionBanner from './SectionBanner'
+
+const SectionBannerStarOnGitHub = () => {
+  return (
+    <SectionBanner className={gradientBgPinkRed}>
+      <h1 className="text-3xl text-white mb-6">
+        Like the project? Please star on <b>GitHub</b> ;-)
+      </h1>
+      <div>
+        <BaseButton
+          href="https://github.com/justboil/admin-one-react-tailwind"
+          target="_blank"
+          icon={mdiGithub}
+          label="GitHub"
+          roundedFull
+        />
+      </div>
+    </SectionBanner>
+  )
+}
+
+export default SectionBannerStarOnGitHub
diff --git a/components/SectionFullScreen.tsx b/components/SectionFullScreen.tsx
index f121c1d..246d0f7 100644
--- a/components/SectionFullScreen.tsx
+++ b/components/SectionFullScreen.tsx
@@ -4,7 +4,7 @@ import { gradientBgPurplePink, gradientBgDark, gradientBgPinkRed } from '../src/
 import { useAppSelector } from '../src/stores/hooks'
 
 type Props = {
-  bg: BgKey,
+  bg: BgKey
   children: ReactNode
 }
 
diff --git a/components/SectionTitleLineWithButton.tsx b/components/SectionTitleLineWithButton.tsx
index 32a7824..8643c86 100644
--- a/components/SectionTitleLineWithButton.tsx
+++ b/components/SectionTitleLineWithButton.tsx
@@ -5,9 +5,9 @@ import BaseIcon from './BaseIcon'
 import IconRounded from './IconRounded'
 
 type Props = {
-  icon: string,
-  title: string,
-  main?: boolean,
+  icon: string
+  title: string
+  main?: boolean
   children?: ReactNode
 }
 
diff --git a/components/TableSampleClients.tsx b/components/TableSampleClients.tsx
new file mode 100644
index 0000000..18fd2e5
--- /dev/null
+++ b/components/TableSampleClients.tsx
@@ -0,0 +1,96 @@
+import { mdiEye, mdiTrashCan } from '@mdi/js'
+import React, { useState } from 'react'
+import { useSampleClients } from '../hooks/sampleData'
+import { Client } from '../interfaces'
+import BaseButton from './BaseButton'
+import BaseButtons from './BaseButtons'
+import BaseLevel from './BaseLevel'
+import UserAvatar from './UserAvatar'
+
+const TableSampleClients = () => {
+  const { clients } = useSampleClients()
+
+  const perPage = 5
+
+  const [currentPage, setCurrentPage] = useState(0)
+
+  const clientsPaginated = clients.slice(perPage * currentPage, perPage * (currentPage + 1))
+
+  const numPages = clients.length / perPage
+
+  const pagesList = []
+
+  for (let i = 0; i < numPages; i++) {
+    pagesList.push(i)
+  }
+
+  return (
+    <>
+      <table>
+        <thead>
+          <tr>
+            <th />
+            <th>Name</th>
+            <th>Company</th>
+            <th>City</th>
+            <th>Progress</th>
+            <th>Created</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {clientsPaginated.map((client: Client) => (
+            <tr key={client.id}>
+              <td className="border-b-0 lg:w-6 before:hidden">
+                <UserAvatar username={client.name} className="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
+              </td>
+              <td data-label="Name">{client.name}</td>
+              <td data-label="Company">{client.company}</td>
+              <td data-label="City">{client.city}</td>
+              <td data-label="Progress" className="lg:w-32">
+                <progress
+                  className="flex w-2/5 self-center lg:w-full"
+                  max="100"
+                  value={client.progress}
+                >
+                  {client.progress}
+                </progress>
+              </td>
+              <td data-label="Created" className="lg:w-1 whitespace-nowrap">
+                <small className="text-gray-500 dark:text-slate-400">{client.created}</small>
+              </td>
+              <td className="before:hidden lg:w-1 whitespace-nowrap">
+                <BaseButtons type="justify-start lg:justify-end" noWrap>
+                  <BaseButton color="info" icon={mdiEye} small isGrouped />
+                  <BaseButton color="danger" icon={mdiTrashCan} small isGrouped />
+                </BaseButtons>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
+        <BaseLevel>
+          <BaseButtons>
+            {pagesList.map((page) => (
+              <BaseButton
+                key={page}
+                active={page === currentPage}
+                label={page + 1}
+                color={page === currentPage ? 'lightDark' : 'whiteDark'}
+                small
+                isGrouped
+                onClick={() => setCurrentPage(page)}
+              />
+            ))}
+          </BaseButtons>
+          <small>
+            Page {currentPage + 1} of {numPages}
+          </small>
+        </BaseLevel>
+      </div>
+    </>
+  )
+}
+
+export default TableSampleClients
diff --git a/components/UserAvatar.tsx b/components/UserAvatar.tsx
index 3d2dd85..6f93123 100644
--- a/components/UserAvatar.tsx
+++ b/components/UserAvatar.tsx
@@ -1,26 +1,29 @@
 import React, { ReactNode } from 'react'
-import Image from 'next/image'
 
 type Props = {
-  username: string,
-  avatar?: string|null,
-  api?: string,
-  className?: string,
+  username: string
+  avatar?: string | null
+  api?: string
+  className?: string
   children?: ReactNode
 }
 
-export default function UserAvatar({ username, avatar=null, api = 'avataaars', className='', children }: Props) {
+export default function UserAvatar({
+  username,
+  avatar = null,
+  api = 'avataaars',
+  className = '',
+  children,
+}: Props) {
   const avatarImage =
     avatar ?? `https://avatars.dicebear.com/api/${api}/${username.replace(/[^a-z0-9]+/i, '-')}.svg`
 
   return (
-    <div className={`bg-gray-100 dark:bg-slate-800 ${className}`}>
-      <Image
+    <div className={className}>
+      <img
         src={avatarImage}
         alt={username}
-        width={24}
-        height={24}
-        className={`rounded-full h-auto w-full max-w-full ${className}`}
+        className="rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800"
       />
       {children}
     </div>
diff --git a/components/UserAvatarCurrentUser.tsx b/components/UserAvatarCurrentUser.tsx
index 624a183..2d68f21 100644
--- a/components/UserAvatarCurrentUser.tsx
+++ b/components/UserAvatarCurrentUser.tsx
@@ -3,11 +3,11 @@ import { useAppSelector } from '../src/stores/hooks'
 import UserAvatar from './UserAvatar'
 
 type Props = {
-  className?: string,
+  className?: string
   children?: ReactNode
 }
 
-export default function UserAvatarCurrentUser({ className='', children }: Props) {
+export default function UserAvatarCurrentUser({ className = '', children }: Props) {
   const userName = useAppSelector((state) => state.main.userName)
   const userAvatar = useAppSelector((state) => state.main.userAvatar)
 
diff --git a/components/charts/LineSample.tsx b/components/charts/LineSample.tsx
new file mode 100644
index 0000000..c7f417b
--- /dev/null
+++ b/components/charts/LineSample.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+  Chart,
+  LineElement,
+  PointElement,
+  LineController,
+  LinearScale,
+  CategoryScale,
+  Tooltip,
+} from 'chart.js'
+import { Line } from 'react-chartjs-2'
+
+Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip)
+
+const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: {
+      display: false,
+    },
+    x: {
+      display: true,
+    },
+  },
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+}
+
+const ChartLineSample = ({ data }) => {
+  return <Line options={options} data={data} className="h-96" />
+}
+
+export default ChartLineSample
diff --git a/components/charts/config.ts b/components/charts/config.ts
new file mode 100644
index 0000000..cacce92
--- /dev/null
+++ b/components/charts/config.ts
@@ -0,0 +1,54 @@
+export const chartColors = {
+  default: {
+    primary: '#00D1B2',
+    info: '#209CEE',
+    danger: '#FF3860',
+  },
+}
+
+const randomChartData = (n: number) => {
+  const data = []
+
+  for (let i = 0; i < n; i++) {
+    data.push(Math.round(Math.random() * 200))
+  }
+
+  return data
+}
+
+const datasetObject = (color: string, points: number) => {
+  return {
+    fill: false,
+    borderColor: chartColors.default[color],
+    borderWidth: 2,
+    borderDash: [],
+    borderDashOffset: 0.0,
+    pointBackgroundColor: chartColors.default[color],
+    pointBorderColor: 'rgba(255,255,255,0)',
+    pointHoverBackgroundColor: chartColors.default[color],
+    pointBorderWidth: 20,
+    pointHoverRadius: 4,
+    pointHoverBorderWidth: 15,
+    pointRadius: 4,
+    data: randomChartData(points),
+    tension: 0.5,
+    cubicInterpolationMode: 'default',
+  }
+}
+
+export const sampleChartData = (points = 9) => {
+  const labels = []
+
+  for (let i = 1; i <= points; i++) {
+    labels.push(`0${i}`)
+  }
+
+  return {
+    labels,
+    datasets: [
+      datasetObject('primary', points),
+      datasetObject('info', points),
+      datasetObject('danger', points),
+    ],
+  }
+}
diff --git a/components/globals/DarkMode.tsx b/components/globals/DarkMode.tsx
index cb52935..027d484 100644
--- a/components/globals/DarkMode.tsx
+++ b/components/globals/DarkMode.tsx
@@ -1,15 +1,22 @@
-import { darkModeKey } from '../../src/config'
+import { useEffect } from 'react'
+import { localStorageDarkModeKey } from '../../src/config'
 import { useAppDispatch } from '../../src/stores/hooks'
 import { setDarkMode } from '../../src/stores/styleSlice'
 
 export default function GlobalDarkMode() {
   const dispatch = useAppDispatch()
 
-  const isSetInLocalStorage = typeof localStorage !== 'undefined' && localStorage[darkModeKey]
-  const isSetInMedia =
-    typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
+  useEffect(() => {
+    const isSetInLocalStorage =
+    typeof localStorage !== 'undefined' && localStorage[localStorageDarkModeKey]
 
-  dispatch(setDarkMode(isSetInLocalStorage ? localStorage[darkModeKey] === '1' : isSetInMedia))
+    const isSetInMedia =
+      typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
 
+    dispatch(
+      setDarkMode(isSetInLocalStorage ? localStorage[localStorageDarkModeKey] === '1' : isSetInMedia)
+    )
+  })
+  
   return null
 }
diff --git a/components/globals/Style.tsx b/components/globals/Style.tsx
index 4572995..91d7891 100644
--- a/components/globals/Style.tsx
+++ b/components/globals/Style.tsx
@@ -1,17 +1,20 @@
-import { styleKey } from '../../src/config'
+import { useEffect } from 'react'
+import { localStorageStyleKey } from '../../src/config'
 import { useAppDispatch } from '../../src/stores/hooks'
 import { setStyle } from '../../src/stores/styleSlice'
 
 export default function GlobalStyle() {
   const dispatch = useAppDispatch()
 
-  dispatch(
-    setStyle(
-      typeof localStorage !== 'undefined' && localStorage[styleKey]
-        ? localStorage[styleKey]
-        : 'basic'
+  useEffect(() => {
+    dispatch(
+      setStyle(
+        typeof localStorage !== 'undefined' && localStorage[localStorageStyleKey]
+          ? localStorage[localStorageStyleKey]
+          : 'basic'
+      )
     )
-  )
+  })
 
   return null
 }
diff --git a/components/justboil/Logo.tsx b/components/justboil/Logo.tsx
index 3c6e8a7..927745c 100644
--- a/components/justboil/Logo.tsx
+++ b/components/justboil/Logo.tsx
@@ -5,7 +5,7 @@ type Props = {
   className?: string
 }
 
-export default function JustboilLogo({ className='' }: Props) {
+export default function JustboilLogo({ className = '' }: Props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/components/layouts/Authenticated.tsx b/components/layouts/Authenticated.tsx
index 06cb51b..4db9e2a 100644
--- a/components/layouts/Authenticated.tsx
+++ b/components/layouts/Authenticated.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useEffect } from 'react'
 import { useState } from 'react'
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../../src/menuAside'
@@ -20,14 +20,16 @@ type Props = {
 export default function LayoutAuthenticated({ children }: Props) {
   const dispatch = useAppDispatch()
 
-  dispatch(
-    setUser({
-      name: 'John Doe',
-      email: 'john@example.com',
-      avatar:
-        'https://avatars.dicebear.com/api/avataaars/example.svg?options[top][]=shortHair&options[accessoriesChance]=93',
-    })
-  )
+  useEffect(() => {
+    dispatch(
+      setUser({
+        name: 'John Doe',
+        email: 'john@example.com',
+        avatar:
+          'https://avatars.dicebear.com/api/avataaars/example.svg?options[top][]=shortHair&options[accessoriesChance]=93',
+      })
+    )
+  })
 
   const darkMode = useAppSelector((state) => state.style.darkMode)
 
@@ -41,11 +43,7 @@ export default function LayoutAuthenticated({ children }: Props) {
       <GlobalStyle />
       <GlobalDarkMode />
 
-      <div
-        className={`${darkMode ? 'dark' : ''} ${
-          isAsideMobileExpanded ? 'overflow-hidden lg:overflow-visible' : ''
-        }`}
-      >
+      <div className={`${darkMode ? 'dark' : ''} overflow-hidden lg:overflow-visible`}>
         <div
           className={`${layoutAsidePadding} ${
             isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''
@@ -55,10 +53,16 @@ export default function LayoutAuthenticated({ children }: Props) {
             menu={menuNavBar}
             className={`${layoutAsidePadding} ${isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''}`}
           >
-            <NavBarItemPlain display="flex lg:hidden">
+            <NavBarItemPlain
+              display="flex lg:hidden"
+              onClick={() => setIsAsideMobileExpanded(!isAsideMobileExpanded)}
+            >
               <BaseIcon path={isAsideMobileExpanded ? mdiBackburger : mdiForwardburger} size="24" />
             </NavBarItemPlain>
-            <NavBarItemPlain display="hidden lg:flex xl:hidden">
+            <NavBarItemPlain
+              display="hidden lg:flex xl:hidden"
+              onClick={() => setIsAsideLgActive(true)}
+            >
               <BaseIcon path={mdiMenu} size="24" />
             </NavBarItemPlain>
           </NavBar>
@@ -66,6 +70,7 @@ export default function LayoutAuthenticated({ children }: Props) {
             isAsideMobileExpanded={isAsideMobileExpanded}
             isAsideLgActive={isAsideLgActive}
             menu={menuAside}
+            onAsideLgClose={() => setIsAsideLgActive(false)}
           />
           {children}
           <FooterBar>
diff --git a/hooks/sampleData.ts b/hooks/sampleData.ts
new file mode 100644
index 0000000..8c4c890
--- /dev/null
+++ b/hooks/sampleData.ts
@@ -0,0 +1,24 @@
+import useSWR from 'swr'
+import { Transaction } from '../interfaces'
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
+
+export const useSampleClients = () => {
+  const { data, error } = useSWR('/admin-one-react-tailwind/data-sources/clients.json', fetcher)
+
+  return {
+    clients: data?.data ?? [],
+    isLoading: !error && !data,
+    isError: error,
+  }
+}
+
+export const useSampleTransactions = () => {
+  const { data, error } = useSWR('/admin-one-react-tailwind/data-sources/history.json', fetcher)
+
+  return {
+    transactions: data?.data ?? [],
+    isLoading: !error && !data,
+    isError: error,
+  }
+}
diff --git a/interfaces/index.ts b/interfaces/index.ts
index 24604a3..fa22fe4 100644
--- a/interfaces/index.ts
+++ b/interfaces/index.ts
@@ -1,34 +1,70 @@
 export type UserPayloadObject = {
-  name: string,
-  email: string,
+  name: string
+  email: string
   avatar: string
 }
 
 export type MenuAsideItem = {
   label: string
-  icon?: string,
-  href?: string,
-  target?: string,
-  color?: string,
-  isLogout?: boolean,
+  icon?: string
+  href?: string
+  target?: string
+  color?: string
+  isLogout?: boolean
   menu?: MenuAsideItem[]
 }
 
 export type MenuNavBarItem = {
   label?: string
-  icon?: string,
-  href?: string,
-  target?: string,
-  isDivider?: boolean,
-  isLogout?: boolean,
-  isDesktopNoLabel?: boolean,
-  isToggleLightDark?: boolean,
-  isCurrentUser?: boolean,
+  icon?: string
+  href?: string
+  target?: string
+  isDivider?: boolean
+  isLogout?: boolean
+  isDesktopNoLabel?: boolean
+  isToggleLightDark?: boolean
+  isCurrentUser?: boolean
   menu?: MenuNavBarItem[]
 }
 
-export type ColorKey = "white" | "light" | "contrast" | "success" | "danger" | "warning" | "info"
+export type ColorKey = 'white' | 'light' | 'contrast' | 'success' | 'danger' | 'warning' | 'info'
 
-export type ColorButtonKey = "white" | "whiteDark" | "lightDark" | "contrast" | "success" | "danger" | "warning" | "info"
+export type ColorButtonKey =
+  | 'white'
+  | 'whiteDark'
+  | 'lightDark'
+  | 'contrast'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
 
-export type BgKey = "purplePink" | "pinkRed"
\ No newline at end of file
+export type BgKey = 'purplePink' | 'pinkRed'
+
+export type TrendType = 'up' | 'down' | 'success' | 'danger' | 'warning' | 'info'
+
+export type TransactionType = 'withdraw' | 'deposit' | 'invoice' | 'payment'
+
+export type Transaction = {
+  id: number
+  amount: number
+  account: string
+  name: string
+  date: string
+  type: TransactionType
+  business: string
+}
+
+export type Client = {
+  id: number
+  avatar: string
+  login: string
+  name: string
+  company: string
+  city: string
+  progress: number
+  created: string
+  created_mm_dd_yyyy: string
+}
+
+export type StyleKey = 'white' | 'basic'
diff --git a/next.config.mjs b/next.config.mjs
index dda2d67..75515f1 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -3,14 +3,6 @@
  */
  const nextConfig = {
   basePath: "/admin-one-react-tailwind",
-  images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'avatars.dicebear.com',
-      },
-    ],
-  },
 }
 
 export default nextConfig
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4247233..8d8af04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,10 +7,14 @@
       "dependencies": {
         "@mdi/js": "^7.0.96",
         "@reduxjs/toolkit": "^1.8.5",
+        "chart.js": "^3.9.1",
         "next": "latest",
+        "numeral": "^2.0.6",
         "react": "^17.0.2",
+        "react-chartjs-2": "^4.3.1",
         "react-dom": "^17.0.2",
-        "react-redux": "^8.0.2"
+        "react-redux": "^8.0.2",
+        "swr": "^1.3.0"
       },
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.2",
@@ -22,7 +26,7 @@
         "eslint-config-next": "12.2.5",
         "eslint-config-prettier": "^8.5.0",
         "postcss": "^8.4.4",
-        "postcss-import": "^14.0.2",
+        "postcss-import": "^14.1.0",
         "prettier": "^2.7.1",
         "tailwindcss": "^3.0.0"
       }
@@ -52,9 +56,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.1.tgz",
-      "integrity": "sha512-OhSY22oQQdw3zgPOOwdoj01l/Dzl1Z+xyUP33tkSN+aqyEhymJCcPHyXt+ylW8FSe0TfRC2VG+ROQOapD0aZSQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.2.tgz",
+      "integrity": "sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
@@ -451,9 +455,9 @@
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/react": {
-      "version": "18.0.18",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.18.tgz",
-      "integrity": "sha512-6hI08umYs6NaiHFEEGioXnxJ+oEhY3eRz8VCUaudZmGdtvPviCJB8mgaMxaDWAdPSYd4eFavrPk2QIolwbLYrg==",
+      "version": "18.0.19",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.19.tgz",
+      "integrity": "sha512-BDc3Q+4Q3zsn7k9xZrKfjWyJsSlEDMs38gD1qp2eDazLCdcPqAT+vq1ND+Z8AGel/UiwzNUk8ptpywgNQcJ1MQ==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -483,14 +487,14 @@
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.36.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.36.2.tgz",
-      "integrity": "sha512-qS/Kb0yzy8sR0idFspI9Z6+t7mqk/oRjnAYfewG+VN73opAUvmYL3oPIMmgOX6CnQS6gmVIXGshlb5RY/R22pA==",
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.37.0.tgz",
+      "integrity": "sha512-01VzI/ipYKuaG5PkE5+qyJ6m02fVALmMPY3Qq5BHflDx3y4VobbLdHQkSMg9VPRS4KdNt4oYTMaomFoHonBGAw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.36.2",
-        "@typescript-eslint/types": "5.36.2",
-        "@typescript-eslint/typescript-estree": "5.36.2",
+        "@typescript-eslint/scope-manager": "5.37.0",
+        "@typescript-eslint/types": "5.37.0",
+        "@typescript-eslint/typescript-estree": "5.37.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -510,13 +514,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.36.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.36.2.tgz",
-      "integrity": "sha512-cNNP51L8SkIFSfce8B1NSUBTJTu2Ts4nWeWbFrdaqjmn9yKrAaJUBHkyTZc0cL06OFHpb+JZq5AUHROS398Orw==",
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.37.0.tgz",
+      "integrity": "sha512-F67MqrmSXGd/eZnujjtkPgBQzgespu/iCZ+54Ok9X5tALb9L2v3G+QBSoWkXG0p3lcTJsL+iXz5eLUEdSiJU9Q==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.36.2",
-        "@typescript-eslint/visitor-keys": "5.36.2"
+        "@typescript-eslint/types": "5.37.0",
+        "@typescript-eslint/visitor-keys": "5.37.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -527,9 +531,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.36.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.36.2.tgz",
-      "integrity": "sha512-9OJSvvwuF1L5eS2EQgFUbECb99F0mwq501w0H0EkYULkhFa19Qq7WFbycdw1PexAc929asupbZcgjVIe6OK/XQ==",
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.37.0.tgz",
+      "integrity": "sha512-3frIJiTa5+tCb2iqR/bf7XwU20lnU05r/sgPJnRpwvfZaqCJBrl8Q/mw9vr3NrNdB/XtVyMA0eppRMMBqdJ1bA==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -540,13 +544,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.36.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.36.2.tgz",
-      "integrity": "sha512-8fyH+RfbKc0mTspfuEjlfqA4YywcwQK2Amcf6TDOwaRLg7Vwdu4bZzyvBZp4bjt1RRjQ5MDnOZahxMrt2l5v9w==",
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.37.0.tgz",
+      "integrity": "sha512-JkFoFIt/cx59iqEDSgIGnQpCTRv96MQnXCYvJi7QhBC24uyuzbD8wVbajMB1b9x4I0octYFJ3OwjAwNqk1AjDA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.36.2",
-        "@typescript-eslint/visitor-keys": "5.36.2",
+        "@typescript-eslint/types": "5.37.0",
+        "@typescript-eslint/visitor-keys": "5.37.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -567,12 +571,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.36.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.36.2.tgz",
-      "integrity": "sha512-BtRvSR6dEdrNt7Net2/XDjbYKU5Ml6GqJgVfXT0CxTCJlnIqK7rAGreuWKMT2t8cFUT2Msv5oxw0GMRD7T5J7A==",
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.37.0.tgz",
+      "integrity": "sha512-Hp7rT4cENBPIzMwrlehLW/28EVCOcE9U1Z1BQTc8EA8v5qpr7GRGuG+U58V5tTY48zvUOA3KHvw3rA8tY9fbdA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.36.2",
+        "@typescript-eslint/types": "5.37.0",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -785,9 +789,9 @@
       "dev": true
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.8",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.8.tgz",
-      "integrity": "sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==",
+      "version": "10.4.9",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.9.tgz",
+      "integrity": "sha512-Uu67eduPEmOeA0vyJby5ghu1AAELCCNSsLAjK+lz6kYzNM5sqnBO36MqfsjhPjQF/BaJM5U/UuFYyl7PavY/wQ==",
       "dev": true,
       "funding": [
         {
@@ -801,7 +805,7 @@
       ],
       "dependencies": {
         "browserslist": "^4.21.3",
-        "caniuse-lite": "^1.0.30001373",
+        "caniuse-lite": "^1.0.30001394",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -929,9 +933,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001393",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001393.tgz",
-      "integrity": "sha512-N/od11RX+Gsk+1qY/jbPa0R6zJupEa0lxeBG598EbrtblxVCTJsQwbRBm6+V+rxpc5lHKdsXb9RY83cZIPLseA==",
+      "version": "1.0.30001399",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001399.tgz",
+      "integrity": "sha512-4vQ90tMKS+FkvuVWS5/QY1+d805ODxZiKFzsU8o/RsVJz49ZSRR8EjykLJbqhzdPgadbX6wB538wOzle3JniRA==",
       "funding": [
         {
           "type": "opencollective",
@@ -959,6 +963,11 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1060,9 +1069,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
-      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -1169,9 +1178,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.246",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.246.tgz",
-      "integrity": "sha512-/wFCHUE+Hocqr/LlVGsuKLIw4P2lBWwFIDcNMDpJGzyIysQV4aycpoOitAs32FT94EHKnNqDR/CVZJFbXEufJA==",
+      "version": "1.4.248",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.248.tgz",
+      "integrity": "sha512-qShjzEYpa57NnhbW2K+g+Fl+eNoDvQ7I+2MRwWnU6Z6F0HhXekzsECCLv+y2OJUsRodjqoSfwHkIX42VUFtUzg==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -1265,12 +1274,12 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.23.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.23.0.tgz",
-      "integrity": "sha512-pBG/XOn0MsJcKcTRLr27S5HpzQo4kLr+HjLQIyK4EiCsijDl/TB+h5uEuJU6bQ8Edvwz1XWOjpaP2qgnXGpTcA==",
+      "version": "8.23.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.23.1.tgz",
+      "integrity": "sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==",
       "dev": true,
       "dependencies": {
-        "@eslint/eslintrc": "^1.3.1",
+        "@eslint/eslintrc": "^1.3.2",
         "@humanwhocodes/config-array": "^0.10.4",
         "@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
         "@humanwhocodes/module-importer": "^1.0.1",
@@ -1289,7 +1298,6 @@
         "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
         "find-up": "^5.0.0",
-        "functional-red-black-tree": "^1.0.1",
         "glob-parent": "^6.0.1",
         "globals": "^13.15.0",
         "globby": "^11.1.0",
@@ -1298,6 +1306,7 @@
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
+        "js-sdsl": "^4.1.4",
         "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
@@ -1890,12 +1899,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/functional-red-black-tree": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-      "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
-      "dev": true
-    },
     "node_modules/functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
@@ -1906,9 +1909,9 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
-      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
+      "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
       "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
@@ -2199,9 +2202,9 @@
       }
     },
     "node_modules/is-callable": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.5.tgz",
+      "integrity": "sha512-ZIWRujF6MvYGkEuHMYtFRkL2wAtFw89EHfKlXrkPkjQZZRWeh9L1q3SV13NIfHnqxugjLvAOkEHx9mb1zcMnEw==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -2370,6 +2373,12 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/js-sdsl": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
+      "integrity": "sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==",
+      "dev": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2676,6 +2685,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/numeral": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz",
+      "integrity": "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3141,6 +3158,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz",
+      "integrity": "sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==",
+      "peerDependencies": {
+        "chart.js": "^3.5.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -3551,6 +3577,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
@@ -3701,9 +3735,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.7.tgz",
-      "integrity": "sha512-iN/XYesmZ2RmmWAiI4Z5rq0YqSiv0brj9Ce9CfhNE4xIW2h+MFxcgkxIzZ+ShkFPUkjU3gQ+3oypadD3RAMtrg==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz",
+      "integrity": "sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==",
       "dev": true,
       "funding": [
         {
@@ -3852,9 +3886,9 @@
       }
     },
     "@eslint/eslintrc": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.1.tgz",
-      "integrity": "sha512-OhSY22oQQdw3zgPOOwdoj01l/Dzl1Z+xyUP33tkSN+aqyEhymJCcPHyXt+ylW8FSe0TfRC2VG+ROQOapD0aZSQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.2.tgz",
+      "integrity": "sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==",
       "dev": true,
       "requires": {
         "ajv": "^6.12.4",
@@ -4088,9 +4122,9 @@
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "@types/react": {
-      "version": "18.0.18",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.18.tgz",
-      "integrity": "sha512-6hI08umYs6NaiHFEEGioXnxJ+oEhY3eRz8VCUaudZmGdtvPviCJB8mgaMxaDWAdPSYd4eFavrPk2QIolwbLYrg==",
+      "version": "18.0.19",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.19.tgz",
+      "integrity": "sha512-BDc3Q+4Q3zsn7k9xZrKfjWyJsSlEDMs38gD1qp2eDazLCdcPqAT+vq1ND+Z8AGel/UiwzNUk8ptpywgNQcJ1MQ==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -4120,41 +4154,41 @@
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
     "@typescript-eslint/parser": {
-      "version": "5.36.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.36.2.tgz",
-      "integrity": "sha512-qS/Kb0yzy8sR0idFspI9Z6+t7mqk/oRjnAYfewG+VN73opAUvmYL3oPIMmgOX6CnQS6gmVIXGshlb5RY/R22pA==",
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.37.0.tgz",
+      "integrity": "sha512-01VzI/ipYKuaG5PkE5+qyJ6m02fVALmMPY3Qq5BHflDx3y4VobbLdHQkSMg9VPRS4KdNt4oYTMaomFoHonBGAw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.36.2",
-        "@typescript-eslint/types": "5.36.2",
-        "@typescript-eslint/typescript-estree": "5.36.2",
+        "@typescript-eslint/scope-manager": "5.37.0",
+        "@typescript-eslint/types": "5.37.0",
+        "@typescript-eslint/typescript-estree": "5.37.0",
         "debug": "^4.3.4"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.36.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.36.2.tgz",
-      "integrity": "sha512-cNNP51L8SkIFSfce8B1NSUBTJTu2Ts4nWeWbFrdaqjmn9yKrAaJUBHkyTZc0cL06OFHpb+JZq5AUHROS398Orw==",
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.37.0.tgz",
+      "integrity": "sha512-F67MqrmSXGd/eZnujjtkPgBQzgespu/iCZ+54Ok9X5tALb9L2v3G+QBSoWkXG0p3lcTJsL+iXz5eLUEdSiJU9Q==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.36.2",
-        "@typescript-eslint/visitor-keys": "5.36.2"
+        "@typescript-eslint/types": "5.37.0",
+        "@typescript-eslint/visitor-keys": "5.37.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.36.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.36.2.tgz",
-      "integrity": "sha512-9OJSvvwuF1L5eS2EQgFUbECb99F0mwq501w0H0EkYULkhFa19Qq7WFbycdw1PexAc929asupbZcgjVIe6OK/XQ==",
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.37.0.tgz",
+      "integrity": "sha512-3frIJiTa5+tCb2iqR/bf7XwU20lnU05r/sgPJnRpwvfZaqCJBrl8Q/mw9vr3NrNdB/XtVyMA0eppRMMBqdJ1bA==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.36.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.36.2.tgz",
-      "integrity": "sha512-8fyH+RfbKc0mTspfuEjlfqA4YywcwQK2Amcf6TDOwaRLg7Vwdu4bZzyvBZp4bjt1RRjQ5MDnOZahxMrt2l5v9w==",
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.37.0.tgz",
+      "integrity": "sha512-JkFoFIt/cx59iqEDSgIGnQpCTRv96MQnXCYvJi7QhBC24uyuzbD8wVbajMB1b9x4I0octYFJ3OwjAwNqk1AjDA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.36.2",
-        "@typescript-eslint/visitor-keys": "5.36.2",
+        "@typescript-eslint/types": "5.37.0",
+        "@typescript-eslint/visitor-keys": "5.37.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -4163,12 +4197,12 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.36.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.36.2.tgz",
-      "integrity": "sha512-BtRvSR6dEdrNt7Net2/XDjbYKU5Ml6GqJgVfXT0CxTCJlnIqK7rAGreuWKMT2t8cFUT2Msv5oxw0GMRD7T5J7A==",
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.37.0.tgz",
+      "integrity": "sha512-Hp7rT4cENBPIzMwrlehLW/28EVCOcE9U1Z1BQTc8EA8v5qpr7GRGuG+U58V5tTY48zvUOA3KHvw3rA8tY9fbdA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.36.2",
+        "@typescript-eslint/types": "5.37.0",
         "eslint-visitor-keys": "^3.3.0"
       }
     },
@@ -4319,13 +4353,13 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "10.4.8",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.8.tgz",
-      "integrity": "sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==",
+      "version": "10.4.9",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.9.tgz",
+      "integrity": "sha512-Uu67eduPEmOeA0vyJby5ghu1AAELCCNSsLAjK+lz6kYzNM5sqnBO36MqfsjhPjQF/BaJM5U/UuFYyl7PavY/wQ==",
       "dev": true,
       "requires": {
         "browserslist": "^4.21.3",
-        "caniuse-lite": "^1.0.30001373",
+        "caniuse-lite": "^1.0.30001394",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -4410,9 +4444,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001393",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001393.tgz",
-      "integrity": "sha512-N/od11RX+Gsk+1qY/jbPa0R6zJupEa0lxeBG598EbrtblxVCTJsQwbRBm6+V+rxpc5lHKdsXb9RY83cZIPLseA=="
+      "version": "1.0.30001399",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001399.tgz",
+      "integrity": "sha512-4vQ90tMKS+FkvuVWS5/QY1+d805ODxZiKFzsU8o/RsVJz49ZSRR8EjykLJbqhzdPgadbX6wB538wOzle3JniRA=="
     },
     "chalk": {
       "version": "4.1.2",
@@ -4424,6 +4458,11 @@
         "supports-color": "^7.1.0"
       }
     },
+    "chart.js": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -4496,9 +4535,9 @@
       "dev": true
     },
     "csstype": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
-      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
@@ -4579,9 +4618,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.246",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.246.tgz",
-      "integrity": "sha512-/wFCHUE+Hocqr/LlVGsuKLIw4P2lBWwFIDcNMDpJGzyIysQV4aycpoOitAs32FT94EHKnNqDR/CVZJFbXEufJA==",
+      "version": "1.4.248",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.248.tgz",
+      "integrity": "sha512-qShjzEYpa57NnhbW2K+g+Fl+eNoDvQ7I+2MRwWnU6Z6F0HhXekzsECCLv+y2OJUsRodjqoSfwHkIX42VUFtUzg==",
       "dev": true
     },
     "emoji-regex": {
@@ -4654,12 +4693,12 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.23.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.23.0.tgz",
-      "integrity": "sha512-pBG/XOn0MsJcKcTRLr27S5HpzQo4kLr+HjLQIyK4EiCsijDl/TB+h5uEuJU6bQ8Edvwz1XWOjpaP2qgnXGpTcA==",
+      "version": "8.23.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.23.1.tgz",
+      "integrity": "sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==",
       "dev": true,
       "requires": {
-        "@eslint/eslintrc": "^1.3.1",
+        "@eslint/eslintrc": "^1.3.2",
         "@humanwhocodes/config-array": "^0.10.4",
         "@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
         "@humanwhocodes/module-importer": "^1.0.1",
@@ -4678,7 +4717,6 @@
         "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
         "find-up": "^5.0.0",
-        "functional-red-black-tree": "^1.0.1",
         "glob-parent": "^6.0.1",
         "globals": "^13.15.0",
         "globby": "^11.1.0",
@@ -4687,6 +4725,7 @@
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
+        "js-sdsl": "^4.1.4",
         "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
@@ -5133,12 +5172,6 @@
         "functions-have-names": "^1.2.2"
       }
     },
-    "functional-red-black-tree": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-      "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
-      "dev": true
-    },
     "functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
@@ -5146,9 +5179,9 @@
       "dev": true
     },
     "get-intrinsic": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
-      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
+      "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
       "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
@@ -5354,9 +5387,9 @@
       }
     },
     "is-callable": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.5.tgz",
+      "integrity": "sha512-ZIWRujF6MvYGkEuHMYtFRkL2wAtFw89EHfKlXrkPkjQZZRWeh9L1q3SV13NIfHnqxugjLvAOkEHx9mb1zcMnEw==",
       "dev": true
     },
     "is-core-module": {
@@ -5465,6 +5498,12 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "js-sdsl": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
+      "integrity": "sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==",
+      "dev": true
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5683,6 +5722,11 @@
       "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
       "dev": true
     },
+    "numeral": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz",
+      "integrity": "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA=="
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5974,6 +6018,12 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-chartjs-2": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz",
+      "integrity": "sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==",
+      "requires": {}
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -6244,6 +6294,12 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "requires": {}
+    },
     "tailwindcss": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
@@ -6358,9 +6414,9 @@
       }
     },
     "update-browserslist-db": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.7.tgz",
-      "integrity": "sha512-iN/XYesmZ2RmmWAiI4Z5rq0YqSiv0brj9Ce9CfhNE4xIW2h+MFxcgkxIzZ+ShkFPUkjU3gQ+3oypadD3RAMtrg==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz",
+      "integrity": "sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==",
       "dev": true,
       "requires": {
         "escalade": "^3.1.1",
diff --git a/package.json b/package.json
index 7384862..dde01da 100644
--- a/package.json
+++ b/package.json
@@ -5,15 +5,19 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "format": "prettier '{components,pages,src}/**/*.{tsx,js}' --write"
+    "format": "prettier '{components,pages,src,interfaces,hooks}/**/*.{tsx,ts,js}' --write"
   },
   "dependencies": {
     "@mdi/js": "^7.0.96",
     "@reduxjs/toolkit": "^1.8.5",
+    "chart.js": "^3.9.1",
     "next": "latest",
+    "numeral": "^2.0.6",
     "react": "^17.0.2",
+    "react-chartjs-2": "^4.3.1",
     "react-dom": "^17.0.2",
-    "react-redux": "^8.0.2"
+    "react-redux": "^8.0.2",
+    "swr": "^1.3.0"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.2",
@@ -25,7 +29,7 @@
     "eslint-config-next": "12.2.5",
     "eslint-config-prettier": "^8.5.0",
     "postcss": "^8.4.4",
-    "postcss-import": "^14.0.2",
+    "postcss-import": "^14.1.0",
     "prettier": "^2.7.1",
     "tailwindcss": "^3.0.0"
   }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 854757f..ce60f64 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -3,7 +3,7 @@ import type { AppProps } from 'next/app'
 import type { ReactElement, ReactNode } from 'react'
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import {store} from '../src/stores/store'
+import { store } from '../src/stores/store'
 import { Provider } from 'react-redux'
 import '../styles/main.css'
 
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
new file mode 100644
index 0000000..5eea346
--- /dev/null
+++ b/pages/dashboard.tsx
@@ -0,0 +1,136 @@
+import {
+  mdiAccountMultiple,
+  mdiCartOutline,
+  mdiChartPie,
+  mdiChartTimelineVariant,
+  mdiGithub,
+  mdiMonitorCellphone,
+  mdiRead,
+  mdiReload,
+} from '@mdi/js'
+import Head from 'next/head'
+import React, { useEffect, useState } from 'react'
+import type { ReactElement } from 'react'
+import BaseButton from '../components/BaseButton'
+import LayoutAuthenticated from '../components/layouts/Authenticated'
+import SectionMain from '../components/SectionMain'
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
+import CardBoxWidget from '../components/CardBoxWIdget'
+import NumberDynamic from '../components/NumberDynamic'
+import { useSampleClients, useSampleTransactions } from '../hooks/sampleData'
+import CardBoxTransaction from '../components/CardBoxTransaction'
+import { Client, Transaction } from '../interfaces'
+import CardBoxClient from '../components/CardBoxClient'
+import SectionBannerStarOnGitHub from '../components/SectionBannerStarOnGitHub'
+import CardBox from '../components/CardBox'
+import { sampleChartData } from '../components/charts/config'
+import ChartLineSample from '../components/charts/LineSample'
+import NotificationBar from '../components/NotificationBar'
+import TableSampleClients from '../components/TableSampleClients'
+
+const Dashboard = () => {
+  const { clients } = useSampleClients()
+  const { transactions } = useSampleTransactions()
+
+  const clientsListed = clients.slice(0, 4)
+
+  const [chartData, setChartData] = useState(sampleChartData())
+
+  const fillChartData = (e: React.MouseEvent) => {
+    e.preventDefault()
+
+    setChartData(sampleChartData())
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Dashboard</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Overview" main>
+          <BaseButton
+            href="https://github.com/justboil/admin-one-vue-tailwind"
+            target="_blank"
+            icon={mdiGithub}
+            label="Start on GitHub"
+            color="contrast"
+            roundedFull
+            small
+          />
+        </SectionTitleLineWithButton>
+
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
+          <CardBoxWidget
+            trendLabel="12%"
+            trendType="up"
+            trendColor="success"
+            icon={mdiAccountMultiple}
+            iconColor="success"
+            number={512}
+            label="Clients"
+          />
+          <CardBoxWidget
+            trendLabel="16%"
+            trendType="down"
+            trendColor="danger"
+            icon={mdiCartOutline}
+            iconColor="info"
+            number={7770}
+            numberPrefix="$"
+            label="Sales"
+          />
+          <CardBoxWidget
+            trendLabel="Overflow"
+            trendType="warning"
+            trendColor="warning"
+            icon={mdiChartTimelineVariant}
+            iconColor="danger"
+            number={256}
+            numberSuffix="%"
+            label="Performance"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+          <div className="flex flex-col justify-between">
+            {transactions.map((transaction: Transaction) => (
+              <CardBoxTransaction key={transaction.id} transaction={transaction} />
+            ))}
+          </div>
+          <div className="flex flex-col justify-between">
+            {clientsListed.map((client: Client) => (
+              <CardBoxClient key={client.id} client={client} />
+            ))}
+          </div>
+        </div>
+
+        <div className="my-6">
+          <SectionBannerStarOnGitHub />
+        </div>
+
+        <SectionTitleLineWithButton icon={mdiChartPie} title="Trends overview">
+          <BaseButton icon={mdiReload} color="whiteDark" onClick={fillChartData} />
+        </SectionTitleLineWithButton>
+
+        <CardBox className="mb-6">{chartData && <ChartLineSample data={chartData} />}</CardBox>
+
+        <SectionTitleLineWithButton icon={mdiAccountMultiple} title="Clients" />
+
+        <NotificationBar color="info" icon={mdiMonitorCellphone}>
+          <b>Responsive table.</b> Collapses on mobile
+        </NotificationBar>
+
+        <CardBox hasTable>
+          <TableSampleClients />
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+Dashboard.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
+}
+
+export default Dashboard
diff --git a/pages/Error.tsx b/pages/error.tsx
similarity index 100%
rename from pages/Error.tsx
rename to pages/error.tsx
diff --git a/pages/index.tsx b/pages/index.tsx
index 570fd8a..0911531 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,35 +1,63 @@
-import { mdiChartTimelineVariant, mdiGithub } from '@mdi/js'
-import Head from 'next/head'
-import React from 'react'
-import type { ReactElement } from 'react'
-import BaseButton from '../components/BaseButton'
-import LayoutAuthenticated from '../components/layouts/Authenticated'
+import { useRouter } from 'next/router'
+import React, { ReactElement } from 'react'
+import CardBox from '../components/CardBox'
+import LayoutGuest from '../components/layouts/Guest'
 import SectionMain from '../components/SectionMain'
-import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
+import { StyleKey } from '../interfaces'
+import { gradientBgPurplePink } from '../src/colors'
+import { useAppDispatch } from '../src/stores/hooks'
+import { setDarkMode, setStyle } from '../src/stores/styleSlice'
+
+const StyleSelect = () => {
+  const dispatch = useAppDispatch()
+
+  dispatch(setDarkMode(false))
+
+  const styles: StyleKey[] = ['white', 'basic']
+
+  const router = useRouter()
+
+  const handleStylePick = (e: React.MouseEvent, style: StyleKey) => {
+    e.preventDefault()
+
+    dispatch(setStyle(style))
+
+    router.push('/dashboard')
+  }
 
-export default function Home() {
   return (
-    <>
-      <Head>
-        <title>Dashboard</title>
-      </Head>
+    <div className={`flex min-h-screen items-center justify-center ${gradientBgPurplePink}`}>
       <SectionMain>
-        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Overview" main>
-          <BaseButton
-            href="https://github.com/justboil/admin-one-vue-tailwind"
-            target="_blank"
-            icon={mdiGithub}
-            label="Start on GitHub"
-            color="contrast"
-            roundedFull
-            small
-          />
-        </SectionTitleLineWithButton>
+        <h1 className="text-4xl md:text-5xl text-center text-white font-bold mt-12 mb-3 lg:mt-0">
+          Pick a style&hellip;
+        </h1>
+        <h2 className="text-xl md:text-xl text-center text-white mb-12">
+          Style switching with a single{' '}
+          <code className="px-1.5 py-0.5 rounded bg-white bg-opacity-20">action()</code>
+        </h2>
+        <div className="grid gap-6 grid-cols-1 lg:grid-cols-2 px-6 max-w-6xl mx-auto">
+          {styles.map((style) => (
+            <CardBox key={style} className="cursor-pointer bg-gray-50" isHoverable>
+              <div className="mb-3 md:mb-6">
+                <img
+                  src={`https://static.justboil.me/templates/one/small/${style}-v3.png`}
+                  width="1280"
+                  height="720"
+                  onClick={(e) => handleStylePick(e, style)}
+                />
+              </div>
+              <h1 className="text-xl md:text-2xl font-black capitalize">{style}</h1>
+              <h2 className="text-lg md:text-xl">& Dark mode</h2>
+            </CardBox>
+          ))}
+        </div>
       </SectionMain>
-    </>
+    </div>
   )
 }
 
-Home.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
+StyleSelect.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>
 }
+
+export default StyleSelect
diff --git a/postcss.config.js b/postcss.config.js
index d5a954f..f5b0ebb 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,7 @@
 /* eslint-env node */
 module.exports = {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {},
   }
diff --git a/public/data-sources/clients.json b/public/data-sources/clients.json
new file mode 100644
index 0000000..297ec7b
--- /dev/null
+++ b/public/data-sources/clients.json
@@ -0,0 +1 @@
+{"data":[{"id":19,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Howell-Hand.svg","login":"percy64","name":"Howell Hand","company":"Kiehn-Green","city":"Emelyside","progress":70,"created":"Mar 3, 2022","created_mm_dd_yyyy":"03-03-2022"},{"id":11,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Hope-Howe.svg","login":"dare.concepcion","name":"Hope Howe","company":"Nolan Inc","city":"Paristown","progress":68,"created":"Dec 1, 2022","created_mm_dd_yyyy":"12-01-2022"},{"id":32,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Nelson-Jerde.svg","login":"geovanni.kessler","name":"Nelson Jerde","company":"Nitzsche LLC","city":"Jailynbury","progress":49,"created":"May 18, 2022","created_mm_dd_yyyy":"05-18-2022"},{"id":22,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Kim-Weimann.svg","login":"macejkovic.dashawn","name":"Kim Weimann","company":"Brown-Lueilwitz","city":"New Emie","progress":38,"created":"May 4, 2022","created_mm_dd_yyyy":"05-04-2022"},{"id":34,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Justice-OReilly.svg","login":"hilpert.leora","name":"Justice O'Reilly","company":"Lakin-Muller","city":"New Kacie","progress":38,"created":"Mar 27, 2022","created_mm_dd_yyyy":"03-27-2022"},{"id":48,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Adrienne-Mayer-III.svg","login":"ferry.sophia","name":"Adrienne Mayer III","company":"Kozey, McLaughlin and Kuhn","city":"Howardbury","progress":39,"created":"Mar 29, 2022","created_mm_dd_yyyy":"03-29-2022"},{"id":20,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Mr.-Julien-Ebert.svg","login":"gokuneva","name":"Mr. Julien Ebert","company":"Cormier LLC","city":"South Serenaburgh","progress":29,"created":"Jun 25, 2022","created_mm_dd_yyyy":"06-25-2022"},{"id":47,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Lenna-Smitham.svg","login":"paolo.walter","name":"Lenna Smitham","company":"King Inc","city":"McCulloughfort","progress":59,"created":"Oct 8, 2022","created_mm_dd_yyyy":"10-08-2022"},{"id":24,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Travis-Davis.svg","login":"lkessler","name":"Travis Davis","company":"Leannon and Sons","city":"West Frankton","progress":52,"created":"Oct 20, 2022","created_mm_dd_yyyy":"10-20-2022"},{"id":49,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Prof.-Esteban-Steuber.svg","login":"shana.lang","name":"Prof. Esteban Steuber","company":"Langosh-Ernser","city":"East Sedrick","progress":34,"created":"May 16, 2022","created_mm_dd_yyyy":"05-16-2022"},{"id":36,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Russell-Goodwin-V.svg","login":"jewel07","name":"Russell Goodwin V","company":"Nolan-Stracke","city":"Williamsonmouth","progress":55,"created":"Apr 22, 2022","created_mm_dd_yyyy":"04-22-2022"},{"id":33,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Ms.-Cassidy-Wiegand-DVM.svg","login":"burnice.okuneva","name":"Ms. Cassidy Wiegand DVM","company":"Kuhlman-Hahn","city":"New Ruthiehaven","progress":76,"created":"Sep 16, 2022","created_mm_dd_yyyy":"09-16-2022"},{"id":44,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Mr.-Watson-Brakus-PhD.svg","login":"oconnell.juanita","name":"Mr. Watson Brakus PhD","company":"Osinski, Bins and Kuhn","city":"Lake Gloria","progress":58,"created":"Jun 22, 2022","created_mm_dd_yyyy":"06-22-2022"},{"id":46,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Mr.-Garrison-Friesen-V.svg","login":"vgutmann","name":"Mr. Garrison Friesen V","company":"VonRueden, Rippin and Pfeffer","city":"Port Cieloport","progress":39,"created":"Oct 19, 2022","created_mm_dd_yyyy":"10-19-2022"},{"id":14,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Ms.-Sister-Morar.svg","login":"veum.lucio","name":"Ms. Sister Morar","company":"Gusikowski, Altenwerth and Abbott","city":"Lake Macville","progress":34,"created":"Jun 11, 2022","created_mm_dd_yyyy":"06-11-2022"},{"id":40,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Ms.-Laisha-Reinger.svg","login":"edietrich","name":"Ms. Laisha Reinger","company":"Boehm PLC","city":"West Alexiemouth","progress":73,"created":"Nov 2, 2022","created_mm_dd_yyyy":"11-02-2022"},{"id":5,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Cameron-Lind.svg","login":"mose44","name":"Cameron Lind","company":"Tremblay, Padberg and Pouros","city":"Naderview","progress":59,"created":"Sep 14, 2022","created_mm_dd_yyyy":"09-14-2022"},{"id":43,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Sarai-Little.svg","login":"rau.abelardo","name":"Sarai Little","company":"Deckow LLC","city":"Jeanieborough","progress":49,"created":"Jun 13, 2022","created_mm_dd_yyyy":"06-13-2022"},{"id":2,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Shyann-Kautzer.svg","login":"imurazik","name":"Shyann Kautzer","company":"Osinski, Boehm and Kihn","city":"New Alvera","progress":41,"created":"Feb 15, 2022","created_mm_dd_yyyy":"02-15-2022"},{"id":15,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Lorna-Christiansen.svg","login":"annalise97","name":"Lorna Christiansen","company":"Altenwerth-Friesen","city":"Port Elbertland","progress":36,"created":"Mar 9, 2022","created_mm_dd_yyyy":"03-09-2022"}]}
diff --git a/public/data-sources/history.json b/public/data-sources/history.json
new file mode 100644
index 0000000..1cc0c82
--- /dev/null
+++ b/public/data-sources/history.json
@@ -0,0 +1 @@
+{"data":[{"id":1,"amount":375.53,"account":"45721474","name":"Home Loan Account","date":"3 days ago","type":"deposit","business":"Turcotte"},{"id":2,"amount":470.26,"account":"94486537","name":"Savings Account","date":"3 days ago","type":"payment","business":"Murazik - Graham"},{"id":3,"amount":971.34,"account":"63189893","name":"Checking Account","date":"5 days ago","type":"invoice","business":"Fahey - Keebler"},{"id":4,"amount":374.63,"account":"74828780","name":"Auto Loan Account","date":"7 days ago","type":"withdraw","business":"Collier - Hintz"}]}
\ No newline at end of file
diff --git a/src/config.ts b/src/config.ts
index 8fe52c9..42ea9c6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,5 @@
-export const darkModeKey = 'darkMode'
+export const localStorageDarkModeKey = 'darkMode'
 
-export const styleKey = 'style'
+export const localStorageStyleKey = 'style'
 
 export const containerMaxW = 'xl:max-w-6xl xl:mx-auto'
diff --git a/src/menuNavBar.ts b/src/menuNavBar.ts
index 886f515..0e1b948 100644
--- a/src/menuNavBar.ts
+++ b/src/menuNavBar.ts
@@ -12,7 +12,7 @@ import {
 } from '@mdi/js'
 import { MenuNavBarItem } from '../interfaces'
 
-const menuNavBar:MenuNavBarItem[] = [
+const menuNavBar: MenuNavBarItem[] = [
   {
     icon: mdiMenu,
     label: 'Sample menu',
diff --git a/src/stores/hooks.ts b/src/stores/hooks.ts
index f1647e7..60a4163 100644
--- a/src/stores/hooks.ts
+++ b/src/stores/hooks.ts
@@ -3,4 +3,4 @@ import type { RootState, AppDispatch } from './store'
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch: () => AppDispatch = useDispatch
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
\ No newline at end of file
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
diff --git a/src/stores/mainSlice.ts b/src/stores/mainSlice.ts
index cca2ae0..45568ba 100644
--- a/src/stores/mainSlice.ts
+++ b/src/stores/mainSlice.ts
@@ -2,12 +2,10 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { UserPayloadObject } from '../../interfaces'
 
 interface MainState {
-  userName: string,
-  userEmail: null|string,
-  userAvatar: null|string,
-  isFieldFocusRegistered: boolean,
-  clients: object,
-  history: object,
+  userName: string
+  userEmail: null | string
+  userAvatar: null | string
+  isFieldFocusRegistered: boolean
 }
 
 const initialState: MainState = {
@@ -18,17 +16,13 @@ const initialState: MainState = {
 
   /* Field focus with ctrl+k (to register only once) */
   isFieldFocusRegistered: false,
-
-  /* Sample data (commonly used) */
-  clients: [],
-  history: [],
 }
 
 export const mainSlice = createSlice({
   name: 'main',
   initialState,
   reducers: {
-    setUser: (state, action:PayloadAction<UserPayloadObject>) => {
+    setUser: (state, action: PayloadAction<UserPayloadObject>) => {
       state.userName = action.payload.name
       state.userEmail = action.payload.email
       state.userAvatar = action.payload.avatar
diff --git a/src/stores/store.ts b/src/stores/store.ts
index cc1fcc3..95eae21 100644
--- a/src/stores/store.ts
+++ b/src/stores/store.ts
@@ -12,4 +12,4 @@ export const store = configureStore({
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
-export type AppDispatch = typeof store.dispatch
\ No newline at end of file
+export type AppDispatch = typeof store.dispatch
diff --git a/src/stores/styleSlice.ts b/src/stores/styleSlice.ts
index ebe2993..eb699bc 100644
--- a/src/stores/styleSlice.ts
+++ b/src/stores/styleSlice.ts
@@ -1,44 +1,45 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import * as styles from '../styles'
-import { darkModeKey, styleKey } from '../config'
+import { localStorageDarkModeKey, localStorageStyleKey } from '../config'
+import { StyleKey } from '../../interfaces'
 
 interface StyleState {
-  asideStyle: string,
-  asideScrollbarsStyle: string,
-  asideBrandStyle: string,
-  asideMenuItemStyle: string,
-  asideMenuItemActiveStyle: string,
-  asideMenuDropdownStyle: string,
-  navBarItemLabelStyle: string,
-  navBarItemLabelHoverStyle: string,
-  navBarItemLabelActiveColorStyle: string,
-  overlayStyle: string,
+  asideStyle: string
+  asideScrollbarsStyle: string
+  asideBrandStyle: string
+  asideMenuItemStyle: string
+  asideMenuItemActiveStyle: string
+  asideMenuDropdownStyle: string
+  navBarItemLabelStyle: string
+  navBarItemLabelHoverStyle: string
+  navBarItemLabelActiveColorStyle: string
+  overlayStyle: string
   darkMode: boolean
 }
 
 const initialState: StyleState = {
-  asideStyle: '',
-  asideScrollbarsStyle: '',
-  asideBrandStyle: '',
-  asideMenuItemStyle: '',
-  asideMenuItemActiveStyle: '',
-  asideMenuDropdownStyle: '',
-  navBarItemLabelStyle: '',
-  navBarItemLabelHoverStyle: '',
-  navBarItemLabelActiveColorStyle: '',
-  overlayStyle: '',
-  darkMode: false
+  asideStyle: styles.basic.aside,
+  asideScrollbarsStyle: styles.basic.asideScrollbars,
+  asideBrandStyle: styles.basic.asideBrand,
+  asideMenuItemStyle: styles.basic.asideMenuItem,
+  asideMenuItemActiveStyle: styles.basic.asideMenuItemActive,
+  asideMenuDropdownStyle: styles.basic.asideMenuDropdown,
+  navBarItemLabelStyle: styles.basic.navBarItemLabel,
+  navBarItemLabelHoverStyle: styles.basic.navBarItemLabelHover,
+  navBarItemLabelActiveColorStyle: styles.basic.navBarItemLabelActiveColor,
+  overlayStyle: styles.basic.overlay,
+  darkMode: false,
 }
 
 export const styleSlice = createSlice({
   name: 'style',
   initialState,
   reducers: {
-    setDarkMode: (state, action:PayloadAction<boolean|null>) => {
+    setDarkMode: (state, action: PayloadAction<boolean | null>) => {
       state.darkMode = action.payload !== null ? action.payload : !state.darkMode
 
       if (typeof localStorage !== 'undefined') {
-        localStorage.setItem(darkModeKey, state.darkMode ? '1' : '0')
+        localStorage.setItem(localStorageDarkModeKey, state.darkMode ? '1' : '0')
       }
 
       if (typeof document !== 'undefined') {
@@ -50,13 +51,13 @@ export const styleSlice = createSlice({
       }
     },
 
-    setStyle: (state, action: PayloadAction<string>) => {
+    setStyle: (state, action: PayloadAction<StyleKey>) => {
       if (!styles[action.payload]) {
         return
       }
 
       if (typeof localStorage !== 'undefined') {
-        localStorage.setItem(styleKey, action.payload)
+        localStorage.setItem(localStorageStyleKey, action.payload)
       }
 
       const style = styles[action.payload]
diff --git a/src/styles.ts b/src/styles.ts
index e8a33d8..087183d 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -1,14 +1,14 @@
 interface StyleObject {
-  aside: string,
-  asideScrollbars: string,
-  asideBrand: string,
-  asideMenuItem: string,
-  asideMenuItemActive: string,
-  asideMenuDropdown: string,
-  navBarItemLabel: string,
-  navBarItemLabelHover: string,
-  navBarItemLabelActiveColor: string,
-  overlay: string,
+  aside: string
+  asideScrollbars: string
+  asideBrand: string
+  asideMenuItem: string
+  asideMenuItemActive: string
+  asideMenuDropdown: string
+  navBarItemLabel: string
+  navBarItemLabelHover: string
+  navBarItemLabelActiveColor: string
+  overlay: string
 }
 
 export const basic: StyleObject = {
diff --git a/styles/_checkbox-radio-switch.css b/styles/_checkbox-radio-switch.css
index 5d5ef37..a7f567b 100644
--- a/styles/_checkbox-radio-switch.css
+++ b/styles/_checkbox-radio-switch.css
@@ -1,61 +1,59 @@
-.checkbox, .radio, .switch {
-  @apply inline-flex items-center cursor-pointer relative;
-}
-
-.checkbox input[type=checkbox], .radio input[type=radio], .switch input[type=checkbox] {
-  @apply absolute left-0 opacity-0 -z-1;
-}
-
-.checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check, .switch input[type=checkbox]+.check {
-  @apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
-}
-
-.checkbox input[type=checkbox]:focus+.check, .radio input[type=radio]:focus+.check, .switch input[type=checkbox]:focus+.check {
-  @apply ring ring-blue-700;
-}
-
-.checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check {
-  @apply block w-5 h-5;
-}
-
-.checkbox input[type=checkbox]+.check {
-  @apply rounded;
-}
-
-.switch input[type=checkbox]+.check {
-  @apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-gray-200;
-}
-
-.radio input[type=radio]+.check, .switch input[type=checkbox]+.check, .switch input[type=checkbox]+.check:before {
-  @apply rounded-full;
-}
-
-.checkbox input[type=checkbox]:checked+.check, .radio input[type=radio]:checked+.check {
-  @apply bg-no-repeat bg-center bg-blue-600 border-blue-600 border-4;
-}
-
-.checkbox input[type=checkbox]:checked+.check {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
-}
-
-.radio input[type=radio]:checked+.check {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
-}
-
-.switch input[type=checkbox]:checked+.check {
-  @apply bg-blue-600 border-blue-600;
-}
-
-.switch input[type=checkbox]+.check:before {
-  content: '';
-  @apply block w-5 h-5 bg-white border border-gray-700;
-}
-
-.switch input[type=checkbox]:checked+.check:before {
-  transform: translate3d(110%, 0 ,0);
-  @apply border-blue-600;
-}
-
-.checkbox .control-label, .radio .control-label, .switch .control-label {
-  @apply pl-2;
-}
+@layer components {
+  .checkbox, .radio, .switch {
+    @apply inline-flex items-center cursor-pointer relative;
+  }
+
+  .checkbox input[type=checkbox], .radio input[type=radio], .switch input[type=checkbox] {
+    @apply absolute left-0 opacity-0 -z-1;
+  }
+
+  .checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check, .switch input[type=checkbox]+.check {
+    @apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
+  }
+
+  .checkbox input[type=checkbox]:focus+.check, .radio input[type=radio]:focus+.check, .switch input[type=checkbox]:focus+.check {
+    @apply ring ring-blue-700;
+  }
+
+  .checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check {
+    @apply block w-5 h-5;
+  }
+
+  .checkbox input[type=checkbox]+.check {
+    @apply rounded;
+  }
+
+  .switch input[type=checkbox]+.check {
+    @apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-gray-200;
+  }
+
+  .radio input[type=radio]+.check, .switch input[type=checkbox]+.check, .switch input[type=checkbox]+.check:before {
+    @apply rounded-full;
+  }
+
+  .checkbox input[type=checkbox]:checked+.check, .radio input[type=radio]:checked+.check {
+    @apply bg-no-repeat bg-center border-4;
+  }
+
+  .checkbox input[type=checkbox]:checked+.check {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
+  }
+
+  .radio input[type=radio]:checked+.check {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
+  }
+
+  .switch input[type=checkbox]:checked+.check, .checkbox input[type=checkbox]:checked+.check, .radio input[type=radio]:checked+.check {
+    @apply bg-blue-600 border-blue-600;
+  }
+
+  .switch input[type=checkbox]+.check:before {
+    content: '';
+    @apply block w-5 h-5 bg-white border border-gray-700;
+  }
+
+  .switch input[type=checkbox]:checked+.check:before {
+    transform: translate3d(110%, 0 ,0);
+    @apply border-blue-600;
+  }
+}
\ No newline at end of file
diff --git a/styles/_progress.css b/styles/_progress.css
index 33bb821..65d6796 100644
--- a/styles/_progress.css
+++ b/styles/_progress.css
@@ -1,19 +1,21 @@
-progress {
-  @apply h-3 rounded-full overflow-hidden;
-}
-
-progress::-webkit-progress-bar {
-  @apply bg-blue-200;
-}
-
-progress::-webkit-progress-value {
-  @apply bg-blue-500;
-}
-
-progress::-moz-progress-bar {
-  @apply bg-blue-500;
-}
-
-progress::-ms-fill {
-  @apply bg-blue-500 border-0;
+@layer base {
+  progress {
+    @apply h-3 rounded-full overflow-hidden;
+  }
+  
+  progress::-webkit-progress-bar {
+    @apply bg-blue-200;
+  }
+  
+  progress::-webkit-progress-value {
+    @apply bg-blue-500;
+  }
+  
+  progress::-moz-progress-bar {
+    @apply bg-blue-500;
+  }
+  
+  progress::-ms-fill {
+    @apply bg-blue-500 border-0;
+  }
 }
diff --git a/styles/_scrollbars.css b/styles/_scrollbars.css
index 922890e..a181b84 100644
--- a/styles/_scrollbars.css
+++ b/styles/_scrollbars.css
@@ -1,57 +1,41 @@
-html {
-  scrollbar-width: thin;
-}
-
-html::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-html::-webkit-scrollbar-thumb {
-  @apply rounded;
-}
-
-html {
-  @apply overflow-auto;
-  scrollbar-color: #9ca3af #e5e7eb;
-}
-
-html::-webkit-scrollbar-track {
-  @apply bg-gray-200;
-}
-
-html::-webkit-scrollbar-thumb {
-  @apply bg-gray-400;
-}
-
-html::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-500;
-}
-
-html.dark-scrollbars {
-  scrollbar-color: #374151 #111827;
-}
-
-html.dark-scrollbars::-webkit-scrollbar-track {
-  @apply bg-gray-900;
-}
-
-html.dark-scrollbars::-webkit-scrollbar-thumb {
-  @apply bg-gray-700;
-}
-
-html.dark-scrollbars::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-600;
-}
-
-.dark #aside {
-  scrollbar-color: #374151 #111827;
-}
-
-.dark #aside::-webkit-scrollbar-track {
-  @apply bg-gray-900;
-}
-
-.dark #aside::-webkit-scrollbar-thumb {
-  @apply bg-gray-700;
+@layer base {
+  html {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(156, 163, 175) rgb(249, 250, 251);
+  }
+  
+  body::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  
+  body::-webkit-scrollbar-track {
+    @apply bg-gray-50;
+  }
+  
+  body::-webkit-scrollbar-thumb {
+    @apply bg-gray-400 rounded;
+  }
+  
+  body::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-500;
+  }
+}
+
+@layer utilities {
+  .dark-scrollbars-compat {
+    scrollbar-color: rgb(71, 85, 105) rgb(30, 41, 59);
+  }
+  
+  .dark-scrollbars::-webkit-scrollbar-track {
+    @apply bg-slate-800;
+  }
+  
+  .dark-scrollbars::-webkit-scrollbar-thumb {
+    @apply bg-slate-600;
+  }
+  
+  .dark-scrollbars::-webkit-scrollbar-thumb:hover {
+    @apply bg-slate-500;
+  }
 }
diff --git a/styles/_table.css b/styles/_table.css
index 6a1a8b4..962b9af 100644
--- a/styles/_table.css
+++ b/styles/_table.css
@@ -1,46 +1,48 @@
-table {
-  @apply w-full;
-}
-
-thead {
-  @apply hidden lg:table-header-group;
-}
-
-tr {
-  @apply max-w-full block relative border-b-4 border-gray-100
-    lg:table-row lg:border-b-0 dark:border-slate-800;
-}
-
-tr:last-child {
-  @apply border-b-0;
-}
-
-td:not(:first-child) {
-  @apply lg:border-l lg:border-t-0 lg:border-r-0 lg:border-b-0 lg:border-gray-100 lg:dark:border-slate-700;
-}
-
-th {
-  @apply lg:text-left lg:p-3;
-}
-
-td {
-  @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100
-    lg:table-cell lg:text-left lg:p-3 lg:align-middle lg:border-b-0 dark:border-slate-800;
-}
-
-td:last-child {
-  @apply border-b-0;
-}
-
-tbody tr, tbody tr:nth-child(odd) {
-  @apply lg:hover:bg-gray-100 lg:dark:hover:bg-slate-700/70;
-}
-
-tbody tr:nth-child(odd) {
-  @apply lg:bg-gray-50 lg:dark:bg-slate-800;
-}
-
-td:before {
-  content: attr(data-label);
-  @apply font-semibold pr-3 text-left lg:hidden;
+@layer base {
+  table {
+    @apply w-full;
+  }
+  
+  thead {
+    @apply hidden lg:table-header-group;
+  }
+  
+  tr {
+    @apply max-w-full block relative border-b-4 border-gray-100
+      lg:table-row lg:border-b-0 dark:border-slate-800;
+  }
+  
+  tr:last-child {
+    @apply border-b-0;
+  }
+  
+  td:not(:first-child) {
+    @apply lg:border-l lg:border-t-0 lg:border-r-0 lg:border-b-0 lg:border-gray-100 lg:dark:border-slate-700;
+  }
+  
+  th {
+    @apply lg:text-left lg:p-3;
+  }
+  
+  td {
+    @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100
+      lg:table-cell lg:text-left lg:p-3 lg:align-middle lg:border-b-0 dark:border-slate-800;
+  }
+  
+  td:last-child {
+    @apply border-b-0;
+  }
+  
+  tbody tr, tbody tr:nth-child(odd) {
+    @apply lg:hover:bg-gray-100 lg:dark:hover:bg-slate-700/70;
+  }
+  
+  tbody tr:nth-child(odd) {
+    @apply lg:bg-gray-100/50 lg:dark:bg-slate-800/50;
+  }
+  
+  td:before {
+    content: attr(data-label);
+    @apply font-semibold pr-3 text-left lg:hidden;
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 918ada0..77fc331 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -51,14 +51,16 @@ module.exports = {
     plugin(function ({ matchUtilities, theme }) {
       matchUtilities(
         {
-          'aside-scrollbars': value => {
+          'aside-scrollbars': (value) => {
             const track = value === 'light' ? '100' : '900'
             const thumb = value === 'light' ? '300' : '600'
             const color = value === 'light' ? 'gray' : value
 
             return {
               scrollbarWidth: 'thin',
-              scrollbarColor: `${theme(`colors.${color}.${thumb}`)} ${theme(`colors.${color}.${track}`)}`,
+              scrollbarColor: `${theme(`colors.${color}.${thumb}`)} ${theme(
+                `colors.${color}.${track}`
+              )}`,
               '&::-webkit-scrollbar': {
                 width: '8px',
                 height: '8px'