✨ Transaction Create: Front-end Implementation

locales/extracted/en.json

@@ -29,6 +29,8 @@
   "common.confirmDeletion": "Confirm Deletion",
   "common.copyMessage": "Copied to clipboard!",
   "common.create": "Create",
+  "common.credit": "Credit",
+  "common.debit": "Debit",
   "common.delete": "Delete",
   "common.edit": "Edit",
   "common.expand": "Expand",
@@ -41,6 +43,9 @@
   "common.metadata": "Metadata",
   "common.name": "Name",
   "common.noOptions": "No options found.",
+  "common.none": "None",
+  "common.operations": "Operations",
+  "common.optional": "Optional",
   "common.portfolio": "Portfolio",
   "common.records": "records",
   "common.remove": "Remove",
@@ -59,6 +64,7 @@
   "common.tooltipCopyText": "Click to copy",
   "common.type": "Type",
   "common.typePlaceholder": "Type...",
+  "common.value": "Value",
   "entity.account.currency": "Assets",
   "entity.account.name": "Account Name",
   "entity.address": "Address",
@@ -88,6 +94,8 @@
   "entity.portfolio.entityId": "Entity Id",
   "entity.portfolio.name": "Portfolio Name",
   "entity.product.name": "Product Name",
+  "entity.transaction.asset": "Asset",
+  "entity.transaction.value": "Value",
   "entity.user.email": "E-mail",
   "entity.user.name": "Name",
   "error.midaz.actionNotPermitted": "Error Midaz action not permitted",
@@ -116,12 +124,14 @@
   "errors.too_big.date.exact": "Date must be exactly {maximum}",
   "errors.too_big.date.inclusive": "Date must be before or equal to {maximum}",
   "errors.too_big.date.not_inclusive": "Date must be before {maximum}",
+  "errors.too_big.number.inclusive": "Field must be less than or equal to {maximum}",
   "errors.too_big.string.exact": "Field must contain exactly {maximum} {maximum, plural, =0 {characters} one {character} other {characters}}",
   "errors.too_big.string.inclusive": "Field must contain at most {maximum} {maximum, plural, =0 {characters} one {character} other {characters}}",
   "errors.too_big.string.not_inclusive": "Field must contain under {maximum} {maximum, plural, =0 {characters} one {character} other {characters}}",
   "errors.too_small.date.exact": "Date must be exactly {minimum}",
   "errors.too_small.date.inclusive": "Date must be after or equal to {minimum}",
   "errors.too_small.date.not_inclusive": "Date must be after {minimum}",
+  "errors.too_small.number.not_inclusive": "Field must be greater than {minimum}",
   "errors.too_small.string.exact": "Field must contain exactly {minimum} {minimum, plural, =0 {characters} one {character} other {characters}}",
   "errors.too_small.string.inclusive": "Field must contain at least {minimum} {minimum, plural, =0 {characters} one {character} other {characters}}",
   "errors.too_small.string.not_inclusive": "Field must contain over {minimum} {minimum, plural, =0 {characters} one {character} other {characters}}",
@@ -290,5 +300,32 @@
   "signIn.toast.error": "Invalid credentials.",
   "table.pagination.next": "Next",
   "table.pagination.previous": "Previous",
-  "tooltip.passwordInfo": "Contact the system administrator"
+  "tooltip.passwordInfo": "Contact the system administrator",
+  "transaction.create.cancel.description": "If you cancel this transaction, all filled data will be lost and cannot be recovered.",
+  "transaction.create.cancel.title": "Do you wish to cancel this transaction?",
+  "transaction.create.submit.description": "Your transaction will be executed according to the information you entered.",
+  "transaction.create.submit.title": "Create Transaction",
+  "transactions.create.button": "Create Transaction",
+  "transactions.create.field.chartOfAccounts": "Chart of accounts",
+  "transactions.create.field.chartOfAccountsGroupName": "Accounting route group",
+  "transactions.create.field.origin.placeholder": "Type ID or alias",
+  "transactions.create.metadata.accordion.description": "Fill in Value, Source and Destination to edit the Metadata.",
+  "transactions.create.operations.accordion.description": "Fill in Value, Source and Destination to edit the Operations.",
+  "transactions.create.paper.description": "Fill in the details of the Transaction you want to create.",
+  "transactions.create.review.button": "Go to Review",
+  "transactions.create.stepper.first": "Transaction Data",
+  "transactions.create.stepper.second": "Operations and Metadata",
+  "transactions.create.stepper.third": "Review",
+  "transactions.create.stepper.third.description": "Check the values ​​and parameters entered and confirm to create the transaction.",
+  "transactions.create.title": "New Transaction",
+  "transactions.destination": "Destination",
+  "transactions.errors.debit": "Total Debits do not match total Credits",
+  "transactions.field.description": "Transaction description",
+  "transactions.field.operation.description": "Operation description",
+  "transactions.metadata.title": "Transaction Metadata",
+  "transactions.operations.alert.description": "Fill in the value fields to adjust the amount transacted. Remember: the total Credits must equal the total Debits.",
+  "transactions.operations.alert.title": "Multiple origins and destinations",
+  "transactions.operations.metadata": "Operations Metadata",
+  "transactions.source": "Source",
+  "transactions.tab.create": "New Transaction"
 }

locales/extracted/pt.json

@@ -286,9 +286,46 @@
   "ledgers.accounts.showing": "Mostrando {count} {number, plural, =0 {contas} one {conta} other {contas}}.",
   "ledgers.portfolios.showing": "Mostrando {count} {number, plural, =0 {portfólios} one {portfólio} other {portfólios}}.",
   "organizations.showing": "Mostrando {count} {number, plural, =0 {organizações} one {organização} other {organizações}}.",
-  "common.itemsPerPage": "Itens por página",
+  "common.credit": "Crédito",
+  "common.debit": "Débito",
+  "common.none": "Nenhum",
+  "common.operations": "Operações",
+  "common.optional": "Opcional",
   "common.support": "Suporte",
+  "common.value": "Valor",
+  "entity.transaction.asset": "Ativo",
+  "entity.transaction.value": "Valor",
+  "errors.too_big.number.inclusive": "Campor deve ser menor ou igual a {maximum}",
+  "errors.too_small.number.not_inclusive": "Campo deve ser maior que {minimum}",
+  "transaction.create.cancel.description": "Se você cancelar esta transação, os datos preenchidos serão perdidos e não poderão ser recuperados.",
+  "transaction.create.cancel.title": "Deseja cancelar esta transação?",
+  "transaction.create.submit.description": "Sua transação será executada de acordo com as informações inseridas.",
+  "transaction.create.submit.title": "Criar Transação",
+  "transactions.create.button": "Criar Transação",
+  "transactions.create.field.chartOfAccounts": "Rota contábil",
+  "transactions.create.field.chartOfAccountsGroupName": "Grupo de rota contábil",
+  "transactions.create.field.origin.placeholder": "Digite ID ou alias",
+  "transactions.create.metadata.accordion.description": "Preencha Valor, Origem e Destino para editar os Metadados.",
+  "transactions.create.operations.accordion.description": "Preencha Valor, Origem e Destino para editar as Operações.",
+  "transactions.create.paper.description": "Preencha os dados da Transação que você deseja criar.",
+  "transactions.create.review.button": "Continuar para Revisão",
+  "transactions.create.stepper.first": "Dados da Transação",
+  "transactions.create.stepper.second": "Operações e Metadados",
+  "transactions.create.stepper.third": "Revisão",
+  "transactions.create.stepper.third.description": "Confira os valores e parâmetros inseridos e confirme para criar a transação.",
+  "transactions.create.title": "Nova Transação",
+  "transactions.destination": "Destino",
+  "transactions.errors.debit": "Total dos Débitos não bate com o total dos Créditos",
+  "transactions.field.description": "Descrição da Transação",
+  "transactions.metadata.title": "Metadados da Transação",
+  "transactions.operations.alert.description": "Preencha os campos de valor para ajustar o montante transacionado. Lembre-se: o total de Créditos deve ser igual ao total de Débitos.",
+  "transactions.operations.alert.title": "Múltiplas origens e destinos",
+  "transactions.operations.metadata": "Metadados da Operação",
+  "transactions.source": "Origem",
+  "transactions.tab.create": "Nova Transação",
+  "transactions.field.operation.description": "Descrição da Operação",
+  "common.itemsPerPage": "Itens por página",
   "ledgers.assets.count": "{count} ativos",
   "table.pagination.next": "Próxima página",
   "table.pagination.previous": "Página anterior"
-}
+}

src/app/(routes)/ledgers/[id]/transactions/create/basic-information-paper.tsx

@@ -0,0 +1,100 @@
+import { useListAssets } from '@/client/assets'
+import { InputField, SelectField } from '@/components/form'
+import { Paper } from '@/components/ui/paper'
+import { SelectItem } from '@/components/ui/select'
+import { Separator } from '@/components/ui/separator'
+import { useOrganization } from '@/context/organization-provider/organization-provider-client'
+import { Control } from 'react-hook-form'
+import { useIntl } from 'react-intl'
+import DolarSign from '/public/svg/dolar-sign.svg'
+import Image from 'next/image'
+import { useParams } from 'next/navigation'
+
+export type BasicInformationPaperProps = {
+  control: Control<any>
+}
+
+export const BasicInformationPaper = ({
+  control
+}: BasicInformationPaperProps) => {
+  const intl = useIntl()
+  const { id } = useParams<{ id: string }>()
+  const { currentOrganization } = useOrganization()
+
+  const { data: assets } = useListAssets({
+    organizationId: currentOrganization.id!,
+    ledgerId: id
+  })
+
+  return (
+    <Paper className="mb-6 flex flex-col">
+      <p className="p-6 text-sm font-medium text-shadcn-400">
+        {intl.formatMessage({
+          id: 'transactions.create.paper.description',
+          defaultMessage:
+            'Fill in the details of the Transaction you want to create.'
+        })}
+      </p>
+      <Separator orientation="horizontal" />
+      <div className="grid grid-cols-2 gap-5 p-6">
+        <InputField
+          name="description"
+          label={intl.formatMessage({
+            id: 'transactions.field.description',
+            defaultMessage: 'Transaction description'
+          })}
+          description={intl.formatMessage({
+            id: 'common.optional',
+            defaultMessage: 'Optional'
+          })}
+          control={control}
+          rows={1}
+          textArea
+        />
+        <InputField
+          name="chartOfAccountsGroupName"
+          label={intl.formatMessage({
+            id: 'transactions.create.field.chartOfAccountsGroupName',
+            defaultMessage: 'Accounting route group'
+          })}
+          description={intl.formatMessage({
+            id: 'common.optional',
+            defaultMessage: 'Optional'
+          })}
+          control={control}
+        />
+      </div>
+      <Separator orientation="horizontal" />
+      <div className="grid grid-cols-4 gap-5 p-6">
+        <div className="col-span-2">
+          <InputField
+            name="value"
+            type="number"
+            label={intl.formatMessage({
+              id: 'entity.transaction.value',
+              defaultMessage: 'Value'
+            })}
+            control={control}
+          />
+        </div>
+        <SelectField
+          name="asset"
+          label={intl.formatMessage({
+            id: 'entity.transaction.asset',
+            defaultMessage: 'Asset'
+          })}
+          control={control}
+        >
+          {assets?.items?.map((asset) => (
+            <SelectItem key={asset.code} value={asset.code}>
+              {asset.code}
+            </SelectItem>
+          ))}
+        </SelectField>
+        <div className="flex items-end justify-end">
+          <Image alt="" src={DolarSign} />
+        </div>
+      </div>
+    </Paper>
+  )
+}

src/app/(routes)/ledgers/[id]/transactions/create/layout.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { Breadcrumb } from '@/components/breadcrumb'
+import { TransactionProvider } from './transaction-form-provider'
+import { PageHeader } from '@/components/page-header'
+import { useIntl } from 'react-intl'
+
+export default function RootLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  const intl = useIntl()
+
+  return (
+    <TransactionProvider>
+      <Breadcrumb
+        paths={[
+          {
+            name: intl.formatMessage({
+              id: `settings.title`,
+              defaultMessage: 'Settings'
+            }),
+            href: '#'
+          },
+          {
+            name: intl.formatMessage({
+              id: `transactions.tab.create`,
+              defaultMessage: 'New Transaction'
+            })
+          }
+        ]}
+      />
+
+      <PageHeader.Root>
+        <PageHeader.Wrapper className="border-none">
+          <PageHeader.InfoTitle
+            title={intl.formatMessage({
+              id: 'transactions.create.title',
+              defaultMessage: 'New Transaction'
+            })}
+          />
+        </PageHeader.Wrapper>
+      </PageHeader.Root>
+
+      {children}
+    </TransactionProvider>
+  )
+}

src/app/(routes)/ledgers/[id]/transactions/create/metadata-accordion.tsx

@@ -0,0 +1,58 @@
+import { Separator } from '@/components/ui/separator'
+import {
+  PaperCollapsible,
+  PaperCollapsibleBanner,
+  PaperCollapsibleContent
+} from '@/components/transactions/primitives/paper-collapsible'
+import { MetadataField } from '@/components/form'
+import { Control } from 'react-hook-form'
+import { useIntl } from 'react-intl'
+import { Metadata } from '@/types/metadata-type'
+
+export type MetadataAccordionProps = {
+  name: string
+  values: Metadata
+  control: Control<any>
+}
+
+export const MetadataAccordion = ({
+  name,
+  values,
+  control
+}: MetadataAccordionProps) => {
+  const intl = useIntl()
+
+  return (
+    <>
+      <h6 className="mb-6 text-sm font-medium">
+        {intl.formatMessage({
+          id: 'transactions.metadata.title',
+          defaultMessage: 'Transaction Metadata'
+        })}
+      </h6>
+
+      <PaperCollapsible className="mb-32">
+        <PaperCollapsibleBanner className="flex items-center justify-between">
+          <p className="text-xs italic text-shadcn-400">
+            {intl.formatMessage(
+              {
+                id: 'organizations.organizationForm.metadataRegisterCountText',
+                defaultMessage:
+                  '{count} added {count, plural, =0 {records} one {record} other {records}}'
+              },
+              {
+                count: Object.entries(values || 0).length
+              }
+            )}
+          </p>
+        </PaperCollapsibleBanner>
+        <PaperCollapsibleContent>
+          <Separator orientation="horizontal" />
+          <div className="p-6">
+            <MetadataField name={name} control={control} />
+          </div>
+        </PaperCollapsibleContent>
+      </PaperCollapsible>
+    </>
+  )
+}