upgade package
This commit is contained in:
CHIEFSOFT\ameye
@@ -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