Tazama Demo Application

Note

Tazama Open Source Real-Time Transaction Monitoring Software for Fraud and Money Laundering Detection

Welcome to the Tazama Demo Application. This demo app is used to demo the Tazama Open Source Real-Time Transaction Monitoring System built to support any Financial Services Provider (FSP) that requires Transaction Monitoring for Fraud and Money Laundering detection. Whether that FSP is a small provider running one or 2 transactions per day or a national payment switch running at over 3,000 Transactions per second. With Tazama they can implement simple or complex rules, implement Fraud Detection controls or support Anti-Money Laundering activities. 🌍

Requirements

What you need:

• Full-Stack-Tazama-Docker - Setup the Rules and Typologies Using Docker Compose from the Tazama Repository. Follow the instructions in the readme.md
• 💻 Demo UI - Clone this repository and use the easy to setup UI to demo the Tazama Open Source Real-Time Transaction Monitoring System that dynamically builds the UI based on the configured rules and typologies

Table of Contents

• Tazama Demo Application
  • Requirements
  • Table of Contents
  • Getting Started
    • Local Setup
    • Network Setup
    • Setup UI
    • Settings Screen
  • Tag and Release
    • Versioning
    • Tag, Build and Push to Docker Hub
    • Reverting version changes if the build fails
    • Create Docker Image for Dev Testing
  • Application Structure & Documentation Links
    • Overview
    • Chart
    • Folder Structure
    • Package Documentation Links
  • License
  • Contributors

Getting Started

Local Setup

To get started by running the demo locally, follow these steps:

1. Fork & clone repository:

*Don't forget to ⭐ star and fork it first :)

ssh method

git clone git@github.com:tazama-lf/tazama-demo.git

or

https method

git clone https://github.com/tazama-lf/tazama-demo.git

1. Setup

add your GH_TOKEN to the .npmrc file ${GH_TOKEN}

3. Install the dependencies:

yarn install --frozen-lockfile

4. Create a new .env file and copy the contents of the env_sample file to the newly created .env

NODE_ENV=dev
NEXT_PUBLIC_URL="http://localhost:3001"
PORT="3001"
NEXT_PUBLIC_TMS_SERVER_URL="http://localhost:5000"
NEXT_PUBLIC_TMS_KEY="no_key_set"
NEXT_PUBLIC_CMS_NATS_HOSTING="nats://localhost:14222"
NEXT_PUBLIC_NATS_USERNAME=""
NEXT_PUBLIC_NATS_PASSWORD=""
NEXT_PUBLIC_ARANGO_DB_HOSTING="http://localhost:18529"
NEXT_PUBLIC_DB_USER="root"
NEXT_PUBLIC_DB_PASSWORD=""
NEXT_PUBLIC_WS_URL="http://localhost:3001"

NEXT_PUBLIC_NATS_SUBSCRIPTIONS="['connection', '>', 'typology-999@1.0.0']"

5. Run the development server:

yarn dev

6. Open http://localhost:3001 with your browser to see the result.

Top

Network Setup

1. Follow the Full-Stack-Tazama-Docker setup guide.
2. Add the following to the Full-Stack-Tazama-Docker docker-compose.yaml found in the root directory

demo:
    image: tazamaorg/demo-ui:v1.0.16
    env_file:
      - path: ./env/demo.env
        required: true
    restart: always
    depends_on:
      - tms
      - arango
      - nats
    ports:
      - '3001:3001'

*Note - Make sure to update the image to the most recent version tazamaorg/demo-ui:{current_version} eg: v1.0.16

3. Navigate to the env directory in the Full-Stack-Tazama-Docker folder:

demo.env file:
# SPDX-License-Identifier: Apache-2.0

NODE_ENV=dev
NEXT_PUBLIC_URL="http://{server_ip_address}:3001"
PORT="3001"
NEXT_PUBLIC_TMS_SERVER_URL="http://{server_ip_address}:5000"
NEXT_PUBLIC_TMS_KEY=""
NEXT_PUBLIC_CMS_NATS_HOSTING="nats://nats:4222"
NEXT_PUBLIC_NATS_USERNAME=""
NEXT_PUBLIC_NATS_PASSWORD=""
NEXT_PUBLIC_ARANGO_DB_HOSTING="http://{server_ip_address}:18529"
NEXT_PUBLIC_DB_USER="root"
NEXT_PUBLIC_DB_PASSWORD=""
NEXT_PUBLIC_WS_URL="http://{your_machines_ip_address}:3001"

NEXT_PUBLIC_NATS_SUBSCRIPTIONS="['connection', '>', 'typology-999@1.0.0']"

4. From the Full-Stack-Tazama-Docker directory run:

   docker compose pull demo

   then:

   docker compose up demo -d

5. Navigate to: http://localhost:3001

6. To bring the demo container down run:

   docker compose down demo --remove-orphans

Top

Setup UI

1. First Load

2. Click the gear icon on the top right for Settings

Settings Screen

• TMS API Host URL: http://localhost:5000

  *Check what port number is being used by the TMS server on the docker instance (Default Port: 5000)

• CMS NATS Hosting: http://localhost:14222 if run outside of docker-compose else nats://nats:4222

  *Check what port number is being used by the NATS server on the docker instance (Default Port: 4222)

• Arango DB Hosting: http://localhost:18529

  *Check what port number is being used by the TMS server on the docker instance (Default Port: 8529)

• Websocket IP Address: http://localhost:3001

  *If run locally use http://localhost:3001 else if run on a network or hosted use http://{your_ip_address}:3001 (Default Port: 3001)

Top

Tag and Release

Versioning

Format: v1.0.16

Given a version number MAJOR.MINOR.PATCH, increment the:

MAJOR version when you make incompatible API changes, MINOR version when you add functionality in a backwards-compatible manner, and PATCH version when you make backwards-compatible bug fixes. Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.

In this section the following script will update the PATCH version in the package.json file and update the docker-compose.dev.yml file.

Top

Tag, Build and Push to Docker Hub

1. From the root of the project directory run:

   sudo chmod +x ./tag.sh

2. When you are ready to create a new image, run ./tag.sh from the command line.

   ./tag.sh

   *This will build the Docker Image and Push it to Docker Hub

Top

Reverting version changes if the build fails

If the build fails run the following script to revert changes made to the docker-compose.dev.yml and the package.json files.

1. From the root of the project directory run:

   sudo chmod +x ./revertTag.sh

2. When you are ready to create a new image, run ./tag.sh from the command line.

   ./revertTag.sh

3. Fix the build issues and run the ./tag.sh script again to Tag and Release the Demo

Top

Create Docker Image for Dev Testing

1. Build the Docker image

   COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker compose -f docker-compose.dev.yml build

2. Tag the Docker Image

   docker tag tazamaorg/demo-ui:{version} tazamaorg/demo-ui:{version}-dev

   *Note: Check The docker-compose.dev.yml file to see what the version will be and update above command by replacing {version} with eg. v1.0.16

3. Push the image to docker hub

   If you want to push the Docker image to Dockerhub for a distribution and testing:

   docker push tazamaorg/demo-ui:{version}-dev

   *Note: Check The docker-compose.dev.yml file to see what the version will be and update above command by replacing {version} with eg. v1.0.16

4. To use the Docker Image in the Full-Stack-Tazama-Docker stack, update the following:

   demo:
     image: tazamaorg/demo-ui:{version}-dev
     env_file:
       - path: ./env/demo.env
         required: true
     restart: always
     depends_on:
       - tms
       - arango
       - nats
     ports:
       - '3001:3001'

   *Note: Check The docker-compose.dev.yml file to see what the version will be and update above command by replacing {version} with eg. v1.0.16

Top

Application Structure & Documentation Links

Overview

The Tazama Demo application is developed using NextJS 14 running a custom backend nodejs server. The Custom server allows the integration with NATS which communicates to the frontend with the use of SocketIO to stream data to the FE SocketIO-client.

The application manages state by using Context, Actions, Reducers and Providers for more global state but certain components also make use of React useState. Configuration data is persisted with localState as well as PACS008, PACS002, debtors and creditors data.

Chart

flowchart TD
%% Nodes
    A("TAZAMA DEMO")
    B("APP")
    C("COMPONENTS")
    D("SCRIPTS")
    E("STORE")
    F("UTILS")
    G("PUBLIC")
    %% H("ROUTES & LAYOUT")
    %% I("APPLICATION COMPONENTS")

%% Edge connections between nodes
   A--"Layouts, Routing & API"-->B
   A--"All App Components"-->C
   A--"Automation Scripts"-->D
   A--"State Management (React Context)"-->E
   A--"Utils, DB Connection & Rule Functions"-->F
   A--"Images"-->G

Loading

Folder Structure

• Tazama Demo - Base Folder:

  Custom Server - Contains WebSocket and NATS Connections
  Package Management - Package.json
  Application Settings and configurations
  

• App Folder:

  Application Layout
  Main Page
  Settings Page
  Handles navigation
  

• Components Folder:

  Debtor & Creditor Profile Components
  Debtor & Creditor Devices Components
  Modals
  Rule Results Component
  Typology Results Component
  Status Indicator Component
  Time Component
  Loader Component
  

• Scripts Folder:

  Automation Scripts used by tag.sh and revertTag.sh shell scripts for Automating Versioning and Build Tags (Docker & Application)
  The tag.sh script also builds and pushes the docker image to docker hub. 
  The revertTag.sh script will revert the version of the docker tag and application version to the previous build.
  

• Store Folder:

  Application State Management.
  React Context is used for global state management
  Entities - Entities State and Local Storage Management
  Processor - Rule & Typology State Management
  

• Utils Folder:

  Any Utilities for custom formatting, Looking up descriptions etc.
  Database connection and Queries.
  

• Public Folder:

  All images used by the app.
  

Top

Package Documentation Links

• NATS - NATS Documentation *Backend
• SocketIO - Socket IO *Backend
• SocketIO Client - Socket IO Client *Frontend
• Next.js 14 - Next.js *Frontend
• Frms-coe-lib - frms-coe-lib

Top

License

This project is licensed under the Apache License Version 2.0. For more information, see the LICENSE file.

Contributors

Detmar Ruhfus 💻 📖	Paul Von Zeuner 💻	Sahra Amir 💻	Oliver Vermeulen 💻
Add your contributions

Top