From d791b613448feb99e4e7e014321e35d301b1b005 Mon Sep 17 00:00:00 2001
From: Joanne Stephany <joannestephany@hotmail.com>
Date: Fri, 13 Dec 2024 17:00:58 -0300
Subject: [PATCH] feat: ajuste dos cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Todo: ajustar o tamanho da barra de filtro
Todo: ver pq a formattedDate não está sendo usado
---
 src/Assets/images/ring_card_blue.svg      |  8 ++++
 src/Assets/images/ring_card_navy_blue.svg |  8 ++++
 src/Assets/images/ring_card_orange.svg    |  8 ++++
 src/Components/Chart/CardQuant/index.tsx  | 31 +++++++++++--
 src/Pages/InitialPage/index.tsx           | 56 ++++++++++++-----------
 src/Services/Chart/request.tsx            |  1 -
 6 files changed, 81 insertions(+), 31 deletions(-)
 create mode 100644 src/Assets/images/ring_card_blue.svg
 create mode 100644 src/Assets/images/ring_card_navy_blue.svg
 create mode 100644 src/Assets/images/ring_card_orange.svg

diff --git a/src/Assets/images/ring_card_blue.svg b/src/Assets/images/ring_card_blue.svg
new file mode 100644
index 0000000..ad29e8c
--- /dev/null
+++ b/src/Assets/images/ring_card_blue.svg
@@ -0,0 +1,8 @@
+<svg width="50" height="43" viewBox="0 0 50 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle 
+    cx="32.7249" 
+    cy="32" 
+    r="25.5" 
+    stroke="#336AE9" 
+    stroke-width="13"/>
+</svg>
diff --git a/src/Assets/images/ring_card_navy_blue.svg b/src/Assets/images/ring_card_navy_blue.svg
new file mode 100644
index 0000000..840e34b
--- /dev/null
+++ b/src/Assets/images/ring_card_navy_blue.svg
@@ -0,0 +1,8 @@
+<svg width="50" height="43" viewBox="0 0 50 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle 
+    cx="32.7249" 
+    cy="32" 
+    r="25.5" 
+    stroke="#24234F" 
+    stroke-width="13"/>
+</svg>
diff --git a/src/Assets/images/ring_card_orange.svg b/src/Assets/images/ring_card_orange.svg
new file mode 100644
index 0000000..7aa2bc5
--- /dev/null
+++ b/src/Assets/images/ring_card_orange.svg
@@ -0,0 +1,8 @@
+<svg width="50" height="43" viewBox="0 0 50 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle 
+    cx="32.7249" 
+    cy="32" 
+    r="25.5" 
+    stroke="#FCAD09" 
+    stroke-width="13"/>
+</svg>
diff --git a/src/Components/Chart/CardQuant/index.tsx b/src/Components/Chart/CardQuant/index.tsx
index 2930a19..455d61a 100644
--- a/src/Components/Chart/CardQuant/index.tsx
+++ b/src/Components/Chart/CardQuant/index.tsx
@@ -1,13 +1,36 @@
 import styles from "../../../Styles";
 import { Column } from "../../../Styles/styles";
+import ring_card_orange from "../../../Assets/images/ring_card_orange.svg";
+import ring_card_blue from "../../../Assets/images/ring_card_blue.svg";
+import ring_card_navy_blue from "../../../Assets/images/ring_card_navy_blue.svg";
+
 
 const CardQuant = ({ title, quant, color }: { title: string; quant: number | string, color?: "orange"| "blue"| "navy_blue" }) => {
+  const ringCardImage = 
+      color === "blue"? ring_card_orange // Usar ring_card_orange se for azul
+    : color === "navy_blue" ? ring_card_blue // Usar ring_card_blue se for navy_blue
+    : ring_card_navy_blue; // Usar ring_card_navy_blue se for orange
+
   return (
-    <div className="card" style={{background: color === "blue" ? styles.colors.colorsBaseProductNormalActive : color === "orange" ? styles.colors.colorCardOrange : color === "navy_blue" ? styles.colors.colorNavyBlue : "", minHeight: 150, height: "100%", borderRadius: "32px"}}>
-      <Column id="space-between" style={{alignItems: "center", height: "100%"}}>
-        <h3 style={{textAlign: "center", color: "white"}}>{title}</h3>
-        <h1 style={{color: "white", fontSize: 48}}>{quant}</h1>
+    <div className="card" style={{background: color === "blue" ? styles.colors.colorsBaseProductNormalActive : color === "orange" ? styles.colors.colorCardOrange : color === "navy_blue" ? styles.colors.colorNavyBlue : "", minHeight: 150, height: "70%", borderRadius: "32px", padding:"32px 0px",position: "relative", zIndex: 1}}>
+      <Column id="space-between" style={{alignItems: "center", height: "100%", zIndex: 3}}>
+        <h3 style={{textAlign: "center", color: "white", fontSize: 14, zIndex: 3}}>{title}</h3>
+        <h1 style={{color: "white", fontSize: 35, zIndex: 3}}>{quant}</h1>
       </Column>
+      <img
+        src={ringCardImage} // casoo background seja blue, usar ring_card_orange, caso seja navy_blue, usar ring_card_blur
+        alt="Ring Card"
+        style={{
+          position: "absolute", // Posiciona a imagem em relação ao card
+          bottom: "0px", // Move a imagem para cima do card
+          right: "0px", // Ajusta horizontalmente
+          width: "50px",
+          height: "50px",
+          borderRadius: "0px 0px 32px 0px",
+          zIndex: 2, // Mantém a imagem acima do card
+          opacity: "1", // Deixe visível
+        }}
+      />
     </div>
   );
 };
diff --git a/src/Pages/InitialPage/index.tsx b/src/Pages/InitialPage/index.tsx
index 3e74bc5..3cd5dd9 100644
--- a/src/Pages/InitialPage/index.tsx
+++ b/src/Pages/InitialPage/index.tsx
@@ -152,32 +152,36 @@ const InitialPage = () => {
       title={`Bem vindo, ${propsAplication.user?.name}!`}
       description="Visualização dos dados gerais do meuBen."
     >
-      {propsAplication.user?.role === ROLE.ADMIN && (
-        <Row id="end">
-          <Button
-            label="Baixar CSV"
-            icon="pi pi-download"
-            iconPos="left"
-            onClick={downloadCSV}
-          />
-        </Row>
-      )}
-      <Padding padding="8px" />
+
+      <Row id="space-between" style={{width: "100%"}}> 
+        {/* todo: deixar a barra com o tamanho maior */}
       {propsAplication.project && (
-        <Row id="end">
-          <DropdownComponent
-            options={[
-              ...propsAplication.project,
-              { id: undefined, name: "Todos" },
-            ]}
-            optionsLabel="name"
-            optionsValue="id"
-            value={ts}
-            onChange={(e) => setTs(e.target.value)}
-            placerholder="Filtrar por Tecnologia"
-          />
-        </Row>
-      )}
+          <Row id="end">
+            <DropdownComponent
+              options={[
+                ...propsAplication.project,
+                { id: undefined, name: "Todos" },
+              ]}
+              optionsLabel="name"
+              optionsValue="id"
+              value={ts}
+              onChange={(e) => setTs(e.target.value)}
+              placerholder="Filtrar por Tecnologia"
+            />
+          </Row>
+        )}
+        {propsAplication.user?.role === ROLE.ADMIN && (
+          <Row id="end">
+            <Button
+              label="Baixar CSV"
+              icon="pi pi-download"
+              iconPos="left"
+              onClick={downloadCSV}
+            />
+          </Row>
+        )}
+        
+      </Row>
 
       <Padding padding="16px" />
       <div className="grid">
@@ -225,7 +229,7 @@ const InitialPage = () => {
         </div>
       </div>
 
-      <Padding padding="20px" />
+      <Padding padding="10px" />
       <div
         className="card col-12 md:col-12 lg:col-6"
         style={{ padding: "20px" }}
diff --git a/src/Services/Chart/request.tsx b/src/Services/Chart/request.tsx
index 8e98e3e..181b17a 100644
--- a/src/Services/Chart/request.tsx
+++ b/src/Services/Chart/request.tsx
@@ -1,4 +1,3 @@
-import { start } from "repl";
 import http from "../axios";
 import { logout } from "../localstorage";