t

src/components/root/Home.js

@@ -2,7 +2,6 @@ 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 cyan darken-4">
+        <div className="navbar-fixed grey darken-1">
           <div className="nav-wrapper">
             <ul className="left hide-on-med-and-down">
               <li>

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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,150 @@
+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, { Component } from "react";
+import React 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 blue-grey darken-1">
+          <div className="card 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 blue-grey darken-1">
+          <div className="card 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 blue-grey darken-1">
+          <div className="card grey darken-1">
             <div className="card-content white-text">
               <span className="card-title"></span>
               {this.completedMig()}

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

@@ -1,8 +1,6 @@
 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 (
-        <h1>Reports</h1>
-    );
-}
+  return <GetSingleMigration />;
+};
 
 export default Reports;