admin/BlockchainUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add page Validate and update ValidationLog

Browse Source
This commit is contained in:
DwCay
2022-05-26 20:04:24 +03:00
parent 13839cf67c
commit df6419bfff
11 changed files with 606 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/pages/digitalId/Validate.jsx
View File

@@ -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 (
<div className="flex h-screen overflow-hidden">
@@ -18,13 +74,47 @@ function Validate () {
<main>
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
<div className="w-fit">
{/* Page header */}
<div className="mb-8">
<div className="pb-2.5">
{/* Title */}
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Validate ✨</h1>
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">0x28394710234192304719234</h1>
</div>
<Link className="font-normal text-sm text-indigo-500 hover:text-indigo-600" to="/digitalId/validate">Explore -&gt;</Link>
<div className="mb-5 mt-5">
<ul className="flex flex-wrap -m-1">
<li className="m-1">
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
View All
</button>
</li>
<li className="m-1">
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
Completed
</button>
</li>
<li className="m-1">
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
Pending
</button>
</li>
<li className="m-1">
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
Canceled
</button>
</li>
</ul>
</div>
<ValidateTable setValidatePanelOpen={setValidatePanelOpen}/>
<div className="pb-8 border-b border-zinc-200 mt-12">
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID validation log ✨</h1>
</div>
{validateItems.map(item => {
return <ValidateRoadMap trunsSeason={item} key={item.id}/>
})}
</div>
</div>
<ValidatePanel validatePanelOpen={validatePanelOpen} setValidatePanelOpen={setValidatePanelOpen}/>
</main>
</div>

301
src/pages/digitalId/ValidationLog.jsx
View File

@@ -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 (
<div className="flex h-screen overflow-hidden">
@@ -41,206 +124,10 @@ function ValidationLog () {
{/*Psosts*/}
<div className="max-w-3xl m-auto mt-8">
<div className="xl:-translate-x-16 max-w-fit">
{/* Post */}
<article className="pt-6">
<div className="xl:flex">
<div className="w-32 shrink-0">
<h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">Today</h2>
</div>
<div className="grow pb-6 border-b border-slate-200">
<header>
<div className="flex flex-nowrap items-center space-x-2 mb-6">
{/* Avatars */}
<div className="flex shrink-0 -space-x-3 -ml-px">
<a className="block" href="#0">
<img className="rounded-full border-2 border-white box-content" src={User05} width="28" height="28" alt="User 05" />
</a>
<a className="block" href="#0">
<img className="rounded-full border-2 border-white box-content" src={User08} width="28" height="28" alt="User 08" />
</a>
<a className="block" href="#0">
<img className="rounded-full border-2 border-white box-content" src={User09} width="28" height="28" alt="User 09" />
</a>
<a className="block" href="#0">
<img className="rounded-full border-2 border-white box-content" src={User06} width="28" height="28" alt="User 06" />
</a>
</div>
<div className="text-slate-400">·</div>
</div>
</header>
{/* List */}
<ul className="-my-2">
{/* List item */}
<li className="relative py-2">
<div className="flex items-center mb-2.5">
<div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
<div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
<svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
<path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
</svg>
</div>
<h3 className="text-lg font-bold text-slate-800 pl-9">
Second name by <Link className="font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" to="/digitalId/validation-log">{`0x${transId}`}</Link>
</h3>
</div>
<div className="block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{`0x${transId}`}</div>
<span className="font-normal text-[10px]">Transactions ID</span>
</div>
<div className="mb-3.5 block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{transId}</div>
<span className="font-normal text-[10px]">Validated data</span>
</div>
<Link className="pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600" to="/digitalId/validation-log">Explore -&gt;</Link>
</li>
{/* List item */}
<li className="relative py-2">
<div className="flex items-center mb-1">
<div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
<div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
<svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
<path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
</svg>
</div>
<h3 className="text-lg font-bold text-slate-800 pl-9">
First name by <Link className="font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" to="/digitalId/validation-log">{`0x${transId}`}</Link>
</h3>
</div>
<div className="block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{`0x${transId}`}</div>
<span className="font-normal text-[10px]">Transactions ID</span>
</div>
<div className="mb-3.5 block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{transId}</div>
<span className="font-normal text-[10px]">Validated data</span>
</div>
<Link className="pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600" to="/digitalId/validation-log">Explore -&gt;</Link>
</li>
{/* List item */}
<li className="relative py-2">
<div className="flex items-center mb-1">
<div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
<svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
<path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
</svg>
</div>
<h3 className="text-lg font-bold text-slate-800 pl-9">
Document name by <Link className="font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" to="/digitalId/validation-log">{`0x${transId}`}</Link>
</h3>
</div>
<div className="block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{`0x${transId}`}</div>
<span className="font-normal text-[10px]">Transactions ID</span>
</div>
<div className="mb-3.5 block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{transId}</div>
<span className="font-normal text-[10px]">Validated data</span>
</div>
<Link className="pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600" to="/digitalId/validation-log">Explore -&gt;</Link>
</li>
</ul>
</div>
</div>
</article>
{/* Post */}
<article className="pt-6">
<div className="xl:flex">
<div className="w-32 shrink-0">
<h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">Last week</h2>
</div>
<div className="grow pb-6 border-b border-slate-200">
<header>
<div className="flex flex-nowrap items-center space-x-2 mb-6">
{/* Avatars */}
<div className="flex shrink-0 -space-x-3 -ml-px">
<a className="block" href="#0">
<img className="rounded-full border-2 border-white box-content" src={User05} width="28" height="28" alt="User 05" />
</a>
<a className="block" href="#0">
<img className="rounded-full border-2 border-white box-content" src={User08} width="28" height="28" alt="User 08" />
</a>
<a className="block" href="#0">
<img className="rounded-full border-2 border-white box-content" src={User09} width="28" height="28" alt="User 09" />
</a>
<a className="block" href="#0">
<img className="rounded-full border-2 border-white box-content" src={User06} width="28" height="28" alt="User 06" />
</a>
</div>
<div className="text-slate-400">·</div>
</div>
</header>
{/* List */}
<ul className="-my-2">
{/* List item */}
<li className="relative py-2">
<div className="flex items-center mb-1">
<div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
<div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
<svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
<path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
</svg>
</div>
<h3 className="text-lg font-bold text-slate-800 pl-9">
Gender name by <Link className="font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" to="/digitalId/validation-log">{`0x${transId}`}</Link>
</h3>
</div>
<div className="block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{`0x${transId}`}</div>
<span className="font-normal text-[10px]">Transactions ID</span>
</div>
<div className="mb-3.5 block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{transId}</div>
<span className="font-normal text-[10px]">Validated data</span>
</div>
<Link className="pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600" to="/digitalId/validation-log">Explore -&gt;</Link>
</li>
{/* List item */}
<li className="relative py-2">
<div className="flex items-center mb-1">
<div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
<div className="absolute left-0 rounded-full bg-[#ff0000] w-5 h-5" aria-hidden="true" />
<h3 className="text-lg font-bold text-slate-800 pl-9">
Second name Updated
</h3>
</div>
<div className="block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{`0x${transId}`}</div>
<span className="font-normal text-[10px]">Transactions ID</span>
</div>
<div className="mb-3.5 block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{transId}</div>
<span className="font-normal text-[10px]">Validated data</span>
</div>
<Link className="pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600" to="/digitalId/validation-log">Explore -&gt;</Link>
</li>
{/* List item */}
<li className="relative py-2">
<div className="flex items-center mb-1">
<div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
<svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
<path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
</svg>
</div>
<h3 className="text-lg font-bold text-slate-800 pl-9">
Gender name by <Link className="font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" to="/digitalId/validation-log">{`0x${transId}`}</Link>
</h3>
</div>
<div className="block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{`0x${transId}`}</div>
<span className="font-normal text-[10px]">Transactions ID</span>
</div>
<div className="mb-3.5 block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{transId}</div>
<span className="font-normal text-[10px]">Validated data</span>
</div>
<Link className="pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600" to="/digitalId/validation-log">Explore -&gt;</Link>
</li>
</ul>
</div>
</div>
</article>
{/* PostsID */}
{logItems.map(item => {
return <ValidateRoadMap trunsSeason={item} key={item.id} />
})}
{/* Post */}
<article className="pt-6">
<div className="xl:flex">

57
src/partials/validate/ValidateItem.jsx Normal file
View File

@@ -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 (
<tr className="hover:bg-[#E2E8F0] cursor-pointer" onClick={(e) => { e.stopPropagation(); props.setValidatePanelOpen(true); }}>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
<div className="flex items-center">
<label className="inline-flex">
<span className="sr-only">Select</span>
{props.check && <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} onClick={(e) => e.stopPropagation()} />}
</label>
</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap md:w-1/2">
<div className="flex items-center">
<div>{props.filed}</div>
</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="text-left font-medium text-slate-800">{props.data}</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
<div className={`text-left`}>{props.seed}</div>
</td>
<td className="px-2 first:pl-5 py-3 whitespace-nowrap">
<div className="text-left">
<div className={`text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1 ${statusColor(props.status)}`}>{props.status}</div>
</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 pt-3 pb-2 whitespace-nowrap w-px">
{/* Menu button */}
<button className="text-slate-400 hover:text-slate-500 rounded-full">
<span className="sr-only">Menu</span>
<svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="2" />
<circle cx="10" cy="16" r="2" />
<circle cx="22" cy="16" r="2" />
</svg>
</button>
</td>
</tr>
);
}
export default ValidateTableItem;

136
src/partials/validate/ValidatePanel.jsx Normal file
View File

@@ -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 (
<div
ref={panelContent}
className={`absolute inset-0 sm:left-auto z-20 transition-transform duration-200 ease-in-out ${
validatePanelOpen ? 'translate-x-' : 'translate-x-full'
}`}>
<div className="sticky top-16 bg-gradient-to-b from-[#E2E8F0] via-slate-100 to-white overflow-x-hidden overflow-y-auto no-scrollbar shrink-0 border-l border-slate-200 w-full sm:w-[390px] h-[calc(100vh-64px)]">
<button
ref={closeBtn}
onClick={() => setValidatePanelOpen(false)}
className="absolute top-0 right-0 mt-6 mr-6 group p-2"
>
<svg className="w-4 h-4 fill-slate-400 group-hover:fill-slate-600 pointer-events-none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="m7.95 6.536 4.242-4.243a1 1 0 1 1 1.415 1.414L9.364 7.95l4.243 4.242a1 1 0 1 1-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 0 1-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 0 1 1.414-1.414L7.95 6.536Z" />
</svg>
</button>
<div className="py-8 px-4 lg:px-8">
<div className="max-w-sm mx-auto lg:max-w-none">
<div className="text-slate-800 font-semibold text-center mb-1">Bank Transfer</div>
<div className="text-sm text-center italic">22/01/2022, 8:56 PM</div>
{/* Details */}
<div className="drop-shadow-lg mt-12">
{/* Top */}
<div className="bg-white rounded-t-xl px-5 pb-2.5 text-center">
<div className="mb-3 text-center">
<img className="inline-flex w-12 h-12 rounded-full -mt-6" src={Image} width="48" height="48" alt="Transaction 04" />
</div>
<div className="mt-5 text-2xl font-semibold text-emerald-500 mb-1">0.012 IDN</div>
<div className="text-sm font-medium text-slate-800 mb-3">Total amount fee</div>
</div>
{/* Divider */}
<div className="flex justify-between items-center" aria-hidden="true">
<svg className="w-5 h-5 fill-white" xmlns="http://www.w3.org/2000/svg">
<path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
</svg>
<div className="grow w-full h-5 bg-white flex flex-col justify-center">
<div className="h-px w-full border-t border-dashed border-slate-200" />
</div>
<svg className="w-5 h-5 fill-white rotate-180" xmlns="http://www.w3.org/2000/svg">
<path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
</svg>
</div>
{/* Bottom */}
<div className="bg-white rounded-b-xl p-5 pt-8 pb-10 text-sm space-y-3">
<div className="flex justify-between space-x-1">
<span className="italic">Validator:</span>
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
</div>
<div className="flex justify-between space-x-1">
<span className="italic">Recipient:</span>
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
</div>
<div className="flex justify-between space-x-1">
<span className="italic">Transacion::</span>
<span className="font-medium text-slate-700 text-right">145 bytes</span>
</div>
</div>
</div>
{/* Receipts */}
<div className="mt-6">
<div className="text-sm font-semibold text-slate-800 mb-2">Receipts</div>
<form className="rounded bg-slate-100 border border-dashed border-slate-300 text-center px-5 py-8">
<svg className="inline-flex w-4 h-4 fill-slate-400 mb-3" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
</svg>
<label htmlFor="upload" className="block text-sm text-slate-500 italic">Upload exported JSON data</label>
<input className="sr-only" id="upload" type="file" />
</form>
</div>
{/* Notes */}
<div className="mt-6">
<div className="text-sm font-semibold text-slate-800 mb-2">Notes</div>
<form>
<label className="sr-only" htmlFor="notes">Write a note</label>
<textarea id="notes" className="form-textarea w-full focus:border-slate-300" rows="4" placeholder="Write a note…" defaultValue={""} />
</form>
</div>
{/* Download / Report */}
<div className="flex items-center space-x-3 mt-6">
<div className="w-1/2">
<button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600">
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 rotate-180" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
</svg>
<span className="ml-2">Validate</span>
</button>
</div>
<div className="w-1/2">
<button className="btn w-full border-slate-200 hover:border-slate-300 text-rose-500">
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
<path d="M7.001 3h2v4h-2V3Zm1 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM15 16a1 1 0 0 1-.6-.2L10.667 13H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1ZM2 11h9a1 1 0 0 1 .6.2L14 13V2H2v9Z" />
</svg>
<span className="ml-2">Invalidate</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default TransactionPanel;

135
src/partials/validate/ValidateTable.jsx Normal file
View File

@@ -0,0 +1,135 @@
import React, {useEffect, useState} from "react";
import ValidateTableItem from "./ValidateItem";
function ValidateTable({
setValidatePanelOpen
}) {
const validateData = [
{
id: '10',
check: true,
filed: 'Second name',
data: 'Pavel',
status: 'Correct',
seed: '1234 ... 1234',
},
{
id: '11',
check: true,
filed: 'First name',
data: 'Thownetc',
status: 'Correct',
seed: '4567 ... 0987',
},
{
id: '12',
check: false,
filed: 'Gender',
data: 'Female',
status: 'Incorrect',
seed: '4567 ... 0987',
},
{
id: '13',
check: false,
filed: 'Document',
data: 'Passport',
status: 'Missed',
seed: '4567 ... 0987',
},
{
id: '14',
check: true,
filed: 'Document ID',
data: '1233425345',
status: 'Correct',
seed: '1234 ... 1234',
},
];
const [selectAll, setSelectAll] = useState(false);
const [isCheck, setIsCheck] = useState([]);
const [list, setList] = useState([]);
useEffect(() => {
setList(validateData);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleSelectAll = () => {
setSelectAll(!selectAll);
setIsCheck(list.map(li => li.id));
if (selectAll) {
setIsCheck([]);
}
};
const handleClick = e => {
const { id, checked } = e.target;
setSelectAll(false);
setIsCheck([...isCheck, id]);
if (!checked) {
setIsCheck(isCheck.filter(item => item !== id));
}
};
return (
<div className="w-fit">
<div>
{/* Table */}
<div className="overflow-x-auto">
<table className="table-auto w-fit">
{/* Table header */}
<thead className="bg-white text-xs font-semibold uppercase text-slate-500 border-t border-b-2 border-slate-200">
<tr>
<th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
<div className="flex items-center">
<label className="inline-flex">
<span className="sr-only">Select all</span>
<input className="form-checkbox" type="checkbox" checked={selectAll} onChange={handleSelectAll} />
</label>
</div>
</th>
<th className="px-2 first:pl-5 pr-[136px] py-3 whitespace-nowrap">
<div className="font-semibold text-left">FIELD</div>
</th>
<th className="px-2 first:pl-5 pr-[154px] py-3 whitespace-nowrap">
<div className="font-semibold text-left">DATA</div>
</th>
<th className="min-w-[191px] px-2 first:pl-5 pr-[168px] py-3 whitespace-nowrap">
<div className="pl-7 font-semibold text-left">SEED</div>
</th>
<th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="pl-2 font-semibold text-left">STATUS</div>
</th>
<th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap" />
</tr>
</thead>
{/* Table body */}
<tbody className="text-sm divide-y divide-slate-200 border-b border-slate-200">
{list.map((data) => {
return (
<ValidateTableItem
key={data.id}
id={data.id}
filed={data.filed}
data={data.data}
status={data.status}
seed={data.seed}
check={data.check}
handleClick={handleClick}
isChecked={isCheck.includes(data.id)}
setValidatePanelOpen={setValidatePanelOpen}
/>
);
})}
</tbody>
</table>
</div>
</div>
</div>
);
}
export default ValidateTable;

39
src/partials/validationlog/ValidateRoadMap.jsx Normal file
View File

@@ -0,0 +1,39 @@
import React from "react";
import ValidationSeasonItem from "./ValidationSeasonItem";
import ValidationUsersImg from "./ValidationUsersImg";
function ValidateRoadMap({ trunsSeason }) {
return (
<article className="pt-6">
<div className="xl:flex">
<div className="w-32 shrink-0">
<h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{trunsSeason.name}</h2>
</div>
<div className="grow pb-6 border-b border-slate-200">
<header>
<div className="flex flex-nowrap items-center space-x-2 mb-6">
{/* Avatars */}
<div className="flex shrink-0 -space-x-3 -ml-px">
{trunsSeason.usersImges.map(pic => {
return <ValidationUsersImg key={pic.imgId} image={pic}/>
})}
</div>
<div className="text-slate-400">·</div>
</div>
</header>
{/* List */}
<ul className="-my-2">
{/* List item(s) */}
{trunsSeason.items.map((item, index) => {
return <ValidationSeasonItem key={item.id} length={trunsSeason.items.length} item={item} index={index}/>
})}
</ul>
</div>
</div>
</article>
)
}
export default ValidateRoadMap;

30
src/partials/validationlog/ValidationSeasonItem.jsx Normal file
View File

@@ -0,0 +1,30 @@
import React from "react";
function ValidationSeasonItem({ length, item, index }) {
return (
<li className="relative py-2">
<div className="flex items-center mb-1">
{length-1!==index && <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>}
<div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
<svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
<path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
</svg>
</div>
<h3 className="text-lg font-bold text-slate-800 pl-9">
{item.trunsText} {item.checked && <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{`0x${item.seasonId}`}</a>}
</h3>
</div>
<div className="block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{`0x${item.seasonId}`}</div>
<span className="font-normal text-[10px]">Transactions ID</span>
</div>
<div className="mb-3.5 block text-slate-800 w-fit pl-9">
<div className="text-base font-semibold underline mb-[-10px]">{item.seasonId}</div>
<span className="font-normal text-[10px]">Validated data</span>
</div>
<a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>
</li>
);
}
export default ValidationSeasonItem

11
src/partials/validationlog/ValidationUsersImg.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from "react";
function ValidationUsersImg({ image }) {
return (
<a className="block" href="#0">
<img className="rounded-full border-2 border-white box-content" src={image.img} width="28" alt={image.img} height="28"/>
</a>
);
}
export default ValidationUsersImg

8
src/utils/TransactionID.js
View File

@@ -1,6 +1,10 @@
export var TransactionID = (function(){
export var TransactionID = (function(ID){
return function () {
if(ID) {
localStorage.setItem('transID', ID)
} else {
localStorage.setItem('transID', '7234ABC342342352345')
}
return localStorage.getItem('transID')
}
})
})()