Refactor new UI update maindashboard

src/app/globals.css

@@ -18,4 +18,5 @@
   --color-secondaryBackground: #f3f0e7; /* Bege Claro */
   --color-secondaryText: #e5e5e5; /* Platinum */
   --color-linkBlue: #225991; /* Azul */
+  --color-neutralGray: #e7e7e9;
 }

src/app/login/page.tsx

@@ -2,7 +2,7 @@ import { CardSurface } from "@/components/NewDesignSystem/atoms/CardSurface";
 import { FormInput } from "@/components/NewDesignSystem/atoms/FormInput";
 import { FormLabel } from "@/components/NewDesignSystem/atoms/FormLabel";
 import { PrimaryButton } from "@/components/NewDesignSystem/atoms/PrimaryButton";
-import { AuthButton } from "@/components/NewDesignSystem/molecules/AuthButton/inde";
+import { AuthButton } from "@/components/NewDesignSystem/molecules/AuthButton";
 import { FormInputPassword } from "@/components/NewDesignSystem/molecules/FormInputPassword";
 import { FormInputWithIcon } from "@/components/NewDesignSystem/molecules/FormInputWithIcon";
 import { PasswordRecoveryCard } from "@/components/NewDesignSystem/organisms/PasswordRecoveryCard";

src/app/mainDashboard/page.tsx

@@ -1,115 +1,43 @@
 "use client";
 
 import React, { useState } from "react";
-import PeriodButton from "@/components/PeriodButton/PeriodButton";
-import BalanceCard from "@/components/BalanceCard/BalanceCard";
-import ActionsFavorites from "@/components/ActionsFavorites";
-import PeriodChart from "@/components/GraphPeriods/PeriodChart";
+import BalanceCard from "@/components/NewDesignSystem/molecules/BalanceCard/BalanceCard";
+import ActionsFavorites from "@/components/NewDesignSystem/molecules/ActionsFavorites";
+import { Bell } from "lucide-react";
+import { BiBox } from "react-icons/bi";
+import { ActionsFavoritesMocks } from "@/mocks/mainDashboard";
+import PeriodChartsSection from "@/components/NewDesignSystem/organisms/PeriodChartsSection";
 
 export default function MainDashboard() {
-    const [selectedPeriod, setSelectedPeriod] = useState<"Diário" | "Semanal" | "Mensal" | "Anual">("Diário");
-    const periods = ["Diário", "Semanal", "Mensal", "Anual"] as const;
-
-
-
-    const dailyData = [
-        { name: "Domingo", pv: 2400, uv: 4000 },
-        { name: "Segunda-Feira", pv: 2600, uv: 3800 },
-        { name: "Terça-Feira", pv: 2200, uv: 4100 },
-        { name: "Quarta-Feira", pv: 2400, uv: 3900 },
-        { name: "Quinta-Feira", pv: 2800, uv: 4200 },
-        { name: "Sexta-Feira", pv: 2300, uv: 3900 },
-        { name: "Sábado", pv: 2500, uv: 4100 },
-    ];
-
-    const todayIndex = new Date().getDay();
-    const todayData = [dailyData[todayIndex]]
-
-
-
-    const weeklyData = [
-        { name: "Dom", pv: 2400, uv: 4000 },
-        { name: "Seg", pv: 2600, uv: 3800 },
-        { name: "Ter", pv: 2200, uv: 4100 },
-        { name: "Qua", pv: 2400, uv: 3900 },
-        { name: "Qui", pv: 2800, uv: 4200 },
-        { name: "Sex", pv: 2300, uv: 3900 },
-        { name: "Sáb", pv: 2500, uv: 4100 },
-    ];
-
-
-
-
-    const monthlyData = [
-        { name: "Semana 1", pv: 2400, uv: 4000 },
-        { name: "Semana 2", pv: 2200, uv: 3600 },
-        { name: "Semana 3", pv: 2600, uv: 4100 },
-        { name: "Semana 4", pv: 2400, uv: 3800 },
-    ];
-
-    const yearlyData = [
-        { name: "Jan", pv: 2400, uv: 4000 },
-        { name: "Fev", pv: 2500, uv: 4100 },
-        { name: "Mar", pv: 2600, uv: 4200 },
-        { name: "Abr", pv: 2700, uv: 4300 },
-        { name: "Mai", pv: 2800, uv: 4400 },
-        { name: "Jun", pv: 2900, uv: 4500 },
-        { name: "Jul", pv: 3000, uv: 4600 },
-        { name: "Ago", pv: 3100, uv: 4700 },
-        { name: "Set", pv: 3200, uv: 4800 },
-        { name: "Out", pv: 3300, uv: 4900 },
-        { name: "Nov", pv: 3400, uv: 5000 },
-        { name: "Dez", pv: 3500, uv: 5100 },
-    ];
-
-
-
-
-    const data =
-        selectedPeriod === "Diário"
-            ? todayData
-            : selectedPeriod === "Semanal"
-                ? weeklyData
-                : selectedPeriod === "Mensal"
-                    ? monthlyData
-                    : yearlyData;
-
-
-    const ActionsFavoritesMocks = [
-        { actionName: "PETR4", actionValue: "+1,22%" },
-        { actionName: "VALE3", actionValue: "-0,75%" },
-        { actionName: "ITUB4", actionValue: "+0,65%" },
-    ];
-
-    return (
-        <div>
-            <BalanceCard
-                balance="R$50.000"
-                futureBalance="R$1500.00" />
-
-            <div className="flex justify-center">
-                <div className="flex px-4 py-2 space-x-4 bg-[#DFF7E2] rounded-lg">
-                    {periods.map((period) => (
-                        <PeriodButton
-                            key={period}
-                            label={period}
-                            selected={period === selectedPeriod}
-                            onClick={() => setSelectedPeriod(period)}
-                        />
-                    ))}
-                </div>
-            </div>
-
-            <PeriodChart
-                period={selectedPeriod}
-                data={data}
-
-            />
-
-
-            <ActionsFavorites
-                actions={ActionsFavoritesMocks}
-            />
-        </div>
-    );
+  const iconHeader = [
+    { icon: BiBox, alt: "Caixa de entrada" },
+    { icon: Bell, alt: "Notificações" },
+  ];
+  return (
+    <div className="p-5">
+      <header className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold">Seja bem vindo</h1>
+
+        <nav>
+          <ul className="flex flex-row gap-4 ">
+            {iconHeader.map((item, index) => {
+              const Icon = item.icon;
+              return (
+                <li key={index} className="bg-[#006B36] p-2 rounded-3xl">
+                  <Icon size={24} className="text-white " />
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      </header>
+      {/* conteúdo */}
+      <div className="flex flex-col gap-8 items-center mt-4">
+        <BalanceCard balance="R$50.000" futureBalance="+R$1500.00" />
+        <PeriodChartsSection />
+      </div>
+
+      <ActionsFavorites actions={ActionsFavoritesMocks} />
+    </div>
+  );
 }

src/components/NewDesignSystem/atoms/CardSurface/index.tsx

@@ -11,15 +11,22 @@ const cardSurface = tv({
       4: "p-4",
       6: "p-6",
     },
+
     variant: {
       default: "",
       outlined: "border border-gray-200",
       subtle: "bg-gray-50",
     },
     radius: {
+      none: "rounded-none",
       sm: "rounded-md",
       md: "rounded-xl",
       lg: "rounded-2xl",
+      xxl: "rounded-2xl",
+      txxxl: "rounded-t-4xl",
+    },
+    radiusbottom: {
+      bxxl: "rounded-b-2xl",
     },
   },
   defaultVariants: {

src/components/NewDesignSystem/atoms/PeriodButton/PeriodButton.tsx

@@ -0,0 +1,31 @@
+"use client";
+import React from "react";
+import { tv } from "tailwind-variants";
+import { PeriodButtonProps } from "./PeriodButtonProps";
+
+const periodButtonStyles = tv({
+  base: "font-black  font-light  w-80 p-4 justify-evenly  rounded-4xl text-[16px] transition-colors",
+  variants: {
+    selected: {
+      true: "bg-[#006B36] text-white",
+      false: "bg-[bg-neutralGray/25] text-[#333333]",
+    },
+  },
+  defaultVariants: {
+    selected: false,
+  },
+});
+
+const PeriodButton: React.FC<PeriodButtonProps> = ({
+  label,
+  selected,
+  onClick,
+}) => {
+  return (
+    <button onClick={onClick} className={periodButtonStyles({ selected })}>
+      {label}
+    </button>
+  );
+};
+
+export default PeriodButton;

src/components/PeriodButton/PeriodButtonProps.ts → src/components/NewDesignSystem/atoms/PeriodButton/PeriodButtonProps.ts

@@ -1,4 +1,4 @@
-export interface PeriodChartProps {
+export interface PeriodButtonProps {
     label: string;
     selected: boolean;
     onClick: () => void;