upgade package
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,195 @@
|
||||
|
||||
import {FC, useState} from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {
|
||||
toAbsoluteUrl,
|
||||
defaultMessages,
|
||||
defaultUserInfos,
|
||||
MessageModel,
|
||||
UserInfoModel,
|
||||
messageFromClient,
|
||||
} from '../../helpers'
|
||||
|
||||
type Props = {
|
||||
isDrawer?: boolean
|
||||
}
|
||||
|
||||
const bufferMessages = defaultMessages
|
||||
|
||||
const ChatInner: FC<Props> = ({isDrawer = false}) => {
|
||||
const [chatUpdateFlag, toggleChatUpdateFlat] = useState<boolean>(false)
|
||||
const [message, setMessage] = useState<string>('')
|
||||
const [messages, setMessages] = useState<MessageModel[]>(bufferMessages)
|
||||
const [userInfos] = useState<UserInfoModel[]>(defaultUserInfos)
|
||||
|
||||
const sendMessage = () => {
|
||||
const newMessage: MessageModel = {
|
||||
user: 2,
|
||||
type: 'out',
|
||||
text: message,
|
||||
time: 'Just now',
|
||||
}
|
||||
|
||||
bufferMessages.push(newMessage)
|
||||
setMessages(bufferMessages)
|
||||
toggleChatUpdateFlat(!chatUpdateFlag)
|
||||
setMessage('')
|
||||
setTimeout(() => {
|
||||
bufferMessages.push(messageFromClient)
|
||||
setMessages(() => bufferMessages)
|
||||
toggleChatUpdateFlat((flag) => !flag)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const onEnterPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.keyCode === 13 && e.shiftKey === false) {
|
||||
e.preventDefault()
|
||||
sendMessage()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className='card-body'
|
||||
id={isDrawer ? 'kt_drawer_chat_messenger_body' : 'kt_chat_messenger_body'}
|
||||
>
|
||||
<div
|
||||
className={clsx('scroll-y me-n5 pe-5', {'h-300px h-lg-auto': !isDrawer})}
|
||||
data-kt-element='messages'
|
||||
data-kt-scroll='true'
|
||||
data-kt-scroll-activate='{default: false, lg: true}'
|
||||
data-kt-scroll-max-height='auto'
|
||||
data-kt-scroll-dependencies={
|
||||
isDrawer
|
||||
? '#kt_drawer_chat_messenger_header, #kt_drawer_chat_messenger_footer'
|
||||
: '#kt_header, #kt_app_header, #kt_app_toolbar, #kt_toolbar, #kt_footer, #kt_app_footer, #kt_chat_messenger_header, #kt_chat_messenger_footer'
|
||||
}
|
||||
data-kt-scroll-wrappers={
|
||||
isDrawer
|
||||
? '#kt_drawer_chat_messenger_body'
|
||||
: '#kt_content, #kt_app_content, #kt_chat_messenger_body'
|
||||
}
|
||||
data-kt-scroll-offset={isDrawer ? '0px' : '5px'}
|
||||
>
|
||||
{messages.map((message, index) => {
|
||||
const userInfo = userInfos[message.user]
|
||||
const state = message.type === 'in' ? 'info' : 'primary'
|
||||
const templateAttr = {}
|
||||
if (message.template) {
|
||||
Object.defineProperty(templateAttr, 'data-kt-element', {
|
||||
value: `template-${message.type}`,
|
||||
})
|
||||
}
|
||||
const contentClass = `${isDrawer ? '' : 'd-flex'} justify-content-${
|
||||
message.type === 'in' ? 'start' : 'end'
|
||||
} mb-10`
|
||||
return (
|
||||
<div
|
||||
key={`message${index}`}
|
||||
className={clsx('d-flex', contentClass, 'mb-10', {'d-none': message.template})}
|
||||
{...templateAttr}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'd-flex flex-column align-items',
|
||||
`align-items-${message.type === 'in' ? 'start' : 'end'}`
|
||||
)}
|
||||
>
|
||||
<div className='d-flex align-items-center mb-2'>
|
||||
{message.type === 'in' ? (
|
||||
<>
|
||||
<div className='symbol symbol-35px symbol-circle '>
|
||||
<img alt='Pic' src={toAbsoluteUrl(`media/${userInfo.avatar}`)} />
|
||||
</div>
|
||||
<div className='ms-3'>
|
||||
<a
|
||||
href='#'
|
||||
className='fs-5 fw-bolder text-gray-900 text-hover-primary me-1'
|
||||
>
|
||||
{userInfo.name}
|
||||
</a>
|
||||
<span className='text-muted fs-7 mb-1'>{message.time}</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className='me-3'>
|
||||
<span className='text-muted fs-7 mb-1'>{message.time}</span>
|
||||
<a
|
||||
href='#'
|
||||
className='fs-5 fw-bolder text-gray-900 text-hover-primary ms-1'
|
||||
>
|
||||
You
|
||||
</a>
|
||||
</div>
|
||||
<div className='symbol symbol-35px symbol-circle '>
|
||||
<img alt='Pic' src={toAbsoluteUrl(`media/${userInfo.avatar}`)} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={clsx(
|
||||
'p-5 rounded',
|
||||
`bg-light-${state}`,
|
||||
'text-gray-900 fw-bold mw-lg-400px',
|
||||
`text-${message.type === 'in' ? 'start' : 'end'}`
|
||||
)}
|
||||
data-kt-element='message-text'
|
||||
dangerouslySetInnerHTML={{__html: message.text}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className='card-footer pt-4'
|
||||
id={isDrawer ? 'kt_drawer_chat_messenger_footer' : 'kt_chat_messenger_footer'}
|
||||
>
|
||||
<textarea
|
||||
className='form-control form-control-flush mb-3'
|
||||
rows={1}
|
||||
data-kt-element='input'
|
||||
placeholder='Type a message'
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
onKeyDown={onEnterPress}
|
||||
></textarea>
|
||||
|
||||
<div className='d-flex flex-stack'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
<button
|
||||
className='btn btn-sm btn-icon btn-active-light-primary me-1'
|
||||
type='button'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Coming soon'
|
||||
>
|
||||
<i className='bi bi-paperclip fs-3'></i>
|
||||
</button>
|
||||
<button
|
||||
className='btn btn-sm btn-icon btn-active-light-primary me-1'
|
||||
type='button'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Coming soon'
|
||||
>
|
||||
<i className='bi bi-upload fs-3'></i>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className='btn btn-primary'
|
||||
type='button'
|
||||
data-kt-element='send'
|
||||
onClick={sendMessage}
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ChatInner}
|
||||
@@ -0,0 +1,103 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
const Item1: FC = () => {
|
||||
return (
|
||||
<div className='timeline-item'>
|
||||
<div className='timeline-line w-40px'></div>
|
||||
|
||||
<div className='timeline-icon symbol symbol-circle symbol-40px me-4'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<KTIcon iconName='message-text-2' className='fs-2 text-gray-500' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='timeline-content mb-10 mt-n1'>
|
||||
<div className='pe-3 mb-5'>
|
||||
<div className='fs-5 fw-bold mb-2'>
|
||||
There are 2 new tasks for you in “AirPlus Mobile APp” project:
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center mt-1 fs-6'>
|
||||
<div className='text-muted me-2 fs-7'>Added at 4:23 PM by</div>
|
||||
|
||||
<div
|
||||
className='symbol symbol-circle symbol-25px'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-boundary='window'
|
||||
data-bs-placement='top'
|
||||
title='Nina Nilson'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-14.jpg')} alt='img' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='overflow-auto pb-5'>
|
||||
<div className='d-flex align-items-center border border-dashed border-gray-300 rounded min-w-750px px-7 py-3 mb-5'>
|
||||
<a href='#' className='fs-5 text-gray-900 text-hover-primary fw-bold w-375px min-w-200px'>
|
||||
Meeting with customer
|
||||
</a>
|
||||
|
||||
<div className='min-w-175px pe-2'>
|
||||
<span className='badge badge-light text-muted'>Application Design</span>
|
||||
</div>
|
||||
|
||||
<div className='symbol-group symbol-hover flex-nowrap flex-grow-1 min-w-100px pe-2'>
|
||||
<div className='symbol symbol-circle symbol-25px'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-2.jpg')} alt='img' />
|
||||
</div>
|
||||
|
||||
<div className='symbol symbol-circle symbol-25px'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-14.jpg')} alt='img' />
|
||||
</div>
|
||||
|
||||
<div className='symbol symbol-circle symbol-25px'>
|
||||
<div className='symbol-label fs-8 fw-bold bg-primary text-inverse-primary'>A</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='min-w-125px pe-2'>
|
||||
<span className='badge badge-light-primary'>In Progress</span>
|
||||
</div>
|
||||
|
||||
<a href='#' className='btn btn-sm btn-light btn-active-light-primary'>
|
||||
View
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center border border-dashed border-gray-300 rounded min-w-750px px-7 py-3 mb-0'>
|
||||
<a href='#' className='fs-5 text-gray-900 text-hover-primary fw-bold w-375px min-w-200px'>
|
||||
Project Delivery Preparation
|
||||
</a>
|
||||
|
||||
<div className='min-w-175px'>
|
||||
<span className='badge badge-light text-muted'>CRM System Development</span>
|
||||
</div>
|
||||
|
||||
<div className='symbol-group symbol-hover flex-nowrap flex-grow-1 min-w-100px'>
|
||||
<div className='symbol symbol-circle symbol-25px'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-20.jpg')} alt='img' />
|
||||
</div>
|
||||
|
||||
<div className='symbol symbol-circle symbol-25px'>
|
||||
<div className='symbol-label fs-8 fw-bold bg-success text-inverse-primary'>B</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='min-w-125px'>
|
||||
<span className='badge badge-light-success'>Completed</span>
|
||||
</div>
|
||||
|
||||
<a href='#' className='btn btn-sm btn-light btn-active-light-primary'>
|
||||
View
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Item1}
|
||||
@@ -0,0 +1,40 @@
|
||||
import {FC} from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
const Item2: FC = () => {
|
||||
return (
|
||||
<div className='timeline-item'>
|
||||
<div className='timeline-line w-40px'></div>
|
||||
|
||||
<div className='timeline-icon symbol symbol-circle symbol-40px'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<KTIcon iconName='pointers' className='fs-2 text-gray-500' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='timeline-content mb-10 mt-n2'>
|
||||
<div className='overflow-auto pe-3'>
|
||||
<div className='fs-5 fw-bold mb-2'>
|
||||
Invitation for crafting engaging designs that speak human workshop
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center mt-1 fs-6'>
|
||||
<div className='text-muted me-2 fs-7'>Sent at 4:23 PM by</div>
|
||||
|
||||
<div
|
||||
className='symbol symbol-circle symbol-25px'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-boundary='window'
|
||||
data-bs-placement='top'
|
||||
title='Alan Nilson'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-1.jpg')} alt='img' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Item2}
|
||||
@@ -0,0 +1,81 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
const Item3: FC = () => {
|
||||
return (
|
||||
<div className='timeline-item'>
|
||||
<div className='timeline-line w-40px'></div>
|
||||
|
||||
<div className='timeline-icon symbol symbol-circle symbol-40px'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<KTIcon iconName='disconnect' className='fs-2 text-gray-500' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='timeline-content mb-10 mt-n1'>
|
||||
<div className='mb-5 pe-3'>
|
||||
<a href='#' className='fs-5 fw-bold text-gray-800 text-hover-primary mb-2'>
|
||||
3 New Incoming Project Files:
|
||||
</a>
|
||||
|
||||
<div className='d-flex align-items-center mt-1 fs-6'>
|
||||
<div className='text-muted me-2 fs-7'>Sent at 10:30 PM by</div>
|
||||
|
||||
<div
|
||||
className='symbol symbol-circle symbol-25px'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-boundary='window'
|
||||
data-bs-placement='top'
|
||||
title='Jan Hummer'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-23.jpg')} alt='img' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='overflow-auto pb-5'>
|
||||
<div className='d-flex align-items-center border border-dashed border-gray-300 rounded min-w-700px p-5'>
|
||||
<div className='d-flex flex-aligns-center pe-10 pe-lg-20'>
|
||||
<img alt='' className='w-30px me-3' src={toAbsoluteUrl('media/svg/files/pdf.svg')} />
|
||||
|
||||
<div className='ms-1 fw-bold'>
|
||||
<a href='#' className='fs-6 text-hover-primary fw-bolder'>
|
||||
Finance KPI App Guidelines
|
||||
</a>
|
||||
|
||||
<div className='text-gray-500'>1.9mb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-aligns-center pe-10 pe-lg-20'>
|
||||
<img alt='' className='w-30px me-3' src={toAbsoluteUrl('media/svg/files/doc.svg')} />
|
||||
|
||||
<div className='ms-1 fw-bold'>
|
||||
<a href='#' className='fs-6 text-hover-primary fw-bolder'>
|
||||
Client UAT Testing Results
|
||||
</a>
|
||||
|
||||
<div className='text-gray-500'>18kb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-aligns-center'>
|
||||
<img alt='' className='w-30px me-3' src={toAbsoluteUrl('media/svg/files/css.svg')} />
|
||||
|
||||
<div className='ms-1 fw-bold'>
|
||||
<a href='#' className='fs-6 text-hover-primary fw-bolder'>
|
||||
Finance Reports
|
||||
</a>
|
||||
|
||||
<div className='text-gray-500'>20mb</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Item3}
|
||||
@@ -0,0 +1,49 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
const Item4: FC = () => {
|
||||
return (
|
||||
<div className='timeline-item'>
|
||||
<div className='timeline-line w-40px'></div>
|
||||
|
||||
<div className='timeline-icon symbol symbol-circle symbol-40px'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<KTIcon iconName='abstract-26' className='fs-2 text-gray-500' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='timeline-content mb-10 mt-n1'>
|
||||
<div className='pe-3 mb-5'>
|
||||
<div className='fs-5 fw-bold mb-2'>
|
||||
Task{' '}
|
||||
<a href='#' className='text-primary fw-bolder me-1'>
|
||||
#45890
|
||||
</a>
|
||||
merged with{' '}
|
||||
<a href='#' className='text-primary fw-bolder me-1'>
|
||||
#45890
|
||||
</a>{' '}
|
||||
in “Ads Pro Admin Dashboard project:
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center mt-1 fs-6'>
|
||||
<div className='text-muted me-2 fs-7'>Initiated at 4:23 PM by</div>
|
||||
|
||||
<div
|
||||
className='symbol symbol-circle symbol-25px'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-boundary='window'
|
||||
data-bs-placement='top'
|
||||
title='Nina Nilson'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-14.jpg')} alt='img' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Item4}
|
||||
@@ -0,0 +1,91 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
const Item5: FC = () => {
|
||||
return (
|
||||
<div className='timeline-item'>
|
||||
<div className='timeline-line w-40px'></div>
|
||||
|
||||
<div className='timeline-icon symbol symbol-circle symbol-40px'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<KTIcon iconName='pencil' className='fs-2 text-gray-500' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='timeline-content mb-10 mt-n1'>
|
||||
<div className='pe-3 mb-5'>
|
||||
<div className='fs-5 fw-bold mb-2'>3 new application design concepts added:</div>
|
||||
|
||||
<div className='d-flex align-items-center mt-1 fs-6'>
|
||||
<div className='text-muted me-2 fs-7'>Created at 4:23 PM by</div>
|
||||
|
||||
<div
|
||||
className='symbol symbol-circle symbol-25px'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-boundary='window'
|
||||
data-bs-placement='top'
|
||||
title='Marcus Dotson'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-2.jpg')} alt='img' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='overflow-auto pb-5'>
|
||||
<div className='d-flex align-items-center border border-dashed border-gray-300 rounded min-w-700px p-7'>
|
||||
<div className='overlay me-10'>
|
||||
<div className='overlay-wrapper'>
|
||||
<img
|
||||
alt='img'
|
||||
className='rounded w-200px'
|
||||
src={toAbsoluteUrl('media/stock/600x400/img-29.jpg')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='overlay-layer bg-dark bg-opacity-10 rounded'>
|
||||
<a href='#' className='btn btn-sm btn-primary btn-shadow'>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='overlay me-10'>
|
||||
<div className='overlay-wrapper'>
|
||||
<img
|
||||
alt='img'
|
||||
className='rounded w-200px'
|
||||
src={toAbsoluteUrl('media/stock/600x400/img-31.jpg')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='overlay-layer bg-dark bg-opacity-10 rounded'>
|
||||
<a href='#' className='btn btn-sm btn-primary btn-shadow'>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='overlay'>
|
||||
<div className='overlay-wrapper'>
|
||||
<img
|
||||
alt='img'
|
||||
className='rounded w-200px'
|
||||
src={toAbsoluteUrl('media/stock/600x400/img-40.jpg')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='overlay-layer bg-dark bg-opacity-10 rounded'>
|
||||
<a href='#' className='btn btn-sm btn-primary btn-shadow'>
|
||||
Explore
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Item5}
|
||||
@@ -0,0 +1,41 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
|
||||
const Item6: FC = () => {
|
||||
return (
|
||||
<div className='timeline-item'>
|
||||
<div className='timeline-line w-40px'></div>
|
||||
|
||||
<div className='timeline-icon symbol symbol-circle symbol-40px'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<KTIcon iconName='sms' className='fs-2 text-gray-500' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='timeline-content mb-10 mt-n1'>
|
||||
<div className='pe-3 mb-5'>
|
||||
<div className='fs-5 fw-bold mb-2'>
|
||||
New case{' '}
|
||||
<a href='#' className='text-primary fw-bolder me-1'>
|
||||
#67890
|
||||
</a>
|
||||
is assigned to you in Multi-platform Database Design project
|
||||
</div>
|
||||
|
||||
<div className='overflow-auto pb-5'>
|
||||
<div className='d-flex align-items-center mt-1 fs-6'>
|
||||
<div className='text-muted me-2 fs-7'>Added at 4:23 PM by</div>
|
||||
|
||||
<a href='#' className='text-primary fw-bolder me-1'>
|
||||
Alice Tan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Item6}
|
||||
@@ -0,0 +1,59 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
const Item7: FC = () => {
|
||||
return (
|
||||
<div className='timeline-item'>
|
||||
<div className='timeline-line w-40px'></div>
|
||||
|
||||
<div className='timeline-icon symbol symbol-circle symbol-40px'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<KTIcon iconName='pencil' className='fs-2 text-gray-500' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='timeline-content mb-10 mt-n1'>
|
||||
<div className='pe-3 mb-5'>
|
||||
<div className='fs-5 fw-bold mb-2'>You have received a new order:</div>
|
||||
|
||||
<div className='d-flex align-items-center mt-1 fs-6'>
|
||||
<div className='text-muted me-2 fs-7'>Placed at 5:05 AM by</div>
|
||||
|
||||
<div
|
||||
className='symbol symbol-circle symbol-25px'
|
||||
data-bs-toggle='tooltip'
|
||||
data-bs-boundary='window'
|
||||
data-bs-placement='top'
|
||||
title='Robert Rich'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-4.jpg')} alt='img' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='overflow-auto pb-5'>
|
||||
<div className='notice d-flex bg-light-primary rounded border-primary border border-dashed min-w-lg-600px flex-shrink-0 p-6'>
|
||||
<KTIcon
|
||||
iconName='chart-simple-3coding/cod004.svg'
|
||||
className='fs-2tx text-primary me-4'
|
||||
/>
|
||||
<div className='d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap'>
|
||||
<div className='mb-3 mb-md-0 fw-bold'>
|
||||
<h4 className='text-gray-800 fw-bolder'>Database Backup Process Completed!</h4>
|
||||
<div className='fs-6 text-gray-600 pe-7'>
|
||||
Login into Metronic Admin Dashboard to make sure the data integrity is OK
|
||||
</div>
|
||||
</div>
|
||||
<a href='#' className='btn btn-primary px-6 align-self-center text-nowrap'>
|
||||
Proceed
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Item7}
|
||||
@@ -0,0 +1,39 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
|
||||
const Item8: FC = () => {
|
||||
return (
|
||||
<div className='timeline-item'>
|
||||
<div className='timeline-line w-40px'></div>
|
||||
|
||||
<div className='timeline-icon symbol symbol-circle symbol-40px'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<KTIcon iconName='basket' className='fs-2 text-gray-500' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='timeline-content mt-n1'>
|
||||
<div className='pe-3 mb-5'>
|
||||
<div className='fs-5 fw-bold mb-2'>
|
||||
New order{' '}
|
||||
<a href='#' className='text-primary fw-bolder me-1'>
|
||||
#67890
|
||||
</a>
|
||||
is placed for Workshow Planning & Budget Estimation
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center mt-1 fs-6'>
|
||||
<div className='text-muted me-2 fs-7'>Placed at 4:23 PM by</div>
|
||||
|
||||
<a href='#' className='text-primary fw-bolder me-1'>
|
||||
Jimmy Bold
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Item8}
|
||||
@@ -0,0 +1,68 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
color?: string
|
||||
avatar?: string
|
||||
online?: boolean
|
||||
name: string
|
||||
job: string
|
||||
avgEarnings: string
|
||||
totalEarnings: string
|
||||
}
|
||||
|
||||
const Card1: FC<Props> = ({
|
||||
color = '',
|
||||
avatar = '',
|
||||
online = false,
|
||||
name,
|
||||
job,
|
||||
avgEarnings,
|
||||
totalEarnings,
|
||||
}) => {
|
||||
return (
|
||||
<div className='card'>
|
||||
<div className='card-body d-flex flex-center flex-column p-9'>
|
||||
<div className='mb-5'>
|
||||
<div className='symbol symbol-75px symbol-circle'>
|
||||
{color ? (
|
||||
<span className={`symbol-label bg-light-${color} text-${color} fs-5 fw-bolder`}>
|
||||
{name.charAt(0)}
|
||||
</span>
|
||||
) : (
|
||||
<img alt='Pic' src={toAbsoluteUrl(avatar)} />
|
||||
)}
|
||||
{online && (
|
||||
<div className='symbol-badge bg-success start-100 top-100 border-4 h-15px w-15px ms-n3 mt-n3'></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href='#' className='fs-4 text-gray-800 text-hover-primary fw-bolder mb-0'>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
<div className='fw-bold text-gray-500 mb-6'>{job}</div>
|
||||
|
||||
<div className='d-flex flex-center flex-wrap mb-5'>
|
||||
<div className='border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 mx-3 mb-3'>
|
||||
<div className='fs-6 fw-bolder text-gray-700'>{avgEarnings}</div>
|
||||
<div className='fw-bold text-gray-500'>Avg. Earnings</div>
|
||||
</div>
|
||||
|
||||
<div className='border border-gray-300 border-dashed rounded min-w-125px py-3 mx-3 px-4 mb-3'>
|
||||
<div className='fs-6 fw-bolder text-gray-700'>{totalEarnings}</div>
|
||||
<div className='fw-bold text-gray-500'>Total Sales</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className='btn btn-sm btn-light-primary fw-bolder' id='kt_drawer_chat_toggle'>
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Card1}
|
||||
@@ -0,0 +1,87 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {IconUserModel} from '../../../../app/modules/profile/ProfileModels'
|
||||
import {UsersList} from '../../../../app/modules/profile/components/UsersList'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
icon: string
|
||||
badgeColor: string
|
||||
status: string
|
||||
statusColor: string
|
||||
title: string
|
||||
description: string
|
||||
date: string
|
||||
budget: string
|
||||
progress: number
|
||||
users?: Array<IconUserModel>
|
||||
}
|
||||
|
||||
const Card2: FC<Props> = ({
|
||||
icon,
|
||||
badgeColor,
|
||||
status,
|
||||
statusColor,
|
||||
title,
|
||||
description,
|
||||
date,
|
||||
budget,
|
||||
progress,
|
||||
users = undefined,
|
||||
}) => {
|
||||
return (
|
||||
<Link
|
||||
to='/crafted/pages/profile/overview'
|
||||
className='card border border-2 border-gray-300 border-hover'
|
||||
>
|
||||
<div className='card-header border-0 pt-9'>
|
||||
<div className='card-title m-0'>
|
||||
<div className='symbol symbol-50px w-50px bg-light'>
|
||||
<img src={toAbsoluteUrl(icon)} alt='card2' className='p-3' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
<span className={`badge badge-light-${badgeColor} fw-bolder me-auto px-4 py-3`}>
|
||||
{status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='card-body p-9'>
|
||||
<div className='fs-3 fw-bolder text-gray-900'>{title}</div>
|
||||
|
||||
<p className='text-gray-500 fw-bold fs-5 mt-1 mb-7'>{description}</p>
|
||||
|
||||
<div className='d-flex flex-wrap mb-5'>
|
||||
<div className='border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-7 mb-3'>
|
||||
<div className='fs-6 text-gray-800 fw-bolder'>{date}</div>
|
||||
<div className='fw-bold text-gray-500'>Due Date</div>
|
||||
</div>
|
||||
|
||||
<div className='border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 mb-3'>
|
||||
<div className='fs-6 text-gray-800 fw-bolder'>{budget}</div>
|
||||
<div className='fw-bold text-gray-500'>Budget</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className='h-4px w-100 bg-light mb-5'
|
||||
data-bs-toggle='tooltip'
|
||||
title='This project completed'
|
||||
>
|
||||
<div
|
||||
className={`bg-${statusColor} rounded h-4px`}
|
||||
role='progressbar'
|
||||
style={{width: `${progress}%`}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<UsersList users={users} />
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export {Card2}
|
||||
@@ -0,0 +1,69 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
color?: string
|
||||
avatar?: string
|
||||
online?: boolean
|
||||
name: string
|
||||
job: string
|
||||
avgEarnings: string
|
||||
totalEarnings: string
|
||||
}
|
||||
|
||||
const Card3: FC<Props> = ({
|
||||
color = '',
|
||||
avatar = '',
|
||||
online = false,
|
||||
name,
|
||||
job,
|
||||
avgEarnings,
|
||||
totalEarnings,
|
||||
}) => {
|
||||
return (
|
||||
<div className='card'>
|
||||
<div className='card-body d-flex flex-center flex-column p-9'>
|
||||
<div className='mb-5'>
|
||||
<div className='symbol symbol-75px symbol-circle'>
|
||||
{color ? (
|
||||
<span className={`symbol-label bg-light-${color} text-${color} fs-5 fw-bolder`}>
|
||||
{name.charAt(0)}
|
||||
</span>
|
||||
) : (
|
||||
<img alt='Pic' src={toAbsoluteUrl(avatar)} />
|
||||
)}
|
||||
{online && (
|
||||
<div className='symbol-badge bg-success start-100 top-100 border-4 h-15px w-15px ms-n3 mt-n3'></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href='#' className='fs-4 text-gray-800 text-hover-primary fw-bolder mb-0'>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
<div className='fw-bold text-gray-500 mb-6'>{job}</div>
|
||||
|
||||
<div className='d-flex flex-center flex-wrap mb-5'>
|
||||
<div className='border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 mx-3 mb-3'>
|
||||
<div className='fs-6 fw-bolder text-gray-700'>{avgEarnings}</div>
|
||||
<div className='fw-bold text-gray-500'>Avg. Earnings</div>
|
||||
</div>
|
||||
|
||||
<div className='border border-gray-300 border-dashed rounded min-w-125px py-3 mx-3 px-4 mb-3'>
|
||||
<div className='fs-6 fw-bolder text-gray-700'>{totalEarnings}</div>
|
||||
<div className='fw-bold text-gray-500'>Total Sales</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href='#' className='btn btn-sm btn-light'>
|
||||
<KTIcon iconName='plus' className='fs-3' />
|
||||
Connect
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Card3}
|
||||
@@ -0,0 +1,27 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
icon: string
|
||||
title: string
|
||||
description: string
|
||||
}
|
||||
|
||||
const Card4: FC<Props> = ({icon, title, description}) => {
|
||||
return (
|
||||
<div className='card h-100'>
|
||||
<div className='card-body d-flex justify-content-center text-center flex-column p-8'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary d-flex flex-column'>
|
||||
<div className='symbol symbol-75px mb-6'>
|
||||
<img src={toAbsoluteUrl(icon)} alt='' />
|
||||
</div>
|
||||
<div className='fs-5 fw-bolder mb-2'>{title}</div>
|
||||
</a>
|
||||
<div className='fs-7 fw-bold text-gray-500 mt-auto'>{description}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Card4}
|
||||
@@ -0,0 +1,84 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
image: string
|
||||
title: string
|
||||
description: string
|
||||
status: 'up' | 'down'
|
||||
statusValue: number
|
||||
statusDesc: string
|
||||
progress: number
|
||||
progressType: string
|
||||
}
|
||||
|
||||
const Card5: FC<Props> = ({
|
||||
image,
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
statusValue,
|
||||
statusDesc,
|
||||
progress,
|
||||
progressType,
|
||||
}) => {
|
||||
return (
|
||||
<div className='card h-100'>
|
||||
<div className='card-header flex-nowrap border-0 pt-9'>
|
||||
<div className='card-title m-0'>
|
||||
<div className='symbol symbol-45px w-45px bg-light me-5'>
|
||||
<img src={toAbsoluteUrl(image)} alt='Metronic' className='p-3' />
|
||||
</div>
|
||||
|
||||
<a href='#' className='fs-4 fw-bold text-hover-primary text-gray-600 m-0'>
|
||||
{title}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='card-toolbar m-0'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-clean btn-sm btn-icon btn-icon-primary btn-active-light-primary me-n3'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-3 text-primary' />
|
||||
</button>
|
||||
|
||||
<Dropdown1 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='card-body d-flex flex-column px-9 pt-6 pb-8'>
|
||||
<div className='fs-2tx fw-bolder mb-3'>{description}</div>
|
||||
|
||||
<div className='d-flex align-items-center flex-wrap mb-5 mt-auto fs-6'>
|
||||
{status === 'up' && (
|
||||
<KTIcon iconName='arrow-up-right' className='fs-3 me-1 text-success' />
|
||||
)}
|
||||
|
||||
{status === 'down' && (
|
||||
<KTIcon iconName='arrow-down-right' className='fs-3 me-1 text-danger' />
|
||||
)}
|
||||
|
||||
<div className={`fw-bolder me-2 ` + (status === 'up' ? 'text-success' : 'text-danger')}>
|
||||
{status === 'up' ? '+' : '-'}
|
||||
{statusValue}%
|
||||
</div>
|
||||
|
||||
<div className='fw-bold text-gray-500'>{statusDesc}</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center fw-bold'>
|
||||
<span className='badge bg-light text-gray-700 px-3 py-2 me-2'>{progress}%</span>
|
||||
<span className='text-gray-500 fs-7'>{progressType}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Card5}
|
||||
@@ -0,0 +1,72 @@
|
||||
|
||||
import {useState, useEffect, useRef, FC} from 'react'
|
||||
import {CopyToClipboard} from 'react-copy-to-clipboard'
|
||||
import {Highlight} from 'prism-react-renderer'
|
||||
import {OverlayTrigger, Tooltip} from 'react-bootstrap'
|
||||
|
||||
type Props = {
|
||||
code: string
|
||||
language: string
|
||||
}
|
||||
|
||||
const CodeBlock: FC<Props> = ({code, language}) => {
|
||||
const codeRef = useRef<HTMLDivElement | null>(null)
|
||||
const [copied, setCopied] = useState(false)
|
||||
useEffect(() => {
|
||||
if (!copied) {
|
||||
return
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
setCopied(false)
|
||||
}, 1500)
|
||||
}, [copied])
|
||||
|
||||
useEffect(() => {
|
||||
if (!codeRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const prismCodeElement = codeRef.current.querySelector('.prism-code ') as HTMLDivElement
|
||||
if (prismCodeElement) {
|
||||
prismCodeElement.style.background = 'none'
|
||||
prismCodeElement.style.fontSize = '13px'
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className='py-5'>
|
||||
<div className='highlight'>
|
||||
<OverlayTrigger
|
||||
key='copy-to-clipboard'
|
||||
placement='top'
|
||||
overlay={<Tooltip id='tooltip-copy-to-clipboard'>Copy Code</Tooltip>}
|
||||
>
|
||||
<CopyToClipboard text={code} onCopy={() => setCopied(true)}>
|
||||
<a className='highlight-copy btn'>{copied ? 'copied' : 'copy'}</a>
|
||||
</CopyToClipboard>
|
||||
</OverlayTrigger>
|
||||
|
||||
<div className='highlight-code' ref={codeRef}>
|
||||
<Highlight code={code} language={language}>
|
||||
{({className, style, tokens, getLineProps, getTokenProps}) => {
|
||||
return (
|
||||
<pre className={className} style={{maxHeight: '300px', ...style}}>
|
||||
{tokens.map((line, i) => (
|
||||
<div {...getLineProps({line, key: i})}>
|
||||
{line.map((token, key) => (
|
||||
<span {...getTokenProps({token, key})} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</pre>
|
||||
)
|
||||
}}
|
||||
</Highlight>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {CodeBlock}
|
||||
@@ -0,0 +1,79 @@
|
||||
|
||||
export function Dropdown1() {
|
||||
return (
|
||||
<div className='menu menu-sub menu-sub-dropdown w-250px w-md-300px' data-kt-menu='true'>
|
||||
<div className='px-7 py-5'>
|
||||
<div className='fs-5 text-gray-900 fw-bolder'>Filter Options</div>
|
||||
</div>
|
||||
|
||||
<div className='separator border-gray-200'></div>
|
||||
|
||||
<div className='px-7 py-5'>
|
||||
<div className='mb-10'>
|
||||
<label className='form-label fw-bold'>Status:</label>
|
||||
|
||||
<div>
|
||||
<select
|
||||
className='form-select form-select-solid'
|
||||
data-kt-select2='true'
|
||||
data-placeholder='Select option'
|
||||
data-allow-clear='true'
|
||||
defaultValue={'1'}
|
||||
>
|
||||
<option></option>
|
||||
<option value='1'>Approved</option>
|
||||
<option value='2'>Pending</option>
|
||||
<option value='3'>In Process</option>
|
||||
<option value='4'>Rejected</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-10'>
|
||||
<label className='form-label fw-bold'>Member Type:</label>
|
||||
|
||||
<div className='d-flex'>
|
||||
<label className='form-check form-check-sm form-check-custom form-check-solid me-5'>
|
||||
<input className='form-check-input' type='checkbox' value='1' />
|
||||
<span className='form-check-label'>Author</span>
|
||||
</label>
|
||||
|
||||
<label className='form-check form-check-sm form-check-custom form-check-solid'>
|
||||
<input className='form-check-input' type='checkbox' value='2' defaultChecked={true} />
|
||||
<span className='form-check-label'>Customer</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-10'>
|
||||
<label className='form-label fw-bold'>Notifications:</label>
|
||||
|
||||
<div className='form-check form-switch form-switch-sm form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
value=''
|
||||
name='notifications'
|
||||
defaultChecked={true}
|
||||
/>
|
||||
<label className='form-check-label'>Enabled</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex justify-content-end'>
|
||||
<button
|
||||
type='reset'
|
||||
className='btn btn-sm btn-light btn-active-light-primary me-2'
|
||||
data-kt-menu-dismiss='true'
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
|
||||
<button type='submit' className='btn btn-sm btn-primary' data-kt-menu-dismiss='true'>
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
|
||||
const Dropdown2: FC = () => {
|
||||
return (
|
||||
<div
|
||||
className='menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold w-200px'
|
||||
data-kt-menu='true'
|
||||
>
|
||||
<div className='menu-item px-3'>
|
||||
<div className='menu-content fs-6 text-gray-900 fw-bolder px-3 py-4'>Quick Actions</div>
|
||||
</div>
|
||||
|
||||
<div className='separator mb-3 opacity-75'></div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-3'>
|
||||
New Ticket
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-3'>
|
||||
New Customer
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className='menu-item px-3'
|
||||
data-kt-menu-trigger='hover'
|
||||
data-kt-menu-placement='right-start'
|
||||
data-kt-menu-flip='left-start, top'
|
||||
>
|
||||
<a href='#' className='menu-link px-3'>
|
||||
<span className='menu-title'>New Group</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-3'>
|
||||
Admin Group
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-3'>
|
||||
Staff Group
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-3'>
|
||||
Member Group
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-3'>
|
||||
New Contact
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='separator mt-3 opacity-75'></div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<div className='menu-content px-3 py-3'>
|
||||
<a className='btn btn-primary btn-sm px-4' href='#'>
|
||||
Generate Reports
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Dropdown2}
|
||||
@@ -0,0 +1,96 @@
|
||||
|
||||
import {FC} from 'react'
|
||||
|
||||
const Dropdown3: FC = () => {
|
||||
return (
|
||||
<div
|
||||
className='menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-bold w-200px py-3'
|
||||
data-kt-menu='true'
|
||||
>
|
||||
<div className='menu-item px-3'>
|
||||
<div className='menu-content text-muted pb-2 px-3 fs-7 text-uppercase'>Payments</div>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-3'>
|
||||
Create Invoice
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link flex-stack px-3'>
|
||||
Create Payment
|
||||
<i
|
||||
className='fas fa-exclamation-circle ms-2 fs-7'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Specify a target name for future usage and reference'
|
||||
></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-3'>
|
||||
Generate Bill
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className='menu-item px-3'
|
||||
data-kt-menu-trigger='hover'
|
||||
data-kt-menu-placement='left-start'
|
||||
data-kt-menu-flip='center, top'
|
||||
>
|
||||
<a href='#' className='menu-link px-3'>
|
||||
<span className='menu-title'>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-3'>
|
||||
Plans
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-3'>
|
||||
Billing
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3'>
|
||||
<a href='#' className='menu-link px-3'>
|
||||
Statements
|
||||
</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'
|
||||
checked
|
||||
name='notifications'
|
||||
/>
|
||||
|
||||
<span className='form-check-label text-muted fs-6'>Recuring</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='menu-item px-3 my-1'>
|
||||
<a href='#' className='menu-link px-3'>
|
||||
Settings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Dropdown3}
|
||||
@@ -0,0 +1,52 @@
|
||||
export const editorToolbarSettings = {
|
||||
options: ['inline', 'fontSize', 'fontFamily', 'link', 'image'],
|
||||
inline: {
|
||||
inDropdown: false,
|
||||
className: undefined,
|
||||
component: undefined,
|
||||
dropdownClassName: undefined,
|
||||
options: ['bold', 'italic', 'underline', 'strikethrough'],
|
||||
},
|
||||
fontSize: {
|
||||
options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],
|
||||
className: undefined,
|
||||
component: undefined,
|
||||
dropdownClassName: undefined,
|
||||
},
|
||||
fontFamily: {
|
||||
options: ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
|
||||
className: undefined,
|
||||
component: undefined,
|
||||
dropdownClassName: undefined,
|
||||
},
|
||||
|
||||
link: {
|
||||
inDropdown: false,
|
||||
className: undefined,
|
||||
component: undefined,
|
||||
popupClassName: undefined,
|
||||
dropdownClassName: undefined,
|
||||
showOpenOptionOnHover: true,
|
||||
defaultTargetOption: '_self',
|
||||
options: ['link', 'unlink'],
|
||||
link: {className: undefined},
|
||||
unlink: {className: undefined},
|
||||
linkCallback: undefined,
|
||||
},
|
||||
image: {
|
||||
className: undefined,
|
||||
component: undefined,
|
||||
popupClassName: undefined,
|
||||
urlEnabled: true,
|
||||
uploadEnabled: true,
|
||||
alignmentEnabled: true,
|
||||
uploadCallback: undefined,
|
||||
previewImage: false,
|
||||
inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
|
||||
alt: {present: false, mandatory: false},
|
||||
defaultSize: {
|
||||
height: 'auto',
|
||||
width: 'auto',
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
|
||||
import {FC, useState, useEffect} from 'react'
|
||||
import {createPortal} from 'react-dom'
|
||||
import {WithChildren} from '../../../helpers'
|
||||
|
||||
/**
|
||||
* React portal based on https://stackoverflow.com/a/59154364
|
||||
* @param children Child elements
|
||||
* @param className CSS classname
|
||||
* @param el HTML element to create. default: div
|
||||
*/
|
||||
const Portal: FC<{className?: string} & WithChildren> = ({children, className = ''}) => {
|
||||
const [container] = useState(document.createElement('div'))
|
||||
|
||||
if (className) container.classList.add(className)
|
||||
|
||||
useEffect(() => {
|
||||
document.body.appendChild(container)
|
||||
return () => {
|
||||
document.body.removeChild(container)
|
||||
}
|
||||
}, [container])
|
||||
|
||||
return createPortal(children, container)
|
||||
}
|
||||
|
||||
export {Portal}
|
||||
@@ -0,0 +1,32 @@
|
||||
export * from './layout/quick-links/QuicLinks'
|
||||
export * from './layout/search/Search'
|
||||
export * from './layout/search/SearchInner'
|
||||
export * from './layout/SearchModal'
|
||||
export * from './layout/InboxCompose'
|
||||
export * from './layout/header-menus/HeaderUserMenu'
|
||||
export * from './layout/header-menus/HeaderNotificationsMenu'
|
||||
export * from './layout/drawer-messenger/DrawerMessenger'
|
||||
export * from './layout/activity-drawer/ActivityDrawer'
|
||||
export * from './layout/create-app/CreateApp'
|
||||
export * from './layout/theme-mode/ThemeModeProvider'
|
||||
export * from './layout/theme-mode/ThemeModeSwitcher'
|
||||
|
||||
// dropdpwns
|
||||
export * from './content/dropdown/Dropdown1'
|
||||
export * from './content/dropdown/Dropdown2'
|
||||
|
||||
// editors
|
||||
export * from './content/editor/EditorToolbar'
|
||||
|
||||
export * from './content/code-highlight/CodeBlock'
|
||||
|
||||
export * from './content/portal/Portal'
|
||||
|
||||
// modals
|
||||
export * from './modals/create-app-stepper/CreateAppModal'
|
||||
export * from './modals/select-location/SelectLocationModal'
|
||||
export * from './modals/invite-users/InviteUsers'
|
||||
export * from './modals/upgrade-plan/UpgradePlan'
|
||||
|
||||
// chat
|
||||
export * from './chat/ChatInner'
|
||||
@@ -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}
|
||||
@@ -0,0 +1,308 @@
|
||||
|
||||
|
||||
import {useRef, useState} from 'react'
|
||||
import {createPortal} from 'react-dom'
|
||||
import {Modal} from 'react-bootstrap'
|
||||
import {defaultCreateAppData, ICreateAppData} from './IAppModels'
|
||||
import {StepperComponent} from '../../../assets/ts/components'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {Step1} from './steps/Step1'
|
||||
import {Step2} from './steps/Step2'
|
||||
import {Step3} from './steps/Step3'
|
||||
import {Step4} from './steps/Step4'
|
||||
import {Step5} from './steps/Step5'
|
||||
|
||||
type Props = {
|
||||
show: boolean
|
||||
handleClose: () => void
|
||||
}
|
||||
|
||||
const modalsRoot = document.getElementById('root-modals') || document.body
|
||||
|
||||
const CreateAppModal = ({show, handleClose}: Props) => {
|
||||
const stepperRef = useRef<HTMLDivElement | null>(null)
|
||||
const [ stepper, setStepper ] = useState<StepperComponent | null>(null)
|
||||
const [data, setData] = useState<ICreateAppData>(defaultCreateAppData)
|
||||
const [hasError, setHasError] = useState(false)
|
||||
|
||||
const loadStepper = () => {
|
||||
setStepper(StepperComponent.createInsance(stepperRef.current as HTMLDivElement))
|
||||
}
|
||||
|
||||
const updateData = (fieldsToUpdate: Partial<ICreateAppData>) => {
|
||||
const updatedData = {...data, ...fieldsToUpdate}
|
||||
setData(updatedData)
|
||||
}
|
||||
|
||||
const checkAppBasic = (): boolean => {
|
||||
if (!data.appBasic.appName || !data.appBasic.appType) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const checkAppDataBase = (): boolean => {
|
||||
if (!data.appDatabase.databaseName || !data.appDatabase.databaseSolution) {
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
const prevStep = () => {
|
||||
if (!stepper) {
|
||||
return
|
||||
}
|
||||
|
||||
stepper.goPrev()
|
||||
}
|
||||
|
||||
const nextStep = () => {
|
||||
setHasError(false)
|
||||
if (!stepper) {
|
||||
return
|
||||
}
|
||||
|
||||
if (stepper.getCurrentStepIndex() === 1) {
|
||||
if (!checkAppBasic()) {
|
||||
setHasError(true)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (stepper.getCurrentStepIndex() === 3) {
|
||||
if (!checkAppDataBase()) {
|
||||
setHasError(true)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
stepper.goNext()
|
||||
}
|
||||
|
||||
const submit = () => {
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<Modal
|
||||
id='kt_modal_create_app'
|
||||
tabIndex={-1}
|
||||
aria-hidden='true'
|
||||
dialogClassName='modal-dialog modal-dialog-centered mw-900px'
|
||||
show={show}
|
||||
onHide={handleClose}
|
||||
onEntered={loadStepper}
|
||||
backdrop={true}
|
||||
>
|
||||
<div className='modal-header'>
|
||||
<h2>Create App</h2>
|
||||
{/* begin::Close */}
|
||||
<div className='btn btn-sm btn-icon btn-active-color-primary' onClick={handleClose}>
|
||||
<KTIcon className='fs-1' iconName='cross' />
|
||||
</div>
|
||||
{/* end::Close */}
|
||||
</div>
|
||||
|
||||
<div className='modal-body py-lg-10 px-lg-10'>
|
||||
{/*begin::Stepper */}
|
||||
<div
|
||||
ref={stepperRef}
|
||||
className='stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid'
|
||||
id='kt_modal_create_app_stepper'
|
||||
>
|
||||
{/* begin::Aside*/}
|
||||
<div className='d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px'>
|
||||
{/* begin::Nav*/}
|
||||
<div className='stepper-nav ps-lg-10'>
|
||||
{/* begin::Step 1*/}
|
||||
<div className='stepper-item current' data-kt-stepper-element='nav'>
|
||||
{/* begin::Wrapper*/}
|
||||
<div className='stepper-wrapper'>
|
||||
{/* begin::Icon*/}
|
||||
<div className='stepper-icon w-40px h-40px'>
|
||||
<i className='stepper-check fas fa-check'></i>
|
||||
<span className='stepper-number'>1</span>
|
||||
</div>
|
||||
{/* end::Icon*/}
|
||||
|
||||
{/* begin::Label*/}
|
||||
<div className='stepper-label'>
|
||||
<h3 className='stepper-title'>Details</h3>
|
||||
|
||||
<div className='stepper-desc'>Name your App</div>
|
||||
</div>
|
||||
{/* end::Label*/}
|
||||
</div>
|
||||
{/* end::Wrapper*/}
|
||||
|
||||
{/* begin::Line*/}
|
||||
<div className='stepper-line h-40px'></div>
|
||||
{/* end::Line*/}
|
||||
</div>
|
||||
{/* end::Step 1*/}
|
||||
|
||||
{/* begin::Step 2*/}
|
||||
<div className='stepper-item' data-kt-stepper-element='nav'>
|
||||
{/* begin::Wrapper*/}
|
||||
<div className='stepper-wrapper'>
|
||||
{/* begin::Icon*/}
|
||||
<div className='stepper-icon w-40px h-40px'>
|
||||
<i className='stepper-check fas fa-check'></i>
|
||||
<span className='stepper-number'>2</span>
|
||||
</div>
|
||||
{/* begin::Icon*/}
|
||||
|
||||
{/* begin::Label*/}
|
||||
<div className='stepper-label'>
|
||||
<h3 className='stepper-title'>Frameworks</h3>
|
||||
|
||||
<div className='stepper-desc'>Define your app framework</div>
|
||||
</div>
|
||||
{/* begin::Label*/}
|
||||
</div>
|
||||
{/* end::Wrapper*/}
|
||||
|
||||
{/* begin::Line*/}
|
||||
<div className='stepper-line h-40px'></div>
|
||||
{/* end::Line*/}
|
||||
</div>
|
||||
{/* end::Step 2*/}
|
||||
|
||||
{/* begin::Step 3*/}
|
||||
<div className='stepper-item' data-kt-stepper-element='nav'>
|
||||
{/* begin::Wrapper*/}
|
||||
<div className='stepper-wrapper'>
|
||||
{/* begin::Icon*/}
|
||||
<div className='stepper-icon w-40px h-40px'>
|
||||
<i className='stepper-check fas fa-check'></i>
|
||||
<span className='stepper-number'>3</span>
|
||||
</div>
|
||||
{/* end::Icon*/}
|
||||
|
||||
{/* begin::Label*/}
|
||||
<div className='stepper-label'>
|
||||
<h3 className='stepper-title'>Database</h3>
|
||||
|
||||
<div className='stepper-desc'>Select the app database type</div>
|
||||
</div>
|
||||
{/* end::Label*/}
|
||||
</div>
|
||||
{/* end::Wrapper*/}
|
||||
|
||||
{/* begin::Line*/}
|
||||
<div className='stepper-line h-40px'></div>
|
||||
{/* end::Line*/}
|
||||
</div>
|
||||
{/* end::Step 3*/}
|
||||
|
||||
{/* begin::Step 4*/}
|
||||
<div className='stepper-item' data-kt-stepper-element='nav'>
|
||||
{/* begin::Wrapper*/}
|
||||
<div className='stepper-wrapper'>
|
||||
{/* begin::Icon*/}
|
||||
<div className='stepper-icon w-40px h-40px'>
|
||||
<i className='stepper-check fas fa-check'></i>
|
||||
<span className='stepper-number'>4</span>
|
||||
</div>
|
||||
{/* end::Icon*/}
|
||||
|
||||
{/* begin::Label*/}
|
||||
<div className='stepper-label'>
|
||||
<h3 className='stepper-title'>Storage</h3>
|
||||
|
||||
<div className='stepper-desc'>Provide storage details</div>
|
||||
</div>
|
||||
{/* end::Label*/}
|
||||
</div>
|
||||
{/* end::Wrapper*/}
|
||||
|
||||
{/* begin::Line*/}
|
||||
<div className='stepper-line h-40px'></div>
|
||||
{/* end::Line*/}
|
||||
</div>
|
||||
{/* end::Step 4*/}
|
||||
|
||||
{/* begin::Step 5*/}
|
||||
<div className='stepper-item' data-kt-stepper-element='nav'>
|
||||
{/* begin::Wrapper*/}
|
||||
<div className='stepper-wrapper'>
|
||||
{/* begin::Icon*/}
|
||||
<div className='stepper-icon w-40px h-40px'>
|
||||
<i className='stepper-check fas fa-check'></i>
|
||||
<span className='stepper-number'>5</span>
|
||||
</div>
|
||||
{/* end::Icon*/}
|
||||
|
||||
{/* begin::Label*/}
|
||||
<div className='stepper-label'>
|
||||
<h3 className='stepper-title'>Completed</h3>
|
||||
|
||||
<div className='stepper-desc'>Review and Submit</div>
|
||||
</div>
|
||||
{/* end::Label*/}
|
||||
</div>
|
||||
{/* end::Wrapper*/}
|
||||
</div>
|
||||
{/* end::Step 5*/}
|
||||
</div>
|
||||
{/* end::Nav*/}
|
||||
</div>
|
||||
{/* begin::Aside*/}
|
||||
|
||||
{/*begin::Content */}
|
||||
<div className='flex-row-fluid py-lg-5 px-lg-15'>
|
||||
{/*begin::Form */}
|
||||
<form noValidate id='kt_modal_create_app_form'>
|
||||
<Step1 data={data} updateData={updateData} hasError={hasError} />
|
||||
<Step2 data={data} updateData={updateData} hasError={hasError} />
|
||||
<Step3 data={data} updateData={updateData} hasError={hasError} />
|
||||
<Step4 data={data} updateData={updateData} hasError={hasError} />
|
||||
<Step5 />
|
||||
|
||||
{/*begin::Actions */}
|
||||
<div className='d-flex flex-stack pt-10'>
|
||||
<div className='me-2'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-lg btn-light-primary me-3'
|
||||
data-kt-stepper-action='previous'
|
||||
onClick={prevStep}
|
||||
>
|
||||
<KTIcon iconName='arrow-left' className='fs-3 me-1' /> Previous
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-lg btn-primary'
|
||||
data-kt-stepper-action='submit'
|
||||
onClick={submit}
|
||||
>
|
||||
Submit <KTIcon iconName='arrow-right' className='fs-3 ms-2 me-0' />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-lg btn-primary'
|
||||
data-kt-stepper-action='next'
|
||||
onClick={nextStep}
|
||||
>
|
||||
Next Step <KTIcon iconName='arrow-right' className='fs-3 ms-1 me-0' />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Actions */}
|
||||
</form>
|
||||
{/*end::Form */}
|
||||
</div>
|
||||
{/*end::Content */}
|
||||
</div>
|
||||
{/* end::Stepper */}
|
||||
</div>
|
||||
</Modal>,
|
||||
modalsRoot
|
||||
)
|
||||
}
|
||||
|
||||
export {CreateAppModal}
|
||||
@@ -0,0 +1,33 @@
|
||||
export interface IAppBasic {
|
||||
appName: string
|
||||
appType: 'Quick Online Courses' | 'Face to Face Discussions' | 'Full Intro Training'
|
||||
}
|
||||
|
||||
export type TAppFramework = 'HTML5' | 'ReactJS' | 'Angular' | 'Vue'
|
||||
|
||||
export interface IAppDatabase {
|
||||
databaseName: string
|
||||
databaseSolution: 'MySQL' | 'Firebase' | 'DynamoDB'
|
||||
}
|
||||
|
||||
export type TAppStorage = 'Basic Server' | 'AWS' | 'Google'
|
||||
|
||||
export interface ICreateAppData {
|
||||
appBasic: IAppBasic
|
||||
appFramework: TAppFramework
|
||||
appDatabase: IAppDatabase
|
||||
appStorage: TAppStorage
|
||||
}
|
||||
|
||||
export const defaultCreateAppData: ICreateAppData = {
|
||||
appBasic: {appName: '', appType: 'Quick Online Courses'},
|
||||
appFramework: 'HTML5',
|
||||
appDatabase: {databaseName: 'db_name', databaseSolution: 'MySQL'},
|
||||
appStorage: 'Basic Server',
|
||||
}
|
||||
|
||||
export type StepProps = {
|
||||
data: ICreateAppData
|
||||
updateData: (fieldsToUpdate: Partial<ICreateAppData>) => void
|
||||
hasError: boolean
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
|
||||
import {KTIcon} from '../../../../helpers'
|
||||
import {StepProps} from '../IAppModels'
|
||||
|
||||
const Step1 = ({data, updateData, hasError}: StepProps) => {
|
||||
return (
|
||||
<div className='current' data-kt-stepper-element='content'>
|
||||
<div className='w-100'>
|
||||
{/*begin::Form Group */}
|
||||
<div className='fv-row mb-10'>
|
||||
<label className='d-flex align-items-center fs-5 fw-semibold mb-2'>
|
||||
<span className='required'>App Name</span>
|
||||
<i
|
||||
className='fas fa-exclamation-circle ms-2 fs-7'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Specify your unique app name'
|
||||
></i>
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
className='form-control form-control-lg form-control-solid'
|
||||
name='appname'
|
||||
placeholder=''
|
||||
value={data.appBasic.appName}
|
||||
onChange={(e) =>
|
||||
updateData({
|
||||
appBasic: {
|
||||
appName: e.target.value,
|
||||
appType: data.appBasic.appType,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
{!data.appBasic.appName && hasError && (
|
||||
<div className='fv-plugins-message-container'>
|
||||
<div data-field='appname' data-validator='notEmpty' className='fv-help-block'>
|
||||
App name is required
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/*end::Form Group */}
|
||||
|
||||
{/*begin::Form Group */}
|
||||
<div className='fv-row'>
|
||||
{/* begin::Label */}
|
||||
<label className='d-flex align-items-center fs-5 fw-semibold mb-4'>
|
||||
<span className='required'>Category</span>
|
||||
|
||||
<i
|
||||
className='fas fa-exclamation-circle ms-2 fs-7'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Select your app category'
|
||||
></i>
|
||||
</label>
|
||||
{/* end::Label */}
|
||||
<div>
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between mb-6 cursor-pointer'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-primary'>
|
||||
<KTIcon iconName='compass' className='fs-1 text-primary' />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>Quick Online Courses</span>
|
||||
<span className='fs-7 text-muted'>
|
||||
Creating a clear text structure is just one SEO
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='appType'
|
||||
value='Quick Online Courses'
|
||||
checked={data.appBasic.appType === 'Quick Online Courses'}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
appBasic: {
|
||||
appName: data.appBasic.appName,
|
||||
appType: 'Quick Online Courses',
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between mb-6 cursor-pointer'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-danger'>
|
||||
<KTIcon iconName='category' className='fs-1 text-danger' />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>Face to Face Discussions</span>
|
||||
<span className='fs-7 text-muted'>
|
||||
Creating a clear text structure is just one aspect
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='appType'
|
||||
value='Face to Face Discussions'
|
||||
checked={data.appBasic.appType === 'Face to Face Discussions'}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
appBasic: {
|
||||
appName: data.appBasic.appName,
|
||||
appType: 'Face to Face Discussions',
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between mb-6 cursor-pointer'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-success'>
|
||||
<KTIcon iconName='timer' className='fs-1 text-success' />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>Full Intro Training</span>
|
||||
<span className='fs-7 text-muted'>
|
||||
Creating a clear text structure copywriting
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='appType'
|
||||
value='Full Intro Training'
|
||||
checked={data.appBasic.appType === 'Full Intro Training'}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
appBasic: {
|
||||
appName: data.appBasic.appName,
|
||||
appType: 'Full Intro Training',
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Form Group */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Step1}
|
||||
@@ -0,0 +1,138 @@
|
||||
|
||||
import {StepProps} from '../IAppModels'
|
||||
|
||||
const Step2 = ({data, updateData}: StepProps) => {
|
||||
return (
|
||||
<div className='pb-5' data-kt-stepper-element='content'>
|
||||
<div className='w-100'>
|
||||
{/*begin::Form Group */}
|
||||
<div className='fv-row'>
|
||||
{/* begin::Label */}
|
||||
<label className='d-flex align-items-center fs-5 fw-semibold mb-4'>
|
||||
<span className='required'>Select Framework</span>
|
||||
<i
|
||||
className='fas fa-exclamation-circle ms-2 fs-7'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Specify your apps framework'
|
||||
></i>
|
||||
</label>
|
||||
{/* end::Label */}
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between cursor-pointer mb-6'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-warning'>
|
||||
<i className='fab fa-html5 text-warning fs-2x'></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>HTML5</span>
|
||||
<span className='fs-7 text-muted'>Base Web Projec</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='appFramework'
|
||||
value='HTML5'
|
||||
checked={data.appFramework === 'HTML5'}
|
||||
onChange={() => updateData({appFramework: 'HTML5'})}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between cursor-pointer mb-6'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-success'>
|
||||
<i className='fab fa-react text-success fs-2x'></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>ReactJS</span>
|
||||
<span className='fs-7 text-muted'>Robust and flexible app framework</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='appFramework'
|
||||
value='ReactJS'
|
||||
checked={data.appFramework === 'ReactJS'}
|
||||
onChange={() => updateData({appFramework: 'ReactJS'})}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between cursor-pointer mb-6'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-danger'>
|
||||
<i className='fab fa-angular text-danger fs-2x'></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>Angular</span>
|
||||
<span className='fs-7 text-muted'>Powerful data mangement</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='appFramework'
|
||||
value='Angular'
|
||||
checked={data.appFramework === 'Angular'}
|
||||
onChange={() => updateData({appFramework: 'Angular'})}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between cursor-pointer mb-6'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-primary'>
|
||||
<i className='fab fa-vuejs text-primary fs-2x'></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>Vue</span>
|
||||
<span className='fs-7 text-muted'>Lightweight and responsive framework</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='appFramework'
|
||||
value='Vue'
|
||||
checked={data.appFramework === 'Vue'}
|
||||
onChange={() => updateData({appFramework: 'Vue'})}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
</div>
|
||||
{/*end::Form Group */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Step2}
|
||||
@@ -0,0 +1,164 @@
|
||||
|
||||
import {StepProps} from '../IAppModels'
|
||||
|
||||
const Step3 = ({data, updateData, hasError}: StepProps) => {
|
||||
return (
|
||||
<>
|
||||
{/*begin::Step 3 */}
|
||||
<div className='pb-5' data-kt-stepper-element='content'>
|
||||
<div className='w-100'>
|
||||
{/*begin::Form Group */}
|
||||
|
||||
<div className='fv-row mb-10'>
|
||||
<label className='required fs-5 fw-semibold mb-2'>Database Name</label>
|
||||
|
||||
<input
|
||||
type='text'
|
||||
className='form-control form-control-lg form-control-solid'
|
||||
name='dbname'
|
||||
value={data.appDatabase.databaseName}
|
||||
onChange={(e) =>
|
||||
updateData({
|
||||
appDatabase: {
|
||||
databaseName: e.target.value,
|
||||
databaseSolution: data.appDatabase.databaseSolution,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
{!data.appDatabase.databaseName && hasError && (
|
||||
<div className='fv-plugins-message-container'>
|
||||
<div data-field='appname' data-validator='notEmpty' className='fv-help-block'>
|
||||
Database name is required
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/*end::Form Group */}
|
||||
|
||||
{/*begin::Form Group */}
|
||||
<div className='fv-row'>
|
||||
<label className='d-flex align-items-center fs-5 fw-semibold mb-4'>
|
||||
<span className='required'>Select Database Engine</span>
|
||||
|
||||
<i
|
||||
className='fas fa-exclamation-circle ms-2 fs-7'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Select your app database engine'
|
||||
></i>
|
||||
</label>
|
||||
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between cursor-pointer mb-6'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-success'>
|
||||
<i className='fas fa-database text-success fs-2x'></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>MySQL</span>
|
||||
<span className='fs-7 text-muted'>Basic MySQL database</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='databaseSolution'
|
||||
value='MySQL'
|
||||
checked={data.appDatabase.databaseSolution === 'MySQL'}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
appDatabase: {
|
||||
databaseName: data.appDatabase.databaseName,
|
||||
databaseSolution: 'MySQL',
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between cursor-pointer mb-6'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-danger'>
|
||||
<i className='fab fa-google text-danger fs-2x'></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>Firebase</span>
|
||||
<span className='fs-7 text-muted'>Google based app data management</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='databaseSolution'
|
||||
value='Firebase'
|
||||
checked={data.appDatabase.databaseSolution === 'Firebase'}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
appDatabase: {
|
||||
databaseName: data.appDatabase.databaseName,
|
||||
databaseSolution: 'Firebase',
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between cursor-pointer mb-6'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-warning'>
|
||||
<i className='fab fa-amazon text-warning fs-2x'></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>DynamoDB</span>
|
||||
<span className='fs-7 text-muted'>Amazon Fast NoSQL Database</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='databaseSolution'
|
||||
value='DynamoDB'
|
||||
checked={data.appDatabase.databaseSolution === 'DynamoDB'}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
appDatabase: {
|
||||
databaseName: data.appDatabase.databaseName,
|
||||
databaseSolution: 'DynamoDB',
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
</div>
|
||||
{/*end::Form Group */}
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Step 3 */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {Step3}
|
||||
@@ -0,0 +1,108 @@
|
||||
|
||||
import {StepProps} from '../IAppModels'
|
||||
|
||||
const Step4 = ({data, updateData}: StepProps) => {
|
||||
return (
|
||||
<>
|
||||
{/*begin::Step 4 */}
|
||||
<div className='pb-5' data-kt-stepper-element='content'>
|
||||
<div className='w-100'>
|
||||
{/*begin::Form Group */}
|
||||
<div className='fv-row'>
|
||||
<label className='fs-6 fw-bolder text-gray-900 mb-7d-flex align-items-center fs-5 fw-semibold mb-4'>
|
||||
<span className='required'>Select Storage</span>
|
||||
</label>
|
||||
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between cursor-pointer mb-6'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-primary'>
|
||||
<i className='fab fa-linux text-primary fs-2x'></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>Basic Server</span>
|
||||
<span className='fs-7 text-muted'>Linux based server storage</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='appStorage'
|
||||
value='Basic Server'
|
||||
checked={data.appStorage === 'Basic Server'}
|
||||
onChange={() => updateData({appStorage: 'Basic Server'})}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between cursor-pointer mb-6'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-warning'>
|
||||
<i className='fab fa-aws text-warning fs-2x'></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>AWS</span>
|
||||
<span className='fs-7 text-muted'>Amazon Web Services</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='appStorage'
|
||||
value='AWS'
|
||||
checked={data.appStorage === 'AWS'}
|
||||
onChange={() => updateData({appStorage: 'AWS'})}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
|
||||
{/*begin:Option */}
|
||||
<label className='d-flex align-items-center justify-content-between cursor-pointer mb-6'>
|
||||
<span className='d-flex align-items-center me-2'>
|
||||
<span className='symbol symbol-50px me-6'>
|
||||
<span className='symbol-label bg-light-success '>
|
||||
<i className='fab fa-google text-success fs-2x'></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='d-flex flex-column'>
|
||||
<span className='fw-bolder fs-6'>Google</span>
|
||||
<span className='fs-7 text-muted'>Google Cloud Storage</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='appStorage'
|
||||
value='Google'
|
||||
checked={data.appStorage === 'Google'}
|
||||
onChange={() => updateData({appStorage: 'Google'})}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
{/*end::Option */}
|
||||
</div>
|
||||
{/*end::Form Group */}
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Step 4 */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {Step4}
|
||||
@@ -0,0 +1,30 @@
|
||||
|
||||
import {useIllustrationsPath} from '../../../../helpers'
|
||||
|
||||
const Step5 = () => {
|
||||
return (
|
||||
<>
|
||||
<div data-kt-stepper-element='content'>
|
||||
<div className='w-100 text-center'>
|
||||
{/* begin::Heading */}
|
||||
<h1 className='fw-bold text-gray-900 mb-3'>Release!</h1>
|
||||
{/* end::Heading */}
|
||||
|
||||
{/* begin::Description */}
|
||||
<div className='text-muted fw-semibold fs-3'>
|
||||
Submit your app to kickstart your project.
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
|
||||
{/* begin::Illustration */}
|
||||
<div className='text-center px-4 py-15'>
|
||||
<img src={useIllustrationsPath('9.png')} alt='' className='mw-100 mh-300px' />
|
||||
</div>
|
||||
{/* end::Illustration */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {Step5}
|
||||
@@ -0,0 +1,228 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
const InviteUsers: FC = () => {
|
||||
const users = [
|
||||
{
|
||||
avatar: 'media/avatars/300-6.jpg',
|
||||
name: 'Emma Smith',
|
||||
email: 'e.smith@kpmg.com.au',
|
||||
access: '1',
|
||||
},
|
||||
{
|
||||
state: 'danger',
|
||||
name: 'Melody Macy',
|
||||
email: 'melody@altbox.com',
|
||||
access: '1',
|
||||
},
|
||||
{
|
||||
avatar: 'media/avatars/300-1.jpg',
|
||||
name: 'Max Smith',
|
||||
email: 'max@kt.com',
|
||||
access: '3',
|
||||
},
|
||||
{
|
||||
avatar: 'media/avatars/300-1.jpg',
|
||||
name: 'Sean Bean',
|
||||
email: 'sean@dellito.com',
|
||||
access: '2',
|
||||
},
|
||||
{
|
||||
avatar: 'media/avatars/300-25.jpg',
|
||||
name: 'Brian Cox',
|
||||
email: 'brian@exchange.com',
|
||||
access: '3',
|
||||
},
|
||||
{
|
||||
state: 'warning',
|
||||
name: 'Mikaela Collins',
|
||||
email: 'mikaela@pexcom.com',
|
||||
access: '2',
|
||||
},
|
||||
{
|
||||
avatar: 'media/avatars/300-9.jpg',
|
||||
name: 'Francis Mitcham',
|
||||
email: 'f.mitcham@kpmg.com.au',
|
||||
access: '3',
|
||||
},
|
||||
{
|
||||
state: 'danger',
|
||||
name: 'Olivia Wild',
|
||||
email: 'olivia@corpmail.com',
|
||||
access: '2',
|
||||
},
|
||||
{
|
||||
state: 'info',
|
||||
name: 'Neil Owen',
|
||||
email: 'owen.neil@gmail.com',
|
||||
access: '1',
|
||||
},
|
||||
{
|
||||
avatar: 'media/avatars/300-23.jpg',
|
||||
name: 'Dan Wilson',
|
||||
email: 'dam@consilting.com',
|
||||
access: '3',
|
||||
},
|
||||
{
|
||||
state: 'danger',
|
||||
name: 'Emma Bold',
|
||||
email: 'emma@intenso.com',
|
||||
access: '2',
|
||||
},
|
||||
{
|
||||
avatar: 'media/avatars/300-12.jpg',
|
||||
name: 'Ana Crown',
|
||||
email: 'ana.cf@limtel.com',
|
||||
access: '1',
|
||||
},
|
||||
{
|
||||
state: 'primary',
|
||||
name: 'Robert Doe',
|
||||
email: 'robert@benko.com',
|
||||
access: '3',
|
||||
},
|
||||
{
|
||||
avatar: 'media/avatars/300-13.jpg',
|
||||
name: 'John Miller',
|
||||
email: 'miller@mapple.com',
|
||||
access: '3',
|
||||
},
|
||||
{
|
||||
state: 'success',
|
||||
name: 'Lucy Kunic',
|
||||
email: 'lucy.m@fentech.com',
|
||||
access: '2',
|
||||
},
|
||||
{
|
||||
avatar: 'media/avatars/300-21.jpg',
|
||||
name: 'Ethan Wilder',
|
||||
email: 'ethan@loop.com.au',
|
||||
access: '1',
|
||||
},
|
||||
{
|
||||
avatar: 'media/avatars/300-12.jpg',
|
||||
name: 'Ana Crown',
|
||||
email: 'ana.cf@limtel.com',
|
||||
access: '3',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className='modal fade' id='kt_modal_invite_friends' aria-hidden='true'>
|
||||
<div className='modal-dialog mw-650px'>
|
||||
<div className='modal-content'>
|
||||
<div className='modal-header pb-0 border-0 justify-content-end'>
|
||||
<div className='btn btn-sm btn-icon btn-active-color-primary' data-bs-dismiss='modal'>
|
||||
<KTIcon iconName='cross' className='fs-1' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15'>
|
||||
<div className='text-center mb-13'>
|
||||
<h1 className='mb-3'>Invite a Friend</h1>
|
||||
|
||||
<div className='text-muted fw-bold fs-5'>
|
||||
If you need more info, please check out
|
||||
<a href='#' className='link-primary fw-bolder'>
|
||||
{' '}
|
||||
FAQ Page
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='btn btn-light-primary fw-bolder w-100 mb-8'>
|
||||
<img
|
||||
alt='Logo'
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/google-icon.svg')}
|
||||
className='h-20px me-3'
|
||||
/>
|
||||
Invite Gmail Contacts
|
||||
</div>
|
||||
|
||||
<div className='separator d-flex flex-center mb-8'>
|
||||
<span className='text-uppercase bg-body fs-7 fw-bold text-muted px-3'>or</span>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
className='form-control form-control-solid mb-8'
|
||||
rows={3}
|
||||
placeholder='Type or paste emails here'
|
||||
></textarea>
|
||||
|
||||
<div className='mb-10'>
|
||||
<div className='fs-6 fw-bold mb-2'>Your Invitations</div>
|
||||
|
||||
<div className='mh-300px scroll-y me-n7 pe-7'>
|
||||
{users.map((user, i) => {
|
||||
return (
|
||||
<div
|
||||
className='d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed'
|
||||
key={i}
|
||||
>
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='symbol symbol-35px symbol-circle'>
|
||||
{user.avatar && <img alt='Pic' src={toAbsoluteUrl(user.avatar)} />}
|
||||
{user.state && (
|
||||
<div className='symbol symbol-35px symbol-circle'>
|
||||
<span
|
||||
className={`symbol-label bg-light-${user.state} text-${user.state} fw-bold`}
|
||||
>
|
||||
{user.name.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='ms-5'>
|
||||
<a
|
||||
href='#'
|
||||
className='fs-5 fw-bolder text-gray-900 text-hover-primary mb-2'
|
||||
>
|
||||
{user.name}
|
||||
</a>
|
||||
<div className='fw-bold text-muted'>{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='ms-2 w-100px'>
|
||||
<select
|
||||
defaultValue={'2'}
|
||||
className='form-select form-select-solid form-select-sm select2-hidden-accessible'
|
||||
>
|
||||
<option value='1'>Guest</option>
|
||||
<option value='2' data-select2-id='select2-data-12-vz6w'>
|
||||
Owner
|
||||
</option>
|
||||
<option value='3'>Can Edit</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-stack'>
|
||||
<div className='me-5 fw-bold'>
|
||||
<label className='fs-6'>Adding Users by Team Members</label>
|
||||
<div className='fs-7 text-muted'>
|
||||
If you need more info, please check budget planning
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className='form-check form-switch form-check-custom form-check-solid'>
|
||||
<input className='form-check-input' type='checkbox' value='1' />
|
||||
|
||||
<span className='form-check-label fw-bold text-muted'>Allowed</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {InviteUsers}
|
||||
@@ -0,0 +1,67 @@
|
||||
import {Dispatch, SetStateAction, useEffect, useState, FC} from 'react'
|
||||
import {Modal} from 'react-bootstrap'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
data: {location: string; setLocation: Dispatch<SetStateAction<string>>}
|
||||
show: boolean
|
||||
handleClose: () => void
|
||||
}
|
||||
|
||||
const SelectLocationModal: FC<Props> = ({show, handleClose, data}) => {
|
||||
useEffect(() => {
|
||||
initMap()
|
||||
}, [])
|
||||
|
||||
const [location, setLocation] = useState(data.location)
|
||||
const dissmissLocation = () => {
|
||||
setLocation(data.location)
|
||||
handleClose()
|
||||
}
|
||||
const applyLocation = () => {
|
||||
data.setLocation(location)
|
||||
handleClose()
|
||||
}
|
||||
const initMap = () => {}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className='modal fade'
|
||||
id='kt_modal_select_location'
|
||||
data-backdrop='static'
|
||||
tabIndex={-1}
|
||||
role='dialog'
|
||||
show={show}
|
||||
dialogClassName='modal-xl'
|
||||
aria-hidden='true'
|
||||
onHide={dissmissLocation}
|
||||
>
|
||||
<div className='modal-content'>
|
||||
<div className='modal-header'>
|
||||
<h5 className='modal-title'>Select Location</h5>
|
||||
|
||||
<div
|
||||
className='btn btn-icon btn-sm btn-active-light-primary ms-2'
|
||||
onClick={dissmissLocation}
|
||||
>
|
||||
<KTIcon iconName='cross' className='fs-2x' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='modal-body'>
|
||||
<input type='text' value={location} onChange={(e) => setLocation(e.target.value)} />
|
||||
<div id='kt_modal_select_location_map' className='map h-450px'></div>
|
||||
</div>
|
||||
<div className='modal-footer'>
|
||||
<button type='button' className='btn btn-light-primary' onClick={dissmissLocation}>
|
||||
Cancel
|
||||
</button>
|
||||
<button id='submit' type='button' className='btn btn-primary' onClick={applyLocation}>
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export {SelectLocationModal}
|
||||
@@ -0,0 +1,340 @@
|
||||
|
||||
import { FC, useState } from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
|
||||
const plans = [
|
||||
{
|
||||
title: 'Startup',
|
||||
subTitle: 'Best for startups',
|
||||
description: 'Optimal for 10+ team size and new startup',
|
||||
priceMonth: '39',
|
||||
priceAnnual: '399',
|
||||
default: true,
|
||||
custom: false,
|
||||
features: [
|
||||
{
|
||||
title: 'Up to 10 Active Users',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Up to 30 Project Integrations',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Analytics Module',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Finance Module',
|
||||
supported: false,
|
||||
},
|
||||
{
|
||||
title: 'Accounting Module',
|
||||
supported: false,
|
||||
},
|
||||
{
|
||||
title: 'Network Platform',
|
||||
supported: false,
|
||||
},
|
||||
{
|
||||
title: 'Unlimited Cloud Space',
|
||||
supported: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Advanced',
|
||||
subTitle: 'Best for 100+ team size',
|
||||
description: 'Optimal for 100+ team size and grown company',
|
||||
priceMonth: '339',
|
||||
priceAnnual: '3399',
|
||||
default: false,
|
||||
custom: false,
|
||||
features: [
|
||||
{
|
||||
title: 'Up to 10 Active Users',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Up to 30 Project Integrations',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Analytics Module',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Finance Module',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Accounting Module',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Network Platform',
|
||||
supported: false,
|
||||
},
|
||||
{
|
||||
title: 'Unlimited Cloud Space',
|
||||
supported: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Enterprise',
|
||||
subTitle: 'Best value for 1000+ team',
|
||||
description: 'Optimal for 1000+ team and enterpise',
|
||||
priceMonth: '999',
|
||||
priceAnnual: '9999',
|
||||
label: 'Most popular',
|
||||
default: false,
|
||||
custom: false,
|
||||
features: [
|
||||
{
|
||||
title: 'Up to 10 Active Users',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Up to 30 Project Integrations',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Analytics Module',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Finance Module',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Accounting Module',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Network Platform',
|
||||
supported: true,
|
||||
},
|
||||
{
|
||||
title: 'Unlimited Cloud Space',
|
||||
supported: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Custom',
|
||||
subTitle: 'Requet a custom license',
|
||||
default: false,
|
||||
custom: true,
|
||||
},
|
||||
]
|
||||
|
||||
const UpgradePlan: FC = () => {
|
||||
const [currentState, setCurrentState] = useState<'month' | 'annual'>('month')
|
||||
const [selected, setSelected] = useState('Startup')
|
||||
|
||||
return (
|
||||
<div className='modal fade' id='kt_modal_upgrade_plan' aria-hidden='true'>
|
||||
<div className='modal-dialog modal-xl'>
|
||||
<div className='modal-content rounded'>
|
||||
<div className='modal-header justify-content-end border-0 pb-0'>
|
||||
<div className='btn btn-sm btn-icon btn-active-color-primary' data-bs-dismiss='modal'>
|
||||
<KTIcon iconName='cross' className='fs-1' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='modal-body pt-0 pb-15 px-5 px-xl-20'>
|
||||
<div className='mb-13 text-center'>
|
||||
<h1 className='mb-3'>Upgrade a Plan</h1>
|
||||
|
||||
<div className='text-muted fw-bold fs-5'>
|
||||
If you need more info, please check{' '}
|
||||
<a href='#' className='link-primary fw-bolder'>
|
||||
Pricing Guidelines
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column'>
|
||||
<div className='nav-group nav-group-outline mx-auto' data-kt-buttons='true'>
|
||||
<a
|
||||
href='#'
|
||||
className={
|
||||
'btn btn-color-gray-500 btn-active btn-active-secondary px-6 py-3 me-2 ' +
|
||||
(currentState === 'month' && 'active')
|
||||
}
|
||||
onClick={() => {
|
||||
setCurrentState('month')
|
||||
}}
|
||||
data-kt-plan='month'
|
||||
>
|
||||
Monthly
|
||||
</a>
|
||||
<a
|
||||
href='#'
|
||||
className={
|
||||
'btn btn-color-gray-500 btn-active btn-active-secondary px-6 py-3 me-2 ' +
|
||||
(currentState === 'annual' && 'active')
|
||||
}
|
||||
onClick={() => {
|
||||
setCurrentState('annual')
|
||||
}}
|
||||
data-kt-plan='annual'
|
||||
>
|
||||
Annual
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='row mt-10'>
|
||||
<div className='col-lg-6 mb-10 mb-lg-0'>
|
||||
<div className='nav flex-column'>
|
||||
{plans.map((plan, index) => {
|
||||
return (
|
||||
<div
|
||||
onClick={() => {
|
||||
setSelected(plan.title)
|
||||
}}
|
||||
className={
|
||||
`nav-link btn btn-outline btn-outline-dashed btn-color-dark d-flex flex-stack text-start p-6 ` +
|
||||
(index !== plans.length - 1 && 'mb-6 ') +
|
||||
(plan.default && 'active ') +
|
||||
(!plan.custom && 'btn-active btn-active-primary ')
|
||||
}
|
||||
data-bs-toggle='tab'
|
||||
data-bs-target={`#kt_upgrade_plan_${index}`}
|
||||
key={index}
|
||||
>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
<div className='form-check form-check-custom form-check-solid form-check-success me-6'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='radio'
|
||||
name='plan'
|
||||
value={plan.title}
|
||||
checked={selected === plan.title}
|
||||
onChange={(e) => setSelected(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex-grow-1'>
|
||||
<h2 className='d-flex align-items-center fs-2 fw-bolder flex-wrap'>
|
||||
{plan.title}
|
||||
|
||||
{plan.label && (
|
||||
<span className='badge badge-light-success ms-2 fs-7'>
|
||||
{plan.label}
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
<div className='fw-bold opacity-50'>{plan.subTitle}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='ms-5'>
|
||||
{plan.custom && (
|
||||
<button className='btn btn-sm btn-primary'>Contact Us</button>
|
||||
)}
|
||||
{!plan.custom && (
|
||||
<>
|
||||
<span className='mb-2'>$</span>
|
||||
|
||||
<span className='fs-3x fw-bolder'>
|
||||
{currentState === 'month' ? plan.priceMonth : plan.priceAnnual}
|
||||
</span>
|
||||
|
||||
<span className='fs-7 opacity-50'>
|
||||
/<span data-kt-element='period'>Mon</span>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='col-lg-6'>
|
||||
<div className='tab-content rounded h-100 bg-light p-10'>
|
||||
{plans.map((plan, index) => {
|
||||
return (
|
||||
<div key={`custom${index}`}>
|
||||
{plan.title === selected && !plan.custom && (
|
||||
<>
|
||||
<div
|
||||
className={`tab-pane fade` + (plan.default && 'show active')}
|
||||
id={`kt_upgrade_plan_${index}`}
|
||||
key={index}
|
||||
>
|
||||
<div className='pb-5'>
|
||||
<h2 className='fw-bolder text-gray-900'>What’s in Startup Plan?</h2>
|
||||
|
||||
<div className='text-gray-500 fw-bold'>{plan.description}</div>
|
||||
</div>
|
||||
|
||||
<div className='pt-1'>
|
||||
{plan.features!.map((feature, i) => {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
`d-flex align-items-center` +
|
||||
(i !== plan.features!.length - 1 && ' mb-7')
|
||||
}
|
||||
key={`${i}-${feature.title}`}
|
||||
>
|
||||
{feature.supported && (
|
||||
<>
|
||||
<span className='fw-bold fs-5 text-gray-700 flex-grow-1'>
|
||||
{feature.title}
|
||||
</span>
|
||||
|
||||
<KTIcon
|
||||
iconName='check-circle'
|
||||
className='fs-1 text-success'
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{!feature.supported && (
|
||||
<>
|
||||
<span className='fw-bold fs-5 text-gray-500 flex-grow-1'>
|
||||
{feature.title}
|
||||
</span>
|
||||
<KTIcon iconName='cross-circle' className='fs-1' />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-center flex-row-fluid pt-12'>
|
||||
<button type='reset' className='btn btn-light me-3' data-bs-dismiss='modal'>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button type='submit' className='btn btn-primary'>
|
||||
Upgrade Plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {UpgradePlan}
|
||||
@@ -0,0 +1,150 @@
|
||||
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
||||
import {FC, useEffect, useRef} from 'react'
|
||||
import {KTIcon} from '../../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartSize?: number
|
||||
chartLine?: number
|
||||
chartRotate?: number
|
||||
}
|
||||
|
||||
const CardsWidget17: FC<Props> = ({
|
||||
className,
|
||||
chartSize = 70,
|
||||
chartLine = 11,
|
||||
chartRotate = 145,
|
||||
}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
useEffect(() => {
|
||||
refreshChart()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [mode])
|
||||
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
initChart(chartSize, chartLine, chartRotate)
|
||||
}, 10)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`card card-flush ${className}`}>
|
||||
<div className='card-header pt-5'>
|
||||
<div className='card-title d-flex flex-column'>
|
||||
<div className='d-flex align-items-center'>
|
||||
<span className='fs-4 fw-semibold text-gray-500 me-1 align-self-start'>$</span>
|
||||
|
||||
<span className='fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2'>69,700</span>
|
||||
|
||||
<span className='badge badge-light-success fs-base'>
|
||||
<KTIcon iconName='arrow-up' className='fs-5 text-success ms-n1' /> 2.2%
|
||||
</span>
|
||||
</div>
|
||||
<span className='text-gray-500 pt-1 fw-semibold fs-6'>Projects Earnings in April</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='card-body pt-2 pb-4 d-flex flex-wrap align-items-center'>
|
||||
<div className='d-flex flex-center me-5 pt-2'>
|
||||
<div
|
||||
id='kt_card_widget_17_chart'
|
||||
ref={chartRef}
|
||||
style={{minWidth: chartSize + 'px', minHeight: chartSize + 'px'}}
|
||||
data-kt-size={chartSize}
|
||||
data-kt-line={chartLine}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-column content-justify-center flex-row-fluid'>
|
||||
<div className='d-flex fw-semibold align-items-center'>
|
||||
<div className='bullet w-8px h-3px rounded-2 bg-success me-3'></div>
|
||||
<div className='text-gray-500 flex-grow-1 me-4'>Leaf CRM</div>
|
||||
<div className='fw-bolder text-gray-700 text-xxl-end'>$7,660</div>
|
||||
</div>
|
||||
<div className='d-flex fw-semibold align-items-center my-3'>
|
||||
<div className='bullet w-8px h-3px rounded-2 bg-primary me-3'></div>
|
||||
<div className='text-gray-500 flex-grow-1 me-4'>Mivy App</div>
|
||||
<div className='fw-bolder text-gray-700 text-xxl-end'>$2,820</div>
|
||||
</div>
|
||||
<div className='d-flex fw-semibold align-items-center'>
|
||||
<div
|
||||
className='bullet w-8px h-3px rounded-2 me-3'
|
||||
style={{backgroundColor: '#E4E6EF'}}
|
||||
></div>
|
||||
<div className='text-gray-500 flex-grow-1 me-4'>Others</div>
|
||||
<div className=' fw-bolder text-gray-700 text-xxl-end'>$45,257</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const initChart = function (
|
||||
chartSize: number = 70,
|
||||
chartLine: number = 11,
|
||||
chartRotate: number = 145
|
||||
) {
|
||||
const el = document.getElementById('kt_card_widget_17_chart')
|
||||
if (!el) {
|
||||
return
|
||||
}
|
||||
el.innerHTML = ''
|
||||
|
||||
const options = {
|
||||
size: chartSize,
|
||||
lineWidth: chartLine,
|
||||
rotate: chartRotate,
|
||||
//percent: el.getAttribute('data-kt-percent') ,
|
||||
}
|
||||
|
||||
const canvas = document.createElement('canvas')
|
||||
const span = document.createElement('span')
|
||||
|
||||
//@ts-ignore
|
||||
if (typeof G_vmlCanvasManager !== 'undefined') {
|
||||
//@ts-ignore
|
||||
G_vmlCanvasManager.initElement(canvas)
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext('2d')
|
||||
canvas.width = canvas.height = options.size
|
||||
|
||||
el.appendChild(span)
|
||||
el.appendChild(canvas)
|
||||
|
||||
|
||||
ctx?.translate(options.size / 2, options.size / 2) // change center
|
||||
ctx?.rotate((-1 / 2 + options.rotate / 180) * Math.PI) // rotate -90 deg
|
||||
|
||||
//imd = ctx.getImageData(0, 0, 240, 240);
|
||||
const radius = (options.size - options.lineWidth) / 2
|
||||
|
||||
const drawCircle = function (color: string, lineWidth: number, percent: number) {
|
||||
percent = Math.min(Math.max(0, percent || 1), 1)
|
||||
if (!ctx) {
|
||||
return
|
||||
}
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false)
|
||||
ctx.strokeStyle = color
|
||||
ctx.lineCap = 'round' // butt, round or square
|
||||
ctx.lineWidth = lineWidth
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
// Init 2
|
||||
drawCircle('#E4E6EF', options.lineWidth, 100 / 100)
|
||||
drawCircle(getCSSVariableValue('--bs-primary'), options.lineWidth, 100 / 150)
|
||||
drawCircle(getCSSVariableValue('--bs-success'), options.lineWidth, 100 / 250)
|
||||
}
|
||||
|
||||
export {CardsWidget17}
|
||||
@@ -0,0 +1,44 @@
|
||||
type Props = {
|
||||
className: string
|
||||
description: string
|
||||
color: string
|
||||
img: string
|
||||
}
|
||||
|
||||
const CardsWidget20 = ({className, description, color, img}: Props) => (
|
||||
<div
|
||||
className={`card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end ${className}`}
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
backgroundImage: `url('${img}')`,
|
||||
}}
|
||||
>
|
||||
<div className='card-header pt-5'>
|
||||
<div className='card-title d-flex flex-column'>
|
||||
<span className='fs-2hx fw-bold text-white me-2 lh-1 ls-n2'>69</span>
|
||||
|
||||
<span className='text-white opacity-75 pt-1 fw-semibold fs-6'>{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card-body d-flex align-items-end pt-0'>
|
||||
<div className='d-flex align-items-center flex-column mt-3 w-100'>
|
||||
<div className='d-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2'>
|
||||
<span>43 Pending</span>
|
||||
<span>72%</span>
|
||||
</div>
|
||||
|
||||
<div className='h-8px mx-3 w-100 bg-white bg-opacity-50 rounded'>
|
||||
<div
|
||||
className='bg-white rounded h-8px'
|
||||
role='progressbar'
|
||||
style={{width: '72%'}}
|
||||
aria-valuenow={50}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
export {CardsWidget20}
|
||||
@@ -0,0 +1,74 @@
|
||||
|
||||
import clsx from 'clsx'
|
||||
import {toAbsoluteUrl} from '../../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
description: string
|
||||
icon: boolean
|
||||
stats: number
|
||||
labelColor: string
|
||||
textColor: string
|
||||
}
|
||||
|
||||
const items: Array<{
|
||||
name: string
|
||||
initials?: string
|
||||
src?: string
|
||||
state?: string
|
||||
}> = [
|
||||
{name: 'Alan Warden', initials: 'A', state: 'warning'},
|
||||
{name: 'Michael Eberon', src: toAbsoluteUrl('media/avatars/300-11.jpg')},
|
||||
{name: 'Susan Redwood', initials: 'S', state: 'primary'},
|
||||
{name: 'Melody Macy', src: toAbsoluteUrl('media/avatars/300-2.jpg')},
|
||||
{name: 'Perry Matthew', initials: 'P', state: 'danger'},
|
||||
{name: 'Barry Walter', src: toAbsoluteUrl('media/avatars/300-12.jpg')},
|
||||
]
|
||||
|
||||
const CardsWidget7 = ({className, description, stats, labelColor, textColor}: Props) => (
|
||||
<div className={`card card-flush ${className}`}>
|
||||
<div className='card-header pt-5'>
|
||||
<div className='card-title d-flex flex-column'>
|
||||
<div className='card-title d-flex flex-column'>
|
||||
<span className='fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2'>{stats}</span>
|
||||
<span className='text-gray-500 pt-1 fw-semibold fs-6'>{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card-body d-flex flex-column justify-content-end pe-0'>
|
||||
<span className='fs-6 fw-bolder text-gray-800 d-block mb-2'>Today’s Heroes</span>
|
||||
<div className='symbol-group symbol-hover flex-nowrap'>
|
||||
{items.map((item, index) => (
|
||||
<div
|
||||
className='symbol symbol-35px symbol-circle'
|
||||
data-bs-toggle='tooltip'
|
||||
title={item.name}
|
||||
key={`cw7-item-${index}`}
|
||||
>
|
||||
{item.src && <img alt='Pic' src={item.src} />}
|
||||
{item.state && item.initials && (
|
||||
<span
|
||||
className={clsx(
|
||||
'symbol-label fw-bold',
|
||||
'bg-' + item.state,
|
||||
'text-inverse-' + item.state
|
||||
)}
|
||||
>
|
||||
{item.initials}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<a href='#' className='symbol symbol-35px symbol-circle'>
|
||||
<span
|
||||
className={clsx('symbol-label fs-8 fw-bold', 'bg-' + labelColor, 'text-' + textColor)}
|
||||
>
|
||||
+42
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
export {CardsWidget7}
|
||||
@@ -0,0 +1,55 @@
|
||||
|
||||
import {Link} from 'react-router-dom'
|
||||
import {toAbsoluteUrl} from '../../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const EngageWidget10 = ({className}: Props) => (
|
||||
<div className={`card card-flush ${className}`}>
|
||||
<div
|
||||
className='card-body d-flex flex-column justify-content-between mt-9 bgi-no-repeat bgi-size-cover bgi-position-x-center pb-0'
|
||||
style={{
|
||||
backgroundPosition: '100% 50%',
|
||||
backgroundImage: `url('${toAbsoluteUrl('media/stock/900x600/42.png')}')`,
|
||||
}}
|
||||
>
|
||||
<div className='mb-10'>
|
||||
<div className='fs-2hx fw-bold text-gray-800 text-center mb-13'>
|
||||
<span className='me-2'>
|
||||
Try our all new Enviroment with
|
||||
<br />
|
||||
<span className='position-relative d-inline-block text-danger'>
|
||||
<Link
|
||||
to='/crafted/pages/profile/overview'
|
||||
className='text-danger
|
||||
opacity-75-hover'
|
||||
>
|
||||
Pro Plan
|
||||
</Link>
|
||||
|
||||
<span className='position-absolute opacity-15 bottom-0 start-0 border-4 border-danger border-bottom w-100'></span>
|
||||
</span>
|
||||
</span>
|
||||
for Free
|
||||
</div>
|
||||
|
||||
<div className='text-center'>
|
||||
<a href='#'>Upgrade Now</a>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
className='mx-auto h-150px h-lg-200px theme-light-show'
|
||||
src={toAbsoluteUrl('media/illustrations/misc/upgrade.svg')}
|
||||
alt=''
|
||||
/>
|
||||
<img
|
||||
className='mx-auto h-150px h-lg-200px theme-dark-show'
|
||||
src={toAbsoluteUrl('media/illustrations/misc/upgrade-dark.svg')}
|
||||
alt=''
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
export {EngageWidget10}
|
||||
@@ -0,0 +1,41 @@
|
||||
|
||||
import {Fragment} from 'react'
|
||||
import {KTIcon} from '../../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const rows: Array<{description: string}> = [
|
||||
{description: 'Avg. Client Rating'},
|
||||
{description: 'Instagram Followers'},
|
||||
{description: 'Google Ads CPC'},
|
||||
]
|
||||
|
||||
const ListsWidget26 = ({className}: Props) => (
|
||||
<div className={`card card-flush ${className}`}>
|
||||
<div className='card-header pt-5'>
|
||||
<h3 className='card-title text-gray-800 fw-bold'>External Links</h3>
|
||||
<div className='card-toolbar'></div>
|
||||
</div>
|
||||
<div className='card-body pt-5'>
|
||||
{rows.map((row, index) => (
|
||||
<Fragment key={`lw26-rows-${index}`}>
|
||||
<div className='d-flex flex-stack'>
|
||||
<a href='#' className='text-primary fw-semibold fs-6 me-2'>
|
||||
{row.description}
|
||||
</a>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-icon btn-sm h-auto btn-color-gray-500 btn-active-color-primary justify-content-end'
|
||||
>
|
||||
<KTIcon iconName='exit-right-corner' className='fs-2' />
|
||||
</button>
|
||||
</div>
|
||||
{rows.length - 1 > index && <div className='separator separator-dashed my-3' />}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
export {ListsWidget26}
|
||||
@@ -0,0 +1,197 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ChartsWidget1: FC<Props> = ({className}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
}, [chartRef, mode])
|
||||
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const height = parseInt(getCSS(chartRef.current, 'height'))
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, getChartOptions(height))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0 pt-5'>
|
||||
{/* begin::Title */}
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Recent Statistics</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>More than 400 new members</span>
|
||||
</h3>
|
||||
{/* end::Title */}
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body'>
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} id='kt_charts_widget_1_chart' style={{height: '350px'}} />
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ChartsWidget1}
|
||||
|
||||
function getChartOptions(height: number): ApexOptions {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
const baseColor = getCSSVariableValue('--bs-primary')
|
||||
const secondaryColor = getCSSVariableValue('--bs-gray-300')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [44, 55, 57, 56, 61, 58],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [76, 85, 101, 98, 87, 105],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'bar',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '30%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [baseColor, secondaryColor],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ChartsWidget2: FC<Props> = ({className}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const height = parseInt(getCSS(chartRef.current, 'height'))
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, getChartOptions(height))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0 pt-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Recent Orders</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>More than 500 new orders</span>
|
||||
</h3>
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='card-toolbar' data-kt-buttons='true'>
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary active px-4 me-1'
|
||||
id='kt_charts_widget_2_year_btn'
|
||||
>
|
||||
Year
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1'
|
||||
id='kt_charts_widget_2_month_btn'
|
||||
>
|
||||
Month
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4'
|
||||
id='kt_charts_widget_2_week_btn'
|
||||
>
|
||||
Week
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body'>
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} id='kt_charts_widget_2_chart' style={{height: '350px'}}></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ChartsWidget2}
|
||||
|
||||
function getChartOptions(height: number): ApexOptions {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
const baseColor = getCSSVariableValue('--bs-warning')
|
||||
const secondaryColor = getCSSVariableValue('--bs-gray-300')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [44, 55, 57, 56, 61, 58],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [76, 85, 101, 98, 87, 105],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'bar',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '30%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [baseColor, secondaryColor],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
import React, {useEffect, useRef} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ChartsWidget3: React.FC<Props> = ({className}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshMode = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, getChartOptions())
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshMode()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0 pt-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Recent Transactions</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>More than 1000 new records</span>
|
||||
</h3>
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='card-toolbar' data-kt-buttons='true'>
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary active px-4 me-1'
|
||||
id='kt_charts_widget_3_year_btn'
|
||||
>
|
||||
Year
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1'
|
||||
id='kt_charts_widget_3_month_btn'
|
||||
>
|
||||
Month
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4'
|
||||
id='kt_charts_widget_3_week_btn'
|
||||
>
|
||||
Week
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body'>
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} id='kt_charts_widget_3_chart' style={{height: '350px'}}></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ChartsWidget3}
|
||||
|
||||
function getChartOptions(): ApexOptions {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
const baseColor = getCSSVariableValue('--bs-info')
|
||||
const lightColor = getCSSVariableValue('--bs-info-light')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [30, 40, 40, 90, 90, 70, 70],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [baseColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: baseColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
formatter: undefined,
|
||||
offsetY: 0,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [lightColor],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
strokeColors: baseColor,
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ChartsWidget4: FC<Props> = ({className}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const height = parseInt(getCSS(chartRef.current, 'height'))
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, getChartOptions(height))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0 pt-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Recent Customers</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>More than 500 new customers</span>
|
||||
</h3>
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='card-toolbar' data-kt-buttons='true'>
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary active px-4 me-1'
|
||||
id='kt_charts_widget_4_year_btn'
|
||||
>
|
||||
Year
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1'
|
||||
id='kt_charts_widget_4_month_btn'
|
||||
>
|
||||
Month
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4'
|
||||
id='kt_charts_widget_4_week_btn'
|
||||
>
|
||||
Week
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body'>
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} id='kt_charts_widget_4_chart' style={{height: '350px'}}></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ChartsWidget4}
|
||||
|
||||
function getChartOptions(height: number): ApexOptions {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
|
||||
const baseColor = getCSSVariableValue('--bs-success')
|
||||
const baseLightColor = getCSSVariableValue('--bs-success-light')
|
||||
const secondaryColor = getCSSVariableValue('--bs-warning')
|
||||
const secondaryLightColor = getCSSVariableValue('--bs-warning-light')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [60, 50, 80, 40, 100, 60],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [70, 60, 110, 40, 50, 70],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: labelColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
formatter: undefined,
|
||||
offsetY: 0,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [baseColor, secondaryColor],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
colors: [baseLightColor, secondaryLightColor],
|
||||
strokeColors: [baseLightColor, secondaryLightColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ChartsWidget5: FC<Props> = ({className}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const height = parseInt(getCSS(chartRef.current, 'height'))
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, getChartOptions(height))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0 pt-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Recent Customers</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>More than 500 new customers</span>
|
||||
</h3>
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='card-toolbar' data-kt-buttons='true'>
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary active px-4 me-1'
|
||||
id='kt_charts_widget_5_year_btn'
|
||||
>
|
||||
Year
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1'
|
||||
id='kt_charts_widget_5_month_btn'
|
||||
>
|
||||
Month
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4'
|
||||
id='kt_charts_widget_5_week_btn'
|
||||
>
|
||||
Week
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body'>
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} id='kt_charts_widget_5_chart' style={{height: '350px'}}></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ChartsWidget5}
|
||||
|
||||
function getChartOptions(height: number): ApexOptions {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
|
||||
const baseColor = getCSSVariableValue('--bs-primary')
|
||||
const secondaryColor = getCSSVariableValue('--bs-info')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [40, 50, 65, 70, 50, 30],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [-30, -40, -55, -60, -40, -20],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'bar',
|
||||
stacked: true,
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '12%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: -80,
|
||||
max: 80,
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [baseColor, secondaryColor],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ChartsWidget6: FC<Props> = ({className}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const height = parseInt(getCSS(chartRef.current, 'height'))
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, getChartOptions(height))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0 pt-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Recent Orders</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>More than 500+ new orders</span>
|
||||
</h3>
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='card-toolbar' data-kt-buttons='true'>
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary active px-4 me-1'
|
||||
id='kt_charts_widget_6_sales_btn'
|
||||
>
|
||||
Sales
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1'
|
||||
id='kt_charts_widget_6_expenses_btn'
|
||||
>
|
||||
Expenses
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body'>
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} id='kt_charts_widget_6_chart' style={{height: '350px'}}></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ChartsWidget6}
|
||||
|
||||
function getChartOptions(height: number): ApexOptions {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
|
||||
const baseColor = getCSSVariableValue('--bs-primary')
|
||||
const baseLightColor = getCSSVariableValue('--bs-primary-light')
|
||||
const secondaryColor = getCSSVariableValue('--bs-info')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
type: 'bar',
|
||||
data: [40, 50, 65, 70, 50, 30],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
type: 'bar',
|
||||
data: [20, 20, 25, 30, 30, 20],
|
||||
},
|
||||
{
|
||||
name: 'Expenses',
|
||||
type: 'area',
|
||||
data: [50, 80, 60, 90, 50, 70],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
stacked: true,
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
borderRadius: 5,
|
||||
columnWidth: '12%',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
max: 120,
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [baseColor, secondaryColor, baseLightColor],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ChartsWidget7: FC<Props> = ({className}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const height = parseInt(getCSS(chartRef.current, 'height'))
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, getChartOptions(height))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0 pt-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Recent Users</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>More than 500 new users</span>
|
||||
</h3>
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='card-toolbar' data-kt-buttons='true'>
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary active px-4 me-1'
|
||||
id='kt_charts_widget_7_year_btn'
|
||||
>
|
||||
Year
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1'
|
||||
id='kt_charts_widget_7_month_btn'
|
||||
>
|
||||
Month
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4'
|
||||
id='kt_charts_widget_7_week_btn'
|
||||
>
|
||||
Week
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body'>
|
||||
{/* begin::Chart */}
|
||||
<div
|
||||
ref={chartRef}
|
||||
id='kt_charts_widget_7_chart'
|
||||
style={{height: '350px'}}
|
||||
className='card-rounded-bottom'
|
||||
></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ChartsWidget7}
|
||||
|
||||
function getChartOptions(height: number): ApexOptions {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
const strokeColor = getCSSVariableValue('--bs-gray-300')
|
||||
|
||||
const color1 = getCSSVariableValue('--bs-warning')
|
||||
const color1Light = getCSSVariableValue('--bs-warning-light')
|
||||
|
||||
const color2 = getCSSVariableValue('--bs-success')
|
||||
const color2Light = getCSSVariableValue('--bs-success-light')
|
||||
|
||||
const color3 = getCSSVariableValue('--bs-primary')
|
||||
const color3Light = getCSSVariableValue('--bs-primary-light')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [30, 30, 50, 50, 35, 35],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [55, 20, 20, 20, 70, 70],
|
||||
},
|
||||
{
|
||||
name: 'Expenses',
|
||||
data: [60, 60, 40, 40, 30, 30],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: [color1, 'transparent', 'transparent'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: strokeColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
formatter: undefined,
|
||||
offsetY: 0,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [color1, color2, color3],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
colors: [color1Light, color2Light, color3Light],
|
||||
strokeColors: [color1, color2, color3],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,246 @@
|
||||
|
||||
import React, {useEffect, useRef} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ChartsWidget8: React.FC<Props> = ({className}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const height = parseInt(getCSS(chartRef.current, 'height'))
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, getChartOptions(height))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0 pt-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Recent Orders</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>More than 500 new orders</span>
|
||||
</h3>
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='card-toolbar' data-kt-buttons='true'>
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary active px-4 me-1'
|
||||
id='kt_charts_widget_8_year_btn'
|
||||
>
|
||||
Year
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1'
|
||||
id='kt_charts_widget_8_month_btn'
|
||||
>
|
||||
Month
|
||||
</a>
|
||||
|
||||
<a
|
||||
className='btn btn-sm btn-color-muted btn-active btn-active-primary px-4'
|
||||
id='kt_charts_widget_8_week_btn'
|
||||
>
|
||||
Week
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body'>
|
||||
{/* begin::Chart */}
|
||||
<div
|
||||
ref={chartRef}
|
||||
id='kt_charts_widget_8_chart'
|
||||
style={{height: '350px'}}
|
||||
className='card-rounded-bottom'
|
||||
></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ChartsWidget8}
|
||||
|
||||
function getChartOptions(height: number): ApexOptions {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
const strokeColor = getCSSVariableValue('--bs-gray-300')
|
||||
|
||||
const color1 = getCSSVariableValue('--bs-warning')
|
||||
const color1Light = getCSSVariableValue('--bs-warning-light')
|
||||
|
||||
const color2 = getCSSVariableValue('--bs-success')
|
||||
const color2Light = getCSSVariableValue('--bs-success-light')
|
||||
|
||||
const color3 = getCSSVariableValue('--bs-primary')
|
||||
const color3Light = getCSSVariableValue('--bs-primary-light')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [30, 30, 50, 50, 35, 35],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [55, 20, 20, 20, 70, 70],
|
||||
},
|
||||
{
|
||||
name: 'Expenses',
|
||||
data: [60, 60, 40, 40, 30, 30],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: [color1, color2, color3],
|
||||
},
|
||||
xaxis: {
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: strokeColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
formatter: undefined,
|
||||
offsetY: 0,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [color1Light, color2Light, color3Light],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
colors: [color1, color2, color3],
|
||||
strokeColors: [color1, color2, color3],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
// import { toAbsoluteUrl } from "../../../helpers";
|
||||
// import { KTSVG } from "../../../helpers";
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
bgColor?: string
|
||||
bgImage?: string
|
||||
innerPadding?: string
|
||||
bgHex?: string
|
||||
lg?: string
|
||||
}
|
||||
|
||||
const EngageWidget1: FC<Props> = ({
|
||||
className,
|
||||
bgHex = '',
|
||||
bgColor = '',
|
||||
lg = '',
|
||||
bgImage = '',
|
||||
}) => {
|
||||
let bgImagePath = bgImage ? toAbsoluteUrl(`media/${bgImage}`) : ''
|
||||
if (bgImagePath) {
|
||||
bgImagePath = `url("${bgImagePath}")`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
<div
|
||||
className={`card-body card-rounded p-0 d-flex bg-${bgColor}`}
|
||||
style={{backgroundColor: bgHex}}
|
||||
>
|
||||
<div
|
||||
className={`d-flex flex-column flex-lg-row-auto ${
|
||||
lg ? 'py-10 py-md-14 px-10 px-md-20 pe-lg-0' : 'p-10 p-md-20'
|
||||
}`}
|
||||
>
|
||||
<h1 className={`fw-bold text-gray-900 ${lg ? 'mb-0' : ''}`}>Search Goods</h1>
|
||||
<div className='fs-3 mb-8'>Get Amazing Gadgets</div>
|
||||
<form className='d-flex flex-center py-2 px-6 bg-body rounded'>
|
||||
<KTIcon iconName='magnifier' className='fs-1 text-primary' />
|
||||
<input
|
||||
type='text'
|
||||
className={`form-control border-0 fw-semibold ps-2 ${
|
||||
lg ? 'w-xxl-600px' : 'w-xxl-350px'
|
||||
}`}
|
||||
placeholder='Search Goods'
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
className={`d-none d-md-flex flex-row-fluid mw-400px ml-auto ${
|
||||
bgImage ? 'bgi-no-repeat bgi-position-y-center bgi-position-x-left bgi-size-cover' : ''
|
||||
}`}
|
||||
style={{backgroundImage: bgImagePath}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {EngageWidget1}
|
||||
@@ -0,0 +1,42 @@
|
||||
|
||||
import clsx from 'clsx'
|
||||
import React from 'react'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
imagePath?: string
|
||||
innerPadding?: string
|
||||
color?: string
|
||||
}
|
||||
|
||||
const EngageWidget2: React.FC<Props> = ({
|
||||
className,
|
||||
imagePath = '',
|
||||
color = 'primary',
|
||||
}) => {
|
||||
return (
|
||||
<div className={`card overflow-hidden ${className}`}>
|
||||
<div className={`card-body p-0 d-flex card-rounded bg-light-${color}`}>
|
||||
<div className='py-18 px-12'>
|
||||
<h3 className='fs-2x'>
|
||||
<a href='#' className='text-gray-900 text-hover-primary fw-bold'>
|
||||
Nike Sneakers
|
||||
</a>
|
||||
</h3>
|
||||
<div className={clsx('fs-3', `text-${color}`)}>Get Amazing Nike Sneakers</div>
|
||||
</div>
|
||||
{imagePath && (
|
||||
<div
|
||||
className='d-none d-md-flex flex-row-fluid bgi-no-repeat bgi-position-y-center bgi-position-x-right bgi-size-cover'
|
||||
style={{
|
||||
transform: 'translateX(10%) rotate(-26deg)',
|
||||
backgroundImage: `url('${imagePath}')`,
|
||||
}}
|
||||
></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {EngageWidget2}
|
||||
@@ -0,0 +1,81 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
imagePath?: string
|
||||
innerPadding?: string
|
||||
color?: string
|
||||
}
|
||||
|
||||
const EngageWidget3: FC<Props> = ({
|
||||
className,
|
||||
color = 'primary',
|
||||
}) => {
|
||||
return (
|
||||
<div className={`card card-custom ${className}`}>
|
||||
{/* begin::Card Body */}
|
||||
<div
|
||||
className={`card-body d-flex p-12 flex-column flex-md-row flex-lg-column flex-xxl-row bg-${color}`}
|
||||
>
|
||||
{/*begin::Image*/}
|
||||
<div
|
||||
className='bgi-no-repeat bgi-position-center bgi-size-cover h-300px h-md-auto h-lg-300px h-xxl-auto mw-100 w-650px mx-auto'
|
||||
style={{
|
||||
backgroundImage: `url('${toAbsoluteUrl('media/products/12.png')}'`,
|
||||
}}
|
||||
></div>
|
||||
{/*end::Image*/}
|
||||
|
||||
{/*begin::Card*/}
|
||||
<div className='card shadow-none w-auto w-md-300px w-lg-auto w-xxl-300px ml-auto'>
|
||||
{/*begin::Card Body*/}
|
||||
<div className='card-body bg-light px-12 py-10'>
|
||||
<h3 className='fw-bold fs-1 mb-1'>
|
||||
<a href='#' className='text-gray-800'>
|
||||
Nike True Balance
|
||||
</a>
|
||||
</h3>
|
||||
<div className='text-primary fs-3 mb-9'>$ 399.99</div>
|
||||
<div className='fs-7 mb-8'>
|
||||
Outlines keep you honest. They stop you from indulging in poorly ought out metaphorsy
|
||||
about driving and keep you focused one the overall structure of your post
|
||||
</div>
|
||||
{/*begin::Info*/}
|
||||
<table className='table table-borderless align-middle fw-semibold'>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className='text-gray-600 ps-0'>Shoes Brand</td>
|
||||
<td className='text-gray-900 pe-0'>Nike</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='text-gray-600 ps-0'>SKU</td>
|
||||
<td className='text-gray-900 pe-0'>NF3535</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='text-gray-600 ps-0'>Color</td>
|
||||
<td className='text-gray-900 pe-0'>White</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='text-gray-600 ps-0'>Collection</td>
|
||||
<td className='text-gray-900 pe-0'>2020 Spring</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='text-gray-600 ps-0'>In Stock</td>
|
||||
<td className='text-gray-900 pe-0'>280</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{/*end::Info*/}
|
||||
</div>
|
||||
{/*end::Card Body*/}
|
||||
</div>
|
||||
{/*end::Card*/}
|
||||
</div>
|
||||
{/*end::Card Body*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {EngageWidget3}
|
||||
@@ -0,0 +1,114 @@
|
||||
|
||||
import React from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const FeedsWidget2: React.FC<Props> = ({className}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pb-0'>
|
||||
{/* begin::Header */}
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
{/* begin::User */}
|
||||
<div className='d-flex align-items-center flex-grow-1'>
|
||||
{/* begin::Avatar */}
|
||||
<div className='symbol symbol-45px me-5'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-23.jpg')} alt='' />
|
||||
</div>
|
||||
{/* end::Avatar */}
|
||||
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fs-6 fw-bold'>
|
||||
Nick Logan
|
||||
</a>
|
||||
|
||||
<span className='text-gray-500 fw-semibold'>PHP, SQLite, Artisan CLI</span>
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
</div>
|
||||
{/* end::User */}
|
||||
|
||||
{/* begin::Menu */}
|
||||
<div className='my-0'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
</div>
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Post */}
|
||||
<div className='mb-5'>
|
||||
{/* begin::Text */}
|
||||
<p className='text-gray-800 fw-normal mb-5'>
|
||||
Outlines keep you honest. They stop you from indulging in poorly thought-out metaphors
|
||||
about driving and keep you focused on the overall structure of your post
|
||||
</p>
|
||||
{/* end::Text */}
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-light btn-color-muted btn-active-light-success px-4 py-2 me-4'
|
||||
>
|
||||
<KTIcon iconName='message-text-2' className='fs-2' />
|
||||
120
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-light btn-color-muted btn-active-light-danger px-4 py-2'
|
||||
>
|
||||
<KTIcon iconName='heart' className='fs-2' />
|
||||
15
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Post */}
|
||||
|
||||
{/* begin::Separator */}
|
||||
<div className='separator mb-4'></div>
|
||||
{/* end::Separator */}
|
||||
|
||||
{/* begin::Reply input */}
|
||||
<form className='position-relative mb-6'>
|
||||
<textarea
|
||||
className='form-control border-0 p-0 pe-10 resize-none min-h-25px'
|
||||
rows={1}
|
||||
placeholder='Reply..'
|
||||
></textarea>
|
||||
|
||||
<div className='position-absolute top-0 end-0 me-n5'>
|
||||
<span className='btn btn-icon btn-sm btn-active-color-primary pe-0 me-2'>
|
||||
<KTIcon iconName='paper-clip' className='fs-3 mb-3' />
|
||||
</span>
|
||||
|
||||
<span className='btn btn-icon btn-sm btn-active-color-primary ps-0'>
|
||||
<KTIcon iconName='geolocation' className='fs-2 mb-3' />
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
{/* edit::Reply input */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {FeedsWidget2}
|
||||
@@ -0,0 +1,187 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown2} from '../../content/dropdown/Dropdown2'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const FeedsWidget3: FC<Props> = ({className}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pb-0'>
|
||||
{/* begin::Header */}
|
||||
<div className='d-flex align-items-center mb-3'>
|
||||
{/* begin::User */}
|
||||
<div className='d-flex align-items-center flex-grow-1'>
|
||||
{/* begin::Avatar */}
|
||||
<div className='symbol symbol-45px me-5'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-21.jpg')} alt='' />
|
||||
</div>
|
||||
{/* end::Avatar */}
|
||||
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fs-6 fw-bold'>
|
||||
Carles Nilson
|
||||
</a>
|
||||
<span className='text-gray-500 fw-semibold'>Yestarday at 5:06 PM</span>
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
</div>
|
||||
{/* end::User */}
|
||||
|
||||
{/* begin::Menu */}
|
||||
<div className='my-0'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown2 />
|
||||
</div>
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Post */}
|
||||
<div className='mb-7'>
|
||||
{/* begin::Text */}
|
||||
<div className='text-gray-800 mb-5'>
|
||||
Outlines keep you honest. They stop you from indulging in poorly thought-out metaphors
|
||||
about driving and keep you focused on the overall structure of your post
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-light btn-color-muted btn-active-light-success px-4 py-2 me-4'
|
||||
>
|
||||
<KTIcon iconName='message-text-2' className='fs-2' />
|
||||
12
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-light btn-color-muted btn-active-light-danger px-4 py-2'
|
||||
>
|
||||
<KTIcon iconName='heart' className='fs-2' />
|
||||
150
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Post */}
|
||||
|
||||
{/* begin::Replies */}
|
||||
<div className='mb-7 ps-10'>
|
||||
{/* begin::Reply */}
|
||||
<div className='d-flex mb-5'>
|
||||
{/* begin::Avatar */}
|
||||
<div className='symbol symbol-45px me-5'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-14.jpg')} alt='' />
|
||||
</div>
|
||||
{/* end::Avatar */}
|
||||
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex flex-column flex-row-fluid'>
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex align-items-center flex-wrap mb-1'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fw-bold me-2'>
|
||||
Alice Danchik
|
||||
</a>
|
||||
|
||||
<span className='text-gray-500 fw-semibold fs-7'>1 day</span>
|
||||
|
||||
<a href='#' className='ms-auto text-gray-500 text-hover-primary fw-semibold fs-7'>
|
||||
Reply
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
|
||||
{/* begin::Post */}
|
||||
<span className='text-gray-800 fs-7 fw-normal pt-1'>
|
||||
Long before you sit dow to put digital pen to paper you need to make sure you have
|
||||
to sit down and write.
|
||||
</span>
|
||||
{/* end::Post */}
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
</div>
|
||||
{/* end::Reply */}
|
||||
|
||||
{/* begin::Reply */}
|
||||
<div className='d-flex'>
|
||||
{/* begin::Avatar */}
|
||||
<div className='symbol symbol-45px me-5'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-9.jpg')} alt='' />
|
||||
</div>
|
||||
{/* end::Avatar */}
|
||||
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex flex-column flex-row-fluid'>
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex align-items-center flex-wrap mb-1'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fw-bold me-2'>
|
||||
Harris Bold
|
||||
</a>
|
||||
|
||||
<span className='text-gray-500 fw-semibold fs-7'>2 days</span>
|
||||
|
||||
<a href='#' className='ms-auto text-gray-500 text-hover-primary fw-semibold fs-7'>
|
||||
Reply
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
|
||||
{/* begin::Post */}
|
||||
<span className='text-gray-800 fs-7 fw-normal pt-1'>
|
||||
Outlines keep you honest. They stop you from indulging in poorly
|
||||
</span>
|
||||
{/* end::Post */}
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
</div>
|
||||
{/* end::Reply */}
|
||||
</div>
|
||||
{/* end::Replies */}
|
||||
|
||||
{/* begin::Separator */}
|
||||
<div className='separator mb-4'></div>
|
||||
{/* end::Separator */}
|
||||
|
||||
{/* begin::Reply input */}
|
||||
<form className='position-relative mb-6'>
|
||||
<textarea
|
||||
className='form-control border-0 p-0 pe-10 resize-none min-h-25px'
|
||||
data-kt-autosize='true'
|
||||
rows={1}
|
||||
placeholder='Reply..'
|
||||
></textarea>
|
||||
|
||||
<div className='position-absolute top-0 end-0 me-n5'>
|
||||
<span className='btn btn-icon btn-sm btn-active-color-primary pe-0 me-2'>
|
||||
<KTIcon iconName='message-text-2' className='fs-3 mb-3' />
|
||||
</span>
|
||||
|
||||
<span className='btn btn-icon btn-sm btn-active-color-primary ps-0'>
|
||||
<KTIcon iconName='geolocation' className='fs-2 mb-3' />
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
{/* edit::Reply input */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {FeedsWidget3}
|
||||
@@ -0,0 +1,113 @@
|
||||
|
||||
import React from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const FeedsWidget4: React.FC<Props> = ({className}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pb-0'>
|
||||
{/* begin::Header */}
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
{/* begin::User */}
|
||||
<div className='d-flex align-items-center flex-grow-1'>
|
||||
{/* begin::Avatar */}
|
||||
<div className='symbol symbol-45px me-5'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-7.jpg')} alt='' />
|
||||
</div>
|
||||
{/* end::Avatar */}
|
||||
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fs-6 fw-bold'>
|
||||
Carles Nilson
|
||||
</a>
|
||||
<span className='text-gray-500 fw-semibold'>Last week at 10:00 PM</span>
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
</div>
|
||||
{/* end::User */}
|
||||
|
||||
{/* begin::Menu */}
|
||||
<div className='my-0'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
</div>
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Post */}
|
||||
<div className='mb-7'>
|
||||
{/* begin::Text */}
|
||||
<div className='text-gray-800 mb-5'>
|
||||
Outlines keep you honest. They stop you from indulging in poorly thought-out metaphors
|
||||
about driving and keep you focused on the overall structure of your post
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-light btn-color-muted btn-active-light-success px-4 py-2 me-4'
|
||||
>
|
||||
<KTIcon iconName='message-text-2' className='fs-3' />
|
||||
22
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-light btn-color-muted btn-active-light-danger px-4 py-2'
|
||||
>
|
||||
<KTIcon iconName='heart' className='fs-2' />
|
||||
59
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Post */}
|
||||
|
||||
{/* begin::Separator */}
|
||||
<div className='separator mb-4'></div>
|
||||
{/* end::Separator */}
|
||||
|
||||
{/* begin::Reply input */}
|
||||
<form className='position-relative mb-6'>
|
||||
<textarea
|
||||
className='form-control border-0 p-0 pe-10 resize-none min-h-25px'
|
||||
rows={1}
|
||||
placeholder='Reply..'
|
||||
></textarea>
|
||||
|
||||
<div className='position-absolute top-0 end-0 me-n5'>
|
||||
<span className='btn btn-icon btn-sm btn-active-color-primary pe-0 me-2'>
|
||||
<KTIcon iconName='paper-clip' className='fs-3 mb-3' />
|
||||
</span>
|
||||
|
||||
<span className='btn btn-icon btn-sm btn-active-color-primary ps-0'>
|
||||
<KTIcon iconName='geolocation' className='fs-2 mb-3' />
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
{/* edit::Reply input */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {FeedsWidget4}
|
||||
@@ -0,0 +1,123 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const FeedsWidget5: FC<Props> = ({className}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pb-0'>
|
||||
{/* begin::Header */}
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
{/* begin::User */}
|
||||
<div className='d-flex align-items-center flex-grow-1'>
|
||||
{/* begin::Avatar */}
|
||||
<div className='symbol symbol-45px me-5'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-25.jpg')} alt='' />
|
||||
</div>
|
||||
{/* end::Avatar */}
|
||||
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fs-6 fw-bold'>
|
||||
Sam Logan
|
||||
</a>
|
||||
|
||||
<span className='text-gray-500 fw-semibold'>Mango, Java, Python</span>
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
</div>
|
||||
{/* end::User */}
|
||||
|
||||
{/* begin::Menu */}
|
||||
<div className='my-0'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
</div>
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Post */}
|
||||
<div className='mb-5'>
|
||||
{/* begin::Image */}
|
||||
<div
|
||||
className='bgi-no-repeat bgi-size-cover rounded min-h-250px mb-5'
|
||||
style={{
|
||||
backgroundImage: `url('${toAbsoluteUrl('media/stock/900x600/20.jpg')}')`,
|
||||
}}
|
||||
></div>
|
||||
{/* end::Image */}
|
||||
|
||||
{/* begin::Text */}
|
||||
<div className='text-gray-800 mb-5'>
|
||||
Outlines keep you honest. They stop you from indulging in poorly thought-out metaphors
|
||||
about driving and keep you focused on the overall structure of your post
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-light btn-color-muted btn-active-light-success px-4 py-2 me-4'
|
||||
>
|
||||
<KTIcon iconName='message-text-2' className='fs-3' />
|
||||
89
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-light btn-color-muted btn-active-light-danger px-4 py-2'
|
||||
>
|
||||
<KTIcon iconName='heart' className='fs-2' />
|
||||
29
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Post */}
|
||||
|
||||
{/* begin::Separator */}
|
||||
<div className='separator mb-4'></div>
|
||||
{/* end::Separator */}
|
||||
|
||||
{/* begin::Reply input */}
|
||||
<form className='position-relative mb-6'>
|
||||
<textarea
|
||||
className='form-control border-0 p-0 pe-10 resize-none min-h-25px'
|
||||
rows={1}
|
||||
placeholder='Reply..'
|
||||
></textarea>
|
||||
|
||||
<div className='position-absolute top-0 end-0 me-n5'>
|
||||
<span className='btn btn-icon btn-sm btn-active-color-primary pe-0 me-2'>
|
||||
<KTIcon iconName='paper-clip' className='fs-3 mb-3' />
|
||||
</span>
|
||||
|
||||
<span className='btn btn-icon btn-sm btn-active-color-primary ps-0'>
|
||||
<KTIcon iconName='geolocation' className='fs-2 mb-3' />
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
{/* edit::Reply input */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {FeedsWidget5}
|
||||
@@ -0,0 +1,124 @@
|
||||
|
||||
import React from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const FeedsWidget6: React.FC<Props> = ({className}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pb-0'>
|
||||
{/* begin::Header */}
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
{/* begin::User */}
|
||||
<div className='d-flex align-items-center flex-grow-1'>
|
||||
{/* begin::Avatar */}
|
||||
<div className='symbol symbol-45px me-5'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-13.jpg')} alt='' />
|
||||
</div>
|
||||
{/* end::Avatar */}
|
||||
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fs-6 fw-bold'>
|
||||
Mat Dillon
|
||||
</a>
|
||||
<span className='text-gray-500 fw-semibold'>Last month</span>
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
</div>
|
||||
{/* end::User */}
|
||||
|
||||
{/* begin::Menu */}
|
||||
<div className='my-0'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
</div>
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Post */}
|
||||
<div className='mb-6'>
|
||||
{/* begin::Text */}
|
||||
<div className='text-gray-800 fs-6 fw-normal mb-5'>
|
||||
Outlines keep you honest. They stop you from indulging in poorly thought-out metaphors
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
|
||||
{/* begin::Video */}
|
||||
<div className='mb-5'>
|
||||
<iframe
|
||||
title='widget11-video'
|
||||
className='embed-responsive-item rounded h-300px w-100'
|
||||
src='https://www.youtube.com/embed/qIHXpnASPAA'
|
||||
allowFullScreen={true}
|
||||
/>
|
||||
</div>
|
||||
{/* end::Video */}
|
||||
|
||||
{/* begin::Toolbar */}
|
||||
<div className='d-flex align-items-center mb-5'>
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-light btn-color-muted btn-active-light-success px-4 py-2 me-4'
|
||||
>
|
||||
<KTIcon iconName='message-text-2' className='fs-3' />
|
||||
189
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-light btn-color-muted btn-active-light-danger px-4 py-2'
|
||||
>
|
||||
<KTIcon iconName='heart' className='fs-2' />
|
||||
229
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Toolbar */}
|
||||
</div>
|
||||
{/* end::Bottom */}
|
||||
|
||||
{/* begin::Separator */}
|
||||
<div className='separator mb-4'></div>
|
||||
{/* end::Separator */}
|
||||
|
||||
{/* begin::Reply input */}
|
||||
<form className='position-relative mb-6'>
|
||||
<textarea
|
||||
className='form-control border-0 p-0 pe-10 resize-none min-h-25px'
|
||||
data-kt-autosize='true'
|
||||
rows={1}
|
||||
placeholder='Reply..'
|
||||
></textarea>
|
||||
|
||||
<div className='position-absolute top-0 end-0 me-n5'>
|
||||
<span className='btn btn-icon btn-sm btn-active-color-primary pe-0 me-2'>
|
||||
<KTIcon iconName='paper-clip' className='fs-3 mb-3' />
|
||||
</span>
|
||||
|
||||
<span className='btn btn-icon btn-sm btn-active-color-primary ps-0'>
|
||||
<KTIcon iconName='geolocation' className='fs-2 mb-3' />
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
{/* edit::Reply input */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {FeedsWidget6}
|
||||
@@ -0,0 +1,92 @@
|
||||
// charts
|
||||
export * from './feeds/FeedsWidget2'
|
||||
export * from './feeds/FeedsWidget3'
|
||||
export * from './feeds/FeedsWidget4'
|
||||
export * from './feeds/FeedsWidget5'
|
||||
export * from './feeds/FeedsWidget6'
|
||||
|
||||
// mixed
|
||||
export * from './mixed/MixedWidget1'
|
||||
export * from './mixed/MixedWidget2'
|
||||
export * from './mixed/MixedWidget3'
|
||||
export * from './mixed/MixedWidget4'
|
||||
export * from './mixed/MixedWidget5'
|
||||
export * from './mixed/MixedWidget6'
|
||||
export * from './mixed/MixedWidget7'
|
||||
export * from './mixed/MixedWidget8'
|
||||
export * from './mixed/MixedWidget9'
|
||||
export * from './mixed/MixedWidget10'
|
||||
export * from './mixed/MixedWidget11'
|
||||
export * from './mixed/MixedWidget13'
|
||||
export * from './mixed/MixedWidget14'
|
||||
export * from './mixed/MixedWidget15'
|
||||
|
||||
// lists
|
||||
export * from './lists/ListsWidget1'
|
||||
export * from './lists/ListsWidget2'
|
||||
export * from './lists/ListsWidget3'
|
||||
export * from './lists/ListsWidget4'
|
||||
export * from './lists/ListsWidget5'
|
||||
export * from './lists/ListsWidget6'
|
||||
export * from './lists/ListsWidget7'
|
||||
export * from './lists/ListsWidget8'
|
||||
export * from './lists/ListsWidget9'
|
||||
|
||||
// statistics
|
||||
export * from './statistics/StatisticsWidget1'
|
||||
export * from './statistics/StatisticsWidget2'
|
||||
export * from './statistics/StatisticsWidget3'
|
||||
export * from './statistics/StatisticsWidget4'
|
||||
export * from './statistics/StatisticsWidget5'
|
||||
export * from './statistics/StatisticsWidget6'
|
||||
|
||||
// charts
|
||||
export * from './charts/ChartsWidget1'
|
||||
export * from './charts/ChartsWidget2'
|
||||
export * from './charts/ChartsWidget3'
|
||||
export * from './charts/ChartsWidget4'
|
||||
export * from './charts/ChartsWidget5'
|
||||
export * from './charts/ChartsWidget6'
|
||||
export * from './charts/ChartsWidget7'
|
||||
export * from './charts/ChartsWidget8'
|
||||
|
||||
// tables
|
||||
export * from './tables/TablesWidget1'
|
||||
export * from './tables/TablesWidget2'
|
||||
export * from './tables/TablesWidget3'
|
||||
export * from './tables/TablesWidget4'
|
||||
export * from './tables/TablesWidget5'
|
||||
export * from './tables/TablesWidget6'
|
||||
export * from './tables/TablesWidget7'
|
||||
export * from './tables/TablesWidget8'
|
||||
export * from './tables/TablesWidget9'
|
||||
export * from './tables/TablesWidget10'
|
||||
export * from './tables/TablesWidget11'
|
||||
export * from './tables/TablesWidget12'
|
||||
export * from './tables/TablesWidget13'
|
||||
|
||||
// engage
|
||||
export * from './engage/EngageWidget1'
|
||||
export * from './engage/EngageWidget2'
|
||||
export * from './engage/EngageWidget3'
|
||||
|
||||
// feeds
|
||||
export * from './feeds/FeedsWidget2'
|
||||
export * from './feeds/FeedsWidget3'
|
||||
export * from './feeds/FeedsWidget4'
|
||||
|
||||
// tiles
|
||||
export * from './tiles/TilesWidget1'
|
||||
export * from './tiles/TilesWidget2'
|
||||
export * from './tiles/TilesWidget3'
|
||||
export * from './tiles/TilesWidget4'
|
||||
export * from './tiles/TilesWidget5'
|
||||
|
||||
// new
|
||||
export * from './_new/cards/CardsWidget7'
|
||||
export * from './_new/cards/CardsWidget17'
|
||||
export * from './_new/cards/CardsWidget20'
|
||||
|
||||
export * from './_new/lists/ListsWidget26'
|
||||
|
||||
export * from './_new/engage/EngageWidget10'
|
||||
@@ -0,0 +1,140 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ListsWidget1: FC<Props> = ({className}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0 pt-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold text-gray-900'>Tasks Overview</span>
|
||||
<span className='text-muted mt-1 fw-semibold fs-7'>Pending 10 tasks</span>
|
||||
</h3>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pt-5'>
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<span className='symbol-label bg-light-success'>
|
||||
<KTIcon iconName='abstract-26' className='fs-2x text-success' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Text */}
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='#' className='text-gray-900 text-hover-primary fs-6 fw-bold'>
|
||||
Project Briefing
|
||||
</a>
|
||||
<span className='text-muted fw-semibold'>Project Manager</span>
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<span className='symbol-label bg-light-warning'>
|
||||
<KTIcon iconName='pencil' className='fs-2x text-warning' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Text */}
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='#' className='text-gray-900 text-hover-primary fs-6 fw-bold'>
|
||||
Concept Design
|
||||
</a>
|
||||
<span className='text-muted fw-semibold'>Art Director</span>
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<span className='symbol-label bg-light-primary'>
|
||||
<KTIcon iconName='message-text-2' className='fs-2x text-primary' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Text */}
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='#' className='text-gray-900 text-hover-primary fs-6 fw-bold'>
|
||||
Functional Logics
|
||||
</a>
|
||||
<span className='text-muted fw-semibold'>Lead Developer</span>
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<span className='symbol-label bg-light-danger'>
|
||||
<KTIcon iconName='disconnect' className='fs-2x text-danger' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Text */}
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='#' className='text-gray-900 text-hover-primary fs-6 fw-bold'>
|
||||
Development
|
||||
</a>
|
||||
<span className='text-muted fw-semibold'>DevOps</span>
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<span className='symbol-label bg-light-info'>
|
||||
<KTIcon iconName='security-user' className='fs-2x text-info' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Text */}
|
||||
<div className='d-flex flex-column'>
|
||||
<a href='#' className='text-gray-900 text-hover-primary fs-6 fw-bold'>
|
||||
Testing
|
||||
</a>
|
||||
<span className='text-muted fw-semibold'>QA Managers</span>
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ListsWidget1}
|
||||
@@ -0,0 +1,125 @@
|
||||
|
||||
import React from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ListsWidget2: React.FC<Props> = ({className}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0'>
|
||||
<h3 className='card-title fw-bold text-gray-900'>Authors</h3>
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pt-2'>
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-7'>
|
||||
{/* begin::Avatar */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-6.jpg')} className='' alt='' />
|
||||
</div>
|
||||
{/* end::Avatar */}
|
||||
{/* begin::Text */}
|
||||
<div className='flex-grow-1'>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'>
|
||||
Emma Smith
|
||||
</a>
|
||||
<span className='text-muted d-block fw-semibold'>Project Manager</span>
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-7'>
|
||||
{/* begin::Avatar */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-5.jpg')} className='' alt='' />
|
||||
</div>
|
||||
{/* end::Avatar */}
|
||||
{/* begin::Text */}
|
||||
<div className='flex-grow-1'>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'>
|
||||
Sean Bean
|
||||
</a>
|
||||
<span className='text-muted d-block fw-semibold'>PHP, SQLite, Artisan CLI</span>
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-7'>
|
||||
{/* begin::Avatar */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-11.jpg')} className='' alt='' />
|
||||
</div>
|
||||
{/* end::Avatar */}
|
||||
{/* begin::Text */}
|
||||
<div className='flex-grow-1'>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'>
|
||||
Brian Cox
|
||||
</a>
|
||||
<span className='text-muted d-block fw-semibold'>PHP, SQLite, Artisan CLI</span>
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-7'>
|
||||
{/* begin::Avatar */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-9.jpg')} className='' alt='' />
|
||||
</div>
|
||||
{/* end::Avatar */}
|
||||
{/* begin::Text */}
|
||||
<div className='flex-grow-1'>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'>
|
||||
Francis Mitcham
|
||||
</a>
|
||||
<span className='text-muted d-block fw-semibold'>PHP, SQLite, Artisan CLI</span>
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin::Avatar */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-23.jpg')} className='' alt='' />
|
||||
</div>
|
||||
{/* end::Avatar */}
|
||||
{/* begin::Text */}
|
||||
<div className='flex-grow-1'>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'>
|
||||
Dan Wilson
|
||||
</a>
|
||||
<span className='text-muted d-block fw-semibold'>PHP, SQLite, Artisan CLI</span>
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ListsWidget2}
|
||||
@@ -0,0 +1,166 @@
|
||||
|
||||
import React from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ListsWidget3: React.FC<Props> = ({className}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0'>
|
||||
<h3 className='card-title fw-bold text-gray-900'>Todo</h3>
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pt-2'>
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-8'>
|
||||
{/* begin::Bullet */}
|
||||
<span className='bullet bullet-vertical h-40px bg-success'></span>
|
||||
{/* end::Bullet */}
|
||||
{/* begin::Checkbox */}
|
||||
<div className='form-check form-check-custom form-check-solid mx-5'>
|
||||
<input className='form-check-input' type='checkbox' value='' />
|
||||
</div>
|
||||
{/* end::Checkbox */}
|
||||
{/* begin::Description */}
|
||||
<div className='flex-grow-1'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fw-bold fs-6'>
|
||||
Create FireStone Logo
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 2 Days</span>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
<span className='badge badge-light-success fs-8 fw-bold'>New</span>
|
||||
</div>
|
||||
{/* end:Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-8'>
|
||||
{/* begin::Bullet */}
|
||||
<span className='bullet bullet-vertical h-40px bg-primary'></span>
|
||||
{/* end::Bullet */}
|
||||
{/* begin::Checkbox */}
|
||||
<div className='form-check form-check-custom form-check-solid mx-5'>
|
||||
<input className='form-check-input' type='checkbox' value='' />
|
||||
</div>
|
||||
{/* end::Checkbox */}
|
||||
{/* begin::Description */}
|
||||
<div className='flex-grow-1'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fw-bold fs-6'>
|
||||
Stakeholder Meeting
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 3 Days</span>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
<span className='badge badge-light-primary fs-8 fw-bold'>New</span>
|
||||
</div>
|
||||
{/* end:Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-8'>
|
||||
{/* begin::Bullet */}
|
||||
<span className='bullet bullet-vertical h-40px bg-warning'></span>
|
||||
{/* end::Bullet */}
|
||||
{/* begin::Checkbox */}
|
||||
<div className='form-check form-check-custom form-check-solid mx-5'>
|
||||
<input className='form-check-input' type='checkbox' value='' />
|
||||
</div>
|
||||
{/* end::Checkbox */}
|
||||
{/* begin::Description */}
|
||||
<div className='flex-grow-1'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fw-bold fs-6'>
|
||||
Scoping & Estimations
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 5 Days</span>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
<span className='badge badge-light-warning fs-8 fw-bold'>New</span>
|
||||
</div>
|
||||
{/* end:Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-8'>
|
||||
{/* begin::Bullet */}
|
||||
<span className='bullet bullet-vertical h-40px bg-primary'></span>
|
||||
{/* end::Bullet */}
|
||||
{/* begin::Checkbox */}
|
||||
<div className='form-check form-check-custom form-check-solid mx-5'>
|
||||
<input className='form-check-input' type='checkbox' value='' />
|
||||
</div>
|
||||
{/* end::Checkbox */}
|
||||
{/* begin::Description */}
|
||||
<div className='flex-grow-1'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fw-bold fs-6'>
|
||||
KPI App Showcase
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 2 Days</span>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
<span className='badge badge-light-primary fs-8 fw-bold'>New</span>
|
||||
</div>
|
||||
{/* end:Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-8'>
|
||||
{/* begin::Bullet */}
|
||||
<span className='bullet bullet-vertical h-40px bg-danger'></span>
|
||||
{/* end::Bullet */}
|
||||
{/* begin::Checkbox */}
|
||||
<div className='form-check form-check-custom form-check-solid mx-5'>
|
||||
<input className='form-check-input' type='checkbox' value='' />
|
||||
</div>
|
||||
{/* end::Checkbox */}
|
||||
{/* begin::Description */}
|
||||
<div className='flex-grow-1'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fw-bold fs-6'>
|
||||
Project Meeting
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 12 Days</span>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
<span className='badge badge-light-danger fs-8 fw-bold'>New</span>
|
||||
</div>
|
||||
{/* end:Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin::Bullet */}
|
||||
<span className='bullet bullet-vertical h-40px bg-success'></span>
|
||||
{/* end::Bullet */}
|
||||
{/* begin::Checkbox */}
|
||||
<div className='form-check form-check-custom form-check-solid mx-5'>
|
||||
<input className='form-check-input' type='checkbox' value='' />
|
||||
</div>
|
||||
{/* end::Checkbox */}
|
||||
{/* begin::Description */}
|
||||
<div className='flex-grow-1'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fw-bold fs-6'>
|
||||
Customers Update
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 1 week</span>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
<span className='badge badge-light-success fs-8 fw-bold'>New</span>
|
||||
</div>
|
||||
{/* end:Item */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ListsWidget3}
|
||||
@@ -0,0 +1,204 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
items?: number
|
||||
}
|
||||
|
||||
const ListsWidget4: FC<Props> = ({items = 6}) => {
|
||||
return (
|
||||
<div className='card card-xl-stretch mb-xl-8'>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0 pt-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold text-gray-900'>Trends</span>
|
||||
<span className='text-muted mt-1 fw-semibold fs-7'>Latest tech trends</span>
|
||||
</h3>
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pt-5'>
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-sm-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<span className='symbol-label'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/plurk.svg')}
|
||||
className='h-50 align-self-center'
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center flex-row-fluid flex-wrap'>
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fs-6 fw-bold'>
|
||||
Top Authors
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block fs-7'>Mark, Rowling, Esther</span>
|
||||
</div>
|
||||
<span className='badge badge-light fw-bold my-2'>+82$</span>
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-sm-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<span className='symbol-label'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/telegram.svg')}
|
||||
className='h-50 align-self-center'
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center flex-row-fluid flex-wrap'>
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fs-6 fw-bold'>
|
||||
Popular Authors
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block fs-7'>Randy, Steve, Mike</span>
|
||||
</div>
|
||||
<span className='badge badge-light fw-bold my-2'>+280$</span>
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-sm-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<span className='symbol-label'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/vimeo.svg')}
|
||||
className='h-50 align-self-center'
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center flex-row-fluid flex-wrap'>
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fs-6 fw-bold'>
|
||||
New Users
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block fs-7'>John, Pat, Jimmy</span>
|
||||
</div>
|
||||
<span className='badge badge-light fw-bold my-2'>+4500$</span>
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-sm-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<span className='symbol-label'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/bebo.svg')}
|
||||
className='h-50 align-self-center'
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center flex-row-fluid flex-wrap'>
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fs-6 fw-bold'>
|
||||
Active Customers
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block fs-7'>Mark, Rowling, Esther</span>
|
||||
</div>
|
||||
<span className='badge badge-light fw-bold my-2'>+4500$</span>
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
|
||||
{items > 4 && (
|
||||
<div className='d-flex align-items-sm-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<span className='symbol-label'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/kickstarter.svg')}
|
||||
className='h-50 align-self-center'
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center flex-row-fluid flex-wrap'>
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fs-6 fw-bold'>
|
||||
Bestseller Theme
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block fs-7'>Disco, Retro, Sports</span>
|
||||
</div>
|
||||
<span className='badge badge-light fw-bold my-2'>+4500$</span>
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{items > 5 && (
|
||||
<div className='d-flex align-items-sm-center'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-5'>
|
||||
<span className='symbol-label'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/fox-hub.svg')}
|
||||
className='h-50 align-self-center'
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center flex-row-fluid flex-wrap'>
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fs-6 fw-bold'>
|
||||
Fox Broker App
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block fs-7'>
|
||||
Finance, Corporate, Apps
|
||||
</span>
|
||||
</div>
|
||||
<span className='badge badge-light fw-bold my-2'>+4500$</span>
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ListsWidget4}
|
||||
@@ -0,0 +1,195 @@
|
||||
|
||||
import React from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ListsWidget5: React.FC<Props> = ({className}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header align-items-center border-0 mt-4'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='fw-bold mb-2 text-gray-900'>Activities</span>
|
||||
<span className='text-muted fw-semibold fs-7'>890,344 Sales</span>
|
||||
</h3>
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pt-5'>
|
||||
{/* begin::Timeline */}
|
||||
<div className='timeline-label'>
|
||||
{/* begin::Item */}
|
||||
<div className='timeline-item'>
|
||||
{/* begin::Label */}
|
||||
<div className='timeline-label fw-bold text-gray-800 fs-6'>08:42</div>
|
||||
{/* end::Label */}
|
||||
{/* begin::Badge */}
|
||||
<div className='timeline-badge'>
|
||||
<i className='fa fa-genderless text-warning fs-1'></i>
|
||||
</div>
|
||||
{/* end::Badge */}
|
||||
{/* begin::Text */}
|
||||
<div className='fw-mormal timeline-content text-muted ps-3'>
|
||||
Outlines keep you honest. And keep structure
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='timeline-item'>
|
||||
{/* begin::Label */}
|
||||
<div className='timeline-label fw-bold text-gray-800 fs-6'>10:00</div>
|
||||
{/* end::Label */}
|
||||
{/* begin::Badge */}
|
||||
<div className='timeline-badge'>
|
||||
<i className='fa fa-genderless text-success fs-1'></i>
|
||||
</div>
|
||||
{/* end::Badge */}
|
||||
{/* begin::Content */}
|
||||
<div className='timeline-content d-flex'>
|
||||
<span className='fw-bold text-gray-800 ps-3'>AEOL meeting</span>
|
||||
</div>
|
||||
{/* end::Content */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='timeline-item'>
|
||||
{/* begin::Label */}
|
||||
<div className='timeline-label fw-bold text-gray-800 fs-6'>14:37</div>
|
||||
{/* end::Label */}
|
||||
{/* begin::Badge */}
|
||||
<div className='timeline-badge'>
|
||||
<i className='fa fa-genderless text-danger fs-1'></i>
|
||||
</div>
|
||||
{/* end::Badge */}
|
||||
{/* begin::Desc */}
|
||||
<div className='timeline-content fw-bold text-gray-800 ps-3'>
|
||||
Make deposit
|
||||
<a href='#' className='text-primary'>
|
||||
USD 700
|
||||
</a>
|
||||
. to ESL
|
||||
</div>
|
||||
{/* end::Desc */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='timeline-item'>
|
||||
{/* begin::Label */}
|
||||
<div className='timeline-label fw-bold text-gray-800 fs-6'>16:50</div>
|
||||
{/* end::Label */}
|
||||
{/* begin::Badge */}
|
||||
<div className='timeline-badge'>
|
||||
<i className='fa fa-genderless text-primary fs-1'></i>
|
||||
</div>
|
||||
{/* end::Badge */}
|
||||
{/* begin::Text */}
|
||||
<div className='timeline-content fw-mormal text-muted ps-3'>
|
||||
Indulging in poorly driving and keep structure keep great
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='timeline-item'>
|
||||
{/* begin::Label */}
|
||||
<div className='timeline-label fw-bold text-gray-800 fs-6'>21:03</div>
|
||||
{/* end::Label */}
|
||||
{/* begin::Badge */}
|
||||
<div className='timeline-badge'>
|
||||
<i className='fa fa-genderless text-danger fs-1'></i>
|
||||
</div>
|
||||
{/* end::Badge */}
|
||||
{/* begin::Desc */}
|
||||
<div className='timeline-content fw-semibold text-gray-800 ps-3'>
|
||||
New order placed
|
||||
<a href='#' className='text-primary'>
|
||||
#XF-2356
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
{/* end::Desc */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='timeline-item'>
|
||||
{/* begin::Label */}
|
||||
<div className='timeline-label fw-bold text-gray-800 fs-6'>16:50</div>
|
||||
{/* end::Label */}
|
||||
{/* begin::Badge */}
|
||||
<div className='timeline-badge'>
|
||||
<i className='fa fa-genderless text-primary fs-1'></i>
|
||||
</div>
|
||||
{/* end::Badge */}
|
||||
{/* begin::Text */}
|
||||
<div className='timeline-content fw-mormal text-muted ps-3'>
|
||||
Indulging in poorly driving and keep structure keep great
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='timeline-item'>
|
||||
{/* begin::Label */}
|
||||
<div className='timeline-label fw-bold text-gray-800 fs-6'>21:03</div>
|
||||
{/* end::Label */}
|
||||
{/* begin::Badge */}
|
||||
<div className='timeline-badge'>
|
||||
<i className='fa fa-genderless text-danger fs-1'></i>
|
||||
</div>
|
||||
{/* end::Badge */}
|
||||
{/* begin::Desc */}
|
||||
<div className='timeline-content fw-semibold text-gray-800 ps-3'>
|
||||
New order placed
|
||||
<a href='#' className='text-primary'>
|
||||
#XF-2356
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
{/* end::Desc */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='timeline-item'>
|
||||
{/* begin::Label */}
|
||||
<div className='timeline-label fw-bold text-gray-800 fs-6'>10:30</div>
|
||||
{/* end::Label */}
|
||||
{/* begin::Badge */}
|
||||
<div className='timeline-badge'>
|
||||
<i className='fa fa-genderless text-success fs-1'></i>
|
||||
</div>
|
||||
{/* end::Badge */}
|
||||
{/* begin::Text */}
|
||||
<div className='timeline-content fw-mormal text-muted ps-3'>
|
||||
Finance KPI Mobile app launch preparion meeting
|
||||
</div>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
</div>
|
||||
{/* end::Timeline */}
|
||||
</div>
|
||||
{/* end: Card Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ListsWidget5}
|
||||
@@ -0,0 +1,120 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ListsWidget6: FC<Props> = () => {
|
||||
return (
|
||||
<div className='card card-xl-stretch mb-5 mb-xl-8'>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0'>
|
||||
<h3 className='card-title fw-bold text-gray-900'>Notifications</h3>
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pt-0'>
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center bg-light-warning rounded p-5 mb-7'>
|
||||
{/* begin::Icon */}
|
||||
<span className=' text-warning me-5'>
|
||||
<KTIcon iconName='abstract-26' className='text-warning fs-1 me-5' />
|
||||
</span>
|
||||
{/* end::Icon */}
|
||||
{/* begin::Title */}
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='fw-bold text-gray-800 text-hover-primary fs-6'>
|
||||
Group lunch celebration
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 2 Days</span>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Lable */}
|
||||
<span className='fw-bold text-warning py-1'>+28%</span>
|
||||
{/* end::Lable */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center bg-light-success rounded p-5 mb-7'>
|
||||
{/* begin::Icon */}
|
||||
<span className=' text-success me-5'>
|
||||
<KTIcon iconName='abstract-26' className='text-success fs-1 me-5' />
|
||||
</span>
|
||||
{/* end::Icon */}
|
||||
{/* begin::Title */}
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='fw-bold text-gray-800 text-hover-primary fs-6'>
|
||||
Navigation optimization
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 2 Days</span>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Lable */}
|
||||
<span className='fw-bold text-success py-1'>+50%</span>
|
||||
{/* end::Lable */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center bg-light-danger rounded p-5 mb-7'>
|
||||
{/* begin::Icon */}
|
||||
<span className=' text-danger me-5'>
|
||||
<KTIcon iconName='abstract-26' className='text-danger fs-1 me-5' />
|
||||
</span>
|
||||
{/* end::Icon */}
|
||||
{/* begin::Title */}
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='fw-bold text-gray-800 text-hover-primary fs-6'>
|
||||
Rebrand strategy planning
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 5 Days</span>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Lable */}
|
||||
<span className='fw-bold text-danger py-1'>-27%</span>
|
||||
{/* end::Lable */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center bg-light-info rounded p-5'>
|
||||
{/* begin::Icon */}
|
||||
<span className=' text-info me-5'>
|
||||
<KTIcon iconName='abstract-26' className='text-info fs-1 me-5' />
|
||||
</span>
|
||||
{/* end::Icon */}
|
||||
{/* begin::Title */}
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='fw-bold text-gray-800 text-hover-primary fs-6'>
|
||||
Product goals strategy
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 7 Days</span>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Lable */}
|
||||
<span className='fw-bold text-info py-1'>+8%</span>
|
||||
{/* end::Lable */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ListsWidget6}
|
||||
@@ -0,0 +1,135 @@
|
||||
|
||||
import React from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ListsWidget7: React.FC<Props> = () => {
|
||||
return (
|
||||
<div className='card card-xl-stretch mb-xl-8'>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header align-items-center border-0 mt-4'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='fw-bold text-gray-900'>Latest Media</span>
|
||||
<span className='text-muted mt-1 fw-semibold fs-7'>Articles and publications</span>
|
||||
</h3>
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pt-3'>
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-sm-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-60px symbol-2by3 me-4'>
|
||||
<div
|
||||
className='symbol-label'
|
||||
style={{backgroundImage: `url(${toAbsoluteUrl('media/stock/600x400/img-20.jpg')})`}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Title */}
|
||||
<div className='d-flex flex-row-fluid flex-wrap align-items-center'>
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='text-gray-800 fw-bold text-hover-primary fs-6'>
|
||||
Cup & Green
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block pt-1'>Size: 87KB</span>
|
||||
</div>
|
||||
<span className='badge badge-light-success fs-8 fw-bold my-2'>Approved</span>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-sm-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-60px symbol-2by3 me-4'>
|
||||
<div
|
||||
className='symbol-label'
|
||||
style={{backgroundImage: `url(${toAbsoluteUrl('media/stock/600x400/img-19.jpg')})`}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Title */}
|
||||
<div className='d-flex flex-row-fluid flex-wrap align-items-center'>
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='text-gray-800 fw-bold text-hover-primary fs-6'>
|
||||
Yellow Background
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block pt-1'>Size: 1.2MB</span>
|
||||
</div>
|
||||
<span className='badge badge-light-warning fs-8 fw-bold my-2'>In Progress</span>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-sm-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-60px symbol-2by3 me-4'>
|
||||
<div
|
||||
className='symbol-label'
|
||||
style={{backgroundImage: `url(${toAbsoluteUrl('media/stock/600x400/img-25.jpg')})`}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Title */}
|
||||
<div className='d-flex flex-row-fluid flex-wrap align-items-center'>
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='text-gray-800 fw-bold text-hover-primary fs-6'>
|
||||
Nike & Blue
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block pt-1'>Size: 87KB</span>
|
||||
</div>
|
||||
<span className='badge badge-light-success fs-8 fw-bold my-2'>Success</span>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-sm-center'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-60px symbol-2by3 me-4'>
|
||||
<div
|
||||
className='symbol-label'
|
||||
style={{backgroundImage: `url(${toAbsoluteUrl('media/stock/600x400/img-24.jpg')}`}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Title */}
|
||||
<div className='d-flex flex-row-fluid flex-wrap align-items-center'>
|
||||
<div className='flex-grow-1 me-2'>
|
||||
<a href='#' className='text-gray-800 fw-bold text-hover-primary fs-6'>
|
||||
Red Boots
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block pt-1'>Size: 345KB</span>
|
||||
</div>
|
||||
<span className='badge badge-light-danger fs-8 fw-bold my-2'>Rejected</span>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ListsWidget7}
|
||||
@@ -0,0 +1,186 @@
|
||||
import { FC } from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ListsWidget8: FC<Props> = () => {
|
||||
return (
|
||||
<div className='card card-xl-stretch mb-5 mb-xl-8'>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header align-items-center border-0 mt-4'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='fw-bold text-gray-900'>Latest Products</span>
|
||||
<span className='text-muted mt-1 fw-semibold fs-7'>Gifts and more</span>
|
||||
</h3>
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pt-3'>
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-sm-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-60px symbol-2by3 me-4'>
|
||||
<div
|
||||
className='symbol-label'
|
||||
style={{backgroundImage: `url(${toAbsoluteUrl('media/stock/600x400/img-17.jpg')})`}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Content */}
|
||||
<div className='d-flex flex-row-fluid align-items-center flex-wrap my-lg-0 me-2'>
|
||||
{/* begin::Title */}
|
||||
<div className='flex-grow-1 my-lg-0 my-2 me-2'>
|
||||
<a href='#' className='text-gray-800 fw-bold text-hover-primary fs-6'>
|
||||
Cup & Green
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block pt-1'>Visually stunning</span>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='me-6'>
|
||||
<i className='fa fa-star-half-alt me-1 text-warning fs-5'></i>
|
||||
<span className='text-gray-800 fw-bold'>4.2</span>
|
||||
</div>
|
||||
<a href='#' className='btn btn-icon btn-light btn-sm border-0'>
|
||||
<KTIcon iconName='arrow-right' className='fs-2 text-primary' />
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
</div>
|
||||
{/* end::Content */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-sm-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-60px symbol-2by3 me-4'>
|
||||
<div
|
||||
className='symbol-label'
|
||||
style={{backgroundImage: `url(${toAbsoluteUrl('media/stock/600x400/img-10.jpg')})`}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Content */}
|
||||
<div className='d-flex flex-row-fluid align-items-center flex-wrap my-lg-0 me-2'>
|
||||
{/* begin::Title */}
|
||||
<div className='flex-grow-1 my-lg-0 my-2 me-2'>
|
||||
<a href='#' className='text-gray-800 fw-bold text-hover-primary fs-6'>
|
||||
Pink Patterns
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block pt-1'>Feminine all around</span>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='me-6'>
|
||||
<i className='fa fa-star-half-alt me-1 text-warning fs-5'></i>
|
||||
<span className='text-gray-800 fw-bold'>5.0</span>
|
||||
</div>
|
||||
<a href='#' className='btn btn-icon btn-light btn-sm border-0'>
|
||||
<KTIcon iconName='arrow-right' className='fs-2 text-primary' />
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
</div>
|
||||
{/* end::Content */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-sm-center mb-7'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-60px symbol-2by3 me-4'>
|
||||
<div
|
||||
className='symbol-label'
|
||||
style={{backgroundImage: `url(${toAbsoluteUrl('media/stock/600x400/img-1.jpg')})`}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Content */}
|
||||
<div className='d-flex flex-row-fluid align-items-center flex-wrap my-lg-0 me-2'>
|
||||
{/* begin::Title */}
|
||||
<div className='flex-grow-1 my-lg-0 my-2 me-2'>
|
||||
<a href='#' className='text-gray-800 fw-bold text-hover-primary fs-6'>
|
||||
Abstract Art
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block pt-1'>
|
||||
The will to capture readers
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='me-6'>
|
||||
<i className='fa fa-star-half-alt me-1 text-warning fs-5'></i>
|
||||
<span className='text-gray-800 fw-bold'>5.7</span>
|
||||
</div>
|
||||
<a href='#' className='btn btn-icon btn-light btn-sm border-0'>
|
||||
<KTIcon iconName='arrow-right' className='fs-2 text-primary' />
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
</div>
|
||||
{/* end::Content */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-sm-center'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-60px symbol-2by3 me-4'>
|
||||
<div
|
||||
className='symbol-label'
|
||||
style={{backgroundImage: `url(${toAbsoluteUrl('media/stock/600x400/img-9.jpg')})`}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Content */}
|
||||
<div className='d-flex flex-row-fluid align-items-center flex-wrap my-lg-0 me-2'>
|
||||
{/* begin::Title */}
|
||||
<div className='flex-grow-1 my-lg-0 my-2 me-2'>
|
||||
<a href='#' className='text-gray-800 fw-bold text-hover-primary fs-6'>
|
||||
Desserts platter
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block pt-1'>
|
||||
Food trends & inspirations
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='me-6'>
|
||||
<i className='fa fa-star-half-alt me-1 text-warning fs-5'></i>
|
||||
<span className='text-gray-800 fw-bold'>3.7</span>
|
||||
</div>
|
||||
<a href='#' className='btn btn-icon btn-light btn-sm border-0'>
|
||||
<KTIcon iconName='arrow-right' className='fs-2 text-primary' />
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
</div>
|
||||
{/* end::Content */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ListsWidget8}
|
||||
@@ -0,0 +1,209 @@
|
||||
|
||||
import clsx from 'clsx'
|
||||
import React from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const ListsWidget9: React.FC<Props> = ({className}) => {
|
||||
return (
|
||||
<div className={clsx('card', className)}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header align-items-center border-0 mt-3'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='fw-bolder text-gray-900 fs-3'>My Competitors</span>
|
||||
<span className='text-gray-500 mt-2 fw-bold fs-6'>More than 400+ new members</span>
|
||||
</h3>
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-clean btn-sm btn-icon btn-icon-primary btn-active-light-primary me-n3'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pt-5'>
|
||||
{/*begin::Item*/}
|
||||
<div className='d-flex mb-7'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-60px symbol-2by3 flex-shrink-0 me-4'>
|
||||
<img src={toAbsoluteUrl('media/stock/600x400/img-3.jpg')} className='mw-100' alt='' />
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
{/*begin::Section*/}
|
||||
<div className='d-flex align-items-center flex-wrap flex-grow-1 mt-n2 mt-lg-n1'>
|
||||
{/*begin::Title*/}
|
||||
<div className='d-flex flex-column flex-grow-1 my-lg-0 my-2 pe-3'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bolder'>
|
||||
Cup & Green
|
||||
</a>
|
||||
<span className='text-gray-500 fw-bold fs-7 my-1'>Study highway types</span>
|
||||
<span className='text-gray-500 fw-bold fs-7'>
|
||||
By:
|
||||
<a href='#' className='text-primary fw-bold'>
|
||||
CoreAd
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
{/*begin::Info*/}
|
||||
<div className='text-end py-lg-0 py-2'>
|
||||
<span className='text-gray-800 fw-boldest fs-3'>24,900</span>
|
||||
<span className='text-gray-500 fs-7 fw-bold d-block'>Sales</span>
|
||||
</div>
|
||||
{/*end::Info*/}
|
||||
</div>
|
||||
{/*end::Section*/}
|
||||
</div>
|
||||
{/*end::Item*/}
|
||||
{/*begin::Item*/}
|
||||
<div className='d-flex mb-7'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-60px symbol-2by3 flex-shrink-0 me-4'>
|
||||
<img src={toAbsoluteUrl('media/stock/600x400/img-4.jpg')} className='mw-100' alt='' />
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
{/*begin::Section*/}
|
||||
<div className='d-flex align-items-center flex-wrap flex-grow-1 mt-n2 mt-lg-n1'>
|
||||
{/*begin::Title*/}
|
||||
<div className='d-flex flex-column flex-grow-1 my-lg-0 my-2 pe-3'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bolder'>
|
||||
Yellow Hearts
|
||||
</a>
|
||||
<span className='text-gray-500 fw-bold fs-7 my-1'>Study highway types</span>
|
||||
<span className='text-gray-500 fw-bold fs-7'>
|
||||
By:
|
||||
<a href='#' className='text-primary fw-bold'>
|
||||
KeenThemes
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
{/*begin::Info*/}
|
||||
<div className='text-end py-lg-0 py-2'>
|
||||
<span className='text-gray-800 fw-boldest fs-3'>70,380</span>
|
||||
<span className='text-gray-500 fs-7 fw-bold d-block'>Sales</span>
|
||||
</div>
|
||||
{/*end::Info*/}
|
||||
</div>
|
||||
{/*end::Section*/}
|
||||
</div>
|
||||
{/*end::Item*/}
|
||||
{/*begin::Item*/}
|
||||
<div className='d-flex mb-7'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-60px symbol-2by3 flex-shrink-0 me-4'>
|
||||
<img src={toAbsoluteUrl('media/stock/600x400/img-5.jpg')} className='mw-100' alt='' />
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
{/*begin::Section*/}
|
||||
<div className='d-flex align-items-center flex-wrap flex-grow-1 mt-n2 mt-lg-n1'>
|
||||
{/*begin::Title*/}
|
||||
<div className='d-flex flex-column flex-grow-1 my-lg-0 my-2 pe-3'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bolder'>
|
||||
Nike & Blue
|
||||
</a>
|
||||
<span className='text-gray-500 fw-bold fs-7 my-1'>Study highway types</span>
|
||||
<span className='text-gray-500 fw-bold fs-7'>
|
||||
By:
|
||||
<a href='#' className='text-primary fw-bold'>
|
||||
Invision Inc.
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
{/*begin::Info*/}
|
||||
<div className='text-end py-lg-0 py-2'>
|
||||
<span className='text-gray-800 fw-boldest fs-3'>7,200</span>
|
||||
<span className='text-gray-500 fs-7 fw-bold d-block'>Sales</span>
|
||||
</div>
|
||||
{/*end::Info*/}
|
||||
</div>
|
||||
{/*end::Section*/}
|
||||
</div>
|
||||
{/*end::Item*/}
|
||||
{/*begin::Item*/}
|
||||
<div className='d-flex mb-7'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-60px symbol-2by3 flex-shrink-0 me-4'>
|
||||
<img src={toAbsoluteUrl('media/stock/600x400/img-6.jpg')} className='mw-100' alt='' />
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
{/*begin::Section*/}
|
||||
<div className='d-flex align-items-center flex-wrap flex-grow-1 mt-n2 mt-lg-n1'>
|
||||
{/*begin::Title*/}
|
||||
<div className='d-flex flex-column flex-grow-1 my-lg-0 my-2 pe-3'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bolder'>
|
||||
Red Boots
|
||||
</a>
|
||||
<span className='text-gray-500 fw-bold fs-7 my-1'>Study highway types</span>
|
||||
<span className='text-gray-500 fw-bold fs-7'>
|
||||
By:
|
||||
<a href='#' className='text-primary fw-bold'>
|
||||
Figma Studio
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
{/*begin::Info*/}
|
||||
<div className='text-end py-lg-0 py-2'>
|
||||
<span className='text-gray-800 fw-boldest fs-3'>36,450</span>
|
||||
<span className='text-gray-500 fs-7 fw-bold d-block'>Sales</span>
|
||||
</div>
|
||||
{/*end::Info*/}
|
||||
</div>
|
||||
{/*end::Section*/}
|
||||
</div>
|
||||
{/*end::Item*/}
|
||||
{/*begin::Item*/}
|
||||
<div className='d-flex'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-60px symbol-2by3 flex-shrink-0 me-4'>
|
||||
<img src={toAbsoluteUrl('media/stock/600x400/img-7.jpg')} className='mw-100' alt='' />
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
{/*begin::Section*/}
|
||||
<div className='d-flex align-items-center flex-wrap flex-grow-1 mt-n2 mt-lg-n1'>
|
||||
{/*begin::Title*/}
|
||||
<div className='d-flex flex-column flex-grow-1 my-lg-0 my-2 pe-3'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bolder'>
|
||||
Desserts platter
|
||||
</a>
|
||||
<span className='text-gray-500 fw-bold fs-7 my-1'>Food trends & reviews</span>
|
||||
<span className='text-gray-500 fw-bold fs-7'>
|
||||
By:
|
||||
<a href='#' className='text-primary fw-bold'>
|
||||
Figma Studio
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
{/*begin::Info*/}
|
||||
<div className='text-end py-lg-0 py-2'>
|
||||
<span className='text-gray-800 fw-boldest fs-3'>64,753</span>
|
||||
<span className='text-gray-500 fs-7 fw-bold d-block'>Sales</span>
|
||||
</div>
|
||||
{/*end::Info*/}
|
||||
</div>
|
||||
{/*end::Section*/}
|
||||
</div>
|
||||
{/*end::Item*/}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {ListsWidget9}
|
||||
@@ -0,0 +1,174 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
color: string
|
||||
}
|
||||
|
||||
const MixedWidget1: FC<Props> = ({className, color}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0'>
|
||||
{/* begin::Header */}
|
||||
<div className={`px-9 pt-7 card-rounded h-275px w-100 bg-${color}`}>
|
||||
{/* begin::Heading */}
|
||||
<div className='d-flex flex-stack'>
|
||||
<h3 className='m-0 text-white fw-bold fs-3'>Sales Summary</h3>
|
||||
<div className='ms-1'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className={`btn btn-sm btn-icon btn-color-white btn-active-white btn-active-color-${color} border-0 me-n3`}
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Heading */}
|
||||
{/* begin::Balance */}
|
||||
<div className='d-flex text-center flex-column text-white pt-8'>
|
||||
<span className='fw-semibold fs-7'>You Balance</span>
|
||||
<span className='fw-bold fs-2x pt-1'>$37,562.00</span>
|
||||
</div>
|
||||
{/* end::Balance */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Items */}
|
||||
<div
|
||||
className='shadow-xs card-rounded mx-9 mb-9 px-6 py-9 position-relative z-index-1 bg-body'
|
||||
style={{marginTop: '-100px'}}
|
||||
>
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-6'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-45px w-40px me-5'>
|
||||
<span className='symbol-label bg-lighten'>
|
||||
<KTIcon iconName='compass' className='fs-1' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Description */}
|
||||
<div className='d-flex align-items-center flex-wrap w-100'>
|
||||
{/* begin::Title */}
|
||||
<div className='mb-1 pe-3 flex-grow-1'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bold'>
|
||||
Sales
|
||||
</a>
|
||||
<div className='text-gray-500 fw-semibold fs-7'>100 Regions</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Label */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='fw-bold fs-5 text-gray-800 pe-1'>$2,5b</div>
|
||||
<KTIcon iconName='arrow-up' className='fs-5 text-success ms-1' />
|
||||
</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-6'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-45px w-40px me-5'>
|
||||
<span className='symbol-label bg-lighten'>
|
||||
<KTIcon iconName='category' className='fs-1' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Description */}
|
||||
<div className='d-flex align-items-center flex-wrap w-100'>
|
||||
{/* begin::Title */}
|
||||
<div className='mb-1 pe-3 flex-grow-1'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bold'>
|
||||
Revenue
|
||||
</a>
|
||||
<div className='text-gray-500 fw-semibold fs-7'>Quarter 2/3</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Label */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='fw-bold fs-5 text-gray-800 pe-1'>$1,7b</div>
|
||||
<KTIcon iconName='arrow-down' className='fs-5 text-danger ms-1' />
|
||||
</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-6'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-45px w-40px me-5'>
|
||||
<span className='symbol-label bg-lighten'>
|
||||
<KTIcon iconName='phone' className='fs-1' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Description */}
|
||||
<div className='d-flex align-items-center flex-wrap w-100'>
|
||||
{/* begin::Title */}
|
||||
<div className='mb-1 pe-3 flex-grow-1'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bold'>
|
||||
Growth
|
||||
</a>
|
||||
<div className='text-gray-500 fw-semibold fs-7'>80% Rate</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Label */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='fw-bold fs-5 text-gray-800 pe-1'>$8,8m</div>
|
||||
<KTIcon iconName='arrow-up' className='fs-5 text-success ms-1' />
|
||||
</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-45px w-40px me-5'>
|
||||
<span className='symbol-label bg-lighten'>
|
||||
<KTIcon iconName='document' className='fs-1' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Description */}
|
||||
<div className='d-flex align-items-center flex-wrap w-100'>
|
||||
{/* begin::Title */}
|
||||
<div className='mb-1 pe-3 flex-grow-1'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bold'>
|
||||
Dispute
|
||||
</a>
|
||||
<div className='text-gray-500 fw-semibold fs-7'>3090 Refunds</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Label */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='fw-bold fs-5 text-gray-800 pe-1'>$270m</div>
|
||||
<KTIcon iconName='arrow-down' className='fs-5 text-danger ms-1' />
|
||||
</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
</div>
|
||||
{/* end::Items */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {MixedWidget1}
|
||||
@@ -0,0 +1,192 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget10: FC<Props> = ({className, chartColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartColor, chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column p-0'>
|
||||
{/* begin::Stats */}
|
||||
<div className='flex-grow-1 card-p pb-0'>
|
||||
<div className='d-flex flex-stack flex-wrap'>
|
||||
<div className='me-2'>
|
||||
<a href='#' className='text-gray-900 text-hover-primary fw-bold fs-3'>
|
||||
Generate Reports
|
||||
</a>
|
||||
|
||||
<div className='text-muted fs-7 fw-semibold'>Finance and accounting reports</div>
|
||||
</div>
|
||||
|
||||
<div className={`fw-bold fs-3 text-${chartColor}`}>$24,500</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} className='mixed-widget-7-chart card-rounded-bottom'></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
const strokeColor = getCSSVariableValue('--bs-gray-300')
|
||||
const baseColor = getCSSVariableValue('--bs-' + chartColor)
|
||||
const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [15, 25, 15, 40, 20, 50],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [baseColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: strokeColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 60,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [lightColor],
|
||||
markers: {
|
||||
colors: [lightColor],
|
||||
strokeColors: [baseColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget10}
|
||||
@@ -0,0 +1,180 @@
|
||||
|
||||
import React, {useEffect, useRef} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget11: React.FC<Props> = ({className, chartColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartColor, chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0 d-flex justify-content-between flex-column overflow-hidden'>
|
||||
{/* begin::Hidden */}
|
||||
<div className='d-flex flex-stack flex-wrap flex-grow-1 px-9 pt-9 pb-3'>
|
||||
<div className='me-2'>
|
||||
<span className='fw-bold text-gray-800 d-block fs-3'>Sales</span>
|
||||
|
||||
<span className='text-gray-500 fw-semibold'>Oct 8 - Oct 26 2021</span>
|
||||
</div>
|
||||
|
||||
<div className={`fw-bold fs-3 text-${chartColor}`}>$15,300</div>
|
||||
</div>
|
||||
{/* end::Hidden */}
|
||||
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} className='mixed-widget-10-chart'></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
const secondaryColor = getCSSVariableValue('--bs-gray-300')
|
||||
const baseColor = getCSSVariableValue('--bs-' + chartColor)
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [50, 60, 70, 80, 60, 50, 70, 60],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [50, 60, 70, 80, 60, 50, 70, 60],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'bar',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '50%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' revenue'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [baseColor, secondaryColor],
|
||||
grid: {
|
||||
padding: {
|
||||
top: 10,
|
||||
},
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget11}
|
||||
@@ -0,0 +1,222 @@
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartHeight: string
|
||||
backGroundColor: string
|
||||
}
|
||||
|
||||
const MixedWidget13: FC<Props> = ({className, backGroundColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`card ${className} theme-dark-bg-body`}
|
||||
style={{backgroundColor: backGroundColor}}
|
||||
>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column'>
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex flex-column flex-grow-1'>
|
||||
{/* begin::Title */}
|
||||
<a href='#' className='text-gray-900 text-hover-primary fw-bolder fs-3'>
|
||||
Earnings
|
||||
</a>
|
||||
{/* end::Title */}
|
||||
|
||||
<div
|
||||
ref={chartRef}
|
||||
className='mixed-widget-13-chart'
|
||||
style={{height: chartHeight, minHeight: chartHeight}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
|
||||
{/* begin::Stats */}
|
||||
<div className='pt-5'>
|
||||
{/* begin::Symbol */}
|
||||
<span className='text-gray-900 fw-bolder fs-2x lh-0'>$</span>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Number */}
|
||||
<span className='text-gray-900 fw-bolder fs-3x me-2 lh-0'>560</span>
|
||||
{/* end::Number */}
|
||||
|
||||
{/* begin::Text */}
|
||||
<span className='text-gray-900 fw-bolder fs-6 lh-0'>+ 28% this week</span>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartHeight: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
const strokeColor = getCSSVariableValue('--bs-gray-300') as string
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [15, 25, 15, 40, 20, 50],
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0,
|
||||
stops: [20, 120, 120, 120],
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: ['#FFFFFF'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: strokeColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
formatter: undefined,
|
||||
offsetY: 0,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 60,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: ['#ffffff'],
|
||||
markers: {
|
||||
colors: [labelColor],
|
||||
strokeColors: [strokeColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget13}
|
||||
@@ -0,0 +1,185 @@
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartHeight: string
|
||||
backGroundColor: string
|
||||
}
|
||||
|
||||
const MixedWidget14: FC<Props> = ({className, backGroundColor, chartHeight = '150px'}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`card ${className} theme-dark-bg-body`}
|
||||
style={{backgroundColor: backGroundColor}}
|
||||
>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column'>
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex flex-column flex-grow-1'>
|
||||
{/* begin::Title */}
|
||||
<a href='#' className='text-gray-900 text-hover-primary fw-bolder fs-3'>
|
||||
Contributors
|
||||
</a>
|
||||
|
||||
{/* end::Title */}
|
||||
|
||||
<div
|
||||
ref={chartRef}
|
||||
className='mixed-widget-14-chart'
|
||||
style={{height: chartHeight, minHeight: chartHeight}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
|
||||
{/* begin::Stats */}
|
||||
<div className='pt-5'>
|
||||
{/* begin::Symbol */}
|
||||
<span className='text-gray-900 fw-bolder fs-2x lh-0'>$</span>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Number */}
|
||||
<span className='text-gray-900 fw-bolder fs-3x me-2 lh-0'>47</span>
|
||||
{/* end::Number */}
|
||||
|
||||
{/* begin::Text */}
|
||||
<span className='text-gray-900 fw-bolder fs-6 lh-0'>- 12% this week</span>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartHeight: string): ApexOptions => {
|
||||
// const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Inflation',
|
||||
data: [1, 2.1, 1, 2.1, 4.1, 6.1, 4.1, 4.1, 2.1, 4.1, 2.1, 3.1, 1, 1, 2.1],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
height: chartHeight,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
colors: ['#ffffff'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 2.5,
|
||||
dataLabels: {
|
||||
position: 'top', // top, center, bottom
|
||||
},
|
||||
columnWidth: '20%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
formatter: function (val) {
|
||||
return val + '%'
|
||||
},
|
||||
offsetY: -20,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#304758'],
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Dec',
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
],
|
||||
position: 'top',
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
// background: labelColor,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
formatter: function (val) {
|
||||
return val + '%'
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget14}
|
||||
@@ -0,0 +1,115 @@
|
||||
import {FC} from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
backGroundColor: string
|
||||
}
|
||||
|
||||
const MixedWidget15: FC<Props> = ({className, backGroundColor}) => (
|
||||
<div
|
||||
className={`card ${className} theme-dark-bg-body`}
|
||||
style={{backgroundColor: backGroundColor}}
|
||||
>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column'>
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex flex-column mb-7'>
|
||||
{/* begin::Title */}
|
||||
<a href='#' className='text-gray-900 text-hover-primary fw-bolder fs-3'>
|
||||
Summary
|
||||
</a>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
|
||||
<div className='row g-0'>
|
||||
{/*begin::Col*/}
|
||||
<div className='col-6'>
|
||||
<div className='d-flex align-items-center mb-9 me-2'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-40px me-3'>
|
||||
<div className='symbol-label bg-body bg-opacity-50'>
|
||||
<KTIcon iconName='abstract-42' className='fs-1 text-gray-900' />
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
|
||||
{/*begin::Title*/}
|
||||
<div>
|
||||
<div className='fs-5 text-gray-900 fw-bolder lh-1'>$50K</div>
|
||||
<div className='fs-7 text-gray-600 fw-bold'>Sales</div>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Col*/}
|
||||
|
||||
{/*begin::Col*/}
|
||||
<div className='col-6'>
|
||||
<div className='d-flex align-items-center mb-9 ms-2'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-40px me-3'>
|
||||
<div className='symbol-label bg-body bg-opacity-50'>
|
||||
<KTIcon iconName='abstract-45' className='fs-1 text-gray-900' />
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
|
||||
{/*begin::Title*/}
|
||||
<div>
|
||||
<div className='fs-5 text-gray-900 fw-bolder lh-1'>$4,5K</div>
|
||||
<div className='fs-7 text-gray-600 fw-bold'>Revenue</div>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Col*/}
|
||||
|
||||
{/*begin::Col*/}
|
||||
<div className='col-6'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-40px me-3'>
|
||||
<div className='symbol-label bg-body bg-opacity-50'>
|
||||
<KTIcon iconName='abstract-21' className='fs-1 text-gray-900' />
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
|
||||
{/*begin::Title*/}
|
||||
<div>
|
||||
<div className='fs-5 text-gray-900 fw-bolder lh-1'>40</div>
|
||||
<div className='fs-7 text-gray-600 fw-bold'>Tasks</div>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Col*/}
|
||||
|
||||
{/*begin::Col*/}
|
||||
<div className='col-6'>
|
||||
<div className='d-flex align-items-center ms-2'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-40px me-3'>
|
||||
<div className='symbol-label bg-body bg-opacity-50'>
|
||||
<KTIcon iconName='abstract-44' className='fs-1 text-gray-900' />
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
|
||||
{/*begin::Title*/}
|
||||
<div>
|
||||
<div className='fs-5 text-gray-900 fw-bolder lh-1'>$5.8M</div>
|
||||
<div className='fs-7 text-gray-600 fw-bold'>Sales</div>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Col*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export {MixedWidget15}
|
||||
@@ -0,0 +1,259 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
strokeColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget2: FC<Props> = ({className, chartColor, chartHeight, strokeColor}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(
|
||||
chartRef.current,
|
||||
chartOptions(chartHeight, chartColor, strokeColor)
|
||||
)
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className={`card-header border-0 py-5 bg-${chartColor}`}>
|
||||
<h3 className='card-title fw-bold text-white'>Sales Statistics</h3>
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-white btn-active-white btn-active-color- border-0 me-n3'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0'>
|
||||
{/* begin::Chart */}
|
||||
<div
|
||||
ref={chartRef}
|
||||
className={`mixed-widget-2-chart card-rounded-bottom bg-${chartColor}`}
|
||||
></div>
|
||||
{/* end::Chart */}
|
||||
{/* begin::Stats */}
|
||||
<div className='card-p mt-n20 position-relative'>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0'>
|
||||
{/* begin::Col */}
|
||||
<div className='col bg-light-warning px-6 py-8 rounded-2 me-7 mb-7'>
|
||||
<KTIcon iconName='chart-simple' className='fs-3x text-warning d-block my-2' />
|
||||
<a href='#' className='text-warning fw-semibold fs-6'>
|
||||
Weekly Sales
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
{/* begin::Col */}
|
||||
<div className='col bg-light-primary px-6 py-8 rounded-2 mb-7'>
|
||||
<KTIcon iconName='plus' className='fs-3x text-primary d-block my-2' />
|
||||
<a href='#' className='text-primary fw-semibold fs-6'>
|
||||
New Users
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0'>
|
||||
{/* begin::Col */}
|
||||
<div className='col bg-light-danger px-6 py-8 rounded-2 me-7'>
|
||||
<KTIcon iconName='abstract-26' className='fs-3x text-danger d-block my-2' />
|
||||
<a href='#' className='text-danger fw-semibold fs-6 mt-2'>
|
||||
Item Orders
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
{/* begin::Col */}
|
||||
<div className='col bg-light-success px-6 py-8 rounded-2'>
|
||||
<KTIcon iconName='sms' className='fs-3x text-success d-block my-2' />
|
||||
<a href='#' className='text-success fw-semibold fs-6 mt-2'>
|
||||
Bug Reports
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (
|
||||
chartHeight: string,
|
||||
chartColor: string,
|
||||
strokeColor: string
|
||||
): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
const color = getCSSVariableValue('--bs-' + chartColor)
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [30, 45, 32, 70, 40, 40, 40],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
enabledOnSeries: undefined,
|
||||
top: 5,
|
||||
left: 0,
|
||||
blur: 3,
|
||||
color: strokeColor,
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 0,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [strokeColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: borderColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 80,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: ['transparent'],
|
||||
markers: {
|
||||
colors: [color],
|
||||
strokeColors: [strokeColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget2}
|
||||
@@ -0,0 +1,248 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import clsx from 'clsx'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget3: FC<Props> = ({className, chartColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className={`card-header border-0 bg-${chartColor} py-5`}>
|
||||
<h3 className='card-title fw-bold text-white'>Sales Progress</h3>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className={clsx(
|
||||
'btn btn-sm btn-icon btn-color-white btn-active-white',
|
||||
`btn-active-color-${chartColor}`,
|
||||
'border-0 me-n3'
|
||||
)}
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0'>
|
||||
{/* begin::Chart */}
|
||||
<div
|
||||
ref={chartRef}
|
||||
className={`mixed-widget-12-chart card-rounded-bottom bg-${chartColor}`}
|
||||
></div>
|
||||
{/* end::Chart */}
|
||||
|
||||
{/* begin::Stats */}
|
||||
<div className='card-rounded bg-body mt-n10 position-relative card-px py-15'>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0 mb-7'>
|
||||
{/* begin::Col */}
|
||||
<div className='col mx-5'>
|
||||
<div className='fs-6 text-gray-500'>Avarage Sale</div>
|
||||
<div className='fs-2 fw-bold text-gray-800'>$650</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col mx-5'>
|
||||
<div className='fs-6 text-gray-500'>Comissions</div>
|
||||
<div className='fs-2 fw-bold text-gray-800'>$29,500</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0'>
|
||||
{/* begin::Col */}
|
||||
<div className='col mx-5'>
|
||||
<div className='fs-6 text-gray-500'>Revenue</div>
|
||||
<div className='fs-2 fw-bold text-gray-800'>$55,000</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col mx-5'>
|
||||
<div className='fs-6 text-gray-500'>Expenses</div>
|
||||
<div className='fs-2 fw-bold text-gray-800'>$1,130,600</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartHeight: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [35, 65, 75, 55, 45, 60, 55],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [40, 70, 80, 60, 50, 65, 60],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'bar',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '30%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: ['solid', 'solid'],
|
||||
opacity: [0.25, 1],
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: ['#ffffff', '#ffffff'],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget3}
|
||||
@@ -0,0 +1,120 @@
|
||||
|
||||
import clsx from 'clsx'
|
||||
import React from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
color: string
|
||||
image: string
|
||||
title: string
|
||||
date: string
|
||||
progress: string
|
||||
}
|
||||
|
||||
const MixedWidget4: React.FC<Props> = ({className, color, image, title, date, progress}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body'>
|
||||
{/* begin::Heading */}
|
||||
<div className='d-flex flex-stack'>
|
||||
{/* begin:Info */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin:Image */}
|
||||
<div className='symbol symbol-60px me-5'>
|
||||
<span className={clsx(`symbol-label`, `bg-${color}-light`)}>
|
||||
<img src={toAbsoluteUrl(image)} className='h-50 align-self-center' alt='' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end:Image */}
|
||||
|
||||
{/* begin:Title */}
|
||||
<div className='d-flex flex-column flex-grow-1 my-lg-0 my-2 pr-3'>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-5'>
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<span className='text-muted fw-semibold'>{date}</span>
|
||||
</div>
|
||||
{/* end:Title */}
|
||||
</div>
|
||||
{/* begin:Info */}
|
||||
|
||||
{/* begin:Menu */}
|
||||
<div className='ms-1'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
</div>
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
{/* end::Heading */}
|
||||
|
||||
{/* begin:Stats */}
|
||||
<div className='d-flex flex-column w-100 mt-12'>
|
||||
<span className='text-gray-900 me-2 fw-bold pb-3'>Progress</span>
|
||||
|
||||
<div className='progress h-5px w-100'>
|
||||
<div
|
||||
className={`progress-bar bg-${color}`}
|
||||
role='progressbar'
|
||||
style={{width: progress}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end:Stats */}
|
||||
|
||||
{/* begin:Team */}
|
||||
<div className='d-flex flex-column mt-10'>
|
||||
<div className='text-gray-900 me-2 fw-bold pb-4'>Team</div>
|
||||
|
||||
<div className='d-flex'>
|
||||
<a
|
||||
href='#'
|
||||
className='symbol symbol-35px me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Ana Stone'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-6.jpg')} alt='' />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='symbol symbol-35px me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Mark Larson'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-5.jpg')} alt='' />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='symbol symbol-35px me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Sam Harris'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-9.jpg')} alt='' />
|
||||
</a>
|
||||
|
||||
<a href='#' className='symbol symbol-35px' data-bs-toggle='tooltip' title='Alice Micto'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-10.jpg')} alt='' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* end:Team */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {MixedWidget4}
|
||||
@@ -0,0 +1,78 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
time: string
|
||||
image: string
|
||||
title: string
|
||||
description: string
|
||||
}
|
||||
|
||||
const MixedWidget5: FC<Props> = ({className, time, image, title, description}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column pb-10 pb-lg-15'>
|
||||
<div className='flex-grow-1'>
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex align-items-center pe-2 mb-5'>
|
||||
<span className='text-muted fw-bold fs-5 flex-grow-1'>{time}</span>
|
||||
|
||||
<div className='symbol symbol-50px'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<img src={toAbsoluteUrl(image)} className='h-50 align-self-center' alt='' />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
|
||||
{/* begin::Link */}
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-4'>
|
||||
{title}
|
||||
</a>
|
||||
{/* end::Link */}
|
||||
|
||||
{/* begin::Desc */}
|
||||
<p className='py-3' dangerouslySetInnerHTML={{__html: description}}></p>
|
||||
{/* end::Desc */}
|
||||
</div>
|
||||
|
||||
{/* begin::Team */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<a
|
||||
href='#'
|
||||
className='symbol symbol-35px me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Ana Stone'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-6.jpg')} alt='' />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='symbol symbol-35px me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Mark Larson'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-5.jpg')} alt='' />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='symbol symbol-35px me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Sam Harris'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-9.jpg')} alt='' />
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Team */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {MixedWidget5}
|
||||
@@ -0,0 +1,273 @@
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartHeight: string
|
||||
chartColor: string
|
||||
}
|
||||
|
||||
const MixedWidget6: FC<Props> = ({className, chartHeight, chartColor}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight, chartColor))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Beader */}
|
||||
<div className='card-header border-0 py-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Sales Overview</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>Recent sales statistics</span>
|
||||
</h3>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0 d-flex flex-column'>
|
||||
{/* begin::Stats */}
|
||||
<div className='card-p pt-5 bg-body flex-grow-1'>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0'>
|
||||
{/* begin::Col */}
|
||||
<div className='col mr-8'>
|
||||
{/* begin::Label */}
|
||||
<div className='fs-7 text-muted fw-semibold'>Average Sale</div>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Stat */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='fs-4 fw-bold'>$650</div>
|
||||
<KTIcon iconName='arrow-up' className='fs-5 text-success ms-1' />
|
||||
</div>
|
||||
{/* end::Stat */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col'>
|
||||
{/* begin::Label */}
|
||||
<div className='fs-7 text-muted fw-semibold'>Commission</div>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Stat */}
|
||||
<div className='fs-4 fw-bold'>$233,600</div>
|
||||
{/* end::Stat */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0 mt-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col mr-8'>
|
||||
{/* begin::Label */}
|
||||
<div className='fs-7 text-muted fw-semibold'>Annual Taxes 2019</div>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Stat */}
|
||||
<div className='fs-4 fw-bold'>$29,004</div>
|
||||
{/* end::Stat */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col'>
|
||||
{/* begin::Label */}
|
||||
<div className='fs-7 text-muted fw-semibold'>Annual Income</div>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Stat */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='fs-4 fw-bold'>$1,480,00</div>
|
||||
<KTIcon iconName='arrow-down' className='fs-5 text-danger ms-1' />
|
||||
</div>
|
||||
{/* end::Stat */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
|
||||
{/* begin::Chart */}
|
||||
<div
|
||||
ref={chartRef}
|
||||
className='mixed-widget-3-chart card-rounded-bottom'
|
||||
data-kt-chart-color={chartColor}
|
||||
style={{height: chartHeight}}
|
||||
></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartHeight: string, chartColor: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
const strokeColor = getCSSVariableValue('--bs-gray-300')
|
||||
const baseColor = getCSSVariableValue('--bs-' + chartColor)
|
||||
const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [30, 25, 45, 30, 55, 55],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [baseColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: strokeColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 60,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [lightColor],
|
||||
markers: {
|
||||
colors: [lightColor],
|
||||
strokeColors: [baseColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget6}
|
||||
@@ -0,0 +1,139 @@
|
||||
import React, {useEffect, useRef} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget7: React.FC<Props> = ({className, chartColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartColor, chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Beader */}
|
||||
<div className='card-header border-0 py-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Action Needed</span>
|
||||
<span className='text-muted fw-semibold fs-7'>Complete your profile setup</span>
|
||||
</h3>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column'>
|
||||
<div className='flex-grow-1'>
|
||||
<div ref={chartRef} className='mixed-widget-4-chart'></div>
|
||||
</div>
|
||||
|
||||
<div className='pt-5'>
|
||||
<p className='text-center fs-6 pb-5 '>
|
||||
<span className='badge badge-light-danger fs-8'>Notes:</span> Current sprint
|
||||
requires stakeholders
|
||||
<br />
|
||||
to approve newly amended policies
|
||||
</p>
|
||||
|
||||
<a href='#' className={`btn btn-${chartColor} w-100 py-3`}>
|
||||
Take Action
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {
|
||||
const baseColor = getCSSVariableValue('--bs-' + chartColor)
|
||||
const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light')
|
||||
const labelColor = getCSSVariableValue('--bs-gray-700')
|
||||
|
||||
return {
|
||||
series: [74],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
height: chartHeight,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
margin: 0,
|
||||
size: '65%',
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
fontWeight: '700',
|
||||
},
|
||||
value: {
|
||||
color: labelColor,
|
||||
fontSize: '30px',
|
||||
fontWeight: '700',
|
||||
offsetY: 12,
|
||||
show: true,
|
||||
formatter: function (val) {
|
||||
return val + '%'
|
||||
},
|
||||
},
|
||||
},
|
||||
track: {
|
||||
background: lightColor,
|
||||
strokeWidth: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [baseColor],
|
||||
stroke: {
|
||||
lineCap: 'round',
|
||||
},
|
||||
labels: ['Progress'],
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget7}
|
||||
@@ -0,0 +1,325 @@
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget8: FC<Props> = ({className, chartColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart1 = new ApexCharts(chartRef.current, chart1Options(chartColor, chartHeight))
|
||||
if (chart1) {
|
||||
chart1.render()
|
||||
}
|
||||
|
||||
return chart1
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart1 = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart1) {
|
||||
chart1.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Beader */}
|
||||
<div className='card-header border-0 py-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Trends</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>Latest trends</span>
|
||||
</h3>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column'>
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} className='mixed-widget-5-chart card-rounded-top'></div>
|
||||
{/* end::Chart */}
|
||||
|
||||
{/* begin::Items */}
|
||||
<div className='mt-5'>
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex flex-stack mb-5'>
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/plurk.svg')}
|
||||
alt=''
|
||||
className='h-50'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div>
|
||||
<a href='#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
Top Authors
|
||||
</a>
|
||||
<div className='fs-7 text-muted fw-semibold mt-1'>Ricky Hunt, Sandra Trepp</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
|
||||
{/* begin::Label */}
|
||||
<div className='badge badge-light fw-semibold py-4 px-3'>+82$</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex flex-stack mb-5'>
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/figma-1.svg')}
|
||||
alt=''
|
||||
className='h-50'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div>
|
||||
<a href='#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
Top Sales
|
||||
</a>
|
||||
<div className='fs-7 text-muted fw-semibold mt-1'>PitStop Emails</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
|
||||
{/* begin::Label */}
|
||||
<div className='badge badge-light fw-semibold py-4 px-3'>+82$</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex flex-stack'>
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/vimeo.svg')}
|
||||
alt=''
|
||||
className='h-50'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div className='py-1'>
|
||||
<a href='#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
Top Engagement
|
||||
</a>
|
||||
|
||||
<div className='fs-7 text-muted fw-semibold mt-1'>KT.com</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
|
||||
{/* begin::Label */}
|
||||
<div className='badge badge-light fw-semibold py-4 px-3'>+82$</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
</div>
|
||||
{/* end::Items */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chart1Options = (chartColor: string, chartHeight: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
const strokeColor = getCSSVariableValue('--bs-gray-300')
|
||||
const baseColor = getCSSVariableValue('--bs-' + chartColor) as string
|
||||
const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [30, 30, 60, 25, 25, 40],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
// fill1: {
|
||||
// type: 'gradient',
|
||||
// opacity: 1,
|
||||
// gradient: {
|
||||
// type: 'vertical',
|
||||
// shadeIntensity: 0.5,
|
||||
// gradientToColors: undefined,
|
||||
// inverseColors: true,
|
||||
// opacityFrom: 1,
|
||||
// opacityTo: 0.375,
|
||||
// stops: [25, 50, 100],
|
||||
// colorStops: [],
|
||||
// },
|
||||
// },
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [baseColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: strokeColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
formatter: undefined,
|
||||
offsetY: 0,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 65,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [lightColor],
|
||||
markers: {
|
||||
colors: [lightColor],
|
||||
strokeColors: [baseColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget8}
|
||||
@@ -0,0 +1,297 @@
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget9: FC<Props> = ({className, chartColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartColor, chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Beader */}
|
||||
<div className='card-header border-0 py-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Sales Statistics</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>Recent sales statistics</span>
|
||||
</h3>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0 d-flex flex-column'>
|
||||
{/* begin::Stats */}
|
||||
<div className='card-px pt-5 pb-10 flex-grow-1'>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0 mt-5 mb-10'>
|
||||
{/* begin::Col */}
|
||||
<div className='col'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light-info'>
|
||||
<KTIcon iconName='bucket' className='fs-1 text-info' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div>
|
||||
<div className='fs-4 text-gray-900 fw-bold'>$2,034</div>
|
||||
<div className='fs-7 text-muted fw-semibold'>Author Sales</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light-danger'>
|
||||
<KTIcon iconName='abstract-26' className='fs-1 text-danger' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div>
|
||||
<div className='fs-4 text-gray-900 fw-bold'>$706</div>
|
||||
<div className='fs-7 text-muted fw-semibold'>Commision</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0'>
|
||||
{/* begin::Col */}
|
||||
<div className='col'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light-success'>
|
||||
<KTIcon iconName='basket' className='fs-1 text-success' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div>
|
||||
<div className='fs-4 text-gray-900 fw-bold'>$49</div>
|
||||
<div className='fs-7 text-muted fw-semibold'>Average Bid</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light-primary'>
|
||||
<KTIcon iconName='cheque' className='fs-1 text-primary' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div>
|
||||
<div className='fs-4 text-gray-900 fw-bold'>$5.8M</div>
|
||||
<div className='fs-7 text-muted fw-semibold'>All Time Sales</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} className='mixed-widget-6-chart card-rounded-bottom'></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
const strokeColor = getCSSVariableValue('--bs-gray-300')
|
||||
const baseColor = getCSSVariableValue('--bs-' + chartColor)
|
||||
const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [30, 25, 45, 30, 55, 55],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [baseColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: strokeColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 60,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [lightColor],
|
||||
markers: {
|
||||
colors: [lightColor],
|
||||
strokeColors: [baseColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget9}
|
||||
@@ -0,0 +1,40 @@
|
||||
import React from 'react'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
image: string
|
||||
title: string
|
||||
time: string
|
||||
description: string
|
||||
}
|
||||
|
||||
const StatisticsWidget1: React.FC<Props> = ({className, image, title, time, description}) => {
|
||||
return (
|
||||
<div
|
||||
className={`card bgi-no-repeat ${className}`}
|
||||
style={{
|
||||
backgroundPosition: 'right top',
|
||||
backgroundSize: '30% auto',
|
||||
backgroundImage: `url(${toAbsoluteUrl('media/svg/shapes/' + image)})`,
|
||||
}}
|
||||
>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body'>
|
||||
<a href='#' className='card-title fw-bold text-muted text-hover-primary fs-4'>
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<div className='fw-bold text-primary my-6'>{time}</div>
|
||||
|
||||
<p
|
||||
className='text-gray-900-75 fw-semibold fs-5 m-0'
|
||||
dangerouslySetInnerHTML={{__html: description}}
|
||||
></p>
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {StatisticsWidget1}
|
||||
@@ -0,0 +1,35 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
title: string
|
||||
description: string
|
||||
avatar: string
|
||||
}
|
||||
|
||||
const StatisticsWidget2: FC<Props> = ({className, title, description, avatar}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex align-items-center pt-3 pb-0'>
|
||||
<div className='d-flex flex-column flex-grow-1 py-2 py-lg-13 me-2'>
|
||||
<a href='#' className='fw-bold text-gray-900 fs-4 mb-2 text-hover-primary'>
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<span
|
||||
className='fw-semibold text-muted fs-5'
|
||||
dangerouslySetInnerHTML={{__html: description}}
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<img src={toAbsoluteUrl(avatar)} alt='' className='align-self-end h-100px' />
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {StatisticsWidget2}
|
||||
@@ -0,0 +1,207 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
title: string
|
||||
description: string
|
||||
change: string
|
||||
color: string
|
||||
}
|
||||
|
||||
const StatisticsWidget3: FC<Props> = ({className, title, description, change, color}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const height = parseInt(getCSS(chartRef.current, 'height'))
|
||||
const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
const baseColor = getCSSVariableValue('--bs-' + color)
|
||||
const lightColor = getCSSVariableValue('--bs-' + color + '-light')
|
||||
|
||||
const chart = new ApexCharts(
|
||||
chartRef.current,
|
||||
getChartOptions(height, labelColor, baseColor, lightColor)
|
||||
)
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column p-0'>
|
||||
<div className='d-flex flex-stack flex-grow-1 card-p'>
|
||||
<div className='d-flex flex-column me-2'>
|
||||
<a href='#' className='text-gray-900 text-hover-primary fw-bold fs-3'>
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<span
|
||||
className='text-muted fw-semibold mt-1'
|
||||
dangerouslySetInnerHTML={{__html: description}}
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<span className='symbol symbol-50px'>
|
||||
<span className={`symbol-label fs-5 fw-bold bg-light-${color} text-${color}`}>
|
||||
{change}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
ref={chartRef}
|
||||
className='statistics-widget-3-chart card-rounded-bottom'
|
||||
style={{height: '150px'}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {StatisticsWidget3}
|
||||
|
||||
function getChartOptions(
|
||||
height: number,
|
||||
labelColor: string,
|
||||
baseColor: string,
|
||||
lightColor: string
|
||||
): ApexOptions {
|
||||
const options: ApexOptions = {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [30, 45, 32, 70, 40],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [baseColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: '#E4E6EF',
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 80,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [lightColor],
|
||||
markers: {
|
||||
colors: [lightColor],
|
||||
strokeColors: [baseColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
return options
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
|
||||
import React, {useEffect, useRef} from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSS, getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import clsx from 'clsx'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
svgIcon: string
|
||||
color: string
|
||||
change: string
|
||||
description: string
|
||||
}
|
||||
|
||||
const StatisticsWidget4: React.FC<Props> = ({className, svgIcon, color, change, description}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const height = parseInt(getCSS(chartRef.current, 'height'))
|
||||
const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
const baseColor = getCSSVariableValue('--bs-' + color)
|
||||
const lightColor = getCSSVariableValue('--bs-' + color + '-light')
|
||||
|
||||
const chart = new ApexCharts(
|
||||
chartRef.current,
|
||||
getChartOptions(height, labelColor, baseColor, lightColor)
|
||||
)
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, color, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0'>
|
||||
<div className='d-flex flex-stack card-p flex-grow-1'>
|
||||
<span className={clsx('symbol symbol-50px', 'me-2')}>
|
||||
<span className={clsx('symbol-label', `bg-light-${color}`)}>
|
||||
<KTIcon iconName={svgIcon} className={`fs-2x text-${color}`} />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div className='d-flex flex-column text-end'>
|
||||
<span className='text-gray-900 fw-bold fs-2'>{change}</span>
|
||||
|
||||
<span className='text-muted fw-semibold mt-1'>{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={chartRef}
|
||||
className='statistics-widget-4-chart card-rounded-bottom'
|
||||
style={{height: '150px'}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {StatisticsWidget4}
|
||||
|
||||
function getChartOptions(
|
||||
height: number,
|
||||
labelColor: string,
|
||||
baseColor: string,
|
||||
lightColor: string
|
||||
): ApexOptions {
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [40, 40, 30, 30, 35, 35, 50],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [baseColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: '#E4E6EF',
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 60,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [lightColor],
|
||||
markers: {
|
||||
colors: [lightColor],
|
||||
strokeColors: [baseColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
|
||||
import React from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
color: string
|
||||
svgIcon: string
|
||||
iconColor: string
|
||||
title: string
|
||||
titleColor?: string
|
||||
description: string
|
||||
descriptionColor?: string
|
||||
}
|
||||
|
||||
const StatisticsWidget5: React.FC<Props> = ({
|
||||
className,
|
||||
color,
|
||||
svgIcon,
|
||||
iconColor,
|
||||
title,
|
||||
titleColor,
|
||||
description,
|
||||
descriptionColor,
|
||||
}) => {
|
||||
return (
|
||||
<a href='#' className={`card bg-${color} hoverable ${className}`}>
|
||||
<div className='card-body'>
|
||||
<KTIcon iconName={svgIcon} className={`text-${iconColor} fs-3x ms-n1`} />
|
||||
|
||||
<div className={`text-${titleColor} fw-bold fs-2 mb-2 mt-5`}>{title}</div>
|
||||
|
||||
<div className={`fw-semibold text-${descriptionColor}`}>{description}</div>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
export {StatisticsWidget5}
|
||||
@@ -0,0 +1,40 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
color: string
|
||||
title: string
|
||||
description: string
|
||||
progress: string
|
||||
}
|
||||
|
||||
const StatisticsWidget6: FC<Props> = ({className, color, title, description, progress}) => {
|
||||
return (
|
||||
<div className={`card bg-light-${color} ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body my-3'>
|
||||
<a href='#' className={`card-title fw-bold text-${color} fs-5 mb-3 d-block`}>
|
||||
{description}
|
||||
</a>
|
||||
|
||||
<div className='py-1'>
|
||||
<span className='text-gray-900 fs-1 fw-bold me-2'>{progress}</span>
|
||||
|
||||
<span className='fw-semibold text-muted fs-7'>{title}</span>
|
||||
</div>
|
||||
|
||||
<div className={`progress h-7px bg-${color} bg-opacity-50 mt-7`}>
|
||||
<div
|
||||
className={`progress-bar bg-${color}`}
|
||||
role='progressbar'
|
||||
style={{width: progress}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end:: Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {StatisticsWidget6}
|
||||
@@ -0,0 +1,256 @@
|
||||
|
||||
import React from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
}
|
||||
|
||||
const TablesWidget1: React.FC<Props> = ({className}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className='card-header border-0 pt-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Tasks Overview</span>
|
||||
<span className='text-muted fw-semibold fs-7'>Pending 10 tasks</span>
|
||||
</h3>
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
{/* begin::Menu 1 */}
|
||||
<Dropdown1 />
|
||||
{/* end::Menu 1 */}
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body py-3'>
|
||||
{/* begin::Table container */}
|
||||
<div className='table-responsive'>
|
||||
{/* begin::Table */}
|
||||
<table className='table align-middle gs-0 gy-5'>
|
||||
{/* begin::Table head */}
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='p-0 w-50px'></th>
|
||||
<th className='p-0 min-w-200px'></th>
|
||||
<th className='p-0 min-w-100px'></th>
|
||||
<th className='p-0 min-w-40px'></th>
|
||||
</tr>
|
||||
</thead>
|
||||
{/* end::Table head */}
|
||||
{/* begin::Table body */}
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
<div className='symbol symbol-50px me-2'>
|
||||
<span className='symbol-label'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/plurk.svg')}
|
||||
className='h-50 align-self-center'
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary mb-1 fs-6'>
|
||||
Top Authors
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block fs-7'>Successful Fellas</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className='d-flex flex-column w-100 me-2'>
|
||||
<div className='d-flex flex-stack mb-2'>
|
||||
<span className='text-muted me-2 fs-7 fw-semibold'>70%</span>
|
||||
</div>
|
||||
<div className='progress h-6px w-100'>
|
||||
<div
|
||||
className='progress-bar bg-primary'
|
||||
role='progressbar'
|
||||
style={{width: '70%'}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className='text-end'>
|
||||
<a href='#' className='btn btn-sm btn-icon btn-bg-light btn-active-color-primary'>
|
||||
<KTIcon iconName='arrow-right' className='fs-2' />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<div className='symbol symbol-50px me-2'>
|
||||
<span className='symbol-label'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/telegram.svg')}
|
||||
className='h-50 align-self-center'
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary mb-1 fs-6'>
|
||||
Popular Authors
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block fs-7'>Most Successful</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className='d-flex flex-column w-100 me-2'>
|
||||
<div className='d-flex flex-stack mb-2'>
|
||||
<span className='text-muted me-2 fs-7 fw-semibold'>50%</span>
|
||||
</div>
|
||||
<div className='progress h-6px w-100'>
|
||||
<div
|
||||
className='progress-bar bg-primary'
|
||||
role='progressbar'
|
||||
style={{width: '50%'}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className='text-end'>
|
||||
<a href='#' className='btn btn-sm btn-icon btn-bg-light btn-active-color-primary'>
|
||||
<KTIcon iconName='arrow-right' className='fs-2' />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<div className='symbol symbol-50px me-2'>
|
||||
<span className='symbol-label'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/vimeo.svg')}
|
||||
className='h-50 align-self-center'
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary mb-1 fs-6'>
|
||||
New Users
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block fs-7'>Awesome Users</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className='d-flex flex-column w-100 me-2'>
|
||||
<div className='d-flex flex-stack mb-2'>
|
||||
<span className='text-muted me-2 fs-7 fw-semibold'>80%</span>
|
||||
</div>
|
||||
<div className='progress h-6px w-100'>
|
||||
<div
|
||||
className='progress-bar bg-primary'
|
||||
role='progressbar'
|
||||
style={{width: '80%'}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className='text-end'>
|
||||
<a href='#' className='btn btn-sm btn-icon btn-bg-light btn-active-color-primary'>
|
||||
<KTIcon iconName='arrow-right' className='fs-2' />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<div className='symbol symbol-50px me-2'>
|
||||
<span className='symbol-label'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/bebo.svg')}
|
||||
className='h-50 align-self-center'
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary mb-1 fs-6'>
|
||||
Active Customers
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block fs-7'>Best Customers</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className='d-flex flex-column w-100 me-2'>
|
||||
<div className='d-flex flex-stack mb-2'>
|
||||
<span className='text-muted me-2 fs-7 fw-semibold'>90%</span>
|
||||
</div>
|
||||
<div className='progress h-6px w-100'>
|
||||
<div
|
||||
className='progress-bar bg-primary'
|
||||
role='progressbar'
|
||||
style={{width: '90%'}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className='text-end'>
|
||||
<a href='#' className='btn btn-sm btn-icon btn-bg-light btn-active-color-primary'>
|
||||
<KTIcon iconName='arrow-right' className='fs-2' />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<div className='symbol symbol-50px me-2'>
|
||||
<span className='symbol-label'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/kickstarter.svg')}
|
||||
className='h-50 align-self-center'
|
||||
alt=''
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary mb-1 fs-6'>
|
||||
Bestseller Theme
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block fs-7'>Amazing Templates</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className='d-flex flex-column w-100 me-2'>
|
||||
<div className='d-flex flex-stack mb-2'>
|
||||
<span className='text-muted me-2 fs-7 fw-semibold'>70%</span>
|
||||
</div>
|
||||
<div className='progress h-6px w-100'>
|
||||
<div
|
||||
className='progress-bar bg-primary'
|
||||
role='progressbar'
|
||||
style={{width: '70%'}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className='text-end'>
|
||||
<a href='#' className='btn btn-sm btn-icon btn-bg-light btn-active-color-primary'>
|
||||
<KTIcon iconName='arrow-right' className='fs-2' />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
{/* end::Table body */}
|
||||
</table>
|
||||
{/* end::Table */}
|
||||
</div>
|
||||
{/* end::Table container */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {TablesWidget1}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user