From 64e3705669e7c12b8013704654f17cf8eaf659d4 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Thu, 25 May 2023 18:08:20 -0300
Subject: cases, account details and new-form screen

---
 packages/exchange-backoffice-ui/src/Dashboard.tsx | 344 ++++++++++++----------
 1 file changed, 190 insertions(+), 154 deletions(-)

(limited to 'packages/exchange-backoffice-ui/src/Dashboard.tsx')

diff --git a/packages/exchange-backoffice-ui/src/Dashboard.tsx b/packages/exchange-backoffice-ui/src/Dashboard.tsx
index 9be86c533..9f4a43513 100644
--- a/packages/exchange-backoffice-ui/src/Dashboard.tsx
+++ b/packages/exchange-backoffice-ui/src/Dashboard.tsx
@@ -23,39 +23,14 @@ import {
   useMemoryStorage,
   useNotifications,
 } from "@gnu-taler/web-util/browser";
-
-/**
- * references between forms
- *
- * 902.1e
- *  --> 902.11 (operational legal entity or partnership)
- *  --> 902.12 (a foundation)
- *  --> 902.13 (a trust)
- *  --> 902.15 (life insurance policy)
- *  --> 902.9 (all other cases)
- *  --> 902.5 (cash transaction with no customer profile)
- *  --> 902.4 (risk profile)
- *
- * 902.11
- *  --> 902.9 (beneficial owner in fiduciary holding assets)
- *
- * 902.12
- *
- * 902.13
- *
- * 902.15
- *
- * 902.9
- *
- * 902.5
- *
- * 902.4
- */
-
-const userNavigation = [
-  { name: "Your profile", href: "#" },
-  { name: "Sign out", href: "#" },
-];
+import {
+  AbsoluteTime,
+  Codec,
+  buildCodecForObject,
+  codecForAbsoluteTime,
+  codecForString,
+} from "@gnu-taler/taler-util";
+import logo from "./assets/logo-2021.svg";
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
@@ -153,7 +128,7 @@ function LeftMenu() {
                   )}
                   aria-hidden="true"
                 />
-                Info
+                Cases
               </a>
             </li>
             <li>
@@ -175,7 +150,7 @@ function LeftMenu() {
                   )}
                   aria-hidden="true"
                 />
-                Officer
+                Account
               </a>
             </li>
           </ul>
@@ -203,7 +178,7 @@ function LeftMenu() {
             </li>
           </ul>
         </li> */}
-        <li class="mt-auto">
+        {/* <li class="mt-auto">
           <a
             href={Pages.settings.url}
             class={classNames(
@@ -224,7 +199,7 @@ function LeftMenu() {
             />
             Settings
           </a>
-        </li>
+        </li> */}
       </ul>
     </nav>
   );
@@ -237,26 +212,18 @@ export function Dashboard({
 }): VNode {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
-  const logRef = useRef<HTMLPreElement>(null);
-  function showFormOnSidebar(v: any) {
-    if (!logRef.current) return;
-    logRef.current.innerHTML = JSON.stringify(v, undefined, 1);
-  }
   return (
     <Fragment>
       <NavigationBar isOpen={sidebarOpen} setOpen={setSidebarOpen}>
         <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
           <div class="flex h-16 shrink-0 items-center">
-            <img
-              class="h-8 w-auto"
-              src="https://tailwindui.com/img/logos/mark.svg?color=white"
-              alt="Taler"
-            />
+            <header class="flex items-center justify-between border-b border-white/5 ">
+              <h1 class="text-base font-semibold leading-7 text-white">
+                Exchange AML Backoffice
+              </h1>
+            </header>
           </div>
           <LeftMenu />
-          <div class="text-white text-sm">
-            <pre ref={logRef}></pre>
-          </div>
           <Footer />
         </div>
       </NavigationBar>
@@ -362,123 +329,193 @@ function NavigationBar({
   );
 }
 
+export interface Officer {
+  salt: string;
+  when: AbsoluteTime;
+  key: string;
+}
+
+export const codecForOfficer = (): Codec<Officer> =>
+  buildCodecForObject<Officer>()
+    .property("salt", codecForString()) // FIXME
+    .property("when", codecForAbsoluteTime) // FIXME
+    .property("key", codecForString())
+    .build("Officer");
+
 function TopBar({ onOpenSidebar }: { onOpenSidebar: () => void }) {
   const password = useMemoryStorage("password");
-  const officer = useLocalStorage("officer");
+  const officer = useLocalStorage("officer", {
+    codec: codecForOfficer(),
+  });
 
   return (
-    <div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
-      <button
-        type="button"
-        class="-m-2.5 p-2.5 text-gray-700 lg:hidden"
-        onClick={onOpenSidebar}
-      >
-        <span class="sr-only">Open sidebar</span>
-        <Bars3Icon class="h-6 w-6" aria-hidden="true" />
-      </button>
-
-      {/* Separator */}
-      <div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true" />
-
-      <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
-        <div class="relative flex flex-1" />
-        {/* <form class="relative flex flex-1" action="#" method="GET">
-          <label htmlFor="search-field" class="sr-only">
-            Search
-          </label>
-          <MagnifyingGlassIcon
-            class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
+    <div class="relative flex h-16 justify-between">
+      <div class="relative z-10 flex p-2 lg:hidden">
+        <button
+          type="button"
+          onClick={() => {
+            onOpenSidebar();
+          }}
+          class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-900"
+          aria-controls="mobile-menu"
+          aria-expanded="false"
+        >
+          <span class="sr-only">Open menu</span>
+          <svg
+            class="block h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
             aria-hidden="true"
-          />
-          <input
-            id="search-field"
-            class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
-            placeholder="Search..."
-            type="search"
-            name="search"
-          />
-        </form> */}
-        <div class="flex items-center gap-x-4 lg:gap-x-6">
-          {/* <button
-            type="button"
-            class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500"
           >
-            <span class="sr-only">View notifications</span>
-            <BellIcon class="h-6 w-6" aria-hidden="true" />
-          </button> */}
-
-          {/* Separator */}
-          <div
-            class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10"
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+            />
+          </svg>
+          <svg
+            class="hidden h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
             aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+      <div class="relative z-0 flex flex-1 items-center justify-center px-2 sm:absolute sm:inset-0">
+        <div class="w-full sm:max-w-xs flex flex-1 items-center justify-center">
+          <img
+            class="h-8 w-auto"
+            src={logo}
+            alt="Taler"
+            style={{ height: 35, margin: 10 }}
           />
-
-          {officer.value === undefined ? (
-            <div />
-          ) : (
-            <Menu
-              as="div"
-              /* @ts-ignore */
-              class="relative"
-            >
-              <Menu.Button class="-m-1.5 flex items-center p-1.5">
-                <span class="sr-only">Open user menu</span>
-                <img
-                  class="h-8 w-8 rounded-full bg-gray-50"
-                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                  alt=""
-                />
-                <span class="hidden lg:flex lg:items-center">
-                  <span
-                    class="ml-4 text-sm font-semibold leading-6 text-gray-900"
-                    aria-hidden="true"
-                  >
-                    {/* Tom Cook */}
-                    {officer.value?.substring(0, 6)}
-                  </span>
-                  <ChevronDownIcon
-                    class="ml-2 h-5 w-5 text-gray-400"
-                    aria-hidden="true"
-                  />
-                </span>
-              </Menu.Button>
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-100"
-                enterFrom="transform opacity-0 scale-95"
-                enterTo="transform opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="transform opacity-100 scale-100"
-                leaveTo="transform opacity-0 scale-95"
-              >
-                <Menu.Items class="absolute right-0 z-10 mt-2.5 w-48 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
-                  <Menu.Item>
-                    {({ active }: { active: boolean }) => (
-                      <a
-                        // href={item.href}
-                        onClick={() => {
-                          officer.reset();
-                          password.reset();
-                        }}
-                        class={classNames(
-                          active ? "bg-gray-50" : "",
-                          "block px-3 py-1 text-sm leading-6 text-gray-900",
-                        )}
-                      >
-                        Forget account
-                      </a>
-                    )}
-                  </Menu.Item>
-                </Menu.Items>
-              </Transition>
-            </Menu>
-          )}
         </div>
       </div>
+      {/* <div class="relative z-10 flex items-center lg:hidden">dd</div> */}
     </div>
   );
 }
 
+//   return (
+//     <div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
+//       <button
+//         type="button"
+//         class="-m-2.5 p-2.5 text-gray-700 lg:hidden"
+//         onClick={onOpenSidebar}
+//       >
+//         <span class="sr-only">Open sidebar</span>
+//         <Bars3Icon class="h-6 w-6" aria-hidden="true" />
+//       </button>
+
+//       {/* Separator */}
+//       <div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true" />
+
+//       <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+//         <div class="relative flex flex-1" />
+//         {/* <form class="relative flex flex-1" action="#" method="GET">
+//           <label htmlFor="search-field" class="sr-only">
+//             Search
+//           </label>
+//           <MagnifyingGlassIcon
+//             class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
+//             aria-hidden="true"
+//           />
+//           <input
+//             id="search-field"
+//             class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
+//             placeholder="Search..."
+//             type="search"
+//             name="search"
+//           />
+//         </form> */}
+//         <div class="flex items-center gap-x-4 lg:gap-x-6">
+//           {/* <button
+//             type="button"
+//             class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500"
+//           >
+//             <span class="sr-only">View notifications</span>
+//             <BellIcon class="h-6 w-6" aria-hidden="true" />
+//           </button> */}
+
+//           {/* Separator */}
+//           <div
+//             class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10"
+//             aria-hidden="true"
+//           />
+
+//           {/* {officerName === undefined ? (
+//             <div />
+//           ) : (
+//             <Menu
+//               as="div"
+//               class="relative"
+//             >
+//               <Menu.Button class="-m-1.5 flex items-center p-1.5">
+//                 <span class="sr-only">Open user menu</span>
+//                 <img
+//                   class="h-8 w-8 rounded-full bg-gray-50"
+//                   src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+//                   alt=""
+//                 />
+//                 <span class="hidden lg:flex lg:items-center">
+//                   <span
+//                     class="ml-4 text-sm font-semibold leading-6 text-gray-900"
+//                     aria-hidden="true"
+//                   >
+//                     {officerName}
+//                   </span>
+//                   <ChevronDownIcon
+//                     class="ml-2 h-5 w-5 text-gray-400"
+//                     aria-hidden="true"
+//                   />
+//                 </span>
+//               </Menu.Button>
+//               <Transition
+//                 as={Fragment}
+//                 enter="transition ease-out duration-100"
+//                 enterFrom="transform opacity-0 scale-95"
+//                 enterTo="transform opacity-100 scale-100"
+//                 leave="transition ease-in duration-75"
+//                 leaveFrom="transform opacity-100 scale-100"
+//                 leaveTo="transform opacity-0 scale-95"
+//               >
+//                 <Menu.Items class="absolute right-0 z-10 mt-2.5 w-48 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
+//                   <Menu.Item>
+//                     {({ active }: { active: boolean }) => (
+//                       <a
+//                         onClick={() => {
+//                           officer.reset();
+//                           password.reset();
+//                         }}
+//                         class={classNames(
+//                           active ? "bg-gray-50" : "",
+//                           "block px-3 py-1 text-sm leading-6 text-gray-900",
+//                         )}
+//                       >
+//                         Forget account
+//                       </a>
+//                     )}
+//                   </Menu.Item>
+//                 </Menu.Items>
+//               </Transition>
+//             </Menu>
+//           )} */}
+//         </div>
+//       </div>
+//     </div>
+//   );
+// }
+
 function Footer() {
   return (
     <footer class="absolute bottom-4">
@@ -502,7 +539,6 @@ function Notifications() {
   {
     /* <!-- Global notification live region, render this permanently at the end of the document --> */
   }
-  console.log("render", ns.length);
   return (
     <div
       aria-live="assertive"
-- 
cgit v1.2.3

