ManageShift component created, designed and link into Dashboard

employeemanagement/src/components/dashboard/Dashboard.js

 import React, { Component } from 'react'
 import Navbar from '../layout/Navbar';
+import ManageShift from '../layout/ManageShift';
 
 class Dashboard extends Component {
     render() {
         return (
-            <div>
+            <div id="content">
                 <Navbar />
+                <ManageShift />
             </div>
         )
     }

employeemanagement/src/components/layout/ManageShift.js

+import React, { Component } from 'react'
+
+class ManageShift extends Component {
+    render() {
+        return (
+            <div className="container"> 
+                <div className="row">
+                    <div className="col-3 text-center"><button onClick={this.handleCreatEvent} id="startWorkTime" type="button" className="btn btn-success btn-sm btn-special">Start Work</button></div>
+                    <div className="col-3 text-center"><button disabled type="button" className="btn btn-success btn-sm btn-special">Start Lunch Break</button></div>
+                    <div className="col-3 text-center"><button disabled type="button" className="btn btn-success btn-sm btn-special">Lunch Break Finish</button></div>
+                    <div className="col-3 text-center"><button disabled type="button" className="btn btn-success btn-sm btn-special">Close Work</button></div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default ManageShift

employeemanagement/src/index.css

@@ -43,3 +43,12 @@ code {
   padding: 10px;
 }
 
+/*manageshift*/
+.btn-special{
+  width: 120px;
+  height: 100px;
+}
+
+#content .row{
+  margin: 50px 0px;
+}
\ No newline at end of file