nouffer/FBSAdminTool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial FBS admin

Browse Source
This commit is contained in:
Mohamed Nouffer
2021-07-12 09:41:26 +05:30
commit a64f3fdeaf
64 changed files with 2582 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/App.js Normal file
View File

@ -0,0 +1,40 @@
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './scss/style.scss';
const loading = (
<div className="pt-3 text-center">
<div className="sk-spinner sk-spinner-pulse"></div>
</div>
)
// Containers
const TheLayout = React.lazy(() => import('./containers/TheLayout'));
// Pages
const Login = React.lazy(() => import('./views/pages/login/Login'));
const Register = React.lazy(() => import('./views/pages/register/Register'));
const Page404 = React.lazy(() => import('./views/pages/page404/Page404'));
const Page500 = React.lazy(() => import('./views/pages/page500/Page500'));
class App extends Component {
render() {
return (
<BrowserRouter>
<React.Suspense fallback={loading}>
<Switch>
<Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
<Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
<Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
<Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
<Route path="/" name="Home" render={props => <TheLayout {...props}/>} />
</Switch>
</React.Suspense>
</BrowserRouter>
);
}
}
export default App;

21
src/App.test.js Normal file
View File

@ -0,0 +1,21 @@
import React from 'react'
import { shallow } from 'enzyme/build'
import App from './App'
import ChartLineSimple from './views/charts/ChartLineSimple'
import Dashboard from './views/dashboard/Dashboard.js'
it('mounts App without crashing', () => {
const wrapper = shallow(<App/>)
wrapper.unmount()
})
it('mounts Dashboard without crashing', () => {
const wrapper = shallow(<Dashboard/>)
wrapper.unmount()
})
it('mounts Charts without crashing', () => {
const wrapper = shallow(<ChartLineSimple/> )
wrapper.unmount()
})

263
src/assets/icons/index.js Normal file
View File

@ -0,0 +1,263 @@
import { sygnet } from './sygnet'
import { logo } from './logo'
import { logoNegative } from './logo-negative'
import {
cibSkype,
cibFacebook,
cibTwitter,
cibLinkedin,
cibFlickr,
cibTumblr,
cibXing,
cibGithub,
cibStackoverflow,
cibYoutube,
cibDribbble,
cibInstagram,
cibPinterest,
cibVk,
cibYahoo,
cibBehance,
cibReddit,
cibVimeo,
cibCcMastercard,
cibCcVisa,
cibStripe,
cibPaypal,
cibGooglePay,
cibCcAmex
} from '@coreui/icons'
import {
cifUs,
cifBr,
cifIn,
cifFr,
cifEs,
cifPl
} from '@coreui/icons'
import {
cilAlignCenter,
cilAlignLeft,
cilAlignRight,
cilApplicationsSettings,
cilArrowRight,
cilArrowTop,
cilAsterisk,
cilBan,
cilBasket,
cilBell,
cilBold,
cilBookmark,
cilCalculator,
cilCalendar,
cilCloudDownload,
cilChartPie,
cilCheck,
cilChevronBottom,
cilChevronLeft,
cilChevronRight,
cilChevronTop,
cilCircle,
cilCheckCircle,
cilCode,
cilCommentSquare,
cilCreditCard,
cilCursor,
cilCursorMove,
cilDrop,
cilDollar,
cilEnvelopeClosed,
cilEnvelopeLetter,
cilEnvelopeOpen,
cilEuro,
cilGlobeAlt,
cilGrid,
cilFile,
cilFullscreen,
cilFullscreenExit,
cilGraph,
cilHome,
cilInbox,
cilIndentDecrease,
cilIndentIncrease,
cilInputPower,
cilItalic,
cilJustifyCenter,
cilJustifyLeft,
cilLaptop,
cilLayers,
cilLightbulb,
cilList,
cilListNumbered,
cilListRich,
cilLocationPin,
cilLockLocked,
cilMagnifyingGlass,
cilMap,
cilMoon,
cilNotes,
cilOptions,
cilPaperclip,
cilPaperPlane,
cilPencil,
cilPeople,
cilPhone,
cilPrint,
cilPuzzle,
cilSave,
cilScrubber,
cilSettings,
cilShare,
cilShareAll,
cilShareBoxed,
cilShieldAlt,
cilSpeech,
cilSpeedometer,
cilSpreadsheet,
cilStar,
cilSun,
cilTags,
cilTask,
cilTrash,
cilUnderline,
cilUser,
cilUserFemale,
cilUserFollow,
cilUserUnfollow,
cilX,
cilXCircle,
cilWarning,
cilEyedropper
} from '@coreui/icons'
export const icons = Object.assign({}, {
sygnet,
logo,
logoNegative
}, {
cilAlignCenter,
cilAlignLeft,
cilAlignRight,
cilApplicationsSettings,
cilArrowRight,
cilArrowTop,
cilAsterisk,
cilBan,
cilBasket,
cilBell,
cilBold,
cilBookmark,
cilCalculator,
cilCalendar,
cilCloudDownload,
cilChartPie,
cilCheck,
cilChevronBottom,
cilChevronLeft,
cilChevronRight,
cilChevronTop,
cilCircle,
cilCheckCircle,
cilCode,
cilCommentSquare,
cilCreditCard,
cilCursor,
cilCursorMove,
cilDrop,
cilDollar,
cilEnvelopeClosed,
cilEnvelopeLetter,
cilEnvelopeOpen,
cilEuro,
cilGlobeAlt,
cilGrid,
cilFile,
cilFullscreen,
cilFullscreenExit,
cilGraph,
cilHome,
cilInbox,
cilIndentDecrease,
cilIndentIncrease,
cilInputPower,
cilItalic,
cilJustifyCenter,
cilJustifyLeft,
cilLaptop,
cilLayers,
cilLightbulb,
cilList,
cilListNumbered,
cilListRich,
cilLocationPin,
cilLockLocked,
cilMagnifyingGlass,
cilMap,
cilMoon,
cilNotes,
cilOptions,
cilPaperclip,
cilPaperPlane,
cilPencil,
cilPeople,
cilPhone,
cilPrint,
cilPuzzle,
cilSave,
cilScrubber,
cilSettings,
cilShare,
cilShareAll,
cilShareBoxed,
cilShieldAlt,
cilSpeech,
cilSpeedometer,
cilSpreadsheet,
cilStar,
cilSun,
cilTags,
cilTask,
cilTrash,
cilUnderline,
cilUser,
cilUserFemale,
cilUserFollow,
cilUserUnfollow,
cilX,
cilXCircle,
cilWarning
}, {
cifUs,
cifBr,
cifIn,
cifFr,
cifEs,
cifPl
}, {
cibSkype,
cibFacebook,
cibTwitter,
cibLinkedin,
cibFlickr,
cibTumblr,
cibXing,
cibGithub,
cibStackoverflow,
cibYoutube,
cibDribbble,
cibInstagram,
cibPinterest,
cibVk,
cibYahoo,
cibBehance,
cibReddit,
cibVimeo,
cibCcMastercard,
cibCcVisa,
cibStripe,
cibPaypal,
cibGooglePay,
cibCcAmex,
cilEyedropper
})

30
src/assets/icons/logo-negative.js Normal file
View File

@ -0,0 +1,30 @@
export const logoNegative = ['608 134', `
<title>coreui react pro logo</title>
<g>
<g style="fill:#80d0ff;">
<path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
<path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
<path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
<path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
<path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
<path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
<path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
<path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
</g>
<g style="fill:#fff;">
<g>
<path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
<path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
</g>
<g>
<path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
<path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
<path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
<path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
<path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
<rect x="307.835" y="46" width="8" height="38" rx="1"/>
</g>
</g>
</g>
`]

29
src/assets/icons/logo.js Normal file
View File

@ -0,0 +1,29 @@
export const logo = ['608 134', `
<title>coreui react pro</title>
<g>
<g style="fill:#00a1ff">
<path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
<path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
<path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
<path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
<path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
<path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
<path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
<path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
</g>
<g style="fill:#3c4b64">
<g>
<path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
<path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
</g>
<g>
<path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
<path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
<path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
<path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
<path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
<rect x="307.835" y="46" width="8" height="38" rx="1"/>
</g>
</g>
</g>
`]

9
src/assets/icons/sygnet.js Normal file
View File

@ -0,0 +1,9 @@
export const sygnet = ['160 160', `
<title>coreui logo</title>
<g>
<g style="fill:#fff;">
<path d="M125,47.091,86,24.5743a12,12,0,0,0-12,0L35,47.091a12.0336,12.0336,0,0,0-6,10.3923v45.0334a12.0335,12.0335,0,0,0,6,10.3923l39,22.5166a11.9993,11.9993,0,0,0,12,0l39-22.5166a12.0335,12.0335,0,0,0,6-10.3923V57.4833A12.0336,12.0336,0,0,0,125,47.091Zm-2,55.4257a4,4,0,0,1-2,3.464L82,128.4974a4,4,0,0,1-4,0L39,105.9807a4,4,0,0,1-2-3.464V57.4833a4,4,0,0,1,2-3.4641L78,31.5025a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
<path d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>
</g>
</g>
`]

46
src/containers/TheContent.js Normal file
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)

19
src/containers/TheFooter.js Normal file
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)

94
src/containers/TheHeader.js Normal file
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

47
src/containers/TheHeaderDropdown.js Normal file
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

127
src/containers/TheHeaderDropdownMssg.js Normal file
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

70
src/containers/TheHeaderDropdownNotif.js Normal file
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

59
src/containers/TheHeaderDropdownTasks.js Normal file
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

25
src/containers/TheLayout.js Normal file
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

54
src/containers/TheSidebar.js Normal file
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
}

27
src/index.js Normal file
View File

@ -0,0 +1,27 @@
import 'react-app-polyfill/ie11'; // For IE 11 support
import 'react-app-polyfill/stable';
import 'core-js';
import './polyfill'
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { icons } from './assets/icons'
import { Provider } from 'react-redux'
import store from './store'
React.icons = icons
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

63
src/polyfill.js Normal file
View File

@ -0,0 +1,63 @@
/*
* required polyfills
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import "core-js";
// import 'core-js/features/symbol'
// import 'core-js/features/object'
// import 'core-js/features/function'
// import 'core-js/features/parse-int'
// import 'core-js/features/parse-float'
// import 'core-js/features/number'
// import 'core-js/features/math'
// import 'core-js/features/string'
// import 'core-js/features/date'
// import 'core-js/features/array'
// import 'core-js/features/regexp'
// import 'core-js/features/map'
// import 'core-js/features/weak-map'
// import 'core-js/features/set'
// import 'core-js/features/set/map';
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/features/reflect';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
// import 'core-js/features/reflect'
// CustomEvent() constructor functionality in IE9, IE10, IE11
(function () {
if ( typeof window.CustomEvent === "function" ) return false
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined }
var evt = document.createEvent( 'CustomEvent' )
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail )
return evt
}
CustomEvent.prototype = window.Event.prototype
window.CustomEvent = CustomEvent
})()
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
if (!Element.prototype.closest) {
Element.prototype.closest = function(s) {
var el = this;
do {
if (Element.prototype.matches.call(el, s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}

28
src/reusable/DocsLink.js Normal file
View File

@ -0,0 +1,28 @@
import React from 'react'
import { CLink } from '@coreui/react'
const DocsLink = props => {
const {
name,
text,
...rest
} = props
const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
return (
<div className="card-header-actions">
<CLink
{...rest}
href={href}
rel="noreferrer noopener"
target="_blank"
className="card-header-action"
>
<small className="text-muted">{ text || 'docs' }</small>
</CLink>
</div>
)
}
export default React.memo(DocsLink)

5
src/reusable/index.js Normal file
View File

@ -0,0 +1,5 @@
import DocsLink from './DocsLink'
export {
DocsLink
}

23
src/routes.js Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'));
const BoxDisplacemen = React.lazy(() => import('./views/BoxDisplacemen/index'));
const CheckSheet = React.lazy(() => import('./views/CheckSheet/index'));
const Injection = React.lazy(() => import('./views/Injection/index'));
const MachineControl = React.lazy(() => import('./views/MachineControl/index'));
const Measurement = React.lazy(() => import('./views/Measurement/index'));
const MachineSheet = React.lazy(() => import('./views/MachineSheet/index'));
const routes = [
{ path: '/', exact: true, name: 'Home' },
{ path: '/dashboard', name: 'Dashboard', component: Dashboard },
{ path: '/boxdisplacement', exact: true, name: 'Box Displacemen', component: BoxDisplacemen },
{ path: '/checksheet', exact: true, name: 'Check Sheet', component: CheckSheet },
{ path: '/injection', exact: true, name: 'Injection', component: Injection },
{ path: '/machinecontrol', exact: true, name: 'Machine Control', component: MachineControl },
{ path: '/measurement', exact: true, name: 'Measurement', component: Measurement },
{ path: '/machinesheet', exact: true, name: 'Machine Sheet', component: MachineSheet },
];
export default routes;

1
src/scss/_custom.scss Normal file
View File

@ -0,0 +1 @@
// Here you can add other styles

16
src/scss/_fixes.scss Normal file
View File

@ -0,0 +1,16 @@
// todo: disabled button styles
button {
&:disabled {
cursor: default;
}
&.disabled {
cursor: default;
}
}
// todo: brand button icon margin
.btn-brand:not(:only-child) {
.c-icon {
margin-top: 0 !important;
}
}

1
src/scss/_variables.scss Normal file
View File

@ -0,0 +1 @@
// Variable overrides

11
src/scss/style.scss Normal file
View File

@ -0,0 +1,11 @@
// If you want to override variables do it here
@import "variables";
// Import CoreUI styles
@import "~@coreui/coreui/scss/coreui.scss";
// Some temp fixes
@import "fixes";
// If you want to add something do it here
@import "custom";

127
src/serviceWorker.js Normal file
View File

@ -0,0 +1,127 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://goo.gl/SC7cgQ'
);
});
} else {
// Is not local host. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.');
// Execute callback
if (config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
if (
response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}

15
src/setupTests.js Normal file
View File

@ -0,0 +1,15 @@
import {configure} from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
configure({adapter: new Adapter()});
if (global.document) {
document.createRange = () => ({
setStart: () => {},
setEnd: () => {},
commonAncestorContainer: {
nodeName: 'BODY',
ownerDocument: document,
},
});
}

17
src/store.js Normal file
View File

@ -0,0 +1,17 @@
import { createStore } from 'redux'
const initialState = {
sidebarShow: 'responsive'
}
const changeState = (state = initialState, { type, ...rest }) => {
switch (type) {
case 'set':
return {...state, ...rest }
default:
return state
}
}
const store = createStore(changeState)
export default store

149
src/views/BoxDisplacemen/index.js Normal file
View File

@ -0,0 +1,149 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
CCard,
CCardBody,
CCardHeader,
CCol,
CRow,
CDropdown,
CDropdownDivider,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
/////
CButton,
CCardFooter,
CForm,
CFormGroup,
CFormText,
CTextarea,
CInput,
CInputFile,
CInputCheckbox,
CInputRadio,
CLabel,
CSelect,
CSwitch
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const FileDownload = require('js-file-download');
function Index() {
const baseUrl = "https://natnats.mobilous.com/";
var today = new Date();
var cdate = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
const [data, setData] = useState([]);
const [sdate, setSdate] = useState(cdate);
const [report, setReport] = useState('');
const [selectedcons, setSelectedCons] = useState('');
useEffect(() => {
async function fetchData() {
// You can await here
const result = await axios('https://natnats.mobilous.com/getConstructionList');
setData(result.data);
}
fetchData();
}, []);
function setingSDate(e){
setSdate(e.target.value);
}
function setingReport(e){
setReport(e.target.value);
}
function setingSelectedCons(e) {
setSelectedCons(e.target.value);
}
function doGetReport(){
if(report == "" || selectedcons == ""){
alert("Please select both Construction and Report");
return;
}
var url = baseUrl + "/" + report + "?construction_id=" +selectedcons+ "&construction_date="+sdate;
console.log(selectedcons);
console.log(sdate);
console.log(report);
downloadReport(url);
}
function downloadReport(url) {
const response = axios(url).then((res) => {
FileDownload(res.data, 'report.xls');
})
console.log(response);
}
return (
<CRow>
<CCol xs="12" sm="12" md="12">
<CCard>
<CCardHeader>
Reports
</CCardHeader>
<CCardBody>
<CSelect custom name="cons_select" id="cons_select" onChange={setingSelectedCons}>
" <option value=''>-- Select --</option>"+
{
data.map((cc, index) => {
return(
<option key={cc.construction_id} value={cc.construction_id}>{cc.construction_name}</option>
)
})
}
</CSelect>
<CCard>
<CCardBody>
<CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
<CFormGroup row>
<CCol md="3">
<CLabel htmlFor="date-input">Date ({sdate})</CLabel>
</CCol>
<CCol xs="12" md="9">
<CInput type="date" id="date-input" name="date-input" placeholder="date" value={sdate} onChange={setingSDate}/>
</CCol>
</CFormGroup>
<CFormGroup row>
<CCol md="3">
<CLabel htmlFor="select">Select</CLabel>
</CCol>
<CCol xs="12" md="9">
<CSelect custom name="select" id="select" onChange={setingReport} value={report}>
<option value="">-- Select --</option>
<option value="generateBoxDisplacement">Box Displacement</option>
<option value="generateMachineControl">Machine Control</option>
<option value="generateMachineSheet">Machine Sheet</option>
<option value="generateMeasurement">Measurement</option>
<option value="generateCheckSheet">Check Sheet</option>
<option value="generateInjection">Injection</option>
</CSelect>
</CCol>
</CFormGroup>
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary" onClick={doGetReport}><CIcon name="cil-scrubber" /> Submit</CButton>
</CCardFooter>
</CCard>
</CCardBody>
</CCard>
</CCol>
<CCol xs="1" sm="1" md="1">
</CCol>
</CRow>
);
}
export default Index

17
src/views/Injection/index.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react'
import PropTypes from 'prop-types'
function Injecttion(props) {
return (
<div>
Injection
</div>
)
}
Injecttion.propTypes = {
}
export default Injecttion

11
src/views/MachineControl/index.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
function MachineControl() {
return (
<div>
Machine Control
</div>
)
}
export default MachineControl

11
src/views/MachineSheet/index.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
function MachineSheet() {
return (
<div>
Machine Sheet
</div>
)
}
export default MachineSheet

11
src/views/Measurement/index.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
function index() {
return (
<div>
Measurement
</div>
)
}
export default index

115
src/views/dashboard/Dashboard.js Normal file
View File

@ -0,0 +1,115 @@
import React, { lazy } from 'react'
import {
CBadge,
CButton,
CButtonGroup,
CCard,
CCardBody,
CCardFooter,
CCardHeader,
CCol,
CProgress,
CRow,
CCallout
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import MainChartExample from '../charts/MainChartExample.js'
const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
const WidgetsBrand = lazy(() => import('../widgets/WidgetsBrand.js'))
const Dashboard = () => {
return (
<>
<WidgetsDropdown />
<CCard>
<CCardBody>
<CRow>
<CCol sm="5">
<h4 id="traffic" className="card-title mb-0">Traffic</h4>
<div className="small text-muted">November 2017</div>
</CCol>
<CCol sm="7" className="d-none d-md-block">
<CButton color="primary" className="float-right">
<CIcon name="cil-cloud-download"/>
</CButton>
<CButtonGroup className="float-right mr-3">
{
['Day', 'Month', 'Year'].map(value => (
<CButton
color="outline-secondary"
key={value}
className="mx-0"
active={value === 'Month'}
>
{value}
</CButton>
))
}
</CButtonGroup>
</CCol>
</CRow>
<MainChartExample style={{height: '300px', marginTop: '40px'}}/>
</CCardBody>
<CCardFooter>
<CRow className="text-center">
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="success"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="info"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="warning"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="danger"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
value={40}
/>
</CCol>
</CRow>
</CCardFooter>
</CCard>
</>
)
}
export default Dashboard

78
src/views/pages/login/Login.js Normal file
View File

@ -0,0 +1,78 @@
import React from 'react'
import { Link } from 'react-router-dom'
import {
CButton,
CCard,
CCardBody,
CCardGroup,
CCol,
CContainer,
CForm,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const Login = () => {
return (
<div className="c-app c-default-layout flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="8">
<CCardGroup>
<CCard className="p-4">
<CCardBody>
<CForm>
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="text" placeholder="Username" autoComplete="username" />
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="password" placeholder="Password" autoComplete="current-password" />
</CInputGroup>
<CRow>
<CCol xs="6">
<CButton color="primary" className="px-4">Login</CButton>
</CCol>
<CCol xs="6" className="text-right">
<CButton color="link" className="px-0">Forgot password?</CButton>
</CCol>
</CRow>
</CForm>
</CCardBody>
</CCard>
<CCard className="text-white bg-primary py-5 d-md-down-none" style={{ width: '44%' }}>
<CCardBody className="text-center">
<div>
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<Link to="/register">
<CButton color="primary" className="mt-3" active tabIndex={-1}>Register Now!</CButton>
</Link>
</div>
</CCardBody>
</CCard>
</CCardGroup>
</CCol>
</CRow>
</CContainer>
</div>
)
}
export default Login

44
src/views/pages/page404/Page404.js Normal file
View File

@ -0,0 +1,44 @@
import React from 'react'
import {
CButton,
CCol,
CContainer,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupAppend,
CInputGroupText,
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const Page404 = () => {
return (
<div className="c-app c-default-layout flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="6">
<div className="clearfix">
<h1 className="float-left display-3 mr-4">404</h1>
<h4 className="pt-3">Oops! You{'\''}re lost.</h4>
<p className="text-muted float-left">The page you are looking for was not found.</p>
</div>
<CInputGroup className="input-prepend">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-magnifying-glass" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput size="16" type="text" placeholder="What are you looking for?" />
<CInputGroupAppend>
<CButton color="info">Search</CButton>
</CInputGroupAppend>
</CInputGroup>
</CCol>
</CRow>
</CContainer>
</div>
)
}
export default Page404

44
src/views/pages/page500/Page500.js Normal file
View File

@ -0,0 +1,44 @@
import React from 'react'
import {
CButton,
CCol,
CContainer,
CInput,
CInputGroup,
CInputGroupAppend,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const Page500 = () => {
return (
<div className="c-app c-default-layout flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="6">
<span className="clearfix">
<h1 className="float-left display-3 mr-4">500</h1>
<h4 className="pt-3">Houston, we have a problem!</h4>
<p className="text-muted float-left">The page you are looking for is temporarily unavailable.</p>
</span>
<CInputGroup className="input-prepend">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-magnifying-glass" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput size="16" type="text" placeholder="What are you looking for?" />
<CInputGroupAppend>
<CButton color="info">Search</CButton>
</CInputGroupAppend>
</CInputGroup>
</CCol>
</CRow>
</CContainer>
</div>
)
}
export default Page500

80
src/views/pages/register/Register.js Normal file
View File

@ -0,0 +1,80 @@
import React from 'react'
import {
CButton,
CCard,
CCardBody,
CCardFooter,
CCol,
CContainer,
CForm,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const Register = () => {
return (
<div className="c-app c-default-layout flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="9" lg="7" xl="6">
<CCard className="mx-4">
<CCardBody className="p-4">
<CForm>
<h1>Register</h1>
<p className="text-muted">Create your account</p>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="text" placeholder="Username" autoComplete="username" />
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>@</CInputGroupText>
</CInputGroupPrepend>
<CInput type="text" placeholder="Email" autoComplete="email" />
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="password" placeholder="Password" autoComplete="new-password" />
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="password" placeholder="Repeat password" autoComplete="new-password" />
</CInputGroup>
<CButton color="success" block>Create Account</CButton>
</CForm>
</CCardBody>
<CCardFooter className="p-4">
<CRow>
<CCol xs="12" sm="6">
<CButton className="btn-facebook mb-1" block><span>facebook</span></CButton>
</CCol>
<CCol xs="12" sm="6">
<CButton className="btn-twitter mb-1" block><span>twitter</span></CButton>
</CCol>
</CRow>
</CCardFooter>
</CCard>
</CCol>
</CRow>
</CContainer>
</div>
)
}
export default Register

41
src/views/users/User.js Normal file
View File

@ -0,0 +1,41 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import usersData from './UsersData'
const User = ({match}) => {
const user = usersData.find( user => user.id.toString() === match.params.id)
const userDetails = user ? Object.entries(user) :
[['id', (<span><CIcon className="text-muted" name="cui-icon-ban" /> Not found</span>)]]
return (
<CRow>
<CCol lg={6}>
<CCard>
<CCardHeader>
User id: {match.params.id}
</CCardHeader>
<CCardBody>
<table className="table table-striped table-hover">
<tbody>
{
userDetails.map(([key, value], index) => {
return (
<tr key={index.toString()}>
<td>{`${key}:`}</td>
<td><strong>{value}</strong></td>
</tr>
)
})
}
</tbody>
</table>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default User

86
src/views/users/Users.js Normal file
View File

@ -0,0 +1,86 @@
import React, { useState, useEffect } from 'react'
import { useHistory, useLocation } from 'react-router-dom'
import {
CBadge,
CCard,
CCardBody,
CCardHeader,
CCol,
CDataTable,
CRow,
CPagination
} from '@coreui/react'
import usersData from './UsersData'
const getBadge = status => {
switch (status) {
case 'Active': return 'success'
case 'Inactive': return 'secondary'
case 'Pending': return 'warning'
case 'Banned': return 'danger'
default: return 'primary'
}
}
const Users = () => {
const history = useHistory()
const queryPage = useLocation().search.match(/page=([0-9]+)/, '')
const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1)
const [page, setPage] = useState(currentPage)
const pageChange = newPage => {
currentPage !== newPage && history.push(`/users?page=${newPage}`)
}
useEffect(() => {
currentPage !== page && setPage(currentPage)
}, [currentPage, page])
return (
<CRow>
<CCol xl={6}>
<CCard>
<CCardHeader>
Users
<small className="text-muted"> example</small>
</CCardHeader>
<CCardBody>
<CDataTable
items={usersData}
fields={[
{ key: 'name', _classes: 'font-weight-bold' },
'registered', 'role', 'status'
]}
hover
striped
itemsPerPage={5}
activePage={page}
clickableRows
onRowClick={(item) => history.push(`/users/${item.id}`)}
scopedSlots = {{
'status':
(item)=>(
<td>
<CBadge color={getBadge(item.status)}>
{item.status}
</CBadge>
</td>
)
}}
/>
<CPagination
activePage={page}
onActivePageChange={pageChange}
pages={5}
doubleArrows={false}
align="center"
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Users

29
src/views/users/UsersData.js Normal file
View File

@ -0,0 +1,29 @@
const usersData = [
{id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 23, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
{id: 42, name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'}
]
export default usersData