Performed changes on document layout, and added /book

package.json

@@ -3,21 +3,41 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@date-io/date-fns": "^2.10.6",
+    "@material-ui/pickers": "^3.2.10",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.0",
     "axios-react": "^2.0.2",
+    "bootstrap": "^4.5.3",
+    "cldr-data": "^36.0.0",
+    "globalize": "^1.6.0",
+    "iana-tz-data": "^2019.1.0",
+    "mdbreact": "^4.27.0",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.4.0",
+    "react-bootstrap-form": "^0.1.4-beta6",
+    "react-bootstrap-table": "^4.3.1",
+    "react-bootstrap-table-next": "^4.0.3",
+    "react-bootstrap-table2-paginator": "^2.1.2",
+    "react-bootstrap-table2-toolkit": "^2.1.3",
     "react-data-grid": "^7.0.0-canary.28",
+    "react-datetime-picker": "^3.0.4",
     "react-dom": "^17.0.1",
+    "react-gauge-chart": "^0.2.5",
     "react-json-to-table": "^0.1.7",
     "react-lazy-load": "^3.1.13",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "react-table": "^7.6.1",
+    "react-widgets": "^4.6.1",
+    "react-widgets-globalize": "^5.0.23",
+    "reactstrap": "^8.7.1",
+    "reactstrap-date-picker": "0.0.11",
     "redux": "^4.0.5",
+    "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

public/index.html

@@ -12,6 +12,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table-all.min.css"></link>
 
   <title>React App</title>
 </head>
@@ -21,6 +22,7 @@
   <div id="root"></div>
   <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+  <script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js"></script>
 
 </body>
 

src/components/App.js

@@ -1,18 +1,16 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-
 
 // Routes
-import Upcoming from './root/Upcoming';
+import Upcoming from "./root/Pages/Upcoming";
-import Reports from './root/Reports';
+import Reports from "./root/Pages/Reports";
-import Historical from './root/Historical';
+import Historical from "./root/Pages/Historical";
-
+import Book from "./root/Pages/Book";
 // Components
-import Home from './root/Home'
+import Home from "./root/Home";
-import Navigation from './root/Navigation';
+import Navigation from "./root/Navigation";
 
 class App extends Component {
-
   render() {
     return (
       <Router>
@@ -20,12 +18,11 @@ class App extends Component {
           <Navigation />
           <Switch>
             <Route exact path="/" component={Home} />
+            <Route exact path="/book" component={Book} />
             <Route exact path="/upcoming-migrations" component={Upcoming} />
             <Route exact path="/reports" component={Reports} />
             <Route exact path="/historical-migrations" component={Historical} />
           </Switch>
-          
-
         </div>
       </Router>
     );

src/components/Migrations/SideMigrations.js

@@ -1,52 +0,0 @@
-import React, { Component } from "react";
-import axios from "axios";
-import ReactTable from "react-table";
-
-import { callAPI } from "../../services/API";
-import SingleSide from "./SingleSide";
-import Error from "../actions/Error";
-//import Table from "./Table";
-
-class SideMigrations extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      sidemigs: [],
-      e: false,
-    };
-  }
-  componentDidMount() {
-    callAPI
-      .get()
-      .then((request) => {
-        this.setState({
-          sidemigs: request.data,
-        });
-      })
-      .catch((error) => {
-        this.setState({
-          error: true,
-        });
-      });
-  }
-
-  render() {
-    const columns = [
-      {
-        Header: "Domain",
-        accessor: "domain",
-      },
-      {
-        Header: "Booked Time",
-        accessor: "booked_time",
-      },
-      {
-        Header: "Status",
-        accessor: "migration_status",
-      },
-    ];
-    return <ReactTable data={this.state.sidemigs} columns={columns} />;
-  }
-}
-
-export default SideMigrations;

src/components/Migrations/SingleSide.js

@@ -1,21 +0,0 @@
-import React from "react";
-
-const SingleSide = ({ item }) => (
-  <div>
-    <div className="divider"></div>
-    <a href={item.url} target="_blank" rel="noreferrer">
-      <div className="section">
-        <table className="centered striped">
-          <tbody>
-            <td>#</td>
-            <td>{item.domain}</td>
-            <td>{item.booked_time}</td>
-            <td>{item.migration_status}</td>
-          </tbody>
-        </table>
-      </div>
-    </a>
-  </div>
-);
-
-export default SingleSide;

src/components/actions/API.js

@@ -3,5 +3,3 @@ import axios from 'axios'
 export const callAPI = axios.create({
     baseURL: 'https://devapi.benjamyn.love/migrations/'
 })
-
-export default callAPI

src/components/root/Dashboard.js

@@ -1,12 +0,0 @@
-import React, { Component } from 'react'
-
-
-export default class Dashboard extends Component {
-    render() {
-        return (
-            <div>
-                
-            </div>
-        )
-    }
-}

src/components/root/Home.js

@@ -1,10 +1,9 @@
 import React, { Component } from "react";
 
-import { getMigrations } from "../actions/requests";
+import { callAPI } from "../actions/API";
-import { callAPI } from "../../services/API";
+import Migrations from "./Pages/Migrations";
-import Migrations from "../Migrations/Migrations";
 import Error from "../actions/Error";
-import SideMigrations from "../Migrations/SideMigrations";
+import SideMigrations from "./Pages/Migrations/SideMigrations";
 
 export class Home extends Component {
   constructor(props) {
@@ -31,15 +30,33 @@ export class Home extends Component {
   }
   render() {
     return (
+      <div className="container">
         <div className="row">
-        <div className="col s8">
+          <div className="divider"></div>
+
+          <div className="section">
+            <div className="col s6">
               <Migrations migs={this.state.migs} />
             </div>
-        <div className="col s4">
+            <div className="col s6">
-          <h3>
+              <p>
-            Side Migrations goes here
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
-            <SideMigrations migs={this.state.migs} />
+                quis est vitae sapien venenatis viverra. Suspendisse bibendum
-          </h3>
+                tristique est, et gravida neque porta ut. Pellentesque egestas
+                vehicula nulla eu aliquet. Morbi id lacus eget lorem aliquam
+                ornare. Vivamus pulvinar ligula sapien, ut pulvinar eros
+                sollicitudin sodales. Donec sed ipsum sit amet mauris posuere
+                maximus. Aenean finibus turpis eu urna suscipit venenatis.
+              </p>
+            </div>
+            <div className="divider"></div>
+            <div className="section">
+              <div className="col s12">
+                <SideMigrations />
+              </div>
+            </div>
+            <div className="divider"></div>
+          </div>
         </div>
       </div>
     );

src/components/root/Navigation.js

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 export class Navigation extends Component {
   render() {
@@ -8,16 +8,29 @@ export class Navigation extends Component {
         <div className="navbar-fixed">
           <div className="nav-wrapper">
             <ul className="left hide-on-med-and-down">
-                            <li><Link className="active" to="/">Dashboard</Link></li>
+              <li>
-                            <li><Link to="/upcoming-migrations">Upcoming Migrations</Link></li>
+                <Link className="active" to="/">
-                            <li><Link to="/reports">Reports</Link></li>
+                  Dashboard
-                            <li><Link to="/historical-migrations">Historical Migrations</Link></li>
+                </Link>
+              </li>
+              <li class="active">
+                <Link to="/book">Book</Link>
+              </li>
+              <li>
+                <Link to="/upcoming-migrations">Upcoming Migrations</Link>
+              </li>
+              <li>
+                <Link to="/reports">Reports</Link>
+              </li>
+              <li>
+                <Link to="/historical-migrations">Historical Migrations</Link>
+              </li>
             </ul>
           </div>
         </div>
       </nav>
-        )
+    );
   }
 }
 
-export default Navigation
+export default Navigation;

src/components/root/Pages/Book.js

@@ -0,0 +1,13 @@
+import React, { Component } from "react";
+
+import FormPage from "./Forms/FormPage";
+
+export default class Book extends Component {
+  render() {
+    return (
+      <div>
+        <FormPage />
+      </div>
+    );
+  }
+}

src/components/root/Pages/Forms/FormPage.js

@@ -0,0 +1,158 @@
+import React, { Component } from "react";
+import {
+  Container,
+  Col,
+  Form,
+  FormGroup,
+  Label,
+  Input,
+  FormText,
+  Button,
+  Row,
+} from "reactstrap";
+import PropTypes from "prop-types";
+import "bootstrap/dist/css/bootstrap.min.css";
+
+const FormPage = () => {
+  return (
+    <Form>
+      <Container>
+        <Row>
+          <Col>
+            <FormGroup>
+              <Label for="bookedDate">Date</Label>
+              <Input type="date" name="date" id="bookedDate" />
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedTime">Timeslot</Label>
+              <Input type="select" name="select" id="bookedTime">
+                <option>00:00-09:00</option>
+                <option>09:00-12:00</option>
+                <option>12:00-18:00</option>
+                <option>18:00-00:00</option>
+              </Input>
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedDomain">Domain</Label>
+              <Input
+                type="text"
+                name="text"
+                id="bookedDomain"
+                placeholder="example.com.au"
+              />
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedUsername">cPanel username</Label>
+              <Input
+                type="text"
+                name="text"
+                id="bookedUsername"
+                placeholder="example"
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <FormGroup>
+              <Label for="bookedSource">Original server</Label>
+              <Input
+                type="number"
+                name="number"
+                id="bookedSource"
+                placeholder="1.2.3.4"
+              />
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedDestination">New server</Label>
+              <Input
+                type="number"
+                name="number"
+                id="bookedDestination"
+                placeholder="1.2.3.4"
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <FormGroup>
+              <Label for="bookedBrand">Brand</Label>
+              <Input type="select" name="select" id="bookedBrand">
+                <option>VentraIP</option>
+                <option>Zuver</option>
+                <option>Synergy</option>
+              </Input>
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedTicket">Ticket ID</Label>
+              <Input
+                type="text"
+                name="text"
+                id="bookedTicket"
+                placeholder="VIP-A1234567"
+              />
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedType">Migration type</Label>
+              <Input type="select" name="select" id="bookedType">
+                <option>cPanel</option>
+                <option>Plesk</option>
+                <option>Other</option>
+              </Input>
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedAgent">Agent Initials</Label>
+              <Input
+                type="text"
+                name="text"
+                id="bookedAgent"
+                placeholder="SZ"
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <FormGroup>
+          <Label for="bookedAdditionalDomains">Addon Domains</Label>
+          <Input
+            type="text"
+            name="text"
+            id="bookedAdditionalDomains"
+            placeholder="example.com.au,example.net.au"
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <Label for="bookedTermDate">
+            Estimated termination date (internal migrations only)
+          </Label>
+          <Input type="date" name="date" id="bookedTermDate" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="bookedNotes">Notes</Label>
+          <Input type="textarea" name="text" id="notes" />
+        </FormGroup>
+        <Button>Submit</Button>
+      </Container>
+    </Form>
+  );
+};
+export default FormPage;
+
+{
+  /* <Button>Submit</Button> */
+}

src/components/root/Pages/Migrations.js

@@ -1,9 +1,7 @@
 import React, { Component } from "react";
-import axios from "axios";
 
-import MigrationSingle from "./MigrationSingle";
+import MigrationSingle from "./Migrations/MigrationSingle";
-import { getMigrations } from "../actions/requests";
+import Error from "../../actions/Error";
-import Error from "../actions/Error";
 
 class Migrations extends Component {
   //  constructor(props) {
@@ -66,23 +64,23 @@ class Migrations extends Component {
         <div className="col s6 m4">
           <div className="card blue-grey darken-1">
             <div className="card-content white-text">
-              <span className="card-title">Booked Migrations</span>
+              <span className="card-title"></span>
               {this.bookedMig()}
             </div>
             <div className="card-action">
-              <a href="/upcoming-migrations">View all...</a>
+              <a href="/upcoming-migrations">Booked Migrations</a>
             </div>
           </div>
         </div>
         <div className="col s6 m4">
           <div className="card blue-grey darken-1">
             <div className="card-content white-text">
-              <span className="card-title">Waiting Termination</span>
+              <span className="card-title"></span>
               <p></p>
               {this.waitingMig()}
             </div>
             <div className="card-action">
-              <a href="/upcoming-migrations">View all...</a>
+              <a href="/upcoming-migrations">Waiting Termination</a>
             </div>
           </div>
         </div>
@@ -90,11 +88,11 @@ class Migrations extends Component {
         <div className="col s6 m4">
           <div className="card blue-grey darken-1">
             <div className="card-content white-text">
-              <span className="card-title">Completed</span>
+              <span className="card-title"></span>
               {this.completedMig()}
             </div>
             <div className="card-action">
-              <a href="/historical-migrations">View all...</a>
+              <a href="/historical-migrations">Completed</a>
             </div>
           </div>
         </div>

src/components/root/Pages/Migrations/SideMigrations.js

@@ -0,0 +1,48 @@
+import React, { Component } from "react";
+
+import { callAPI } from "../../../actions/API";
+import { SingleSide } from "./SingleSide";
+import Error from "../../../actions/Error";
+
+class SideMigrations extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sidemigs: [],
+      e: false,
+    };
+  }
+  componentDidMount() {
+    callAPI
+      .get("booked/")
+      .then((request) => {
+        this.setState({
+          sidemigs: request.data,
+        });
+      })
+      .catch((e) => {
+        this.setState({
+          error: true,
+        });
+      });
+  }
+
+  renderItems() {
+    if (!this.state.e) {
+      return this.state.sidemigs.map((data) => (
+        <SingleSide key={data.id} data={data} />
+      ));
+    } else {
+      return <Error />;
+    }
+  }
+
+  render() {
+    return <SingleSide data={this.state.sidemigs} />;
+  }
+}
+
+export default SideMigrations;
+
+//return <div className="row">{this.renderItems()}</div>;
+//

src/components/root/Pages/Migrations/SingleSide.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
+import "../../../../react-bootstrap-table.css";
+
+export const SingleSide = ({ data }) => {
+  return (
+    <div>
+      <BootstrapTable data={data} height="100%" striped hover condensed>
+        <TableHeaderColumn isKey dataField="domain" width="45%">
+          Domain
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="booked_time" width="35%">
+          Booked Time
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="migration_status" width="20%">
+          Status
+        </TableHeaderColumn>
+      </BootstrapTable>
+    </div>
+  );
+  //
+};
+{
+}

src/components/root/Pages/Migrations/UpcomingSingle.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
+import "../../../../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css";
+
+export const UpcomingSingle = ({ data }) => {
+  return (
+    <div>
+      <BootstrapTable
+        data={data}
+        height="100%"
+        striped
+        hover
+        condensed
+        pagination
+        version="4"
+      >
+        <TableHeaderColumn isKey dataField="submit_time" width="45%">
+          Submit time
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="domain" width="35%">
+          Domain
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="booked_time" width="20%">
+          Booked time
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="original_server" width="20%">
+          Original server
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="new_server" width="20%">
+          New server
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="username" width="20%">
+          Username
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="notes" width="35%">
+          Notes
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="brand" width="20%">
+          Brand
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="ticket_id" width="20%">
+          Ticket ID
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="migration_status" width="20%">
+          Status
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="agent_booked" width="20%">
+          Agent
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="additional_domains" width="35%">
+          Additional Domains
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="migration_type" width="20%">
+          Migration type
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="term_date" width="20%">
+          est. Terminaton Date
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="migration_cmd" width="20%">
+          Migration CMD
+        </TableHeaderColumn>
+      </BootstrapTable>
+    </div>
+  );
+  //
+};
+{
+}
+
+{
+  /* <BootstrapTable data={data} pagination striped hover condensed>
+<TableHeaderColumn isKey dataField="domain">
+  Domain
+</TableHeaderColumn>
+
+<TableHeaderColumn dataField="domain">Domain</TableHeaderColumn>
+
+<TableHeaderColumn dataField="domain">Domain</TableHeaderColumn>
+<TableHeaderColumn dataField="booked_time">
+  Booked Time
+</TableHeaderColumn>
+<TableHeaderColumn
+  dataField="migration_status"
+  filter={{ type: "TextFilter", delay: 1000 }}
+>
+  Status
+</TableHeaderColumn>
+</BootstrapTable> */
+}

src/components/root/Pages/Upcoming.js

@@ -0,0 +1,62 @@
+import React, { Component } from "react";
+
+import { callAPI } from "../../actions/API";
+import { UpcomingSingle } from "./Migrations/UpcomingSingle";
+import Error from "../../actions/Error";
+
+class Upcoming extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sidemigs: [],
+      e: false,
+    };
+  }
+  componentDidMount() {
+    callAPI
+      .get("all/")
+      .then((request) => {
+        this.setState({
+          sidemigs: request.data,
+        });
+      })
+      .catch((e) => {
+        this.setState({
+          error: true,
+        });
+      });
+  }
+
+  renderItems() {
+    if (!this.state.e) {
+      return this.state.sidemigs.map((data) => (
+        <UpcomingSingle key={data.id} data={this.state.sidemigs} />
+      ));
+    } else {
+      return <Error />;
+    }
+  }
+
+  render() {
+    return (
+      <div className="row">
+        <div className="divider"></div>
+        <div className="section">
+          <div className="col s12"></div>
+        </div>
+        <div className="divider"></div>
+        <div className="section">
+          <div className="col s12">
+            <UpcomingSingle data={this.state.sidemigs} />
+          </div>
+        </div>
+        <div className="divider"></div>
+      </div>
+    );
+  }
+}
+
+export default Upcoming;
+{
+  /* <UpcomingSingle data={this.state.sidemigs} /> */
+}

src/components/root/Upcoming.js

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Upcoming = () => {
-    return (
-        <h1>Upcoming</h1>
-    );
-}
-
-export default Upcoming;

src/index.js

@@ -1,14 +1,14 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import './index.css';
+import "./index.css";
-import App from './components/App';
+import App from "./components/App";
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function

src/react-bootstrap-table.css

@@ -0,0 +1,342 @@
+/*editor error animate*/
+/*@import "~toastr/build/toastr.min.css";*/
+
+.react-bs-table-container .react-bs-table-search-form {
+  margin-bottom: 0;
+}
+
+.react-bs-table-bordered {
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+.react-bs-table table {
+  margin-bottom: 0;
+  table-layout: fixed;
+}
+
+.react-bs-table table td,
+.react-bs-table table th {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.react-bs-table-pagination {
+  margin-top: 10px;
+}
+
+.react-bs-table-tool-bar {
+  margin-bottom: 5px;
+}
+
+.react-bs-container-header,
+.react-bs-container-footer {
+  overflow: hidden;
+  width: 100%;
+}
+
+.react-bs-container-body {
+  /*height: 154px;*/
+  overflow: auto;
+  width: 100%;
+}
+
+.react-bootstrap-table-page-btns-ul {
+  float: right;
+  /* override the margin-top defined in .pagination class in bootstrap. */
+  margin-top: 0;
+}
+
+.react-bs-table .table-bordered {
+    border: 0;
+    outline: none !important;
+}
+
+.react-bs-table .table-bordered > thead > tr > th,
+.react-bs-table .table-bordered > thead > tr > td {
+  border-bottom-width: 2px;
+}
+
+.react-bs-table .table-bordered > tbody > tr > td {
+  outline: none !important;
+}
+
+.react-bs-table .table-bordered > tbody > tr > td.default-focus-cell {
+  outline: 3px solid cornflowerblue !important;
+  outline-offset: -1px;
+}
+
+.react-bs-table .table-bordered > tfoot > tr > th,
+.react-bs-table .table-bordered > tfoot > tr > td {
+  border-top-width: 2px;
+}
+
+.react-bs-table .table-bordered > tfoot > tr > th,
+.react-bs-table .table-bordered > tfoot > tr > td {
+  border-bottom-width: 0;
+}
+
+/*Esquerda*/
+.react-bs-table .table-bordered > thead > tr > th:first-child,
+.react-bs-table .table-bordered > tbody > tr > th:first-child,
+.react-bs-table .table-bordered > tfoot > tr > th:first-child,
+.react-bs-table .table-bordered > thead > tr > td:first-child,
+.react-bs-table .table-bordered > tbody > tr > td:first-child,
+.react-bs-table .table-bordered > tfoot > tr > td:first-child {
+  border-left-width: 0;
+}
+
+/*Direita*/
+.react-bs-table .table-bordered > thead > tr > th:last-child,
+.react-bs-table .table-bordered > tbody > tr > th:last-child,
+.react-bs-table .table-bordered > tfoot > tr > th:last-child,
+.react-bs-table .table-bordered > thead > tr > td:last-child,
+.react-bs-table .table-bordered > tbody > tr > td:last-child,
+.react-bs-table .table-bordered > tfoot > tr > td:last-child {
+  border-right-width: 0;
+}
+
+/*Topo*/
+.react-bs-table .table-bordered > thead > tr:first-child > th,
+.react-bs-table .table-bordered > thead > tr:first-child > td {
+  border-top-width: 0;
+}
+
+/*Baixo*/
+.react-bs-table .table-bordered > tfoot > tr:last-child > th,
+.react-bs-table .table-bordered > tfoot > tr:last-child > td {
+  border-bottom-width: 0;
+}
+
+.react-bs-table .react-bs-container-header > table > thead > tr > th,
+.react-bs-table .react-bs-container-footer > table > thead > tr > th {
+  vertical-align: middle;
+}
+
+.react-bs-table .react-bs-container-header > table > thead > tr > th .filter,
+.react-bs-table .react-bs-container-footer > table > thead > tr > th .filter {
+  font-weight: normal;
+}
+
+.react-bs-table .react-bs-container-header > table > thead > tr > th .select-filter option[value=''],
+.react-bs-table .react-bs-container-header > table > thead > tr > th .select-filter.placeholder-selected,
+.react-bs-table .react-bs-container-header > table > thead > tr > th .filter::-webkit-input-placeholder,
+.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-input::-webkit-input-placeholder{
+  color: lightgrey;
+  font-style: italic;
+}
+
+.react-bs-table .react-bs-container-footer > table > thead > tr > th .select-filter option[value=''],
+.react-bs-table .react-bs-container-footer > table > thead > tr > th .select-filter.placeholder-selected,
+.react-bs-table .react-bs-container-footer > table > thead > tr > th .filter::-webkit-input-placeholder,
+.react-bs-table .react-bs-container-footer > table > thead > tr > th .number-filter-input::-webkit-input-placeholder{
+  color: lightgrey;
+  font-style: italic;
+}
+
+.react-bs-table .react-bs-container-header > table > thead > tr > th .select-filter.placeholder-selected option:not([value='']),
+.react-bs-table .react-bs-container-footer > table > thead > tr > th .select-filter.placeholder-selected option:not([value='']) {
+  color: initial;
+  font-style: initial;
+}
+
+.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter,
+.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter {
+  display: flex;
+}
+
+.react-bs-table .react-bs-container-footer > table > thead > tr > th .number-filter,
+.react-bs-table .react-bs-container-footer > table > thead > tr > th .date-filter {
+  display: flex;
+}
+
+.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-input,
+.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter-input {
+  margin-left: 5px;
+  float: left;
+  width: calc(100% - 67px - 5px);
+}
+
+.react-bs-table .react-bs-container-footer > table > thead > tr > th .number-filter-input,
+.react-bs-table .react-bs-container-footer > table > thead > tr > th .date-filter-input {
+  margin-left: 5px;
+  float: left;
+  width: calc(100% - 67px - 5px);
+}
+
+.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-comparator,
+.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter-comparator {
+  width: 67px;
+  float: left;
+}
+
+.react-bs-table .react-bs-container-footer > table > thead > tr > th .number-filter-comparator,
+.react-bs-table .react-bs-container-footer > table > thead > tr > th .date-filter-comparator {
+  width: 67px;
+  float: left;
+}
+
+.react-bs-table .react-bs-container-header .sort-column {
+  cursor: pointer;
+}
+
+/*inline editor default style*/
+.react-bs-container .form-control.editor{
+  /*width:100%;
+  top:0;
+  left:0;*/
+  /*height: 100%;
+  position: absolute;*/
+}
+
+.react-bs-container  .textarea-save-btn{
+  position: absolute;
+  z-index: 100;
+  right: 0;
+  top: -21px;
+}
+
+.react-bs-table-no-data {
+  text-align: center;
+}
+
+
+.ReactModal__Overlay {
+  -webkit-perspective: 600;
+  perspective: 600;
+  opacity: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 101;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+  transition: opacity 150ms ease-out;
+}
+
+.ReactModal__Content {
+  -webkit-transform: scale(0.5) rotateX(-30deg);
+  transform: scale(0.5) rotateX(-30deg);
+}
+
+.ReactModal__Content--after-open {
+  -webkit-transform: scale(1) rotateX(0deg);
+  transform: scale(1) rotateX(0deg);
+  transition: all 150ms ease-in;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.ReactModal__Content--before-close {
+  -webkit-transform: scale(0.5) rotateX(30deg);
+  transform: scale(0.5) rotateX(30deg);
+  transition: all 150ms ease-in;
+}
+
+.ReactModal__Content.modal-dialog {
+  border: none;
+  background-color: transparent;
+}
+
+/*error tip style*/
+.animated {
+  animation-fill-mode: both;
+}
+
+.animated.bounceIn,
+.animated.bounceOut{
+  animation-duration: .75s;
+}
+
+.animated.shake{
+  animation-duration: .3s;
+}
+
+td.react-bs-table-expand-cell {
+    cursor: pointer;
+}
+
+th.react-bs-table-expand-cell > div {
+  cursor: pointer;
+}
+
+
+@keyframes shake {
+  from, to {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,  50%,  90% {
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  30%, 70%{
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+.shake {
+  animation-name: shake;
+}
+
+@keyframes bounceIn {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(.97, .97, .97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.bounceIn {
+  animation-name: bounceIn;
+}
+
+@keyframes bounceOut {
+  20% {
+    transform: scale3d(.9, .9, .9);
+  }
+
+  50%, 55% {
+    opacity: 1;
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+}
+
+.bounceOut {
+  animation-name: bounceOut;
+}