ShiftReport Designed, Dummy data added and shown in Dashboard

employeemanagement/src/components/dashboard/Dashboard.js

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

employeemanagement/src/components/layout/ShiftReport.js

+import React from 'react'
+
+const ShiftReport = () =>{
+    return(
+        <div className="container">
+            <h2 className="text-center">Work report</h2>
+            <h5 className="text-center">Expected work: 08:00 to 17:00, 9 Hours with 1 Hour lunch break</h5>
+            <table className="table table-striped">
+                <thead>
+                    <tr>
+                        <th scope="col">Date</th>
+                        <th scope="col">Start time</th>
+                        <th scope="col">Lunch time</th>
+                        <th scope="col">Lunch end time</th>
+                        <th scope="col">Work end</th>
+                        <th scope="col">Total Break</th>
+                        <th scope="col">Total work</th>
+                        <th scope="col">Break + Work</th>
+                    </tr>
+                </thead>
+                <tbody className="workList">
+                    <tr className="collection-item">
+                        <th>DummyData</th>
+                        <td>DummyData</td>
+                        <td>DummyData</td>
+                        <td>DummyData</td>
+                        <td>DummyData</td>
+                        <th>DummyData</th>
+                        <th>DummyData</th>
+                        <th>DummyData</th>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+export default ShiftReport

employeemanagement/src/index.css

@@ -49,6 +49,10 @@ code {
   height: 100px;
 }
 
+#content{
+  min-height: 500px;
+}
+
 #content .row{
   margin: 50px 0px;
-}
\ No newline at end of file
+}