initial FBS admin

src/views/BoxDisplacemen/index.js

@@ -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

src/views/Injection/index.js

@@ -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
+

src/views/MachineControl/index.js

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

src/views/MachineSheet/index.js

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

src/views/Measurement/index.js

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

src/views/dashboard/Dashboard.js

@@ -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

src/views/pages/login/Login.js

@@ -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

src/views/pages/page404/Page404.js

@@ -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

src/views/pages/page500/Page500.js

@@ -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

src/views/pages/register/Register.js

@@ -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

src/views/users/User.js

@@ -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

src/views/users/Users.js

@@ -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

src/views/users/UsersData.js

@@ -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