parking-space complete

src/scss/_custom.scss

@@ -13,7 +13,7 @@
 .popup-forms {
   width: 50vw;
   margin: auto;
-  height: 60vh;
+  height: 70vh;
   display: flex;
   flex-direction: column;
   justify-content: space-around;

src/views/parkingSpace/cSpaceQtySetting/CspaceQtySetting.js

@@ -1,7 +1,129 @@
 import React from 'react'
-
+import {
+  CTable,
+  CPagination,
+  CPaginationItem,
+  CFormSelect,
+  CButton,
+  CButtonGroup,
+} from '@coreui/react'
 const CspaceQtySetting = () => {
-  return <div>CspaceQtySetting</div>
+  const operation = () => {
+    return (
+      <CButtonGroup role="group" aria-label="Basic mixed styles example" size="sm">
+        <CButton color="info">View</CButton>
+        <CButton color="warning">Edit</CButton>
+      </CButtonGroup>
+    )
+  }
+
+  const columns = [
+    {
+      key: 'parkingname',
+      label: 'Parking Name',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'zonename',
+      label: 'Zone Name',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'totalspace',
+      label: 'Total Space',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'emptyspace',
+      label: 'Empty Space',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'modifer',
+      label: 'Modifer',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'modifytime',
+      label: 'Modify Time',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'operation',
+      label: 'Operation',
+      _props: { scope: 'col' },
+    },
+  ]
+  const items = [
+    {
+      parkingname: ' ',
+      zonename: ' ',
+      totalspace: ' ',
+      emptyspace: ' ',
+      modifer: ' ',
+      modifytime: ' ',
+      operation: operation(),
+      _cellProps: { id: { scope: 'row' } },
+    },
+  ]
+  return (
+    <>
+      <div className="conf-list">
+        <h1>C-Space Qty. Setting</h1>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            flexWrap: 'wrap',
+            justifyContent: 'space-around',
+            height: 'max-content',
+            minHeight: '20vh',
+            borderTop: '1px solid grey',
+            borderBottom: '1px solid grey',
+            width: '100%',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              width: '50%',
+              minHeight: '5vh',
+              justifyContent: 'space-between',
+              flexWrap: 'wrap',
+            }}
+          >
+            <CFormSelect aria-label="Default select example" style={{ width: '40%' }}>
+              <option>Mall</option>
+              <option value="1">Mall</option>
+            </CFormSelect>
+          </div>
+        </div>
+        <div style={{ overflow: 'auto' }}>
+          <CTable
+            columns={columns}
+            items={items}
+            style={{
+              width: '100vw',
+              minWidth: '600px',
+            }}
+            hover
+          />
+        </div>
+        <CPagination size="sm" align="end" aria-label="Page navigation example">
+          <CPaginationItem style={{ color: 'black' }} disabled>
+            Previous
+          </CPaginationItem>
+          <CPaginationItem style={{ color: 'black' }} active="true">
+            1
+          </CPaginationItem>
+          <CPaginationItem style={{ color: 'black' }}>2</CPaginationItem>
+          <CPaginationItem style={{ color: 'black' }}>3</CPaginationItem>
+          <CPaginationItem style={{ color: 'black' }}>Next</CPaginationItem>
+        </CPagination>
+      </div>
+    </>
+  )
 }
 
 export default CspaceQtySetting