Execution Management Frontend

A Next.js client application providing an interactive UI for managing trade executions. This project demonstrates a complete workflow for searching, creating, correcting, and canceling executions, including filters, form validations, and API integrations with a TCS backend service.

---

🚀 Features

• Search Executions: Filter executions by Exec ID, transaction time range, trade date range, and side.
• Execution Details: View detailed information in a sidebar by clicking a table row.
• Create Execution: Fill a form to create new executions, with dynamic order search and validation.
• Correct Execution: Modify an existing execution while maintaining an audit trail.
• Cancel Execution: Create cancellation entries referencing original executions.
• Pagination & Sorting: Built-in table pagination and column sorting.
• Form Validation: Real-time validation and user-friendly error messages.
• Toast Notifications: Feedback on successful actions using a toast provider.

---

📂 Project Structure

src/
├── api/                # API wrappers for execution, order, and common endpoints
├── app/
│   └── (main)/
│       └── execution/
│           ├── page.tsx     # Execution list page with search & table
│           ├── create/page.tsx   # Create Execution form page
│           ├── correction/[id]/page.tsx  # Execution correction page
│           └── cancellation/[id]/page.tsx # Execution cancellation page
├── components/
│   ├── Form/           # Reusable form label, error messages, styling helpers
│   ├── Table/          # Table component with pagination/sorting
│   └── Toast/          # Toast provider for notifications
├── utils/
│   ├── const.ts        # Constants such as dropdown options
│   └── request.ts      # Axios setup for API calls
├── public/             # Static assets (images, favicon)
├── next.config.js      # Next.js configuration and API rewrites
├── tsconfig.json       # TypeScript configuration
└── README.md           # Project documentation (this file)

---

⚙️ Getting Started

Prerequisites

• Node.js v16+ (Recommended)
• pnpm or npm

Installation

1. Clone the repository

   git clone https://git.drillinsight.com/drillinsight-95dee/tcs-react-fe-practice-oa-5c8ebeaa1f3e.git
   cd tcs-react-fe-practice-oa-5c8ebeaa1f3e

2. Install dependencies

   pnpm install

3. Configure environment

• Copy .env.example to .env and set:

  APP_ROLE=admin       # or investor
  API_BASE_URL_ADMIN=https://tcs-api.drillinsight.com/admin/api
  API_BASE_URL_INVESTOR=https://tcs-api.drillinsight.com/investor/api

4. Run in development

   pnpm dev:admin       # Start as admin role
   # or
   pnpm dev:investor    # Start as investor role

5. Access in browser

• Open http://localhost:3000/execution to view the Execution List.

---

📡 API Endpoints Used

Method	Endpoint	Description
POST	/api/v1/execution/search	Search executions with filters
GET	/api/v1/execution/:id	Fetch execution details by internal ID
POST	/api/v1/execution	Create a new execution
POST	/api/v1/execution/correct	Correct an existing execution (audit trail)
POST	/api/v1/execution/cancel	Cancel an existing execution (audit trail)
POST	/api/v1/order/search	Search orders by Exec ID (autocomplete)
GET	/api/v1/currency	Retrieve list of supported currencies

---

🛠️ Running Tests

1. UI Component Tests (if available)

   pnpm test

2. Manual API Validation

• Use the provided Postman collection to verify backend interactions and workflows.

---

🔑 Skills & Technologies

• React 18 & Next.js: Client-side rendering, routing, and API rewrites.
• TypeScript: Strong typing throughout the codebase.
• PrimeReact: UI components for inputs, buttons, tables, calendars.
• React Final Form: Form state management and validation.
• Axios: Centralized HTTP client with interceptors for auth.
• pnpm: Fast & disk-efficient package management.
• Day.js: Date manipulation and formatting.
• GitLab CI/CD: Automated build & deploy pipeline.

---

🚀 Deployment

• Pushed changes to main branch trigger the GitLab CI pipeline.
• Docker image is built and deployed to the staging server.
• Ensure APP_ROLE is set appropriately before build for correct API rewrites.