adjusted aside menu link
This commit is contained in:
victorAnumudu
@@ -0,0 +1,210 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../_digifi/helpers'
|
||||
import {Link, useLocation} from 'react-router-dom'
|
||||
import {Dropdown1} from '../../../_digifi/partials'
|
||||
import { ToolbarWrapper } from '../../../_digifi/layout/components/toolbar'
|
||||
import { Content } from '../../../_digifi/layout/components/content'
|
||||
|
||||
const ProcessHeader: FC = () => {
|
||||
const location = useLocation()
|
||||
|
||||
return (
|
||||
<>
|
||||
<ToolbarWrapper />
|
||||
<Content>
|
||||
<div className='card mb-5 mb-xl-10'>
|
||||
<div className='card-body pt-9 pb-0'>
|
||||
<div className='d-flex flex-wrap flex-sm-nowrap mb-3'>
|
||||
<div className='me-7 mb-4'>
|
||||
<div className='symbol symbol-100px symbol-lg-160px symbol-fixed position-relative'>
|
||||
<img src={toAbsoluteUrl('/media/avatars/300-1.jpg')} alt='Metornic' />
|
||||
<div className='position-absolute translate-middle bottom-0 start-100 mb-6 bg-success rounded-circle border border-4 border-white h-20px w-20px'></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex-grow-1'>
|
||||
<div className='d-flex justify-content-between align-items-start flex-wrap mb-2'>
|
||||
<div className='d-flex flex-column'>
|
||||
<div className='d-flex align-items-center mb-2'>
|
||||
<a href='#' className='text-gray-800 text-hover-primary fs-2 fw-bolder me-1'>
|
||||
Max Smith
|
||||
</a>
|
||||
<a href='#'>
|
||||
<KTIcon iconName='verify' className='fs-1 text-primary' />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-wrap fw-bold fs-6 mb-4 pe-2'>
|
||||
<a
|
||||
href='#'
|
||||
className='d-flex align-items-center text-gray-500 text-hover-primary me-5 mb-2'
|
||||
>
|
||||
<KTIcon iconName='profile-circle' className='fs-4 me-1' />
|
||||
Developer
|
||||
</a>
|
||||
<a
|
||||
href='#'
|
||||
className='d-flex align-items-center text-gray-500 text-hover-primary me-5 mb-2'
|
||||
>
|
||||
<KTIcon iconName='geolocation' className='fs-4 me-1' />
|
||||
SF, Bay Area
|
||||
</a>
|
||||
<a
|
||||
href='#'
|
||||
className='d-flex align-items-center text-gray-500 text-hover-primary mb-2'
|
||||
>
|
||||
<KTIcon iconName='sms' className='fs-4 me-1' />
|
||||
max@kt.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex my-4'>
|
||||
<a href='#' className='btn btn-sm btn-light me-2' id='kt_user_follow_button'>
|
||||
<KTIcon iconName='check' className='fs-3 d-none' />
|
||||
|
||||
<span className='indicator-label'>Follow</span>
|
||||
<span className='indicator-progress'>
|
||||
Please wait...
|
||||
<span className='spinner-border spinner-border-sm align-middle ms-2'></span>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-sm btn-primary me-3'
|
||||
data-bs-toggle='modal'
|
||||
data-bs-target='#kt_modal_offer_a_deal'
|
||||
>
|
||||
Hire Me
|
||||
</a>
|
||||
<div className='me-0'>
|
||||
<button
|
||||
className='btn btn-sm btn-icon btn-bg-light btn-active-color-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>
|
||||
<Dropdown1 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-wrap flex-stack'>
|
||||
<div className='d-flex flex-column flex-grow-1 pe-8'>
|
||||
<div className='d-flex flex-wrap'>
|
||||
<div className='border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3'>
|
||||
<div className='d-flex align-items-center'>
|
||||
<KTIcon iconName='arrow-up' className='fs-3 text-success me-2' />
|
||||
<div className='fs-2 fw-bolder'>4500$</div>
|
||||
</div>
|
||||
|
||||
<div className='fw-bold fs-6 text-gray-500'>Earnings</div>
|
||||
</div>
|
||||
|
||||
<div className='border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3'>
|
||||
<div className='d-flex align-items-center'>
|
||||
<KTIcon iconName='arrow-down' className='fs-3 text-danger me-2' />
|
||||
<div className='fs-2 fw-bolder'>75</div>
|
||||
</div>
|
||||
|
||||
<div className='fw-bold fs-6 text-gray-500'>Projects</div>
|
||||
</div>
|
||||
|
||||
<div className='border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3'>
|
||||
<div className='d-flex align-items-center'>
|
||||
<KTIcon iconName='arrow-up' className='fs-3 text-success me-2' />
|
||||
<div className='fs-2 fw-bolder'>60%</div>
|
||||
</div>
|
||||
|
||||
<div className='fw-bold fs-6 text-gray-500'>Success Rate</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex align-items-center w-200px w-sm-300px flex-column mt-3'>
|
||||
<div className='d-flex justify-content-between w-100 mt-auto mb-2'>
|
||||
<span className='fw-bold fs-6 text-gray-500'>Profile Compleation</span>
|
||||
<span className='fw-bolder fs-6'>50%</span>
|
||||
</div>
|
||||
<div className='h-5px mx-3 w-100 bg-light mb-3'>
|
||||
<div
|
||||
className='bg-success rounded h-5px'
|
||||
role='progressbar'
|
||||
style={{width: '50%'}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex overflow-auto h-55px'>
|
||||
<ul className='nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap'>
|
||||
<li className='nav-item'>
|
||||
<Link
|
||||
className={
|
||||
`nav-link text-active-primary me-6 ` +
|
||||
(location.pathname === '/crafted/pages/process/started' && 'active')
|
||||
}
|
||||
to='/crafted/pages/process/started'
|
||||
>
|
||||
Started
|
||||
</Link>
|
||||
</li>
|
||||
<li className='nav-item'>
|
||||
<Link
|
||||
className={
|
||||
`nav-link text-active-primary me-6 ` +
|
||||
(location.pathname === '/crafted/pages/process/pending' && 'active')
|
||||
}
|
||||
to='/crafted/pages/process/pending'
|
||||
>
|
||||
Pending
|
||||
</Link>
|
||||
</li>
|
||||
<li className='nav-item'>
|
||||
<Link
|
||||
className={
|
||||
`nav-link text-active-primary me-6 ` +
|
||||
(location.pathname === '/crafted/pages/process/ready' && 'active')
|
||||
}
|
||||
to='/crafted/pages/process/ready'
|
||||
>
|
||||
Ready
|
||||
</Link>
|
||||
</li>
|
||||
<li className='nav-item'>
|
||||
<Link
|
||||
className={
|
||||
`nav-link text-active-primary me-6 ` +
|
||||
(location.pathname === '/crafted/pages/process/approved' && 'active')
|
||||
}
|
||||
to='/crafted/pages/process/approved'
|
||||
>
|
||||
Approved
|
||||
</Link>
|
||||
</li>
|
||||
<li className='nav-item'>
|
||||
<Link
|
||||
className={
|
||||
`nav-link text-active-primary me-6 ` +
|
||||
(location.pathname === '/crafted/pages/process/rejected' && 'active')
|
||||
}
|
||||
to='/crafted/pages/process/rejected'
|
||||
>
|
||||
Rejected
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Content>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {ProcessHeader}
|
||||
@@ -0,0 +1,85 @@
|
||||
import {Navigate, Routes, Route, Outlet} from 'react-router-dom'
|
||||
import {PageLink, PageTitle} from '../../../_digifi/layout/core'
|
||||
import {Overview} from './components/Overview'
|
||||
import {Projects} from './components/Projects'
|
||||
import {Campaigns} from './components/Campaigns'
|
||||
import {Documents} from './components/Documents'
|
||||
import {Connections} from './components/Connections'
|
||||
import {ProcessHeader} from './ProcessHeader'
|
||||
|
||||
const processBreadCrumbs: Array<PageLink> = [
|
||||
{
|
||||
title: 'Loan',
|
||||
path: '/crafted/pages/process/started',
|
||||
isSeparator: false,
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
path: '',
|
||||
isSeparator: true,
|
||||
isActive: false,
|
||||
},
|
||||
]
|
||||
|
||||
const ProcessPage = () => (
|
||||
<Routes>
|
||||
<Route
|
||||
element={
|
||||
<>
|
||||
<ProcessHeader />
|
||||
<Outlet />
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Route
|
||||
path='started'
|
||||
element={
|
||||
<>
|
||||
<PageTitle breadcrumbs={processBreadCrumbs}>Started</PageTitle>
|
||||
<Overview />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='pending'
|
||||
element={
|
||||
<>
|
||||
<PageTitle breadcrumbs={processBreadCrumbs}>Pending</PageTitle>
|
||||
<Projects />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='ready'
|
||||
element={
|
||||
<>
|
||||
<PageTitle breadcrumbs={processBreadCrumbs}>Ready</PageTitle>
|
||||
<Campaigns />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='approved'
|
||||
element={
|
||||
<>
|
||||
<PageTitle breadcrumbs={processBreadCrumbs}>Approved</PageTitle>
|
||||
<Documents />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='rejected'
|
||||
element={
|
||||
<>
|
||||
<PageTitle breadcrumbs={processBreadCrumbs}>Rejected</PageTitle>
|
||||
<Connections />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route index element={<Navigate to='/crafted/pages/profile/started' />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
)
|
||||
|
||||
export default ProcessPage
|
||||
@@ -0,0 +1,37 @@
|
||||
import {PageLink} from '../../../_digifi/layout/core'
|
||||
|
||||
export const profileSubmenu: Array<PageLink> = [
|
||||
{
|
||||
title: 'Overview',
|
||||
path: '/crafted/pages/profile/overview',
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
title: 'Separator',
|
||||
path: '/crafted/pages/profile/overview',
|
||||
isActive: true,
|
||||
isSeparator: true,
|
||||
},
|
||||
{
|
||||
title: 'Account',
|
||||
path: '/crafted/pages/profile/account',
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
title: 'Account',
|
||||
path: '/crafted/pages/profile/account',
|
||||
isActive: false,
|
||||
isSeparator: true,
|
||||
},
|
||||
{
|
||||
title: 'Settings',
|
||||
path: '/crafted/pages/profile/settings',
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
title: 'Settings',
|
||||
path: '/crafted/pages/profile/settings',
|
||||
isActive: false,
|
||||
isSeparator: true,
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,6 @@
|
||||
export interface IconUserModel {
|
||||
name: string
|
||||
avatar?: string
|
||||
color?: string
|
||||
initials?: string
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
|
||||
import { Content } from '../../../../_digifi/layout/components/content'
|
||||
import {Card5} from '../../../../_digifi/partials/content/cards/Card5'
|
||||
|
||||
export function Campaigns() {
|
||||
return (
|
||||
<Content>
|
||||
<div className='d-flex flex-wrap flex-stack mb-6'>
|
||||
<h3 className='fw-bolder my-2'>
|
||||
My Campaigns
|
||||
<span className='fs-6 text-gray-500 fw-bold ms-1'>30 Days</span>
|
||||
</h3>
|
||||
|
||||
<div className='d-flex align-items-center my-2'>
|
||||
<div className='w-100px me-5'>
|
||||
<select
|
||||
name='status'
|
||||
data-control='select2'
|
||||
data-hide-search='true'
|
||||
className='form-select form-select-white form-select-sm'
|
||||
defaultValue='1'
|
||||
>
|
||||
<option value='1'>30 Days</option>
|
||||
<option value='2'>90 Days</option>
|
||||
<option value='3'>6 Months</option>
|
||||
<option value='4'>1 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<button className='btn btn-primary btn-sm' data-bs-toggle='tooltip' title='Coming soon'>
|
||||
Add Campaign
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row g-6 g-xl-9'>
|
||||
<div className='col-sm-6 col-xl-4'>
|
||||
<Card5
|
||||
image='media/svg/brand-logos/twitch.svg'
|
||||
title='Twitch Posts'
|
||||
description='$500.00'
|
||||
status='down'
|
||||
statusValue={40.5}
|
||||
statusDesc='more impressions'
|
||||
progress={0.5}
|
||||
progressType='MRR'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-sm-6 col-xl-4'>
|
||||
<Card5
|
||||
image='media/svg/brand-logos/twitter.svg'
|
||||
title='Twitter Followers'
|
||||
description='807k'
|
||||
status='up'
|
||||
statusValue={17.62}
|
||||
statusDesc='Followers growth'
|
||||
progress={5}
|
||||
progressType='New trials'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-sm-6 col-xl-4'>
|
||||
<Card5
|
||||
image='media/svg/brand-logos/spotify.svg'
|
||||
title='Spotify Listeners'
|
||||
description='1,073'
|
||||
status='down'
|
||||
statusValue={10.45}
|
||||
statusDesc='Less comments than usual'
|
||||
progress={40}
|
||||
progressType='Impressions'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-sm-6 col-xl-4'>
|
||||
<Card5
|
||||
image='media/svg/brand-logos/pinterest-p.svg'
|
||||
title='Pinterest Posts'
|
||||
description='97'
|
||||
status='up'
|
||||
statusValue={26.1}
|
||||
statusDesc='More posts'
|
||||
progress={10}
|
||||
progressType='Spend'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-sm-6 col-xl-4'>
|
||||
<Card5
|
||||
image='media/svg/brand-logos/github.svg'
|
||||
title='Github Contributes'
|
||||
description='4,109'
|
||||
status='down'
|
||||
statusValue={32.8}
|
||||
statusDesc='Less contributions'
|
||||
progress={40}
|
||||
progressType='Dispute'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-sm-6 col-xl-4'>
|
||||
<Card5
|
||||
image='media/svg/brand-logos/youtube-play.svg'
|
||||
title='Youtube Subscribers'
|
||||
description='354'
|
||||
status='up'
|
||||
statusValue={29.45}
|
||||
statusDesc='Subscribers growth'
|
||||
progress={40}
|
||||
progressType='Subscribers'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-sm-6 col-xl-4'>
|
||||
<Card5
|
||||
image='media/svg/brand-logos/telegram.svg'
|
||||
title='Telegram Posts'
|
||||
description='566'
|
||||
status='up'
|
||||
statusValue={11.4}
|
||||
statusDesc='more clicks'
|
||||
progress={40}
|
||||
progressType='Profit'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-sm-6 col-xl-4'>
|
||||
<Card5
|
||||
image='media/svg/brand-logos/reddit.svg'
|
||||
title='Reddit Awards'
|
||||
description='2.1M'
|
||||
status='up'
|
||||
statusValue={46.7}
|
||||
statusDesc='more adds'
|
||||
progress={0.0}
|
||||
progressType='Retention'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-stack flex-wrap pt-10'>
|
||||
<div className='fs-6 fw-bold text-gray-700'>Showing 1 to 10 of 50 entries</div>
|
||||
|
||||
<ul className='pagination'>
|
||||
<li className='page-item previous'>
|
||||
<a href='#' className='page-link'>
|
||||
<i className='previous'></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item active'>
|
||||
<a href='#' className='page-link'>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
6
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item next'>
|
||||
<a href='#' className='page-link'>
|
||||
<i className='next'></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
import { Content } from '../../../../_digifi/layout/components/content'
|
||||
import {Card3} from '../../../../_digifi/partials/content/cards/Card3'
|
||||
|
||||
export function Connections() {
|
||||
return (
|
||||
<Content>
|
||||
<div className='d-flex flex-wrap flex-stack mb-6'>
|
||||
<h3 className='fw-bolder my-2'>
|
||||
My Contacts
|
||||
<span className='fs-6 text-gray-500 fw-bold ms-1'>(59)</span>
|
||||
</h3>
|
||||
|
||||
<div className='d-flex my-2'>
|
||||
<select
|
||||
name='status'
|
||||
data-control='select2'
|
||||
data-hide-search='true'
|
||||
className='form-select form-select-white form-select-sm w-125px'
|
||||
defaultValue='Online'
|
||||
>
|
||||
<option value='Online'>Online</option>
|
||||
<option value='Pending'>Pending</option>
|
||||
<option value='Declined'>Declined</option>
|
||||
<option value='Accepted'>Accepted</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row g-6 g-xl-9'>
|
||||
<div className='col-md-6 col-xxl-4'>
|
||||
<Card3
|
||||
avatar='media/avatars/300-6.jpg'
|
||||
name='Emma Smith'
|
||||
job='Art Director'
|
||||
avgEarnings='$14,560'
|
||||
totalEarnings='$236,400'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-md-6 col-xxl-4'>
|
||||
<Card3
|
||||
color='danger'
|
||||
name='Melody Macy'
|
||||
job='Marketing Analytic'
|
||||
avgEarnings='$14,560'
|
||||
totalEarnings='$236,400'
|
||||
online={true}
|
||||
/>
|
||||
</div>
|
||||
<div className='col-md-6 col-xxl-4'>
|
||||
<Card3
|
||||
avatar='media/avatars/300-1.jpg'
|
||||
name='Max Smith'
|
||||
job='Software Enginer'
|
||||
avgEarnings='$14,560'
|
||||
totalEarnings='$236,400'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-md-6 col-xxl-4'>
|
||||
<Card3
|
||||
avatar='media/avatars/300-5.jpg'
|
||||
name='Sean Bean'
|
||||
job='Web Developer'
|
||||
avgEarnings='$14,560'
|
||||
totalEarnings='$236,400'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-md-6 col-xxl-4'>
|
||||
<Card3
|
||||
avatar='media/avatars/300-25.jpg'
|
||||
name='Brian Cox'
|
||||
job='UI/UX Designer'
|
||||
avgEarnings='$14,560'
|
||||
totalEarnings='$236,400'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-md-6 col-xxl-4'>
|
||||
<Card3
|
||||
color='warning'
|
||||
name='Mikaela Collins'
|
||||
job='Head Of Marketing'
|
||||
avgEarnings='$14,560'
|
||||
totalEarnings='$236,400'
|
||||
online={true}
|
||||
/>
|
||||
</div>
|
||||
<div className='col-md-6 col-xxl-4'>
|
||||
<Card3
|
||||
avatar='media/avatars/300-9.jpg'
|
||||
name='Francis Mitcham'
|
||||
job='Software Arcitect'
|
||||
avgEarnings='$14,560'
|
||||
totalEarnings='$236,400'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-md-6 col-xxl-4'>
|
||||
<Card3
|
||||
color='danger'
|
||||
name='Olivia Wild'
|
||||
job='System Admin'
|
||||
avgEarnings='$14,560'
|
||||
totalEarnings='$236,400'
|
||||
online={true}
|
||||
/>
|
||||
</div>
|
||||
<div className='col-md-6 col-xxl-4'>
|
||||
<Card3
|
||||
color='primary'
|
||||
name='Neil Owen'
|
||||
job='Account Manager'
|
||||
avgEarnings='$14,560'
|
||||
totalEarnings='$236,400'
|
||||
online={true}
|
||||
/>
|
||||
</div>
|
||||
<div className='col-md-6 col-xxl-4'>
|
||||
<Card3
|
||||
avatar='media/avatars/300-23.jpg'
|
||||
name='Dan Wilson'
|
||||
job='Web Desinger'
|
||||
avgEarnings='$14,560'
|
||||
totalEarnings='$236,400'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-md-6 col-xxl-4'>
|
||||
<Card3
|
||||
color='danger'
|
||||
name='Emma Bold'
|
||||
job='Corporate Finance'
|
||||
avgEarnings='$14,560'
|
||||
totalEarnings='$236,400'
|
||||
online={true}
|
||||
/>
|
||||
</div>
|
||||
<div className='col-md-6 col-xxl-4'>
|
||||
<Card3
|
||||
avatar='media/avatars/300-12.jpg'
|
||||
name='Ana Crown'
|
||||
job='Customer Relationship'
|
||||
avgEarnings='$14,560'
|
||||
totalEarnings='$236,400'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-stack flex-wrap pt-10'>
|
||||
<div className='fs-6 fw-bold text-gray-700'>Showing 1 to 10 of 50 entries</div>
|
||||
|
||||
<ul className='pagination'>
|
||||
<li className='page-item previous'>
|
||||
<a href='#' className='page-link'>
|
||||
<i className='previous'></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item active'>
|
||||
<a href='#' className='page-link'>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
6
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item next'>
|
||||
<a href='#' className='page-link'>
|
||||
<i className='next'></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import {KTIcon} from '../../../../_digifi/helpers'
|
||||
import { Content } from '../../../../_digifi/layout/components/content'
|
||||
import {Card4} from '../../../../_digifi/partials/content/cards/Card4'
|
||||
|
||||
export function Documents() {
|
||||
return (
|
||||
<Content>
|
||||
<div className='d-flex flex-wrap flex-stack mb-6'>
|
||||
<h3 className='fw-bolder my-2'>
|
||||
My Documents
|
||||
<span className='fs-6 text-gray-500 fw-bold ms-1'>100+ resources</span>
|
||||
</h3>
|
||||
|
||||
<div className='d-flex my-2'>
|
||||
<div className='d-flex align-items-center position-relative me-4'>
|
||||
<KTIcon iconName='magnifier' className='fs-3 position-absolute ms-3' />
|
||||
<input
|
||||
type='text'
|
||||
id='kt_filter_search'
|
||||
className='form-control form-control-white form-control-sm w-150px ps-9'
|
||||
placeholder='Search'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<a href='#' className='btn btn-primary btn-sm'>
|
||||
File Manager
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row g-6 g-xl-9 mb-6 mb-xl-9'>
|
||||
<div className='col-12 col-sm-12 col-xl'>
|
||||
<Card4
|
||||
icon='media/svg/files/folder-document.svg'
|
||||
title='Finance'
|
||||
description='7 files'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-12 col-sm-12 col-xl'>
|
||||
<Card4
|
||||
icon='media/svg/files/folder-document.svg'
|
||||
title='Customers'
|
||||
description='3 files'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-12 col-sm-12 col-xl'>
|
||||
<Card4
|
||||
icon='media/svg/files/folder-document.svg'
|
||||
title='CRM Project'
|
||||
description='25 files'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row g-6 g-xl-9 mb-6 mb-xl-9'>
|
||||
<div className='col-12 col-sm-12 col-xl'>
|
||||
<Card4 icon='media/svg/files/pdf.svg' title='Project Reqs..' description='3 days ago' />
|
||||
</div>
|
||||
<div className='col-12 col-sm-12 col-xl'>
|
||||
<Card4 icon='media/svg/files/doc.svg' title='CRM App Docs..' description='3 days ago' />
|
||||
</div>
|
||||
<div className='col-12 col-sm-12 col-xl'>
|
||||
<Card4
|
||||
icon='media/svg/files/css.svg'
|
||||
title='User CRUD Styles'
|
||||
description='4 days ago'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-12 col-sm-12 col-xl'>
|
||||
<Card4 icon='media/svg/files/ai.svg' title='Metronic Logo' description='5 days ago' />
|
||||
</div>
|
||||
<div className='col-12 col-sm-12 col-xl'>
|
||||
<Card4 icon='media/svg/files/sql.svg' title='Orders backup' description='1 week ago' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row g-6 g-xl-9 mb-6 mb-xl-9'>
|
||||
<div className='col-12 col-sm-12 col-xl'>
|
||||
<Card4
|
||||
icon='media/svg/files/xml.svg'
|
||||
title='UTAIR CRM API Co..'
|
||||
description='2 week ago'
|
||||
/>
|
||||
</div>
|
||||
<div className='col-12 col-sm-12 col-xl'>
|
||||
<Card4
|
||||
icon='media/svg/files/tif.svg'
|
||||
title='Tower Hill App..'
|
||||
description='3 week ago'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Content } from '../../../../_digifi/layout/components/content'
|
||||
import {
|
||||
FeedsWidget2,
|
||||
FeedsWidget3,
|
||||
FeedsWidget4,
|
||||
FeedsWidget5,
|
||||
FeedsWidget6,
|
||||
ChartsWidget1,
|
||||
ListsWidget5,
|
||||
ListsWidget2,
|
||||
} from '../../../../_digifi/partials/widgets'
|
||||
|
||||
export function Overview() {
|
||||
return (
|
||||
<Content>
|
||||
<div className='row g-5 g-xxl-8'>
|
||||
<div className='col-xl-6'>
|
||||
<FeedsWidget2 className='mb-5 mb-xxl-8' />
|
||||
|
||||
<FeedsWidget3 className='mb-5 mb-xxl-8' />
|
||||
|
||||
<FeedsWidget4 className='mb-5 mb-xxl-8' />
|
||||
|
||||
<FeedsWidget5 className='mb-5 mb-xxl-8' />
|
||||
|
||||
<FeedsWidget6 className='mb-5 mb-xxl-8' />
|
||||
</div>
|
||||
|
||||
<div className='col-xl-6'>
|
||||
<ChartsWidget1 className='mb-5 mb-xxl-8' />
|
||||
|
||||
<ListsWidget5 className='mb-5 mb-xxl-8' />
|
||||
|
||||
<ListsWidget2 className='mb-5 mb-xxl-8' />
|
||||
</div>
|
||||
</div>
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,282 @@
|
||||
import { Content } from '../../../../_digifi/layout/components/content'
|
||||
import {Card2} from '../../../../_digifi/partials/content/cards/Card2'
|
||||
import {IconUserModel} from '../ProfileModels'
|
||||
|
||||
export function Projects() {
|
||||
return (
|
||||
<Content>
|
||||
<div className='d-flex flex-wrap flex-stack mb-6'>
|
||||
<h3 className='fw-bolder my-2'>
|
||||
My Projects
|
||||
<span className='fs-6 text-gray-500 fw-bold ms-1'>Active</span>
|
||||
</h3>
|
||||
|
||||
<div className='d-flex flex-wrap my-2'>
|
||||
<div className='me-4'>
|
||||
<select
|
||||
name='status'
|
||||
data-control='select2'
|
||||
data-hide-search='true'
|
||||
className='form-select form-select-sm form-select-white w-125px'
|
||||
defaultValue='Active'
|
||||
>
|
||||
<option value='Active'>Active</option>
|
||||
<option value='Approved'>In Progress</option>
|
||||
<option value='Declined'>To Do</option>
|
||||
<option value='In Progress'>Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-primary btn-sm'
|
||||
data-bs-toggle='modal'
|
||||
data-bs-target='#kt_modal_create_project'
|
||||
>
|
||||
New Project
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row g-6 g-xl-9'>
|
||||
<div className='col-md-6 col-xl-4'>
|
||||
<Card2
|
||||
icon='media/svg/brand-logos/plurk.svg'
|
||||
badgeColor='primary'
|
||||
status='In Progress'
|
||||
statusColor='primary'
|
||||
title='Fitnes App'
|
||||
description='CRM App application to HR efficiency'
|
||||
date='November 10, 2021'
|
||||
budget='$284,900.00'
|
||||
progress={50}
|
||||
users={users1}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-md-6 col-xl-4'>
|
||||
<Card2
|
||||
icon='media/svg/brand-logos/disqus.svg'
|
||||
badgeColor='info'
|
||||
status='Pending'
|
||||
statusColor='info'
|
||||
title='Leaf CRM'
|
||||
description='CRM App application to HR efficiency'
|
||||
date='May 10, 2021'
|
||||
budget='$36,400.00'
|
||||
progress={30}
|
||||
users={users2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-md-6 col-xl-4'>
|
||||
<Card2
|
||||
icon='media/svg/brand-logos/figma-1.svg'
|
||||
badgeColor='success'
|
||||
status='Completed'
|
||||
statusColor='success'
|
||||
title='Atica Banking'
|
||||
description='CRM App application to HR efficiency'
|
||||
date='Mar 14, 2021'
|
||||
budget='$605,100.00'
|
||||
progress={100}
|
||||
users={users3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-md-6 col-xl-4'>
|
||||
<Card2
|
||||
icon='media/svg/brand-logos/sentry-3.svg'
|
||||
badgeColor='info'
|
||||
status='Pending'
|
||||
statusColor='info'
|
||||
title='Finance Dispatch'
|
||||
description='CRM App application to HR efficiency'
|
||||
date='Mar 14, 2021'
|
||||
budget='$605,100.00'
|
||||
progress={60}
|
||||
users={users4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-md-6 col-xl-4'>
|
||||
<Card2
|
||||
icon='media/svg/brand-logos/xing-icon.svg'
|
||||
badgeColor='primary'
|
||||
status='In Progress'
|
||||
statusColor='primary'
|
||||
title='9 Degree'
|
||||
description='CRM App application to HR efficiency'
|
||||
date='Mar 14, 2021'
|
||||
budget='$605,100.00'
|
||||
progress={40}
|
||||
users={users5}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-md-6 col-xl-4'>
|
||||
<Card2
|
||||
icon='media/svg/brand-logos/tvit.svg'
|
||||
badgeColor='primary'
|
||||
status='In Progress'
|
||||
statusColor='primary'
|
||||
title='9 Degree'
|
||||
description='CRM App application to HR efficiency'
|
||||
date='Mar 14, 2021'
|
||||
budget='$605,100.00'
|
||||
progress={70}
|
||||
users={users6}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-md-6 col-xl-4'>
|
||||
<Card2
|
||||
icon='media/svg/brand-logos/aven.svg'
|
||||
badgeColor='primary'
|
||||
status='In Progress'
|
||||
statusColor='primary'
|
||||
title='Buldozer CRM'
|
||||
description='CRM App application to HR efficiency'
|
||||
date='Mar 14, 2021'
|
||||
budget='$605,100.00'
|
||||
progress={70}
|
||||
users={users7}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-md-6 col-xl-4'>
|
||||
<Card2
|
||||
icon='media/svg/brand-logos/treva.svg'
|
||||
badgeColor='danger'
|
||||
status='Overdue'
|
||||
statusColor='danger'
|
||||
title='Aviasales App'
|
||||
description='CRM App application to HR efficiency'
|
||||
date='Mar 14, 2021'
|
||||
budget='$605,100.00'
|
||||
progress={10}
|
||||
users={users8}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-md-6 col-xl-4'>
|
||||
<Card2
|
||||
icon='media/svg/brand-logos/kanba.svg'
|
||||
badgeColor='success'
|
||||
status='Completed'
|
||||
statusColor='success'
|
||||
title='Oppo CRM'
|
||||
description='CRM App application to HR efficiency'
|
||||
date='Mar 14, 2021'
|
||||
budget='$605,100.00'
|
||||
progress={100}
|
||||
users={users9}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='d-flex flex-stack flex-wrap pt-10'>
|
||||
<div className='fs-6 fw-bold text-gray-700'>Showing 1 to 10 of 50 entries</div>
|
||||
|
||||
<ul className='pagination'>
|
||||
<li className='page-item previous'>
|
||||
<a href='#' className='page-link'>
|
||||
<i className='previous'></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item active'>
|
||||
<a href='#' className='page-link'>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item'>
|
||||
<a href='#' className='page-link'>
|
||||
6
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className='page-item next'>
|
||||
<a href='#' className='page-link'>
|
||||
<i className='next'></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
|
||||
const users1: Array<IconUserModel> = [
|
||||
{name: 'Emma Smith', avatar: 'media/avatars/300-6.jpg'},
|
||||
{name: 'Rudy Stone', avatar: 'media/avatars/300-1.jpg'},
|
||||
{name: 'Susan Redwood', initials: 'S', color: 'primary'},
|
||||
]
|
||||
|
||||
const users2 = [
|
||||
{name: 'Alan Warden', initials: 'A', color: 'warning'},
|
||||
{name: 'Brian Cox', avatar: 'media/avatars/300-5.jpg'},
|
||||
]
|
||||
|
||||
const users3 = [
|
||||
{name: 'Mad Masy', avatar: 'media/avatars/300-6.jpg'},
|
||||
{name: 'Cris Willson', avatar: 'media/avatars/300-1.jpg'},
|
||||
{name: 'Mike Garcie', initials: 'M', color: 'info'},
|
||||
]
|
||||
|
||||
const users4 = [
|
||||
{name: 'Nich Warden', initials: 'N', color: 'warning'},
|
||||
{name: 'Rob Otto', initials: 'R', color: 'success'},
|
||||
]
|
||||
|
||||
const users5 = [
|
||||
{name: 'Francis Mitcham', avatar: 'media/avatars/300-20.jpg'},
|
||||
{name: 'Michelle Swanston', avatar: 'media/avatars/300-7.jpg'},
|
||||
{name: 'Susan Redwood', initials: 'S', color: 'primary'},
|
||||
]
|
||||
|
||||
const users6 = [
|
||||
{name: 'Emma Smith', avatar: 'media/avatars/300-6.jpg'},
|
||||
{name: 'Rudy Stone', avatar: 'media/avatars/300-1.jpg'},
|
||||
{name: 'Susan Redwood', initials: 'S', color: 'primary'},
|
||||
]
|
||||
|
||||
const users7 = [
|
||||
{name: 'Meloday Macy', avatar: 'media/avatars/300-2.jpg'},
|
||||
{name: 'Rabbin Watterman', initials: 'S', color: 'success'},
|
||||
]
|
||||
|
||||
const users8 = [
|
||||
{name: 'Emma Smith', avatar: 'media/avatars/300-6.jpg'},
|
||||
{name: 'Rudy Stone', avatar: 'media/avatars/300-1.jpg'},
|
||||
{name: 'Susan Redwood', initials: 'S', color: 'primary'},
|
||||
]
|
||||
|
||||
const users9 = [
|
||||
{name: 'Meloday Macy', avatar: 'media/avatars/300-2.jpg'},
|
||||
{name: 'Rabbin Watterman', initials: 'S', color: 'danger'},
|
||||
]
|
||||
@@ -0,0 +1,37 @@
|
||||
import {FC} from 'react'
|
||||
import {IconUserModel} from '../ProfileModels'
|
||||
import {toAbsoluteUrl} from '../../../../_digifi/helpers'
|
||||
import {OverlayTrigger, Tooltip} from 'react-bootstrap'
|
||||
import { Content } from '../../../../_digifi/layout/components/content'
|
||||
|
||||
type Props = {
|
||||
users?: Array<IconUserModel>
|
||||
}
|
||||
|
||||
const UsersList: FC<Props> = ({users = undefined}) => {
|
||||
return (
|
||||
<Content>
|
||||
{users &&
|
||||
users.map((user, i) => {
|
||||
return (
|
||||
<OverlayTrigger
|
||||
key={`${i}-${user.name}`}
|
||||
placement='top'
|
||||
overlay={<Tooltip id='tooltip-user-name'>{user.name}</Tooltip>}
|
||||
>
|
||||
<div className='symbol symbol-35px symbol-circle'>
|
||||
{user.avatar && <img src={toAbsoluteUrl(user.avatar)} alt='Pic' />}
|
||||
{user.initials && (
|
||||
<span className='symbol-label bg-primary text-inverse-primary fw-bolder'>
|
||||
{user.initials}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</OverlayTrigger>
|
||||
)
|
||||
})}
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
|
||||
export {UsersList}
|
||||
@@ -0,0 +1,713 @@
|
||||
import {useState} from 'react'
|
||||
import {defaultAccount, IAccount} from './AccountModel'
|
||||
|
||||
export function Account() {
|
||||
const [data, setData] = useState<IAccount>(defaultAccount)
|
||||
//const [hasError, setHasError] = useState(false);
|
||||
|
||||
const updateData = (fieldsToUpdate: Partial<IAccount>) => {
|
||||
const updatedData = {...data, ...fieldsToUpdate}
|
||||
setData(updatedData)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='card'>
|
||||
{/* begin::Form */}
|
||||
<form className='form d-flex flex-center'>
|
||||
<div className='card-body mw-800px py-20'>
|
||||
{/* begin::Form row */}
|
||||
<div className='row mb-8'>
|
||||
<label className='col-lg-3 col-form-label'>Username</label>
|
||||
<div className='col-lg-9'>
|
||||
<div className='spinner spinner-sm spinner-primary spinner-right'>
|
||||
<input
|
||||
className='form-control form-control-lg form-control-solid'
|
||||
type='text'
|
||||
value={data.username}
|
||||
onChange={(e) => updateData({username: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Form row */}
|
||||
|
||||
{/* begin::Form row */}
|
||||
<div className='row mb-8'>
|
||||
<label className='col-lg-3 col-form-label'>Email Address</label>
|
||||
<div className='col-lg-9'>
|
||||
<div className='input-group input-group-lg input-group-solid'>
|
||||
<span className='input-group-text pe-0'>
|
||||
<i className='la la-at fs-4'></i>
|
||||
</span>
|
||||
<input
|
||||
type='text'
|
||||
className='form-control form-control-lg form-control-solid'
|
||||
placeholder='Email'
|
||||
value={data.email}
|
||||
onChange={(e) => updateData({email: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div className='form-text'>
|
||||
Email will not be publicly displayed.{' '}
|
||||
<a href='#' className='fw-bold'>
|
||||
Learn more
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Form row */}
|
||||
|
||||
{/* begin::Form row */}
|
||||
<div className='row mb-8'>
|
||||
<label className='col-lg-3 col-form-label'>Language</label>
|
||||
<div className='col-lg-9'>
|
||||
<select
|
||||
className='form-select form-select-lg form-select-solid'
|
||||
data-control='select2'
|
||||
data-placeholder='Select Language...'
|
||||
value={data.language}
|
||||
onChange={(e) => updateData({language: e.target.value})}
|
||||
defaultValue={data.language}
|
||||
>
|
||||
<option value='id'>Bahasa Indonesia - Indonesian</option>
|
||||
<option value='msa'>Bahasa Melayu - Malay</option>
|
||||
<option value='ca'>Català - Catalan</option>
|
||||
<option value='cs'>Čeština - Czech</option>
|
||||
<option value='da'>Dansk - Danish</option>
|
||||
<option value='de'>Deutsch - German</option>
|
||||
<option value='en'>English</option>
|
||||
<option value='en-gb'>English UK - British English</option>
|
||||
<option value='es'>Español - Spanish</option>
|
||||
<option value='eu'>Euskara - Basque (beta)</option>
|
||||
<option value='fil'>Filipino</option>
|
||||
<option value='fr'>Français - French</option>
|
||||
<option value='ga'>Gaeilge - Irish (beta)</option>
|
||||
<option value='gl'>Galego - Galician (beta)</option>
|
||||
<option value='hr'>Hrvatski - Croatian</option>
|
||||
<option value='it'>Italiano - Italian</option>
|
||||
<option value='hu'>Magyar - Hungarian</option>
|
||||
<option value='nl'>Nederlands - Dutch</option>
|
||||
<option value='no'>Norsk - Norwegian</option>
|
||||
<option value='pl'>Polski - Polish</option>
|
||||
<option value='pt'>Português - Portuguese</option>
|
||||
<option value='ro'>Română - Romanian</option>
|
||||
<option value='sk'>Slovenčina - Slovak</option>
|
||||
<option value='fi'>Suomi - Finnish</option>
|
||||
<option value='sv'>Svenska - Swedish</option>
|
||||
<option value='vi'>Tiếng Việt - Vietnamese</option>
|
||||
<option value='tr'>Türkçe - Turkish</option>
|
||||
<option value='el'>Ελληνικά - Greek</option>
|
||||
<option value='bg'>Български език - Bulgarian</option>
|
||||
<option value='ru'>Русский - Russian</option>
|
||||
<option value='sr'>Српски - Serbian</option>
|
||||
<option value='uk'>Українська мова - Ukrainian</option>
|
||||
<option value='he'>עִבְרִית - Hebrew</option>
|
||||
<option value='ur'>اردو - Urdu (beta)</option>
|
||||
<option value='ar'>العربية - Arabic</option>
|
||||
<option value='fa'>فارسی - Persian</option>
|
||||
<option value='mr'>मराठी - Marathi</option>
|
||||
<option value='hi'>हिन्दी - Hindi</option>
|
||||
<option value='bn'>বাংলা - Bangla</option>
|
||||
<option value='gu'>ગુજરાતી - Gujarati</option>
|
||||
<option value='ta'>தமிழ் - Tamil</option>
|
||||
<option value='kn'>ಕನ್ನಡ - Kannada</option>
|
||||
<option value='th'>ภาษาไทย - Thai</option>
|
||||
<option value='ko'>한국어 - Korean</option>
|
||||
<option value='ja'>日本語 - Japanese</option>
|
||||
<option value='zh-cn'>简体中文 - Simplified Chinese</option>
|
||||
<option value='zh-tw'>繁體中文 - Traditional Chinese</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Form row */}
|
||||
|
||||
{/* begin::Form row */}
|
||||
<div className='row mb-8'>
|
||||
<label className='col-lg-3 col-form-label'>Time Zone</label>
|
||||
<div className='col-lg-9'>
|
||||
<select
|
||||
className='form-select form-select-lg form-select-solid'
|
||||
data-control='select2'
|
||||
data-placeholder='Select Timezone...'
|
||||
value={data.timeZone}
|
||||
defaultValue={data.timeZone}
|
||||
onChange={(e) => updateData({timeZone: e.target.value})}
|
||||
>
|
||||
<option data-offset='-39600' value='International Date Line West'>
|
||||
(GMT-11:00) International Date Line West
|
||||
</option>
|
||||
<option data-offset='-39600' value='Midway Island'>
|
||||
(GMT-11:00) Midway Island
|
||||
</option>
|
||||
<option data-offset='-39600' value='Samoa'>
|
||||
(GMT-11:00) Samoa
|
||||
</option>
|
||||
<option data-offset='-36000' value='Hawaii'>
|
||||
(GMT-10:00) Hawaii
|
||||
</option>
|
||||
<option data-offset='-28800' value='Alaska'>
|
||||
(GMT-08:00) Alaska
|
||||
</option>
|
||||
<option data-offset='-25200' value='Pacific Time (US & Canada)'>
|
||||
(GMT-07:00) Pacific Time (US & Canada)
|
||||
</option>
|
||||
<option data-offset='-25200' value='Tijuana'>
|
||||
(GMT-07:00) Tijuana
|
||||
</option>
|
||||
<option data-offset='-25200' value='Arizona'>
|
||||
(GMT-07:00) Arizona
|
||||
</option>
|
||||
<option data-offset='-21600' value='Mountain Time (US & Canada)'>
|
||||
(GMT-06:00) Mountain Time (US & Canada)
|
||||
</option>
|
||||
<option data-offset='-21600' value='Chihuahua'>
|
||||
(GMT-06:00) Chihuahua
|
||||
</option>
|
||||
<option data-offset='-21600' value='Mazatlan'>
|
||||
(GMT-06:00) Mazatlan
|
||||
</option>
|
||||
<option data-offset='-21600' value='Saskatchewan'>
|
||||
(GMT-06:00) Saskatchewan
|
||||
</option>
|
||||
<option data-offset='-21600' value='Central America'>
|
||||
(GMT-06:00) Central America
|
||||
</option>
|
||||
<option data-offset='-18000' value='Central Time (US & Canada)'>
|
||||
(GMT-05:00) Central Time (US & Canada)
|
||||
</option>
|
||||
<option data-offset='-18000' value='Guadalajara'>
|
||||
(GMT-05:00) Guadalajara
|
||||
</option>
|
||||
<option data-offset='-18000' value='Mexico City'>
|
||||
(GMT-05:00) Mexico City
|
||||
</option>
|
||||
<option data-offset='-18000' value='Monterrey'>
|
||||
(GMT-05:00) Monterrey
|
||||
</option>
|
||||
<option data-offset='-18000' value='Bogota'>
|
||||
(GMT-05:00) Bogota
|
||||
</option>
|
||||
<option data-offset='-18000' value='Lima'>
|
||||
(GMT-05:00) Lima
|
||||
</option>
|
||||
<option data-offset='-18000' value='Quito'>
|
||||
(GMT-05:00) Quito
|
||||
</option>
|
||||
<option data-offset='-14400' value='Eastern Time (US & Canada)'>
|
||||
(GMT-04:00) Eastern Time (US & Canada)
|
||||
</option>
|
||||
<option data-offset='-14400' value='Indiana (East)'>
|
||||
(GMT-04:00) Indiana (East)
|
||||
</option>
|
||||
<option data-offset='-14400' value='Caracas'>
|
||||
(GMT-04:00) Caracas
|
||||
</option>
|
||||
<option data-offset='-14400' value='La Paz'>
|
||||
(GMT-04:00) La Paz
|
||||
</option>
|
||||
<option data-offset='-14400' value='Georgetown'>
|
||||
(GMT-04:00) Georgetown
|
||||
</option>
|
||||
<option data-offset='-10800' value='Atlantic Time (Canada)'>
|
||||
(GMT-03:00) Atlantic Time (Canada)
|
||||
</option>
|
||||
<option data-offset='-10800' value='Santiago'>
|
||||
(GMT-03:00) Santiago
|
||||
</option>
|
||||
<option data-offset='-10800' value='Brasilia'>
|
||||
(GMT-03:00) Brasilia
|
||||
</option>
|
||||
<option data-offset='-10800' value='Buenos Aires'>
|
||||
(GMT-03:00) Buenos Aires
|
||||
</option>
|
||||
<option data-offset='-9000' value='Newfoundland'>
|
||||
(GMT-02:30) Newfoundland
|
||||
</option>
|
||||
<option data-offset='-7200' value='Greenland'>
|
||||
(GMT-02:00) Greenland
|
||||
</option>
|
||||
<option data-offset='-7200' value='Mid-Atlantic'>
|
||||
(GMT-02:00) Mid-Atlantic
|
||||
</option>
|
||||
<option data-offset='-3600' value='Cape Verde Is.'>
|
||||
(GMT-01:00) Cape Verde Is.
|
||||
</option>
|
||||
<option data-offset='0' value='Azores'>
|
||||
(GMT) Azores
|
||||
</option>
|
||||
<option data-offset='0' value='Monrovia'>
|
||||
(GMT) Monrovia
|
||||
</option>
|
||||
<option data-offset='0' value='UTC'>
|
||||
(GMT) UTC
|
||||
</option>
|
||||
<option data-offset='3600' value='Dublin'>
|
||||
(GMT+01:00) Dublin
|
||||
</option>
|
||||
<option data-offset='3600' value='Edinburgh'>
|
||||
(GMT+01:00) Edinburgh
|
||||
</option>
|
||||
<option data-offset='3600' value='Lisbon'>
|
||||
(GMT+01:00) Lisbon
|
||||
</option>
|
||||
<option data-offset='3600' value='London'>
|
||||
(GMT+01:00) London
|
||||
</option>
|
||||
<option data-offset='3600' value='Casablanca'>
|
||||
(GMT+01:00) Casablanca
|
||||
</option>
|
||||
<option data-offset='3600' value='West Central Africa'>
|
||||
(GMT+01:00) West Central Africa
|
||||
</option>
|
||||
<option data-offset='7200' value='Belgrade'>
|
||||
(GMT+02:00) Belgrade
|
||||
</option>
|
||||
<option data-offset='7200' value='Bratislava'>
|
||||
(GMT+02:00) Bratislava
|
||||
</option>
|
||||
<option data-offset='7200' value='Budapest'>
|
||||
(GMT+02:00) Budapest
|
||||
</option>
|
||||
<option data-offset='7200' value='Ljubljana'>
|
||||
(GMT+02:00) Ljubljana
|
||||
</option>
|
||||
<option data-offset='7200' value='Prague'>
|
||||
(GMT+02:00) Prague
|
||||
</option>
|
||||
<option data-offset='7200' value='Sarajevo'>
|
||||
(GMT+02:00) Sarajevo
|
||||
</option>
|
||||
<option data-offset='7200' value='Skopje'>
|
||||
(GMT+02:00) Skopje
|
||||
</option>
|
||||
<option data-offset='7200' value='Warsaw'>
|
||||
(GMT+02:00) Warsaw
|
||||
</option>
|
||||
<option data-offset='7200' value='Zagreb'>
|
||||
(GMT+02:00) Zagreb
|
||||
</option>
|
||||
<option data-offset='7200' value='Brussels'>
|
||||
(GMT+02:00) Brussels
|
||||
</option>
|
||||
<option data-offset='7200' value='Copenhagen'>
|
||||
(GMT+02:00) Copenhagen
|
||||
</option>
|
||||
<option data-offset='7200' value='Madrid'>
|
||||
(GMT+02:00) Madrid
|
||||
</option>
|
||||
<option data-offset='7200' value='Paris'>
|
||||
(GMT+02:00) Paris
|
||||
</option>
|
||||
<option data-offset='7200' value='Amsterdam'>
|
||||
(GMT+02:00) Amsterdam
|
||||
</option>
|
||||
<option data-offset='7200' value='Berlin'>
|
||||
(GMT+02:00) Berlin
|
||||
</option>
|
||||
<option data-offset='7200' value='Bern'>
|
||||
(GMT+02:00) Bern
|
||||
</option>
|
||||
<option data-offset='7200' value='Rome'>
|
||||
(GMT+02:00) Rome
|
||||
</option>
|
||||
<option data-offset='7200' value='duotone'>
|
||||
(GMT+02:00) duotone
|
||||
</option>
|
||||
<option data-offset='7200' value='Vienna'>
|
||||
(GMT+02:00) Vienna
|
||||
</option>
|
||||
<option data-offset='7200' value='Cairo'>
|
||||
(GMT+02:00) Cairo
|
||||
</option>
|
||||
<option data-offset='7200' value='Harare'>
|
||||
(GMT+02:00) Harare
|
||||
</option>
|
||||
<option data-offset='7200' value='Pretoria'>
|
||||
(GMT+02:00) Pretoria
|
||||
</option>
|
||||
<option data-offset='10800' value='Bucharest'>
|
||||
(GMT+03:00) Bucharest
|
||||
</option>
|
||||
<option data-offset='10800' value='Helsinki'>
|
||||
(GMT+03:00) Helsinki
|
||||
</option>
|
||||
<option data-offset='10800' value='Kiev'>
|
||||
(GMT+03:00) Kiev
|
||||
</option>
|
||||
<option data-offset='10800' value='Kyiv'>
|
||||
(GMT+03:00) Kyiv
|
||||
</option>
|
||||
<option data-offset='10800' value='Riga'>
|
||||
(GMT+03:00) Riga
|
||||
</option>
|
||||
<option data-offset='10800' value='Sofia'>
|
||||
(GMT+03:00) Sofia
|
||||
</option>
|
||||
<option data-offset='10800' value='Tallinn'>
|
||||
(GMT+03:00) Tallinn
|
||||
</option>
|
||||
<option data-offset='10800' value='Vilnius'>
|
||||
(GMT+03:00) Vilnius
|
||||
</option>
|
||||
<option data-offset='10800' value='Athens'>
|
||||
(GMT+03:00) Athens
|
||||
</option>
|
||||
<option data-offset='10800' value='Istanbul'>
|
||||
(GMT+03:00) Istanbul
|
||||
</option>
|
||||
<option data-offset='10800' value='Minsk'>
|
||||
(GMT+03:00) Minsk
|
||||
</option>
|
||||
<option data-offset='10800' value='Jerusalem'>
|
||||
(GMT+03:00) Jerusalem
|
||||
</option>
|
||||
<option data-offset='10800' value='Moscow'>
|
||||
(GMT+03:00) Moscow
|
||||
</option>
|
||||
<option data-offset='10800' value='St. Petersburg'>
|
||||
(GMT+03:00) St. Petersburg
|
||||
</option>
|
||||
<option data-offset='10800' value='Volgograd'>
|
||||
(GMT+03:00) Volgograd
|
||||
</option>
|
||||
<option data-offset='10800' value='Kuwait'>
|
||||
(GMT+03:00) Kuwait
|
||||
</option>
|
||||
<option data-offset='10800' value='Riyadh'>
|
||||
(GMT+03:00) Riyadh
|
||||
</option>
|
||||
<option data-offset='10800' value='Nairobi'>
|
||||
(GMT+03:00) Nairobi
|
||||
</option>
|
||||
<option data-offset='10800' value='Baghdad'>
|
||||
(GMT+03:00) Baghdad
|
||||
</option>
|
||||
<option data-offset='14400' value='Abu Dhabi'>
|
||||
(GMT+04:00) Abu Dhabi
|
||||
</option>
|
||||
<option data-offset='14400' value='Muscat'>
|
||||
(GMT+04:00) Muscat
|
||||
</option>
|
||||
<option data-offset='14400' value='Baku'>
|
||||
(GMT+04:00) Baku
|
||||
</option>
|
||||
<option data-offset='14400' value='Tbilisi'>
|
||||
(GMT+04:00) Tbilisi
|
||||
</option>
|
||||
<option data-offset='14400' value='Yerevan'>
|
||||
(GMT+04:00) Yerevan
|
||||
</option>
|
||||
<option data-offset='16200' value='Tehran'>
|
||||
(GMT+04:30) Tehran
|
||||
</option>
|
||||
<option data-offset='16200' value='Kabul'>
|
||||
(GMT+04:30) Kabul
|
||||
</option>
|
||||
<option data-offset='18000' value='Ekaterinburg'>
|
||||
(GMT+05:00) Ekaterinburg
|
||||
</option>
|
||||
<option data-offset='18000' value='Islamabad'>
|
||||
(GMT+05:00) Islamabad
|
||||
</option>
|
||||
<option data-offset='18000' value='Karachi'>
|
||||
(GMT+05:00) Karachi
|
||||
</option>
|
||||
<option data-offset='18000' value='Tashkent'>
|
||||
(GMT+05:00) Tashkent
|
||||
</option>
|
||||
<option data-offset='19800' value='Chennai'>
|
||||
(GMT+05:30) Chennai
|
||||
</option>
|
||||
<option data-offset='19800' value='Kolkata'>
|
||||
(GMT+05:30) Kolkata
|
||||
</option>
|
||||
<option data-offset='19800' value='Mumbai'>
|
||||
(GMT+05:30) Mumbai
|
||||
</option>
|
||||
<option data-offset='19800' value='New Delhi'>
|
||||
(GMT+05:30) New Delhi
|
||||
</option>
|
||||
<option data-offset='19800' value='Sri Jayawardenepura'>
|
||||
(GMT+05:30) Sri Jayawardenepura
|
||||
</option>
|
||||
<option data-offset='20700' value='Kathmandu'>
|
||||
(GMT+05:45) Kathmandu
|
||||
</option>
|
||||
<option data-offset='21600' value='Astana'>
|
||||
(GMT+06:00) Astana
|
||||
</option>
|
||||
<option data-offset='21600' value='Dhaka'>
|
||||
(GMT+06:00) Dhaka
|
||||
</option>
|
||||
<option data-offset='21600' value='Almaty'>
|
||||
(GMT+06:00) Almaty
|
||||
</option>
|
||||
<option data-offset='21600' value='Urumqi'>
|
||||
(GMT+06:00) Urumqi
|
||||
</option>
|
||||
<option data-offset='23400' value='Rangoon'>
|
||||
(GMT+06:30) Rangoon
|
||||
</option>
|
||||
<option data-offset='25200' value='Novosibirsk'>
|
||||
(GMT+07:00) Novosibirsk
|
||||
</option>
|
||||
<option data-offset='25200' value='Bangkok'>
|
||||
(GMT+07:00) Bangkok
|
||||
</option>
|
||||
<option data-offset='25200' value='Hanoi'>
|
||||
(GMT+07:00) Hanoi
|
||||
</option>
|
||||
<option data-offset='25200' value='Jakarta'>
|
||||
(GMT+07:00) Jakarta
|
||||
</option>
|
||||
<option data-offset='25200' value='Krasnoyarsk'>
|
||||
(GMT+07:00) Krasnoyarsk
|
||||
</option>
|
||||
<option data-offset='28800' value='Beijing'>
|
||||
(GMT+08:00) Beijing
|
||||
</option>
|
||||
<option data-offset='28800' value='Chongqing'>
|
||||
(GMT+08:00) Chongqing
|
||||
</option>
|
||||
<option data-offset='28800' value='Hong Kong'>
|
||||
(GMT+08:00) Hong Kong
|
||||
</option>
|
||||
<option data-offset='28800' value='Kuala Lumpur'>
|
||||
(GMT+08:00) Kuala Lumpur
|
||||
</option>
|
||||
<option data-offset='28800' value='Singapore'>
|
||||
(GMT+08:00) Singapore
|
||||
</option>
|
||||
<option data-offset='28800' value='Taipei'>
|
||||
(GMT+08:00) Taipei
|
||||
</option>
|
||||
<option data-offset='28800' value='Perth'>
|
||||
(GMT+08:00) Perth
|
||||
</option>
|
||||
<option data-offset='28800' value='Irkutsk'>
|
||||
(GMT+08:00) Irkutsk
|
||||
</option>
|
||||
<option data-offset='28800' value='Ulaan Bataar'>
|
||||
(GMT+08:00) Ulaan Bataar
|
||||
</option>
|
||||
<option data-offset='32400' value='Seoul'>
|
||||
(GMT+09:00) Seoul
|
||||
</option>
|
||||
<option data-offset='32400' value='Osaka'>
|
||||
(GMT+09:00) Osaka
|
||||
</option>
|
||||
<option data-offset='32400' value='Sapporo'>
|
||||
(GMT+09:00) Sapporo
|
||||
</option>
|
||||
<option data-offset='32400' value='Tokyo'>
|
||||
(GMT+09:00) Tokyo
|
||||
</option>
|
||||
<option data-offset='32400' value='Yakutsk'>
|
||||
(GMT+09:00) Yakutsk
|
||||
</option>
|
||||
<option data-offset='34200' value='Darwin'>
|
||||
(GMT+09:30) Darwin
|
||||
</option>
|
||||
<option data-offset='34200' value='Adelaide'>
|
||||
(GMT+09:30) Adelaide
|
||||
</option>
|
||||
<option data-offset='36000' value='Canberra'>
|
||||
(GMT+10:00) Canberra
|
||||
</option>
|
||||
<option data-offset='36000' value='Melbourne'>
|
||||
(GMT+10:00) Melbourne
|
||||
</option>
|
||||
<option data-offset='36000' value='Sydney'>
|
||||
(GMT+10:00) Sydney
|
||||
</option>
|
||||
<option data-offset='36000' value='Brisbane'>
|
||||
(GMT+10:00) Brisbane
|
||||
</option>
|
||||
<option data-offset='36000' value='Hobart'>
|
||||
(GMT+10:00) Hobart
|
||||
</option>
|
||||
<option data-offset='36000' value='Vladivostok'>
|
||||
(GMT+10:00) Vladivostok
|
||||
</option>
|
||||
<option data-offset='36000' value='Guam'>
|
||||
(GMT+10:00) Guam
|
||||
</option>
|
||||
<option data-offset='36000' value='Port Moresby'>
|
||||
(GMT+10:00) Port Moresby
|
||||
</option>
|
||||
<option data-offset='36000' value='Solomon Is.'>
|
||||
(GMT+10:00) Solomon Is.
|
||||
</option>
|
||||
<option data-offset='39600' value='Magadan'>
|
||||
(GMT+11:00) Magadan
|
||||
</option>
|
||||
<option data-offset='39600' value='New Caledonia'>
|
||||
(GMT+11:00) New Caledonia
|
||||
</option>
|
||||
<option data-offset='43200' value='Fiji'>
|
||||
(GMT+12:00) Fiji
|
||||
</option>
|
||||
<option data-offset='43200' value='Kamchatka'>
|
||||
(GMT+12:00) Kamchatka
|
||||
</option>
|
||||
<option data-offset='43200' value='Marshall Is.'>
|
||||
(GMT+12:00) Marshall Is.
|
||||
</option>
|
||||
<option data-offset='43200' value='Auckland'>
|
||||
(GMT+12:00) Auckland
|
||||
</option>
|
||||
<option data-offset='43200' value='Wellington'>
|
||||
(GMT+12:00) Wellington
|
||||
</option>
|
||||
<option data-offset='46800' value="Nuku'alofa">
|
||||
(GMT+13:00) Nuku'alofa
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Form row */}
|
||||
|
||||
{/* begin::Form row */}
|
||||
<div className='row align-items-center mb-3'>
|
||||
<label className='col-lg-3 col-form-label'>Communication</label>
|
||||
<div className='col-lg-9'>
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='form-check form-check-custom form-check-solid me-5'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='inlineCheckbox1'
|
||||
checked={data.communications.email}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
communications: {
|
||||
...data.communications,
|
||||
email: !data.communications.email,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold' htmlFor='inlineCheckbox1'>
|
||||
Email
|
||||
</label>
|
||||
</div>
|
||||
<div className='form-check form-check-custom form-check-solid me-5'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='inlineCheckbox2'
|
||||
checked={data.communications.sms}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
communications: {
|
||||
...data.communications,
|
||||
sms: !data.communications.sms,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold' htmlFor='inlineCheckbox2'>
|
||||
SMS
|
||||
</label>
|
||||
</div>
|
||||
<div className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='inlineCheckbox3'
|
||||
checked={data.communications.phone}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
communications: {
|
||||
...data.communications,
|
||||
phone: !data.communications.phone,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold' htmlFor='inlineCheckbox3'>
|
||||
Phone
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* begin::Form row */}
|
||||
|
||||
<div className='separator separator-dashed my-10'></div>
|
||||
|
||||
{/* begin::Form row */}
|
||||
<div className='row mb-8'>
|
||||
<label className='col-lg-3 col-form-label'>Login verification</label>
|
||||
<div className='col-lg-9'>
|
||||
<button type='button' className='btn btn-light-primary fw-bold btn-sm'>
|
||||
Setup login verification
|
||||
</button>
|
||||
<div className='form-text'>
|
||||
After you log in, you will be asked for additional information to confirm your
|
||||
identity and protect your account from being compromised.
|
||||
<a href='#' className='fw-bold'>
|
||||
Learn more
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Form row */}
|
||||
|
||||
{/* begin::Form row */}
|
||||
<div className='row mb-13'>
|
||||
<label className='col-lg-3 col-form-label'>Password reset verification</label>
|
||||
<div className='col-lg-9'>
|
||||
<div className='form-check form-check-custom form-check-solid me-5'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='customCheck5'
|
||||
checked={data.requireInfo}
|
||||
onChange={() => updateData({requireInfo: !data.requireInfo})}
|
||||
/>
|
||||
<label className='form-check-label fw-bold' htmlFor='customCheck5'>
|
||||
Require personal information to reset your password.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className='form-text py-2'>
|
||||
For extra security, this requires you to confirm your email or phone number when you
|
||||
reset your password.
|
||||
<a href='#' className='fw-boldk'>
|
||||
Learn more
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
|
||||
<button type='button' className='btn btn-light-danger fw-bold btn-sm'>
|
||||
Deactivate your account ?
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Form row */}
|
||||
|
||||
{/* begin::Form row */}
|
||||
<div className='row'>
|
||||
<label className='col-lg-3 col-form-label'></label>
|
||||
<div className='col-lg-9'>
|
||||
<button type='reset' className='btn btn-primary fw-bolder px-6 py-3 me-3'>
|
||||
Save Changes
|
||||
</button>
|
||||
<button
|
||||
type='reset'
|
||||
className='btn btn-color-gray-600 btn-active-light-primary fw-bolder px-6 py-3'
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Form row */}
|
||||
</div>
|
||||
</form>
|
||||
{/* end::Form */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
export interface IAccount {
|
||||
username: string
|
||||
email: string
|
||||
language: string
|
||||
timeZone: string
|
||||
communications: {
|
||||
email: boolean
|
||||
sms: boolean
|
||||
phone: boolean
|
||||
}
|
||||
requireInfo: boolean
|
||||
}
|
||||
|
||||
export const defaultAccount: IAccount = {
|
||||
username: 'max_stone',
|
||||
email: 'nick.watson@loop.com',
|
||||
language: 'en',
|
||||
timeZone: 'Alaska',
|
||||
communications: {
|
||||
email: false,
|
||||
sms: true,
|
||||
phone: false,
|
||||
},
|
||||
requireInfo: false,
|
||||
}
|
||||
@@ -0,0 +1,347 @@
|
||||
import {useState} from 'react'
|
||||
import {defaultSettings, ISettings} from './SettingsModel'
|
||||
|
||||
export function Settings() {
|
||||
const [data, setData] = useState<ISettings>(defaultSettings)
|
||||
const updateData = (fieldsToUpdate: Partial<ISettings>) => {
|
||||
const updatedData = {...data, ...fieldsToUpdate}
|
||||
setData(updatedData)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='card'>
|
||||
{/* begin::Form*/}
|
||||
<form className='form d-flex flex-center'>
|
||||
<div className='card-body mw-800px py-20'>
|
||||
<div className='row'>
|
||||
<label className='col-xl-3'></label>
|
||||
<div className='col-lg-9 col-xl-6'>
|
||||
<h5 className='fw-bold mb-6'>Setup Email Notification:</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-5 row align-items-center mb-2'>
|
||||
<label className='col-xl-3 col-lg-3 col-form-label fw-bold text-start text-lg-end'>
|
||||
Email Notifications
|
||||
</label>
|
||||
<div className='col-lg-9 col-xl-6 d-flex align-items-center'>
|
||||
<div className='form-check form-check-custom form-check-solid form-switch'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
checked={data.setupEmailNotifications.emailNotifications}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
setupEmailNotifications: {
|
||||
...data.setupEmailNotifications,
|
||||
emailNotifications: !data.setupEmailNotifications.emailNotifications,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-5 row align-items-center'>
|
||||
<label className='col-xl-3 col-lg-3 col-form-label fw-bold text-start text-lg-end'>
|
||||
Send Copy To Personal Email
|
||||
</label>
|
||||
<div className='col-lg-9 col-xl-6'>
|
||||
<div className='form-check form-check-custom form-check-solid form-switch'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
checked={data.setupEmailNotifications.sendCopyToPersonalEmail}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
setupEmailNotifications: {
|
||||
...data.setupEmailNotifications,
|
||||
sendCopyToPersonalEmail:
|
||||
!data.setupEmailNotifications.sendCopyToPersonalEmail,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='separator my-10'></div>
|
||||
|
||||
<div className='row'>
|
||||
<label className='col-xl-3'></label>
|
||||
<div className='col-lg-9 col-xl-6'>
|
||||
<h5 className='fw-bold mb-6'>Activity Related Emails:</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-8 row'>
|
||||
<label className='col-xl-3 col-lg-3 col-form-label fw-bold text-start text-lg-end'>
|
||||
When To Email
|
||||
</label>
|
||||
<div className='col-lg-9 col-xl-6'>
|
||||
<div className='form-check form-check-custom form-check-solid mb-3'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='kt_checkbox_1'
|
||||
checked={data.activityRelatedEmail.whenToEmail.youHaveNewNotifications}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
activityRelatedEmail: {
|
||||
...data.activityRelatedEmail,
|
||||
whenToEmail: {
|
||||
...data.activityRelatedEmail.whenToEmail,
|
||||
youHaveNewNotifications:
|
||||
!data.activityRelatedEmail.whenToEmail.youHaveNewNotifications,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold text-gray-600' htmlFor='kt_checkbox_1'>
|
||||
You have new notifications
|
||||
</label>
|
||||
</div>
|
||||
<div className='form-check form-check-custom form-check-solid mb-3'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='kt_checkbox_2'
|
||||
checked={data.activityRelatedEmail.whenToEmail.youAreADirectMessage}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
activityRelatedEmail: {
|
||||
...data.activityRelatedEmail,
|
||||
whenToEmail: {
|
||||
...data.activityRelatedEmail.whenToEmail,
|
||||
youAreADirectMessage:
|
||||
!data.activityRelatedEmail.whenToEmail.youAreADirectMessage,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold text-gray-600' htmlFor='kt_checkbox_2'>
|
||||
You're sent a direct message
|
||||
</label>
|
||||
</div>
|
||||
<div className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='kt_checkbox_3'
|
||||
checked={data.activityRelatedEmail.whenToEmail.someoneAddsYouAsAConnection}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
activityRelatedEmail: {
|
||||
...data.activityRelatedEmail,
|
||||
whenToEmail: {
|
||||
...data.activityRelatedEmail.whenToEmail,
|
||||
someoneAddsYouAsAConnection:
|
||||
!data.activityRelatedEmail.whenToEmail.someoneAddsYouAsAConnection,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold text-gray-600' htmlFor='kt_checkbox_3'>
|
||||
Someone adds you as a connection
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-8 row'>
|
||||
<label className='col-xl-3 col-lg-3 col-form-label fw-bold text-start text-lg-end'>
|
||||
When To Escalate Emails
|
||||
</label>
|
||||
<div className='col-lg-9 col-xl-6'>
|
||||
<div className='form-check form-check-custom form-check-solid mb-3'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='kt_checkbox_4'
|
||||
checked={data.activityRelatedEmail.whenToEscalateEmails.uponNewOrder}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
activityRelatedEmail: {
|
||||
...data.activityRelatedEmail,
|
||||
whenToEscalateEmails: {
|
||||
...data.activityRelatedEmail.whenToEscalateEmails,
|
||||
uponNewOrder:
|
||||
!data.activityRelatedEmail.whenToEscalateEmails.uponNewOrder,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold text-gray-600' htmlFor='kt_checkbox_4'>
|
||||
Upon new order
|
||||
</label>
|
||||
</div>
|
||||
<div className='form-check form-check-custom form-check-solid mb-3'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='kt_checkbox_5'
|
||||
checked={data.activityRelatedEmail.whenToEscalateEmails.newMembershipApproval}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
activityRelatedEmail: {
|
||||
...data.activityRelatedEmail,
|
||||
whenToEscalateEmails: {
|
||||
...data.activityRelatedEmail.whenToEscalateEmails,
|
||||
newMembershipApproval:
|
||||
!data.activityRelatedEmail.whenToEscalateEmails.newMembershipApproval,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold text-gray-600' htmlFor='kt_checkbox_5'>
|
||||
New membership approval
|
||||
</label>
|
||||
</div>
|
||||
<div className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='kt_checkbox_6'
|
||||
checked={data.activityRelatedEmail.whenToEscalateEmails.memberRegistration}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
activityRelatedEmail: {
|
||||
...data.activityRelatedEmail,
|
||||
whenToEscalateEmails: {
|
||||
...data.activityRelatedEmail.whenToEscalateEmails,
|
||||
memberRegistration:
|
||||
!data.activityRelatedEmail.whenToEscalateEmails.memberRegistration,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold text-gray-600' htmlFor='kt_checkbox_6'>
|
||||
Member registration
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='separator my-10'></div>
|
||||
|
||||
<div className='row'>
|
||||
<label className='col-xl-3'></label>
|
||||
<div className='col-lg-9 col-xl-6'>
|
||||
<h5 className='fw-bold mb-6'>Updates From Keenthemes:</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-8 row'>
|
||||
<label className='col-xl-3 col-lg-3 col-form-label fw-bold text-start text-lg-end'>
|
||||
Email You With
|
||||
</label>
|
||||
<div className='col-lg-9 col-xl-6'>
|
||||
<div className='form-check form-check-custom form-check-solid mb-3'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='kt_checkbox_7'
|
||||
checked={data.updatesFromKeenthemes.newsAboutKTProducts}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
updatesFromKeenthemes: {
|
||||
...data.updatesFromKeenthemes,
|
||||
newsAboutKTProducts: !data.updatesFromKeenthemes.newsAboutKTProducts,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold text-gray-600' htmlFor='kt_checkbox_7'>
|
||||
News about Keenthemes products and feature updates
|
||||
</label>
|
||||
</div>
|
||||
<div className='form-check form-check-custom form-check-solid mb-3'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='kt_checkbox_8'
|
||||
checked={data.updatesFromKeenthemes.tipsOnGettingMore}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
updatesFromKeenthemes: {
|
||||
...data.updatesFromKeenthemes,
|
||||
tipsOnGettingMore: !data.updatesFromKeenthemes.tipsOnGettingMore,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold text-gray-600' htmlFor='kt_checkbox_8'>
|
||||
Tips on getting more out of Keen
|
||||
</label>
|
||||
</div>
|
||||
<div className='form-check form-check-custom form-check-solid mb-3'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='kt_checkbox_9'
|
||||
checked={data.updatesFromKeenthemes.thingsYouMissed}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
updatesFromKeenthemes: {
|
||||
...data.updatesFromKeenthemes,
|
||||
tipsOnGettingMore: !data.updatesFromKeenthemes.thingsYouMissed,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold text-gray-600' htmlFor='kt_checkbox_9'>
|
||||
Things you missed since you last logged into Keen
|
||||
</label>
|
||||
</div>
|
||||
<div className='form-check form-check-custom form-check-solid'>
|
||||
<input
|
||||
className='form-check-input'
|
||||
type='checkbox'
|
||||
id='kt_checkbox_10'
|
||||
checked={data.updatesFromKeenthemes.newsAboutKTPartners}
|
||||
onChange={() =>
|
||||
updateData({
|
||||
updatesFromKeenthemes: {
|
||||
...data.updatesFromKeenthemes,
|
||||
newsAboutKTPartners: !data.updatesFromKeenthemes.newsAboutKTPartners,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label className='form-check-label fw-bold text-gray-600' htmlFor='kt_checkbox_10'>
|
||||
News about Keenthemes on partner products and other services
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* begin::Form Group*/}
|
||||
<div className='mb-8 row pt-10'>
|
||||
<label className='col-lg-3 col-form-label'></label>
|
||||
<div className='col-lg-9'>
|
||||
<button type='reset' className='btn btn-primary fw-bolder px-6 py-3 me-3'>
|
||||
Save Changes
|
||||
</button>
|
||||
<button
|
||||
type='reset'
|
||||
className='btn btn-color-gray-600 btn-active-light-primary fw-bolder px-6 py-3'
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Form Group*/}
|
||||
</div>
|
||||
</form>
|
||||
{/* end::Form*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
export interface ISettings {
|
||||
setupEmailNotifications: {
|
||||
emailNotifications: boolean
|
||||
sendCopyToPersonalEmail: boolean
|
||||
}
|
||||
activityRelatedEmail: {
|
||||
whenToEmail: {
|
||||
youHaveNewNotifications: boolean
|
||||
youAreADirectMessage: boolean
|
||||
someoneAddsYouAsAConnection: boolean
|
||||
}
|
||||
whenToEscalateEmails: {
|
||||
uponNewOrder: boolean
|
||||
newMembershipApproval: boolean
|
||||
memberRegistration: boolean
|
||||
}
|
||||
}
|
||||
updatesFromKeenthemes: {
|
||||
newsAboutKTProducts: boolean
|
||||
tipsOnGettingMore: boolean
|
||||
thingsYouMissed: boolean
|
||||
newsAboutKTPartners: boolean
|
||||
}
|
||||
}
|
||||
|
||||
export const defaultSettings: ISettings = {
|
||||
setupEmailNotifications: {
|
||||
emailNotifications: true,
|
||||
sendCopyToPersonalEmail: false,
|
||||
},
|
||||
activityRelatedEmail: {
|
||||
whenToEmail: {
|
||||
youHaveNewNotifications: true,
|
||||
youAreADirectMessage: false,
|
||||
someoneAddsYouAsAConnection: false,
|
||||
},
|
||||
whenToEscalateEmails: {
|
||||
uponNewOrder: true,
|
||||
newMembershipApproval: false,
|
||||
memberRegistration: false,
|
||||
},
|
||||
},
|
||||
updatesFromKeenthemes: {
|
||||
newsAboutKTProducts: false,
|
||||
tipsOnGettingMore: false,
|
||||
thingsYouMissed: false,
|
||||
newsAboutKTPartners: false,
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user