feat: ajuste dos cards

Todo: ajustar o tamanho da barra de filtro
Todo: ver pq a formattedDate não está sendo usado

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>
   );
 };

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" }}

src/Services/Chart/request.tsx

@@ -1,4 +1,3 @@
-import { start } from "repl";
 import http from "../axios";
 import { logout } from "../localstorage";