src/components/root/Home.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 
 import { callAPI } from "../actions/API";
 import Migrations from "./Pages/Migrations";
+import Error from "../actions/Error";
 import SideMigrations from "./Pages/Migrations/SideMigrations";
 
 export class Home extends Component {

src/components/root/Navigation.js

@@ -5,7 +5,7 @@ export class Navigation extends Component {
   render() {
     return (
       <nav>
-        <div className="navbar-fixed grey darken-1">
+        <div className="navbar-fixed cyan darken-4">
           <div className="nav-wrapper">
             <ul className="left hide-on-med-and-down">
               <li>

src/components/root/Pages/AllReports/GetSingleMigration.js

@@ -1,62 +0,0 @@
-import React, { Component, useEffect, useState } from "react";
-import moment from "moment";
-import { Col, FormGroup, Row, Container, Label } from "reactstrap";
-import { Formik, Form } from "formik";
-import { Input, Submit } from "formstrap";
-import { callAPI } from "../../../actions/API";
-import ShowMigrations from "./ShowMigrations";
-
-const initialValues = {
-  submit_time: moment().format("YYYY-MM-DD"),
-};
-const onSubmit = async (values, { setSubmitting }) => {
-  callAPI
-    .get("/", values)
-    .then((response) => {
-      console.log(response.data);
-      this.setState({
-        singlemigs: response.data,
-      });
-    })
-    .catch((error) => {
-      console.log(error);
-    });
-  setSubmitting(false);
-};
-
-export default class GetSingleMigration extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      singlemigs: [],
-      e: false,
-    };
-  }
-  render() {
-    return (
-      <div>
-        <Formik initialValues={initialValues} onSubmit={onSubmit}>
-          <Form>
-            <Container>
-              <Row>
-                <Col>
-                  <FormGroup>
-                    <Label for="Migration ID">Migration ID</Label>
-                    <Input
-                      type="text"
-                      name="id"
-                      id="id"
-                      placeholder="Migration ID"
-                    />
-                  </FormGroup>
-                </Col>
-              </Row>
-              <Submit withSpinner>Submit</Submit>
-            </Container>
-          </Form>
-        </Formik>
-        <ShowMigrations />
-      </div>
-    );
-  }
-}

src/components/root/Pages/AllReports/ShowMigrations.js

@@ -1,150 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { callAPI } from "../../../actions/API";
-import BootstrapTable from "react-bootstrap-table-next";
-import paginationFactory from "react-bootstrap-table2-paginator";
-import * as ReactBootstrap from "react-bootstrap";
-import filterFactory from "react-bootstrap-table2-filter";
-import ToolkitProvider, {
-  Search,
-  CSVExport,
-} from "react-bootstrap-table2-toolkit";
-
-const ShowMigrations = () => {
-  const [list, setList] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const { SearchBar } = Search;
-  const { ExportCSVButton } = CSVExport;
-  const sizePerPageRenderer = ({
-    options,
-    currSizePerPage,
-    onSizePerPageChange,
-  }) => (
-    <div className="btn-group" role="group">
-      {options.map((option) => {
-        const isSelect = currSizePerPage === `${option.page}`;
-        return (
-          <button
-            key={option.text}
-            type="button"
-            onClick={() => onSizePerPageChange(option.page)}
-            className={`btn ${isSelect ? "btn-secondary" : "btn-success"}`}
-          >
-            {option.text}
-          </button>
-        );
-      })}
-    </div>
-  );
-
-  const getListData = async () => {
-    try {
-      const data = await console.log(data);
-      setList(data.data);
-      setLoading(true);
-    } catch (e) {
-      console.log(e);
-    }
-  };
-  const options = {
-    paginationSize: 4,
-    pageStartIndex: 0,
-    // alwaysShowAllBtns: true, // Always show next and previous button
-    // withFirstAndLast: false, // Hide the going to First and Last page button
-    // hideSizePerPage: true, // Hide the sizePerPage dropdown always
-    // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
-    firstPageText: "First",
-    prePageText: "Back",
-    nextPageText: "Next",
-    lastPageText: "Last",
-    nextPageTitle: "First page",
-    prePageTitle: "Pre page",
-    firstPageTitle: "Next page",
-    lastPageTitle: "Last page",
-    showTotal: true,
-    disablePageTitle: true,
-    sizePerPageList: [
-      {
-        text: "50",
-        value: 50,
-      },
-      {
-        text: "100",
-        value: 100,
-      },
-    ],
-    sizePerPageRenderer, // A numeric array is also available. the purpose of above example is custom the text
-  };
-  const columns = [
-    { dataField: "id", text: "ID", hidden: true },
-    { dataField: "submit_time", text: "Submit Time", sort: true },
-    {
-      dataField: "domain",
-      text: "Domain",
-      sort: true,
-      formatter: (cell, row) => <a href={"reports/" + row.id}> {cell} </a>,
-    },
-    { dataField: "booked_date", text: "Booked Date", sort: true },
-    { dataField: "booked_time", text: "Booked Time", sort: true },
-    { dataField: "original_server", text: "Original Server", sort: true },
-    { dataField: "new_server", text: "New Server", sort: true },
-    { dataField: "username", text: "Username", sort: true },
-    { dataField: "brand", text: "Brand", sort: true },
-    { dataField: "ticket_id", text: "TicketID", sort: true },
-    { dataField: "migration_status", text: "Status", sort: true },
-    { dataField: "agent_booked", text: "Agent initials", sort: true },
-    { dataField: "additional_domains", text: "Additional Domains", sort: true },
-    { dataField: "migration_type", text: "Type", sort: true },
-    { dataField: "term_date", text: "Termination Date", sort: true },
-    { dataField: "notes", text: "Notes", sort: true },
-    {
-      dataField: "report",
-      text: "Show Detailed Report",
-      formatter: (cell, row) => <a href={cell + row.id}> {cell} </a>,
-    },
-  ];
-
-  useEffect(() => {
-    getListData();
-  }, []);
-
-  return (
-    <div className="ShowMigrations">
-      {loading ? (
-        <ToolkitProvider
-          keyField="name"
-          data={list}
-          columns={columns}
-          search
-          exportCSV
-        >
-          {(props) => (
-            <div>
-              <div className="serSec">
-                <h3 className="hdrOne"></h3>
-                <SearchBar {...props.searchProps} />
-              </div>
-
-              <div className="table-responsive">
-                <BootstrapTable
-                  {...props.baseProps}
-                  filter={filterFactory()}
-                  pagination={paginationFactory(options)}
-                  striped
-                  hover
-                  condensed
-                />
-              </div>
-              <ExportCSVButton {...props.csvProps}>
-                Export CSV!!
-              </ExportCSVButton>
-            </div>
-          )}
-        </ToolkitProvider>
-      ) : (
-        <ReactBootstrap.Spinner animation="border" />
-      )}
-    </div>
-  );
-};
-
-export default ShowMigrations;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Component } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
 import moment from "moment";
 import { Col, FormGroup, Row, Container, Label } from "reactstrap";

src/components/root/Pages/Migrations.js

@@ -34,7 +34,7 @@ class Migrations extends Component {
     return (
       <div className="row">
         <div className="col s6 m4">
-          <div className="card grey darken-1">
+          <div className="card blue-grey darken-1">
             <div className="card-content white-text">
               <span className="card-title"></span>
               {this.bookedMig()}
@@ -45,7 +45,7 @@ class Migrations extends Component {
           </div>
         </div>
         <div className="col s6 m4">
-          <div className="card grey darken-1">
+          <div className="card blue-grey darken-1">
             <div className="card-content white-text">
               <span className="card-title"></span>
               <p></p>
@@ -58,7 +58,7 @@ class Migrations extends Component {
         </div>
 
         <div className="col s6 m4">
-          <div className="card grey darken-1">
+          <div className="card blue-grey darken-1">
             <div className="card-content white-text">
               <span className="card-title"></span>
               {this.completedMig()}

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

@@ -1,6 +1,8 @@
 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) {

src/components/root/Pages/Reports.js

@@ -1,9 +1,9 @@
-import React from "react";
+import React from 'react'
-
-import GetSingleMigration from "./AllReports/GetSingleMigration";
 
 const Reports = () => {
-  return <GetSingleMigration />;
+    return (
-};
+        <h1>Reports</h1>
+    );
+}
 
 export default Reports;