Merge pull request #16 from taraldefi/feat/tables

feat: add overview table
taraldefi · Jul 13, 2023 · 11d0954 · 11d0954
2 parents 5241131 + 5225afb
commit 11d0954
Show file tree

Hide file tree

Showing 6 changed files with 445 additions and 255 deletions.
diff --git a/src/Table/Table.scss b/src/Table/Table.scss
@@ -69,6 +69,41 @@
     font-size: 14px;
   }
 
+  .process--tab {
+    font-size: 14px;
+    font-weight: bold;
+    margin-left: 24px;
+    width: 400px;
+  }
+
+  .image--container {
+    :nth-child(1) {
+      left: 12px;
+    }
+
+    :nth-child(3) {
+      right: 12px;
+    }
+
+    :nth-child(4) {
+      right: 24px;
+    }
+
+    :nth-child(5) {
+      right: 36px;
+    }
+
+    .images {
+      border-radius: 50%;
+      // border: 1px solid #ffffff;
+      position: relative;
+    }
+  }
+
+  .date {
+    margin-right: 26px;
+  }
+
   .hit--tab {
     font-size: 11px;
     font-weight: normal;

diff --git a/src/Table/Table.stories.tsx b/src/Table/Table.stories.tsx
@@ -1,5 +1,5 @@
 // Generated with util/create-component.js
-import React from "react";
+import React from 'react';
 import {
   ApplicationTable,
   CompanyTable,
@@ -10,7 +10,8 @@ import {
   ScreeningTable,
   ReceiptTable,
   RepaymentTable,
-} from "./Table";
+  OverviewTable,
+} from './Table';
 import {
   ApplicationTableData,
   CompanyTableData,
@@ -21,9 +22,10 @@ import {
   SignoffTabelData,
   ReceiptTableData,
   RepaymentTableData,
-} from "./data/data";
+  OverviewTableData,
+} from './data/data';
 export default {
-  title: "Table",
+  title: 'Table',
 };
 
 export const Application = () => (
@@ -58,3 +60,7 @@ export const receipt = () => (
 export const repayment = () => (
   <RepaymentTable repaymentTableData={RepaymentTableData} />
 );
+
+export const overview = () => (
+  <OverviewTable overviewTableData={OverviewTableData} />
+);
diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx
@@ -9,18 +9,20 @@ import {
 } from 'react-feather';
 import {
   applicationTableType,
-  researchTableTypes,
+  researchTableType,
   entityTableType,
   companyTableType,
   screeningTableType,
-  personsTableTypes,
-  signOffTableTypes,
-  receiptTableTypes,
-  repaymentTableTypes,
+  personsTableType,
+  signOffTableType,
+  receiptTableType,
+  repaymentTableType,
+  overviewTableType,
 } from './Table.types';
 import './Table.scss';
+import { ProgressBar, StatusWidget } from '../Widgets';
 
-export const ReceiptTable: React.FC<receiptTableTypes> = ({
+export const ReceiptTable: React.FC<receiptTableType> = ({
   receiptTableData,
 }) => (
   <div className="table">
@@ -61,7 +63,7 @@ export const ReceiptTable: React.FC<receiptTableTypes> = ({
   </div>
 );
 
-export const RepaymentTable: React.FC<repaymentTableTypes> = ({
+export const RepaymentTable: React.FC<repaymentTableType> = ({
   repaymentTableData,
 }) => (
   <div className="table">
@@ -249,7 +251,7 @@ export const ScreeningTable: React.FC<screeningTableType> = ({
   </div>
 );
 
-export const PersonsTable: React.FC<personsTableTypes> = ({
+export const PersonsTable: React.FC<personsTableType> = ({
   personsTableData,
 }) => (
   <div className={'table'}>
@@ -315,7 +317,7 @@ export const PersonsTable: React.FC<personsTableTypes> = ({
   </div>
 );
 
-export const ResearchTable: React.FC<researchTableTypes> = ({
+export const ResearchTable: React.FC<researchTableType> = ({
   researchTableData,
 }) => (
   <div className="table">
@@ -362,7 +364,7 @@ export const ResearchTable: React.FC<researchTableTypes> = ({
   </div>
 );
 
-export const SignOffTable: React.FC<signOffTableTypes> = ({
+export const SignOffTable: React.FC<signOffTableType> = ({
   signOffTableData,
 }) => (
   <div className="table">
@@ -424,3 +426,57 @@ export const SignOffTable: React.FC<signOffTableTypes> = ({
     </table>
   </div>
 );
+
+export const OverviewTable: React.FC<overviewTableType> = ({
+  overviewTableData,
+}) => (
+  <div className="table">
+    <table>
+      <tbody>
+        <tr>
+          {['Process', 'Users', 'Progress', 'Status', 'Date'].map(
+            (item, index) => {
+              return <th key={index}>{item}</th>;
+            }
+          )}
+        </tr>
+        {overviewTableData.map((item, index) => {
+          return (
+            <tr key={index}>
+              <td className="process--tab">{item.process}</td>
+              <td className="image--container">
+                {overviewTableData[index].users.map((item, index) => {
+                  return (
+                    <img
+                      className="images"
+                      src={item}
+                      key={index}
+                      alt=""
+                      width={30}
+                      height={30}
+                    ></img>
+                  );
+                })}
+              </td>
+              <td>
+                <ProgressBar
+                  progress={item.progress}
+                  color={'#04C1DE'}
+                  showText={false}
+                />
+              </td>
+              <td>
+                <StatusWidget
+                  type={item.status}
+                  showIcon={false}
+                ></StatusWidget>
+              </td>
+
+              <td className="date">{item.date}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  </div>
+);
diff --git a/src/Table/Table.types.ts b/src/Table/Table.types.ts
@@ -43,7 +43,7 @@ export interface screeningTableType {
   screeningTableData: screeningTableDataType[];
 }
 
-export interface personsTableDataTypes {
+export interface personsTableDataType {
   name: string;
   image: string;
   email: string;
@@ -52,22 +52,22 @@ export interface personsTableDataTypes {
   isDone: boolean;
 }
 
-export interface personsTableTypes {
-  personsTableData: personsTableDataTypes[];
+export interface personsTableType {
+  personsTableData: personsTableDataType[];
 }
 
-export interface researchTableDataTypes {
+export interface researchTableDataType {
   name: string;
   image?: string;
   Hit: string;
   Source: string;
 }
 
-export interface researchTableTypes {
-  researchTableData: researchTableDataTypes[];
+export interface researchTableType {
+  researchTableData: researchTableDataType[];
 }
 
-export interface signOffTabelDataTypes {
+export interface signOffTabelDataType {
   name: string;
   image: string;
   email: string;
@@ -76,29 +76,41 @@ export interface signOffTabelDataTypes {
   statusSigned: boolean;
 }
 
-export interface signOffTableTypes {
-  signOffTableData: signOffTabelDataTypes[];
+export interface signOffTableType {
+  signOffTableData: signOffTabelDataType[];
 }
 
-interface receiptTableDataTypes {
+interface receiptTableDataType {
   transactionDate: string;
   amount: number;
   remainingBalance: number;
   paymentMethod: string;
   url: string;
 }
 
-export interface receiptTableTypes {
-  receiptTableData: receiptTableDataTypes[];
+export interface receiptTableType {
+  receiptTableData: receiptTableDataType[];
 }
 
-interface repaymentTableDataTypes {
+interface repaymentTableDataType {
   paymentId: string;
   amount: number;
   dueDate: string;
   status: string;
 }
 
-export interface repaymentTableTypes {
-  repaymentTableData: repaymentTableDataTypes[];
+export interface repaymentTableType {
+  repaymentTableData: repaymentTableDataType[];
+}
+
+export interface overviewTableDataType {
+  process: string;
+  users: string[];
+  progress: number;
+  status: any;
+  date: string;
+}
+
+export interface overviewTableType {
+  overviewTableData: overviewTableDataType[];
 }