upgade package
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,218 @@
|
||||
|
||||
import {useRef, useState, FC } from 'react'
|
||||
import {Modal} from 'react-bootstrap'
|
||||
import {KTIcon} from '../../helpers'
|
||||
|
||||
export type Props = {
|
||||
show: boolean
|
||||
handleClose: () => void
|
||||
}
|
||||
|
||||
const InboxCompose: FC<Props> = ({show, handleClose}) => {
|
||||
const composeToRef = useRef<HTMLInputElement | null>(null)
|
||||
const formRef = useRef<HTMLFormElement | null>(null)
|
||||
const [composeCC, setComposeCC] = useState('')
|
||||
const [composeBCC, setComposeBCC] = useState('')
|
||||
const [subject, setSubject] = useState('')
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className='modal-sticky modal-sticky-lg modal-sticky-bottom-right'
|
||||
id='kt_inbox_compose'
|
||||
role='dialog'
|
||||
data-backdrop='false'
|
||||
aria-hidden='true'
|
||||
tabIndex='-1'
|
||||
show={show}
|
||||
animation={false}
|
||||
>
|
||||
<div className='modal-content'>
|
||||
{/* begin::Form */}
|
||||
<form ref={formRef} id='kt_inbox_compose_form' onSubmit={() => console.log('submit')}>
|
||||
{/*begin::Header*/}
|
||||
<div className='d-flex align-items-center justify-content-between py-5 ps-8 pe-5 border-bottom'>
|
||||
<h5 className='fw-bold m-0'>Compose</h5>
|
||||
<div className='d-flex ms-2'>
|
||||
{/*begin::Close*/}
|
||||
<div
|
||||
className='btn btn-icon btn-sm btn-light-primary ms-2'
|
||||
data-bs-dismiss='modal'
|
||||
onClick={handleClose}
|
||||
>
|
||||
<KTIcon className='fs-1' iconName='cross' />
|
||||
</div>
|
||||
{/*end::Close*/}
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Header*/}
|
||||
|
||||
{/*begin::Body*/}
|
||||
<div className='d-block'>
|
||||
{/*begin::To*/}
|
||||
<div className='d-flex align-items-center border-bottom inbox-to px-8 min-h-45px'>
|
||||
<div className='text-gray-600 w-75px'>To:</div>
|
||||
<div className='d-flex align-items-center flex-grow-1'>
|
||||
<input
|
||||
type='text'
|
||||
className='form-control border-0'
|
||||
name='compose_to'
|
||||
ref={composeToRef}
|
||||
/>
|
||||
</div>
|
||||
<div className='ms-2'>
|
||||
<span
|
||||
className='text-muted fw-bold cursor-pointer text-hover-primary me-2'
|
||||
data-inbox='cc-show'
|
||||
>
|
||||
Cc
|
||||
</span>
|
||||
<span
|
||||
className='text-muted fw-bold cursor-pointer text-hover-primary'
|
||||
data-inbox='bcc-show'
|
||||
>
|
||||
Bcc
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/*end::To*/}
|
||||
|
||||
{/*begin::CC*/}
|
||||
<div className='d-none align-items-center border-bottom inbox-to-cc ps-8 pe-5 min-h-45px'>
|
||||
<div className='text-gray-600 w-75px'>Cc:</div>
|
||||
<div className='flex-grow-1'>
|
||||
<input
|
||||
type='text'
|
||||
className='form-control border-0'
|
||||
name='compose_cc'
|
||||
value={composeCC}
|
||||
onChange={(e) => setComposeCC(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<span className='btn btn-active-light-primary btn-sm btn-icon' data-inbox='cc-hide'>
|
||||
<i className='la la-close '></i>
|
||||
</span>
|
||||
</div>
|
||||
{/*end::CC*/}
|
||||
|
||||
{/*begin::BCC*/}
|
||||
<div className='d-none align-items-center border-bottom inbox-to-bcc ps-8 pe-5 min-h-45px'>
|
||||
<div className='text-gray-600 w-75px'>Bcc:</div>
|
||||
<div className='flex-grow-1'>
|
||||
<input
|
||||
type='text'
|
||||
className='form-control border-0'
|
||||
name='compose_bcc'
|
||||
value={composeBCC}
|
||||
onChange={(e) => setComposeBCC(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<span className='btn btn-active-light-primary btn-sm btn-icon' data-inbox='bcc-hide'>
|
||||
<i className='la la-close '></i>
|
||||
</span>
|
||||
</div>
|
||||
{/*end::BCC*/}
|
||||
|
||||
{/*begin::Subject*/}
|
||||
<div className='border-bottom'>
|
||||
<input
|
||||
className='form-control border-0 px-8 min-h-45px'
|
||||
name='compose_subject'
|
||||
placeholder='Subject'
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{/*end::Subject*/}
|
||||
|
||||
{/*begin::Message*/}
|
||||
<div id='kt_inbox_compose_editor' className='border-0 h-125px h-lg-250px'></div>
|
||||
{/*end::Message*/}
|
||||
|
||||
{/*begin::Attachments*/}
|
||||
<div className='dropzone dropzone-multi px-8 py-4' id='kt_inbox_compose_attachments'>
|
||||
<div className='dropzone-items'>
|
||||
<div className='dropzone-item' style={{display: 'none'}}>
|
||||
<div className='dropzone-file'>
|
||||
<div className='dropzone-filename' title='some_image_file_name.jpg'>
|
||||
<span data-dz-name>some_image_file_name.jpg</span>{' '}
|
||||
<strong>
|
||||
(<span data-dz-size>340kb</span>)
|
||||
</strong>
|
||||
</div>
|
||||
<div className='dropzone-error' data-dz-errormessage></div>
|
||||
</div>
|
||||
<div className='dropzone-progress'>
|
||||
<div className='progress'>
|
||||
<div
|
||||
className='progress-bar bg-primary'
|
||||
role='progressbar'
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-valuenow={0}
|
||||
data-dz-uploadprogress
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='dropzone-toolbar'>
|
||||
<span className='dropzone-delete' data-dz-remove>
|
||||
{/*begin::Close*/}
|
||||
<span
|
||||
className='btn btn-icon btn-sm btn-active-light-primary ms-2'
|
||||
data-bs-dismiss='modal'
|
||||
>
|
||||
<KTIcon className='fs-1' iconName='cross' />
|
||||
</span>
|
||||
{/*end::Close*/}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Attachments*/}
|
||||
</div>
|
||||
{/*end::Body*/}
|
||||
|
||||
{/*begin::Footer*/}
|
||||
<div className='d-flex align-items-center justify-content-between py-5 ps-8 pe-5 border-top'>
|
||||
{/*begin::Actions*/}
|
||||
<div className='d-flex align-items-center me-3'>
|
||||
{/*begin::Send*/}
|
||||
<button className='btn btn-primary me-4 px-6'>Send</button>
|
||||
{/*end::Send*/}
|
||||
|
||||
{/*begin::Other*/}
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-icon btn-active-light-primary me-2'
|
||||
id='kt_inbox_compose_attachments_select'
|
||||
>
|
||||
<KTIcon className='fs-1' iconName='cloud-add' />
|
||||
</a>
|
||||
<a href='#' className='btn btn-icon btn-active-light-primary'>
|
||||
<KTIcon className='fs-1' iconName='geolocation' />
|
||||
</a>
|
||||
{/*end::Other*/}
|
||||
</div>
|
||||
{/*end::Actions*/}
|
||||
|
||||
{/*begin::Toolbar*/}
|
||||
<div className='d-flex align-items-center'>
|
||||
<button
|
||||
className='btn btn-icon btn-active-light-primary me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='More actions'
|
||||
>
|
||||
<KTIcon className='fs-1' iconName='setting-2' />
|
||||
</button>
|
||||
</div>
|
||||
{/*end::Toolbar*/}
|
||||
</div>
|
||||
{/*end::Footer*/}
|
||||
</form>
|
||||
{/*end::Form*/}
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export {InboxCompose}
|
||||
@@ -0,0 +1,19 @@
|
||||
import {FC} from 'react'
|
||||
import {ToggleHelpDrawer} from './help-drawer/ToggleHelpDrawer'
|
||||
import {HelpDrawer} from './help-drawer/HelpDrawer'
|
||||
import {PurchaseButton} from './purchase/PurchaseButton'
|
||||
|
||||
const RightToolbar: FC = () => {
|
||||
return (
|
||||
<>
|
||||
<div className='engage-toolbar d-flex position-fixed px-5 fw-bolder zindex-2 top-50 end-0 transform-90 mt-20 gap-2'>
|
||||
<ToggleHelpDrawer />
|
||||
<PurchaseButton />
|
||||
</div>
|
||||
|
||||
<HelpDrawer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {RightToolbar}
|
||||
@@ -0,0 +1,152 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {Modal} from 'react-bootstrap'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../helpers'
|
||||
// import {ListsWidget4, ListsWidget5} from '../widgets'
|
||||
|
||||
type Props = {
|
||||
show: boolean
|
||||
handleClose: () => void
|
||||
}
|
||||
|
||||
const SearchModal: FC<Props> = ({show, handleClose}) => {
|
||||
return (
|
||||
<Modal
|
||||
className='bg-body'
|
||||
id='kt_header_search_modal'
|
||||
aria-hidden='true'
|
||||
dialogClassName='modal-fullscreen h-auto'
|
||||
show={show}
|
||||
>
|
||||
<div className='modal-content shadow-none'>
|
||||
<div className='container-xxl w-lg-800px'>
|
||||
<div className='modal-header d-flex justify-content-end border-0'>
|
||||
{/* begin::Close */}
|
||||
<div className='btn btn-icon btn-sm btn-light-primary ms-2' onClick={handleClose}>
|
||||
<KTIcon className='fs-2' iconName='cross' />
|
||||
</div>
|
||||
{/* end::Close */}
|
||||
</div>
|
||||
<div className='modal-body'>
|
||||
{/* begin::Search */}
|
||||
<form className='pb-10'>
|
||||
<input
|
||||
autoFocus
|
||||
type='text'
|
||||
className='form-control bg-transparent border-0 fs-4x text-center fw-normal'
|
||||
name='query'
|
||||
placeholder='Search...'
|
||||
/>
|
||||
</form>
|
||||
{/* end::Search */}
|
||||
|
||||
{/* begin::Shop Goods */}
|
||||
<div className='py-10'>
|
||||
<h3 className='fw-bolder mb-8'>Shop Goods</h3>
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5'>
|
||||
<div className='col-sm-6'>
|
||||
<div className='row g-5'>
|
||||
<div className='col-sm-6'>
|
||||
<div className='card card-custom overlay min-h-125px mb-5 shadow-none'>
|
||||
<div className='card-body d-flex flex-column p-0'>
|
||||
<div
|
||||
className='overlay-wrapper flex-grow-1 bgi-no-repeat bgi-size-cover bgi-position-center card-rounded'
|
||||
style={{
|
||||
backgroundImage: `url('${toAbsoluteUrl(
|
||||
'media/stock/600x400/img-17.jpg'
|
||||
)}')`,
|
||||
}}
|
||||
/>
|
||||
<div className='overlay-layer bg-body bg-opacity-50'>
|
||||
<a href='#' className='btn btn-sm fw-bold btn-primary'>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card card-custom overlay min-h-125px mb-5 shadow-none'>
|
||||
<div className='card-body d-flex flex-column p-0'>
|
||||
<div
|
||||
className='overlay-wrapper flex-grow-1 bgi-no-repeat bgi-size-cover bgi-position-center card-rounded'
|
||||
style={{
|
||||
backgroundImage: `url('${toAbsoluteUrl(
|
||||
'media/stock/600x400/img-1.jpg'
|
||||
)}')`,
|
||||
}}
|
||||
/>
|
||||
<div className='overlay-layer bg-body bg-opacity-50'>
|
||||
<a href='#' className='btn btn-sm fw-bold btn-primary'>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-sm-6'>
|
||||
<div className='card card-custom card-stretch overlay mb-5 shadow-none min-h-250px'>
|
||||
<div className='card-body d-flex flex-column p-0'>
|
||||
<div
|
||||
className='overlay-wrapper flex-grow-1 bgi-no-repeat bgi-size-cover bgi-position-center card-rounded'
|
||||
style={{
|
||||
backgroundImage: `url('${toAbsoluteUrl(
|
||||
'media/stock/600x400/img-23.jpg'
|
||||
)}')`,
|
||||
}}
|
||||
/>
|
||||
<div className='overlay-layer bg-body bg-opacity-50'>
|
||||
<a href='#' className='btn btn-sm fw-bold btn-primary'>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-sm-6'>
|
||||
<div className='card card-custom card-stretch overlay mb-5 shadow-none min-h-250px'>
|
||||
<div className='card-body d-flex flex-column p-0'>
|
||||
<div
|
||||
className='overlay-wrapper flex-grow-1 bgi-no-repeat bgi-size-cover bgi-position-center card-rounded'
|
||||
style={{
|
||||
backgroundImage: `url('${toAbsoluteUrl(
|
||||
'media/stock/600x400/img-11.jpg'
|
||||
)}')`,
|
||||
}}
|
||||
></div>
|
||||
<div className='overlay-layer bg-body bg-opacity-50'>
|
||||
<a href='#' className='btn btn-sm fw-bold btn-primary'>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</div>
|
||||
{/* end::Shop Goods */}
|
||||
|
||||
{/* begin::Framework Users */}
|
||||
<div>
|
||||
<h3 className='text-gray-900 fw-bolder fs-1 mb-6'>Framework Users</h3>
|
||||
{/*<ListsWidget4 className='bg-transparent mb-5 shadow-none' innerPadding='px-0' />*/}
|
||||
</div>
|
||||
{/* end::Framework Users */}
|
||||
|
||||
{/* begin::Tutorials */}
|
||||
<div className='pb-10'>
|
||||
<h3 className='text-gray-900 fw-bolder fs-1 mb-6'>Tutorials</h3>
|
||||
{/*<ListsWidget5 className='mb-5 shadow-none' innerPadding='px-0' />*/}
|
||||
</div>
|
||||
{/* end::Tutorials */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export {SearchModal}
|
||||
@@ -0,0 +1,72 @@
|
||||
import {FC} from 'react'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {Item1} from '../../content/activity/Item1'
|
||||
import {Item2} from '../../content/activity/Item2'
|
||||
import {Item3} from '../../content/activity/Item3'
|
||||
import {Item4} from '../../content/activity/Item4'
|
||||
import {Item5} from '../../content/activity/Item5'
|
||||
import {Item6} from '../../content/activity/Item6'
|
||||
import {Item7} from '../../content/activity/Item7'
|
||||
import {Item8} from '../../content/activity/Item8'
|
||||
|
||||
const ActivityDrawer: FC = () => (
|
||||
<div
|
||||
id='kt_activities'
|
||||
className='bg-body'
|
||||
data-kt-drawer='true'
|
||||
data-kt-drawer-name='activities'
|
||||
data-kt-drawer-activate='true'
|
||||
data-kt-drawer-overlay='true'
|
||||
data-kt-drawer-width="{default:'300px', 'lg': '900px'}"
|
||||
data-kt-drawer-direction='end'
|
||||
data-kt-drawer-toggle='#kt_activities_toggle'
|
||||
data-kt-drawer-close='#kt_activities_close'
|
||||
>
|
||||
<div className='card shadow-none rounded-0'>
|
||||
<div className='card-header' id='kt_activities_header'>
|
||||
<h3 className='card-title fw-bolder text-gray-900'>Activity Logs</h3>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-active-light-primary me-n5'
|
||||
id='kt_activities_close'
|
||||
>
|
||||
<KTIcon iconName='cross' className='fs-1' />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card-body position-relative' id='kt_activities_body'>
|
||||
<div
|
||||
id='kt_activities_scroll'
|
||||
className='position-relative scroll-y me-n5 pe-5'
|
||||
data-kt-scroll='true'
|
||||
data-kt-scroll-height='auto'
|
||||
data-kt-scroll-wrappers='#kt_activities_body'
|
||||
data-kt-scroll-dependencies='#kt_activities_header, #kt_activities_footer'
|
||||
data-kt-scroll-offset='5px'
|
||||
>
|
||||
<div className='timeline'>
|
||||
<Item1 />
|
||||
<Item2 />
|
||||
<Item3 />
|
||||
<Item4 />
|
||||
<Item5 />
|
||||
<Item6 />
|
||||
<Item7 />
|
||||
<Item8 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card-footer py-5 text-center' id='kt_activities_footer'>
|
||||
<Link to='/crafted/pages/profile' className='btn btn-bg-body text-primary'>
|
||||
View All Activities
|
||||
<KTIcon iconName='arrow-right' className='fs-3 text-primary' />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export {ActivityDrawer}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { FC } from 'react'
|
||||
|
||||
const CreateApp: FC = () => {
|
||||
return <></>
|
||||
}
|
||||
|
||||
export {CreateApp}
|
||||
@@ -0,0 +1,57 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {ChatInner} from '../../chat/ChatInner'
|
||||
|
||||
const DrawerMessenger: FC = () => (
|
||||
<div
|
||||
id='kt_drawer_chat'
|
||||
className='bg-body'
|
||||
data-kt-drawer='true'
|
||||
data-kt-drawer-name='chat'
|
||||
data-kt-drawer-activate='true'
|
||||
data-kt-drawer-overlay='true'
|
||||
data-kt-drawer-width="{default:'300px', 'md': '500px'}"
|
||||
data-kt-drawer-direction='end'
|
||||
data-kt-drawer-toggle='#kt_drawer_chat_toggle'
|
||||
data-kt-drawer-close='#kt_drawer_chat_close'
|
||||
>
|
||||
<div className='card w-100 rounded-0' id='kt_drawer_chat_messenger'>
|
||||
<div className='card-header pe-5' id='kt_drawer_chat_messenger_header'>
|
||||
<div className='card-title'>
|
||||
<div className='d-flex justify-content-center flex-column me-3'>
|
||||
<a href='#' className='fs-4 fw-bolder text-gray-900 text-hover-primary me-1 mb-2 lh-1'>
|
||||
Brian Cox
|
||||
</a>
|
||||
|
||||
<div className='mb-0 lh-1'>
|
||||
<span className='badge badge-success badge-circle w-10px h-10px me-1'></span>
|
||||
<span className='fs-7 fw-bold text-gray-500'>Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
<div className='me-2'>
|
||||
<button
|
||||
className='btn btn-sm btn-icon btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<i className='bi bi-three-dots fs-3'></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='btn btn-sm btn-icon btn-active-light-primary' id='kt_drawer_chat_close'>
|
||||
<KTIcon iconName='cross' className='fs-2' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ChatInner isDrawer={true} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export {DrawerMessenger}
|
||||
@@ -0,0 +1,153 @@
|
||||
|
||||
import clsx from 'clsx'
|
||||
import {FC} from 'react'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {
|
||||
defaultAlerts,
|
||||
defaultLogs,
|
||||
KTIcon,
|
||||
toAbsoluteUrl,
|
||||
useIllustrationsPath,
|
||||
} from '../../../helpers'
|
||||
|
||||
const HeaderNotificationsMenu: FC = () => (
|
||||
<div
|
||||
className='menu menu-sub menu-sub-dropdown menu-column w-350px w-lg-375px'
|
||||
data-kt-menu='true'
|
||||
>
|
||||
<div
|
||||
className='d-flex flex-column bgi-no-repeat rounded-top'
|
||||
style={{backgroundImage: `url('${toAbsoluteUrl('media/misc/menu-header-bg.jpg')}')`}}
|
||||
>
|
||||
<h3 className='text-white fw-bold px-9 mt-10 mb-6'>
|
||||
Notifications <span className='fs-8 opacity-75 ps-3'>24 reports</span>
|
||||
</h3>
|
||||
|
||||
<ul className='nav nav-line-tabs nav-line-tabs-2x nav-stretch fw-bold px-9'>
|
||||
<li className='nav-item'>
|
||||
<a
|
||||
className='nav-link text-white opacity-75 opacity-state-100 pb-4'
|
||||
data-bs-toggle='tab'
|
||||
href='#kt_topbar_notifications_1'
|
||||
>
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='nav-item'>
|
||||
<a
|
||||
className='nav-link text-white opacity-75 opacity-state-100 pb-4 active'
|
||||
data-bs-toggle='tab'
|
||||
href='#kt_topbar_notifications_2'
|
||||
>
|
||||
Updates
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='nav-item'>
|
||||
<a
|
||||
className='nav-link text-white opacity-75 opacity-state-100 pb-4'
|
||||
data-bs-toggle='tab'
|
||||
href='#kt_topbar_notifications_3'
|
||||
>
|
||||
Logs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className='tab-content'>
|
||||
<div className='tab-pane fade' id='kt_topbar_notifications_1' role='tabpanel'>
|
||||
<div className='scroll-y mh-325px my-5 px-8'>
|
||||
{defaultAlerts.map((alert, index) => (
|
||||
<div key={`alert${index}`} className='d-flex flex-stack py-4'>
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='symbol symbol-35px me-4'>
|
||||
<span className={clsx('symbol-label', `bg-light-${alert.state}`)}>
|
||||
{' '}
|
||||
<KTIcon iconName={alert.icon} className={`fs-2 text-${alert.state}`} />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='mb-0 me-2'>
|
||||
<a href='#' className='fs-6 text-gray-800 text-hover-primary fw-bolder'>
|
||||
{alert.title}
|
||||
</a>
|
||||
<div className='text-gray-500 fs-7'>{alert.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className='badge badge-light fs-8'>{alert.time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className='py-3 text-center border-top'>
|
||||
<Link
|
||||
to='/crafted/pages/profile'
|
||||
className='btn btn-color-gray-600 btn-active-color-primary'
|
||||
>
|
||||
View All <KTIcon iconName='arrow-right' className='fs-5' />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='tab-pane fade show active' id='kt_topbar_notifications_2' role='tabpanel'>
|
||||
<div className='d-flex flex-column px-9'>
|
||||
<div className='pt-10 pb-0'>
|
||||
<h3 className='text-gray-900 text-center fw-bolder'>Get Pro Access</h3>
|
||||
|
||||
<div className='text-center text-gray-600 fw-bold pt-1'>
|
||||
Outlines keep you honest. They stoping you from amazing poorly about drive
|
||||
</div>
|
||||
|
||||
<div className='text-center mt-5 mb-9'>
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-primary px-6'
|
||||
data-bs-toggle='modal'
|
||||
data-bs-target='#kt_modal_upgrade_plan'
|
||||
>
|
||||
Upgrade
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='text-center px-4'>
|
||||
<img className='mw-100 mh-200px' alt='metronic' src={useIllustrationsPath('1.png')} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='tab-pane fade' id='kt_topbar_notifications_3' role='tabpanel'>
|
||||
<div className='scroll-y mh-325px my-5 px-8'>
|
||||
{defaultLogs.map((log, index) => (
|
||||
<div key={`log${index}`} className='d-flex flex-stack py-4'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
<span className={clsx('w-70px badge', `badge-light-${log.state}`, 'me-4')}>
|
||||
{log.code}
|
||||
</span>
|
||||
|
||||
<a href='#' className='text-gray-800 text-hover-primary fw-bold'>
|
||||
{log.message}
|
||||
</a>
|
||||
|
||||
<span className='badge badge-light fs-8'>{log.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className='py-3 text-center border-top'>
|
||||
<Link
|
||||
to='/crafted/pages/profile'
|
||||
className='btn btn-color-gray-600 btn-active-color-primary'
|
||||
>
|
||||
View All <KTIcon iconName='arrow-right' className='fs-5' />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export {HeaderNotificationsMenu}
|
||||
@@ -0,0 +1,135 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {useAuth} from '../../../../app/modules/auth'
|
||||
import {Languages} from './Languages'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
const HeaderUserMenu: FC = () => {
|
||||
const {currentUser, logout} = useAuth()
|
||||
return (
|
||||
<div
|
||||
className='menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg menu-state-primary fw-bold py-4 fs-6 w-275px'
|
||||
data-kt-menu='true'
|
||||
>
|
||||
<div className='menu-item px-3'>
|
||||
<div className='menu-content d-flex align-items-center px-3'>
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<img alt='Logo' src={toAbsoluteUrl('media/avatars/300-3.jpg')} />
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<div className='fw-bolder d-flex align-items-center fs-5'>
|
||||
{currentUser?.first_name} {currentUser?.first_name}
|
||||
<span className='badge badge-light-success fw-bolder fs-8 px-2 py-1 ms-2'>Pro</span>
|
||||
</div>
|
||||
<a href='#' className='fw-bold text-muted text-hover-primary fs-7'>
|
||||
{currentUser?.email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='separator my-2'></div>
|
||||
|
||||
<div className='menu-item px-5'>
|
||||
<Link to={'/crafted/pages/profile'} className='menu-link px-5'>
|
||||
My Profile
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-5'>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
<span className='menu-text'>My Projects</span>
|
||||
<span className='menu-badge'>
|
||||
<span className='badge badge-light-danger badge-circle fw-bolder fs-7'>3</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className='menu-item px-5'
|
||||
data-kt-menu-trigger='hover'
|
||||
data-kt-menu-placement='left-start'
|
||||
data-kt-menu-flip='bottom'
|
||||
>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
<span className='menu-title'>My Subscription</span>
|
||||
<span className='menu-arrow'></span>
|
||||
</a>
|
||||
|
||||
<div className='menu-sub menu-sub-dropdown w-175px py-4'>
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
Referrals
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
Billing
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
Payments
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link d-flex flex-stack px-5'>
|
||||
Statements
|
||||
<i
|
||||
className='fas fa-exclamation-circle ms-2 fs-7'
|
||||
data-bs-toggle='tooltip'
|
||||
title='View your statements'
|
||||
></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='separator my-2'></div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<div className='menu-content px-3'>
|
||||
<label className='form-check form-switch form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input w-30px h-20px'
|
||||
type='checkbox'
|
||||
value='1'
|
||||
defaultChecked={true}
|
||||
name='notifications'
|
||||
/>
|
||||
<span className='form-check-label text-muted fs-7'>Notifications</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-5'>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
My Statements
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='separator my-2'></div>
|
||||
|
||||
<Languages />
|
||||
|
||||
<div className='menu-item px-5 my-1'>
|
||||
<Link to='/crafted/account/settings' className='menu-link px-5'>
|
||||
Account Settings
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-5'>
|
||||
<a onClick={logout} className='menu-link px-5'>
|
||||
Sign Out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {HeaderUserMenu}
|
||||
@@ -0,0 +1,89 @@
|
||||
|
||||
import clsx from 'clsx'
|
||||
import {FC} from 'react'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
import {useLang, setLanguage} from '../../../i18n/Metronici18n'
|
||||
|
||||
const languages = [
|
||||
{
|
||||
lang: 'en',
|
||||
name: 'English',
|
||||
flag: toAbsoluteUrl('media/flags/united-states.svg'),
|
||||
},
|
||||
{
|
||||
lang: 'zh',
|
||||
name: 'Mandarin',
|
||||
flag: toAbsoluteUrl('media/flags/china.svg'),
|
||||
},
|
||||
{
|
||||
lang: 'es',
|
||||
name: 'Spanish',
|
||||
flag: toAbsoluteUrl('media/flags/spain.svg'),
|
||||
},
|
||||
{
|
||||
lang: 'ja',
|
||||
name: 'Japanese',
|
||||
flag: toAbsoluteUrl('media/flags/japan.svg'),
|
||||
},
|
||||
{
|
||||
lang: 'de',
|
||||
name: 'German',
|
||||
flag: toAbsoluteUrl('media/flags/germany.svg'),
|
||||
},
|
||||
{
|
||||
lang: 'fr',
|
||||
name: 'French',
|
||||
flag: toAbsoluteUrl('media/flags/france.svg'),
|
||||
},
|
||||
]
|
||||
|
||||
const Languages: FC = () => {
|
||||
const lang = useLang()
|
||||
const currentLanguage = languages.find((x) => x.lang === lang)
|
||||
return (
|
||||
<div
|
||||
className='menu-item px-5'
|
||||
data-kt-menu-trigger='hover'
|
||||
data-kt-menu-placement='left-start'
|
||||
data-kt-menu-flip='bottom'
|
||||
>
|
||||
<a href='#' className='menu-link px-5'>
|
||||
<span className='menu-title position-relative'>
|
||||
Language
|
||||
<span className='fs-8 rounded bg-light px-3 py-2 position-absolute translate-middle-y top-50 end-0'>
|
||||
{currentLanguage?.name}{' '}
|
||||
<img
|
||||
className='w-15px h-15px rounded-1 ms-2'
|
||||
src={currentLanguage?.flag}
|
||||
alt='metronic'
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div className='menu-sub menu-sub-dropdown w-175px py-4'>
|
||||
{languages.map((l) => (
|
||||
<div
|
||||
className='menu-item px-3'
|
||||
key={l.lang}
|
||||
onClick={() => {
|
||||
setLanguage(l.lang)
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href='#'
|
||||
className={clsx('menu-link d-flex px-5', {active: l.lang === currentLanguage?.lang})}
|
||||
>
|
||||
<span className='symbol symbol-20px me-4'>
|
||||
<img className='rounded-1' src={l.flag} alt='metronic' />
|
||||
</span>
|
||||
{l.name}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Languages}
|
||||
@@ -0,0 +1,217 @@
|
||||
|
||||
|
||||
import {Link} from 'react-router-dom'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
|
||||
const HelpDrawer = () => {
|
||||
return (
|
||||
<div
|
||||
id='kt_help'
|
||||
className='bg-body'
|
||||
data-kt-drawer='true'
|
||||
data-kt-drawer-name='help'
|
||||
data-kt-drawer-activate='true'
|
||||
data-kt-drawer-overlay='true'
|
||||
data-kt-drawer-width="{default:'350px', 'md': '525px'}"
|
||||
data-kt-drawer-direction='end'
|
||||
data-kt-drawer-toggle='#kt_help_toggle'
|
||||
data-kt-drawer-close='#kt_help_close'
|
||||
>
|
||||
{/* begin::Card */}
|
||||
<div className='card shadow-none rounded-0 w-100'>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header' id='kt_help_header'>
|
||||
<h5 className='card-title fw-bold text-gray-600'>Learn & Get Inspired</h5>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon explore-btn-dismiss me-n5'
|
||||
id='kt_help_close'
|
||||
>
|
||||
<KTIcon iconName='cross' className='fs-2' />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body' id='kt_help_body'>
|
||||
{/* begin::Content */}
|
||||
<div
|
||||
id='kt_help_scroll'
|
||||
className='hover-scroll-overlay-y'
|
||||
data-kt-scroll='true'
|
||||
data-kt-scroll-height='auto'
|
||||
data-kt-scroll-wrappers='#kt_help_body'
|
||||
data-kt-scroll-dependencies='#kt_help_header'
|
||||
data-kt-scroll-offset='5px'
|
||||
>
|
||||
{/* begin::Support */}
|
||||
<div className='rounded border border-dashed border-gray-300 p-6 p-lg-8 mb-10'>
|
||||
{/* begin::Heading */}
|
||||
<h2 className='fw-bolder mb-5'>
|
||||
Support at{' '}
|
||||
<a href='https://devs.keenthemes.com' className=''>
|
||||
devs.keenthemes.com
|
||||
</a>
|
||||
</h2>
|
||||
{/* end::Heading */}
|
||||
|
||||
{/* begin::Description */}
|
||||
<div className='fs-5 fw-bold mb-5'>
|
||||
<span className='text-gray-500'>
|
||||
Join our developers community to find answer to your question and help others.
|
||||
</span>
|
||||
<a className='explore-link d-none' href='https://keenthemes.com/licensing'>
|
||||
FAQs
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
|
||||
{/* begin::Link */}
|
||||
<a
|
||||
href='https://devs.keenthemes.com'
|
||||
className='btn btn-lg explore-btn-primary w-100'
|
||||
>
|
||||
Get Support
|
||||
</a>
|
||||
{/* end::Link */}
|
||||
</div>
|
||||
{/* end::Support */}
|
||||
|
||||
{/* begin::Link */}
|
||||
<div className='d-flex align-items-center mb-7'>
|
||||
{/* begin::Icon */}
|
||||
<div className='d-flex flex-center w-50px h-50px w-lg-75px h-lg-75px flex-shrink-0 rounded bg-light-warning'>
|
||||
<KTIcon iconName='abstract-26' className='text-warning fs-2x text-lg-3x' />
|
||||
</div>
|
||||
{/* end::Icon */}
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex flex-stack flex-grow-1 ms-4 ms-lg-6'>
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex flex-column me-2 me-lg-5'>
|
||||
{/* begin::Title */}
|
||||
<a
|
||||
href='https://preview.keenthemes.com/metronic8/react/docs/quick-start'
|
||||
className='text-gray-900 text-hover-primary fw-bolder fs-6 fs-lg-4 mb-1'
|
||||
>
|
||||
Documentation & Videos
|
||||
</a>
|
||||
{/* end::Title */}
|
||||
{/* begin::Description */}
|
||||
<div className='text-muted fw-bold fs-7 fs-lg-6'>
|
||||
From guides and video tutorials, to live demos and code examples to get started.
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
<KTIcon iconName='arrow-right' className='text-gray-500 fs-2' />
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
</div>
|
||||
{/* end::Link */}
|
||||
{/* begin::Link */}
|
||||
<div className='d-flex align-items-center mb-7'>
|
||||
{/* begin::Icon */}
|
||||
<div className='d-flex flex-center w-50px h-50px w-lg-75px h-lg-75px flex-shrink-0 rounded bg-light-primary'>
|
||||
<KTIcon iconName='gift' className='text-primary fs-2x text-lg-3x' />
|
||||
</div>
|
||||
{/* end::Icon */}
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex flex-stack flex-grow-1 ms-4 ms-lg-6'>
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex flex-column me-2 me-lg-5'>
|
||||
{/* begin::Title */}
|
||||
<a
|
||||
href='https://preview.keenthemes.com/metronic8/react/docs/utilities'
|
||||
className='text-gray-900 text-hover-primary fw-bolder fs-6 fs-lg-4 mb-1'
|
||||
>
|
||||
Plugins & Components
|
||||
</a>
|
||||
{/* end::Title */}
|
||||
{/* begin::Description */}
|
||||
<div className='text-muted fw-bold fs-7 fs-lg-6'>
|
||||
Check out our 300+ in-house components and customized 3rd-party plugins.
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
<KTIcon iconName='arrow-right' className='text-gray-500 fs-2' />
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
</div>
|
||||
{/* end::Link */}
|
||||
{/* begin::Link */}
|
||||
<div className='d-flex align-items-center mb-7'>
|
||||
{/* begin::Icon */}
|
||||
<div className='d-flex flex-center w-50px h-50px w-lg-75px h-lg-75px flex-shrink-0 rounded bg-light-info'>
|
||||
<KTIcon iconName='design-frame' className='text-info fs-2x text-lg-3x' />
|
||||
</div>
|
||||
{/* end::Icon */}
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex flex-stack flex-grow-1 ms-4 ms-lg-6'>
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex flex-column me-2 me-lg-5'>
|
||||
{/* begin::Title */}
|
||||
<Link
|
||||
to='/builder'
|
||||
className='text-gray-900 text-hover-primary fw-bolder fs-6 fs-lg-4 mb-1'
|
||||
>
|
||||
Layout Builder
|
||||
</Link>
|
||||
{/* end::Title */}
|
||||
{/* begin::Description */}
|
||||
<div className='text-muted fw-bold fs-7 fs-lg-6'>
|
||||
Dynamically modify and preview layout
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
<KTIcon iconName='arrow-right' className='text-gray-500 fs-2' />
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
</div>
|
||||
{/* end::Link */}
|
||||
{/* begin::Link */}
|
||||
<div className='d-flex align-items-center mb-7'>
|
||||
{/* begin::Icon */}
|
||||
<div className='d-flex flex-center w-50px h-50px w-lg-75px h-lg-75px flex-shrink-0 rounded bg-light-danger'>
|
||||
<KTIcon iconName='phone' className='text-danger fs-2x text-lg-3x' />
|
||||
</div>
|
||||
{/* end::Icon */}
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex flex-stack flex-grow-1 ms-4 ms-lg-6'>
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex flex-column me-2 me-lg-5'>
|
||||
{/* begin::Title */}
|
||||
<a
|
||||
href='https://preview.keenthemes.com/metronic8/react/docs/changelog'
|
||||
className='text-gray-900 text-hover-primary fw-bolder fs-6 fs-lg-4 mb-1'
|
||||
>
|
||||
What's New
|
||||
</a>
|
||||
{/* end::Title */}
|
||||
{/* begin::Description */}
|
||||
<div className='text-muted fw-bold fs-7 fs-lg-6'>
|
||||
Latest features and improvements added with our users feedback in mind.
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
<KTIcon iconName='arrow-right' className='text-gray-500 fs-2' />
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
</div>
|
||||
{/* end::Link */}
|
||||
</div>
|
||||
{/* end::Content */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
{/* end::Card */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {HelpDrawer}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { FC } from 'react'
|
||||
|
||||
const ToggleHelpDrawer: FC = () => (
|
||||
<button
|
||||
id='kt_help_toggle'
|
||||
className='engage-help-toggle btn btn-flex h-35px bg-body btn-color-gray-700 btn-active-color-gray-900 shadow-sm px-5 rounded-top-0'
|
||||
title='Learn & Get Inspired'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-placement='left'
|
||||
data-bs-dismiss='click'
|
||||
data-bs-trigger='hover'
|
||||
>
|
||||
Help
|
||||
</button>
|
||||
)
|
||||
|
||||
export {ToggleHelpDrawer}
|
||||
@@ -0,0 +1,12 @@
|
||||
import {FC} from 'react'
|
||||
|
||||
const PurchaseButton: FC = () => (
|
||||
<a
|
||||
href={import.meta.env.VITE_APP_PURCHASE_URL}
|
||||
className='engage-purchase-link btn btn-flex h-35px bg-body btn-color-gray-700 btn-active-color-gray-900 px-5 shadow-sm rounded-top-0'
|
||||
>
|
||||
Buy Now
|
||||
</a>
|
||||
)
|
||||
|
||||
export {PurchaseButton}
|
||||
@@ -0,0 +1,68 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
const QuickLinks: FC = () => (
|
||||
<div
|
||||
className='menu menu-sub menu-sub-dropdown menu-column w-250px w-lg-325px'
|
||||
data-kt-menu='true'
|
||||
>
|
||||
<div
|
||||
className='d-flex flex-column flex-center bgi-no-repeat rounded-top px-9 py-10'
|
||||
style={{backgroundImage: `url('${toAbsoluteUrl('media/misc/pattern-1.jpg')}')`}}
|
||||
>
|
||||
<h3 className='text-white fw-bold mb-3'>Quick Links</h3>
|
||||
|
||||
<span className='badge bg-primary py-2 px-3'>25 pending tasks</span>
|
||||
</div>
|
||||
|
||||
<div className='row g-0'>
|
||||
<div className='col-6'>
|
||||
<a
|
||||
href='#'
|
||||
className='d-flex flex-column flex-center h-100 p-6 bg-hover-light border-end border-bottom'
|
||||
>
|
||||
<KTIcon iconName='euro' className='fs-3x text-primary mb-2' />
|
||||
<span className='fs-5 fw-bold text-gray-800 mb-0'>Accounting</span>
|
||||
<span className='fs-7 text-gray-500'>eCommerce</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='col-6'>
|
||||
<a
|
||||
href='#'
|
||||
className='d-flex flex-column flex-center h-100 p-6 bg-hover-light border-bottom'
|
||||
>
|
||||
<KTIcon iconName='sms' className='fs-3x text-primary mb-2' />
|
||||
<span className='fs-5 fw-bold text-gray-800 mb-0'>Administration</span>
|
||||
<span className='fs-7 text-gray-500'>Console</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='col-6'>
|
||||
<a href='#' className='d-flex flex-column flex-center h-100 p-6 bg-hover-light border-end'>
|
||||
<KTIcon iconName='abstract-41' className='fs-3x text-primary mb-2' />
|
||||
<span className='fs-5 fw-bold text-gray-800 mb-0'>Projects</span>
|
||||
<span className='fs-7 text-gray-500'>Pending Tasks</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='col-6'>
|
||||
<a href='#' className='d-flex flex-column flex-center h-100 p-6 bg-hover-light'>
|
||||
<KTIcon iconName='briefcase' className='fs-3x text-primary mb-2' />
|
||||
<span className='fs-5 fw-bold text-gray-800 mb-0'>Customers</span>
|
||||
<span className='fs-7 text-gray-500'>Latest cases</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='py-2 text-center border-top'>
|
||||
<Link to='/crafted/pages/profile' className='btn btn-color-gray-600 btn-active-color-primary'>
|
||||
View All <KTIcon iconName='arrow-right' className='fs-5' />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export {QuickLinks}
|
||||
@@ -0,0 +1,754 @@
|
||||
import {FC, useEffect, useRef, useState} from 'react'
|
||||
import {SearchComponent} from '../../../assets/ts/components'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
const Search: FC = () => {
|
||||
const [menuState, setMenuState] = useState<'main' | 'advanced' | 'preferences'>('main')
|
||||
const element = useRef<HTMLDivElement | null>(null)
|
||||
const wrapperElement = useRef<HTMLDivElement | null>(null)
|
||||
const resultsElement = useRef<HTMLDivElement | null>(null)
|
||||
const suggestionsElement = useRef<HTMLDivElement | null>(null)
|
||||
const emptyElement = useRef<HTMLDivElement | null>(null)
|
||||
|
||||
const processs = (search: SearchComponent) => {
|
||||
setTimeout(function () {
|
||||
const number = Math.floor(Math.random() * 6) + 1
|
||||
|
||||
// Hide recently viewed
|
||||
suggestionsElement.current!.classList.add('d-none')
|
||||
|
||||
if (number === 3) {
|
||||
// Hide results
|
||||
resultsElement.current!.classList.add('d-none')
|
||||
// Show empty message
|
||||
emptyElement.current!.classList.remove('d-none')
|
||||
} else {
|
||||
// Show results
|
||||
resultsElement.current!.classList.remove('d-none')
|
||||
// Hide empty message
|
||||
emptyElement.current!.classList.add('d-none')
|
||||
}
|
||||
|
||||
// Complete search
|
||||
search.complete()
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
const clear = () => {
|
||||
// Show recently viewed
|
||||
suggestionsElement.current!.classList.remove('d-none')
|
||||
// Hide results
|
||||
resultsElement.current!.classList.add('d-none')
|
||||
// Hide empty message
|
||||
emptyElement.current!.classList.add('d-none')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// Initialize search handler
|
||||
const searchObject = SearchComponent.createInsance('#kt_header_search')
|
||||
|
||||
// Search handler
|
||||
searchObject!.on('kt.search.process', processs)
|
||||
|
||||
// Clear handler
|
||||
searchObject!.on('kt.search.clear', clear)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id='kt_header_search'
|
||||
className='d-flex align-items-stretch'
|
||||
data-kt-search-keypress='true'
|
||||
data-kt-search-min-length='2'
|
||||
data-kt-search-enter='enter'
|
||||
data-kt-search-layout='menu'
|
||||
data-kt-menu-trigger='auto'
|
||||
data-kt-menu-overflow='false'
|
||||
data-kt-menu-permanent='true'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
ref={element}
|
||||
>
|
||||
<div
|
||||
className='d-flex align-items-center'
|
||||
data-kt-search-element='toggle'
|
||||
id='kt_header_search_toggle'
|
||||
>
|
||||
<div className='btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px'>
|
||||
<KTIcon iconName='magnifier' className='fs-2' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-kt-search-element='content'
|
||||
className='menu menu-sub menu-sub-dropdown p-7 w-325px w-md-375px'
|
||||
>
|
||||
<div
|
||||
className={`${menuState === 'main' ? '' : 'd-none'}`}
|
||||
ref={wrapperElement}
|
||||
data-kt-search-element='wrapper'
|
||||
>
|
||||
<form
|
||||
data-kt-search-element='form'
|
||||
className='w-100 position-relative mb-3'
|
||||
autoComplete='off'
|
||||
>
|
||||
<KTIcon
|
||||
iconName='magnifier'
|
||||
className='fs-2 text-lg-1 text-gray-500 position-absolute top-50 translate-middle-y ms-0'
|
||||
/>
|
||||
|
||||
<input
|
||||
type='text'
|
||||
className='form-control form-control-flush ps-10'
|
||||
name='search'
|
||||
placeholder='Search...'
|
||||
data-kt-search-element='input'
|
||||
/>
|
||||
|
||||
<span
|
||||
className='position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-1'
|
||||
data-kt-search-element='spinner'
|
||||
>
|
||||
<span className='spinner-border h-15px w-15px align-middle text-gray-500' />
|
||||
</span>
|
||||
|
||||
<span
|
||||
className='btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 d-none'
|
||||
data-kt-search-element='clear'
|
||||
>
|
||||
<KTIcon iconName='cross' className='fs-2 text-lg-1 me-0' />
|
||||
</span>
|
||||
|
||||
<div
|
||||
className='position-absolute top-50 end-0 translate-middle-y'
|
||||
data-kt-search-element='toolbar'
|
||||
>
|
||||
<div
|
||||
data-kt-search-element='preferences-show'
|
||||
className='btn btn-icon w-20px btn-sm btn-active-color-primary me-1'
|
||||
data-bs-toggle='tooltip'
|
||||
onClick={() => {
|
||||
setMenuState('preferences')
|
||||
}}
|
||||
title='Show search preferences'
|
||||
>
|
||||
<KTIcon iconName='setting-2' className='fs-1' />
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-kt-search-element='advanced-options-form-show'
|
||||
className='btn btn-icon w-20px btn-sm btn-active-color-primary'
|
||||
data-bs-toggle='tooltip'
|
||||
onClick={() => {
|
||||
setMenuState('advanced')
|
||||
}}
|
||||
title='Show more search options'
|
||||
>
|
||||
<KTIcon iconName='down' className='fs-2' />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div ref={resultsElement} data-kt-search-element='results' className='d-none'>
|
||||
<div className='scroll-y mh-200px mh-lg-350px'>
|
||||
<h3 className='fs-5 text-muted m-0 pb-5' data-kt-search-element='category-title'>
|
||||
Users
|
||||
</h3>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-6.jpg')} alt='' />
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column justify-content-start fw-bold'>
|
||||
<span className='fs-6 fw-bold'>Karina Clark</span>
|
||||
<span className='fs-7 fw-bold text-muted'>Marketing Manager</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-2.jpg')} alt='' />
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column justify-content-start fw-bold'>
|
||||
<span className='fs-6 fw-bold'>Olivia Bold</span>
|
||||
<span className='fs-7 fw-bold text-muted'>Software Engineer</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-9.jpg')} alt='' />
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column justify-content-start fw-bold'>
|
||||
<span className='fs-6 fw-bold'>Ana Clark</span>
|
||||
<span className='fs-7 fw-bold text-muted'>UI/UX Designer</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-14.jpg')} alt='' />
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column justify-content-start fw-bold'>
|
||||
<span className='fs-6 fw-bold'>Nick Pitola</span>
|
||||
<span className='fs-7 fw-bold text-muted'>Art Director</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-11.jpg')} alt='' />
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column justify-content-start fw-bold'>
|
||||
<span className='fs-6 fw-bold'>Edward Kulnic</span>
|
||||
<span className='fs-7 fw-bold text-muted'>System Administrator</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<h3
|
||||
className='fs-5 text-muted m-0 pt-5 pb-5'
|
||||
data-kt-search-element='category-title'
|
||||
>
|
||||
Customers
|
||||
</h3>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<img
|
||||
className='w-20px h-20px'
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/volicity-9.svg')}
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column justify-content-start fw-bold'>
|
||||
<span className='fs-6 fw-bold'>Company Rbranding</span>
|
||||
<span className='fs-7 fw-bold text-muted'>UI Design</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<img
|
||||
className='w-20px h-20px'
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/tvit.svg')}
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column justify-content-start fw-bold'>
|
||||
<span className='fs-6 fw-bold'>Company Re-branding</span>
|
||||
<span className='fs-7 fw-bold text-muted'>Web Development</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<img
|
||||
className='w-20px h-20px'
|
||||
src={toAbsoluteUrl('media/svg/misc/infography.svg')}
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column justify-content-start fw-bold'>
|
||||
<span className='fs-6 fw-bold'>Business Analytics App</span>
|
||||
<span className='fs-7 fw-bold text-muted'>Administration</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<img
|
||||
className='w-20px h-20px'
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/leaf.svg')}
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column justify-content-start fw-bold'>
|
||||
<span className='fs-6 fw-bold'>EcoLeaf App Launch</span>
|
||||
<span className='fs-7 fw-bold text-muted'>Marketing</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<img
|
||||
className='w-20px h-20px'
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/tower.svg')}
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column justify-content-start fw-bold'>
|
||||
<span className='fs-6 fw-bold'>Tower Group Website</span>
|
||||
<span className='fs-7 fw-bold text-muted'>Google Adwords</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<h3
|
||||
className='fs-5 text-muted m-0 pt-5 pb-5'
|
||||
data-kt-search-element='category-title'
|
||||
>
|
||||
Projects
|
||||
</h3>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<KTIcon iconName='document' className='fs-2 text-primary' />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<span className='fs-6 fw-bold'>Si-Fi Project by AU Themes</span>
|
||||
<span className='fs-7 fw-bold text-muted'>#45670</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<KTIcon iconName='chart-simple' className='fs-2 text-primary' />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<span className='fs-6 fw-bold'>Shopix Mobile App Planning</span>
|
||||
<span className='fs-7 fw-bold text-muted'>#45690</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<KTIcon iconName='message-text-2' className='fs-2 text-primary' />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<span className='fs-6 fw-bold'>Finance Monitoring SAAS Discussion</span>
|
||||
<span className='fs-7 fw-bold text-muted'>#21090</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='d-flex text-gray-900 text-hover-primary align-items-center mb-5'
|
||||
>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<KTIcon iconName='profile-circle' className='fs-2 text-primary' />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<span className='fs-6 fw-bold'>Dashboard Analitics Launch</span>
|
||||
<span className='fs-7 fw-bold text-muted'>#34560</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref={suggestionsElement} className='mb-4' data-kt-search-element='main'>
|
||||
<div className='d-flex flex-stack fw-bold mb-4'>
|
||||
<span className='text-muted fs-6 me-2'>Recently Searched:</span>
|
||||
</div>
|
||||
|
||||
<div className='scroll-y mh-200px mh-lg-325px'>
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<KTIcon iconName='phone' className='fs-2 text-primary' />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='/#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
BoomApp by Keenthemes
|
||||
</a>
|
||||
<span className='fs-7 text-muted fw-bold'>#45789</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<KTIcon iconName='chart-simple' className='fs-2 text-primary' />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='/#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
"Kept API Project Meeting
|
||||
</a>
|
||||
<span className='fs-7 text-muted fw-bold'>#84050</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<KTIcon iconName='chart' className='fs-2 text-primary' />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='/#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
"KPI Monitoring App Launch
|
||||
</a>
|
||||
<span className='fs-7 text-muted fw-bold'>#84250</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<KTIcon iconName='chart-simple-3' className='fs-2 text-primary' />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='/#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
Project Reference FAQ
|
||||
</a>
|
||||
<span className='fs-7 text-muted fw-bold'>#67945</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<KTIcon iconName='sms' className='fs-2 text-primary' />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='/#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
"FitPro App Development
|
||||
</a>
|
||||
<span className='fs-7 text-muted fw-bold'>#84250</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<KTIcon iconName='bank' className='fs-2 text-primary' />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='/#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
Shopix Mobile App
|
||||
</a>
|
||||
<span className='fs-7 text-muted fw-bold'>#45690</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
<div className='symbol symbol-40px me-4'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<KTIcon iconName='chart-simple-3' className='fs-2 text-primary' />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='/#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
"Landing UI Design" Launch
|
||||
</a>
|
||||
<span className='fs-7 text-muted fw-bold'>#24005</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref={emptyElement} data-kt-search-element='empty' className='text-center d-none'>
|
||||
<div className='pt-10 pb-10'>
|
||||
<KTIcon iconName='search-list' className='fs-4x opacity-50' />
|
||||
</div>
|
||||
|
||||
<div className='pb-15 fw-bold'>
|
||||
<h3 className='text-gray-600 fs-5 mb-2'>No result found</h3>
|
||||
<div className='text-muted fs-7'>Please try again with a different query</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form className={`pt-1 ${menuState === 'advanced' ? '' : 'd-none'}`}>
|
||||
<h3 className='fw-bold text-gray-900 mb-7'>Advanced Search</h3>
|
||||
|
||||
<div className='mb-5'>
|
||||
<input
|
||||
type='text'
|
||||
className='form-control form-control-sm form-control-solid'
|
||||
placeholder='Contains the word'
|
||||
name='query'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mb-5'>
|
||||
<div className='nav-group nav-group-fluid'>
|
||||
<label>
|
||||
<input
|
||||
type='radio'
|
||||
className='btn-check'
|
||||
name='type'
|
||||
value='has'
|
||||
defaultChecked
|
||||
/>
|
||||
<span className='btn btn-sm btn-color-muted btn-active btn-active-primary'>
|
||||
All
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type='radio' className='btn-check' name='type' value='users' />
|
||||
<span className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4'>
|
||||
Users
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type='radio' className='btn-check' name='type' value='orders' />
|
||||
<span className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4'>
|
||||
Orders
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type='radio' className='btn-check' name='type' value='projects' />
|
||||
<span className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4'>
|
||||
Projects
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-5'>
|
||||
<input
|
||||
type='text'
|
||||
name='assignedto'
|
||||
className='form-control form-control-sm form-control-solid'
|
||||
placeholder='Assigned to'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mb-5'>
|
||||
<input
|
||||
type='text'
|
||||
name='collaborators'
|
||||
className='form-control form-control-sm form-control-solid'
|
||||
placeholder='Collaborators'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mb-5'>
|
||||
<div className='nav-group nav-group-fluid'>
|
||||
<label>
|
||||
<input
|
||||
type='radio'
|
||||
className='btn-check'
|
||||
name='attachment'
|
||||
value='has'
|
||||
defaultChecked
|
||||
/>
|
||||
<span className='btn btn-sm btn-color-muted btn-active btn-active-primary'>
|
||||
Has attachment
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type='radio' className='btn-check' name='attachment' value='any' />
|
||||
<span className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4'>
|
||||
Any
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-5'>
|
||||
<select
|
||||
name='timezone'
|
||||
aria-label='Select a Timezone'
|
||||
data-control='select2'
|
||||
data-placeholder='date_period'
|
||||
className='form-select form-select-sm form-select-solid'
|
||||
>
|
||||
<option value='next'>Within the next</option>
|
||||
<option value='last'>Within the last</option>
|
||||
<option value='between'>Between</option>
|
||||
<option value='on'>On</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className='row mb-8'>
|
||||
<div className='col-6'>
|
||||
<input
|
||||
type='number'
|
||||
name='date_number'
|
||||
className='form-control form-control-sm form-control-solid'
|
||||
placeholder='Lenght'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-6'>
|
||||
<select
|
||||
name='date_typer'
|
||||
aria-label='Select a Timezone'
|
||||
data-control='select2'
|
||||
data-placeholder='Period'
|
||||
className='form-select form-select-sm form-select-solid'
|
||||
>
|
||||
<option value='days'>Days</option>
|
||||
<option value='weeks'>Weeks</option>
|
||||
<option value='months'>Months</option>
|
||||
<option value='years'>Years</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex justify-content-end'>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
setMenuState('main')
|
||||
}}
|
||||
className='btn btn-sm btn-light fw-bolder btn-active-light-primary me-2'
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<a
|
||||
href='/#'
|
||||
className='btn btn-sm fw-bolder btn-primary'
|
||||
data-kt-search-element='advanced-options-form-search'
|
||||
>
|
||||
Search
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form className={`pt-1 ${menuState === 'preferences' ? '' : 'd-none'}`}>
|
||||
<h3 className='fw-bold text-gray-900 mb-7'>Search Preferences</h3>
|
||||
|
||||
<div className='pb-4 border-bottom'>
|
||||
<label className='form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack'>
|
||||
<span className='form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2'>
|
||||
Projects
|
||||
</span>
|
||||
|
||||
<input className='form-check-input' type='checkbox' value='1' defaultChecked />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='py-4 border-bottom'>
|
||||
<label className='form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack'>
|
||||
<span className='form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2'>
|
||||
Targets
|
||||
</span>
|
||||
<input className='form-check-input' type='checkbox' value='1' defaultChecked />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='py-4 border-bottom'>
|
||||
<label className='form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack'>
|
||||
<span className='form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2'>
|
||||
Affiliate Programs
|
||||
</span>
|
||||
<input className='form-check-input' type='checkbox' value='1' />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='py-4 border-bottom'>
|
||||
<label className='form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack'>
|
||||
<span className='form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2'>
|
||||
Referrals
|
||||
</span>
|
||||
<input className='form-check-input' type='checkbox' value='1' defaultChecked />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='py-4 border-bottom'>
|
||||
<label className='form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack'>
|
||||
<span className='form-check-label text-gray-700 fs-6 fw-bold ms-0 me-2'>Users</span>
|
||||
<input className='form-check-input' type='checkbox' />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='d-flex justify-content-end pt-7'>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
setMenuState('main')
|
||||
}}
|
||||
className='btn btn-sm btn-light fw-bolder btn-active-light-primary me-2'
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button className='btn btn-sm fw-bolder btn-primary'>Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {Search}
|
||||
@@ -0,0 +1,37 @@
|
||||
import {useState} from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
|
||||
const SearchInner = () => {
|
||||
const [search, setSearch] = useState<string>('')
|
||||
return (
|
||||
<div
|
||||
data-kt-search-element='content'
|
||||
data-kt-menu='true'
|
||||
className='menu menu-sub menu-sub-dropdown p-7 w-325px w-md-375px'
|
||||
>
|
||||
<div data-kt-search-element='wrapper'>
|
||||
<form
|
||||
data-kt-search-element='form'
|
||||
className='w-100 position-relative mb-3'
|
||||
autoComplete='off'
|
||||
>
|
||||
<KTIcon
|
||||
iconName='magnifier'
|
||||
className='fs-2 text-lg-1 text-gray-500 position-absolute top-50 translate-middle-y ms-0'
|
||||
/>
|
||||
<input
|
||||
type='text'
|
||||
className='form-control form-control-flush ps-10'
|
||||
name='search'
|
||||
value={search}
|
||||
placeholder='Search...'
|
||||
data-kt-search-element='input'
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {SearchInner}
|
||||
@@ -0,0 +1,101 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
import {createContext, useContext, useEffect, useState} from 'react'
|
||||
import {ThemeModeComponent} from '../../../assets/ts/layout'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
export type ThemeModeType = 'dark' | 'light' | 'system'
|
||||
export const themeModelSKey = 'kt_theme_mode_value'
|
||||
export const themeMenuModeLSKey = 'kt_theme_mode_menu'
|
||||
|
||||
const systemMode = ThemeModeComponent.getSystemMode() as 'light' | 'dark'
|
||||
|
||||
type ThemeModeContextType = {
|
||||
mode: ThemeModeType
|
||||
menuMode: ThemeModeType
|
||||
updateMode: (_mode: ThemeModeType) => void
|
||||
updateMenuMode: (_mode: ThemeModeType) => void
|
||||
}
|
||||
|
||||
const themeModeSwitchHelper = (_mode: ThemeModeType) => {
|
||||
// change background image url
|
||||
const mode = _mode !== 'system' ? _mode : systemMode
|
||||
const imageUrl = 'media/patterns/header-bg' + (mode === 'light' ? '.jpg' : '-dark.jpg')
|
||||
document.body.style.backgroundImage = `url("${toAbsoluteUrl(imageUrl)}")`
|
||||
}
|
||||
|
||||
const getThemeModeFromLocalStorage = (lsKey: string): ThemeModeType => {
|
||||
if (!localStorage) {
|
||||
return 'light'
|
||||
}
|
||||
|
||||
const data = localStorage.getItem(lsKey)
|
||||
if (data === 'dark' || data === 'light' || data === 'system') {
|
||||
return data
|
||||
}
|
||||
|
||||
if (document.documentElement.hasAttribute('data-bs-theme')) {
|
||||
const dataTheme = document.documentElement.getAttribute('data-bs-theme')
|
||||
if (dataTheme && (dataTheme === 'dark' || dataTheme === 'light' || dataTheme === 'system')) {
|
||||
return dataTheme
|
||||
}
|
||||
}
|
||||
|
||||
return 'system'
|
||||
}
|
||||
|
||||
const defaultThemeMode: ThemeModeContextType = {
|
||||
mode: getThemeModeFromLocalStorage(themeModelSKey),
|
||||
menuMode: getThemeModeFromLocalStorage(themeMenuModeLSKey),
|
||||
updateMode: (_mode: ThemeModeType) => {},
|
||||
updateMenuMode: (_menuMode: ThemeModeType) => {},
|
||||
}
|
||||
|
||||
const ThemeModeContext = createContext<ThemeModeContextType>({
|
||||
mode: defaultThemeMode.mode,
|
||||
menuMode: defaultThemeMode.menuMode,
|
||||
updateMode: (_mode: ThemeModeType) => {},
|
||||
updateMenuMode: (_menuMode: ThemeModeType) => {},
|
||||
})
|
||||
|
||||
const useThemeMode = () => useContext(ThemeModeContext)
|
||||
|
||||
const ThemeModeProvider = ({children}: {children: React.ReactNode}) => {
|
||||
const [mode, setMode] = useState<ThemeModeType>(defaultThemeMode.mode)
|
||||
const [menuMode, setMenuMode] = useState<ThemeModeType>(defaultThemeMode.menuMode)
|
||||
|
||||
const updateMode = (_mode: ThemeModeType, saveInLocalStorage: boolean = true) => {
|
||||
setMode(_mode)
|
||||
// themeModeSwitchHelper(updatedMode)
|
||||
if (saveInLocalStorage && localStorage) {
|
||||
localStorage.setItem(themeModelSKey, _mode)
|
||||
}
|
||||
|
||||
if (saveInLocalStorage) {
|
||||
const updatedMode = _mode === 'system' ? systemMode : _mode
|
||||
document.documentElement.setAttribute('data-bs-theme', updatedMode)
|
||||
}
|
||||
ThemeModeComponent.init()
|
||||
}
|
||||
|
||||
const updateMenuMode = (_menuMode: ThemeModeType, saveInLocalStorage: boolean = true) => {
|
||||
setMenuMode(_menuMode)
|
||||
if (saveInLocalStorage && localStorage) {
|
||||
localStorage.setItem(themeMenuModeLSKey, _menuMode)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
updateMode(mode, false)
|
||||
updateMenuMode(menuMode, false)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<ThemeModeContext.Provider value={{mode, menuMode, updateMode, updateMenuMode}}>
|
||||
{children}
|
||||
</ThemeModeContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export {ThemeModeProvider, useThemeMode, systemMode, themeModeSwitchHelper}
|
||||
@@ -0,0 +1,104 @@
|
||||
import clsx from 'clsx'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {ThemeModeComponent} from '../../../assets/ts/layout'
|
||||
import {ThemeModeType, useThemeMode} from './ThemeModeProvider'
|
||||
|
||||
|
||||
type Props = {
|
||||
toggleBtnClass?: string
|
||||
toggleBtnIconClass?: string
|
||||
menuPlacement?: string
|
||||
menuTrigger?: string
|
||||
}
|
||||
|
||||
const systemMode = ThemeModeComponent.getSystemMode() as 'light' | 'dark'
|
||||
|
||||
const ThemeModeSwitcher = ({
|
||||
toggleBtnClass = '',
|
||||
toggleBtnIconClass = 'fs-1',
|
||||
menuPlacement = 'bottom-end',
|
||||
menuTrigger = "{default: 'click', lg: 'hover'}",
|
||||
}: Props) => {
|
||||
const {mode, menuMode, updateMode, updateMenuMode} = useThemeMode()
|
||||
const calculatedMode = mode === 'system' ? systemMode : mode
|
||||
const switchMode = (_mode: ThemeModeType) => {
|
||||
updateMenuMode(_mode)
|
||||
updateMode(_mode)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* begin::Menu toggle */}
|
||||
<a
|
||||
href='#'
|
||||
className={clsx('btn btn-icon ', toggleBtnClass)}
|
||||
data-kt-menu-trigger={menuTrigger}
|
||||
data-kt-menu-attach='parent'
|
||||
data-kt-menu-placement={menuPlacement}
|
||||
>
|
||||
{calculatedMode === 'dark' && (
|
||||
<KTIcon iconName='moon' className={clsx('theme-light-hide', toggleBtnIconClass)} />
|
||||
)}
|
||||
|
||||
{calculatedMode === 'light' && (
|
||||
<KTIcon iconName='night-day' className={clsx('theme-dark-hide', toggleBtnIconClass)} />
|
||||
)}
|
||||
</a>
|
||||
{/* begin::Menu toggle */}
|
||||
|
||||
{/* begin::Menu */}
|
||||
<div
|
||||
className='menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-primary fw-semibold py-4 fs-base w-175px'
|
||||
data-kt-menu='true'
|
||||
>
|
||||
{/* begin::Menu item */}
|
||||
<div className='menu-item px-3 my-0'>
|
||||
<a
|
||||
href='#'
|
||||
className={clsx('menu-link px-3 py-2', {active: menuMode === 'light'})}
|
||||
onClick={() => switchMode('light')}
|
||||
>
|
||||
<span className='menu-icon' data-kt-element='icon'>
|
||||
<KTIcon iconName='night-day' className='fs-1' />
|
||||
</span>
|
||||
<span className='menu-title'>Light</span>
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Menu item */}
|
||||
|
||||
{/* begin::Menu item */}
|
||||
<div className='menu-item px-3 my-0'>
|
||||
<a
|
||||
href='#'
|
||||
className={clsx('menu-link px-3 py-2', {active: menuMode === 'dark'})}
|
||||
onClick={() => switchMode('dark')}
|
||||
>
|
||||
<span className='menu-icon' data-kt-element='icon'>
|
||||
<KTIcon iconName='moon' className='fs-1' />
|
||||
</span>
|
||||
<span className='menu-title'>Dark</span>
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Menu item */}
|
||||
|
||||
{/* begin::Menu item */}
|
||||
<div className='menu-item px-3 my-0'>
|
||||
<a
|
||||
href='#'
|
||||
className={clsx('menu-link px-3 py-2', {active: menuMode === 'system'})}
|
||||
onClick={() => switchMode('system')}
|
||||
>
|
||||
<span className='menu-icon' data-kt-element='icon'>
|
||||
<KTIcon iconName='screen' className='fs-1' />
|
||||
</span>
|
||||
<span className='menu-title'>System</span>
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Menu item */}
|
||||
</div>
|
||||
{/* end::Menu */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {ThemeModeSwitcher}
|
||||
Reference in New Issue
Block a user