From ad766b9fdd87b3ad0e7cf09b4fa54617f2a19140 Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Thu, 19 Dec 2024 11:06:35 -0300
Subject: [PATCH] :sparkles: feat: Main pages

---
 .../ledgers/[id]/transactions/create/page.tsx | 205 ++++++++++++++++
 .../[id]/transactions/create/review/page.tsx  | 229 ++++++++++++++++++
 src/app/(routes)/transactions/create/page.tsx |   7 -
 3 files changed, 434 insertions(+), 7 deletions(-)
 create mode 100644 src/app/(routes)/ledgers/[id]/transactions/create/page.tsx
 create mode 100644 src/app/(routes)/ledgers/[id]/transactions/create/review/page.tsx
 delete mode 100644 src/app/(routes)/transactions/create/page.tsx

diff --git a/src/app/(routes)/ledgers/[id]/transactions/create/page.tsx b/src/app/(routes)/ledgers/[id]/transactions/create/page.tsx
new file mode 100644
index 00000000..04faa5d4
--- /dev/null
+++ b/src/app/(routes)/ledgers/[id]/transactions/create/page.tsx
@@ -0,0 +1,205 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Form } from '@/components/ui/form'
+import { LoadingButton } from '@/components/ui/loading-button'
+import { ArrowRight, Info } from 'lucide-react'
+import { useIntl } from 'react-intl'
+import { Stepper } from './stepper'
+import { PageFooter, PageFooterSection } from '@/components/page-footer'
+import Image from 'next/image'
+import {
+  OperationAccordion,
+  OperationEmptyAccordion
+} from './operation-accordion'
+import { OperationSourceField } from './operation-source-field'
+import { useTransactionForm } from './provider'
+import { StepperContent } from '@/components/transactions/primitives/stepper'
+import { MetadataAccordion } from './metadata-accordion'
+import ArrowRightCircle from '/public/svg/arrow-right-circle.svg'
+import { BasicInformationPaper } from './basic-information-paper'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { useRouter } from 'next/navigation'
+import { useConfirmDialog } from '@/components/confirmation-dialog/use-confirm-dialog'
+import ConfirmationDialog from '@/components/confirmation-dialog'
+
+export default function CreateTransactionPage() {
+  const intl = useIntl()
+  const router = useRouter()
+
+  const {
+    form,
+    currentStep,
+    multipleSources,
+    values,
+    addSource,
+    addDestination,
+    handleReview
+  } = useTransactionForm()
+
+  const { handleDialogOpen, dialogProps } = useConfirmDialog({
+    onConfirm: () => router.push('/transactions')
+  })
+  console.log(form.getValues(), form.formState.errors)
+  return (
+    <>
+      <ConfirmationDialog
+        title={intl.formatMessage({
+          id: 'transaction.create.cancel.title',
+          defaultMessage: 'Do you wish to cancel this transaction?'
+        })}
+        description={intl.formatMessage({
+          id: 'transaction.create.cancel.description',
+          defaultMessage:
+            'If you cancel this transaction, all filled data will be lost and cannot be recovered.'
+        })}
+        {...dialogProps}
+      />
+
+      <Form {...form}>
+        <div className="grid grid-cols-3">
+          <div className="col-span-2">
+            <BasicInformationPaper control={form.control} />
+
+            <div className="mb-10 flex flex-row items-center gap-3">
+              <OperationSourceField
+                name="source"
+                label={intl.formatMessage({
+                  id: 'transactions.source',
+                  defaultMessage: 'Source'
+                })}
+                values={values.source}
+                onSubmit={addSource}
+                control={form.control}
+              />
+              <Image alt="" src={ArrowRightCircle} />
+              <OperationSourceField
+                name="destination"
+                label={intl.formatMessage({
+                  id: 'transactions.destination',
+                  defaultMessage: 'Destination'
+                })}
+                values={values.destination}
+                onSubmit={addDestination}
+                control={form.control}
+              />
+            </div>
+
+            <StepperContent active={currentStep === 0}>
+              <OperationEmptyAccordion
+                title={intl.formatMessage({
+                  id: 'common.operations',
+                  defaultMessage: 'Operations'
+                })}
+                description={intl.formatMessage({
+                  id: 'transactions.create.operations.accordion.description',
+                  defaultMessage:
+                    'Fill in Value, Source and Destination to edit the Operations.'
+                })}
+              />
+
+              <OperationEmptyAccordion
+                title={intl.formatMessage({
+                  id: 'common.metadata',
+                  defaultMessage: 'Metadata'
+                })}
+                description={intl.formatMessage({
+                  id: 'transactions.create.operations.accordion.description',
+                  defaultMessage:
+                    'Fill in Value, Source and Destination to edit the Metadata.'
+                })}
+              />
+            </StepperContent>
+
+            <StepperContent active={currentStep === 1}>
+              <h6 className="mb-6 text-sm font-medium">
+                {intl.formatMessage({
+                  id: 'common.operations',
+                  defaultMessage: 'Operations'
+                })}
+              </h6>
+
+              {multipleSources && (
+                <Alert className="mb-6" variant="informative">
+                  <Info className="h-4 w-4" />
+                  <AlertTitle>
+                    {intl.formatMessage({
+                      id: 'transactions.operations.alert.title',
+                      defaultMessage: 'Multiple origins and destinations'
+                    })}
+                  </AlertTitle>
+                  <AlertDescription>
+                    {intl.formatMessage({
+                      id: 'transactions.operations.alert.description',
+                      defaultMessage:
+                        'Fill in the value fields to adjust the amount transacted. Remember: the total Credits must equal the total Debits.'
+                    })}
+                  </AlertDescription>
+                </Alert>
+              )}
+
+              <div className="mb-8">
+                {values.source?.map((source, index) => (
+                  <OperationAccordion
+                    key={index}
+                    name={`source.${index}`}
+                    asset={values.asset}
+                    values={source}
+                    valueEditable={values.source.length > 1}
+                    control={form.control}
+                  />
+                ))}
+                {values.destination?.map((destination, index) => (
+                  <OperationAccordion
+                    key={index}
+                    type="credit"
+                    name={`destination.${index}`}
+                    asset={values.asset}
+                    values={destination}
+                    valueEditable={values.destination.length > 1}
+                    control={form.control}
+                  />
+                ))}
+              </div>
+
+              <MetadataAccordion
+                name="metadata"
+                values={values.metadata ?? {}}
+                control={form.control}
+              />
+            </StepperContent>
+          </div>
+
+          <div className="col-span-1">
+            <div className="sticky top-12 ml-12 mt-4">
+              <Stepper step={currentStep} />
+            </div>
+          </div>
+        </div>
+
+        <PageFooter open={currentStep > 0}>
+          <PageFooterSection>
+            <Button variant="outline" onClick={() => handleDialogOpen('')}>
+              {intl.formatMessage({
+                id: 'common.cancel',
+                defaultMessage: 'Cancel'
+              })}
+            </Button>
+          </PageFooterSection>
+          <PageFooterSection>
+            <LoadingButton
+              icon={<ArrowRight />}
+              iconPlacement="end"
+              onClick={form.handleSubmit(handleReview)}
+            >
+              {intl.formatMessage({
+                id: 'transactions.create.review.button',
+                defaultMessage: 'Go to Review'
+              })}
+            </LoadingButton>
+          </PageFooterSection>
+        </PageFooter>
+      </Form>
+    </>
+  )
+}
diff --git a/src/app/(routes)/ledgers/[id]/transactions/create/review/page.tsx b/src/app/(routes)/ledgers/[id]/transactions/create/review/page.tsx
new file mode 100644
index 00000000..1e33d7c8
--- /dev/null
+++ b/src/app/(routes)/ledgers/[id]/transactions/create/review/page.tsx
@@ -0,0 +1,229 @@
+'use client'
+
+import { SendHorizonal } from 'lucide-react'
+import { useTransactionForm } from '../provider'
+import { Stepper } from '../stepper'
+import { Separator } from '@/components/ui/separator'
+import { PageFooter, PageFooterSection } from '@/components/page-footer'
+import { Button } from '@/components/ui/button'
+import { LoadingButton } from '@/components/ui/loading-button'
+import { useIntl } from 'react-intl'
+import { useConfirmDialog } from '@/components/confirmation-dialog/use-confirm-dialog'
+import ConfirmationDialog from '@/components/confirmation-dialog'
+import { useParams, useRouter } from 'next/navigation'
+import {
+  TransactionReceipt,
+  TransactionReceiptDescription,
+  TransactionReceiptItem,
+  TransactionReceiptOperation,
+  TransactionReceiptSubjects,
+  TransactionReceiptTicket,
+  TransactionReceiptValue
+} from '@/components/transactions/primitives/transaction-receipt'
+import ArrowRightLeftCircle from '/public/svg/arrow-right-left-circle.svg'
+import Image from 'next/image'
+import { isNil } from 'lodash'
+import { useCreateTransaction } from '@/client/transactions'
+import { useOrganization } from '@/context/organization-provider/organization-provider-client'
+
+export default function CreateTransactionReviewPage() {
+  const intl = useIntl()
+  const router = useRouter()
+
+  const { id } = useParams<{ id: string }>()
+
+  const { currentOrganization } = useOrganization()
+
+  const { mutate: createTransaction, isPending: createLoading } =
+    useCreateTransaction({
+      organizationId: currentOrganization.id!,
+      ledgerId: id,
+      onSuccess: () => router.push('/transactions')
+    })
+
+  const { values, currentStep, handleBack } = useTransactionForm()
+
+  const { handleDialogOpen: handleCancelOpen, dialogProps: cancelDialogProps } =
+    useConfirmDialog({
+      onConfirm: () => router.push('/transactions')
+    })
+
+  const { handleDialogOpen: handleSubmitOpen, dialogProps: submitDialogProps } =
+    useConfirmDialog({
+      onConfirm: () => createTransaction(values)
+    })
+
+  return (
+    <>
+      <ConfirmationDialog
+        title={intl.formatMessage({
+          id: 'transaction.create.cancel.title',
+          defaultMessage: 'Do you wish to cancel this transaction?'
+        })}
+        description={intl.formatMessage({
+          id: 'transaction.create.cancel.description',
+          defaultMessage:
+            'If you cancel this transaction, all filled data will be lost and cannot be recovered.'
+        })}
+        {...cancelDialogProps}
+      />
+
+      <ConfirmationDialog
+        title={intl.formatMessage({
+          id: 'transaction.create.submit.title',
+          defaultMessage: 'Create Transaction'
+        })}
+        description={intl.formatMessage({
+          id: 'transaction.create.submit.description',
+          defaultMessage:
+            'Your transaction will be executed according to the information you entered.'
+        })}
+        loading={createLoading}
+        {...submitDialogProps}
+      />
+
+      <div className="mb-12 grid grid-cols-4">
+        <div className="sticky top-12 mr-12">
+          <Stepper step={currentStep} />
+        </div>
+
+        <div className="col-span-2 col-end-4">
+          <TransactionReceipt className="mb-2">
+            <Image alt="" src={ArrowRightLeftCircle} />
+            <TransactionReceiptValue
+              asset={values.asset}
+              value={values.value}
+            />
+            <p className="font-semibold uppercase text-[#282A31]">Manual</p>
+            <TransactionReceiptSubjects
+              sources={values.source?.map((source) => source.account)}
+              destinations={values.destination?.map((source) => source.account)}
+            />
+            {values.description && (
+              <TransactionReceiptDescription>
+                {values.description}
+              </TransactionReceiptDescription>
+            )}
+          </TransactionReceipt>
+
+          <TransactionReceipt type="ticket">
+            <TransactionReceiptItem
+              label={intl.formatMessage({
+                id: 'transactions.source',
+                defaultMessage: 'Source'
+              })}
+              value={
+                <div className="flex flex-col">
+                  {values.source?.map((source, index) => (
+                    <p key={index} className="underline">
+                      {source.account}
+                    </p>
+                  ))}
+                </div>
+              }
+            />
+            <TransactionReceiptItem
+              label={intl.formatMessage({
+                id: 'transactions.destination',
+                defaultMessage: 'Destination'
+              })}
+              value={
+                <div className="flex flex-col">
+                  {values.destination?.map((destination, index) => (
+                    <p key={index} className="underline">
+                      {destination.account}
+                    </p>
+                  ))}
+                </div>
+              }
+            />
+            <TransactionReceiptItem
+              label={intl.formatMessage({
+                id: 'common.value',
+                defaultMessage: 'Value'
+              })}
+              value={`${values.asset} ${values.value}`}
+            />
+            <Separator orientation="horizontal" />
+            {values.source?.map((source, index) => (
+              <TransactionReceiptOperation
+                key={index}
+                type="debit"
+                account={source.account}
+                asset={values.asset}
+                value={source.value}
+              />
+            ))}
+            {values.destination?.map((destination, index) => (
+              <TransactionReceiptOperation
+                key={index}
+                type="credit"
+                account={destination.account}
+                asset={values.asset}
+                value={destination.value}
+              />
+            ))}
+            <Separator orientation="horizontal" />
+            <TransactionReceiptItem
+              label={intl.formatMessage({
+                id: 'transactions.create.field.chartOfAccountsGroupName',
+                defaultMessage: 'Accounting route group'
+              })}
+              value={
+                !isNil(values.chartOfAccountsGroupName) &&
+                values.chartOfAccountsGroupName !== ''
+                  ? values.chartOfAccountsGroupName
+                  : intl.formatMessage({
+                      id: 'common.none',
+                      defaultMessage: 'None'
+                    })
+              }
+            />
+            <TransactionReceiptItem
+              label={intl.formatMessage({
+                id: 'common.metadata',
+                defaultMessage: 'Metadata'
+              })}
+              value={intl.formatMessage(
+                {
+                  id: 'common.table.metadata',
+                  defaultMessage:
+                    '{number, plural, =0 {-} one {# record} other {# records}}'
+                },
+                {
+                  number: Object.keys(values.metadata ?? {}).length
+                }
+              )}
+            />
+          </TransactionReceipt>
+
+          <TransactionReceiptTicket />
+        </div>
+      </div>
+
+      <PageFooter open>
+        <PageFooterSection>
+          <Button variant="outline" onClick={() => handleCancelOpen('')}>
+            {intl.formatMessage({
+              id: 'common.cancel',
+              defaultMessage: 'Cancel'
+            })}
+          </Button>
+        </PageFooterSection>
+        <PageFooterSection>
+          <LoadingButton
+            icon={<SendHorizonal />}
+            iconPlacement="end"
+            loading={createLoading}
+            onClick={() => handleSubmitOpen('')}
+          >
+            {intl.formatMessage({
+              id: 'transactions.create.button',
+              defaultMessage: 'Create Transaction'
+            })}
+          </LoadingButton>
+        </PageFooterSection>
+      </PageFooter>
+    </>
+  )
+}
diff --git a/src/app/(routes)/transactions/create/page.tsx b/src/app/(routes)/transactions/create/page.tsx
deleted file mode 100644
index 7bed5a89..00000000
--- a/src/app/(routes)/transactions/create/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function CreateTransactionPage() {
-  return (
-    <div>
-      <h1>Create Transactions</h1>
-    </div>
-  )
-}