diff --git a/src/pages/digitalId/Validate.jsx b/src/pages/digitalId/Validate.jsx index 18ff7c4..80978fe 100644 --- a/src/pages/digitalId/Validate.jsx +++ b/src/pages/digitalId/Validate.jsx @@ -2,9 +2,64 @@ 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 {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', + data: '7234ABC342342352345', + usersImges: [ + { + img: User06, + imgId: "343" + }, + { + img: User08, + imgId: "345" + }, + { + img: User09, + imgId: "321" + }, + { + img: User05, + imgId: "387" + }, + ], + items: [ + { + dataSeason: '7234ABC342342352345', + id: '555', + text: 'Second name for', + checked: true + }, + { + dataSeason: '7234ABC342342352345', + id: '534', + text: 'Gender name for', + checked: true + }, + { + dataSeason: '7234ABC342342352345', + id: '567', + text: 'Document ID name for', + checked: true + }, + ] + }, + ]; return (
@@ -16,12 +71,47 @@ function Validate () {
+
{/* Page header */} -
- {/* Title */} -

Validate ✨

+
+ {/* Title */} +

0x28394710234192304719234

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

Digiatl ID validation log ✨

+
+ {validateItems.map(item => { + return + })}
+
diff --git a/src/pages/digitalId/ValidationLog.jsx b/src/pages/digitalId/ValidationLog.jsx index ff3de08..adf7e9d 100644 --- a/src/pages/digitalId/ValidationLog.jsx +++ b/src/pages/digitalId/ValidationLog.jsx @@ -1,30 +1,187 @@ 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"; +import User08 from "../../images/user-28-08.jpg"; +import User09 from "../../images/user-28-09.jpg"; +import User06 from "../../images/user-28-06.jpg"; +import User03 from "../../images/user-28-03.jpg"; +import User01 from "../../images/user-28-01.jpg"; function ValidationLog () { const [sidebarOpen, setSidebarOpen] = useState(false); + const logItems = [ + { + id: '20', + name: 'Today', + data: '7234ABC342342352345', + usersImges: [ + { + img: User06, + imgId: "249" + }, + { + img: User08, + imgId: "212" + }, + { + img: User09, + imgId: "217" + }, + { + img: User05, + imgId: "276" + }, + ], + items: [ + { + dataSeason: '7234ABC342342352345', + id: '434', + text: 'Second name', + checked: true + }, + { + dataSeason: '7234ABC342342352345', + id: '476', + text: 'First name by', + checked: true + }, + { + dataSeason: '7234ABC342342352345', + id: '422', + text: 'Document name by', + checked: true + }, + ] + }, + { + id: '30', + name: 'Last Week', + data: '7234ABC342342352345', + usersImges: [ + { + img: User06, + imgId: "145" + }, + { + img: User08, + imgId: "182" + }, + { + img: User09, + imgId: "154" + }, + { + img: User05, + imgId: "114" + }, + ], + items: [ + { + dataSeason: '7234ABC342342352345', + id: '654', + text: 'Gender name by', + checked: true + }, + { + dataSeason: '7234ABC342342352345', + id: '617', + text: 'Second name Updated', + checked: false + }, + { + dataSeason: '7234ABC342342352345', + id: '643', + text: 'Gender name by', + checked: true + }, + ] + }, + ] + return ( -
- {/* Sidebar */} - - {/* Content area */} -
- {/* Site header */} -
-
-
- {/* Page header */} -
- {/* Title */} -

Validation log ✨

+
+ {/* Sidebar */} + + {/* Content area */} +
+ {/* Site header */} +
+
+
+ {/* Page header */} +
+ {/* Title */} +

Digiatl ID transaction log ✨

+
+ {/*Psosts*/} +
+
+ {/* PostsID */} + {logItems.map(item => { + return + })} + {/* Post */} +
+
+
+

Even earlier

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

    Product V1 - Early Access

    +
    +
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    +
    • + {/* List item */} +
  • +
    + +

    Web3 Compatibility

    +
    +
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    +
    • +
+
+
+
+
+
-
-
+ +
- ) } diff --git a/src/pages/digitalId/Verify.jsx b/src/pages/digitalId/Verify.jsx index aacb5d2..48a21ca 100644 --- a/src/pages/digitalId/Verify.jsx +++ b/src/pages/digitalId/Verify.jsx @@ -167,4 +167,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..f3f9f78 --- /dev/null +++ b/src/partials/validate/ValidateItem.jsx @@ -0,0 +1,62 @@ +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'; + } + }; + + function openValidatePanel (event) { + event.stopPropagation() + props.setValidatePanelOpen(true) + } + + return ( + openValidatePanel(e)}> + +
+ +
+ + +
+
{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
+
+ +