completed ui
This commit is contained in:
parent
caeace5f25
commit
edf47fd1bd
128
src/views/AirwaysBill/AddAirwaysBill.js
Normal file
128
src/views/AirwaysBill/AddAirwaysBill.js
Normal file
@ -0,0 +1,128 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CFormSelect,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cil3d, cilAirplaneMode, cilGlobeAlt, cilLocationPin, cilLockLocked, cilPeople, cilUser } from '@coreui/icons'
|
||||
|
||||
|
||||
const AddAirwaysBill = () => {
|
||||
return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-start">
|
||||
<CCol md={8}>
|
||||
<CForm>
|
||||
<h1>Add New Bill</h1>
|
||||
<p className="text-medium-emphasis">Fill the fields and submit to add a new bill</p>
|
||||
<CRow className='flex-row align-items-center'>
|
||||
<CCol md={2} ><h4>ID:</h4></CCol>
|
||||
<CCol><h6>5324756898</h6></CCol>
|
||||
<p className="text-medium-emphasis">(auto-generated)</p>
|
||||
</CRow>
|
||||
<CRow className='flex-row align-items-center'>
|
||||
<CCol md={2} ><h4>Date:</h4></CCol>
|
||||
<CCol><h6>11/11/11</h6></CCol>
|
||||
<p className="text-medium-emphasis">(auto-generated)</p>
|
||||
</CRow>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
options={[
|
||||
'Select Vendor',
|
||||
{ label: 'One', value: '1' },
|
||||
{ label: 'Two', value: '2' },
|
||||
{ label: 'Three', value: '3', disabled: true }
|
||||
]}
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 1"
|
||||
// autoComplete="address"
|
||||
/>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 2(area)"
|
||||
autoComplete="address2"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilPeople} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="To (Name)"
|
||||
autoComplete="toname"
|
||||
/>
|
||||
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 1"
|
||||
// autoComplete="address"
|
||||
/>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 2(area)"
|
||||
autoComplete="address2"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cil3d} />
|
||||
</CInputGroupText>
|
||||
<CFormSelect
|
||||
aria-label="Default select example"
|
||||
options={[
|
||||
'Select Courier',
|
||||
{ label: 'One', value: '1' },
|
||||
{ label: 'Two', value: '2' },
|
||||
{ label: 'Three', value: '3', disabled: true }
|
||||
]}
|
||||
/></CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilAirplaneMode} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="AWB"
|
||||
autoComplete="AWB"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CButton color="dark" className="px-4">
|
||||
Submit
|
||||
</CButton>
|
||||
|
||||
</CForm>
|
||||
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>;;
|
||||
};
|
||||
|
||||
export default AddAirwaysBill;
|
60
src/views/AirwaysBill/AirwaysBill.js
Normal file
60
src/views/AirwaysBill/AirwaysBill.js
Normal file
@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
CAvatar,
|
||||
CButton,
|
||||
CButtonGroup,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardFooter,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CContainer,
|
||||
CProgress,
|
||||
CRow,
|
||||
CTable,
|
||||
CTableBody,
|
||||
CTableDataCell,
|
||||
CTableHead,
|
||||
CTableHeaderCell,
|
||||
CTableRow,
|
||||
} from '@coreui/react'
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const AirwaysBill = () => {
|
||||
return <div>
|
||||
|
||||
<CButton color="dark">+ Upload Spreadsheet</CButton>
|
||||
<Link to='/addairwaysbill'>
|
||||
<CButton className='ms-3' color="dark">+Add New Entry</CButton>
|
||||
</Link>
|
||||
<hr />
|
||||
<CTable striped hover>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">ID</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Vendor</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Date</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">To (Name)</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">AWB</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Action</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Mark</CTableHeaderCell>
|
||||
<CTableDataCell>123</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>123</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<CButtonGroup role="group" aria-label="Basic mixed styles example">
|
||||
<CButton color="success">View</CButton>
|
||||
|
||||
</CButtonGroup>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable></div>;
|
||||
};
|
||||
|
||||
export default AirwaysBill;
|
59
src/views/Courier/AddCourier.js
Normal file
59
src/views/Courier/AddCourier.js
Normal file
@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cil3d } from '@coreui/icons'
|
||||
|
||||
const AddCourier = () => {
|
||||
return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-start">
|
||||
<CCol md={8}>
|
||||
<CForm>
|
||||
<h1>Add New Courier</h1>
|
||||
<p className="text-medium-emphasis">Fill the fields and submit to add a new vendor</p>
|
||||
<CRow className=' flex-row align-items-center'>
|
||||
<CCol md={2} ><h5>Unique ID:</h5></CCol>
|
||||
<CCol><h6>5324756898</h6></CCol>
|
||||
<p className="text-medium-emphasis">(auto-generated)</p>
|
||||
</CRow>
|
||||
<CRow className=' flex-row align-items-center'>
|
||||
<CCol md={2} ><h5>Added On:</h5></CCol>
|
||||
<CCol><h6>5324756898</h6></CCol>
|
||||
<p className="text-medium-emphasis">(auto-generated)</p>
|
||||
</CRow>
|
||||
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cil3d} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Courier Name"
|
||||
autoComplete="courier"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CButton color="dark" className="px-4">
|
||||
Submit
|
||||
</CButton>
|
||||
|
||||
</CForm>
|
||||
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default AddCourier;
|
84
src/views/Vendor/AddVendor.js
vendored
Normal file
84
src/views/Vendor/AddVendor.js
vendored
Normal file
@ -0,0 +1,84 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilGlobeAlt, cilLocationPin, cilLockLocked, cilUser } from '@coreui/icons'
|
||||
import { Link } from 'react-router-dom';
|
||||
const AddVendor = () => {
|
||||
return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-start">
|
||||
<CCol md={8}>
|
||||
<CForm>
|
||||
<h1>Add New Vendor</h1>
|
||||
<p className="text-medium-emphasis">Fill the fields and submit to add a new vendor</p>
|
||||
<CRow className=' flex-row align-items-center'>
|
||||
<CCol md={2} ><h4>Code:</h4></CCol>
|
||||
<CCol><h6>5324756898</h6></CCol>
|
||||
<p className="text-medium-emphasis">(auto-generated)</p>
|
||||
</CRow>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormInput placeholder="Vendor Name" autoComplete="vendorname" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLocationPin} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 1"
|
||||
// autoComplete="address"
|
||||
/>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Address Line 2(area)"
|
||||
autoComplete="address2"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilGlobeAlt} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Country"
|
||||
autoComplete="country"
|
||||
/>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="State"
|
||||
autoComplete="state"
|
||||
/>
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="City"
|
||||
autoComplete="city"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CButton color="dark" className="px-4">
|
||||
Submit
|
||||
</CButton>
|
||||
|
||||
</CForm>
|
||||
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default AddVendor;
|
Loading…
Reference in New Issue
Block a user