Merge pull request #44 from ipti/fix-card-ts

feat: cards initial page
ipti · Dec 16, 2024 · 6500b18 · 6500b18
2 parents 510a10d + cc71ae1
commit 6500b18
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 41 deletions.
diff --git a/src/Assets/images/ring_card_blue.svg b/src/Assets/images/ring_card_blue.svg
diff --git a/src/Assets/images/ring_card_navy_blue.svg b/src/Assets/images/ring_card_navy_blue.svg
diff --git a/src/Assets/images/ring_card_orange.svg b/src/Assets/images/ring_card_orange.svg
diff --git 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
@@ -63,13 +63,7 @@ const InitialPage = () => {
   ) as PropsAplicationContext;
 
   const [dates, setDates] = useState<Nullable<(Date | null)[]>>(null);
-  const [formattedDates, setFormattedDates] = useState<{
-    start: string;
-    end: string;
-  }>({
-    start: "",
-    end: "",
-  });
+
   const [ts, setTs] = useState<number | undefined>();
   const [chartData, setChartData] = useState<any>(null);
 
@@ -91,8 +85,6 @@ const InitialPage = () => {
     const start = formatDate(dates[0]);
     const end = formatDate(dates[1]);
 
-    setFormattedDates({ start, end });
-
     const fetchData = async () => {
       try {
         const response = await requestChartMatriculated(start, end);
@@ -152,32 +144,40 @@ 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" />
-      {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="space-between"
+        style={{
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        {propsAplication.project && (
+          <Row id="end" style={{ flex: 1, marginRight: "10px" }}>
+            <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 +225,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
@@ -1,4 +1,3 @@
-import { start } from "repl";
 import http from "../axios";
 import { logout } from "../localstorage";