Merge pull request #11 from hallisonbrancalhao/feature/dashboard

Feature/dashboard

Author: hallisonbrancalhao

Diff for: apps/bytebank/public/assets/icons/avatar.svg

@@ -1,22 +1,23 @@
 import { ApplicationConfig, inject, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { appRoutes } from './app.routes';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { provideApollo } from 'apollo-angular';
 import { HttpLink } from 'apollo-angular/http';
 import { InMemoryCache } from '@apollo/client';
 import { environment } from '../environments/environment.dev';
+import { loggingInterceptor } from '../interceptors/http.interceptos';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideApollo(() => {
       const httpLink = inject(HttpLink);
       return {
-        link: httpLink.create({ uri: environment.apiUrl }),
+        link: httpLink.create({ uri: `${environment.apiUrl}/graphql` }),
         cache: new InMemoryCache(),
       };
     }),
-    provideHttpClient(),
+    provideHttpClient(withInterceptors([loggingInterceptor])),
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(appRoutes),
   ],

Diff for: apps/bytebank/public/assets/icons/close_icon.svg

@@ -1,5 +1,5 @@
 export const environment = {
   env: 'dev',
   production: false,
-  apiUrl: 'http://localhost:3000/graphql',
+  apiUrl: 'http://localhost:3000',
 };

Diff for: apps/bytebank/public/assets/icons/eye.svg

@@ -1,5 +1,5 @@
 export const environment = {
   env: 'prod',
   production: true,
-  apiUrl: 'https://fiap-tech-challenge-api-production.up.railway.app/graphql',
+  apiUrl: 'https://fiap-tech-challenge-api-production.up.railway.app',
 };

Diff for: apps/bytebank/public/assets/icons/icon_menu.svg

@@ -0,0 +1,15 @@
+import { inject, } from '@angular/core';
+import { HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from '../environments/environment.dev';
+import { AuthFacade } from '@fiap-tech-challenge/shared-data-access';
+
+export function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
+  const baseUrl = environment.apiUrl;
+  const authToken = inject(AuthFacade).token$();
+  const newReq = req.clone({
+    url: `${baseUrl}${req.url}`,
+    headers: req.headers.append('Authorization', `Bearer ${authToken}`),
+  });
+  return next(newReq);
+}

Diff for: apps/bytebank/public/assets/images/byte-logo-white.png

@@ -8,7 +8,32 @@ module.exports = {
     ...createGlobPatternsForDependencies(__dirname),
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+        primary: '#004D61',
+        secondary: '#FF5031',
+        tertiary: '#DEE9EA',
+        quarternary: '#F8F8F8',
+        black: '#000000',
+        highlight: '#47A138',
+        gray: {
+          background: '#CBCBCB'
+        }
+      },
+      fontFamily: {
+        inter: ['var(--font-inter)', 'Inter', 'sans-serif']
+      },
+      fontSize: {
+        sm: ['0.812rem', { lineHeight: '0.975rem' }],
+        '2xl': ['1.562rem', { lineHeight: '1.875rem' }]
+      },
+      screens: {
+        sm: '430',
+        md: '780'
+      }
+    },
   },
   plugins: [],
 };

Diff for: apps/bytebank/public/assets/images/pixels-right-top.png

@@ -1 +1,2 @@
-export * from './lib/dashboard-data-access';
+export * from './lib/infrastructure';
+export * from './lib/application';

Diff for: apps/bytebank/public/assets/images/pixes-left-bottom.png

@@ -0,0 +1 @@
+export * from './transaction.facade'

Diff for: apps/bytebank/src/app/app.config.ts

@@ -0,0 +1,54 @@
+import { DestroyRef, inject, Injectable, signal } from '@angular/core';
+import { TransactionRepository } from '../infrastructure';
+import { Transaction, TransactionsTypes, Amount, CreateTransaction } from '@fiap-tech-challenge/dashboard-domain';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { shareReplay } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class TransactionFacade {
+  #repository = inject(TransactionRepository)
+  #destroyRef = inject(DestroyRef)
+
+  #transactions = signal<Transaction[]>([])
+  transactions$ = this.#transactions.asReadonly()
+
+  #transaction = signal<Transaction | null>(null)
+  transaction$ = this.#transaction.asReadonly()
+
+  #amount = signal<number>(0)
+  amount$ = this.#amount.asReadonly()
+
+  #types = signal<TransactionsTypes[]>([])
+  types$ = this.#types.asReadonly()
+
+  getTransactions() {
+    return this.#repository.getTransactions()
+      .pipe(shareReplay<Transaction[]>(),takeUntilDestroyed(this.#destroyRef)).subscribe({
+      next: (transactions) => this.#transactions.set(transactions)
+    })
+  }
+
+  createTransaction(transaction: CreateTransaction) {
+    return this.#repository.createTransaction(transaction).pipe(takeUntilDestroyed(this.#destroyRef)).subscribe({
+      next: ({ type, value, createdAt }) => {
+        this.#transactions.set([...this.transactions$(), { type, value, createdAt } as Transaction]);
+        this.getBalance()
+      }
+    })
+  }
+
+  getBalance() {
+    return this.#repository
+      .getAmount()
+      .pipe(shareReplay<Amount>(), takeUntilDestroyed(this.#destroyRef))
+      .subscribe(({ balance }) => {
+        this.#amount.set(balance);
+      });
+  }
+
+  getTypes() {
+    return this.#repository.getTypes()
+      .pipe(shareReplay<TransactionsTypes[]>(),takeUntilDestroyed(this.#destroyRef))
+      .subscribe((types) => this.#types.set(types))
+  }
+}

Diff for: apps/bytebank/src/environments/environment.dev.ts

@@ -0,0 +1 @@
+export * from './transaction.repository'

Diff for: apps/bytebank/src/environments/environment.ts

@@ -0,0 +1,24 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { Transaction, TransactionsTypes, Amount, CreateTransaction } from '@fiap-tech-challenge/dashboard-domain';
+
+@Injectable({ providedIn: 'root' })
+export class TransactionRepository {
+  #http = inject(HttpClient)
+
+  getTransactions() {
+    return this.#http.get<Transaction[]>(`/transactions`)
+  }
+
+  createTransaction(transaction: CreateTransaction) {
+    return this.#http.post<Partial<Transaction>>(`/transactions`, transaction)
+  }
+
+  getAmount() {
+    return this.#http.get<Amount>('/transactions/balance')
+  }
+
+  getTypes() {
+    return this.#http.get<TransactionsTypes[]>('/transactions/types')
+  }
+}

Diff for: apps/bytebank/src/interceptors/http.interceptos.ts

@@ -1 +1 @@
-export * from './lib/dashboard-domain';
+export * from './public-api';

Diff for: apps/bytebank/tailwind.config.js

@@ -0,0 +1,4 @@
+export * from './types/transaction.interface'
+export * from './types/transactions-types.interface';
+export * from './types/amount.interface'
+export * from './types/create-transaction.interface'

Diff for: libs/dashboard/data-access/src/index.ts

@@ -0,0 +1,3 @@
+export interface Amount {
+  balance: number;
+}

Diff for: libs/dashboard/data-access/src/lib/application/index.ts

@@ -0,0 +1,4 @@
+export interface CreateTransaction {
+  value: number;
+  type: string;
+}

Diff for: libs/dashboard/data-access/src/lib/application/transaction.facade.ts

@@ -0,0 +1,5 @@
+export interface Transaction {
+  value: number;
+  createdAt: Date;
+  type: string;
+}

Diff for: libs/dashboard/data-access/src/lib/dashboard-data-access.ts

@@ -0,0 +1,4 @@
+export interface TransactionsTypes {
+  value: string;
+  display: string;
+}

Diff for: libs/dashboard/data-access/src/lib/infrastructure/index.ts

@@ -0,0 +1 @@
+export * from './lib'

Diff for: libs/dashboard/data-access/src/lib/infrastructure/transaction.repository.ts

@@ -0,0 +1,3 @@
+import baseConfig from '../../../eslint.config.mjs';
+
+export default [...baseConfig];

Diff for: libs/dashboard/domain/src/index.ts

@@ -0,0 +1,9 @@
+{
+  "name": "feature-extract",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/dashboard/feature-extract/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project feature-extract --web",
+  "targets": {}
+}

Diff for: libs/dashboard/domain/src/lib/dashboard-domain.ts

@@ -0,0 +1 @@
+export * from './public-api';

Diff for: libs/dashboard/domain/src/lib/index.ts

@@ -0,0 +1,18 @@
+<div class="bg-gray-50 p-6 rounded-xl shadow-md max-w-md mx-auto">
+  <h2 class="text-xl font-bold mb-4">Extrato</h2>
+
+  <div *ngFor="let transaction of transactions$()" class="border-l-4 pl-3 mb-3"
+       [ngClass]="transaction.value >= 0 ? 'border-green-500' : 'border-red-500'">
+
+    <p class="text-gray-400 text-sm">{{ transaction.createdAt | date: "dd/mm/yyyy dd:mm" }}</p>
+    <div class="flex justify-between items-center">
+      <p class="text-gray-800">{{ transaction.type | titlecase }}</p>
+    </div>
+
+    <p class="text-lg font-bold" [ngClass]="transaction.value >= 0 ? 'text-black' : 'text-red-600'">
+      {{ transaction.value | currency: 'BRL' }}
+    </p>
+
+    <hr class="border-green-300 mt-1" />
+  </div>
+</div>

Diff for: libs/dashboard/domain/src/lib/types/amount.interface.ts

@@ -0,0 +1,25 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { CurrencyPipe, DatePipe, NgClass, NgForOf, TitleCasePipe, UpperCasePipe } from '@angular/common';
+import { TransactionFacade } from '@fiap-tech-challenge/dashboard-data-access';
+
+@Component({
+  selector: 'app-dashboard-extract',
+  templateUrl: './extract.component.html',
+  standalone: true,
+  imports: [
+    NgClass,
+    NgForOf,
+    DatePipe,
+    CurrencyPipe,
+    TitleCasePipe,
+  ],
+})
+export class ExtractComponent implements OnInit {
+  #transactionsFacade = inject(TransactionFacade);
+
+  transactions$ = this.#transactionsFacade.transactions$;
+
+  ngOnInit() {
+    this.#transactionsFacade.getTransactions();
+  }
+}

Diff for: libs/dashboard/domain/src/lib/types/create-transaction.interface.ts

@@ -0,0 +1 @@
+export * from './extract/extract.component'

Diff for: libs/dashboard/domain/src/lib/types/transaction.interface.ts

@@ -0,0 +1 @@
+export * from './lib/components'

Diff for: libs/dashboard/domain/src/lib/types/transactions-types.interface.ts

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "importHelpers": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noPropertyAccessFromIndexSignature": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

Diff for: libs/dashboard/domain/src/public-api.ts

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"]
+}

Diff for: libs/dashboard/feature-extract/README.md

@@ -0,0 +1,3 @@
+import baseConfig from '../../../eslint.config.mjs';
+
+export default [...baseConfig];

Diff for: libs/dashboard/feature-extract/eslint.config.mjs

@@ -0,0 +1,9 @@
+{
+  "name": "feature-info",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/dashboard/feature-info/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project feature-info --web",
+  "targets": {}
+}

Diff for: libs/dashboard/feature-extract/project.json

@@ -0,0 +1 @@
+export * from './public-api';

Diff for: libs/dashboard/feature-extract/src/index.ts

@@ -0,0 +1,36 @@
+<div class="bg-gradient-to-b from-gray-100 to-gray-200 max-w-md mx-auto h-auto sm:h-[450px] md:min-w-[580px] rounded-lg shadow-lg sm:p-8 p-6 flex flex-col items-center sm:items-start pt-8">
+  <h2 class="text-3xl text-primary font-semibold text-center sm:text-left">Nova Transação</h2>
+
+  <form [formGroup]="form" (ngSubmit)="createTransaction()" class="mt-8 w-full flex flex-col gap-8 items-center sm:items-start">
+    <div class="w-full">
+      <label for="category" class="text-sm font-medium text-gray-600">Categoria</label>
+      <select id="category" formControlName="type" class="mt-2 block w-full p-3 rounded-lg border border-gray-300 shadow-sm focus:ring-primary focus:border-primary">
+        <option value="" disabled selected>Selecione uma categoria</option>
+        <option *ngFor="let category of types$()" [value]="category.value">
+          {{ category.display }}
+        </option>
+      </select>
+    </div>
+
+    <div class="w-full sm:w-1/2">
+      <label for="value" class="text-sm font-medium text-gray-600">Valor</label>
+      <input
+        id="value"
+        type="number"
+        step="0.01"
+        formControlName="value"
+        class="mt-2 block w-full p-3 rounded-lg border border-gray-300 shadow-sm focus:ring-primary focus:border-primary"
+      />
+      <span *ngIf="form.get('value')?.invalid && form.get('value')?.touched" class="text-red-500 text-sm mt-1">Valor inválido</span>
+    </div>
+
+    <div class="flex gap-4 flex-col sm:flex-row w-full justify-center sm:justify-start">
+      <button type="submit" [disabled]="!form.valid" class="w-full sm:w-auto mt-4 px-6 py-3 bg-primary text-white font-bold rounded-lg shadow-md hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary">
+        Salvar
+      </button>
+      <div (click)="handleReset()" class="w-full sm:w-auto mt-4 px-6 py-3 bg-gray-500 text-white font-bold rounded-lg text-center cursor-pointer hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500">
+        Limpar formulário
+      </div>
+    </div>
+  </form>
+</div>