initial FBS admin

This commit is contained in:
2021-07-12 09:41:26 +05:30
commit a64f3fdeaf
64 changed files with 2582 additions and 0 deletions

View File

@ -0,0 +1,46 @@
import React, { Suspense } from 'react'
import {
Redirect,
Route,
Switch
} from 'react-router-dom'
import { CContainer, CFade } from '@coreui/react'
// routes config
import routes from '../routes'
const loading = (
<div className="pt-3 text-center">
<div className="sk-spinner sk-spinner-pulse"></div>
</div>
)
const TheContent = () => {
return (
<main className="c-main">
<CContainer fluid>
<Suspense fallback={loading}>
<Switch>
{routes.map((route, idx) => {
return route.component && (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
<CFade>
<route.component {...props} />
</CFade>
)} />
)
})}
<Redirect from="/" to="/dashboard" />
</Switch>
</Suspense>
</CContainer>
</main>
)
}
export default React.memo(TheContent)

View File

@ -0,0 +1,19 @@
import React from 'react'
import { CFooter } from '@coreui/react'
const TheFooter = () => {
return (
<CFooter fixed={false}>
<div>
<a href="sumasen.net" target="_blank" rel="noopener noreferrer">FBS</a>
<span className="ml-1">&copy; 2021 DigitalVox.</span>
</div>
<div className="mfs-auto">
<span className="mr-1">Powered by</span>
<a href="#" target="_blank" rel="noopener noreferrer">DigitalVox</a>
</div>
</CFooter>
)
}
export default React.memo(TheFooter)

View File

@ -0,0 +1,94 @@
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {
CHeader,
CToggler,
CHeaderBrand,
CHeaderNav,
CHeaderNavItem,
CHeaderNavLink,
CSubheader,
CBreadcrumbRouter,
CLink
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
// routes config
import routes from '../routes'
import {
TheHeaderDropdown,
TheHeaderDropdownMssg,
TheHeaderDropdownNotif,
TheHeaderDropdownTasks
} from './index'
const TheHeader = () => {
const dispatch = useDispatch()
const sidebarShow = useSelector(state => state.sidebarShow)
const toggleSidebar = () => {
const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
dispatch({type: 'set', sidebarShow: val})
}
const toggleSidebarMobile = () => {
const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
dispatch({type: 'set', sidebarShow: val})
}
return (
<CHeader withSubheader>
<CToggler
inHeader
className="ml-md-3 d-lg-none"
onClick={toggleSidebarMobile}
/>
<CToggler
inHeader
className="ml-3 d-md-down-none"
onClick={toggleSidebar}
/>
<CHeaderBrand className="mx-auto d-lg-none" to="/">
{/* <CIcon name="logo" height="48" alt="Logo"/> */}
<h2>FBS</h2>
</CHeaderBrand>
<CHeaderNav className="d-md-down-none mr-auto">
<CHeaderNavItem className="px-3" >
<CHeaderNavLink to="/dashboard">Dashboard</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem className="px-3">
<CHeaderNavLink to="/users">Users</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem className="px-3">
<CHeaderNavLink>Settings</CHeaderNavLink>
</CHeaderNavItem>
</CHeaderNav>
<CSubheader className="px-3 justify-content-between">
<CBreadcrumbRouter
className="border-0 c-subheader-nav m-0 px-0 px-md-3"
routes={routes}
/>
<div className="d-md-down-none mfe-2 c-subheader-nav">
<CLink className="c-subheader-nav-link"href="#">
<CIcon name="cil-speech" alt="Settings" />
</CLink>
<CLink
className="c-subheader-nav-link"
aria-current="page"
to="/dashboard"
>
<CIcon name="cil-graph" alt="Dashboard" />&nbsp;Dashboard
</CLink>
<CLink className="c-subheader-nav-link" href="#">
<CIcon name="cil-settings" alt="Settings" />&nbsp;Settings
</CLink>
</div>
</CSubheader>
</CHeader>
)
}
export default TheHeader

View File

@ -0,0 +1,47 @@
import React from 'react'
import {
CBadge,
CDropdown,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CImg
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const TheHeaderDropdown = () => {
return (
<CDropdown
inNav
className="c-header-nav-items mx-2"
direction="down"
>
<CDropdownToggle className="c-header-nav-link" caret={false}>
<div className="c-avatar">
<CImg
src={'avatars/6.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
</div>
</CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownItem
header
tag="div"
color="light"
className="text-center"
>
<strong>Account</strong>
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-bell" className="mfe-2" />
Updates
<CBadge color="info" className="mfs-auto">42</CBadge>
</CDropdownItem>
</CDropdownMenu>
</CDropdown>
)
}
export default TheHeaderDropdown

View File

@ -0,0 +1,127 @@
import React from 'react'
import {
CBadge,
CDropdown,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CImg
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const TheHeaderDropdownMssg = () => {
const itemsCount = 4
return (
<CDropdown
inNav
className="c-header-nav-item mx-2"
direction="down"
>
<CDropdownToggle className="c-header-nav-link" caret={false}>
<CIcon name="cil-envelope-open" /><CBadge shape="pill" color="info">{itemsCount}</CBadge>
</CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownItem
header
tag="div"
color="light"
>
<strong>You have {itemsCount} messages</strong>
</CDropdownItem>
<CDropdownItem href="#">
<div className="message">
<div className="pt-3 mr-3 float-left">
<div className="c-avatar">
<CImg
src={'avatars/7.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
<span className="c-avatar-status bg-success"></span>
</div>
</div>
<div>
<small className="text-muted">John Doe</small>
<small className="text-muted float-right mt-1">Just now</small>
</div>
<div className="text-truncate font-weight-bold">
<span className="fa fa-exclamation text-danger"></span> Important message
</div>
<div className="small text-muted text-truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
</div>
</div>
</CDropdownItem>
<CDropdownItem href="#">
<div className="message">
<div className="pt-3 mr-3 float-left">
<div className="c-avatar">
<CImg
src={'avatars/6.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
<span className="c-avatar-status bg-warning"></span>
</div>
</div>
<div>
<small className="text-muted">Jane Dovve</small>
<small className="text-muted float-right mt-1">5 minutes ago</small>
</div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
</div>
</div>
</CDropdownItem>
<CDropdownItem href="#">
<div className="message">
<div className="pt-3 mr-3 float-left">
<div className="c-avatar">
<CImg
src={'avatars/5.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
<span className="c-avatar-status bg-danger"></span>
</div>
</div>
<div>
<small className="text-muted">Janet Doe</small>
<small className="text-muted float-right mt-1">1:52 PM</small>
</div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
</div>
</div>
</CDropdownItem>
<CDropdownItem href="#">
<div className="message">
<div className="pt-3 mr-3 float-left">
<div className="c-avatar">
<CImg
src={'avatars/4.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
<span className="c-avatar-status bg-info"></span>
</div>
</div>
<div>
<small className="text-muted">Joe Doe</small>
<small className="text-muted float-right mt-1">4:03 AM</small>
</div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
</div>
</div>
</CDropdownItem>
<CDropdownItem href="#" className="text-center border-top"><strong>View all messages</strong></CDropdownItem>
</CDropdownMenu>
</CDropdown>
)
}
export default TheHeaderDropdownMssg

View File

@ -0,0 +1,70 @@
import React from 'react'
import {
CBadge,
CDropdown,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CProgress
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const TheHeaderDropdownNotif = () => {
const itemsCount = 5
return (
<CDropdown
inNav
className="c-header-nav-item mx-2"
>
<CDropdownToggle className="c-header-nav-link" caret={false}>
<CIcon name="cil-bell"/>
<CBadge shape="pill" color="danger">{itemsCount}</CBadge>
</CDropdownToggle>
<CDropdownMenu placement="bottom-end" className="pt-0">
<CDropdownItem
header
tag="div"
className="text-center"
color="light"
>
<strong>You have {itemsCount} notifications</strong>
</CDropdownItem>
<CDropdownItem><CIcon name="cil-user-follow" className="mr-2 text-success" /> New user registered</CDropdownItem>
<CDropdownItem><CIcon name="cil-user-unfollow" className="mr-2 text-danger" /> User deleted</CDropdownItem>
<CDropdownItem><CIcon name="cil-chart-pie" className="mr-2 text-info" /> Sales report is ready</CDropdownItem>
<CDropdownItem><CIcon name="cil-basket" className="mr-2 text-primary" /> New client</CDropdownItem>
<CDropdownItem><CIcon name="cil-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem>
<CDropdownItem
header
tag="div"
color="light"
>
<strong>Server</strong>
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="text-uppercase mb-1">
<small><b>CPU Usage</b></small>
</div>
<CProgress size="xs" color="info" value={25} />
<small className="text-muted">348 Processes. 1/4 Cores.</small>
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="text-uppercase mb-1">
<small><b>Memory Usage</b></small>
</div>
<CProgress size="xs" color="warning" value={70} />
<small className="text-muted">11444GB/16384MB</small>
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="text-uppercase mb-1">
<small><b>SSD 1 Usage</b></small>
</div>
<CProgress size="xs" color="danger" value={90} />
<small className="text-muted">243GB/256GB</small>
</CDropdownItem>
</CDropdownMenu>
</CDropdown>
)
}
export default TheHeaderDropdownNotif

View File

@ -0,0 +1,59 @@
import React from 'react'
import {
CBadge,
CDropdown,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CProgress
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const TheHeaderDropdownTasks = () => {
const itemsCount = 5
return (
<CDropdown
inNav
className="c-header-nav-item mx-2"
>
<CDropdownToggle className="c-header-nav-link" caret={false}>
<CIcon name="cil-list" />
<CBadge shape="pill" color="warning">{itemsCount}</CBadge>
</CDropdownToggle>
<CDropdownMenu placement="bottom-end" className="pt-0">
<CDropdownItem
header
tag="div"
className="text-center"
color="light"
>
<strong>You have {itemsCount} pending tasks</strong>
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="small mb-1">Upgrade NPM &amp; Bower <span
className="float-right"><strong>0%</strong></span></div>
<CProgress size="xs" color="info" value={0} />
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="small mb-1">ReactJS Version <span className="float-right"><strong>25%</strong></span></div>
<CProgress size="xs" color="danger" value={25} />
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="small mb-1">VueJS Version <span className="float-right"><strong>50%</strong></span></div>
<CProgress size="xs" color="warning" value={50} />
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="small mb-1">Add new layouts <span className="float-right"><strong>75%</strong></span></div>
<CProgress size="xs" color="info" value={75} />
</CDropdownItem>
<CDropdownItem className="d-block">
<div className="small mb-1">Angular 2 Cli Version <span className="float-right"><strong>100%</strong></span></div>
<CProgress size="xs" color="success" value={100} />
</CDropdownItem>
<CDropdownItem className="text-center border-top"><strong>View all tasks</strong></CDropdownItem>
</CDropdownMenu>
</CDropdown>
)
}
export default TheHeaderDropdownTasks

View File

@ -0,0 +1,25 @@
import React from 'react'
import {
TheContent,
TheSidebar,
TheFooter,
TheHeader
} from './index'
const TheLayout = () => {
return (
<div className="c-app c-default-layout">
<TheSidebar/>
<div className="c-wrapper">
<TheHeader/>
<div className="c-body">
<TheContent/>
</div>
<TheFooter/>
</div>
</div>
)
}
export default TheLayout

View File

@ -0,0 +1,54 @@
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {
CCreateElement,
CSidebar,
CSidebarBrand,
CSidebarNav,
CSidebarNavDivider,
CSidebarNavTitle,
CSidebarMinimizer,
CSidebarNavDropdown,
CSidebarNavItem,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
// sidebar nav config
import navigation from './_nav'
const TheSidebar = () => {
const dispatch = useDispatch()
const show = useSelector(state => state.sidebarShow)
return (
<CSidebar
show={show}
onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
>
<CSidebarBrand className="d-md-down-none" to="/">
<h2>FBS</h2>
<CIcon
className="c-sidebar-brand-minimized"
name="sygnet"
height={35}
/>
</CSidebarBrand>
<CSidebarNav>
<CCreateElement
items={navigation}
components={{
CSidebarNavDivider,
CSidebarNavDropdown,
CSidebarNavItem,
CSidebarNavTitle
}}
/>
</CSidebarNav>
<CSidebarMinimizer className="c-d-md-down-none"/>
</CSidebar>
)
}
export default React.memo(TheSidebar)

45
src/containers/_nav.js Normal file
View File

@ -0,0 +1,45 @@
import React from 'react'
import CIcon from '@coreui/icons-react'
const _nav = [{
_tag: 'CSidebarNavItem',
name: 'Dashboard',
to: '/dashboard',
icon: < CIcon name = "cil-speedometer"
customClasses = "c-sidebar-nav-icon" / >
},
{
_tag: 'CSidebarNavTitle',
_children: ['Reports']
},
{
_tag: 'CSidebarNavItem',
name: 'Download reports',
to: '/boxdisplacement',
icon: 'cil-drop',
},
// {
// _tag: 'CSidebarNavTitle',
// _children: ['Components']
// },
// {
// _tag: 'CSidebarNavDropdown',
// name: 'Base',
// route: '/base',
// icon: 'cil-puzzle',
// _children: [
// {
// _tag: 'CSidebarNavItem',
// name: 'Breadcrumb',
// to: '/base/breadcrumbs',
// },
// {
// _tag: 'CSidebarNavItem',
// name: 'Tooltips',
// to: '/base/tooltips',
// },
// ],
// }
]
export default _nav

21
src/containers/index.js Normal file
View File

@ -0,0 +1,21 @@
import TheContent from './TheContent'
import TheFooter from './TheFooter'
import TheHeader from './TheHeader'
import TheHeaderDropdown from './TheHeaderDropdown'
import TheHeaderDropdownMssg from './TheHeaderDropdownMssg'
import TheHeaderDropdownNotif from './TheHeaderDropdownNotif'
import TheHeaderDropdownTasks from './TheHeaderDropdownTasks'
import TheLayout from './TheLayout'
import TheSidebar from './TheSidebar'
export {
TheContent,
TheFooter,
TheHeader,
TheHeaderDropdown,
TheHeaderDropdownMssg,
TheHeaderDropdownNotif,
TheHeaderDropdownTasks,
TheLayout,
TheSidebar
}