Develop

package.json

@@ -14,6 +14,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-table": "^7.7.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
@@ -43,9 +44,10 @@
     ]
   },
   "devDependencies": {
+    "namor": "^1.1.2",
     "autoprefixer": "^9.8.6",
+    "gh-pages": "^3.2.3",
     "postcss": "^7.0.36",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
-    "gh-pages": "^3.2.3"
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7"
   }
 }

src/App.css

@@ -97,3 +97,110 @@ li {
   box-shadow: inset 0px -2px 0px #0b0c0c;
 }
 /* Component Button */
+.WhatsNewCard {
+  box-shadow: 0 1px 2px rgb(0 0 0 / 16%);
+  border-radius: 0.25rem;
+  --bg-opacity: 1;
+  background-color: #fff;
+  --border-opacity: 1;
+  border-left: 4px solid #f47738;
+  padding: 8px;
+}
+.WhatsNewCard h2 {
+  font-size: 16px;
+  line-height: 24px;
+  --text-opacity: 1;
+  color: #0b0c0c;
+  margin-bottom: 4px;
+}
+.WhatsNewCard p {
+  color: #505a5f;
+}
+.prefix,
+.sufix {
+  display: flex;
+  align-items: center;
+}
+.prefix span,
+.sufix span {
+  text-align: center;
+  border: 1px solid #000;
+  margin-bottom: 24px;
+  width: 45px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.prefix span {
+  border-right: 0px;
+}
+.sufix span {
+  border-left: 0px;
+}
+.passwordSmall input {
+  margin-bottom: 10px;
+}
+
+.tagInactive {
+  background: rgba(212, 53, 28, 0.12);
+  padding: 0 24px;
+  border-radius: 11px;
+  color: #d4351c !important;
+  font-weight: bold;
+}
+.tagActive {
+  background: rgba(0, 112, 60, 0.12);
+  padding: 0 24px;
+  border-radius: 11px;
+  color: #00703c;
+  font-weight: bold;
+}
+
+/* Side Nav Start */
+.sidebar {
+  width: 64px;
+  padding: 20px 0;
+  background: #22394d;
+  height: 100%;
+  color: white;
+  z-index: 1000;
+  padding-bottom: 100px;
+}
+.actions {
+  cursor: pointer;
+  padding: 0 20px;
+  margin-bottom: 32px;
+}
+.active {
+  border-right: 4px solid #f47738;
+  padding-right: 16px;
+}
+/* Side Nav End */
+
+/* Table Start */
+.tabelMain {
+  background: #ffffff;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+  border-radius: 4px;
+}
+.tableCard {
+  background: #fafafa;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+  border-radius: 8px 8px 0px 0px;
+}
+.summary_ListHead h2 {
+  font-weight: bold;
+  font-size: 32px;
+  line-height: 37px;
+  color: #0b0c0c;
+  padding: 15px 40px;
+}
+.summary_ListHead h3 {
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 28px;
+  color: #0b0c0c;
+  padding: 15px 40px;
+}
+/* Table end */

src/Components/common/Pagination.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import PaginationImg1 from "../../assets/img/components/pagination/1.png"
+import PaginationImg2 from "../../assets/img/components/pagination/2.png"
+
+const Pagination = () => {
+    return (
+        <div className="pagination">
+            <select
+                className="text-input_border pr-3"
+            >
+                <option key="10" value="10" selected>
+                    Rows 10
+                </option>
+                <option key="20" value="20">
+                    Rows 20
+                </option>
+                <option key="30" value="30">
+                    Rows 30
+                </option>
+            </select>
+            <span className="text-input_border px-4">
+                {`1 - 5 of 5`}
+            </span>
+            <span className="flex items-center">
+                <img src={PaginationImg1} alt="|<" className="px-3" />
+                <img src={PaginationImg2} alt=">" className="px-3" />
+                <img src={PaginationImg2} alt="<" className="transform rotate-180 px-3" />
+                <img src={PaginationImg1} alt=">|" className="transform rotate-180 px-3" />
+            </span>
+        </div>
+    )
+}
+export default Pagination

src/Components/common/ReactTable.js

@@ -0,0 +1,142 @@
+import React from 'react'
+import { usePagination, useTable } from 'react-table'
+import  Pagination  from './Pagination'
+
+function ReactTable() {
+    const data = React.useMemo(
+        () => [
+            {
+                col1: <span className="text-border">PB-FSM-2019-04-23-898898</span>,
+                col2: '12/08/2020',
+                col3: 'Alakapuri',
+                col4: 'Pending for Payment',
+                col5: <span className="tagInactive">12</span>,
+            },
+            {
+                col1: <span className="text-border">PB-FSM-2019-04-23-898898</span>,
+                col2: '12/08/2020',
+                col3: 'Alakapuri',
+                col4: 'Pending for Payment',
+                col5: <span className="tagInactive">12</span>,
+            },
+            {
+                col1: <span className="text-border">PB-FSM-2019-04-23-898898</span>,
+                col2: '12/08/2020',
+                col3: 'Alakapuri',
+                col4: 'Pending for Payment',
+                col5: <span className="tagInactive">12</span>,
+            },
+            {
+                col1: <span className="text-border">PB-FSM-2019-04-23-898898</span>,
+                col2: '12/08/2020',
+                col3: 'Alakapuri',
+                col4: 'Pending for Payment',
+                col5: <span className="tagInactive">12</span>,
+            },
+            {
+                col1: <span className="text-border">PB-FSM-2019-04-23-898898</span>,
+                col2: '12/08/2020',
+                col3: 'Alakapuri',
+                col4: 'Pending for Payment',
+                col5: <span className="tagActive">12</span>,
+            },
+        ],
+        []
+    )
+
+    const columns = React.useMemo(
+        () => [
+            {
+                Header: 'Column 1',
+                accessor: 'col1', // accessor is the "key" in the data
+            },
+            {
+                Header: 'Column 2',
+                accessor: 'col2',
+            },
+            {
+                Header: 'Column 3',
+                accessor: 'col3',
+            },
+            {
+                Header: 'Column 4',
+                accessor: 'col4',
+            },
+            {
+                Header: 'Column 5',
+                accessor: 'col5',
+            },
+        ],
+        []
+    )
+
+    const {
+        getTableProps,
+        getTableBodyProps,
+        headerGroups,
+        rows,
+        prepareRow,
+        page,
+        nextPage,
+        PreviousPage,
+        canNextPage,
+        canPreviousPage
+    } = useTable(
+        { columns, data },
+        usePagination
+    )
+
+    return (
+        <>
+            <table {...getTableProps()} className="tabelMain">
+                <thead>
+                    {headerGroups.map(headerGroup => (
+                        <tr {...headerGroup.getHeaderGroupProps()}>
+                            {headerGroup.headers.map(column => (
+                                <th
+                                    {...column.getHeaderProps()}
+                                    style={{
+                                        borderBottom: '1px solid #B1B4B6',
+                                        color: '#0B0C0',
+                                        fontWeight: 'bold',
+                                        textAlign: 'left',
+                                        padding: '20px 40px'
+                                    }}
+                                >
+                                    {column.render('Header')}
+                                </th>
+                            ))}
+                        </tr>
+                    ))}
+                </thead>
+                <tbody {...getTableBodyProps()}>
+                    {rows.map(row => {
+                        prepareRow(row)
+                        return (
+                            <tr {...row.getRowProps()} style={{ borderBottom: '1px solid #B1B4B6' }}>
+                                {row.cells.map(cell => {
+                                    return (
+                                        <td
+                                            {...cell.getCellProps()}
+                                            style={{
+                                                padding: '20px 40px',
+                                                // borderBottom: '1px solid #B1B4B6',
+                                            }}
+                                        >
+                                            {cell.render('Cell')}
+                                        </td>
+                                    )
+                                })}
+                            </tr>
+                        )
+                    })}
+                </tbody>
+            </table>
+            {/* Pagination */}
+            <Pagination />
+            {/* Pagination */}
+        </>
+    )
+}
+
+export default ReactTable