From 54fd0888d5772e93bfdfc06df9c80925289710cf Mon Sep 17 00:00:00 2001
From: Guilherme Baufaker <baufaker@gmail.com>
Date: Sat, 13 Apr 2024 18:39:26 -0300
Subject: [PATCH] fixes in users table, orders table, association admin menu
 item, and others

---
 components/header/Drawers.tsx      | 12 +++---
 components/ui/AssociationAdmin.tsx | 25 +++++++++--
 components/ui/EcannaCardPage.tsx   | 36 ++++++++++++++--
 components/ui/MyInfo.tsx           |  2 +-
 components/ui/MyOrders.tsx         | 67 ++++++++++++++++++++++++++----
 components/ui/OrderStatus.tsx      |  2 +-
 6 files changed, 120 insertions(+), 24 deletions(-)

diff --git a/components/header/Drawers.tsx b/components/header/Drawers.tsx
index d3cf4fc..fae3021 100644
--- a/components/header/Drawers.tsx
+++ b/components/header/Drawers.tsx
@@ -71,11 +71,13 @@ function Drawers({ menu, searchbar, children, platform }: Props) {
   if (localStorage.getItem("AccessToken") == "") {
     menu.items = menu.publicItems || [];
   } else if (localStorage.getItem("AssociationAdmin")) {
-    menu.items[menu.items.length] = {
-      "@type": "SiteNavigationElement",
-      name: "Admin Associação",
-      url: "/admin/associacao",
-    };
+    if (!menu.items.find((i) => i.name === "Admin Associação")) {
+      menu.items[menu.items.length] = {
+        "@type": "SiteNavigationElement",
+        name: "Admin Associação",
+        url: "/admin/associacao",
+      };
+    }
   }
 
   return (
diff --git a/components/ui/AssociationAdmin.tsx b/components/ui/AssociationAdmin.tsx
index 9700b4b..8aafed4 100644
--- a/components/ui/AssociationAdmin.tsx
+++ b/components/ui/AssociationAdmin.tsx
@@ -205,13 +205,30 @@ function MyAccount() {
                 Pacientes da Associação
               </h2>
               <div>
+                <div class="flex pb-2 px-2 border-b border-[#cdcdcd] mb-4">
+                  <div class="w-[32%] flex justify-start">
+                    <span>Nome</span>
+                  </div>
+                  <div class="w-[32%] flex justify-start">
+                    <span>Email</span>
+                  </div>
+                  <div class="w-[32%] flex justify-end">
+                    <span>CPF</span>
+                  </div>
+                </div>
                 <ul class="flex flex-col gap-2">
                   {associationUsers && associationUsers.map((u) => {
                     return (
-                      <li class="p-3 bg-[#cacaca] flex justify-between items-center rounded-md text-[10px] sm:text-xs md:text-sm">
-                        <span>{u.cognito_data.name}</span>
-                        <span>{u.email}</span>
-                        <span>{u.cognito_data.cpf}</span>
+                      <li class="p-3 bg-[#cacaca] flex gap-[2%] justify-between items-center rounded-md text-[10px] sm:text-xs md:text-sm">
+                        <div class="w-[32%] flex justify-start">
+                          <span>{u.cognito_data.name}</span>
+                        </div>
+                        <div class="w-[32%] flex justify-start">
+                          <span>{u.email}</span>
+                        </div>
+                        <div class="w-[32%] flex justify-end">
+                          <span>{u.cognito_data.cpf}</span>
+                        </div>
                       </li>
                     );
                   })}
diff --git a/components/ui/EcannaCardPage.tsx b/components/ui/EcannaCardPage.tsx
index f7f8fd2..748eae3 100644
--- a/components/ui/EcannaCardPage.tsx
+++ b/components/ui/EcannaCardPage.tsx
@@ -81,6 +81,32 @@ function EcannaCardPage({ cardSkeleton }: Props) {
     }
   }, []); // Passando um array de dependências vazio
 
+  function downloadFile(fileUrl: string, filename: string) {
+    // Fetch the file data
+    fetch(fileUrl)
+      .then((response) => response.blob())
+      .then((blob) => {
+        // Create a temporary anchor element
+        const a = document.createElement("a");
+        a.style.display = "none";
+
+        // Set the download attribute and file URL
+        a.download = filename;
+        a.href = window.URL.createObjectURL(blob);
+
+        // Append the anchor to the body and trigger the download
+        document.body.appendChild(a);
+        a.click();
+
+        // Clean up
+        window.URL.revokeObjectURL(a.href);
+        document.body.removeChild(a);
+      })
+      .catch((error) => {
+        console.error("Error downloading file:", error);
+      });
+  }
+
   return (
     <div class="flex flex-col justify-center items-center my-10 gap-[100px] sm:gap-[30px]">
       <div class="rotate-90 sm:rotate-0 flex justify-center p-3 sm:p-12 bg-[#252525] rounded-xl max-w-[424px] sm:max-w-[90%]">
@@ -118,14 +144,16 @@ function EcannaCardPage({ cardSkeleton }: Props) {
           product={cardProduct}
           address={address!}
         />
-        <a
+        <button
+          type="button"
           href={cardUrl}
-          download="carteirinha.png"
           class="flex btn btn-primary text-white w-full sm:w-[48%]"
-          target="_blank"
+          onClick={() => {
+            downloadFile(cardUrl!, "carteirinha-ecanna.png");
+          }}
         >
           <span>Baixar Carteirinha</span> <Icon id="Download" size={19} />
-        </a>
+        </button>
         <button
           type="button"
           download="carteirinha.png"
diff --git a/components/ui/MyInfo.tsx b/components/ui/MyInfo.tsx
index bd479a3..26622f7 100644
--- a/components/ui/MyInfo.tsx
+++ b/components/ui/MyInfo.tsx
@@ -12,7 +12,7 @@ import Icon from "../../components/ui/Icon.tsx";
 import PageWrap from "../../components/ui/PageWrap.tsx";
 
 function MyInfo() {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [isLoadingCids, setIsLoadingCids] = useState(false);
   const [isLoadingPostalCode, setIsLoadingPostalCode] = useState(false);
   const [isSubmiting, setIsSubmitting] = useState(false);
diff --git a/components/ui/MyOrders.tsx b/components/ui/MyOrders.tsx
index 2669864..b928284 100644
--- a/components/ui/MyOrders.tsx
+++ b/components/ui/MyOrders.tsx
@@ -19,6 +19,41 @@ import Slider from "../../components/ui/Slider.tsx";
 import { useUI } from "../../sdk/useUI.ts";
 import SliderJS from "../../islands/SliderJS.tsx";
 
+const OrderItem = (
+  { name, value, created_at, status }: {
+    name: string;
+    value: string;
+    created_at: string;
+    status:
+      | "PAID"
+      | "PENDING"
+      | "CANCELED"
+      | "IN_PRODUCTION"
+      | "PENDING_SHIPPING"
+      | "SHIPPED"
+      | "DELIVERED";
+  },
+) => {
+  return (
+    <li class="p-3 bg-[#cacaca] flex justify-between items-center rounded-md text-[10px] sm:text-xs md:text-sm">
+      <div class="w-[25%] flex justify-start">
+        <span>{name}</span>
+      </div>
+      <div class="w-[25%] flex justify-start">
+        <span>{"RS " + value}</span>
+      </div>
+      <div class="w-[25%] flex justify-center">
+        <span>
+          {created_at}
+        </span>
+      </div>
+      <div class="w-[25%] flex justify-end">
+        <OrderStatus status={status} />
+      </div>
+    </li>
+  );
+};
+
 function MyOrders() {
   const [isLoading, setIsLoading] = useState(true);
   const [orders, setOrders] = useState<Order[]>();
@@ -51,24 +86,38 @@ function MyOrders() {
       {isLoading
         ? <span class="loading loading-spinner text-green-600"></span>
         : (
-          <div class="flex flex-col gap-3 w-full">
+          <div class="flex flex-col gap-5 w-full">
             <div class="flex justify-center">
               <h3 class="text-2xl text-[#8b8b8b] font-semibold text-center">
                 Meus Pedidos
               </h3>
             </div>
             <div>
+              <div class="flex pb-2 px-2 border-b border-[#cdcdcd] mb-4">
+                <div class="w-[25%] flex justify-start">
+                  <span class="text-xs">Produto</span>
+                </div>
+                <div class="w-[25%] flex justify-start">
+                  <span class="text-xs">Valor</span>
+                </div>
+                <div class="w-[25%] flex justify-center">
+                  <span class="text-xs">
+                    Data
+                  </span>
+                </div>
+                <div class="w-[25%] flex justify-end">
+                  <span class="text-xs">Status</span>
+                </div>
+              </div>
               <ul class="flex flex-col gap-2">
                 {orders && orders.map((o) => {
                   return (
-                    <li class="p-3 bg-[#cacaca] flex justify-between items-center rounded-md text-[10px] sm:text-xs md:text-sm">
-                      <span>{o.items[0].sku.name}</span>
-                      <span>{"RS " + ((o.value / 100).toFixed(2))}</span>
-                      <span>
-                        {format(new Date(o.created_at), "dd/MM/yyyy")}
-                      </span>
-                      <OrderStatus status={o.status} />
-                    </li>
+                    <OrderItem
+                      name={o.items[0].sku.name}
+                      value={(o.value / 100).toFixed(2)}
+                      created_at={format(new Date(o.created_at), "dd/MM/yyyy")}
+                      status={o.status}
+                    />
                   );
                 })}
               </ul>
diff --git a/components/ui/OrderStatus.tsx b/components/ui/OrderStatus.tsx
index 0949459..97f089b 100644
--- a/components/ui/OrderStatus.tsx
+++ b/components/ui/OrderStatus.tsx
@@ -43,7 +43,7 @@ function OrderStatus({ status }: Props) {
 
   return (
     <span
-      class={`badge badge-xs border-none text-white text-[10px] sm:text-xs md:text-sm ${
+      class={`badge badge-sm border-none text-white text-[10px] sm:text-xs md:text-sm ${
         style[status].style
       }`}
     >