<svelte:options customElement="invoice-dashboard" />

<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<script>import { getAccount, watchAccount } from "@wagmi/core";
import Copy from "@requestnetwork/shared-components/copy.svelte";
import Dropdown from "@requestnetwork/shared-components/dropdown.svelte";
import Switch from "@requestnetwork/shared-components/switch.svelte";
import Input from "@requestnetwork/shared-components/input.svelte";
import PoweredBy from "@requestnetwork/shared-components/powered-by.svelte";
import StatusLabel from "@requestnetwork/shared-components/status-label.svelte";
import Toaster from "@requestnetwork/shared-components/sonner.svelte";
import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
import TxType from "@requestnetwork/shared-components/tx-type.svelte";
import DashboardSkeleton from "@requestnetwork/shared-components/dashboard-skeleton.svelte";
import { toast } from "svelte-sonner";
import ChevronDown from "@requestnetwork/shared-icons/chevron-down.svelte";
import ChevronLeft from "@requestnetwork/shared-icons/chevron-left.svelte";
import ChevronRight from "@requestnetwork/shared-icons/chevron-right.svelte";
import ChevronUp from "@requestnetwork/shared-icons/chevron-up.svelte";
import Download from "@requestnetwork/shared-icons/download.svelte";
import Search from "@requestnetwork/shared-icons/search.svelte";
import Network from "@requestnetwork/shared-icons/network/network-icon.svelte";
import { Types } from "@requestnetwork/request-client.js";
import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
import { CurrencyManager } from "@requestnetwork/currency";
import { onDestroy, onMount, tick } from "svelte";
import { formatUnits } from "viem";
import { debounce, formatAddress } from "../utils";
import { Drawer, InvoiceView } from "./dashboard";
import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
import { CurrencyTypes } from "@requestnetwork/types";
import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
export let config;
export let wagmiConfig;
export let requestNetwork;
export let currencies = [];
export let isDecryptionEnabled;
export let enableDecryption;
let sliderValueForDecryption = isDecryptionEnabled ? "on" : "off";
let signer;
let activeConfig = config ? config : defaultConfig;
let mainColor = activeConfig.colors.main;
let secondaryColor = activeConfig.colors.secondary;
let account = wagmiConfig && getAccount(wagmiConfig);
let loading = false;
let searchQuery = "";
let debouncedUpdate;
let isRequestPayed = false;
let currentTab = "All";
let requests = [];
let activeRequest;
let currencyManager;
let previousWalletAddress;
let previousNetwork;
let columns = {
  issuedAt: false,
  dueDate: false
};
const columnOptions = [
  { value: "dueDate", label: "Due Date" },
  { value: "issuedAt", label: "Issued Date" }
];
let sortOrder = "desc";
let sortColumn = "timestamp";
$: {
  if (wagmiConfig) {
    account = getAccount(wagmiConfig);
  }
}
$: {
  if (account?.address) {
    tick().then(() => {
      getRequests();
    });
  }
}
let unwatchAccount;
onMount(() => {
  unwatchAccount = watchAccount(wagmiConfig, {
    onChange(data) {
      if (data?.address !== account?.address) {
        account = data;
        if (account?.address) {
          getRequests();
        } else {
          requests = [];
          activeRequest = void 0;
          previousWalletAddress = void 0;
          previousNetwork = void 0;
        }
      }
    }
  });
});
onDestroy(() => {
  if (typeof unwatchAccount === "function")
    unwatchAccount();
});
$: {
  signer = account?.address;
}
$:
  isRequestPayed, getOneRequest(activeRequest);
onMount(() => {
  currencyManager = initializeCurrencyManager(currencies);
});
const getRequests = async () => {
  if (!account?.address || !requestNetwork)
    return;
  loading = true;
  try {
    const requestsData = await requestNetwork?.fromIdentity({
      type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
      value: account?.address
    });
    requests = requestsData?.map((request) => request.getData()).sort((a, b) => b.timestamp - a.timestamp);
  } catch (error) {
    console.error("Failed to fetch requests:", error);
  } finally {
    loading = false;
  }
};
const getOneRequest = async (activeRequest2) => {
  if (!activeRequest2)
    return;
  try {
    const _request = await requestNetwork?.fromRequestId(
      activeRequest2?.requestId
    );
    requests = requests?.filter(
      (request) => request.requestId !== activeRequest2.requestId
    );
    requests = [...requests, _request?.getData()].sort(
      (a, b) => b.timestamp - a.timestamp
    );
  } catch (error) {
    console.error("Failed to fetch request:", error);
  }
};
const itemsPerPage = 10;
let currentPage = 1;
let totalPages = 1;
$: {
  const currentWalletAddress = account?.address;
  const currentNetwork = account?.chainId?.toString();
  if (currentWalletAddress && currentWalletAddress !== previousWalletAddress) {
    getRequests();
    previousWalletAddress = currentWalletAddress;
    activeRequest = void 0;
  }
  if (currentNetwork && currentNetwork !== previousNetwork) {
    previousNetwork = currentNetwork;
  }
}
$: {
  if (sortColumn && sortOrder) {
    requests = [...requests ?? []].sort((a, b) => {
      let valueA = sortColumn.includes(".") ? getNestedValue(a, sortColumn) : a[sortColumn];
      let valueB = sortColumn.includes(".") ? getNestedValue(b, sortColumn) : b[sortColumn];
      if (valueA === void 0 && valueB === void 0)
        return 0;
      if (valueA === void 0)
        return sortOrder === "asc" ? 1 : -1;
      if (valueB === void 0)
        return sortOrder === "asc" ? -1 : 1;
      if (typeof valueA === "string")
        valueA = valueA.toLowerCase();
      if (typeof valueB === "string")
        valueB = valueB.toLowerCase();
      if (valueA < valueB)
        return sortOrder === "asc" ? -1 : 1;
      if (valueA > valueB)
        return sortOrder === "asc" ? 1 : -1;
      return 0;
    });
  }
}
$:
  filteredRequests = requests?.filter((request) => {
    const terms = searchQuery.toLowerCase();
    if (currentTab === "All" || currentTab === "Get Paid" && request.payee?.value?.toLowerCase() === signer?.toLowerCase() || currentTab === "Pay" && request.payer?.value?.toLowerCase() === signer?.toLowerCase()) {
      const invoiceMatches = request.contentData?.invoiceNumber?.toString().toLowerCase().includes(terms);
      const payeeMatches = formatAddress(request.payee?.value ?? "").toLowerCase().includes(terms);
      const payerMatches = formatAddress(request.payer?.value ?? "").toLowerCase().includes(terms);
      const amountMatches = request.expectedAmount.toString().includes(terms);
      return invoiceMatches || payeeMatches || payerMatches || amountMatches;
    }
    return false;
  });
$:
  totalPages = Math.ceil(filteredRequests?.length / itemsPerPage);
$:
  paginatedRequests = (filteredRequests ?? []).slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );
$:
  processedRequests = paginatedRequests?.map(
    (request) => {
      const currencyInfo = getCurrencyFromManager(
        request.currencyInfo,
        currencyManager
      );
      let paymentNetworkExtension = getPaymentNetworkExtension(request);
      let paymentCurrencies = [];
      if (paymentNetworkExtension?.id === Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ERC20_PROXY) {
        paymentCurrencies = paymentNetworkExtension?.values?.acceptedTokens?.map(
          (token) => currencyManager.fromAddress(
            token,
            paymentNetworkExtension?.values?.network
          )
        );
      } else if (paymentNetworkExtension?.id === Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ETH_PROXY) {
        const network = paymentNetworkExtension?.values?.network;
        paymentCurrencies = [
          currencyManager.getNativeCurrency(
            Types.RequestLogic.CURRENCY.ETH,
            network
          )
        ];
      } else if (paymentNetworkExtension?.id === Types.Extension.PAYMENT_NETWORK_ID.ERC20_FEE_PROXY_CONTRACT || paymentNetworkExtension?.id === Types.Extension.PAYMENT_NETWORK_ID.ETH_FEE_PROXY_CONTRACT) {
        paymentCurrencies = [
          currencyInfo
        ];
      } else {
        console.error(
          "Payment network extension not supported:",
          paymentNetworkExtension
        );
      }
      return {
        ...request,
        formattedAmount: formatUnits(
          BigInt(request.expectedAmount),
          currencyInfo?.decimals ?? 18
        ),
        currencySymbol: currencyInfo.symbol,
        paymentCurrencies
      };
    }
  );
const goToPage = (page) => {
  if (page >= 1 && page <= totalPages) {
    currentPage = page;
  }
};
const changeTab = (tab) => {
  currentTab = tab;
  activeRequest = void 0;
  currentPage = 1;
};
const handleColumnChange = (selectedOption) => {
  columns = {
    ...columns,
    [selectedOption]: !columns[selectedOption]
  };
};
onMount(() => {
  debouncedUpdate = debounce((value) => {
    searchQuery = value.toLowerCase();
  }, 500);
});
const handleSearchChange = (event) => {
  const { value } = event.target;
  searchQuery = value;
};
const handleSort = (column) => {
  sortOrder = column === sortColumn && sortOrder === "asc" ? "desc" : "asc";
  sortColumn = column;
};
const getNestedValue = (obj, path) => {
  return path.split(".").reduce((acc, part) => acc && acc[part], obj);
};
const handleRequestSelect = (e, request) => {
  activeRequest = request;
};
const handleRemoveSelectedRequest = () => {
  activeRequest = void 0;
};
$:
  sliderValueForDecryption, getRequests();
$: {
  if (sliderValueForDecryption === "on") {
    enableDecryption(true);
  } else {
    enableDecryption(false);
  }
}
</script>

<div
  class="main-table"
  style="--mainColor: {mainColor}; --secondaryColor: {secondaryColor}; "
>
  <div class="tabs">
    <ul>
      <li
        on:click={() => changeTab("All")}
        class={`${currentTab === "All" && "active"}`}
      >
        All
      </li>
      <li
        on:click={() => changeTab("Pay")}
        class={`${currentTab === "Pay" && "active"}`}
      >
        Pay
      </li>
      <li
        on:click={() => changeTab("Get Paid")}
        class={`${currentTab === "Get Paid" && "active"}`}
      >
        Get Paid
      </li>
    </ul>
  </div>
  <div style="display: flex; flex-direction: column;">
    <div class="search-wrapper">
      <div class="search-wrapper" style="gap: 10px;">
        <Input
          placeholder="Search..."
          width="w-[300px]"
          handleInput={handleSearchChange}
        >
          <div slot="icon">
            <Search />
          </div>
        </Input>
        <div class="width: fit-content;">
          <Switch bind:value={sliderValueForDecryption} label="Show encrypted requests" fontSize={14} design="slider" />
        </div>
      </div>
      
      <Dropdown
        config={activeConfig}
        type="checkbox"
        options={columnOptions}
        placeholder="Select Columns"
        onchange={handleColumnChange}
      />
    </div>
    <div class="table-wrapper">
      <table>
        <thead class="table-head">
          <tr style="width: 100%;">
            {#if columns.issuedAt}
              <th on:click={() => handleSort("contentData.creationDate")}>
                <div>
                  Issued Date<i class="caret">
                    {#if sortOrder === "asc" && sortColumn === "contentData.creationDate"}
                      <ChevronUp />
                    {:else}
                      <ChevronDown />
                    {/if}
                  </i>
                </div>
              </th>
            {/if}
            {#if columns.dueDate}
              <th on:click={() => handleSort("contentData.dueDate")}>
                <div>
                  Due Date<i class="caret">
                    {#if sortOrder === "asc" && sortColumn === "contentData.dueDate"}
                      <ChevronUp />
                    {:else}
                      <ChevronDown />
                    {/if}
                  </i>
                </div>
              </th>
            {/if}
            <th on:click={() => handleSort("timestamp")}>
              <div>
                Created<i class="caret">
                  {#if sortOrder === "asc" && sortColumn === "timestamp"}
                    <ChevronUp />
                  {:else}
                    <ChevronDown />
                  {/if}
                </i>
              </div></th
            >
            <th on:click={() => handleSort("contentData.invoiceNumber")}>
              <div>
                Invoice #<i class="caret">
                  {#if sortOrder === "asc" && sortColumn === "contentData.invoiceNumber"}
                    <ChevronUp />
                  {:else}
                    <ChevronDown />
                  {/if}
                </i>
              </div></th
            >
            {#if currentTab === "All"}
              <th on:click={() => handleSort("payee.value")}>
                <div>
                  Payee<i class="caret">
                    {#if sortOrder === "asc" && sortColumn === "payee.value"}
                      <ChevronUp />
                    {:else}
                      <ChevronDown />
                    {/if}
                  </i>
                </div>
              </th>
              <th on:click={() => handleSort("payer.value")}>
                <div>
                  Payer<i class={`caret `}>
                    {#if sortOrder === "asc" && sortColumn === "payer.value"}
                      <ChevronUp />
                    {:else}
                      <ChevronDown />
                    {/if}
                  </i>
                </div>
              </th>
            {:else}
              <th
                scope="col"
                on:click={() =>
                  handleSort(
                    currentTab === "Pay" ? "payee.value" : "payer.value"
                  )}
                >{currentTab === "Pay" ? "Payee" : "Payer"}<i class={`caret `}>
                  {#if ((currentTab === "Pay" && sortColumn === "payee.value") || sortColumn === "payer.value") && sortOrder === "asc"}
                    <ChevronUp />
                  {:else}
                    <ChevronDown />
                  {/if}</i
                ></th
              >
            {/if}
            <th on:click={() => handleSort("expectedAmount")}>
              <div>
                Expected Amount<i class={`caret `}>
                  {#if sortOrder === "asc" && sortColumn === "expectedAmount"}
                    <ChevronUp />
                  {:else}
                    <ChevronDown />
                  {/if}
                </i>
              </div>
            </th>
            <th
              on:click={() => {
                const sortBy = processedRequests?.some(
                  (req) => req.payer?.value === signer
                )
                  ? "payer.value"
                  : "payee.value";
                handleSort(sortBy);
              }}
            >
              <div>
                Type<i class={`caret `}>
                  {#if sortOrder === "asc" && (sortColumn === "payer.value" || sortColumn === "payee.value")}
                    <ChevronUp />
                  {:else}
                    <ChevronDown />
                  {/if}
                </i>
              </div>
            </th>
            <th on:click={() => handleSort("state")}>
              <div>
                Status<i class={`caret `}>
                  {#if sortOrder === "asc" && sortColumn === "state"}
                    <ChevronUp />
                  {:else}
                    <ChevronDown />
                  {/if}
                </i>
              </div>
            </th>
            <th on:click={() => handleSort("currencyInfo.network")}>
              <div>
                Payment Chain<i class={`caret `}>
                  {#if sortOrder === "asc" && sortColumn === "currencyInfo.network"}
                    <ChevronUp />
                  {:else}
                    <ChevronDown />
                  {/if}
                </i>
              </div>
            </th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {#if !loading && processedRequests.length > 0}
            {#each processedRequests as request}
              <tr class="row" on:click={(e) => handleRequestSelect(e, request)}>
                {#if columns.issuedAt}
                  <td
                    >{new Date(
                      request.contentData.creationDate
                    ).toLocaleDateString() || "-"}</td
                  >
                {/if}
                {#if columns.dueDate}
                  <td
                    >{request?.contentData?.paymentTerms?.dueDate
                      ? new Date(
                          request?.contentData?.paymentTerms?.dueDate
                        ).toLocaleDateString()
                      : "-"}</td
                  >
                {/if}
                <td>
                  {new Date(request.timestamp * 1000).toLocaleDateString()}
                </td>
                <td>{request.contentData.invoiceNumber || "-"}</td>
                {#if currentTab === "All"}
                  <td
                    ><div class="address">
                      <span>{formatAddress(request.payee?.value ?? "")}</span>
                      <Copy textToCopy={request.payee?.value} />
                    </div></td
                  >
                  <td
                    ><div class="address">
                      <span>{formatAddress(request.payer?.value ?? "")}</span>
                      <Copy textToCopy={request.payer?.value} />
                    </div></td
                  >
                {:else}
                  <td>
                    <div class="address">
                      <span
                        >{formatAddress(
                          currentTab === "Pay"
                            ? (request.payee?.value ?? "")
                            : (request.payer?.value ?? "")
                        )}</span
                      >
                      <Copy
                        textToCopy={currentTab === "Pay"
                          ? request.payee?.value
                          : request.payer?.value || ""}
                      />
                    </div>
                  </td>
                {/if}
                <td>
                  {#if request.formattedAmount.includes(".") && request.formattedAmount.split(".")[1].length > 5}
                    <Tooltip text={request.formattedAmount}>
                      {Number(request.formattedAmount).toFixed(5)}
                    </Tooltip>
                  {:else}
                    {request.formattedAmount}
                  {/if}
                  {request.currencySymbol}
                </td>
                <td>
                  <TxType
                    type={signer === request.payer?.value ? "OUT" : "IN"}
                  />
                </td>
                <td><StatusLabel status={checkStatus(request)} /></td>
                <td>
                  {#if request.paymentCurrencies.length > 0}
                    <Network network={request.paymentCurrencies[0]?.network} />
                  {:else}
                    <span class="text-gray-400">-</span>
                  {/if}
                </td>
                <td
                  ><Tooltip text="Download PDF">
                    <Download
                      onClick={async () => {
                        try {
                          await exportToPDF(
                            request,
                            getCurrencyFromManager(
                              request.currencyInfo,
                              currencyManager
                            ),
                            request.paymentCurrencies,
                            config.logo
                          );
                        } catch (error) {
                          toast.error(`Failed to export PDF`, {
                            description: `${error}`,
                            action: {
                              label: "X",
                              onClick: () => console.info("Close"),
                            },
                          });
                          console.error("Failed to export PDF:", error);
                        }
                      }}
                    />
                  </Tooltip></td
                >
              </tr>
            {/each}
          {:else}
            {#if loading}
              <DashboardSkeleton />
            {/if}
          {/if}
        </tbody>
      </table>
      <Drawer
        config={activeConfig}
        active={activeRequest !== undefined}
        onClose={handleRemoveSelectedRequest}
      >
        {#if activeRequest !== undefined}
          <InvoiceView
            {account}
            {wagmiConfig}
            bind:isRequestPayed
            {requestNetwork}
            {currencyManager}
            config={activeConfig}
            request={activeRequest}
          />
        {/if}
      </Drawer>
    </div>
    {#if paginatedRequests.length > 0}
      <div class="pagination">
        <button
          class="chevron-button"
          disabled={currentPage === 1}
          on:click={() => goToPage(currentPage - 1)}
        >
          <i>
            <ChevronLeft />
          </i>
        </button>

        {#each Array(totalPages).fill(null) as _, i}
          <button
            class={`active-page page-${currentPage === i + 1 ? "on" : "off"}`}
            class:active={currentPage === i + 1}
            on:click={() => goToPage(i + 1)}
          >
            {i + 1}
          </button>
        {/each}

        <button
          class="chevron-button"
          disabled={currentPage === totalPages}
          on:click={() => goToPage(currentPage + 1)}
        >
          <i>
            <ChevronRight />
          </i>
        </button>
      </div>
    {/if}
  </div>
  {#if !loading && paginatedRequests.length === 0}
    <div class="no-requests">
      <p>No requests found</p>
      <span>(Please connect a wallet or create a request)</span>
    </div>
  {/if}
  <PoweredBy />
  <Toaster />
</div>

<style>
  @font-face {
    font-family: "Montserrat";
    src: url("./fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    color-scheme: light;
  }

  .main-table {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    color: black;
  }

  .tabs {
    width: fit-content;
    border-bottom: 1px solid #d1d5db;
  }

  .tabs ul {
    display: flex;
    flex-wrap: wrap;
    font-weight: 500;
    text-align: center;
    color: #6b7280;
    margin: 0;
    padding-left: 0;
  }

  .tabs ul li {
    width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease-in-out;
  }

  @media only screen and (max-width: 880px) {
    .tabs ul li {
      padding: 8px;
      width: 80px;
    }
  }

  .tabs ul li:hover {
    color: #6b7280;
    border-color: #d1d5db;
    cursor: pointer;
  }

  .active {
    color: #000;
    border-bottom: 2px solid var(--mainColor) !important;
    transition: all 0.3s ease-in-out;
  }

  .search-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  @media only screen and (max-width: 880px) {
    .search-wrapper {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
  }

  .table-wrapper {
    position: relative;
    box-shadow:
      0 1px 3px 0 rgb(0 0 0 / 0.1),
      0 1px 2px -1px rgb(0 0 0 / 0.1);
    border-radius: 0.5rem;
  }

  @media only screen and (max-width: 880px) {
    .table-wrapper {
      overflow: scroll;
      max-width: 900px;
    }
  }

  .table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: left;
    color: #6b7280;
    table-layout: auto;
  }

  .table-head {
    background-color: #f9fafb;
    font-size: 0.75rem;
    line-height: 1rem;
    text-transform: uppercase;
    color: #374151;
  }

  .table-head th {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    cursor: pointer;
  }

  @media only screen and (max-width: 880px) {
    .table-head th {
      white-space: nowrap;
    }
  }

  .table-head th div {
    display: flex;
    align-items: center;
  }

  .caret {
    margin-left: 6px;
  }

  .row {
    background-color: white;
    border-bottom: 1px solid #d1d5db;
    transition: all 0.3s ease-in-out;
  }

  .row:hover {
    cursor: pointer;
    transform: translateY(0.25rem);
  }

  .row td {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .address {
    display: flex;
    align-items: center;
  }

  .address span {
    margin-right: 10px;
  }

  .pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-right: auto;
    background-color: white;
    border: 1px solid #e4e4e4;
    border-radius: 0.5rem;
    padding: 12px;
    transition: all 0.3s ease-in-out;
  }

  .pagination:hover {
    box-shadow:
      0 4px 6px -1px rgb(0 0 0 / 0.1),
      0 2px 4px -2px rgb(0 0 0 / 0.1);
  }

  .chevron-button {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease-in-out;
    border: 1px solid #e4e4e4;
  }

  .chevron-button:enabled:hover {
    color: white;
    background-color: var(--mainColor);
  }

  .chevron-button:disabled {
    opacity: 0.4;
  }

  .active-page {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid #e4e4e4;
    transition: all 0.3s ease-in-out;
  }

  .active-page:hover {
    color: white;
    background-color: var(--secondaryColor);
  }

  .page-on {
    color: white;
    background-color: var(--mainColor);
  }

  .page-off {
    background-color: white;
  }

  .no-requests {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

  .no-requests p {
    color: black;
    font-size: 20px;
    margin-bottom: 0;
  }
</style>
