upgade package
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,102 @@
|
||||
/* eslint-disable no-prototype-builtins */
|
||||
import {useEffect} from 'react'
|
||||
import {ILayout, useLayout} from '../../core'
|
||||
import {
|
||||
ToolbarAccounting,
|
||||
ToolbarClassic,
|
||||
ToolbarExtended,
|
||||
ToolbarReports,
|
||||
ToolbarSaas,
|
||||
} from './toolbars'
|
||||
|
||||
const Toolbar = () => {
|
||||
const {config} = useLayout()
|
||||
useEffect(() => {
|
||||
updateDOM(config)
|
||||
document.body.setAttribute('data-kt-app-toolbar-enabled', 'true')
|
||||
}, [config])
|
||||
|
||||
switch (config.app?.toolbar?.layout) {
|
||||
case 'classic':
|
||||
return <ToolbarClassic />
|
||||
case 'accounting':
|
||||
return <ToolbarAccounting />
|
||||
case 'extended':
|
||||
return <ToolbarExtended />
|
||||
case 'reports':
|
||||
return <ToolbarReports />
|
||||
case 'saas':
|
||||
return <ToolbarSaas />
|
||||
default:
|
||||
return <ToolbarClassic />
|
||||
}
|
||||
}
|
||||
|
||||
const updateDOM = (config: ILayout) => {
|
||||
let appToolbarSwapAttributes: {[attrName: string]: string} = {}
|
||||
const appToolbarSwapEnabled = config.app?.toolbar?.swap?.enabled
|
||||
if (appToolbarSwapEnabled) {
|
||||
appToolbarSwapAttributes = config.app?.toolbar?.swap?.attributes as {[attrName: string]: string}
|
||||
}
|
||||
|
||||
let appToolbarStickyAttributes: {[attrName: string]: string} = {}
|
||||
const appToolbarStickyEnabled = config.app?.toolbar?.sticky?.enabled
|
||||
if (appToolbarStickyEnabled) {
|
||||
appToolbarStickyAttributes = config.app?.toolbar?.sticky?.attributes as {
|
||||
[attrName: string]: string
|
||||
}
|
||||
|
||||
let appToolbarMinimizeAttributes: {[attrName: string]: string} = {}
|
||||
const appToolbarMinimizeEnabled = config.app?.toolbar?.minimize?.enabled
|
||||
if (appToolbarMinimizeEnabled) {
|
||||
appToolbarMinimizeAttributes = config.app?.toolbar?.minimize?.attributes as {
|
||||
[attrName: string]: string
|
||||
}
|
||||
}
|
||||
|
||||
if (config.app?.toolbar?.fixed?.desktop) {
|
||||
document.body.setAttribute('data-kt-app-toolbar-fixed', 'true')
|
||||
}
|
||||
|
||||
if (config.app?.toolbar?.fixed?.mobile) {
|
||||
document.body.setAttribute('data-kt-app-toolbar-fixed-mobile', 'true')
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const toolbarElement = document.getElementById('kt_app_toolbar')
|
||||
// toolbar
|
||||
if (toolbarElement) {
|
||||
const toolbarAttributes = toolbarElement
|
||||
.getAttributeNames()
|
||||
.filter((t) => t.indexOf('data-') > -1)
|
||||
toolbarAttributes.forEach((attr) => toolbarElement.removeAttribute(attr))
|
||||
|
||||
if (appToolbarSwapEnabled) {
|
||||
for (const key in appToolbarSwapAttributes) {
|
||||
if (appToolbarSwapAttributes.hasOwnProperty(key)) {
|
||||
toolbarElement.setAttribute(key, appToolbarSwapAttributes[key])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (appToolbarStickyEnabled) {
|
||||
for (const key in appToolbarStickyAttributes) {
|
||||
if (appToolbarStickyAttributes.hasOwnProperty(key)) {
|
||||
toolbarElement.setAttribute(key, appToolbarStickyAttributes[key])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (appToolbarMinimizeEnabled) {
|
||||
for (const key in appToolbarMinimizeAttributes) {
|
||||
if (appToolbarMinimizeAttributes.hasOwnProperty(key)) {
|
||||
toolbarElement.setAttribute(key, appToolbarMinimizeAttributes[key])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
|
||||
export {Toolbar}
|
||||
@@ -0,0 +1,51 @@
|
||||
import clsx from 'clsx'
|
||||
import {ToolbarType, useLayout} from '../../core'
|
||||
import {Toolbar} from './Toolbar'
|
||||
import {PageTitleWrapper} from './page-title'
|
||||
|
||||
const ToolbarWrapper = () => {
|
||||
const {config, classes} = useLayout()
|
||||
if (!config.app?.toolbar?.display) {
|
||||
return null
|
||||
}
|
||||
|
||||
const isPageTitleVisible = showPageTitle(
|
||||
config.app?.toolbar?.layout,
|
||||
config.app?.pageTitle?.display
|
||||
)
|
||||
|
||||
return (
|
||||
<div
|
||||
id='kt_app_toolbar'
|
||||
className={clsx('app-toolbar', classes.toolbar.join(' '), config?.app?.toolbar?.class)}
|
||||
>
|
||||
<div
|
||||
id='kt_app_toolbar_container'
|
||||
className={clsx(
|
||||
'app-container',
|
||||
classes.toolbarContainer.join(' '),
|
||||
config.app?.toolbar?.containerClass,
|
||||
config.app?.toolbar?.minimize?.enabled ? 'app-toolbar-minimize' : '',
|
||||
{
|
||||
'container-fluid': config.app?.toolbar?.container === 'fluid',
|
||||
'container-xxl': config.app?.toolbar?.container === 'fixed',
|
||||
}
|
||||
)}
|
||||
>
|
||||
{isPageTitleVisible && <PageTitleWrapper />}
|
||||
<Toolbar />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const showPageTitle = (appToolbarLayout?: ToolbarType, appPageTitleDisplay?: boolean): boolean => {
|
||||
const viewsWithPageTitles = ['classic', 'reports', 'saas']
|
||||
if (!appToolbarLayout || !appPageTitleDisplay) {
|
||||
return false
|
||||
}
|
||||
|
||||
return appPageTitleDisplay && viewsWithPageTitles.some((t) => t === appToolbarLayout)
|
||||
}
|
||||
|
||||
export {ToolbarWrapper}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './ToolbarWrapper'
|
||||
@@ -0,0 +1,86 @@
|
||||
import clsx from 'clsx'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {useLayout} from '../../../core'
|
||||
import {usePageData} from '../../../core/PageData'
|
||||
|
||||
const PageTitle = () => {
|
||||
const {pageTitle, pageDescription, pageBreadcrumbs} = usePageData()
|
||||
const {config, classes} = useLayout()
|
||||
const appPageTitleDirection = config.app?.pageTitle?.direction
|
||||
|
||||
return (
|
||||
<div
|
||||
id='kt_page_title'
|
||||
data-kt-swapper='true'
|
||||
data-kt-swapper-mode='prepend'
|
||||
data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
|
||||
className={clsx(
|
||||
'page-title d-flex flex-wrap me-3',
|
||||
classes.pageTitle.join(' '),
|
||||
config.app?.pageTitle?.class,
|
||||
{
|
||||
'flex-column justify-content-center': appPageTitleDirection === 'column',
|
||||
'align-items-center': appPageTitleDirection !== 'column',
|
||||
}
|
||||
)}
|
||||
>
|
||||
{/* begin::Title */}
|
||||
{config.app?.pageTitle?.display && pageTitle && (
|
||||
<h1
|
||||
className={clsx('page-heading d-flex text-gray-900 fw-bold fs-3 my-0', {
|
||||
'flex-column justify-content-center': appPageTitleDirection,
|
||||
'align-items-center': !appPageTitleDirection,
|
||||
})}
|
||||
>
|
||||
{pageTitle}
|
||||
{pageDescription && config.app?.pageTitle && config.app?.pageTitle?.description && (
|
||||
<span
|
||||
className={clsx('page-desc text-muted fs-7 fw-semibold', {
|
||||
'pt-2': appPageTitleDirection === 'column',
|
||||
})}
|
||||
>
|
||||
{config.app?.pageTitle?.direction === 'row' && (
|
||||
<span className='h-20px border-1 border-gray-300 border-start ms-3 mx-2'></span>
|
||||
)}
|
||||
{pageDescription}{' '}
|
||||
</span>
|
||||
)}
|
||||
</h1>
|
||||
)}
|
||||
{/* end::Title */}
|
||||
|
||||
{pageBreadcrumbs &&
|
||||
pageBreadcrumbs.length > 0 &&
|
||||
config.app?.pageTitle &&
|
||||
config.app?.pageTitle?.breadCrumb && (
|
||||
<>
|
||||
{config.app?.pageTitle?.direction === 'row' && (
|
||||
<span className='h-20px border-gray-300 border-start mx-4'></span>
|
||||
)}
|
||||
<ul className='breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0'>
|
||||
{Array.from(pageBreadcrumbs).map((item, index) => (
|
||||
<li
|
||||
className={clsx('breadcrumb-item', {
|
||||
'text-gray-900': !item.isSeparator && item.isActive,
|
||||
'text-muted': !item.isSeparator && !item.isActive,
|
||||
})}
|
||||
key={`${item.path}${index}`}
|
||||
>
|
||||
{!item.isSeparator ? (
|
||||
<Link className='text-muted text-hover-primary' to={item.path}>
|
||||
{item.title}
|
||||
</Link>
|
||||
) : (
|
||||
<span className='bullet bg-gray-500 w-5px h-2px'></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
<li className='breadcrumb-item text-gray-900'>{pageTitle}</li>
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {PageTitle}
|
||||
@@ -0,0 +1,13 @@
|
||||
import {useLayout} from '../../../core'
|
||||
import {PageTitle} from './PageTitle'
|
||||
|
||||
const PageTitleWrapper = () => {
|
||||
const {config} = useLayout()
|
||||
if (!config.app?.pageTitle?.display) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <PageTitle />
|
||||
}
|
||||
|
||||
export {PageTitleWrapper}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './PageTitleWrapper'
|
||||
@@ -0,0 +1,139 @@
|
||||
|
||||
import {FC, useEffect, useState} from 'react'
|
||||
import {KTIcon} from '../../../../helpers'
|
||||
|
||||
const ToolbarAccounting: FC = () => {
|
||||
const [progress, setProgress] = useState<string>('1')
|
||||
const [filter, setFilter] = useState<string>('1')
|
||||
|
||||
useEffect(() => {
|
||||
document.body.setAttribute('data-kt-app-toolbar-fixed', 'true')
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='d-flex align-items-center me-5'>
|
||||
{/* begin::Input group */}
|
||||
<div className='d-flex align-items-center flex-shrink-0'>
|
||||
{/* begin::Label */}
|
||||
<span className='fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block'>Actions:</span>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Actions */}
|
||||
<div className='d-flex flex-shrink-0'>
|
||||
{/* begin::Button */}
|
||||
<div
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-placement='top'
|
||||
data-bs-trigger='hover'
|
||||
title='Add a team member'
|
||||
>
|
||||
<a href='#' className='btn btn-sm btn-icon btn-active-color-success'>
|
||||
<KTIcon iconName='plus-square' className='fs-2x' />
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Button */}
|
||||
|
||||
{/* begin::Button */}
|
||||
<div
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-placement='top'
|
||||
data-bs-trigger='hover'
|
||||
title='Create new account'
|
||||
>
|
||||
<a href='#' className='btn btn-sm btn-icon btn-active-color-success'>
|
||||
<KTIcon iconName='minus-square' className='fs-2x' />
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Button */}
|
||||
|
||||
{/* begin::Button */}
|
||||
<div
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-placement='top'
|
||||
data-bs-trigger='hover'
|
||||
title='Invite friends'
|
||||
>
|
||||
<a href='#' className='btn btn-sm btn-icon btn-active-color-success'>
|
||||
<KTIcon iconName='dots-square' className='fs-2x' />
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Button */}
|
||||
</div>
|
||||
{/* end::Actions */}
|
||||
</div>
|
||||
{/* end::Input group */}
|
||||
|
||||
{/* begin::Input group */}
|
||||
<div className='d-flex align-items-center flex-shrink-0'>
|
||||
{/* begin::Desktop separartor */}
|
||||
<div className='bullet bg-secondary h-35px w-1px mx-5'></div>
|
||||
{/* end::Desktop separartor */}
|
||||
|
||||
{/* begin::Label */}
|
||||
<span className='fs-7 text-gray-700 fw-bold pe-4 ps-1 d-none d-md-block'>Progress:</span>
|
||||
{/* end::Label */}
|
||||
|
||||
<div className='progress w-100px w-xl-150px w-xxl-300px h-25px bg-light-success'>
|
||||
<div
|
||||
className='progress-bar rounded bg-success fs-7 fw-bold'
|
||||
role='progressbar'
|
||||
style={{width: '72%'}}
|
||||
aria-valuenow={72}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
>
|
||||
72%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Input group */}
|
||||
{/* end::Toolbar start */}
|
||||
</div>
|
||||
{/* begin::Toolbar end */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin::Input group */}
|
||||
<div className='me-3'>
|
||||
{/* begin::Select */}
|
||||
<select
|
||||
className='form-select form-select-sm form-select-solid'
|
||||
data-control='select2'
|
||||
data-placeholder='Latest'
|
||||
data-hide-search='true'
|
||||
value={progress}
|
||||
onChange={(e) => setProgress(e.target.value)}
|
||||
>
|
||||
<option value=''></option>
|
||||
<option value='1'>Today 16 Feb</option>
|
||||
<option value='2'>In Progress</option>
|
||||
<option value='3'>Done</option>
|
||||
</select>
|
||||
{/* end::Select */}
|
||||
</div>
|
||||
{/* end::Input group- */}
|
||||
|
||||
{/* begin::Input group- */}
|
||||
<div className='m-0'>
|
||||
{/* begin::Select */}
|
||||
<select
|
||||
className='form-select form-select-sm form-select-solid w-md-125px'
|
||||
data-control='select2'
|
||||
data-placeholder='Filters'
|
||||
data-hide-search='true'
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
>
|
||||
<option value=''></option>
|
||||
<option value='1'>Filters</option>
|
||||
<option value='2'>In Progress</option>
|
||||
<option value='3'>Done</option>
|
||||
</select>
|
||||
{/* end::Content */}
|
||||
</div>
|
||||
{/* end::Input group- */}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {ToolbarAccounting}
|
||||
@@ -0,0 +1,66 @@
|
||||
|
||||
import clsx from 'clsx'
|
||||
import {useState} from 'react'
|
||||
import {KTIcon} from '../../../../helpers'
|
||||
import {CreateAppModal, Dropdown1} from '../../../../partials'
|
||||
import {useLayout} from '../../../core'
|
||||
|
||||
const ToolbarClassic = () => {
|
||||
const {config} = useLayout()
|
||||
const [showCreateAppModal, setShowCreateAppModal] = useState<boolean>(false)
|
||||
const daterangepickerButtonClass = config.app?.toolbar?.fixed?.desktop
|
||||
? 'btn-light'
|
||||
: 'bg-body btn-color-gray-700 btn-active-color-primary'
|
||||
|
||||
return (
|
||||
<div className='d-flex align-items-center gap-2 gap-lg-3'>
|
||||
{config.app?.toolbar?.filterButton && (
|
||||
<div className='m-0'>
|
||||
<a
|
||||
href='#'
|
||||
className={clsx('btn btn-sm btn-flex fw-bold', daterangepickerButtonClass)}
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
>
|
||||
<KTIcon iconName='filter' className='fs-6 text-muted me-1' />
|
||||
Filter
|
||||
</a>
|
||||
<Dropdown1 />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{config.app?.toolbar?.daterangepickerButton && (
|
||||
<div
|
||||
data-kt-daterangepicker='true'
|
||||
data-kt-daterangepicker-opens='left'
|
||||
className={clsx(
|
||||
'btn btn-sm fw-bold d-flex align-items-center px-4',
|
||||
daterangepickerButtonClass
|
||||
)}
|
||||
>
|
||||
<div className='text-gray-600 fw-bold'>Loading date range...</div>
|
||||
<KTIcon iconName='calendar-8' className='fs-1 ms-2 me-0' />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{config.app?.toolbar?.secondaryButton && (
|
||||
<a href='#' className='btn btn-sm btn-flex btn-light fw-bold'>
|
||||
Filter
|
||||
</a>
|
||||
)}
|
||||
|
||||
{config.app?.toolbar?.primaryButton && (
|
||||
<a
|
||||
href='#'
|
||||
onClick={() => setShowCreateAppModal(true)}
|
||||
className='btn btn-sm fw-bold btn-primary'
|
||||
>
|
||||
Create
|
||||
</a>
|
||||
)}
|
||||
<CreateAppModal show={showCreateAppModal} handleClose={() => setShowCreateAppModal(false)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ToolbarClassic}
|
||||
@@ -0,0 +1,154 @@
|
||||
|
||||
import {FC, useEffect, useState} from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../../helpers'
|
||||
|
||||
const ToolbarExtended: FC = () => {
|
||||
const [progress, setProgress] = useState<string>('1')
|
||||
const [search, setSearch] = useState<string>('')
|
||||
|
||||
useEffect(() => {
|
||||
document.body.setAttribute('data-kt-app-toolbar-fixed', 'true')
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='d-flex align-items-center flex-shrink-0 me-5'>
|
||||
{/* begin::Label */}
|
||||
<span className='fs-7 fw-bold text-gray-700 pe-4 d-none d-md-block'>Team:</span>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Users */}
|
||||
<div className='symbol-group symbol-hover flex-shrink-0 me-2'>
|
||||
{/* begin::User */}
|
||||
<div className='symbol symbol-circle symbol-35px'>
|
||||
<div className='symbol-label fw-bold bg-warning text-inverse-warning'>A</div>
|
||||
</div>
|
||||
{/* end::User */}
|
||||
|
||||
{/* begin::User */}
|
||||
<div className='symbol symbol-circle symbol-35px'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-1.jpg')} alt='' />
|
||||
</div>
|
||||
{/* end::User */}
|
||||
|
||||
{/* begin::User */}
|
||||
<div className='symbol symbol-circle symbol-35px'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-2.jpg')} alt='' />
|
||||
</div>
|
||||
{/* end::User */}
|
||||
|
||||
{/* begin::User */}
|
||||
<div className='symbol symbol-circle symbol-35px'>
|
||||
<div className='symbol-label fw-bold bg-primary text-inverse-primary'>S</div>
|
||||
</div>
|
||||
{/* end::User */}
|
||||
|
||||
{/* begin::User */}
|
||||
<div className='symbol symbol-circle symbol-35px'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-5.jpg')} alt='' />
|
||||
</div>
|
||||
{/* end::User */}
|
||||
|
||||
{/* begin::User */}
|
||||
<div className='symbol symbol-circle symbol-35px'>
|
||||
<div className='symbol-label fw-bold bg-danger text-inverse-danger'>P</div>
|
||||
</div>
|
||||
{/* end::User */}
|
||||
|
||||
{/* begin::User */}
|
||||
<div className='symbol symbol-circle symbol-35px'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-20.jpg')} alt='' />
|
||||
</div>
|
||||
{/* end::User */}
|
||||
</div>
|
||||
{/* end::Users */}
|
||||
|
||||
{/* begin::Button */}
|
||||
<div
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-placement='top'
|
||||
data-bs-trigger='hover'
|
||||
title='Invite a team member'
|
||||
>
|
||||
<a href='#' className='btn btn-sm btn-icon'>
|
||||
<KTIcon iconName='plus-square' className='fs-2hx text-success' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Button */}
|
||||
{/* end::Toolbar start */}
|
||||
|
||||
{/* begin::Toolbar end */}
|
||||
<div className='d-flex align-items-center overflow-auto'>
|
||||
{/* begin::Search */}
|
||||
<div className='position-relative my-1'>
|
||||
<KTIcon
|
||||
iconName='magnifier'
|
||||
className='fs-3 text-gray-500 position-absolute top-50 translate-middle ps-10'
|
||||
/>
|
||||
<input
|
||||
type='text'
|
||||
className='form-control form-control-sm form-control-solid w-150px ps-10'
|
||||
name='Search Team'
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder='Search Team'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Search */}
|
||||
|
||||
{/* begin::Separartor */}
|
||||
<div className='bullet bg-secondary h-35px w-1px mx-6'></div>
|
||||
{/* end::Separartor */}
|
||||
|
||||
{/* begin::Label */}
|
||||
<span className='fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block'>
|
||||
Sort By:
|
||||
</span>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Select */}
|
||||
<select
|
||||
className='form-select form-select-sm w-125px form-select-solid me-6'
|
||||
data-control='select2'
|
||||
data-placeholder='Latest'
|
||||
data-hide-search='true'
|
||||
value={progress}
|
||||
onChange={(e) => setProgress(e.target.value)}
|
||||
>
|
||||
<option value=''></option>
|
||||
<option value='1'>Latest</option>
|
||||
<option value='2'>In Progress</option>
|
||||
<option value='3'>Done</option>
|
||||
</select>
|
||||
{/* end::Select */}
|
||||
|
||||
{/* begin::Actions */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-light-primary me-3'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-placement='top'
|
||||
title='Enable grid view'
|
||||
>
|
||||
<KTIcon iconName='element-11' className='fs-3 text-primary' />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-light'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-placement='top'
|
||||
title='Enable row view'
|
||||
>
|
||||
<KTIcon iconName='row-horizontal' className='fs-3 text-gray-500' />
|
||||
</button>
|
||||
</div>
|
||||
{/* end::Actions */}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {ToolbarExtended}
|
||||
@@ -0,0 +1,115 @@
|
||||
|
||||
import {useEffect, useState} from 'react'
|
||||
import {KTIcon} from '../../../../helpers'
|
||||
|
||||
const ToolbarReports = () => {
|
||||
const [progress, setProgress] = useState<string>('1')
|
||||
|
||||
useEffect(() => {
|
||||
document.body.setAttribute('data-kt-app-toolbar-fixed', 'true')
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className='d-flex align-items-center overflow-auto'>
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex align-items-center flex-shrink-0'>
|
||||
{/* begin::Label */}
|
||||
<span className='fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block'>
|
||||
Filter By:
|
||||
</span>
|
||||
{/* end::Label */}
|
||||
|
||||
<div className='flex-shrink-0 '>
|
||||
<ul className='nav'>
|
||||
<li className='nav-item'>
|
||||
<a
|
||||
className='nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light active fw-semibold fs-7 px-4 me-1'
|
||||
data-bs-toggle='tab'
|
||||
href='#'
|
||||
>
|
||||
Today
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='nav-item'>
|
||||
<a
|
||||
className='nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4 me-1'
|
||||
data-bs-toggle='tab'
|
||||
href=''
|
||||
>
|
||||
Week
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='nav-item'>
|
||||
<a
|
||||
className='nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4'
|
||||
data-bs-toggle='tab'
|
||||
href='#'
|
||||
>
|
||||
Day
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
|
||||
{/* begin::Separartor */}
|
||||
<div className='bullet bg-secondary h-35px w-1px mx-5'></div>
|
||||
{/* end::Separartor */}
|
||||
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin::Label */}
|
||||
<span className='fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block'>
|
||||
Sort By:
|
||||
</span>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Select */}
|
||||
<select
|
||||
className='form-select form-select-sm w-md-125px form-select-solid'
|
||||
data-control='select2'
|
||||
data-placeholder='Latest'
|
||||
data-hide-search='true'
|
||||
value={progress}
|
||||
onChange={(e) => setProgress(e.target.value)}
|
||||
>
|
||||
<option value=''></option>
|
||||
<option value='1'>Latest</option>
|
||||
<option value='2'>In Progress</option>
|
||||
<option value='3'>Done</option>
|
||||
</select>
|
||||
{/* end::Select */}
|
||||
|
||||
{/* begin::Actions */}
|
||||
<div className='d-flex align-items-center ms-3'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-light-primary me-3'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-placement='top'
|
||||
title='Enable grid view'
|
||||
>
|
||||
<KTIcon iconName='element-11' className='fs-2 text-primary' />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-light'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-placement='top'
|
||||
title='Enable row view'
|
||||
>
|
||||
<KTIcon iconName='abstract-14' className=' fs-2 text-gray-500' />
|
||||
</button>
|
||||
</div>
|
||||
{/* end::Actions */}
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ToolbarReports}
|
||||
@@ -0,0 +1,126 @@
|
||||
|
||||
import {FC, useEffect, useState} from 'react'
|
||||
import {KTIcon} from '../../../../helpers'
|
||||
|
||||
const ToolbarSaas: FC = () => {
|
||||
const [progress, setProgress] = useState<string>('1')
|
||||
useEffect(() => {
|
||||
document.body.setAttribute('data-kt-app-toolbar-fixed', 'true')
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className='d-flex align-items-center gap-2'>
|
||||
{/* begin::Action wrapper */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin::Label */}
|
||||
<span className='fs-7 fw-bold text-gray-700 pe-4 text-nowrap d-none d-md-block'>
|
||||
Sort By:
|
||||
</span>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Select */}
|
||||
<select
|
||||
className='form-select form-select-sm form-select-solid w-100px w-xxl-125px'
|
||||
data-control='select2'
|
||||
data-placeholder='Latest'
|
||||
data-hide-search='true'
|
||||
onChange={(e) => setProgress(e.target.value)}
|
||||
value={progress}
|
||||
>
|
||||
<option value=''></option>
|
||||
<option value='1'>Latest</option>
|
||||
<option value='2'>In Progress</option>
|
||||
<option value='3'>Done</option>
|
||||
</select>
|
||||
{/* end::Select */}
|
||||
</div>
|
||||
{/* end::Action wrapper */}
|
||||
|
||||
{/* begin::Action wrapper */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin::Separartor */}
|
||||
<div className='bullet bg-secondary h-35px w-1px mx-5'></div>
|
||||
{/* end::Separartor */}
|
||||
|
||||
{/* begin::Label */}
|
||||
<span className='fs-7 text-gray-700 fw-bold'>Impact Level:</span>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::NoUiSlider */}
|
||||
<div className='d-flex align-items-center ps-4'>
|
||||
<div
|
||||
id='kt_app_toolbar_slider'
|
||||
className='noUi-target noUi-target-success w-75px w-xxl-150px noUi-sm'
|
||||
></div>
|
||||
|
||||
<span
|
||||
id='kt_app_toolbar_slider_value'
|
||||
className='d-flex flex-center bg-light-success rounded-circle w-35px h-35px ms-4 fs-7 fw-bold text-success'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-placement='top'
|
||||
title='Set impact level'
|
||||
></span>
|
||||
</div>
|
||||
{/* end::NoUiSlider */}
|
||||
|
||||
{/* begin::Separartor */}
|
||||
<div className='bullet bg-secondary h-35px w-1px mx-5'></div>
|
||||
{/* end::Separartor */}
|
||||
</div>
|
||||
{/* end::Action wrapper */}
|
||||
|
||||
{/* begin::Action wrapper */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin::Label */}
|
||||
<span className='fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block'>Quick Tools:</span>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Actions */}
|
||||
<div className='d-flex'>
|
||||
{/* begin::Action */}
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-icon btn-icon-muted btn-active-icon-success'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-trigger='hover'
|
||||
data-bs-placement='top'
|
||||
title='Add new page'
|
||||
>
|
||||
<KTIcon iconName='files' className='fs-2x' />
|
||||
</a>
|
||||
{/* end::Action */}
|
||||
|
||||
{/* begin::Action */}
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-icon btn-icon-muted btn-active-icon-success'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-trigger='hover'
|
||||
data-bs-placement='top'
|
||||
title='Add new category'
|
||||
>
|
||||
<KTIcon iconName='add-files' className='fs-2x' />
|
||||
</a>
|
||||
{/* end::Action */}
|
||||
|
||||
{/* begin::Action */}
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-icon btn-icon-muted btn-active-icon-success'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-trigger='hover'
|
||||
data-bs-placement='top'
|
||||
title='Add new section'
|
||||
>
|
||||
<KTIcon iconName='search-list' className='fs-2x' />
|
||||
</a>
|
||||
{/* end::Action */}
|
||||
</div>
|
||||
{/* end::Actions */}
|
||||
</div>
|
||||
{/* end::Action wrapper */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ToolbarSaas}
|
||||
@@ -0,0 +1,5 @@
|
||||
export * from './ToolbarAccounting'
|
||||
export * from './ToolbarClassic'
|
||||
export * from './ToolbarExtended'
|
||||
export * from './ToolbarReports'
|
||||
export * from './ToolbarSaas'
|
||||
Reference in New Issue
Block a user