added search in payouts

src/lib/ui-components/navbar.svelte

@@ -5,7 +5,7 @@
   import { AuthStorage } from "$lib/tools/storages/auth-storage";
   import { redirect } from "$lib/tools/url/URLTools";
   import { jwtDecode } from "jwt-decode";
-  import { ChevronRightIcon } from "svelte-feather-icons";
+  import { ChevronRightIcon, LogOutIcon, XIcon } from "svelte-feather-icons";
 
   let showMenu = false;
 </script>
@@ -18,8 +18,9 @@
           showMenu = !showMenu;
         }}
         tabindex="0"
-        class="btn btn-ghost lg:hidden"
+        class="btn btn-ghost lg:hidden w-[54px] max-w-[54px] p-1"
       >
+        {#if !showMenu}
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-5 w-5"
@@ -34,6 +35,9 @@
               d="M4 6h16M4 12h8m-8 6h16"
             />
           </svg>
+        {:else}
+          <XIcon />
+        {/if}
       </button>
     </div>
     <a href="/admin/" class="btn btn-ghost text-xl">HostaPay</a>
@@ -70,8 +74,11 @@
         });
         redirect("/admin/login");
       }}
-      class="btn btn-error btn-outline">Выход</button
+      class="btn btn-error btn-outline rounded-[10px]"
     >
+      Выход
+      <LogOutIcon size={"18"} />
+    </button>
   </div>
 </div>
 

src/routes/payouts/+page.svelte

@@ -12,7 +12,7 @@
   import { redirect } from "$lib/tools/url/URLTools";
   import axios from "axios";
   import { isStringEmptyOrSpaces } from "$lib/tools/strings/Strings";
-  import { SearchIcon } from "svelte-feather-icons";
+  import { CopyIcon, SearchIcon, XCircleIcon } from "svelte-feather-icons";
 
   const payoutsStatusMap = {
     "0": "Открыта",
@@ -37,9 +37,13 @@
   let currentPagePayouts = 1;
   let disablePagesPayouts = false;
   let currentPayoutsFilter = -1;
+  let searchFilter = "";
+  let searchNoResults = false;
 
   async function getPayouts() {
     disablePagesPayouts = true;
+
+    if (searchFilter === "") {
       const result = await makePost(
         "admin/payouts",
         {
@@ -68,6 +72,69 @@
       console.log(payouts);
       numOfPagesPayouts = result.data.pages === 0 ? 1 : result.data?.pages;
       disablePagesPayouts = false;
+    } else {
+      currentPagePayouts = 1;
+      let s = searchFilter.trim();
+      let useUUID = s.includes("-") && s.length === 36;
+      if (useUUID) {
+        const result = await makePost(
+          "admin/payout/search",
+          {
+            page: currentPagePayouts,
+            uuid: s,
+          },
+          // @ts-ignore
+          makeAuthHeaderForAxios(getAuthInfo()?.a)
+        );
+        console.log(result);
+        if (result.error) {
+          payouts = [];
+          numOfPagesPayouts = 1;
+          disablePagesPayouts = false;
+          sayError("Ошибка поиска");
+          return;
+        }
+        if (typeof result.data !== "string") {
+          payouts = result.data.data;
+          numOfPagesPayouts = result.data.pages === 0 ? 1 : result.data?.pages;
+          disablePagesPayouts = false;
+        } else {
+          payouts = [];
+          numOfPagesPayouts = 1;
+          disablePagesPayouts = false;
+        }
+      } else if ((s.length === 16 || s.length === 22) && /^\d+$/.test(s)) {
+        const result = await makePost(
+          "admin/payout/search",
+          {
+            page: currentPagePayouts,
+            requisite: s,
+          },
+          // @ts-ignore
+          makeAuthHeaderForAxios(getAuthInfo()?.a)
+        );
+        console.log(result);
+        if (result.error) {
+          payouts = [];
+          numOfPagesPayouts = 1;
+          disablePagesPayouts = false;
+          sayError("Ошибка поиска");
+          return;
+        }
+        if (typeof result.data !== "string") {
+          payouts = result.data.data;
+          numOfPagesPayouts = result.data.pages === 0 ? 1 : result.data?.pages;
+          disablePagesPayouts = false;
+        } else {
+          payouts = [];
+          numOfPagesPayouts = 1;
+          disablePagesPayouts = false;
+        }
+      } else {
+        sayError("Проверьте данные для поиска");
+        disablePagesPayouts = false;
+      }
+    }
   }
   getPayouts();
 
@@ -412,23 +479,45 @@
     <h1 class="text-2xl font-semibold">Выплаты</h1>
   </div>
   <div class="w-full flex flex-col bg-base-300 p-4 rounded-box">
-    <div class="flex flex-col p-4 gap-2.5">
+    <div class="flex flex-col p-0 gap-2.5">
       <div class="flex gap-2.5">
         <input
+          bind:value={searchFilter}
           type="text"
-          class="input max-w-full w-full"
+          class="input input-bordered max-w-full w-full rounded-[10px]"
           placeholder="UUID или Реквизит"
         />
-        <button class="btn btn-neutral">
+        <div class="flex gap-[5px]">
+          <button
+            on:click={() => {
+              getPayouts();
+            }}
+            class="btn btn-neutral rounded-[10px]"
+          >
             <SearchIcon />
           </button>
+          <button
+            on:click={() => {
+              searchFilter = "";
+              currentPagePayouts = 1;
+              numOfPagesPayouts = 1;
+              getPayouts();
+            }}
+            class="btn btn-neutral rounded-[10px]"
+          >
+            <XCircleIcon />
+          </button>
+        </div>
       </div>
       <select
         on:change={(e) => {
           currentPayoutsFilter = Number(e.target.value);
+          if (searchFilter === "") {
             getPayouts();
+          }
         }}
         class="select select-bordered w-full text-base"
+        disabled={searchFilter !== ""}
       >
         <option selected value="-1">Показать все выплаты</option>
         <option value="2">Оплаченные</option>
@@ -438,7 +527,7 @@
         <!-- <option value="4">Требует проверки</option> -->
       </select>
     </div>
-    <div class="w-full flex flex-col justify-center items-center">
+    <div class="w-full flex flex-col justify-center items-center mt-2">
       <Pagination
         totalPages={numOfPagesPayouts}
         pageChangedCallback={(n) => {
@@ -507,7 +596,9 @@
     class="fixed inset-0 overflow-auto flex flex-col items-center md:p-32 p-8 pt-[68px] bg-black bg-opacity-50"
   >
     <div class="flex flex-col w-full max-w-[600px] p-4 rounded-box bg-base-300">
-      <p class="self-center opacity-60">ID: {selectedPayout.uuid}</p>
+      <p class="self-center opacity-60 text-center">
+        ID: {selectedPayout.uuid}
+      </p>
       <p
         class={"self-center text-3xl " +
           payoutsStatusMapColors[selectedPayout["status"]]}
@@ -517,8 +608,14 @@
       <p class="self-center opacity-60">{selectedPayout.creation_time}</p>
       <div class="rounded-box flex flex-col bg-base-100 p-4 gap-1 mt-4">
         <!-- <p class="text-lg font-bold">{selectedPayout.name}</p> -->
-        <p class="">IP заказчика: {selectedPayout.customer_ip}</p>
+        <p class="">
-        <p class="">Карта: {selectedPayout.pan}</p>
+          IP заказчика: <span class="font-medium"
+            >{selectedPayout.customer_ip}</span
+          >
+        </p>
+        <p class="">
+          Карта: <span class="font-medium">{selectedPayout.pan}</span>
+        </p>
         <!-- <p class="">
           ID трейдера: {selectedPayout.trader_uuid === ""
             ? "---"
@@ -526,12 +623,37 @@
         </p> -->
       </div>
       <div class="rounded-box flex flex-col bg-base-100 p-4 gap-1 mt-4">
-        <p class="text-lg font-bold">Сумма</p>
+        <p class="text-lg font-bold opacity-50">Сумма</p>
         <p>
           {selectedPayout.amount}
           {selectedPayout.code}
         </p>
       </div>
+      <div class="rounded-box flex flex-col bg-base-100 p-4 gap-1 mt-4">
+        <p class="text-lg font-bold opacity-50">Заказчик</p>
+        <p>
+          {selectedPayout.customer_name}
+          {selectedPayout.customer_surname}
+        </p>
+      </div>
+      <div class="rounded-box flex flex-col bg-base-100 p-4 gap-1 mt-4">
+        <p class="text-lg font-bold opacity-50">Команда трейдеров</p>
+        <p class="font-medium text-lg">
+          {selectedPayout.name}
+        </p>
+        <div class="flex gap-[10px]">
+          <p>{selectedPayout["trader_uuid"]}</p>
+          <button
+            class="px-1 border-[#333]"
+            on:click={(e) => {
+              navigator.clipboard.writeText(selectedPayout["trader_uuid"]);
+              e.target.style.color = "#00ab75";
+            }}
+          >
+            <CopyIcon size={"18"} />
+          </button>
+        </div>
+      </div>
       <!-- <div class="rounded-box flex flex-col bg-base-100 p-4 gap-1 mt-4">
         <p class="text-lg font-bold">Курс</p>
         <p>{selectedPayout.rate} {selectedPayout.code}</p>