Add page Validate and update ValidationLog

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 (
+      <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;

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 (
+      <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;

src/partials/validate/ValidateTable.jsx

@@ -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;