wip: transactions button

frontend/src/view/components/DropdownMenu.tsx

@@ -27,7 +27,7 @@ export function DropdownMenuContent({ children, className }: DropdownMenuContent
     <RdxDropdownMenu.Portal>
       <RdxDropdownMenu.Content
         className={cn(
-          "rounded-2xl p-2 bg-white space-y-2 shadow-[0px_11px_20px_0px_rgba(0,0,0,0.10)] data-[side=bottom]:animate-slide-up-and-fade",
+          "rounded-2xl p-2 bg-white space-y-2 shadow-[0px_11px_20px_0px_rgba(0,0,0,0.10)] data-[side=bottom]:animate-slide-up-and-fade z-50",
           className,
         )}
       >
@@ -48,7 +48,7 @@ export function DropdownMenuItem({ children, className, onSelect }: DropdownMenu
     <RdxDropdownMenu.Item
       onSelect={onSelect}
       className={cn(
-        "min-h-[48px] outline-none flex items-center p-4 text-gray-800 text-sm data-[highlighted]:bg-gray-50 rounded-2xl transition-colors cursor-pointer",
+        "min-h-[40px] outline-none flex items-center py-2 px-4 text-gray-800 text-sm data-[highlighted]:bg-gray-50 rounded-2xl transition-colors cursor-pointer",
         className,
       )}
     >

frontend/src/view/pages/Dashboard/components/Fab/index.tsx

@@ -0,0 +1,32 @@
+import { PlusIcon } from "@radix-ui/react-icons";
+import { DropdownMenu, DropdownMenuItem } from "../../../../components/DropdownMenu";
+
+export function Fab() {
+  return (
+    <div className="fixed right-4 bottom-4">
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <button
+            className="bg-teal-900 w-12 h-12 rounded-full flex items-center justify-center"
+          >
+            <PlusIcon className="w-6 h-6" />
+          </button>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenuItem>
+            Nova Despesa
+          </DropdownMenuItem>
+
+          <DropdownMenuItem>
+            Nova Receita
+          </DropdownMenuItem>
+
+          <DropdownMenuItem>
+            Nova Conta
+          </DropdownMenuItem>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </div>
+  );
+}

frontend/src/view/pages/Dashboard/components/Transactions/TransactionTypeDropdown.tsx

@@ -0,0 +1,36 @@
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { TransactionsIcon } from "../../../../components/icons/TransactionsIcon";
+import { DropdownMenu } from "../../../../components/DropdownMenu";
+import { IncomeIcon } from "../../../../components/icons/IncomeIcon";
+import { ExpensesIcon } from "../../../../components/icons/ExpensesIcon";
+
+export function TransactionTypeDropdown() {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <button className="flex items-center gap-2">
+          <TransactionsIcon />
+          <span className="text-sm text-gray-800 tracking-[-0.5px] font-medium">Transações</span>
+          <ChevronDownIcon className="text-gray-900" />
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content className="w-[279px]">
+        <DropdownMenu.Item className="gap-2">
+          <IncomeIcon />
+          Receitas
+        </DropdownMenu.Item>
+
+        <DropdownMenu.Item className="gap-2">
+          <ExpensesIcon />
+          Despesas
+        </DropdownMenu.Item>
+
+        <DropdownMenu.Item className="gap-2">
+          <TransactionsIcon />
+          Transações
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}

frontend/src/view/pages/Dashboard/components/Transactions/index.tsx

@@ -1,5 +1,3 @@
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { TransactionsIcon } from "../../../../components/icons/TransactionsIcon";
 import { FilterIcon } from "../../../../components/icons/FilterIcon";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { MONTHS } from "../../../../../app/config/constants";
@@ -11,6 +9,7 @@ import { useTransactionsController } from "./useTransactionsController";
 import { cn } from "../../../../../app/utils/cn";
 import Spinner from "../../../../components/Spinner";
 import emptyStateImage from "../../../../../assets/empty-state.svg";
+import { TransactionTypeDropdown } from "./TransactionTypeDropdown";
 
 export function Transactions() {
   const { areValuesVisible, isInitialLoading, isLoading, transactions } = useTransactionsController();
@@ -29,12 +28,7 @@ export function Transactions() {
         <>
           <header>
             <div className="flex items-center justify-between">
-              <button className="flex items-center gap-2">
-                <TransactionsIcon />
-                <span className="text-sm text-gray-800 tracking-[-0.5px] font-medium">Transações</span>
-                <ChevronDownIcon className="text-gray-900" />
-              </button>
-
+              <TransactionTypeDropdown />
               <button>
                 <FilterIcon />
               </button>

frontend/src/view/pages/Dashboard/index.tsx

@@ -2,13 +2,14 @@ import { Logo } from "../../components/Logo";
 import { UserMenu } from "../../components/UserMenu";
 import { Accounts } from "./components/Accounts";
 import { DashboardProvider } from "./components/DashboardContext";
+import { Fab } from "./components/Fab";
 import { Transactions } from "./components/Transactions";
 
 export function Dashboard() {
 
   return (
     <DashboardProvider>
-      <div className="h-full w-full p-4 md:px-8 md:pb-8 md:pt-6 flex flex-col gap-4">
+      <div className="h-full w-full p-4 md:px-8 md:pb-8 md:pt-6 flex flex-col gap-4 ">
         <header className="h-12 flex items-center justify-between">
           <Logo className="h-6 text-teal-900" />
           <UserMenu />
@@ -22,6 +23,8 @@ export function Dashboard() {
             <Transactions />
           </div>
         </main>
+
+        <Fab />
       </div>
     </DashboardProvider>
   );