From 6c9ba1a2e726571de1f3059ab6107df73d1ace54 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Wed, 11 Dec 2024 13:38:32 -0300
Subject: [PATCH 01/14] :sparkles: feat: Implemented Stepper

---
 .../(routes)/transactions/create/stepper.tsx  | 43 ++++++++++++++
 .../transactions/primitives/stepper.tsx       | 56 +++++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 src/app/(routes)/transactions/create/stepper.tsx
 create mode 100644 src/app/(routes)/transactions/primitives/stepper.tsx

diff --git a/src/app/(routes)/transactions/create/stepper.tsx b/src/app/(routes)/transactions/create/stepper.tsx
new file mode 100644
index 00000000..5c1efbcf
--- /dev/null
+++ b/src/app/(routes)/transactions/create/stepper.tsx
@@ -0,0 +1,43 @@
+import { useIntl } from 'react-intl'
+import {
+  Stepper as PrimitiveStepper,
+  StepperItem,
+  StepperItemNumber,
+  StepperItemText
+} from '../primitives/stepper'
+
+export const Stepper = () => {
+  const intl = useIntl()
+
+  return (
+    <PrimitiveStepper>
+      <StepperItem>
+        <StepperItemNumber>1</StepperItemNumber>
+        <StepperItemText>
+          {intl.formatMessage({
+            id: 'transactions.create.stepper.first',
+            defaultMessage: 'Transaction Data'
+          })}
+        </StepperItemText>
+      </StepperItem>
+      <StepperItem>
+        <StepperItemNumber>2</StepperItemNumber>
+        <StepperItemText>
+          {intl.formatMessage({
+            id: 'transactions.create.stepper.second',
+            defaultMessage: 'Operations and Metadata'
+          })}
+        </StepperItemText>
+      </StepperItem>
+      <StepperItem>
+        <StepperItemNumber>3</StepperItemNumber>
+        <StepperItemText>
+          {intl.formatMessage({
+            id: 'transactions.create.stepper.third',
+            defaultMessage: 'Review'
+          })}
+        </StepperItemText>
+      </StepperItem>
+    </PrimitiveStepper>
+  )
+}
diff --git a/src/app/(routes)/transactions/primitives/stepper.tsx b/src/app/(routes)/transactions/primitives/stepper.tsx
new file mode 100644
index 00000000..ba1f90cb
--- /dev/null
+++ b/src/app/(routes)/transactions/primitives/stepper.tsx
@@ -0,0 +1,56 @@
+import { cn } from '@/lib/utils'
+import { forwardRef, HTMLAttributes } from 'react'
+
+export const Stepper = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex flex-col gap-4', className)} {...props} />
+))
+Stepper.displayName = 'Stepper'
+
+export type StepperItemProps = HTMLAttributes<HTMLDivElement> & {
+  active?: boolean
+}
+
+export const StepperItem = forwardRef<HTMLDivElement, StepperItemProps>(
+  ({ className, active, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-active={active}
+      className={cn('group flex flex-row items-center gap-3', className)}
+      {...props}
+    />
+  )
+)
+StepperItem.displayName = 'StepperItem'
+
+export const StepperItemNumber = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'flex h-8 w-8 items-center justify-center rounded-full border border-shadcn-400 text-sm font-medium text-shadcn-400 group-data-[active]:border-none group-data-[active]:bg-white group-data-[active]:text-neutral-600 group-data-[active]:shadow-md',
+      className
+    )}
+    {...props}
+  />
+))
+StepperItemNumber.displayName = 'StepperItemNumber'
+
+export const StepperItemText = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn(
+      'text-sm font-medium text-shadcn-400 group-data-[active]:text-neutral-600',
+      className
+    )}
+    {...props}
+  />
+))
+StepperItemText.displayName = 'StepperItemText'

From 9fdd6e945e51f855a6728e695cbea14497d8f8fa Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Wed, 11 Dec 2024 13:38:45 -0300
Subject: [PATCH 02/14] :sparkles: feat: Added description to InputField

---
 src/components/form/input-field/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/form/input-field/index.tsx b/src/components/form/input-field/index.tsx
index 6d810e9c..a97d3610 100644
--- a/src/components/form/input-field/index.tsx
+++ b/src/components/form/input-field/index.tsx
@@ -1,5 +1,6 @@
 import {
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -17,6 +18,7 @@ export type InputFieldProps = {
   tooltip?: string
   labelExtra?: ReactNode
   placeholder?: string
+  description?: ReactNode
   control: Control<any>
   disabled?: boolean
   readOnly?: boolean
@@ -29,6 +31,7 @@ export const InputField = ({
   tooltip,
   labelExtra,
   placeholder,
+  description,
   required,
   readOnly,
   ...others
@@ -56,6 +59,7 @@ export const InputField = ({
             />
           </FormControl>
           <FormMessage />
+          {description && <FormDescription>{description}</FormDescription>}
         </FormItem>
       )}
     />

From 4c501e48501fb1c0550eae576588df2f5592c454 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Wed, 11 Dec 2024 14:24:24 -0300
Subject: [PATCH 03/14] :sparkles: feat: Added SVGs

---
 public/svg/arrow-right-circle.svg | 4 ++++
 public/svg/dolar-sign.svg         | 3 +++
 2 files changed, 7 insertions(+)
 create mode 100644 public/svg/arrow-right-circle.svg
 create mode 100644 public/svg/dolar-sign.svg

diff --git a/public/svg/arrow-right-circle.svg b/public/svg/arrow-right-circle.svg
new file mode 100644
index 00000000..d7733fe0
--- /dev/null
+++ b/public/svg/arrow-right-circle.svg
@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="54" height="54" rx="27" stroke="#D4D4D8" stroke-width="2"/>
+<path d="M18.6667 28H37.3334M37.3334 28L28 18.6666M37.3334 28L28 37.3333" stroke="#A1A1AA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/svg/dolar-sign.svg b/public/svg/dolar-sign.svg
new file mode 100644
index 00000000..88edf53a
--- /dev/null
+++ b/public/svg/dolar-sign.svg
@@ -0,0 +1,3 @@
+<svg width="59" height="59" viewBox="0 0 59 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.5 4.91663V54.0833M41.7917 12.2916H23.3542C21.0722 12.2916 18.8837 13.1981 17.2701 14.8117C15.6565 16.4253 14.75 18.6138 14.75 20.8958C14.75 23.1778 15.6565 25.3663 17.2701 26.9799C18.8837 28.5935 21.0722 29.5 23.3542 29.5H35.6458C37.9278 29.5 40.1163 30.4065 41.7299 32.0201C43.3435 33.6337 44.25 35.8222 44.25 38.1041C44.25 40.3861 43.3435 42.5746 41.7299 44.1882C40.1163 45.8018 37.9278 46.7083 35.6458 46.7083H14.75" stroke="#D4D4D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From d6219794939f48c0af9edb76488711138bf29cdc Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Tue, 17 Dec 2024 14:43:23 -0300
Subject: [PATCH 04/14] :sparkles: feat: Added new zod messages

---
 src/lib/zod/messages.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/lib/zod/messages.ts b/src/lib/zod/messages.ts
index bb55e1a0..3a352100 100644
--- a/src/lib/zod/messages.ts
+++ b/src/lib/zod/messages.ts
@@ -26,6 +26,10 @@ const messages = defineMessages({
     defaultMessage:
       'Field must contain over {minimum} {minimum, plural, =0 {characters} one {character} other {characters}}'
   },
+  too_small_number_not_inclusive: {
+    id: 'errors.too_small.number.not_inclusive',
+    defaultMessage: 'Field must be greater than {minimum}'
+  },
   too_small_date_exact: {
     id: 'errors.too_small.date.exact',
     defaultMessage: 'Date must be exactly {minimum}'
@@ -55,6 +59,10 @@ const messages = defineMessages({
     defaultMessage:
       'Field must contain under {maximum} {maximum, plural, =0 {characters} one {character} other {characters}}'
   },
+  too_big_number_inclusive: {
+    id: 'errors.too_big.number.inclusive',
+    defaultMessage: 'Field must be less than or equal to {maximum}'
+  },
   too_big_date_exact: {
     id: 'errors.too_big.date.exact',
     defaultMessage: 'Date must be exactly {maximum}'

From f0b137ff1848db1b51034e2fe06f70e620f87891 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Tue, 17 Dec 2024 14:43:41 -0300
Subject: [PATCH 05/14] :sparkles: feat: New informative variant for Alert

---
 src/components/ui/alert/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ui/alert/index.tsx b/src/components/ui/alert/index.tsx
index 6fd7a005..ba15db5e 100644
--- a/src/components/ui/alert/index.tsx
+++ b/src/components/ui/alert/index.tsx
@@ -9,6 +9,8 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: 'bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50',
+        informative:
+          'bg-[#EFF6FF] border-opacity-50 border-[#2563eb] text-[#1E40AF] dark:bg-blue-900 dark:text-blue-50 [&>svg]:text-blue-600',
         destructive:
           'border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900'
       }

From 5334ccdad3f557a2f62a96d0ecafe4946c660a6a Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Tue, 17 Dec 2024 14:44:05 -0300
Subject: [PATCH 06/14] :sparkles: feat: Implemented Page Footer

---
 src/components/page-footer/index.tsx | 50 ++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/components/page-footer/index.tsx

diff --git a/src/components/page-footer/index.tsx b/src/components/page-footer/index.tsx
new file mode 100644
index 00000000..13c2d523
--- /dev/null
+++ b/src/components/page-footer/index.tsx
@@ -0,0 +1,50 @@
+import { forwardRef, HTMLAttributes } from 'react'
+import { cn } from '@/lib/utils'
+
+export type PageFooterProps = HTMLAttributes<HTMLDivElement> & {
+  open?: boolean
+  thumb?: boolean
+}
+
+export const PageFooter = forwardRef<HTMLDivElement, PageFooterProps>(
+  ({ className, open = true, thumb = true, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'fixed inset-x-0 bottom-0 z-50 ml-[136px] mr-16 flex transform flex-col rounded-t-2xl bg-white shadow-drawer transition-transform',
+        open ? 'translate-y-0' : 'translate-y-full',
+        !true && 'ml-[315px]',
+        'duration-300 ease-in-out'
+      )}
+      data-open={open}
+      aria-hidden={!open}
+      {...props}
+    >
+      {thumb && <PageFooterThumb />}
+      <div className="flex flex-row justify-between px-16 pb-8 pt-6">
+        {children}
+      </div>
+    </div>
+  )
+)
+PageFooter.displayName = 'PageFooter'
+
+export const PageFooterThumb = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('mx-auto mt-2 h-2 w-24 rounded-full bg-zinc-100', className)}
+    {...props}
+  />
+))
+PageFooterThumb.displayName = 'PageFooterThumb'
+
+export const PageFooterSection = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex flex-row gap-3', className)} {...props} />
+))
+PageFooterSection.displayName = 'PageFooterSection'

From 4ebdf1188395c5d08d31da82f65c8b9f639e28b3 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Tue, 17 Dec 2024 14:51:44 -0300
Subject: [PATCH 07/14] :sparkles: feat: Added more SVGs

---
 public/svg/arrow-right-left-circle.svg  | 4 ++++
 public/svg/check-check-circle-green.svg | 4 ++++
 public/svg/clock-circle.svg             | 4 ++++
 public/svg/x-circle.svg                 | 4 ++++
 4 files changed, 16 insertions(+)
 create mode 100644 public/svg/arrow-right-left-circle.svg
 create mode 100644 public/svg/check-check-circle-green.svg
 create mode 100644 public/svg/clock-circle.svg
 create mode 100644 public/svg/x-circle.svg

diff --git a/public/svg/arrow-right-left-circle.svg b/public/svg/arrow-right-left-circle.svg
new file mode 100644
index 00000000..298a46e3
--- /dev/null
+++ b/public/svg/arrow-right-left-circle.svg
@@ -0,0 +1,4 @@
+<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="39" cy="39" r="38.5" stroke="#A1A1AA"/>
+<path d="M31 21L23 29M23 29L31 37M23 29H55M47 57L55 49M55 49L47 41M55 49H23" stroke="#52525B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/svg/check-check-circle-green.svg b/public/svg/check-check-circle-green.svg
new file mode 100644
index 00000000..c6f036ca
--- /dev/null
+++ b/public/svg/check-check-circle-green.svg
@@ -0,0 +1,4 @@
+<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="39" cy="39" r="39" fill="#F0FDF4"/>
+<path d="M51 27L29 49L19 39M59 35L44 50L41 47" stroke="#16A34A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/svg/clock-circle.svg b/public/svg/clock-circle.svg
new file mode 100644
index 00000000..2901f1cc
--- /dev/null
+++ b/public/svg/clock-circle.svg
@@ -0,0 +1,4 @@
+<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="39" cy="39" r="38.5" fill="white" stroke="#F4F4F5"/>
+<path d="M39 27V39L47 43M59 39C59 50.0457 50.0457 59 39 59C27.9543 59 19 50.0457 19 39C19 27.9543 27.9543 19 39 19C50.0457 19 59 27.9543 59 39Z" stroke="#A1A1AA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/svg/x-circle.svg b/public/svg/x-circle.svg
new file mode 100644
index 00000000..84466912
--- /dev/null
+++ b/public/svg/x-circle.svg
@@ -0,0 +1,4 @@
+<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="39" cy="39.0001" r="39" fill="#F4F4F5"/>
+<path d="M51 27L27 51M27 27L51 51" stroke="#52525B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From e95d965224cbcb3a885675012c7983e27a3da91c Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Tue, 17 Dec 2024 16:10:44 -0300
Subject: [PATCH 08/14] :boom: fix: Adjusted application scroll behavior

---
 src/app/(routes)/layout.tsx |  8 +++++---
 src/app/app.tsx             | 30 ++++++++++++++----------------
 src/app/globals.css         |  6 +++++-
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/app/(routes)/layout.tsx b/src/app/(routes)/layout.tsx
index 7964dd8d..08cd5770 100644
--- a/src/app/(routes)/layout.tsx
+++ b/src/app/(routes)/layout.tsx
@@ -24,12 +24,14 @@ export default async function RootLayout({
     <OrganizationProvider>
       <PermissionProvider>
         <SidebarProvider>
-          <div className="flex min-h-screen w-full bg-background text-foreground">
+          <div className="flex h-full min-h-screen w-full overflow-y-auto bg-background text-foreground">
             <Sidebar />
-            <div className="flex min-h-full w-full flex-col bg-shadcn-100">
+            <div className="flex min-h-full w-full flex-col overflow-y-auto bg-shadcn-100">
               <Header />
 
-              <div className="h-full w-full px-16 pb-16 pt-6">{children}</div>
+              <div className="h-full w-full overflow-y-auto px-16 pb-16 pt-6">
+                {children}
+              </div>
             </div>
           </div>
         </SidebarProvider>
diff --git a/src/app/app.tsx b/src/app/app.tsx
index 8a70c6c1..0beee3ba 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -9,21 +9,19 @@ import ZodSchemaProvider from '@/lib/zod/zod-schema-provider'
 
 export default async function App({ children }: { children: React.ReactNode }) {
   return (
-    <div>
-      <QueryProvider>
-        <LocalizationProvider>
-          <ThemeProvider>
-            <ZodSchemaProvider>
-              <div>{children}</div>
-              <Toaster
-                position="top-right"
-                containerStyle={{ top: 60, right: 60 }}
-              />
-            </ZodSchemaProvider>
-          </ThemeProvider>
-        </LocalizationProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
-      </QueryProvider>
-    </div>
+    <QueryProvider>
+      <LocalizationProvider>
+        <ThemeProvider>
+          <ZodSchemaProvider>
+            {children}
+            <Toaster
+              position="top-right"
+              containerStyle={{ top: 60, right: 60 }}
+            />
+          </ZodSchemaProvider>
+        </ThemeProvider>
+      </LocalizationProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryProvider>
   )
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 7113fe48..765ba9a8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -74,7 +74,11 @@
     @apply border-border;
   }
 
+  html {
+    @apply h-full overflow-y-auto;
+  }
+
   body {
-    @apply bg-background text-foreground;
+    @apply h-full overflow-y-auto bg-background text-foreground;
   }
 }

From 272cec9c05da00bf86025967709c04deb90c1422 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Tue, 17 Dec 2024 16:16:38 -0300
Subject: [PATCH 09/14] :sparkles: feat: Added a crude Textarea implementation

---
 src/components/form/input-field/index.tsx | 26 +++++++++++++++++------
 src/components/ui/textarea/index.tsx      | 22 +++++++++++++++++++
 2 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ui/textarea/index.tsx

diff --git a/src/components/form/input-field/index.tsx b/src/components/form/input-field/index.tsx
index a97d3610..9e5d021f 100644
--- a/src/components/form/input-field/index.tsx
+++ b/src/components/form/input-field/index.tsx
@@ -8,6 +8,7 @@ import {
   FormTooltip
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
 import { HTMLInputTypeAttribute, ReactNode } from 'react'
 import { Control } from 'react-hook-form'
 
@@ -22,6 +23,8 @@ export type InputFieldProps = {
   control: Control<any>
   disabled?: boolean
   readOnly?: boolean
+  rows?: number
+  textArea?: boolean
   required?: boolean
 }
 
@@ -34,6 +37,8 @@ export const InputField = ({
   description,
   required,
   readOnly,
+  rows,
+  textArea,
   ...others
 }: InputFieldProps) => {
   return (
@@ -51,12 +56,21 @@ export const InputField = ({
             </FormLabel>
           )}
           <FormControl>
-            <Input
-              type={type}
-              placeholder={placeholder}
-              readOnly={readOnly}
-              {...field}
-            />
+            {textArea ? (
+              <Textarea
+                placeholder={placeholder}
+                readOnly={readOnly}
+                rows={rows}
+                {...field}
+              />
+            ) : (
+              <Input
+                type={type}
+                placeholder={placeholder}
+                readOnly={readOnly}
+                {...field}
+              />
+            )}
           </FormControl>
           <FormMessage />
           {description && <FormDescription>{description}</FormDescription>}
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx
new file mode 100644
index 00000000..2a2113dc
--- /dev/null
+++ b/src/components/ui/textarea/index.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<'textarea'>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'flex w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = 'Textarea'
+
+export { Textarea }

From d9b104fab45c1f8a5672b597ee01b5ee1e9dfb49 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Tue, 17 Dec 2024 16:17:50 -0300
Subject: [PATCH 10/14] :sparkles: feat: Added transactions schemas

---
 src/schema/transactions.ts | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/schema/transactions.ts

diff --git a/src/schema/transactions.ts b/src/schema/transactions.ts
new file mode 100644
index 00000000..760fa896
--- /dev/null
+++ b/src/schema/transactions.ts
@@ -0,0 +1,35 @@
+import { z } from 'zod'
+import { metadata } from './metadata'
+import { assets } from './assets'
+
+const description = z.string().max(1024)
+
+const chartOfAccounts = z.string().max(255)
+
+const value = z.coerce
+  .number()
+  .positive()
+  .max(1000 * 1000 * 1000 * 1000)
+
+const scale = z.number().positive().max(1000)
+
+const account = z.string().min(1).max(255)
+
+const remaining = z.string().min(1).max(255)
+
+const asset = assets.code
+
+const source = {
+  account,
+  remaining
+}
+
+export const transaction = {
+  value,
+  asset,
+  scale,
+  description,
+  chartOfAccounts,
+  source,
+  metadata
+}

From aafeba8e2b8ce11a86bd87f35ec8776a4d84ca7b Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Tue, 17 Dec 2024 16:32:20 -0300
Subject: [PATCH 11/14] :sparkles: feat: Added Textarea stories

---
 src/components/ui/textarea/textarea.mdx       | 14 ++++++++
 .../ui/textarea/textarea.stories.tsx          | 35 +++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 src/components/ui/textarea/textarea.mdx
 create mode 100644 src/components/ui/textarea/textarea.stories.tsx

diff --git a/src/components/ui/textarea/textarea.mdx b/src/components/ui/textarea/textarea.mdx
new file mode 100644
index 00000000..2940bca2
--- /dev/null
+++ b/src/components/ui/textarea/textarea.mdx
@@ -0,0 +1,14 @@
+import { Meta, Controls, Primary, Canvas } from '@storybook/blocks'
+import * as Story from './textarea.stories'
+
+<Meta of={Story} />
+
+# Textarea
+
+Displays a form textarea or a component that looks like a textarea.
+
+### Default
+
+<Canvas of={Story.Default} />
+
+<Controls />
diff --git a/src/components/ui/textarea/textarea.stories.tsx b/src/components/ui/textarea/textarea.stories.tsx
new file mode 100644
index 00000000..66e40cd0
--- /dev/null
+++ b/src/components/ui/textarea/textarea.stories.tsx
@@ -0,0 +1,35 @@
+import { ComponentProps } from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Textarea } from '.'
+import { FormProvider, useForm } from 'react-hook-form'
+
+const meta: Meta<ComponentProps<'textarea'>> = {
+  title: 'Primitives/Textarea',
+  component: Textarea,
+  argTypes: {
+    disabled: {
+      type: 'boolean',
+      description: 'If the input is disabled'
+    },
+    className: {
+      type: 'string',
+      description: "The input's class"
+    }
+  }
+}
+
+export default meta
+
+export const Default: StoryObj<ComponentProps<'textarea'>> = {
+  args: {
+    placeholder: 'Textarea...'
+  },
+  render: (args) => {
+    const form = useForm()
+    return (
+      <FormProvider {...form}>
+        <Textarea {...args} />
+      </FormProvider>
+    )
+  }
+}

From 7f9c66eb307b481844cfde5e9b682adfece62fa0 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Wed, 18 Dec 2024 11:06:45 -0300
Subject: [PATCH 12/14] :recycle: refactor: New functionality to Stepper

---
 .../(routes)/transactions/create/stepper.tsx  | 35 +++++++++++-------
 .../transactions/primitives/stepper.tsx       | 36 ++++++++++++++-----
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/app/(routes)/transactions/create/stepper.tsx b/src/app/(routes)/transactions/create/stepper.tsx
index 5c1efbcf..f0708cba 100644
--- a/src/app/(routes)/transactions/create/stepper.tsx
+++ b/src/app/(routes)/transactions/create/stepper.tsx
@@ -6,37 +6,46 @@ import {
   StepperItemText
 } from '../primitives/stepper'
 
-export const Stepper = () => {
+export type StepperProps = {
+  step?: number
+}
+
+export const Stepper = ({ step = 0 }: StepperProps) => {
   const intl = useIntl()
 
   return (
     <PrimitiveStepper>
-      <StepperItem>
+      <StepperItem active={step === 0}>
         <StepperItemNumber>1</StepperItemNumber>
-        <StepperItemText>
-          {intl.formatMessage({
+        <StepperItemText
+          title={intl.formatMessage({
             id: 'transactions.create.stepper.first',
             defaultMessage: 'Transaction Data'
           })}
-        </StepperItemText>
+        />
       </StepperItem>
-      <StepperItem>
+      <StepperItem active={step === 1}>
         <StepperItemNumber>2</StepperItemNumber>
-        <StepperItemText>
-          {intl.formatMessage({
+        <StepperItemText
+          title={intl.formatMessage({
             id: 'transactions.create.stepper.second',
             defaultMessage: 'Operations and Metadata'
           })}
-        </StepperItemText>
+        />
       </StepperItem>
-      <StepperItem>
+      <StepperItem active={step === 2}>
         <StepperItemNumber>3</StepperItemNumber>
-        <StepperItemText>
-          {intl.formatMessage({
+        <StepperItemText
+          title={intl.formatMessage({
             id: 'transactions.create.stepper.third',
             defaultMessage: 'Review'
           })}
-        </StepperItemText>
+          description={intl.formatMessage({
+            id: 'transactions.create.stepper.third.description',
+            defaultMessage:
+              'Check the values ​​and parameters entered and confirm to create the transaction.'
+          })}
+        />
       </StepperItem>
     </PrimitiveStepper>
   )
diff --git a/src/app/(routes)/transactions/primitives/stepper.tsx b/src/app/(routes)/transactions/primitives/stepper.tsx
index ba1f90cb..e8c60f38 100644
--- a/src/app/(routes)/transactions/primitives/stepper.tsx
+++ b/src/app/(routes)/transactions/primitives/stepper.tsx
@@ -1,5 +1,5 @@
 import { cn } from '@/lib/utils'
-import { forwardRef, HTMLAttributes } from 'react'
+import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export const Stepper = forwardRef<
   HTMLDivElement,
@@ -18,7 +18,7 @@ export const StepperItem = forwardRef<HTMLDivElement, StepperItemProps>(
     <div
       ref={ref}
       data-active={active}
-      className={cn('group flex flex-row items-center gap-3', className)}
+      className={cn('group flex flex-row gap-3', className)}
       {...props}
     />
   )
@@ -32,7 +32,7 @@ export const StepperItemNumber = forwardRef<
   <div
     ref={ref}
     className={cn(
-      'flex h-8 w-8 items-center justify-center rounded-full border border-shadcn-400 text-sm font-medium text-shadcn-400 group-data-[active]:border-none group-data-[active]:bg-white group-data-[active]:text-neutral-600 group-data-[active]:shadow-md',
+      'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border border-shadcn-400 text-sm font-medium text-shadcn-400 group-data-[active=true]:border-none group-data-[active=true]:bg-white group-data-[active=true]:text-neutral-600 group-data-[active=true]:shadow-md',
       className
     )}
     {...props}
@@ -40,17 +40,37 @@ export const StepperItemNumber = forwardRef<
 ))
 StepperItemNumber.displayName = 'StepperItemNumber'
 
+export type StepperItemTextProps = HTMLAttributes<HTMLDivElement> & {
+  title: string
+  description?: string
+}
+
 export const StepperItemText = forwardRef<
   HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
+  StepperItemTextProps
+>(({ className, title, description, ...props }, ref) => (
+  <div
     ref={ref}
     className={cn(
-      'text-sm font-medium text-shadcn-400 group-data-[active]:text-neutral-600',
+      'flex flex-col text-sm font-medium text-shadcn-400 group-data-[active=true]:text-neutral-600',
       className
     )}
     {...props}
-  />
+  >
+    <div className="flex h-8 items-center">
+      <p>{title}</p>
+    </div>
+    {description && (
+      <p className="text-xs group-data-[active=false]:hidden">{description}</p>
+    )}
+  </div>
 ))
 StepperItemText.displayName = 'StepperItemText'
+
+export type StepperControlProps = PropsWithChildren & {
+  active?: boolean
+}
+
+export const StepperContent = ({ active, children }: StepperControlProps) => {
+  return active ? <>{children}</> : null
+}

From 0bab76d46cd38097a3302eb198e78dba0c5cac06 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Wed, 18 Dec 2024 11:07:24 -0300
Subject: [PATCH 13/14] :sparkles: feat: Paper Collapsible helper component

---
 .../primitives/paper-collapsible.tsx          | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/app/(routes)/transactions/primitives/paper-collapsible.tsx

diff --git a/src/app/(routes)/transactions/primitives/paper-collapsible.tsx b/src/app/(routes)/transactions/primitives/paper-collapsible.tsx
new file mode 100644
index 00000000..2267c74a
--- /dev/null
+++ b/src/app/(routes)/transactions/primitives/paper-collapsible.tsx
@@ -0,0 +1,55 @@
+import { ElementRef, forwardRef, HTMLAttributes } from 'react'
+import { cn } from '@/lib/utils'
+import {
+  CollapsibleProps,
+  CollapsibleTriggerProps
+} from '@radix-ui/react-collapsible'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@/components/ui/collapsible'
+import { Paper } from '@/components/ui/paper'
+import { ChevronDown } from 'lucide-react'
+
+export type PaperCollapsibleProps = CollapsibleProps
+
+export const PaperCollapsible = forwardRef<
+  ElementRef<typeof Collapsible>,
+  PaperCollapsibleProps
+>(({ className, children, ...props }, ref) => (
+  <Collapsible ref={ref} className="group/paper-collapsible" {...props}>
+    <Paper className={cn('flex flex-col', className)}>{children}</Paper>
+  </Collapsible>
+))
+PaperCollapsible.displayName = 'PaperCollapsible'
+
+export const PaperCollapsibleBanner = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
+  <div ref={ref} className={cn('flex flex-row p-6', className)} {...props}>
+    <div className="flex flex-grow flex-col">{children}</div>
+    <PaperCollapsibleTrigger />
+  </div>
+))
+PaperCollapsibleBanner.displayName = 'PaperCollapsibleBanner'
+
+export const PaperCollapsibleTrigger = forwardRef<
+  ElementRef<typeof CollapsibleTrigger>,
+  CollapsibleTriggerProps
+>(({ className, children, ...props }, ref) => (
+  <CollapsibleTrigger
+    ref={ref}
+    className={cn(
+      'transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="shrink-0 transition-transform duration-200" />
+  </CollapsibleTrigger>
+))
+PaperCollapsibleTrigger.displayName = 'PaperCollapsibleTrigger'
+
+export const PaperCollapsibleContent = CollapsibleContent

From fea5c2c3b8f988d3b748ae42510121fd8387bad4 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Wed, 18 Dec 2024 11:08:13 -0300
Subject: [PATCH 14/14] :sparkles: feat: OperationEmptyAccordion

---
 .../create/operation-empty-accordion.tsx       | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/app/(routes)/transactions/create/operation-empty-accordion.tsx

diff --git a/src/app/(routes)/transactions/create/operation-empty-accordion.tsx b/src/app/(routes)/transactions/create/operation-empty-accordion.tsx
new file mode 100644
index 00000000..0d66dd1a
--- /dev/null
+++ b/src/app/(routes)/transactions/create/operation-empty-accordion.tsx
@@ -0,0 +1,18 @@
+export type OperationEmptyAccordionProps = {
+  title: string
+  description?: string
+}
+
+export const OperationEmptyAccordion = ({
+  title,
+  description
+}: OperationEmptyAccordionProps) => {
+  return (
+    <div className="mb-6 flex flex-row rounded-xl border border-dashed border-zinc-300 p-6">
+      <div className="flex flex-col gap-2">
+        <p className="text-sm font-medium">{title}</p>
+        <p className="text-sm font-medium text-shadcn-400">{description}</p>
+      </div>
+    </div>
+  )
+}