diff --git a/src/pages/digitalId/Validate.jsx b/src/pages/digitalId/Validate.jsx index 5ef3b28..7ceea41 100644 --- a/src/pages/digitalId/Validate.jsx +++ b/src/pages/digitalId/Validate.jsx @@ -2,9 +2,65 @@ import React, { useState } from 'react'; import Sidebar from '../../partials/Sidebar'; import Header from '../../partials/Header'; +import ValidateTable from "../../partials/validate/ValidateTable"; +import ValidatePanel from "../../partials/validate/ValidatePanel"; +import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap"; +import {TransactionID} from "../../utils/TransactionID"; +import {Link} from "react-router-dom"; +import User06 from "../../images/user-28-06.jpg"; +import User08 from "../../images/user-28-08.jpg"; +import User09 from "../../images/user-28-09.jpg"; +import User05 from "../../images/user-28-05.jpg"; function Validate () { const [sidebarOpen, setSidebarOpen] = useState(false); + const [validatePanelOpen, setValidatePanelOpen] = useState(true); + + const validateItems = [ + { + id: '40', + name: 'Today', + transid: TransactionID(), + usersImges: [ + { + img: User06, + imgId: "343" + }, + { + img: User08, + imgId: "345" + }, + { + img: User09, + imgId: "321" + }, + { + img: User05, + imgId: "387" + }, + ], + items: [ + { + seasonId: TransactionID(), + id: '555', + trunsText: 'Second name for', + checked: true + }, + { + seasonId: TransactionID(), + id: '534', + trunsText: 'Gender name for', + checked: true + }, + { + seasonId: TransactionID(), + id: '567', + trunsText: 'Document ID name for', + checked: true + }, + ] + }, + ]; return (
@@ -18,13 +74,47 @@ function Validate () {
- +
{/* Page header */} -
- {/* Title */} -

Validate ✨

+
+ {/* Title */} +

0x28394710234192304719234

+
+ Explore -> +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ +
+

Digiatl ID validation log ✨

+
+ {validateItems.map(item => { + return + })}
+
@@ -32,4 +122,4 @@ function Validate () { ) } -export default Validate; \ No newline at end of file +export default Validate; diff --git a/src/pages/digitalId/ValidationLog.jsx b/src/pages/digitalId/ValidationLog.jsx index 9474747..2437cf3 100644 --- a/src/pages/digitalId/ValidationLog.jsx +++ b/src/pages/digitalId/ValidationLog.jsx @@ -1,5 +1,6 @@ -import React, {useEffect, useState} from 'react'; +import React, { useState} from 'react'; +import ValidateRoadMap from "../../partials/validationlog/ValidateRoadMap"; import Sidebar from '../../partials/Sidebar'; import Header from '../../partials/Header'; import User05 from "../../images/user-28-05.jpg"; @@ -9,16 +10,98 @@ import User06 from "../../images/user-28-06.jpg"; import User03 from "../../images/user-28-03.jpg"; import User01 from "../../images/user-28-01.jpg"; import {TransactionID} from "../../utils/TransactionID"; -import {Link} from "react-router-dom"; - function ValidationLog () { const [sidebarOpen, setSidebarOpen] = useState(false); - const [transId, setTransId] = useState() - useEffect(()=>{ - setTransId(TransactionID()) - },[]) + const logItems = [ + { + id: '20', + name: 'Today', + transid: TransactionID(), + usersImges: [ + { + img: User06, + imgId: "249" + }, + { + img: User08, + imgId: "212" + }, + { + img: User09, + imgId: "217" + }, + { + img: User05, + imgId: "276" + }, + ], + items: [ + { + seasonId: TransactionID(), + id: '434', + trunsText: 'Second name', + checked: true + }, + { + seasonId: TransactionID(), + id: '476', + trunsText: 'First name by', + checked: true + }, + { + seasonId: TransactionID(), + id: '422', + trunsText: 'Document name by', + checked: true + }, + ] + }, + { + id: '30', + name: 'Last Week', + transid: TransactionID(), + usersImges: [ + { + img: User06, + imgId: "145" + }, + { + img: User08, + imgId: "182" + }, + { + img: User09, + imgId: "154" + }, + { + img: User05, + imgId: "114" + }, + ], + items: [ + { + seasonId: TransactionID(), + id: '654', + trunsText: 'Gender name by', + checked: true + }, + { + seasonId: TransactionID(), + id: '617', + trunsText: 'Second name Updated', + checked: false + }, + { + seasonId: TransactionID(), + id: '643', + trunsText: 'Gender name by', + checked: true + }, + ] + }, + ] return (
@@ -41,206 +124,10 @@ function ValidationLog () { {/*Psosts*/}
- {/* Post */} -
-
-
-

Today

-
-
-
-
- {/* Avatars */} - -
·
-
-
- {/* List */} -
    - {/* List item */} -
  • -
    - - -

    - Second name by {`0x${transId}`} -

    -
    -
    -
    {`0x${transId}`}
    - Transactions ID -
    -
    -
    {transId}
    - Validated data -
    - Explore -> -
    • - {/* List item */} -
  • -
    - - -

    - First name by {`0x${transId}`} -

    -
    -
    -
    {`0x${transId}`}
    - Transactions ID -
    -
    -
    {transId}
    - Validated data -
    - Explore -> -
    • - {/* List item */} -
  • -
    - -

    - Document name by {`0x${transId}`} -

    -
    -
    -
    {`0x${transId}`}
    - Transactions ID -
    -
    -
    {transId}
    - Validated data -
    - Explore -> -
    • -
-
-
-
- - {/* Post */} -
-
-
-

Last week

-
-
-
-
- {/* Avatars */} - -
·
-
-
- {/* List */} -
    - {/* List item */} -
  • -
    - - -

    - Gender name by {`0x${transId}`} -

    -
    -
    -
    {`0x${transId}`}
    - Transactions ID -
    -
    -
    {transId}
    - Validated data -
    - Explore -> -
    • - {/* List item */} -
  • -
    - - -
    -
    {`0x${transId}`}
    - Transactions ID -
    -
    -
    {transId}
    - Validated data -
    - Explore -> -
    • - {/* List item */} -
  • -
    - -

    - Gender name by {`0x${transId}`} -

    -
    -
    -
    {`0x${transId}`}
    - Transactions ID -
    -
    -
    {transId}
    - Validated data -
    - Explore -> -
    • -
-
-
-
- + {/* PostsID */} + {logItems.map(item => { + return + })} {/* Post */}
diff --git a/src/pages/digitalId/Verify.jsx b/src/pages/digitalId/Verify.jsx index 8510b51..34cd9e4 100644 --- a/src/pages/digitalId/Verify.jsx +++ b/src/pages/digitalId/Verify.jsx @@ -32,4 +32,4 @@ function Verify () { ) } -export default Verify; \ No newline at end of file +export default Verify; diff --git a/src/pages/finance/TransactionDetails.jsx b/src/pages/finance/TransactionDetails.jsx index 6a6a84c..a002889 100644 --- a/src/pages/finance/TransactionDetails.jsx +++ b/src/pages/finance/TransactionDetails.jsx @@ -104,4 +104,4 @@ function TransactionDetails() { ); } -export default TransactionDetails; \ No newline at end of file +export default TransactionDetails; diff --git a/src/partials/validate/ValidateItem.jsx b/src/partials/validate/ValidateItem.jsx new file mode 100644 index 0000000..13b013e --- /dev/null +++ b/src/partials/validate/ValidateItem.jsx @@ -0,0 +1,57 @@ +import React from 'react'; + +function ValidateTableItem(props) { + + const statusColor = (status) => { + switch (status) { + case 'Correct': + return 'bg-emerald-100 text-emerald-600'; + case 'Incorrect': + return 'bg-rose-100 text-rose-500'; + default: + return 'bg-slate-100 text-slate-500'; + } + }; + + return ( + { e.stopPropagation(); props.setValidatePanelOpen(true); }}> + +
+ +
+ + +
+
{props.filed}
+
+ + +
{props.data}
+ + +
{props.seed}
+ + +
+
{props.status}
+
+ + + {/* Menu button */} + + + + ); +} + +export default ValidateTableItem; diff --git a/src/partials/validate/ValidatePanel.jsx b/src/partials/validate/ValidatePanel.jsx new file mode 100644 index 0000000..57bd629 --- /dev/null +++ b/src/partials/validate/ValidatePanel.jsx @@ -0,0 +1,136 @@ +import React, { useEffect, useRef } from 'react'; + +import Image from '../../images/transactions-image-04.svg'; + +function TransactionPanel({ + validatePanelOpen, + setValidatePanelOpen +}) { + + const closeBtn = useRef(null); + const panelContent = useRef(null); + + // close on click outside + useEffect(() => { + const clickHandler = ({ target }) => { + if (!validatePanelOpen || panelContent.current.contains(target) || closeBtn.current.contains(target)) return; + setValidatePanelOpen(false); + }; + document.addEventListener('click', clickHandler); + return () => document.removeEventListener('click', clickHandler); + }); + + // close if the esc key is pressed + useEffect(() => { + const keyHandler = ({ keyCode }) => { + if (!validatePanelOpen || keyCode !== 27) return; + setValidatePanelOpen(false); + }; + document.addEventListener('keydown', keyHandler); + return () => document.removeEventListener('keydown', keyHandler); + }); + + return ( +
+
+ +
+
+
Bank Transfer
+
22/01/2022, 8:56 PM
+ {/* Details */} +
+ {/* Top */} +
+
+ Transaction 04 +
+
0.012 IDN
+
Total amount fee
+
+ {/* Divider */} + + {/* Receipts */} +
+
Receipts
+
+ + + + + +
+
+ {/* Notes */} +
+
Notes
+
+ +