table added

ui/src/components/UI/Table.tsx

@@ -0,0 +1,74 @@
+import React, {useEffect, useState} from "react";
+import './style/Table.sass';
+import editImg from "../assets/edit.svg";
+import deleteImg from "../assets/delete.svg"
+import circleImg from "../assets/dotted-circle.svg"
+import Delete from '@material-ui/icons/Delete';
+import Edit from '@material-ui/icons/Edit';
+
+
+interface Props {
+    rows : any[];
+    cols : {field:string, cellClassName?: string,header:string, width?:number,
+            getCellClassName?:(field:string,value : any) => string}[];
+    onRowEdit : (any) => void;
+    onRowDelete : (any) => void;
+    noDataMeesage : string;
+}
+
+export const Table: React.FC<Props> = ({rows, cols, onRowDelete, onRowEdit,noDataMeesage}) => {
+
+    const [tableRows, updateTableRows] = useState(rows);
+
+    useEffect(() => {
+        updateTableRows(rows)
+    },[rows])
+
+    const _onRowEdit = (row) => {
+        onRowEdit(row)
+    }
+    
+    const _onRowDelete = (row) => {
+        onRowDelete(row);
+    }
+    return <table cellPadding={5} style={{borderCollapse: "collapse"}} className="mui-table">
+    <thead className="mui-table__thead">
+    <tr style={{borderBottomWidth: "2px"}} className="mui-table__tr">
+        {cols?.map((col)=> {
+            return <th className="mui-table__th">{col.header}</th>
+        })}
+        <th></th>
+    </tr>
+    </thead>
+    <tbody className="mui-table__tbody">
+        {
+            ((tableRows == null) || (tableRows.length === 0)) ?
+            <tr className="mui-table__no-data">
+            <img src={circleImg} alt="No data Found"></img>
+            <div className="mui-table__no-data-message">{noDataMeesage}</div>
+            </tr>
+
+            :
+        
+            tableRows?.map(rowData => {
+                return <tr key={rowData?.id} className="mui-table__tr">
+                    {cols.map(col => {                        
+                        return <td className={`${col.getCellClassName ? col.getCellClassName(col.field, rowData[col.field]) : ""}
+                                ${col?.cellClassName ?? ""} mui-table__td`}>
+                                    {rowData[col.field]}
+                            </td>
+                    })}
+                    <td className="mui-table__td mui-table__row-actions">        
+                        <span onClick={() => _onRowEdit(rowData)}>
+                            <Edit className="mui-table__row-actions--edit"></Edit>
+                        </span>
+                        <span  onClick={() => _onRowDelete(rowData)}>
+                            <Delete className="mui-table__row-actions--delete"></Delete>
+                        </span>
+                    </td>
+                </tr>
+            })
+        }
+    </tbody>
+</table>
+}

ui/src/components/UI/style/Table.sass

@@ -0,0 +1,92 @@
+@import '../../../variables.module'
+
+.mui-table
+    width: 100%
+    margin-top: 20px
+
+    &__tbody
+      max-height: calc(70vh - 355px)
+      overflow-y: auto
+      display: block
+
+    &__th
+      color: $blue-gray
+      text-align: left
+      padding: 10px
+
+    &__tr
+      border-bottom-width: 1px
+      border-bottom-color: $data-background-color
+      border-bottom-style: solid
+      display: table
+      table-layout: fixed
+      width: 100%
+
+    &__no-data
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        height: 95px;
+        overflow-y: auto;
+        margin: 2%;
+        align-items: center;
+        align-content: center;
+        padding-top: 3%;
+        padding-bottom: 3%;
+
+        &-message
+            font-style: normal;
+            font-weight: 600;
+            font-size: 12px;
+            line-height: 15px;
+            color: $light-gray;
+
+    &__tr:hover
+        background: #F7F9FC
+
+        & .mui-table__row-actions
+            &--delete
+                cursor: pointer;
+                path
+                    fill:#DB2156 
+            &--edit 
+                cursor: pointer;
+                path
+                    fill: $blue-color
+
+    &__row-actions
+        display: flex
+        justify-content: flex-end
+                 
+
+    &__td
+      color: $light-gray
+      padding: 10px
+      font-size: 16px
+
+@mixin row-actions
+        display: flex
+        justify-content: flex-end
+
+
+@mixin status-base($bg_color, $color, $border)
+    box-sizing: border-box
+    border-radius: 4px
+    height : 20px
+    width : 63px
+    display: flex
+    align-content: center
+    justify-content: center
+    align-items: center
+    background: $bg_color
+    color: $color
+    border: $border
+
+.status
+    &--active
+        @include status-base(rgba(111, 207, 151, 0.5), #247E4B, 1px solid #219653)
+
+    &--pending
+        @include status-base(rgba(242, 201, 76, 0.5), #8C7325, 1px solid #F2994A)
+
+    

ui/src/components/assets/dotted-circle.svg

@@ -0,0 +1,3 @@
+<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="27.5" cy="27.5" r="27" stroke="#BCCEFD" stroke-dasharray="6 6"/>
+</svg>

ui/src/variables.module.scss

@@ -7,6 +7,8 @@ $blue-color: #205CF5;
 $light-blue-color: #BCCEFD;
 $success-color: #27AE60;
 $failure-color: #EB5757;
+
+
 $blue-gray: #494677;
 $light-gray: #8F9BB2;